Fix #552. Pin html examples to React 18 to use UMD imports.

vasturiano · Dec 7, 2024 · 9c9d6a2 · 9c9d6a2
1 parent 27a62bd
commit 9c9d6a2
Show file tree

Hide file tree

Showing 27 changed files with 109 additions and 145 deletions.
diff --git a/example/all-modes/index.html b/example/all-modes/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph"></script>
@@ -18,16 +18,15 @@
     const comps = [ForceGraph.ForceGraph2D, ForceGraph.ForceGraph3D, ForceGraph.ForceGraphVR];
     const compWidth = window.innerWidth / comps.length;
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('graph')).render(
       <div style={{ display: 'flex' }}>
         {comps.map(Comp =>
           <Comp
             width={compWidth}
             graphData={genRandomTree()}
           />
         )}
-      </div>,
-      document.getElementById('graph')
+      </div>
     );
   </script>
 </body>
diff --git a/example/ar-graph/index.html b/example/ar-graph/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/aframe"></script>
@@ -19,7 +19,7 @@
 
   <script type="text/jsx">
     fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
-      ReactDOM.render(
+      ReactDOM.createRoot(document.getElementById('graph')).render(
         <ForceGraphAR
           glScale={160}
           yOffset={1.8}
@@ -30,8 +30,7 @@
           nodeOpacity={0.9}
           linkOpacity={0.3}
           linkColor={() => 'darkgrey'}
-        />,
-        document.getElementById('graph')
+        />
       );
     });
   </script>

diff --git a/example/auto-colored/index.html b/example/auto-colored/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-3d"></script>
@@ -18,14 +18,13 @@
     const GROUPS = 12;
     const gData = genRandomTree();
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('graph')).render(
       <ForceGraph3D
         graphData={gData}
         nodeAutoColorBy={d => d.id%GROUPS}
         linkAutoColorBy={d => gData.nodes[d.source].id%GROUPS}
         linkWidth={2}
-      />,
-      document.getElementById('graph')
+      />
     );
   </script>
 </body>
diff --git a/example/basic/index.html b/example/basic/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-3d"></script>
@@ -15,9 +15,8 @@
   <div id="graph"></div>
 
   <script type="text/jsx">
-    ReactDOM.render(
-      <ForceGraph3D graphData={genRandomTree()}/>,
-      document.getElementById('graph')
+    ReactDOM.createRoot(document.getElementById('graph')).render(
+      <ForceGraph3D graphData={genRandomTree()}/>
     );
   </script>
 </body>
diff --git a/example/bloom-effect/index.html b/example/bloom-effect/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-3d"></script>
@@ -39,10 +39,8 @@
         />;
       };
 
-      ReactDOM.render(
-        <FocusGraph/>,
-        document.getElementById('graph')
-      );
+      ReactDOM.createRoot(document.getElementById('graph'))
+        .render(<FocusGraph/>);
     });
   </script>
 </body>
diff --git a/example/camera-auto-orbit/index.html b/example/camera-auto-orbit/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-3d"></script>
@@ -46,9 +46,7 @@
       />;
     };
 
-    ReactDOM.render(
-      <CameraOrbit />,
-      document.getElementById('graph')
-    );
+    ReactDOM.createRoot(document.getElementById('graph'))
+      .render(<CameraOrbit />);
   </script>
 </body>
diff --git a/example/click-to-focus/index.html b/example/click-to-focus/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-3d"></script>
@@ -40,10 +40,8 @@
         />;
       };
 
-      ReactDOM.render(
-        <FocusGraph />,
-        document.getElementById('graph')
-      );
+      ReactDOM.createRoot(document.getElementById('graph'))
+        .render(<FocusGraph />);
     });
   </script>
 </body>
diff --git a/example/collision-detection/index.html b/example/collision-detection/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-2d"></script>
@@ -64,9 +64,7 @@
       />;
     };
 
-    ReactDOM.render(
-      <CollisionDetectionFG />,
-      document.getElementById('graph')
-    );
+    ReactDOM.createRoot(document.getElementById('graph'))
+      .render(<CollisionDetectionFG />);
   </script>
 </body>
diff --git a/example/curved-links/index.html b/example/curved-links/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-vr"></script>
@@ -53,14 +53,13 @@
       ]
     };
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('graph')).render(
       <ForceGraphVR
         graphData={gData}
         linkCurvature="curvature"
         linkCurveRotation="rotation"
         linkDirectionalParticles={2}
-      />,
-      document.getElementById('graph')
+      />
     );
   </script>
 </body>
diff --git a/example/custom-node-shape/index-canvas.html b/example/custom-node-shape/index-canvas.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-2d"></script>
@@ -28,14 +28,13 @@
     // gen a number persistent color from around the palette
     const getColor = n => '#' + ((n * 1234567) % Math.pow(2, 24)).toString(16).padStart(6, '0');
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('graph')).render(
       <ForceGraph2D
         graphData={genRandomTree(20)}
         nodeLabel="id"
         nodeCanvasObject={(node, ctx) => nodePaint(node, getColor(node.id), ctx)}
         nodePointerAreaPaint={nodePaint}
-      />,
-      document.getElementById('graph')
+      />
     );
   </script>
 </body>
diff --git a/example/custom-node-shape/index-three.html b/example/custom-node-shape/index-three.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-vr"></script>
@@ -17,7 +17,7 @@
   <script type="text/jsx" data-type="module">
     import * as THREE from '//unpkg.com/three/build/three.module.js';
 
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('graph')).render(
       <ForceGraphVR
         graphData={genRandomTree(100)}
         nodeThreeObject={({ id }) => new THREE.Mesh(
@@ -36,8 +36,7 @@
             opacity: 0.75
           })
         )}
-      />,
-      document.getElementById('graph')
+      />
     );
   </script>
 </body>
diff --git a/example/directional-links-arrows/index.html b/example/directional-links-arrows/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-3d"></script>
@@ -15,14 +15,13 @@
   <div id="graph"></div>
 
   <script type="text/jsx">
-    ReactDOM.render(
+    ReactDOM.createRoot(document.getElementById('graph')).render(
       <ForceGraph3D
         graphData={genRandomTree(40)}
         linkDirectionalArrowLength={3.5}
         linkDirectionalArrowRelPos={1}
         linkCurvature={0.25}
-      />,
-      document.getElementById('graph')
+      />
     );
   </script>
 </body>
diff --git a/example/directional-links-particles/index.html b/example/directional-links-particles/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-2d"></script>
@@ -14,15 +14,14 @@
 
   <script type="text/jsx">
     fetch('../datasets/miserables.json').then(res => res.json()).then(data => {
-      ReactDOM.render(
+      ReactDOM.createRoot(document.getElementById('graph')).render(
         <ForceGraph2D
           graphData={data}
           nodeLabel="id"
           nodeAutoColorBy="group"
           linkDirectionalParticles="value"
           linkDirectionalParticleSpeed={d => d.value * 0.001}
-        />,
-        document.getElementById('graph')
+        />
       );
     });
   </script>

diff --git a/example/dynamic/index.html b/example/dynamic/index.html
@@ -1,8 +1,8 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="//unpkg.com/@babel/standalone"></script>
 
   <script src="//unpkg.com/react-force-graph-3d"></script>
@@ -50,9 +50,7 @@
       />;
     };
 
-    ReactDOM.render(
-      <DynamicGraph />,
-      document.getElementById('graph')
-    );
+    ReactDOM.createRoot(document.getElementById('graph'))
+      .render(<DynamicGraph />);
   </script>
 </body>