masonic - npm Package Compare versions

Comparing version 2.0.6 to 2.0.7

dist/cjs/index.js

@@ -8,3 +8,3 @@ 'use strict'
 
-var _react = _interopRequireWildcard(require('react'))
+var _react = _interopRequireDefault(require('react'))
 
@@ -33,44 +33,2 @@ var _resizeObserverPolyfill = _interopRequireDefault(
 
-function _getRequireWildcardCache() {
-  if (typeof WeakMap !== 'function') return null
-  var cache = new WeakMap()
-  _getRequireWildcardCache = function() {
-    return cache
-  }
-  return cache
-}
-
-function _interopRequireWildcard(obj) {
-  if (obj && obj.__esModule) {
-    return obj
-  }
-  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
-    return {default: obj}
-  }
-  var cache = _getRequireWildcardCache()
-  if (cache && cache.has(obj)) {
-    return cache.get(obj)
-  }
-  var newObj = {}
-  var hasPropertyDescriptor =
-    Object.defineProperty && Object.getOwnPropertyDescriptor
-  for (var key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      var desc = hasPropertyDescriptor
-        ? Object.getOwnPropertyDescriptor(obj, key)
-        : null
-      if (desc && (desc.get || desc.set)) {
-        Object.defineProperty(newObj, key, desc)
-      } else {
-        newObj[key] = obj[key]
-      }
-    }
-  }
-  newObj.default = obj
-  if (cache) {
-    cache.set(obj, newObj)
-  }
-  return newObj
-}
-
 function _interopRequireDefault(obj) {
@@ -80,19 +38,10 @@ return obj && obj.__esModule ? obj : {default: obj}
 
-function _extends() {
-  _extends =
-    Object.assign ||
-    function(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i]
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key]
-          }
-        }
-      }
-      return target
-    }
-  return _extends.apply(this, arguments)
-}
-
+const __reactCreateElement__ = _react.default.createElement
+const {
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+  useImperativeHandle,
+} = _react.default
 const defaultScrollFps = 8
@@ -316,5 +265,9 @@ const emptyObj = {}
   )
-  const [isScrolling, setIsScrolling] = (0, _react.useState)(false)
-  const isScrollingTimeout = (0, _react.useRef)()
 
+  const _ref_0 = useState(false)
+
+  const setIsScrolling = _ref_0[1]
+  const isScrolling = _ref_0[0]
+  const isScrollingTimeout = useRef()
+
   function _ref() {
@@ -342,3 +295,3 @@ // This is here to prevent premature bail outs while maintaining high resolution
 
-  ;(0, _react.useEffect)(() => _ref2, emptyArr)
+  useEffect(() => _ref2, emptyArr)
   return {
@@ -370,6 +323,13 @@ width,
 const useContainerRect = (windowWidth, windowHeight) => {
-  const [element, setElement] = (0, _react.useState)(null),
-    queryInterval = (0, _react.useRef)()
-  const [containerRect, setContainerRect] = (0, _react.useState)(defaultRect)
+  const _ref_1 = useState(null),
+    queryInterval = useRef()
 
+  const setElement = _ref_1[1]
+  const element = _ref_1[0]
+
+  const _ref_2 = useState(defaultRect)
+
+  const setContainerRect = _ref_2[1]
+  const containerRect = _ref_2[0]
+
   function _ref3() {
@@ -427,3 +387,3 @@ // @ts-ignore
 const assignUserStyle = (0, _memoizeOne.default)(
-  (containerStyle, userStyle) => _extends({}, containerStyle, userStyle),
+  (containerStyle, userStyle) => Object.assign({}, containerStyle, userStyle),
   (args, pargs) => args[0] === pargs[0] && args[1] === pargs[1]
@@ -433,3 +393,3 @@ )
   [WeakMap, _oneKeyMap.default],
-  (itemStyle, userStyle) => _extends({}, itemStyle, userStyle)
+  (itemStyle, userStyle) => Object.assign({}, itemStyle, userStyle)
 )
@@ -462,16 +422,21 @@
 const SizeObserver = props => {
-  const [element, setElement] = (0, _react.useState)(null)
-  ;(0, _passiveLayoutEffect.default)(() => {
-    if (element !== null) {
-      const observedElement = element
-      props.observerRef(observedElement)
-      return () => {
-        props.resizeObserver.unobserve(observedElement)
-      }
-    }
-  }, [element, props.observerRef, props.resizeObserver])
-  return _react.default.createElement(
+  const _ref_3 = useState(null)
+
+  const setElement = _ref_3[1]
+  const element = _ref_3[0]
+
+  function _ref4() {
+    element !== null && props.resizeObserver.unobserve(element)
+  }
+
+  useEffect(() => {
+    return _ref4
+  }, [element, props.resizeObserver])
+  return __reactCreateElement__(
     props.as,
     {
-      ref: setElement,
+      ref: element => {
+        props.observerRef(element)
+        setElement(element)
+      },
       role: `${props.role}item`,
@@ -492,3 +457,3 @@ style: props.style,
 
-function _ref4(current) {
+function _ref5(current) {
   return ++current
@@ -498,14 +463,17 @@ }
 const useForceUpdate = () => {
-  const setState = (0, _react.useState)(0)[1]
-  return (0, _react.useCallback)(() => setState(_ref4), [])
+  const setState = useState(0)[1]
+  return useCallback(() => setState(_ref5), [])
 }
 
-const useForceThrottledUpdate = () => (0, _throttle.default)(0, 30)[1]
+function _ref6(current) {
+  return ++current
+}
 
+const useForceThrottledUpdate = () => {
+  const setState = (0, _throttle.default)(0, 30)[1]
+  return useCallback(() => setState(_ref6), [])
+}
+
 const elementsCache = new WeakMap()
 
-function _ref5(id) {
-  return ++id
-}
-
 const FreeMasonry = _react.default.forwardRef(
@@ -539,3 +507,3 @@ (
   ) => {
-    const didMount = (0, _react.useRef)('0')
+    const didMount = useRef('0')
     const forceUpdate = useForceUpdate()
@@ -559,6 +527,6 @@ const forceThrottledUpdate = useForceThrottledUpdate()
 
-    const itemPositioner = (0, _react.useRef)(initPositioner())
-    const positionCache = (0, _react.useRef)(createPositionCache())
+    const itemPositioner = useRef(initPositioner())
+    const positionCache = useRef(createPositionCache())
 
-    function _ref6(entries) {
+    function _ref7(entries) {
       const updates = []
@@ -601,17 +569,17 @@
 
-        forceThrottledUpdate(_ref5)
+        forceThrottledUpdate()
       }
     }
 
-    const resizeObserver = (0, _react.useState)(
-      () => new _resizeObserverPolyfill.default(_ref6)
+    const resizeObserver = useState(
+      () => new _resizeObserverPolyfill.default(_ref7)
     )[0]
-    const stopIndex = (0, _react.useRef)()
-    const startIndex = (0, _react.useRef)(0)
-    const prevStartIndex = (0, _react.useRef)()
-    const prevStopIndex = (0, _react.useRef)()
-    const prevChildren = (0, _react.useRef)([])
-    const prevRange = (0, _react.useRef)([])
+    const stopIndex = useRef()
+    const startIndex = useRef(0)
+    const prevStartIndex = useRef()
+    const prevStopIndex = useRef()
+    const prevChildren = useRef([])
+    const prevRange = useRef([])
 
-    function _ref7() {
+    function _ref8() {
       positionCache.current = createPositionCache()
@@ -621,6 +589,6 @@ forceUpdate()
 
-    ;(0, _react.useImperativeHandle)(
+    useImperativeHandle(
       ref,
       () => ({
-        clearPositions: _ref7,
+        clearPositions: _ref8,
       }),
@@ -631,19 +599,23 @@ emptyArr
 
-    ;(0, _react.useEffect)(() => {
+    ;(0, _passiveLayoutEffect.default)(() => {
       didMount.current = '1'
       const prevPositioner = itemPositioner.current
-      const nextPositionCache = createPositionCache()
-      const nextItemPositioner = initPositioner()
+      const cacheSize = positionCache.current.getSize()
+      positionCache.current = createPositionCache()
+      itemPositioner.current = initPositioner()
 
-      for (let index = 0; index < positionCache.current.getSize(); index++) {
+      for (let index = 0; index < cacheSize; index++) {
         const pos = prevPositioner.get(index)
 
         if (pos !== void 0) {
-          const item = nextItemPositioner.set(index, pos.height)
-          nextPositionCache.setPosition(index, item.left, item.top, pos.height)
+          const item = itemPositioner.current.set(index, pos.height)
+          positionCache.current.setPosition(
+            index,
+            item.left,
+            item.top,
+            pos.height
+          )
         }
       }
 
-      itemPositioner.current = nextItemPositioner
-      positionCache.current = nextPositionCache
       forceUpdate()
@@ -660,8 +632,8 @@ }, [width, columnWidth, columnGutter, columnCount]) // calls the onRender callback if the rendered indices changed
 
-    function _ref8() {
+    function _ref9() {
       resizeObserver.disconnect()
     }
 
-    ;(0, _react.useEffect)(() => _ref8, emptyArr)
-    const setItemRef = (0, _react.useCallback)(
+    useEffect(() => _ref9, emptyArr)
+    const setItemRef = useCallback(
       (0, _trieMemoize.default)([{}], index => el => {
@@ -741,3 +713,3 @@ if (resizeObserver !== null && el !== null) {
           children.push(
-            _react.default.createElement(
+            __reactCreateElement__(
               SizeObserver,
@@ -755,3 +727,3 @@ {
               },
-              _react.default.createElement(render, {
+              __reactCreateElement__(render, {
                 key,
@@ -791,3 +763,3 @@ index,
         children.push(
-          _react.default.createElement(
+          __reactCreateElement__(
             SizeObserver,
@@ -805,3 +777,3 @@ {
             },
-            _react.default.createElement(render, {
+            __reactCreateElement__(render, {
               key,
@@ -826,3 +798,3 @@ index,
     )
-    return _react.default.createElement(as, {
+    return __reactCreateElement__(as, {
       ref: containerRef,
@@ -880,5 +852,5 @@ id,
       [rect, containerRef] = useContainerRect(width, height)
-    return _react.default.createElement(
+    return __reactCreateElement__(
       FreeMasonry,
-      _extends(
+      Object.assign(
         {
@@ -933,5 +905,5 @@ width: rect.width,
 const List = props =>
-  _react.default.createElement(
+  __reactCreateElement__(
     Masonry,
-    _extends(
+    Object.assign(
       {
@@ -1092,3 +1064,3 @@ role: 'list',
   } = options
-  return (0, _react.useCallback)(
+  return useCallback(
     (startIndex, stopIndex, items) => {
@@ -1095,0 +1067,0 @@ const unloadedRanges = scanForUnloadedRanges(

dist/es/index.js

 import _pt from 'prop-types'
-
-function _extends() {
-  _extends =
-    Object.assign ||
-    function(target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i]
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key]
-          }
-        }
-      }
-      return target
-    }
-  return _extends.apply(this, arguments)
-}
-
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-  useRef,
-  useImperativeHandle,
-} from 'react'
+import React from 'react'
+const __reactCreateElement__ = React.createElement
+const {useCallback, useEffect, useState, useRef, useImperativeHandle} = React
 import ResizeObserver from 'resize-observer-polyfill'
@@ -257,3 +235,7 @@ import trieMemoize from 'trie-memoize'
   )
-  const [isScrolling, setIsScrolling] = useState(false)
+
+  const _ref_0 = useState(false)
+
+  const setIsScrolling = _ref_0[1]
+  const isScrolling = _ref_0[0]
   const isScrollingTimeout = useRef()
@@ -307,6 +289,13 @@
 export const useContainerRect = (windowWidth, windowHeight) => {
-  const [element, setElement] = useState(null),
+  const _ref_1 = useState(null),
     queryInterval = useRef()
-  const [containerRect, setContainerRect] = useState(defaultRect)
 
+  const setElement = _ref_1[1]
+  const element = _ref_1[0]
+
+  const _ref_2 = useState(defaultRect)
+
+  const setContainerRect = _ref_2[1]
+  const containerRect = _ref_2[0]
+
   function _ref3() {
@@ -393,16 +382,21 @@ // @ts-ignore
 const SizeObserver = props => {
-  const [element, setElement] = useState(null)
-  useLayoutEffect(() => {
-    if (element !== null) {
-      const observedElement = element
-      props.observerRef(observedElement)
-      return () => {
-        props.resizeObserver.unobserve(observedElement)
-      }
-    }
-  }, [element, props.observerRef, props.resizeObserver])
-  return React.createElement(
+  const _ref_3 = useState(null)
+
+  const setElement = _ref_3[1]
+  const element = _ref_3[0]
+
+  function _ref4() {
+    element !== null && props.resizeObserver.unobserve(element)
+  }
+
+  useEffect(() => {
+    return _ref4
+  }, [element, props.resizeObserver])
+  return __reactCreateElement__(
     props.as,
     {
-      ref: setElement,
+      ref: element => {
+        props.observerRef(element)
+        setElement(element)
+      },
       role: props.role + 'item',
@@ -423,3 +417,3 @@ style: props.style,
 
-function _ref4(current) {
+function _ref5(current) {
   return ++current
@@ -430,13 +424,15 @@ }
   const setState = useState(0)[1]
-  return useCallback(() => setState(_ref4), [])
+  return useCallback(() => setState(_ref5), [])
 }
 
-const useForceThrottledUpdate = () => useThrottle(0, 30)[1]
+function _ref6(current) {
+  return ++current
+}
 
-const elementsCache = new WeakMap()
-
-function _ref5(id) {
-  return ++id
+const useForceThrottledUpdate = () => {
+  const setState = useThrottle(0, 30)[1]
+  return useCallback(() => setState(_ref6), [])
 }
 
+const elementsCache = new WeakMap()
 export const FreeMasonry = React.forwardRef(
@@ -492,3 +488,3 @@ (
 
-    function _ref6(entries) {
+    function _ref7(entries) {
       const updates = []
@@ -531,7 +527,7 @@
 
-        forceThrottledUpdate(_ref5)
+        forceThrottledUpdate()
       }
     }
 
-    const resizeObserver = useState(() => new ResizeObserver(_ref6))[0]
+    const resizeObserver = useState(() => new ResizeObserver(_ref7))[0]
     const stopIndex = useRef()
@@ -544,3 +540,3 @@ const startIndex = useRef(0)
 
-    function _ref7() {
+    function _ref8() {
       positionCache.current = createPositionCache()
@@ -553,3 +549,3 @@ forceUpdate()
       () => ({
-        clearPositions: _ref7,
+        clearPositions: _ref8,
       }),
@@ -560,19 +556,23 @@ emptyArr
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       didMount.current = '1'
       const prevPositioner = itemPositioner.current
-      const nextPositionCache = createPositionCache()
-      const nextItemPositioner = initPositioner()
+      const cacheSize = positionCache.current.getSize()
+      positionCache.current = createPositionCache()
+      itemPositioner.current = initPositioner()
 
-      for (let index = 0; index < positionCache.current.getSize(); index++) {
+      for (let index = 0; index < cacheSize; index++) {
         const pos = prevPositioner.get(index)
 
         if (pos !== void 0) {
-          const item = nextItemPositioner.set(index, pos.height)
-          nextPositionCache.setPosition(index, item.left, item.top, pos.height)
+          const item = itemPositioner.current.set(index, pos.height)
+          positionCache.current.setPosition(
+            index,
+            item.left,
+            item.top,
+            pos.height
+          )
         }
       }
 
-      itemPositioner.current = nextItemPositioner
-      positionCache.current = nextPositionCache
       forceUpdate()
@@ -589,7 +589,7 @@ }, [width, columnWidth, columnGutter, columnCount]) // calls the onRender callback if the rendered indices changed
 
-    function _ref8() {
+    function _ref9() {
       resizeObserver.disconnect()
     }
 
-    useEffect(() => _ref8, emptyArr)
+    useEffect(() => _ref9, emptyArr)
     const setItemRef = useCallback(
@@ -670,3 +670,3 @@ trieMemoize([{}], index => el => {
           children.push(
-            React.createElement(
+            __reactCreateElement__(
               SizeObserver,
@@ -684,3 +684,3 @@ {
               },
-              React.createElement(render, {
+              __reactCreateElement__(render, {
                 key,
@@ -720,3 +720,3 @@ index,
         children.push(
-          React.createElement(
+          __reactCreateElement__(
             SizeObserver,
@@ -734,3 +734,3 @@ {
             },
-            React.createElement(render, {
+            __reactCreateElement__(render, {
               key,
@@ -755,3 +755,3 @@ index,
     )
-    return React.createElement(as, {
+    return __reactCreateElement__(as, {
       ref: containerRef,
@@ -803,3 +803,3 @@ id,
       [rect, containerRef] = useContainerRect(width, height)
-    return React.createElement(
+    return __reactCreateElement__(
       FreeMasonry,
@@ -850,5 +850,5 @@ Object.assign(
 export const List = props =>
-  React.createElement(
+  __reactCreateElement__(
     Masonry,
-    _extends(
+    Object.assign(
       {
@@ -855,0 +855,0 @@ role: 'list',

package.json

 {
   "name": "masonic",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "homepage": "https://github.com/jaredLunde/masonic#readme",
@@ -69,2 +69,3 @@ "repository": "github:jaredLunde/masonic",
     "@typescript-eslint/parser": "latest",
+    "babel-plugin-optimize-react": "^0.0.4",
     "babel-plugin-typescript-to-proptypes": "^1.1.0",
@@ -71,0 +72,0 @@ "cross-env": "latest",

No alert changes

Worsened metrics

Total package byte prevSize

98460

decreased by-1.44%

Dev dependency count

28

increased by3.7%

Lines of code

2701

decreased by-1.39%

No dependency changes