Upgrade React to v18 and R3F to v8

apps/demo/package.json

@@ -24,15 +24,15 @@
     "@h5web/app": "workspace:*",
     "@h5web/h5wasm": "workspace:*",
     "normalize.css": "8.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-dropzone": "14.2.1",
     "react-icons": "4.3.1",
     "react-router-dom": "6.3.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
     "@types/react-router-dom": "5.3.3",
     "@vitejs/plugin-react": "1.2.0",
     "eslint": "8.9.0",

apps/demo/src/index.tsx

@@ -1,13 +1,16 @@
-import { StrictMode } from 'react';
-import ReactDOM from 'react-dom';
-
 import './styles.css'; // global styles
 
+import { assertNonNull } from '@h5web/app';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
 import DemoApp from './DemoApp';
 
-ReactDOM.render(
+const rootElem = document.querySelector('#root');
+assertNonNull(rootElem);
+
+createRoot(rootElem).render(
   <StrictMode>
     <DemoApp />
-  </StrictMode>,
-  document.querySelector('#root')
+  </StrictMode>
 );

apps/storybook/package.json

@@ -24,24 +24,24 @@
     "@h5web/lib": "workspace:*",
     "@h5web/shared": "workspace:*",
     "@react-hookz/web": "14.2.2",
-    "@react-three/fiber": "7.0.26",
+    "@react-three/fiber": "8.0.14",
     "ndarray": "1.0.19",
     "normalize.css": "8.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-icons": "4.3.1",
     "react-suspense-fetch": "0.4.1",
     "three": "0.135.0"
   },
   "devDependencies": {
     "@babel/core": "7.17.5",
-    "@storybook/addon-docs": "6.4.19",
-    "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-links": "6.4.19",
-    "@storybook/react": "6.4.19",
+    "@storybook/addon-docs": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-links": "6.4.22",
+    "@storybook/react": "6.4.22",
     "@types/ndarray": "1.0.11",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
     "babel-loader": "8.2.3",
     "eslint": "8.9.0",
     "eslint-config-galex": "3.6.5",

packages/app/package.json

@@ -38,13 +38,13 @@
     "analyze": "pnpm dlx source-map-explorer dist/index.js --no-border-checks"
   },
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "dependencies": {
     "@h5web/lib": "workspace:*",
     "@react-hookz/web": "14.2.2",
-    "@react-three/fiber": "7.0.26",
+    "@react-three/fiber": "8.0.14",
     "axios": "0.27.2",
     "d3-format": "3.1.0",
     "lodash": "4.17.21",
@@ -63,19 +63,19 @@
     "@h5web/shared": "workspace:*",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "13.2.0",
     "@testing-library/user-event": "14.2.0",
     "@types/lodash": "4.14.182",
     "@types/ndarray": "1.0.11",
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.9",
     "@types/react-slider": "1.3.1",
     "concat": "1.0.3",
     "eslint": "8.9.0",
     "eslint-config-galex": "3.6.5",
     "jest": "27.5.1",
     "npm-run-all": "4.1.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "rollup": "2.68.0",
     "rollup-plugin-dts": "4.1.0",
     "typescript": "4.5.5",

packages/app/src/App.tsx

@@ -42,7 +42,10 @@ function App(props: Props) {
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
+      {/* https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions */}
+      {/* @ts-expect-error */}
       <ReflexContainer className={styles.root} orientation="vertical">
+        {/* @ts-expect-error */}
         <ReflexElement
           className={styles.explorer}
           style={{ display: isExplorerOpen ? undefined : 'none' }}
@@ -57,6 +60,7 @@ function App(props: Props) {
           style={{ display: isExplorerOpen ? undefined : 'none' }}
         />
 
+        {/* @ts-expect-error */}
         <ReflexElement className={styles.mainArea} flex={75} minSize={500}>
           <BreadcrumbsBar
             path={selectedPath}

packages/app/src/index.ts

@@ -16,3 +16,4 @@ export { default as DataProvider } from './providers/DataProvider';
 export { DataProviderApi as ProviderApi } from './providers/api';
 export type { ValuesStoreParams } from './providers/models';
 export { convertDtype, getNameFromPath } from './providers/utils';
+export { assertNonNull } from '@h5web/shared';

packages/h5wasm/package.json

@@ -35,18 +35,18 @@
   },
   "peerDependencies": {
     "@h5web/app": "workspace:*",
-    "react": ">=16"
+    "react": ">=18"
   },
   "dependencies": {
     "h5wasm": "0.4.2"
   },
   "devDependencies": {
     "@h5web/app": "workspace:*",
     "@h5web/shared": "workspace:*",
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.9",
     "eslint": "8.9.0",
     "eslint-config-galex": "3.6.5",
-    "react": "17.0.2",
+    "react": "18.1.0",
     "rollup": "2.68.0",
     "rollup-plugin-dts": "4.1.0",
     "typescript": "4.5.5",

packages/lib/package.json

@@ -38,9 +38,9 @@
     "analyze": "pnpm dlx source-map-explorer dist/index.js --no-border-checks"
   },
   "peerDependencies": {
-    "@react-three/fiber": ">=6.0.14",
-    "react": ">=16",
-    "react-dom": ">=16",
+    "@react-three/fiber": ">=8",
+    "react": ">=18",
+    "react-dom": ">=18",
     "three": ">=0.120"
   },
   "dependencies": {
@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@h5web/shared": "workspace:*",
-    "@react-three/fiber": "7.0.26",
+    "@react-three/fiber": "8.0.14",
     "@types/d3-array": "3.0.2",
     "@types/d3-color": "3.0.2",
     "@types/d3-format": "3.0.1",
@@ -78,9 +78,9 @@
     "@types/d3-scale-chromatic": "3.0.0",
     "@types/lodash": "4.14.182",
     "@types/ndarray": "1.0.11",
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.9",
     "@types/react-aria-menubutton": "6.2.9",
-    "@types/react-dom": "17.0.11",
+    "@types/react-dom": "18.0.4",
     "@types/react-measure": "2.0.8",
     "@types/react-slider": "1.3.1",
     "@types/react-window": "1.8.5",
@@ -90,8 +90,8 @@
     "eslint-config-galex": "3.6.5",
     "jest": "27.5.1",
     "npm-run-all": "4.1.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "rollup": "2.68.0",
     "rollup-plugin-dts": "4.1.0",
     "three": "0.135.0",

packages/lib/src/index.ts

@@ -133,5 +133,5 @@ export type { TiledHeatmapMeshProps } from './vis/tiles/TiledHeatmapMesh';
 export { getLayerSizes, TilesApi } from './vis/tiles/api';
 export { getVisibleDomains, getAxisDomain } from './vis/utils';
 export { useCameraState, useValidDomainForScale } from './vis/hooks';
-export { assertLength, assertDefined } from '@h5web/shared';
+export { assertLength, assertDefined, assertNonNull } from '@h5web/shared';
 export { default as DefaultInteractions } from './interactions/DefaultInteractions';

packages/lib/src/vis/scatter/ScatterVis.tsx

@@ -122,8 +122,8 @@ function ScatterVis(props: Props) {
           onPointerEnter={(index, evt) =>
             showTooltip({
               tooltipData: index,
-              tooltipLeft: evt.sourceEvent.offsetX,
-              tooltipTop: evt.sourceEvent.offsetY,
+              tooltipLeft: evt.nativeEvent.offsetX,
+              tooltipTop: evt.nativeEvent.offsetY,
             })
           }
           onPointerOut={() => hideTooltip()}

packages/lib/src/vis/shared/Html.tsx

@@ -1,7 +1,8 @@
 import { useThree } from '@react-three/fiber';
 import { useState, useLayoutEffect } from 'react';
 import type { ReactNode } from 'react';
-import ReactDOM from 'react-dom';
+import type { Root } from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 
 interface Props {
   overflowCanvas?: boolean;
@@ -16,6 +17,8 @@ function Html(props: Props) {
     children,
   } = props;
 
+  const [reactRoot, setReactRoot] = useState<Root>();
+
   const r3fRoot = useThree((state) => state.gl.domElement.parentElement);
   const canvasWrapper = r3fRoot?.parentElement;
 
@@ -27,15 +30,18 @@ function Html(props: Props) {
   const [renderTarget] = useState(() => document.createElement('div'));
 
   useLayoutEffect(() => {
-    ReactDOM.render(<>{children}</>, renderTarget); // eslint-disable-line react/jsx-no-useless-fragment
-  }, [children, renderTarget]);
+    const root = createRoot(renderTarget);
+    setReactRoot(root);
 
-  useLayoutEffect(() => {
     return () => {
-      ReactDOM.unmountComponentAtNode(renderTarget);
+      root.unmount();
     };
   }, [renderTarget]);
 
+  useLayoutEffect(() => {
+    reactRoot?.render(<>{children}</>); // eslint-disable-line react/jsx-no-useless-fragment
+  }, [children, reactRoot]);
+
   useLayoutEffect(() => {
     container?.append(renderTarget);
 

packages/lib/src/vis/shared/TooltipMesh.tsx

@@ -34,17 +34,17 @@ function TooltipMesh(props: Props) {
   // Show and/or update tooltip when pointer moves except when dragging
   const onPointerMove = useCallback(
     (evt: ThreeEvent<PointerEvent>) => {
-      const { unprojectedPoint, sourceEvent } = evt;
+      const { unprojectedPoint, nativeEvent } = evt;
 
       // Keep tooltip hidden when dragging
-      if (sourceEvent.buttons !== 0) {
+      if (nativeEvent.buttons !== 0) {
         return;
       }
 
       const dataCoords = worldToData(unprojectedPoint);
       showTooltip({
-        tooltipLeft: sourceEvent.offsetX,
-        tooltipTop: sourceEvent.offsetY,
+        tooltipLeft: nativeEvent.offsetX,
+        tooltipTop: nativeEvent.offsetY,
         tooltipData: [dataCoords.x, dataCoords.y],
       });
     },
@@ -66,8 +66,8 @@ function TooltipMesh(props: Props) {
   // Show tooltip after dragging, if pointer is released inside the vis viewport
   const onPointerUp = useCallback(
     (evt: ThreeEvent<PointerEvent>) => {
-      const { sourceEvent } = evt;
-      const { offsetX: x, offsetY: y } = sourceEvent;
+      const { nativeEvent } = evt;
+      const { offsetX: x, offsetY: y } = nativeEvent;
       if (x >= 0 && x <= width && y >= 0 && y <= height) {
         onPointerMove(evt);
       }

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx

@@ -1,7 +1,7 @@
 import { useThree } from '@react-three/fiber';
 import { clamp, range } from 'lodash';
 import { useRef } from 'react';
-import type { Object3D } from 'three';
+import type { Group } from 'three';
 
 import { getInterpolator } from '../heatmap/utils';
 import { useCameraState } from '../hooks';
@@ -38,7 +38,7 @@ function TiledHeatmapMesh(props: Props) {
   const { visSize } = useAxisSystemContext();
   const meshSize = size ?? visSize;
 
-  const groupRef = useRef<Object3D>(null);
+  const groupRef = useRef<Group>(null);
 
   const ndcToLocalMatrix = useCameraState(
     (camera) => getNdcToObject3DMatrix(camera, groupRef),

packages/shared/package.json

@@ -18,26 +18,26 @@
     "lint:tsc": "tsc --noEmit"
   },
   "peerDependencies": {
-    "d3-format": "3.0.1",
+    "d3-format": "3.1.0",
     "lodash": "4.17.21",
     "ndarray": "1.0.19",
     "ndarray-ops": "1.2.2",
-    "react": ">=16"
+    "react": ">=18"
   },
   "devDependencies": {
     "@types/d3-format": "3.0.1",
     "@types/lodash": "4.14.182",
     "@types/ndarray": "1.0.11",
     "@types/ndarray-ops": "1.2.4",
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.9",
     "d3-format": "3.1.0",
     "eslint": "8.9.0",
     "eslint-config-galex": "3.6.5",
     "jest": "27.5.1",
     "lodash": "4.17.21",
     "ndarray": "1.0.19",
     "ndarray-ops": "1.2.2",
-    "react": "17.0.2",
+    "react": "18.1.0",
     "typescript": "4.5.5"
   }
 }