fixed nollup running the demo app + migrated from react-hot-loader to…

… react-refresh
welldone-software · Dec 29, 2024 · 6bd8f0c · 6bd8f0c
1 parent 943ebe5
commit 6bd8f0c
Show file tree

Hide file tree

Showing 29 changed files with 112 additions and 167 deletions.
diff --git a/README.md b/README.md
@@ -105,7 +105,7 @@ In [Typescript](https://github.com/welldone-software/why-did-you-render/issues/1
 /// <reference types="@welldone-software/why-did-you-render" />
 ```
 
-Import `wdyr` as the first import (even before `react-hot-loader`):
+Import `wdyr` as the first import (even before `react-hot-loader` if you use it):
 
 `index.js`:
 ```jsx

diff --git a/babel.config.cjs b/babel.config.cjs
@@ -18,7 +18,7 @@ module.exports = function(api) {
   ];
 
   const plugins = compact([
-    (!isProd && !isTest) && 'react-hot-loader/babel',
+    (!isProd && !isTest) && 'react-refresh/babel',
     !isProd && '@babel/plugin-transform-class-properties',
   ]);
 

diff --git a/demo/nollup.config.js b/demo/nollup.config.js
@@ -3,6 +3,7 @@ const babel = require('@rollup/plugin-babel').default;
 const nodeResolve = require('rollup-plugin-node-resolve');
 const alias = require('rollup-plugin-alias');
 const commonjs = require('rollup-plugin-commonjs-alternate');
+const refresh = require('rollup-plugin-react-refresh');
 
 module.exports = {
   input: 'demo/src/index.js',
@@ -32,5 +33,6 @@ module.exports = {
       mainFields: ['module', 'browser', 'main'],
     }),
     commonjs({}),
+    refresh(),
   ],
 };
diff --git a/demo/src/App.js b/demo/src/App.js
@@ -1,7 +1,6 @@
-import ReactHotLoader from 'react-hot-loader';
-
 import React from 'react';
-import ReactDom from 'react-dom';
+import ReactDom from 'react-dom/client';
+
 import whyDidYouRender from '@welldone-software/why-did-you-render';
 
 import Menu from './Menu';
@@ -52,14 +51,16 @@ const demosList = {
 
 const defaultDemoName = 'bigList';
 
-const domDemoElement = document.getElementById('demo');
+const domElement = document.getElementById('demo');
+let reactDomRoot;
 
 function changeDemo(demoFn) {
   console.clear && console.clear(); // eslint-disable-line no-console
   React.__REVERT_WHY_DID_YOU_RENDER__ && React.__REVERT_WHY_DID_YOU_RENDER__();
-  ReactDom.unmountComponentAtNode(domDemoElement);
+  reactDomRoot?.unmount();
+  reactDomRoot = ReactDom.createRoot(domElement);
   setTimeout(() => {
-    demoFn({ whyDidYouRender, domElement: domDemoElement });
+    demoFn({ whyDidYouRender, reactDomRoot });
   }, 1);
 }
 
@@ -85,6 +86,6 @@ const App = () => (
   </Menu>
 );
 
-export default ReactHotLoader.hot(module)(App);
+export default App;
 
 
diff --git a/demo/src/bigList/index.js b/demo/src/bigList/index.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 import { times } from 'lodash';
 
 export default {
   description: 'Big List (Main Demo)',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     whyDidYouRender(React);
 
     class BigListPureComponent extends React.PureComponent {
@@ -49,6 +48,6 @@ export default {
       }
     }
 
-    ReactDom.render(<Main/>, domElement);
+    reactDomRoot.render(<Main/>);
   },
 };
diff --git a/demo/src/bothChanges/index.js b/demo/src/bothChanges/index.js
@@ -1,11 +1,10 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 import createStepLogger from '../createStepLogger';
 
 export default {
   description: 'Props And State Changes',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     const stepLogger = createStepLogger();
 
     whyDidYouRender(React);
@@ -29,9 +28,9 @@ export default {
     }
 
     stepLogger('First Render');
-    ReactDom.render(<ClassDemo a={{ b: 'b' }}/>, domElement);
+    reactDomRoot.render(<ClassDemo a={{ b: 'b' }}/>);
 
     stepLogger('Second Render', true);
-    ReactDom.render(<ClassDemo a={{ b: 'b' }}/>, domElement);
+    reactDomRoot.render(<ClassDemo a={{ b: 'b' }}/>);
   },
 };
diff --git a/demo/src/childOfPureComponent/index.js b/demo/src/childOfPureComponent/index.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 export default {
   description: 'Child of Pure Component',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     whyDidYouRender(React, {
       trackAllPureComponents: true,
     });
@@ -38,6 +37,6 @@ export default {
       }
     }
 
-    ReactDom.render(<Main/>, domElement);
+    reactDomRoot.render(<Main/>);
   },
 };
diff --git a/demo/src/cloneElement/index.js b/demo/src/cloneElement/index.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 export default {
   description: 'Creating react element using React.cloneElement',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     whyDidYouRender(React);
 
     class TestComponent extends React.Component {
@@ -20,7 +19,7 @@ export default {
     const testElement = <TestComponent a={1}/>;
     const testElement2 = React.cloneElement(testElement);
 
-    ReactDom.render(testElement, domElement);
-    ReactDom.render(testElement2, domElement);
+    reactDomRoot.render(testElement);
+    reactDomRoot.render(testElement2);
   },
 };
diff --git a/demo/src/createFactory/index.js b/demo/src/createFactory/index.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 export default {
   description: 'Creating react element using React.createFactory',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     whyDidYouRender(React);
 
     class TestComponent extends React.Component {
@@ -19,7 +18,7 @@ export default {
 
     const TestComponentFactory = React.createFactory(TestComponent);
 
-    ReactDom.render(TestComponentFactory({ a: 1 }), domElement);
-    ReactDom.render(TestComponentFactory({ a: 1 }), domElement);
+    reactDomRoot.render(TestComponentFactory({ a: 1 }));
+    reactDomRoot.render(TestComponentFactory({ a: 1 }));
   },
 };
diff --git a/demo/src/hooks/useContext.js b/demo/src/hooks/useContext.js
@@ -1,11 +1,10 @@
 /* eslint-disable no-console */
 import React from 'react';
-import ReactDom from 'react-dom';
 import createStepLogger from '../createStepLogger';
 
 export default {
   description: 'Hooks - useContext',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     whyDidYouRender(React);
 
     const stepLogger = createStepLogger();
@@ -87,6 +86,6 @@ export default {
     }
 
     stepLogger('initial render');
-    ReactDom.render(<Main/>, domElement);
+    reactDomRoot.render(<Main/>);
   },
 };
diff --git a/demo/src/hooks/useMemoAndCallbackChild.js b/demo/src/hooks/useMemoAndCallbackChild.js
@@ -1,11 +1,10 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 import createStepLogger from '../createStepLogger';
 
 export default {
   description: 'Hooks - useMemo and useCallback Child',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     const stepLogger = createStepLogger();
 
     whyDidYouRender(React);
@@ -64,6 +63,6 @@ export default {
 
     Main.displayName = 'Main';
 
-    ReactDom.render(<Main/>, domElement);
+    reactDomRoot.render(<Main/>);
   },
 };
diff --git a/demo/src/hooks/useReducer.js b/demo/src/hooks/useReducer.js
@@ -1,10 +1,9 @@
 /* eslint-disable no-console */
 import React from 'react';
-import ReactDom from 'react-dom';
 
 export default {
   description: 'Hooks - useReducer',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     whyDidYouRender(React);
 
     function reducer(state, action) {
@@ -54,6 +53,6 @@ export default {
     }
     Main.whyDidYouRender = true;
 
-    ReactDom.render(<Main/>, domElement);
+    reactDomRoot.render(<Main/>);
   },
 };
diff --git a/demo/src/hooks/useState.js b/demo/src/hooks/useState.js
@@ -1,10 +1,9 @@
 /* eslint-disable no-console */
 import React from 'react';
-import ReactDom from 'react-dom';
 
 export default {
   description: 'Hooks - useState',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     whyDidYouRender(React);
 
     function BrokenHooksComponent() {
@@ -86,6 +85,6 @@ export default {
       );
     }
 
-    ReactDom.render(<Main/>, domElement);
+    reactDomRoot.render(<Main/>);
   },
 };
diff --git a/demo/src/hotReload/index.js b/demo/src/hotReload/index.js
@@ -1,33 +1,29 @@
 import React from 'react';
-import ReactDom from 'react-dom';
-import ReactHotLoader from 'react-hot-loader';
 
 import createStepLogger from '../createStepLogger';
 
 const text = 'change me when the app is running please';
 
-let DemoComponent = ({ children }) => (
+const DemoComponent = ({ children }) => (
   <div>
     <h4>{text}</h4>
     {children}
   </div>
 );
 
-DemoComponent = ReactHotLoader.hot(module)(DemoComponent);
-
 DemoComponent.whyDidYouRender = true;
 
 export default {
   description: 'React Hot Reload Of Tracked Component',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     const stepLogger = createStepLogger();
 
     whyDidYouRender(React);
 
     stepLogger('initial render');
-    ReactDom.render(<DemoComponent>yo!</DemoComponent>, domElement);
+    reactDomRoot.render(<DemoComponent>yo!</DemoComponent>);
 
     stepLogger('render with same props', true);
-    ReactDom.render(<DemoComponent>yo!</DemoComponent>, domElement);
+    reactDomRoot.render(<DemoComponent>yo!</DemoComponent>);
   },
 };
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
-import ReactDom from 'react-dom';
+import ReactDom from 'react-dom/client';
 
 import App from './App';
 
-const domMenuElement = document.getElementById('menu');
+const element = document.getElementById('menu');
+
+const root = ReactDom.createRoot(element);
+
+root.render(<App/>);
 
-ReactDom.render(<App/>, domMenuElement);
diff --git a/demo/src/logOwnerReasons/index.js b/demo/src/logOwnerReasons/index.js
@@ -1,11 +1,10 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 import createStepLogger from '../createStepLogger';
 
 export default {
   description: 'Log Owner Reasons',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     const stepLogger = createStepLogger();
 
     whyDidYouRender(React);
@@ -40,15 +39,15 @@ export default {
     }
 
     stepLogger('First render');
-    ReactDom.render(<Owner a={1} />, domElement);
+    reactDomRoot.render(<Owner a={1} />);
 
     stepLogger('Owner props change', true);
-    ReactDom.render(<Owner a={2} />, domElement);
+    reactDomRoot.render(<Owner a={2} />);
 
     stepLogger('Owner state change', true);
-    ReactDom.render(<ClassOwner />, domElement);
+    reactDomRoot.render(<ClassOwner />);
 
     stepLogger('Owner hooks changes', true);
-    ReactDom.render(<HooksOwner />, domElement);
+    reactDomRoot.render(<HooksOwner />);
   },
 };
diff --git a/demo/src/noChanges/index.js b/demo/src/noChanges/index.js
@@ -1,11 +1,10 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 
 import createStepLogger from '../createStepLogger';
 
 export default {
   description: 'No Changes',
-  fn({ domElement, whyDidYouRender }) {
+  fn({ reactDomRoot, whyDidYouRender }) {
     const stepLogger = createStepLogger();
 
     whyDidYouRender(React);
@@ -23,6 +22,6 @@ export default {
     }
 
     stepLogger('First Render');
-    ReactDom.render(<ClassDemo/>, domElement);
+    reactDomRoot.render(<ClassDemo/>);
   },
 };