Bring in react-suspense-fetch into codebase

apps/storybook/package.json

@@ -25,7 +25,6 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-icons": "5.2.1",
-    "react-suspense-fetch": "0.4.1",
     "three": "0.164.1"
   },
   "devDependencies": {

apps/storybook/src/TiledHeatmapMesh/checkerboard-api.ts

@@ -1,9 +1,9 @@
 import type { Size } from '@h5web/lib';
 import { getLayerSizes, TilesApi } from '@h5web/lib';
+import { createFetchStore } from '@h5web/shared/react-suspense-fetch';
 import greenlet from 'greenlet';
 import type { NdArray } from 'ndarray';
 import ndarray from 'ndarray';
-import { createFetchStore } from 'react-suspense-fetch';
 import type { Vector2 } from 'three';
 import { MathUtils } from 'three';
 
@@ -22,33 +22,30 @@ export class CheckerboardTilesApi extends TilesApi {
   public constructor(size: Size, tileSize: Size) {
     super(tileSize, getLayerSizes(size, tileSize));
 
-    this.store = createFetchStore(
-      async (tile: TileParams) => {
-        const { layer, offset } = tile;
-        const layerSize = this.layerSizes[layer];
-
-        // Clip slice to size of the level
-        const width = MathUtils.clamp(
-          layerSize.width - offset.x,
-          0,
-          this.tileSize.width,
-        );
-        const height = MathUtils.clamp(
-          layerSize.height - offset.y,
-          0,
-          this.tileSize.height,
-        );
-
-        const value = Math.abs(
-          (Math.floor(offset.x / this.tileSize.width) % 2) -
-            (Math.floor(offset.y / this.tileSize.height) % 2),
-        );
-
-        const arr = await getCheckerboardArray(width * height, value);
-        return ndarray(arr, [height, width]);
-      },
-      { type: 'Map', areEqual: areTilesEqual },
-    );
+    this.store = createFetchStore(async (tile: TileParams) => {
+      const { layer, offset } = tile;
+      const layerSize = this.layerSizes[layer];
+
+      // Clip slice to size of the level
+      const width = MathUtils.clamp(
+        layerSize.width - offset.x,
+        0,
+        this.tileSize.width,
+      );
+      const height = MathUtils.clamp(
+        layerSize.height - offset.y,
+        0,
+        this.tileSize.height,
+      );
+
+      const value = Math.abs(
+        (Math.floor(offset.x / this.tileSize.width) % 2) -
+          (Math.floor(offset.y / this.tileSize.height) % 2),
+      );
+
+      const arr = await getCheckerboardArray(width * height, value);
+      return ndarray(arr, [height, width]);
+    }, areTilesEqual);
   }
 
   public get(layer: number, offset: Vector2): NdArray<Uint8Array> {

apps/storybook/src/TiledHeatmapMesh/mandlebrot-api.ts

@@ -1,10 +1,10 @@
 import type { Size } from '@h5web/lib';
 import { getLayerSizes, TilesApi } from '@h5web/lib';
+import { createFetchStore } from '@h5web/shared/react-suspense-fetch';
 import type { Domain } from '@h5web/shared/vis-models';
 import greenlet from 'greenlet';
 import type { NdArray } from 'ndarray';
 import ndarray from 'ndarray';
-import { createFetchStore } from 'react-suspense-fetch';
 import type { Vector2 } from 'three';
 import { MathUtils } from 'three';
 
@@ -71,39 +71,36 @@ export class MandelbrotTilesApi extends TilesApi {
     this.xDomain = xDomain;
     this.yDomain = yDomain;
 
-    this.store = createFetchStore(
-      async (tile: TileParams) => {
-        const { layer, offset } = tile;
-        const layerSize = this.layerSizes[layer];
+    this.store = createFetchStore(async (tile: TileParams) => {
+      const { layer, offset } = tile;
+      const layerSize = this.layerSizes[layer];
 
-        // Clip slice to size of the level
-        const width = MathUtils.clamp(
-          layerSize.width - offset.x,
-          0,
-          this.tileSize.width,
-        );
-        const height = MathUtils.clamp(
-          layerSize.height - offset.y,
-          0,
-          this.tileSize.height,
-        );
+      // Clip slice to size of the level
+      const width = MathUtils.clamp(
+        layerSize.width - offset.x,
+        0,
+        this.tileSize.width,
+      );
+      const height = MathUtils.clamp(
+        layerSize.height - offset.y,
+        0,
+        this.tileSize.height,
+      );
 
-        const xScale = (this.xDomain[1] - this.xDomain[0]) / layerSize.width;
-        const xRange: Domain = [
-          this.xDomain[0] + xScale * offset.x,
-          this.xDomain[0] + xScale * (offset.x + width),
-        ];
-        const yScale = (this.yDomain[1] - this.yDomain[0]) / layerSize.height;
-        const yRange: Domain = [
-          this.yDomain[0] + yScale * offset.y,
-          this.yDomain[0] + yScale * (offset.y + height),
-        ];
+      const xScale = (this.xDomain[1] - this.xDomain[0]) / layerSize.width;
+      const xRange: Domain = [
+        this.xDomain[0] + xScale * offset.x,
+        this.xDomain[0] + xScale * (offset.x + width),
+      ];
+      const yScale = (this.yDomain[1] - this.yDomain[0]) / layerSize.height;
+      const yRange: Domain = [
+        this.yDomain[0] + yScale * offset.y,
+        this.yDomain[0] + yScale * (offset.y + height),
+      ];
 
-        const arr = await mandlebrot(50, xRange, yRange, width, height);
-        return ndarray(arr, [height, width]);
-      },
-      { type: 'Map', areEqual: areTilesEqual },
-    );
+      const arr = await mandlebrot(50, xRange, yRange, width, height);
+      return ndarray(arr, [height, width]);
+    }, areTilesEqual);
   }
 
   public get(layer: number, offset: Vector2): NdArray<Float32Array> {

packages/app/package.json

@@ -60,7 +60,6 @@
     "react-icons": "5.2.1",
     "react-reflex": "4.2.6",
     "react-slider": "2.0.4",
-    "react-suspense-fetch": "0.4.1",
     "three": "0.164.1",
     "zustand": "4.5.2"
   },

packages/app/src/providers/DataProvider.tsx

@@ -1,9 +1,9 @@
 import { isGroup } from '@h5web/shared/guards';
-import type { ChildEntity, Entity, Group } from '@h5web/shared/hdf5-models';
+import type { Entity } from '@h5web/shared/hdf5-models';
 import { getNameFromPath } from '@h5web/shared/hdf5-utils';
+import { createFetchStore } from '@h5web/shared/react-suspense-fetch';
 import type { PropsWithChildren } from 'react';
 import { createContext, useContext, useMemo } from 'react';
-import { createFetchStore } from 'react-suspense-fetch';
 
 import { hasAttribute } from '../utils';
 import type { DataProviderApi } from './api';
@@ -43,21 +43,14 @@ function DataProvider(props: PropsWithChildren<Props>) {
   const { api, children } = props;
 
   const entitiesStore = useMemo(() => {
-    const childCache = new Map<string, Exclude<ChildEntity, Group>>();
-
     const store = createFetchStore(async (path: string) => {
-      const cachedEntity = childCache.get(path);
-      if (cachedEntity) {
-        return cachedEntity;
-      }
-
       const entity = await api.getEntity(path);
 
       if (isGroup(entity)) {
         // Cache non-group children (datasets, datatypes and links)
         entity.children.forEach((child) => {
           if (!isGroup(child)) {
-            childCache.set(child.path, child);
+            store.preset(child.path, child);
           }
         });
       }
@@ -70,10 +63,8 @@ function DataProvider(props: PropsWithChildren<Props>) {
   }, [api]);
 
   const valuesStore = useMemo(() => {
-    const store = createFetchStore(api.getValue.bind(api), {
-      type: 'Map',
-      areEqual: (a, b) =>
-        a.dataset.path === b.dataset.path && a.selection === b.selection,
+    const store = createFetchStore(api.getValue.bind(api), (a, b) => {
+      return a.dataset.path === b.dataset.path && a.selection === b.selection;
     });
 
     return Object.assign(store, {
@@ -88,10 +79,10 @@ function DataProvider(props: PropsWithChildren<Props>) {
   }, [api]);
 
   const attrValuesStore = useMemo(() => {
-    const store = createFetchStore(api.getAttrValues.bind(api), {
-      type: 'Map',
-      areEqual: (a, b) => a.path === b.path,
-    });
+    const store = createFetchStore(
+      api.getAttrValues.bind(api),
+      (a, b) => a.path === b.path,
+    );
 
     return Object.assign(store, {
       getSingle: (entity: Entity, attrName: AttrName) => {

packages/app/src/providers/models.ts

@@ -6,16 +6,16 @@ import type {
   ProvidedEntity,
   ScalarShape,
 } from '@h5web/shared/hdf5-models';
-import type { FetchStore } from 'react-suspense-fetch';
+import type { FetchStore } from '@h5web/shared/react-suspense-fetch';
 
 import type { ImageAttribute } from '../vis-packs/core/models';
 import type { NxAttribute } from '../vis-packs/nexus/models';
 
-export type EntitiesStore = FetchStore<ProvidedEntity, string>;
+export type EntitiesStore = FetchStore<string, ProvidedEntity>;
 
 export type AttrName = NxAttribute | ImageAttribute | '_FillValue';
 
-export interface ValuesStore extends FetchStore<unknown, ValuesStoreParams> {
+export interface ValuesStore extends FetchStore<ValuesStoreParams, unknown> {
   cancelOngoing: () => void;
   evictCancelled: () => void;
 }
@@ -25,7 +25,7 @@ export interface ValuesStoreParams {
   selection?: string | undefined;
 }
 
-export interface AttrValuesStore extends FetchStore<AttributeValues, Entity> {
+export interface AttrValuesStore extends FetchStore<Entity, AttributeValues> {
   getSingle: (entity: Entity, attrName: AttrName) => unknown;
 }
 

packages/app/vite.config.js

@@ -37,8 +37,5 @@ export default defineProject({
     env: loadEnv('test', import.meta.dirname, 'VITEST_'),
     restoreMocks: true,
     testTimeout: 15_000,
-    server: {
-      deps: { inline: ['react-suspense-fetch'] },
-    },
   },
 });

packages/h5wasm/vite.config.js

@@ -31,8 +31,5 @@ export default defineProject({
   },
   test: {
     env: loadEnv('test', import.meta.dirname, 'VITEST_'),
-    server: {
-      deps: { inline: ['react-suspense-fetch'] },
-    },
   },
 });

packages/shared/package.json

@@ -18,6 +18,7 @@
     "./mock-models": "./src/mock-models.ts",
     "./mock-utils": "./src/mock-utils.ts",
     "./mock-values": "./src/mock-values.ts",
+    "./react-suspense-fetch": "./src/react-suspense-fetch.ts",
     "./styles.css": "./src/styles.css",
     ".": "./src/index.ts"
   },