fix ssr rendering issue of element-resize-detector package

Author: dev-javascript

package-lock.json

@@ -1,36 +1,37 @@
 import elementResizeDetectorMaker from 'element-resize-detector';
-const resizerIns = elementResizeDetectorMaker({
-  strategy: 'scroll',
-  callOnAdd: true,
-});
-const getRaf = () => {
-  const w = window;
-  return (
-    w.requestAnimationFrame ||
-    w.webkitRequestAnimationFrame ||
-    w.mozRequestAnimationFrame ||
-    w.oRequestAnimationFrame ||
-    w.msRequestAnimationFrame ||
-    function (callback) {
-      w.setTimeout(callback, 1000 / 60);
-    }
-  );
-};
-resizerIns.debncListenTo = (el, callback) => {
-  return resizerIns.listenTo(
-    el,
-    (function (func, wait) {
-      let timeout;
-      return function (...args) {
-        const later = () => {
+export default () => {
+  const resizerIns = elementResizeDetectorMaker({
+    strategy: 'scroll',
+    callOnAdd: true,
+  });
+  const getRaf = () => {
+    const w = window;
+    return (
+      w.requestAnimationFrame ||
+      w.webkitRequestAnimationFrame ||
+      w.mozRequestAnimationFrame ||
+      w.oRequestAnimationFrame ||
+      w.msRequestAnimationFrame ||
+      function (callback) {
+        w.setTimeout(callback, 1000 / 60);
+      }
+    );
+  };
+  resizerIns.debncListenTo = (el, callback) => {
+    return resizerIns.listenTo(
+      el,
+      (function (func, wait) {
+        let timeout;
+        return function (...args) {
+          const later = () => {
+            clearTimeout(timeout);
+            getRaf()(() => func(...args));
+          };
           clearTimeout(timeout);
-          getRaf()(() => func(...args));
+          timeout = setTimeout(later, wait);
         };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-      };
-    })(callback, 10),
-  );
+      })(callback, 10),
+    );
+  };
+  return resizerIns;
 };
-
-export default resizerIns;

src/plugins/moreButtonPlugin/show-more-tabs/element-resize-detector-adapter.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import Api from './api.js';
-import resizeDetectorIns from './element-resize-detector-adapter.js';
+import getResizeDetectorIns from './element-resize-detector-adapter.js';
 import tabsMoreButton from 'tabs-more-button';
 import ShowMoreTabs from './show-more-tabs.js';
 const getDeps = () => {
   return {
-    resizeDetectorIns,
+    getResizeDetectorIns,
     getInstance: (ctx, setHiddenTabIDs) =>
       new Api({
         setHiddenTabIDs,

src/plugins/moreButtonPlugin/show-more-tabs/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 export default function ShowMoreTabs(getDeps, props) {
   const {ctx, openTabIDs, selectedTabID} = props;
   const [hiddenTabIDs, setHiddenTabIDs] = useState('');
-  const {getInstance, resizeDetectorIns} = getDeps();
+  const {getInstance, getResizeDetectorIns} = getDeps();
   const ref = useRef();
   ref.current = ref.current || {ins: getInstance(ctx, setHiddenTabIDs)};
   const ins = ref.current.ins;
@@ -12,6 +12,7 @@ export default function ShowMoreTabs(getDeps, props) {
     ins.setResizer();
   }, []);
   useLayoutEffect(() => {
+    const resizeDetectorIns = getResizeDetectorIns();
     ins.installResizer(resizeDetectorIns);
     return () => {
       ins.uninstallResizer(resizeDetectorIns);

src/plugins/moreButtonPlugin/show-more-tabs/show-more-tabs.js

@@ -55,8 +55,8 @@ beforeEach(() => {
           insProperties,
         );
       };
-    const resizeDetectorIns = deps.resizeDetectorIns || {};
-    const ShowMoreButton = ShowMoreTabsComponent.bind(undefined, () => ({getInstance, resizeDetectorIns}));
+    const getResizeDetectorIns = deps.getResizeDetectorIns || (() => ({}));
+    const ShowMoreButton = ShowMoreTabsComponent.bind(undefined, () => ({getInstance, getResizeDetectorIns}));
     if (snapshot) {
       return <ShowMoreButton {...props}></ShowMoreButton>;
     }