Upgrade to React v17 and R3F v6

package.json

@@ -29,90 +29,90 @@
     "postversion": "git push && git push --tags"
   },
   "dependencies": {
+    "@react-three/fiber": "^6.0.14",
     "@visx/axis": "^1.7.0",
     "@visx/grid": "^1.7.0",
     "@visx/scale": "^1.7.0",
     "@visx/shape": "^1.7.0",
     "@visx/tooltip": "^1.7.2",
     "axios": "^0.21.1",
     "complex.js": "^2.0.11",
-    "d3-array": "^2.12.0",
+    "d3-array": "^2.12.1",
     "d3-color": "^2.0.0",
     "d3-format": "^2.0.0",
-    "d3-scale": "^3.2.3",
+    "d3-scale": "^3.2.4",
     "d3-scale-chromatic": "^2.0.0",
     "lodash-es": "^4.17.21",
     "ndarray": "^1.0.19",
     "ndarray-ops": "^1.2.2",
     "ndarray-unpack": "^1.0.0",
     "normalize.css": "^8.0.1",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-aria-menubutton": "^7.0.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.1",
     "react-icons": "^4.2.0",
     "react-measure": "^2.5.2",
     "react-reflex": "^4.0.0",
     "react-router-dom": "^5.2.0",
     "react-slider": "^1.1.4",
     "react-suspense-fetch": "^0.3.0",
-    "react-three-fiber": "^4.2.21",
-    "react-use": "^17.2.1",
+    "react-use": "^17.2.3",
     "react-window": "^1.8.6",
-    "three": "^0.126.1",
-    "zustand": "^3.3.3"
+    "three": "^0.127.0",
+    "zustand": "^3.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.13.15",
     "@juggle/resize-observer": "^3.3.0",
-    "@storybook/addon-actions": "^6.1.21",
-    "@storybook/addon-essentials": "^6.1.21",
-    "@storybook/addon-links": "^6.1.21",
-    "@storybook/node-logger": "^6.1.21",
+    "@storybook/addon-actions": "^6.2.8",
+    "@storybook/addon-essentials": "^6.2.8",
+    "@storybook/addon-links": "^6.2.8",
+    "@storybook/node-logger": "^6.2.8",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.1.21",
-    "@testing-library/cypress": "^7.0.4",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^13.0.10",
+    "@storybook/react": "^6.2.8",
+    "@testing-library/cypress": "^7.0.5",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.3",
     "@types/complex.js": "^2.0.2",
     "@types/cypress-image-snapshot": "^3.1.5",
     "@types/d3-array": "^2.9.0",
     "@types/d3-color": "^2.0.1",
     "@types/d3-format": "^2.0.0",
     "@types/d3-scale": "^3.2.2",
     "@types/d3-scale-chromatic": "^2.0.0",
-    "@types/jest": "^26.0.21",
+    "@types/jest": "^26.0.22",
     "@types/lodash-es": "^4.17.4",
     "@types/ndarray": "^1.0.8",
     "@types/node": "^12.19.7",
-    "@types/react": "^16.14.2",
+    "@types/react": "^17.0.3",
     "@types/react-aria-menubutton": "^6.2.7",
-    "@types/react-dom": "^16.9.10",
+    "@types/react-dom": "^17.0.3",
     "@types/react-measure": "^2.0.6",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-slider": "^1.1.1",
     "@types/react-window": "^1.8.2",
-    "@types/three": "^0.126.2",
-    "@typescript-eslint/eslint-plugin": "4.19.0",
-    "@typescript-eslint/parser": "4.19.0",
+    "@types/three": "^0.127.1",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
     "babel-loader": "8.1.0",
     "cypress": "^6.3.0",
     "cypress-image-snapshot": "^4.0.1",
-    "eslint": "^7.22.0",
-    "eslint-config-galex": "^2.13.5",
+    "eslint": "^7.24.0",
+    "eslint-config-galex": "^2.14.1",
     "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "24.3.2",
+    "eslint-plugin-jest": "24.3.5",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-testing-library": "3.10.2",
+    "eslint-plugin-testing-library": "4.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "react-app-polyfill": "^2.0.0",
-    "react-is": "^16.13.1",
+    "react-is": "^17.0.2",
     "react-scripts": "^4.0.3",
-    "typescript": "^4.2.3"
+    "typescript": "^4.2.4"
   },
   "jest": {
     "restoreMocks": true,

src/h5web/App.tsx

@@ -24,7 +24,7 @@ function App() {
         className={styles.explorer}
         style={{ display: isExplorerOpen ? undefined : 'none' }}
         flex={25}
-        minSize={250}
+        minSize={150}
       >
         <Explorer selectedPath={selectedPath} onSelect={setSelectedPath} />
       </ReflexElement>

src/h5web/providers/context.ts

@@ -3,19 +3,23 @@ import type { Entity } from './models';
 import type { FetchStore } from 'react-suspense-fetch';
 import type { ObjectKeyStore } from './utils';
 
-export interface GetValueParams {
+// https://github.com/microsoft/TypeScript/issues/15300#issuecomment-771916993
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type GetValueParams = {
   path: string;
   selection?: string;
-}
+};
 
 export abstract class ProviderAPI {
   abstract filepath: string;
   abstract getEntity(path: string): Promise<Entity>;
   abstract getValue(params: GetValueParams): Promise<unknown>;
 }
 
-export const ProviderContext = createContext<{
+interface Context {
   filepath: string;
   entitiesStore: FetchStore<Entity, string>;
-  valuesStore: ObjectKeyStore<unknown, GetValueParams>;
-}>({} as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+  valuesStore: ObjectKeyStore<GetValueParams>;
+}
+
+export const ProviderContext = createContext<Context>({} as Context);

src/h5web/providers/utils.ts

@@ -1,7 +1,10 @@
 import { pickBy } from 'lodash-es';
 import { createFetchStore } from 'react-suspense-fetch';
 
-export interface ObjectKeyStore<R, I extends {}> {
+export interface ObjectKeyStore<
+  I extends Record<string, unknown>,
+  R = unknown
+> {
   get: (obj: I) => R;
   prefetch: (obj: I) => void;
   evict: (obj: I) => void;
@@ -15,11 +18,12 @@ export interface ObjectKeyStore<R, I extends {}> {
  * Interaction with the underlying `react-suspense-fetch` store is done by
  * JSON-stringifying/parsing the input object.
  */
-export function createObjectKeyStore<R, I extends {}>(
-  fetchFunc: (obj: I) => Promise<R>
-): ObjectKeyStore<R, I> {
+export function createObjectKeyStore<
+  I extends Record<string, unknown>,
+  R = unknown
+>(fetchFunc: (params: I) => Promise<R>): ObjectKeyStore<I, R> {
   const store = createFetchStore((key: string) => {
-    return fetchFunc(JSON.parse(key));
+    return fetchFunc(JSON.parse(key) as I);
   });
 
   function wrapMethod<T>(method: (key: string) => T) {

src/h5web/toolbar/MeasuredControl.tsx

@@ -12,7 +12,7 @@ function MeasuredControl(props: Props) {
 
   return (
     <Measure
-      onResize={({ entry }) => {
+      onResize={({ entry }: { entry?: DOMRect }) => {
         if (entry) {
           onMeasure(entry.width);
         }

src/h5web/vis-packs/core/heatmap/Mesh.tsx

@@ -1,6 +1,6 @@
 import { rgb } from 'd3-color';
 import { memo, useMemo } from 'react';
-import { useThree } from 'react-three-fiber';
+import { useThree } from '@react-three/fiber';
 import {
   RedFormat,
   DataTexture,
@@ -124,13 +124,12 @@ function Mesh(props: Props) {
     `,
   };
 
-  const { size } = useThree();
-  const { width, height } = size;
+  const { width, height } = useThree((state) => state.size);
 
   return (
     <mesh>
-      <planeGeometry attach="geometry" args={[width, height]} />
-      <shaderMaterial attach="material" args={[shader]} />
+      <planeGeometry args={[width, height]} />
+      <shaderMaterial args={[shader]} />
     </mesh>
   );
 }

src/h5web/vis-packs/core/hooks.ts

@@ -2,7 +2,7 @@ import type ndarray from 'ndarray';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { isNumber } from 'lodash-es';
 import { createMemo } from 'react-use';
-import { useFrame, useThree } from 'react-three-fiber';
+import { useFrame, useThree } from '@react-three/fiber';
 import type { DimensionMapping } from '../../dimension-mapper/models';
 import {
   applyMapping,
@@ -72,8 +72,7 @@ export function useCanvasScales(): {
   ordinateScale: AxisScale;
 } {
   const { abscissaConfig, ordinateConfig } = useContext(AxisSystemContext);
-  const { size } = useThree();
-  const { width, height } = size;
+  const { width, height } = useThree((state) => state.size);
 
   return {
     abscissaScale: getCanvasScale(abscissaConfig, width),

src/h5web/vis-packs/core/line/DataCurve.tsx

@@ -1,11 +1,23 @@
 import { Suspense, useMemo } from 'react';
-import { Line } from 'react-three-fiber/components';
 import { CurveType } from './models';
 import GlyphMaterial from './GlyphMaterial';
-import { useThree } from 'react-three-fiber';
-import { BufferGeometry } from 'three';
+import { extend, useThree } from '@react-three/fiber';
+import { BufferGeometry, Line } from 'three';
 import ErrorBars from './ErrorBars';
 import { useCanvasPoints } from './hooks';
+import type { Object3DNode } from '@react-three/fiber';
+
+extend({ Line_: Line });
+
+// https://github.com/pmndrs/react-three-fiber/issues/1152
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      line_: Object3DNode<Line, typeof Line>;
+    }
+  }
+}
 
 interface Props {
   abscissas: number[];
@@ -26,9 +38,9 @@ function DataCurve(props: Props) {
     curveType = CurveType.LineOnly,
   } = props;
 
-  const { gl } = useThree();
+  const { domElement } = useThree((state) => state.gl);
   const curveColor = color.startsWith('--')
-    ? window.getComputedStyle(gl.domElement).getPropertyValue(color).trim()
+    ? window.getComputedStyle(domElement).getPropertyValue(color).trim()
     : color;
 
   const points = useCanvasPoints(abscissas, ordinates, errors);
@@ -44,9 +56,9 @@ function DataCurve(props: Props) {
 
   return (
     <Suspense fallback={null}>
-      <Line visible={showLine} geometry={dataGeometry}>
-        <lineBasicMaterial attach="material" color={curveColor} linewidth={2} />
-      </Line>
+      <line_ visible={showLine} geometry={dataGeometry}>
+        <lineBasicMaterial color={curveColor} linewidth={2} />
+      </line_>
       <points visible={showGlyphs} geometry={dataGeometry}>
         <GlyphMaterial color={curveColor} size={6} />
       </points>

src/h5web/vis-packs/core/line/ErrorBars.tsx

@@ -1,4 +1,4 @@
-import { useUpdate } from 'react-three-fiber';
+import { useLayoutEffect, useRef } from 'react';
 import type { BufferGeometry, Vector2, Vector3 } from 'three';
 import GlyphMaterial from './GlyphMaterial';
 import { GLYPH_URLS } from './models';
@@ -13,24 +13,25 @@ interface Props {
 function ErrorBars(props: Props) {
   const { barsSegments, capsPoints, color, visible } = props;
 
-  const barsGeometry = useUpdate<BufferGeometry>(
-    (geometry: BufferGeometry) => geometry.setFromPoints(barsSegments),
-    [barsSegments]
-  );
-  const capsGeometry = useUpdate<BufferGeometry>(
-    (geometry) => geometry.setFromPoints(capsPoints),
-    [capsPoints]
-  );
+  const barsGeometry = useRef<BufferGeometry>(null);
+  useLayoutEffect(() => {
+    barsGeometry.current?.setFromPoints(barsSegments);
+  }, [barsGeometry, barsSegments]);
+
+  const capsGeometry = useRef<BufferGeometry>(null);
+  useLayoutEffect(() => {
+    capsGeometry.current?.setFromPoints(capsPoints);
+  }, [capsGeometry, capsPoints]);
 
   return (
     <>
       <lineSegments visible={visible}>
-        <lineBasicMaterial attach="material" color={color} linewidth={2} />
-        <bufferGeometry attach="geometry" ref={barsGeometry} />
+        <lineBasicMaterial color={color} linewidth={2} />
+        <bufferGeometry ref={barsGeometry} />
       </lineSegments>
       <points visible={visible}>
         <GlyphMaterial glyphURL={GLYPH_URLS.Cap} color={color} size={9} />
-        <bufferGeometry attach="geometry" ref={capsGeometry} />
+        <bufferGeometry ref={capsGeometry} />
       </points>
     </>
   );

src/h5web/vis-packs/core/line/GlyphMaterial.tsx

@@ -1,4 +1,4 @@
-import { useLoader } from 'react-three-fiber';
+import { useLoader } from '@react-three/fiber';
 import { NearestFilter, TextureLoader } from 'three';
 import { GLYPH_URLS } from './models';
 
@@ -13,15 +13,7 @@ function GlyphMaterial(props: Props) {
   const sprite = useLoader(TextureLoader, glyphURL || GLYPH_URLS.Cross);
   sprite.magFilter = NearestFilter;
 
-  return (
-    <pointsMaterial
-      attach="material"
-      map={sprite}
-      color={color}
-      size={size}
-      transparent
-    />
-  );
+  return <pointsMaterial map={sprite} color={color} size={size} transparent />;
 }
 
 export default GlyphMaterial;

src/h5web/vis-packs/core/line/hooks.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useThree } from 'react-three-fiber';
+import { useThree } from '@react-three/fiber';
 import { Vector3 } from 'three';
 import { useCanvasScales } from '../hooks';
 
@@ -8,7 +8,7 @@ export function useCanvasPoints(
   ordinates: number[],
   errors?: number[]
 ) {
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
   const { abscissaScale, ordinateScale } = useCanvasScales();
 
   return useMemo(() => {

src/h5web/vis-packs/core/shared/AxisSystem.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { useThree } from 'react-three-fiber';
+import { useThree } from '@react-three/fiber';
 import Html from './Html';
 import styles from './AxisSystem.module.css';
 import type { AxisOffsets, Domain } from '../models';
@@ -17,8 +17,8 @@ function AxisSystem(props: Props) {
 
   const { abscissaConfig, ordinateConfig } = useContext(AxisSystemContext);
 
-  const { camera, size } = useThree();
-  const { position, zoom } = camera;
+  const { position, zoom } = useThree((state) => state.camera);
+  const size = useThree((state) => state.size);
   const { width, height } = size;
 
   const { abscissaScale, ordinateScale } = useCanvasScales();