virtual-scroller 1.12.2 → 1.12.4

package/modules/react/useEffectDontMountTwiceInStrictMode.js

@@ -0,0 +1,75 @@
+import { useRef, useCallback } from 'react'; // A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount
+// in "strict" mode unlike `useEffect()` and `useLayoutEffect()` do.
+// https://github.com/facebook/react/issues/26320
+
+export default function useEffectDontMountTwiceInStrictMode(useEffect, handler, dependencies) {
+  if (!Array.isArray(dependencies)) {
+    throw new Error('Dependencies argument must be an array');
+  }
+
+  var _useEffectStatus = useEffectStatus(),
+      onEffect = _useEffectStatus.onEffect;
+
+  var _usePrevousValue = usePrevousValue(dependencies),
+      onChange = _usePrevousValue.onChange;
+
+  useEffect(function () {
+    var _onEffect = onEffect(),
+        isInitialRun = _onEffect.isInitialRun;
+
+    var previousDependencies = onChange(dependencies);
+
+    if (isInitialRun || !isShallowEqualArrays(previousDependencies, dependencies)) {
+      var cleanUpFunction = handler();
+
+      if (typeof cleanUpFunction === 'function') {
+        throw new Error('An effect can\'t return a clean-up function when used with `useEffectDontMountTwiceInStrictMode()` because the clean-up function won\'t behave correctly in that case');
+      }
+    }
+  }, dependencies);
+}
+
+function useEffectStatus() {
+  var hasMounted = useRef(false);
+  var onEffect = useCallback(function () {
+    var wasAlreadyMounted = hasMounted.current;
+    hasMounted.current = true;
+    return {
+      isInitialRun: !wasAlreadyMounted
+    };
+  }, []);
+  return {
+    onEffect: onEffect
+  };
+}
+
+function usePrevousValue(value) {
+  var prevValue = useRef(value);
+  var onChange = useCallback(function (value) {
+    var previousValue = prevValue.current;
+    prevValue.current = value;
+    return previousValue;
+  }, []);
+  return {
+    onChange: onChange
+  };
+}
+
+function isShallowEqualArrays(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  var i = 0;
+
+  while (i < a.length) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+
+    i++;
+  }
+
+  return true;
+}
+//# sourceMappingURL=useEffectDontMountTwiceInStrictMode.js.map

package/modules/react/useEffectDontMountTwiceInStrictMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEffectDontMountTwiceInStrictMode.js","names":["useRef","useCallback","useEffectDontMountTwiceInStrictMode","useEffect","handler","dependencies","Array","isArray","Error","useEffectStatus","onEffect","usePrevousValue","onChange","isInitialRun","previousDependencies","isShallowEqualArrays","cleanUpFunction","hasMounted","wasAlreadyMounted","current","value","prevValue","previousValue","a","b","length","i"],"sources":["../../source/react/useEffectDontMountTwiceInStrictMode.js"],"sourcesContent":["import { useRef, useCallback } from 'react'\r\n\r\n// A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount\r\n// in \"strict\" mode unlike `useEffect()` and `useLayoutEffect()` do.\r\n// https://github.com/facebook/react/issues/26320\r\nexport default function useEffectDontMountTwiceInStrictMode(useEffect, handler, dependencies) {\r\n  if (!Array.isArray(dependencies)) {\r\n    throw new Error('Dependencies argument must be an array')\r\n  }\r\n\r\n  const { onEffect } = useEffectStatus()\r\n  const { onChange } = usePrevousValue(dependencies)\r\n\r\n  useEffect(() => {\r\n    const { isInitialRun } = onEffect()\r\n    const previousDependencies = onChange(dependencies)\r\n    if (isInitialRun || !isShallowEqualArrays(previousDependencies, dependencies)) {\r\n      const cleanUpFunction = handler()\r\n      if (typeof cleanUpFunction === 'function') {\r\n        throw new Error('An effect can\\'t return a clean-up function when used with `useEffectDontMountTwiceInStrictMode()` because the clean-up function won\\'t behave correctly in that case')\r\n      }\r\n    }\r\n  }, dependencies)\r\n}\r\n\r\nfunction useEffectStatus() {\r\n  const hasMounted = useRef(false)\r\n\r\n  const onEffect = useCallback(() => {\r\n    const wasAlreadyMounted = hasMounted.current\r\n    hasMounted.current = true\r\n    return {\r\n      isInitialRun: !wasAlreadyMounted\r\n    }\r\n  }, [])\r\n\r\n  return {\r\n    onEffect\r\n  }\r\n}\r\n\r\nfunction usePrevousValue(value) {\r\n  const prevValue = useRef(value)\r\n\r\n  const onChange = useCallback((value) => {\r\n    const previousValue = prevValue.current\r\n    prevValue.current = value\r\n    return previousValue\r\n  }, [])\r\n\r\n  return {\r\n    onChange\r\n  }\r\n}\r\n\r\nfunction isShallowEqualArrays(a, b) {\r\n  if (a.length !== b.length) {\r\n    return false\r\n  }\r\n  let i = 0\r\n  while (i < a.length) {\r\n    if (a[i] !== b[i]) {\r\n      return false\r\n    }\r\n    i++\r\n  }\r\n  return true\r\n}"],"mappings":"AAAA,SAASA,MAAT,EAAiBC,WAAjB,QAAoC,OAApC,C,CAEA;AACA;AACA;;AACA,eAAe,SAASC,mCAAT,CAA6CC,SAA7C,EAAwDC,OAAxD,EAAiEC,YAAjE,EAA+E;EAC5F,IAAI,CAACC,KAAK,CAACC,OAAN,CAAcF,YAAd,CAAL,EAAkC;IAChC,MAAM,IAAIG,KAAJ,CAAU,wCAAV,CAAN;EACD;;EAED,uBAAqBC,eAAe,EAApC;EAAA,IAAQC,QAAR,oBAAQA,QAAR;;EACA,uBAAqBC,eAAe,CAACN,YAAD,CAApC;EAAA,IAAQO,QAAR,oBAAQA,QAAR;;EAEAT,SAAS,CAAC,YAAM;IACd,gBAAyBO,QAAQ,EAAjC;IAAA,IAAQG,YAAR,aAAQA,YAAR;;IACA,IAAMC,oBAAoB,GAAGF,QAAQ,CAACP,YAAD,CAArC;;IACA,IAAIQ,YAAY,IAAI,CAACE,oBAAoB,CAACD,oBAAD,EAAuBT,YAAvB,CAAzC,EAA+E;MAC7E,IAAMW,eAAe,GAAGZ,OAAO,EAA/B;;MACA,IAAI,OAAOY,eAAP,KAA2B,UAA/B,EAA2C;QACzC,MAAM,IAAIR,KAAJ,CAAU,uKAAV,CAAN;MACD;IACF;EACF,CATQ,EASNH,YATM,CAAT;AAUD;;AAED,SAASI,eAAT,GAA2B;EACzB,IAAMQ,UAAU,GAAGjB,MAAM,CAAC,KAAD,CAAzB;EAEA,IAAMU,QAAQ,GAAGT,WAAW,CAAC,YAAM;IACjC,IAAMiB,iBAAiB,GAAGD,UAAU,CAACE,OAArC;IACAF,UAAU,CAACE,OAAX,GAAqB,IAArB;IACA,OAAO;MACLN,YAAY,EAAE,CAACK;IADV,CAAP;EAGD,CAN2B,EAMzB,EANyB,CAA5B;EAQA,OAAO;IACLR,QAAQ,EAARA;EADK,CAAP;AAGD;;AAED,SAASC,eAAT,CAAyBS,KAAzB,EAAgC;EAC9B,IAAMC,SAAS,GAAGrB,MAAM,CAACoB,KAAD,CAAxB;EAEA,IAAMR,QAAQ,GAAGX,WAAW,CAAC,UAACmB,KAAD,EAAW;IACtC,IAAME,aAAa,GAAGD,SAAS,CAACF,OAAhC;IACAE,SAAS,CAACF,OAAV,GAAoBC,KAApB;IACA,OAAOE,aAAP;EACD,CAJ2B,EAIzB,EAJyB,CAA5B;EAMA,OAAO;IACLV,QAAQ,EAARA;EADK,CAAP;AAGD;;AAED,SAASG,oBAAT,CAA8BQ,CAA9B,EAAiCC,CAAjC,EAAoC;EAClC,IAAID,CAAC,CAACE,MAAF,KAAaD,CAAC,CAACC,MAAnB,EAA2B;IACzB,OAAO,KAAP;EACD;;EACD,IAAIC,CAAC,GAAG,CAAR;;EACA,OAAOA,CAAC,GAAGH,CAAC,CAACE,MAAb,EAAqB;IACnB,IAAIF,CAAC,CAACG,CAAD,CAAD,KAASF,CAAC,CAACE,CAAD,CAAd,EAAmB;MACjB,OAAO,KAAP;IACD;;IACDA,CAAC;EACF;;EACD,OAAO,IAAP;AACD"}

package/modules/react/useInsertionEffectDontMountTwiceInStrictMode.js

@@ -0,0 +1,9 @@
+import { useInsertionEffect } from 'react';
+import useEffectDontMountTwiceInStrictMode from './useEffectDontMountTwiceInStrictMode.js'; // A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount
+// in "strict" mode unlike `useEffect()` and `useLayoutEffect()` do.
+// https://github.com/facebook/react/issues/26320
+
+export default function useInsertionEffectDontMountTwiceInStrictMode(handler, dependencies) {
+  return useEffectDontMountTwiceInStrictMode(useInsertionEffect, handler, dependencies);
+}
+//# sourceMappingURL=useInsertionEffectDontMountTwiceInStrictMode.js.map

package/modules/react/useInsertionEffectDontMountTwiceInStrictMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInsertionEffectDontMountTwiceInStrictMode.js","names":["useInsertionEffect","useEffectDontMountTwiceInStrictMode","useInsertionEffectDontMountTwiceInStrictMode","handler","dependencies"],"sources":["../../source/react/useInsertionEffectDontMountTwiceInStrictMode.js"],"sourcesContent":["import { useInsertionEffect } from 'react'\r\n\r\nimport useEffectDontMountTwiceInStrictMode from './useEffectDontMountTwiceInStrictMode.js'\r\n\r\n// A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount\r\n// in \"strict\" mode unlike `useEffect()` and `useLayoutEffect()` do.\r\n// https://github.com/facebook/react/issues/26320\r\nexport default function useInsertionEffectDontMountTwiceInStrictMode(handler, dependencies) {\r\n  return useEffectDontMountTwiceInStrictMode(useInsertionEffect, handler, dependencies)\r\n}"],"mappings":"AAAA,SAASA,kBAAT,QAAmC,OAAnC;AAEA,OAAOC,mCAAP,MAAgD,0CAAhD,C,CAEA;AACA;AACA;;AACA,eAAe,SAASC,4CAAT,CAAsDC,OAAtD,EAA+DC,YAA/D,EAA6E;EAC1F,OAAOH,mCAAmC,CAACD,kBAAD,EAAqBG,OAArB,EAA8BC,YAA9B,CAA1C;AACD"}

package/modules/react/useLayoutEffectDontMountTwiceInStrictMode.js

@@ -0,0 +1,9 @@
+import { useLayoutEffect } from 'react';
+import useEffectDontMountTwiceInStrictMode from './useEffectDontMountTwiceInStrictMode.js'; // A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount
+// in "strict" mode unlike `useEffect()` and `useLayoutEffect()` do.
+// https://github.com/facebook/react/issues/26320
+
+export default function useLayoutEffectDontMountTwiceInStrictMode(handler, dependencies) {
+  return useEffectDontMountTwiceInStrictMode(useLayoutEffect, handler, dependencies);
+}
+//# sourceMappingURL=useLayoutEffectDontMountTwiceInStrictMode.js.map

package/modules/react/useLayoutEffectDontMountTwiceInStrictMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutEffectDontMountTwiceInStrictMode.js","names":["useLayoutEffect","useEffectDontMountTwiceInStrictMode","useLayoutEffectDontMountTwiceInStrictMode","handler","dependencies"],"sources":["../../source/react/useLayoutEffectDontMountTwiceInStrictMode.js"],"sourcesContent":["import { useLayoutEffect } from 'react'\r\n\r\nimport useEffectDontMountTwiceInStrictMode from './useEffectDontMountTwiceInStrictMode.js'\r\n\r\n// A workaround for a React bug when `useInsertionEffect()` doesn't run twice on mount\r\n// in \"strict\" mode unlike `useEffect()` and `useLayoutEffect()` do.\r\n// https://github.com/facebook/react/issues/26320\r\nexport default function useLayoutEffectDontMountTwiceInStrictMode(handler, dependencies) {\r\n  return useEffectDontMountTwiceInStrictMode(useLayoutEffect, handler, dependencies)\r\n}"],"mappings":"AAAA,SAASA,eAAT,QAAgC,OAAhC;AAEA,OAAOC,mCAAP,MAAgD,0CAAhD,C,CAEA;AACA;AACA;;AACA,eAAe,SAASC,yCAAT,CAAmDC,OAAnD,EAA4DC,YAA5D,EAA0E;EACvF,OAAOH,mCAAmC,CAACD,eAAD,EAAkBG,OAAlB,EAA2BC,YAA3B,CAA1C;AACD"}

package/modules/react/useState.js

@@ -12,7 +12,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import log, { isDebug } from '../utility/debug.js';
 import getStateSnapshot from '../utility/getStateSnapshot.js';
-import { useState, useRef, useCallback, useLayoutEffect, useInsertionEffect } from 'react'; // Creates state management functions.
+import { useRef, useCallback } from 'react';
+import useStateNoStaleBug from './useStateNoStaleBug.js';
+import useInsertionEffectDontMountTwiceInStrictMode from './useInsertionEffectDontMountTwiceInStrictMode.js';
+import useLayoutEffectDontMountTwiceInStrictMode from './useLayoutEffectDontMountTwiceInStrictMode.js'; // Creates state management functions.
 
 export default function _useState(_ref) {
   var initialState = _ref.initialState,
@@ -24,10 +27,10 @@ export default function _useState(_ref) {
   // `VirtualScroller` state gets updated from this variable.
   // The reason for that is that `VirtualScroller` state must always
   // correspond exactly to what's currently rendered on the screen.
-  var _useState2 = useState(initialState),
-      _useState3 = _slicedToArray(_useState2, 2),
-      _newState = _useState3[0],
-      _setNewState = _useState3[1]; // This `state` reference is what `VirtualScroller` uses internally.
+  var _useStateNoStaleBug = useStateNoStaleBug(initialState),
+      _useStateNoStaleBug2 = _slicedToArray(_useStateNoStaleBug, 2),
+      _newState = _useStateNoStaleBug2[0],
+      _setNewState = _useStateNoStaleBug2[1]; // This `state` reference is what `VirtualScroller` uses internally.
   // It's the "source of truth" on the actual `VirtualScroller` state.
 
 
@@ -145,7 +148,7 @@ export default function _useState(_ref) {
   // it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.
   //
 
-  useInsertionEffect(function () {
+  useInsertionEffectDontMountTwiceInStrictMode(function () {
     // Update the actual `VirtualScroller` state right before the DOM changes
     // are going to be applied for the requested state update.
     //
@@ -168,13 +171,13 @@ export default function _useState(_ref) {
     // This hook doesn't do anything at the initial render.
     //
     if (isDebug()) {
-      log('React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~');
+      log('React: ~ The requested state is about to be applied in DOM. Setting it as the `VirtualScroller` state. ~');
       log(getStateSnapshot(_newState));
     }
 
     setState(_newState);
   }, [_newState]);
-  useLayoutEffect(function () {
+  useLayoutEffectDontMountTwiceInStrictMode(function () {
     // Call `onRender()` right after a requested state update has been applied,
     // and also right after the initial render.
     onRender();

package/modules/react/useState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useState.js","names":["log","isDebug","getStateSnapshot","useState","useRef","useCallback","useLayoutEffect","useInsertionEffect","_useState","initialState","onRender","itemsProperty","_newState","_setNewState","state","getState","current","setState","newState","stateToRender"],"sources":["../../source/react/useState.js"],"sourcesContent":["import log, { isDebug } from '../utility/debug.js'\r\nimport getStateSnapshot from '../utility/getStateSnapshot.js'\r\n\r\nimport { useState, useRef, useCallback, useLayoutEffect, useInsertionEffect } from 'react'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({\r\n\tinitialState,\r\n\tonRender,\r\n\titemsProperty\r\n}) {\r\n\t// This is a state variable that is used to re-render the component.\r\n\t// Right after the component has finished re-rendering,\r\n\t// `VirtualScroller` state gets updated from this variable.\r\n\t// The reason for that is that `VirtualScroller` state must always\r\n\t// correspond exactly to what's currently rendered on the screen.\r\n\tconst [_newState, _setNewState] = useState(initialState)\r\n\r\n\t// This `state` reference is what `VirtualScroller` uses internally.\r\n\t// It's the \"source of truth\" on the actual `VirtualScroller` state.\r\n\tconst state = useRef(initialState)\r\n\r\n\tconst getState = useCallback(() => {\r\n\t\treturn state.current\r\n\t}, [])\r\n\r\n\tconst setState = useCallback((newState) => {\r\n\t\tstate.current = newState\r\n\t}, [])\r\n\r\n\t// Updating of the actual `VirtualScroller` state is done in a\r\n\t// `useInsertionEffect()` rather than in a `useLayoutEffect()`.\r\n\t//\r\n\t// The reason is that using `useLayoutEffect()` would result in\r\n\t// \"breaking\" the `<VirtualScroller/>` when an `itemComponent`\r\n\t// called `onHeightDidChange()` from its own `useLayoutEffect()`.\r\n\t// In those cases, the `itemCompoent`'s effect would run before\r\n\t// the `<VirtualScroller/>`'s effect, resulting in\r\n\t// `VirtualScroller.onItemHeightDidChange(i)` being run at a moment in time\r\n\t// when the DOM has already been updated for the next `VirtualScroller` state\r\n\t// but the actual `VirtualScroller` state is still a previous (\"stale\") one\r\n\t// containing \"stale\" first/last shown item indexes, which would result in an\r\n\t// \"index out of bounds\" error when `onItemHeightDidChange(i)` tries to access\r\n\t// and measure the DOM element from item index `i` which doesn't already/yet exist.\r\n\t//\r\n\t// An example of such situation could be seen from a `VirtualScroller` debug log\r\n\t// which was captured for a case when using `useLayoutEffect()` to update the\r\n\t// \"actual\" `VirtualScroller` state after the corresponding DOM changes have been applied:\r\n\r\n\t// The user has scrolled far enough: perform a re-layout\r\n\t// ~ Update Layout (on scroll) ~\r\n\t//\r\n\t// Item index 2 height is required for calculations but hasn't been measured yet. Mark the item as \"shown\", rerender the list, measure the item's height and redo the layout.\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 2\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, empty × 229]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\t// State {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Measure item heights ~\r\n\t// Item index 2 height 719.8828125\r\n\t// Item index 3 height 961.640625\r\n\t// Item index 4 height 677.6640625\r\n\t// Item index 5 height 1510.1953125\r\n\t//\r\n\t// ~ Update Layout (on non-measured item heights have been measured) ~\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 4\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, 719.8828125, 961.640625, 677.6640625, 1510.1953125, empty × 225]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, beforeItemsHeight: 3521.2265625, afterItemsHeight: 214090.72265624942}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 5\r\n\t// ~ Re-measure item height ~\r\n\t// ERROR \"onItemHeightDidChange()\" has been called for item index 5 but the item is not currently rendered and can't be measured. The exact error was: Element with index 3 was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only 2 Elements there.\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\r\n\t// \"~ Rendered ~\" is what gets output when `onRender()` function gets called.\r\n\t// It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(i)`\r\n\t// was called and after the \"ERROR\" happened.\r\n\t//\r\n\t// The \"ERROR\" happened because new item indexes 4…5 were actually rendered instead of\r\n\t// item indexes 2…5 by the time the application called `onItemHeightDidChange(i)` function\r\n\t// inside `itemComponent`'s `useLayoutEffect()`.\r\n\t// Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.\r\n\t// This means that `_newState` changes have been applied to the DOM\r\n\t// but `useLayoutEffect()` wasn't triggered immediately after that.\r\n\t// Instead, it was triggered a right after the `itemComponent`'s `useLayoutEffect()`\r\n\t// because child effects run before parent effects.\r\n\t// So, the `itemComponent`'s `onHeightDidChange()` function call caught the\r\n\t// `VirtualScroller` in an inconsistent state.\r\n\t//\r\n\t// To fix that, `useLayoutEffect()` gets replaced with `useInsertionEffect()`:\r\n\t// https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect\r\n\t// https://beta.reactjs.org/reference/react/useInsertionEffect\r\n\t//\r\n\t// After replacing `useLayoutEffect()` with `useInsertionEffect()`,\r\n\t// the log shows that there's no more error:\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 0\r\n\t// ~ Re-measure item height ~\r\n\t// Previous height 917\r\n\t// New height 1064.453125\r\n\t// ~ Item height has changed ~\r\n\t//\r\n\t// An alternative solution would be demanding the `itemComponent` to\r\n\t// accept a `ref` and then measuring the corresponding DOM element height\r\n\t// directly using the `ref`-ed DOM element rather than searching for that\r\n\t// DOM element in the `ItemsContainer`.\r\n\t// So if `useInsertionEffect()` gets removed from React in some hypothetical future,\r\n\t// it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.\r\n\t//\r\n\tuseInsertionEffect(() => {\r\n\t\t// Update the actual `VirtualScroller` state right before the DOM changes\r\n\t\t// are going to be applied for the requested state update.\r\n\t\t//\r\n\t\t// This hook will run right before `useLayoutEffect()`.\r\n\t\t//\r\n\t\t// It doesn't make any difference which one of the two hooks to use to update\r\n\t\t// the actual `VirtualScroller` state in this scenario because the two hooks\r\n\t\t// run synchronously one right after another (insertion effect → DOM update → layout effect)\r\n\t\t// without any free space for any `VirtualScroller` code (like the scroll event handler)\r\n\t\t// to squeeze in and run in-between them, so the `VirtualScroller`'s `state`\r\n\t\t// is always gonna stay consistent with what's currently rendered on screen\r\n\t\t// from the `VirtualScroler`'s point of view, and the short transition period\r\n\t\t// it simply doesn't see because it doesn't \"wake up\" during that period.\r\n\t\t//\r\n\t\t// Updating the actual `VirtualScroller` state right before `useLayoutEffect()`\r\n\t\t// fixes the bug when an `itemComponent` calls `onHeightDidChange()` in its own\r\n\t\t// `useLayoutEffect()` which would run before this `useLayoutEffect()`\r\n\t\t// because children's effects run before parent's.\r\n\t\t//\r\n\t\t// This hook doesn't do anything at the initial render.\r\n\t\t//\r\n\t\tif (isDebug()) {\r\n\t\t\tlog('React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~')\r\n\t\t\tlog(getStateSnapshot(_newState))\r\n\t\t}\r\n\t\tsetState(_newState)\r\n\t}, [_newState])\r\n\r\n\tuseLayoutEffect(() => {\r\n\t\t// Call `onRender()` right after a requested state update has been applied,\r\n\t\t// and also right after the initial render.\r\n\t\tonRender()\r\n\t}, [_newState])\r\n\r\n\treturn {\r\n\t\t// This is the state the component should render.\r\n\t\tstateToRender: _newState,\r\n\r\n\t\t// Returns the current state of the `VirtualScroller`.\r\n\t\t// This function is used in the `VirtualScroller` itself\r\n\t\t// because the `state` is managed outside of it.\r\n\t\tgetState,\r\n\r\n\t\t// Requests a state update.\r\n\t\tsetState: _setNewState\r\n\t}\r\n}"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,GAAP,IAAcC,OAAd,QAA6B,qBAA7B;AACA,OAAOC,gBAAP,MAA6B,gCAA7B;AAEA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,WAA3B,EAAwCC,eAAxC,EAAyDC,kBAAzD,QAAmF,OAAnF,C,CAEA;;AACA,eAAe,SAASC,SAAT,OAIZ;EAAA,IAHFC,YAGE,QAHFA,YAGE;EAAA,IAFFC,QAEE,QAFFA,QAEE;EAAA,IADFC,aACE,QADFA,aACE;;EACF;EACA;EACA;EACA;EACA;EACA,iBAAkCR,QAAQ,CAACM,YAAD,CAA1C;EAAA;EAAA,IAAOG,SAAP;EAAA,IAAkBC,YAAlB,iBANE,CAQF;EACA;;;EACA,IAAMC,KAAK,GAAGV,MAAM,CAACK,YAAD,CAApB;EAEA,IAAMM,QAAQ,GAAGV,WAAW,CAAC,YAAM;IAClC,OAAOS,KAAK,CAACE,OAAb;EACA,CAF2B,EAEzB,EAFyB,CAA5B;EAIA,IAAMC,QAAQ,GAAGZ,WAAW,CAAC,UAACa,QAAD,EAAc;IAC1CJ,KAAK,CAACE,OAAN,GAAgBE,QAAhB;EACA,CAF2B,EAEzB,EAFyB,CAA5B,CAhBE,CAoBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EACAX,kBAAkB,CAAC,YAAM;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAIN,OAAO,EAAX,EAAe;MACdD,GAAG,CAAC,sGAAD,CAAH;MACAA,GAAG,CAACE,gBAAgB,CAACU,SAAD,CAAjB,CAAH;IACA;;IACDK,QAAQ,CAACL,SAAD,CAAR;EACA,CA3BiB,EA2Bf,CAACA,SAAD,CA3Be,CAAlB;EA6BAN,eAAe,CAAC,YAAM;IACrB;IACA;IACAI,QAAQ;EACR,CAJc,EAIZ,CAACE,SAAD,CAJY,CAAf;EAMA,OAAO;IACN;IACAO,aAAa,EAAEP,SAFT;IAIN;IACA;IACA;IACAG,QAAQ,EAARA,QAPM;IASN;IACAE,QAAQ,EAAEJ;EAVJ,CAAP;AAYA"}
+{"version":3,"file":"useState.js","names":["log","isDebug","getStateSnapshot","useRef","useCallback","useStateNoStaleBug","useInsertionEffectDontMountTwiceInStrictMode","useLayoutEffectDontMountTwiceInStrictMode","_useState","initialState","onRender","itemsProperty","_newState","_setNewState","state","getState","current","setState","newState","stateToRender"],"sources":["../../source/react/useState.js"],"sourcesContent":["import log, { isDebug } from '../utility/debug.js'\r\nimport getStateSnapshot from '../utility/getStateSnapshot.js'\r\n\r\nimport { useRef, useCallback } from 'react'\r\nimport useStateNoStaleBug from './useStateNoStaleBug.js'\r\nimport useInsertionEffectDontMountTwiceInStrictMode from './useInsertionEffectDontMountTwiceInStrictMode.js'\r\nimport useLayoutEffectDontMountTwiceInStrictMode from './useLayoutEffectDontMountTwiceInStrictMode.js'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({\r\n\tinitialState,\r\n\tonRender,\r\n\titemsProperty\r\n}) {\r\n\t// This is a state variable that is used to re-render the component.\r\n\t// Right after the component has finished re-rendering,\r\n\t// `VirtualScroller` state gets updated from this variable.\r\n\t// The reason for that is that `VirtualScroller` state must always\r\n\t// correspond exactly to what's currently rendered on the screen.\r\n\tconst [_newState, _setNewState] = useStateNoStaleBug(initialState)\r\n\r\n\t// This `state` reference is what `VirtualScroller` uses internally.\r\n\t// It's the \"source of truth\" on the actual `VirtualScroller` state.\r\n\tconst state = useRef(initialState)\r\n\r\n\tconst getState = useCallback(() => {\r\n\t\treturn state.current\r\n\t}, [])\r\n\r\n\tconst setState = useCallback((newState) => {\r\n\t\tstate.current = newState\r\n\t}, [])\r\n\r\n\t// Updating of the actual `VirtualScroller` state is done in a\r\n\t// `useInsertionEffect()` rather than in a `useLayoutEffect()`.\r\n\t//\r\n\t// The reason is that using `useLayoutEffect()` would result in\r\n\t// \"breaking\" the `<VirtualScroller/>` when an `itemComponent`\r\n\t// called `onHeightDidChange()` from its own `useLayoutEffect()`.\r\n\t// In those cases, the `itemCompoent`'s effect would run before\r\n\t// the `<VirtualScroller/>`'s effect, resulting in\r\n\t// `VirtualScroller.onItemHeightDidChange(i)` being run at a moment in time\r\n\t// when the DOM has already been updated for the next `VirtualScroller` state\r\n\t// but the actual `VirtualScroller` state is still a previous (\"stale\") one\r\n\t// containing \"stale\" first/last shown item indexes, which would result in an\r\n\t// \"index out of bounds\" error when `onItemHeightDidChange(i)` tries to access\r\n\t// and measure the DOM element from item index `i` which doesn't already/yet exist.\r\n\t//\r\n\t// An example of such situation could be seen from a `VirtualScroller` debug log\r\n\t// which was captured for a case when using `useLayoutEffect()` to update the\r\n\t// \"actual\" `VirtualScroller` state after the corresponding DOM changes have been applied:\r\n\r\n\t// The user has scrolled far enough: perform a re-layout\r\n\t// ~ Update Layout (on scroll) ~\r\n\t//\r\n\t// Item index 2 height is required for calculations but hasn't been measured yet. Mark the item as \"shown\", rerender the list, measure the item's height and redo the layout.\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 2\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, empty × 229]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\t// State {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Measure item heights ~\r\n\t// Item index 2 height 719.8828125\r\n\t// Item index 3 height 961.640625\r\n\t// Item index 4 height 677.6640625\r\n\t// Item index 5 height 1510.1953125\r\n\t//\r\n\t// ~ Update Layout (on non-measured item heights have been measured) ~\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 4\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, 719.8828125, 961.640625, 677.6640625, 1510.1953125, empty × 225]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, beforeItemsHeight: 3521.2265625, afterItemsHeight: 214090.72265624942}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 5\r\n\t// ~ Re-measure item height ~\r\n\t// ERROR \"onItemHeightDidChange()\" has been called for item index 5 but the item is not currently rendered and can't be measured. The exact error was: Element with index 3 was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only 2 Elements there.\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\r\n\t// \"~ Rendered ~\" is what gets output when `onRender()` function gets called.\r\n\t// It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(i)`\r\n\t// was called and after the \"ERROR\" happened.\r\n\t//\r\n\t// The \"ERROR\" happened because new item indexes 4…5 were actually rendered instead of\r\n\t// item indexes 2…5 by the time the application called `onItemHeightDidChange(i)` function\r\n\t// inside `itemComponent`'s `useLayoutEffect()`.\r\n\t// Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.\r\n\t// This means that `_newState` changes have been applied to the DOM\r\n\t// but `useLayoutEffect()` wasn't triggered immediately after that.\r\n\t// Instead, it was triggered a right after the `itemComponent`'s `useLayoutEffect()`\r\n\t// because child effects run before parent effects.\r\n\t// So, the `itemComponent`'s `onHeightDidChange()` function call caught the\r\n\t// `VirtualScroller` in an inconsistent state.\r\n\t//\r\n\t// To fix that, `useLayoutEffect()` gets replaced with `useInsertionEffect()`:\r\n\t// https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect\r\n\t// https://beta.reactjs.org/reference/react/useInsertionEffect\r\n\t//\r\n\t// After replacing `useLayoutEffect()` with `useInsertionEffect()`,\r\n\t// the log shows that there's no more error:\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 0\r\n\t// ~ Re-measure item height ~\r\n\t// Previous height 917\r\n\t// New height 1064.453125\r\n\t// ~ Item height has changed ~\r\n\t//\r\n\t// An alternative solution would be demanding the `itemComponent` to\r\n\t// accept a `ref` and then measuring the corresponding DOM element height\r\n\t// directly using the `ref`-ed DOM element rather than searching for that\r\n\t// DOM element in the `ItemsContainer`.\r\n\t// So if `useInsertionEffect()` gets removed from React in some hypothetical future,\r\n\t// it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.\r\n\t//\r\n\tuseInsertionEffectDontMountTwiceInStrictMode(() => {\r\n\t\t// Update the actual `VirtualScroller` state right before the DOM changes\r\n\t\t// are going to be applied for the requested state update.\r\n\t\t//\r\n\t\t// This hook will run right before `useLayoutEffect()`.\r\n\t\t//\r\n\t\t// It doesn't make any difference which one of the two hooks to use to update\r\n\t\t// the actual `VirtualScroller` state in this scenario because the two hooks\r\n\t\t// run synchronously one right after another (insertion effect → DOM update → layout effect)\r\n\t\t// without any free space for any `VirtualScroller` code (like the scroll event handler)\r\n\t\t// to squeeze in and run in-between them, so the `VirtualScroller`'s `state`\r\n\t\t// is always gonna stay consistent with what's currently rendered on screen\r\n\t\t// from the `VirtualScroler`'s point of view, and the short transition period\r\n\t\t// it simply doesn't see because it doesn't \"wake up\" during that period.\r\n\t\t//\r\n\t\t// Updating the actual `VirtualScroller` state right before `useLayoutEffect()`\r\n\t\t// fixes the bug when an `itemComponent` calls `onHeightDidChange()` in its own\r\n\t\t// `useLayoutEffect()` which would run before this `useLayoutEffect()`\r\n\t\t// because children's effects run before parent's.\r\n\t\t//\r\n\t\t// This hook doesn't do anything at the initial render.\r\n\t\t//\r\n\t\tif (isDebug()) {\r\n\t\t\tlog('React: ~ The requested state is about to be applied in DOM. Setting it as the `VirtualScroller` state. ~')\r\n\t\t\tlog(getStateSnapshot(_newState))\r\n\t\t}\r\n\t\tsetState(_newState)\r\n\t}, [_newState])\r\n\r\n\tuseLayoutEffectDontMountTwiceInStrictMode(() => {\r\n\t\t// Call `onRender()` right after a requested state update has been applied,\r\n\t\t// and also right after the initial render.\r\n\t\tonRender()\r\n\t}, [_newState])\r\n\r\n\treturn {\r\n\t\t// This is the state the component should render.\r\n\t\tstateToRender: _newState,\r\n\r\n\t\t// Returns the current state of the `VirtualScroller`.\r\n\t\t// This function is used in the `VirtualScroller` itself\r\n\t\t// because the `state` is managed outside of it.\r\n\t\tgetState,\r\n\r\n\t\t// Requests a state update.\r\n\t\tsetState: _setNewState\r\n\t}\r\n}"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,GAAP,IAAcC,OAAd,QAA6B,qBAA7B;AACA,OAAOC,gBAAP,MAA6B,gCAA7B;AAEA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,OAApC;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AACA,OAAOC,4CAAP,MAAyD,mDAAzD;AACA,OAAOC,yCAAP,MAAsD,gDAAtD,C,CAEA;;AACA,eAAe,SAASC,SAAT,OAIZ;EAAA,IAHFC,YAGE,QAHFA,YAGE;EAAA,IAFFC,QAEE,QAFFA,QAEE;EAAA,IADFC,aACE,QADFA,aACE;;EACF;EACA;EACA;EACA;EACA;EACA,0BAAkCN,kBAAkB,CAACI,YAAD,CAApD;EAAA;EAAA,IAAOG,SAAP;EAAA,IAAkBC,YAAlB,2BANE,CAQF;EACA;;;EACA,IAAMC,KAAK,GAAGX,MAAM,CAACM,YAAD,CAApB;EAEA,IAAMM,QAAQ,GAAGX,WAAW,CAAC,YAAM;IAClC,OAAOU,KAAK,CAACE,OAAb;EACA,CAF2B,EAEzB,EAFyB,CAA5B;EAIA,IAAMC,QAAQ,GAAGb,WAAW,CAAC,UAACc,QAAD,EAAc;IAC1CJ,KAAK,CAACE,OAAN,GAAgBE,QAAhB;EACA,CAF2B,EAEzB,EAFyB,CAA5B,CAhBE,CAoBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EACAZ,4CAA4C,CAAC,YAAM;IAClD;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAIL,OAAO,EAAX,EAAe;MACdD,GAAG,CAAC,0GAAD,CAAH;MACAA,GAAG,CAACE,gBAAgB,CAACU,SAAD,CAAjB,CAAH;IACA;;IACDK,QAAQ,CAACL,SAAD,CAAR;EACA,CA3B2C,EA2BzC,CAACA,SAAD,CA3ByC,CAA5C;EA6BAL,yCAAyC,CAAC,YAAM;IAC/C;IACA;IACAG,QAAQ;EACR,CAJwC,EAItC,CAACE,SAAD,CAJsC,CAAzC;EAMA,OAAO;IACN;IACAO,aAAa,EAAEP,SAFT;IAIN;IACA;IACA;IACAG,QAAQ,EAARA,QAPM;IASN;IACAE,QAAQ,EAAEJ;EAVJ,CAAP;AAYA"}

package/modules/react/useStateNoStaleBug.js

@@ -0,0 +1,51 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useRef, useState, useCallback } from 'react'; // This hook fixes any weird intermediate inconsistent/invalid/stale state values.
+// https://github.com/facebook/react/issues/25023#issuecomment-1480463544
+
+export default function useStateNoStaleBug(initialState) {
+  // const latestValidState = useRef(initialState)
+  var latestWrittenState = useRef(initialState);
+
+  var _useState = useState(initialState),
+      _useState2 = _slicedToArray(_useState, 2),
+      _state = _useState2[0],
+      _setState = _useState2[1]; // Instead of dealing with a potentially out-of-sync (stale) state value,
+  // simply use the correct latest one.
+
+
+  var state = latestWrittenState.current;
+  /*
+  let state
+  if (_state === latestWrittenState.current) {
+    state = _state
+    latestValidState.current = _state
+  } else {
+    // React bug detected: an out-of-sync (stale) state value received.
+    // Ignore the out-of-sync (stale) state value.
+    state = latestValidState.current
+  }
+  */
+
+  var setState = useCallback(function (newState) {
+    if (typeof newState === 'function') {
+      throw new Error('Function argument of `setState()` function is not supported by this hook');
+    }
+
+    latestWrittenState.current = newState;
+
+    _setState(newState);
+  }, []);
+  return [state, setState];
+}
+//# sourceMappingURL=useStateNoStaleBug.js.map

package/modules/react/useStateNoStaleBug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateNoStaleBug.js","names":["useRef","useState","useCallback","useStateNoStaleBug","initialState","latestWrittenState","_state","_setState","state","current","setState","newState","Error"],"sources":["../../source/react/useStateNoStaleBug.js"],"sourcesContent":["import { useRef, useState, useCallback } from 'react'\r\n\r\n// This hook fixes any weird intermediate inconsistent/invalid/stale state values.\r\n// https://github.com/facebook/react/issues/25023#issuecomment-1480463544\r\nexport default function useStateNoStaleBug(initialState) {\r\n  // const latestValidState = useRef(initialState)\r\n  const latestWrittenState = useRef(initialState)\r\n  const [_state, _setState] = useState(initialState)\r\n\r\n  // Instead of dealing with a potentially out-of-sync (stale) state value,\r\n  // simply use the correct latest one.\r\n  const state = latestWrittenState.current\r\n\r\n  /*\r\n  let state\r\n  if (_state === latestWrittenState.current) {\r\n    state = _state\r\n    latestValidState.current = _state\r\n  } else {\r\n    // React bug detected: an out-of-sync (stale) state value received.\r\n    // Ignore the out-of-sync (stale) state value.\r\n    state = latestValidState.current\r\n  }\r\n  */\r\n\r\n  const setState = useCallback((newState) => {\r\n    if (typeof newState === 'function') {\r\n      throw new Error('Function argument of `setState()` function is not supported by this hook')\r\n    }\r\n    latestWrittenState.current = newState\r\n    _setState(newState)\r\n  }, [])\r\n\r\n  return [state, setState]\r\n}"],"mappings":";;;;;;;;;;;;AAAA,SAASA,MAAT,EAAiBC,QAAjB,EAA2BC,WAA3B,QAA8C,OAA9C,C,CAEA;AACA;;AACA,eAAe,SAASC,kBAAT,CAA4BC,YAA5B,EAA0C;EACvD;EACA,IAAMC,kBAAkB,GAAGL,MAAM,CAACI,YAAD,CAAjC;;EACA,gBAA4BH,QAAQ,CAACG,YAAD,CAApC;EAAA;EAAA,IAAOE,MAAP;EAAA,IAAeC,SAAf,iBAHuD,CAKvD;EACA;;;EACA,IAAMC,KAAK,GAAGH,kBAAkB,CAACI,OAAjC;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;EAEE,IAAMC,QAAQ,GAAGR,WAAW,CAAC,UAACS,QAAD,EAAc;IACzC,IAAI,OAAOA,QAAP,KAAoB,UAAxB,EAAoC;MAClC,MAAM,IAAIC,KAAJ,CAAU,0EAAV,CAAN;IACD;;IACDP,kBAAkB,CAACI,OAAnB,GAA6BE,QAA7B;;IACAJ,SAAS,CAACI,QAAD,CAAT;EACD,CAN2B,EAMzB,EANyB,CAA5B;EAQA,OAAO,CAACH,KAAD,EAAQE,QAAR,CAAP;AACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-scroller",
-  "version": "1.12.2",
+  "version": "1.12.4",
   "description": "A component for efficiently rendering large lists of variable height items",
   "main": "index.cjs",
   "module": "index.js",

package/source/Layout.js

@@ -54,7 +54,7 @@ export default class Layout {
 			return getValue()
 		} catch (error) {
 			if (error instanceof ScrollableContainerNotReadyError) {
-				log('Couldn\'t calculate', name, 'before scrollable container is ready. Default to', defaultValue);
+				log(`Scrollable container size is not known at this point, so "${name}" can't be calculated yet. Default to`, defaultValue);
 				return defaultValue
 			} else {
 				throw error
@@ -356,14 +356,12 @@ export default class Layout {
 	 */
 	getShownItemIndexes({
 		itemsCount,
-		visibleAreaTop,
-		visibleAreaBottom
+		visibleAreaInsideTheList
 	}) {
 		let indexes = this._getShownItemIndex({
 			itemsCount,
 			fromIndex: 0,
-			visibleAreaTop,
-			visibleAreaBottom,
+			visibleAreaInsideTheList,
 			findFirstShownItemIndex: true
 		})
 
@@ -381,8 +379,7 @@ export default class Layout {
 			itemsCount,
 			fromIndex: firstShownItemIndex,
 			beforeItemsHeight,
-			visibleAreaTop,
-			visibleAreaBottom,
+			visibleAreaInsideTheList,
 			findLastShownItemIndex: true
 		})
 
@@ -406,8 +403,7 @@ export default class Layout {
 		const {
 			beforeResize,
 			itemsCount,
-			visibleAreaTop,
-			visibleAreaBottom,
+			visibleAreaInsideTheList,
 			findFirstShownItemIndex,
 			findLastShownItemIndex,
 			// backwards
@@ -441,7 +437,8 @@ export default class Layout {
 		// If "previously calculated layout" would be used then it would first find
 		// `firstShownItemIndex` and then find `lastShownItemIndex` as part of two
 		// separate calls of this function, each with or without `backwards` flag,
-		// depending on whether `visibleAreaTop` and `visibleAreBottom` have shifted up or down.
+		// depending on whether `visibleAreaInsideTheList.top` and `visibleAreaInsideTheList.top`
+		// have shifted up or down.
 
 		let firstShownItemIndex
 		let lastShownItemIndex
@@ -525,7 +522,7 @@ export default class Layout {
 						itemsCount,
 						firstShownItemIndex: findLastShownItemIndex ? fromIndex : undefined,
 						indexOfTheFirstItemInTheRow: currentRowFirstItemIndex,
-						nonMeasuredAreaHeight: (visibleAreaBottom + this.getPrerenderMargin()) - beforeItemsHeight
+						nonMeasuredAreaHeight: (visibleAreaInsideTheList.bottom + this.getPrerenderMargin()) - beforeItemsHeight
 					})
 				}
 
@@ -537,8 +534,8 @@ export default class Layout {
 
 			const itemsHeightFromFirstRowToThisRow = beforeItemsHeight + currentRowHeight
 
-			const rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaTop - this.getPrerenderMargin()
-			const rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaBottom + this.getPrerenderMargin()
+			const rowStepsIntoVisibleAreaTop = itemsHeightFromFirstRowToThisRow > visibleAreaInsideTheList.top - this.getPrerenderMargin()
+			const rowStepsOutOfVisibleAreaBottomOrIsAtTheBorder = itemsHeightFromFirstRowToThisRow + verticalSpacingAfterCurrentRow >= visibleAreaInsideTheList.bottom + this.getPrerenderMargin()
 
 			// if (backwards) {
 			// 	if (findFirstShownItemIndex) {

package/source/Layout.test.js

@@ -31,8 +31,10 @@ describe('Layout', function() {
 		// Initial render.
 		layout.getShownItemIndexes({
 			itemsCount: items.length,
-			visibleAreaTop: 0,
-			visibleAreaBottom: SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: 0,
+				bottom: SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
 			firstShownItemIndex: 0,
 			lastShownItemIndex: 2
@@ -41,8 +43,10 @@ describe('Layout', function() {
 		// The first item is almost hidden.
 		layout.getShownItemIndexes({
 			itemsCount: items.length,
-			visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
-			visibleAreaBottom: (SCREEN_HEIGHT + ITEM_HEIGHT - 1) + SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
+				bottom: (SCREEN_HEIGHT + ITEM_HEIGHT - 1) + SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
 			firstShownItemIndex: 0,
 			lastShownItemIndex: 4
@@ -51,8 +55,10 @@ describe('Layout', function() {
 		// The first item is hidden.
 		layout.getShownItemIndexes({
 			itemsCount: items.length,
-			visibleAreaTop: SCREEN_HEIGHT + ITEM_HEIGHT,
-			visibleAreaBottom: (SCREEN_HEIGHT + ITEM_HEIGHT) + SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: SCREEN_HEIGHT + ITEM_HEIGHT,
+				bottom: (SCREEN_HEIGHT + ITEM_HEIGHT) + SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
 			firstShownItemIndex: 1,
 			lastShownItemIndex: 4
@@ -61,8 +67,10 @@ describe('Layout', function() {
 		// A new item at the bottom is almost visible.
 		layout.getShownItemIndexes({
 			itemsCount: items.length,
-			visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
-			visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
+				bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
 			firstShownItemIndex: 1,
 			lastShownItemIndex: 4
@@ -71,8 +79,10 @@ describe('Layout', function() {
 		// A new item at the bottom is visible.
 		layout.getShownItemIndexes({
 			itemsCount: items.length,
-			visibleAreaTop: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
-			visibleAreaBottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+			visibleAreaInsideTheList: {
+				top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
+				bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
+			}
 		}).should.deep.equal({
 			firstShownItemIndex: 1,
 			lastShownItemIndex: 5

package/source/Scroll.js

@@ -42,6 +42,7 @@ export default class Scroll {
 	start() {
 		if (this.initialScrollPosition !== undefined) {
 			this.scrollToY(this.initialScrollPosition)
+			// Don't restore this scroll position on restart.
 			this.initialScrollPosition = undefined
 		}
 		if (this.onScrollPositionChange) {

package/source/{Resize.js → ScrollableContainerResizeHandler.js}

@@ -1,7 +1,7 @@
 import debounce from './utility/debounce.js'
 import log from './utility/debug.js'
 
-export default class Resize {
+export default class ScrollableContainerResizeHandler {
 	constructor({
 		bypass,
 		getWidth,

package/source/VirtualScroller.constructor.js

@@ -6,7 +6,7 @@ import {
 import DOMEngine from './DOM/Engine.js'
 
 import Layout, { LAYOUT_REASON } from './Layout.js'
-import Resize from './Resize.js'
+import ScrollableContainerResizeHandler from './ScrollableContainerResizeHandler.js'
 import BeforeResize from './BeforeResize.js'
 import Scroll from './Scroll.js'
 import ListHeightMeasurement from './ListHeightMeasurement.js'
@@ -19,7 +19,7 @@ import createVerticalSpacingHelpers from './VirtualScroller.verticalSpacing.js'
 import createColumnsHelpers from './VirtualScroller.columns.js'
 import createLayoutHelpers from './VirtualScroller.layout.js'
 import createOnRenderHelpers from './VirtualScroller.onRender.js'
-import createResizeHelpers from './VirtualScroller.resize.js'
+import createScrollableContainerResizeHelpers from './VirtualScroller.onContainerResize.js'
 import createItemsHelpers from './VirtualScroller.items.js'
 
 /**
@@ -193,7 +193,7 @@ export default function VirtualScrollerConstructor(
 
 	createLayoutHelpers.call(this)
 	createOnRenderHelpers.call(this)
-	createResizeHelpers.call(this)
+	createScrollableContainerResizeHelpers.call(this)
 	createItemsHelpers.call(this)
 
 	createHelpers.call(this, {
@@ -277,7 +277,7 @@ function createHelpers({
 		getPreviouslyCalculatedLayout: () => this.previouslyCalculatedLayout
 	})
 
-	this.resize = new Resize({
+	this.scrollableContainerResizeHandler = new ScrollableContainerResizeHandler({
 		bypass: this.bypass,
 		getWidth: () => this.scrollableContainer.getWidth(),
 		getHeight: () => this.scrollableContainer.getHeight(),
@@ -303,7 +303,7 @@ function createHelpers({
 		}),
 		onWidthChange: (prevWidth, newWidth) => {
 			log('~ Scrollable container width changed from', prevWidth, 'to', newWidth, '~')
-			this.onResize()
+			this.onContainerResize()
 		}
 	})
 

package/source/VirtualScroller.items.js

@@ -215,7 +215,7 @@ export default function() {
 		// `this.newItemsWillBeRendered` is cleared in `onRender()`.
 		//
 		// The values in `this.newItemsWillBeRendered` are used, for example,
-		// in `.onResize()` handler in order to not break state consistency when
+		// in `.onContainerResize()` handler in order to not break state consistency when
 		// state updates are "asynchronous" (delayed) and there's a window resize event
 		// in between calling `updateState()` below and that call actually being applied.
 		//