Upgrade deps including H5Web to v14

Author: axelboc

package.json

@@ -10,7 +10,7 @@
     "url": "https://gitlab.esrf.fr/ui/myhdf5"
   },
   "engines": {
-    "node": "20.x",
+    "node": "22.x",
     "pnpm": "9.x"
   },
   "packageManager": "[email protected]",
@@ -23,38 +23,37 @@
     "lint:eslint": "eslint \"**/*.{ts,tsx}\" --max-warnings=0",
     "lint:tsc": "tsc",
     "lint:prettier": "prettier --cache --check .",
-    "analyze": "npx source-map-explorer 'build/static/js/*.js'"
+    "analyze": "pnpm dlx source-map-explorer \"dist/assets/*.js\" --no-border-checks"
   },
   "dependencies": {
-    "@h5web/app": "13.0.0",
-    "@h5web/h5wasm": "13.0.0",
-    "@react-hookz/web": "15.1.0",
+    "@h5web/app": "14.0.0",
+    "@h5web/h5wasm": "14.0.0",
+    "@react-hookz/web": "25.1.0",
     "h5wasm-plugins": "0.0.3",
-    "immer": "9.0.15",
     "normalize.css": "8.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-dropzone": "14.2.1",
-    "react-error-boundary": "4.0.11",
-    "react-hook-form": "7.34.2",
-    "react-icons": "4.4.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-dropzone": "14.3.8",
+    "react-error-boundary": "5.0.0",
+    "react-hook-form": "7.54.2",
+    "react-icons": "5.4.0",
     "react-router-dom": "6.3.0",
-    "suspend-react": "0.0.8",
-    "zustand": "4.0.0"
+    "suspend-react": "0.1.3",
+    "zustand": "5.0.3"
   },
   "devDependencies": {
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "@vitejs/plugin-react": "4.2.1",
+    "@types/node": "^22.13.10",
+    "@types/react": "^18.3.19",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "3.8.1",
     "babel-preset-react-app": "10.0.1",
     "eslint": "8.56.0",
     "eslint-config-galex": "4.5.2",
     "npm-run-all": "4.1.5",
-    "prettier": "3.1.1",
+    "prettier": "3.5.3",
     "typescript": "5.0.4",
-    "vite": "5.1.6",
-    "vite-plugin-checker": "0.6.4",
+    "vite": "6.2.2",
+    "vite-plugin-checker": "0.9.1",
     "vite-plugin-eslint": "1.8.1"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import { H5WasmLocalFileProvider } from '@h5web/h5wasm';
 
 import { getPlugin } from './plugin-utils';
 import type { LocalFile } from './stores';
-import { buildMailto, FEEDBACK_MESSAGE, getExportURL } from './utils';
+import { buildMailto, FEEDBACK_MESSAGE } from './utils';
 
 export const CACHE_KEY = Symbol('bufferFetcher');
 
@@ -16,11 +16,7 @@ function LocalFileViewer(props: Props) {
   const { resolvedUrl, file: rawFile } = file;
 
   return (
-    <H5WasmLocalFileProvider
-      file={rawFile}
-      getExportURL={getExportURL}
-      getPlugin={getPlugin}
-    >
+    <H5WasmLocalFileProvider file={rawFile} getPlugin={getPlugin}>
       <App
         key={resolvedUrl}
         disableDarkMode

src/LocalFileViewer.tsx

@@ -5,7 +5,7 @@ import { suspend } from 'suspend-react';
 import { fetchBuffer } from './fetch-utils';
 import { getPlugin } from './plugin-utils';
 import type { RemoteFile } from './stores';
-import { buildMailto, FEEDBACK_MESSAGE, getExportURL } from './utils';
+import { buildMailto, FEEDBACK_MESSAGE } from './utils';
 
 export const CACHE_KEY = Symbol('bufferFetcher');
 
@@ -20,12 +20,7 @@ function RemoteFileViewer(props: Props) {
   const buffer = suspend(fetchBuffer, [resolvedUrl, CACHE_KEY]);
 
   return (
-    <H5WasmBufferProvider
-      filename={name}
-      buffer={buffer}
-      getExportURL={getExportURL}
-      getPlugin={getPlugin}
-    >
+    <H5WasmBufferProvider filename={name} buffer={buffer} getPlugin={getPlugin}>
       <App
         key={resolvedUrl}
         disableDarkMode

src/RemoteFileViewer.tsx

@@ -5,9 +5,9 @@
   --color-btns: #f06f66;
   --color-five: lightgreen;
 
-  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  --font-body:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --font-logo: 'Lobster', var(--font-body);
 }
 
@@ -34,7 +34,8 @@ body {
 }
 
 code {
-  font-family: 'Lucida Console', 'Lucida Sans Typewriter', monaco,
+  font-family:
+    'Lucida Console', 'Lucida Sans Typewriter', monaco,
     'Bitstream Vera Sans Mono', monospace;
 }
 

src/index.css

@@ -15,7 +15,6 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 import { clear } from 'suspend-react';
-import shallow from 'zustand/shallow';
 
 import type { H5File } from '../stores';
 import { FileService, useStore } from '../stores';
@@ -31,10 +30,8 @@ const ICONS: Record<FileService, IconType> = {
 };
 
 function OpenedFiles() {
-  const { opened, removeFileAt } = useStore(
-    ({ opened, removeFileAt }) => ({ opened, removeFileAt }),
-    shallow,
-  );
+  const opened = useStore((state) => state.opened);
+  const removeFileAt = useStore((state) => state.removeFileAt);
 
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();

src/sidebar/OpenedFiles.tsx

@@ -1,6 +1,5 @@
-import create from 'zustand';
+import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
 
 export enum FileService {
   Local = 'Local',
@@ -38,38 +37,36 @@ interface Store {
 }
 
 export const useStore = create<Store>()(
-  immer(
-    persist(
-      (set) => ({
-        opened: [],
+  persist(
+    (set) => ({
+      opened: [],
 
-        openFiles: (files) => {
-          set((state) => {
-            state.opened.push(...files);
-          });
-        },
+      openFiles: (files) => {
+        set((state) => ({ opened: [...state.opened, ...files] }));
+      },
 
-        removeFileAt: (index) => {
-          set((state) => {
-            state.opened.splice(index, 1);
-          });
-        },
+      removeFileAt: (index) => {
+        set((state) => ({
+          opened: [
+            ...state.opened.slice(0, index),
+            ...state.opened.slice(index + 1),
+          ],
+        }));
+      },
 
-        sidebarMayCollapse: false,
-        toggleSidebar: () => {
-          set((state) => {
-            state.sidebarMayCollapse = !state.sidebarMayCollapse;
-          });
-        },
-      }),
-      {
-        name: 'myhdf5',
-        partialize: ({ opened, sidebarMayCollapse }) => ({
-          opened: opened.filter(({ service }) => service !== FileService.Local), // filter out local files, since they can't be re-opened
-          sidebarMayCollapse,
-        }),
-        version: 1,
+      sidebarMayCollapse: false,
+
+      toggleSidebar: () => {
+        set((state) => ({ sidebarMayCollapse: !state.sidebarMayCollapse }));
       },
-    ),
+    }),
+    {
+      name: 'myhdf5',
+      partialize: ({ opened, sidebarMayCollapse }) => ({
+        opened: opened.filter(({ service }) => service !== FileService.Local), // filter out local files, since they can't be re-opened
+        sidebarMayCollapse,
+      }),
+      version: 1,
+    },
   ),
 );

src/stores.ts

@@ -1,4 +1,3 @@
-import type { GetExportURL } from '@h5web/app';
 import { createSearchParams } from 'react-router-dom';
 
 import {
@@ -122,44 +121,3 @@ export const FEEDBACK_MESSAGE = `<<
   => To report an issue, please include screenshots, reproduction steps, etc.
   => To suggest a new feature, please describe the needs this feature would fulfill.
 >>`;
-
-export const getExportURL: GetExportURL = (
-  format,
-  dataset,
-  selection,
-  value,
-  // eslint-disable-next-line sonarjs/cognitive-complexity
-) => {
-  if (format !== 'csv') {
-    return undefined;
-  }
-
-  return async () => {
-    // Find dimensions of dataset/slice to export
-    // Note that there is currently no way to know if the dataset/slice is transposed - https://github.com/silx-kit/h5web/issues/1454
-    const dims = selection
-      ? dataset.shape.filter((_, index) => selection[index * 2] === ':')
-      : dataset.shape;
-
-    if (dims.length === 0 || dims.length > 2) {
-      throw new Error(
-        'Expected dataset/slice to export to have 1 or 2 dimensions',
-      );
-    }
-
-    let csv = '';
-    const [rows, cols = 1] = dims; // export 1D dataset/slice as column (i.e. 1 value per line)
-
-    for (let i = 0; i < rows; i += 1) {
-      for (let j = 0; j < cols; j += 1) {
-        csv += `${(value[i * cols + j] as number).toString()}${
-          j < cols - 1 ? ',' : ''
-        }`;
-      }
-
-      csv += i < rows - 1 ? '\n' : '';
-    }
-
-    return new Blob([csv]);
-  };
-};

src/utils.ts

@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import { checker } from 'vite-plugin-checker';
 // https://github.com/gxmari007/vite-plugin-eslint/pull/90
@@ -20,7 +20,6 @@ export default defineConfig({
   optimizeDeps: { esbuildOptions: { target: 'es2020' } },
   build: {
     target: 'es2020',
-    // Out of memory! https://github.com/vitejs/vite/issues/2433
-    // sourcemap: true,
+    sourcemap: true,
   },
 });