Temp

.gitignore

@@ -14,3 +14,4 @@ dist*/
 Thumbs.db
 *.log
 *.tsbuildinfo
+.eslintcache

apps/demo/eslint.config.js

@@ -0,0 +1,13 @@
+import { createConfig, detectOpts } from '../../eslint.config.base.js';
+
+const opts = detectOpts(import.meta.dirname);
+
+const config = [
+  ...createConfig(opts),
+  {
+    name: 'h5web/demo/ignores',
+    ignores: ['dist/'],
+  },
+];
+
+export default config;

apps/demo/package.json

@@ -8,7 +8,7 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview --port 5173",
-    "lint:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
+    "lint:eslint": "eslint --max-warnings=0",
     "lint:tsc": "tsc",
     "analyze": "pnpm dlx source-map-explorer dist/assets/*.js --no-border-checks"
   },
@@ -30,8 +30,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "3.7.0",
-    "eslint": "8.57.0",
-    "eslint-config-galex": "4.5.2",
+    "eslint": "9.16.0",
     "typescript": "5.4.5",
     "vite": "5.3.5",
     "vite-css-modules": "1.4.2",

apps/demo/src/DemoApp.tsx

@@ -7,11 +7,11 @@ import HsdsApp from './HsdsApp';
 import MockApp from './MockApp';
 
 // Split H5Wasm demo into its own bundle, and load it only when the demo is first visited
-const H5WasmApp = lazy(() => import('./h5wasm/H5WasmApp'));
+const H5WasmApp = lazy(async () => import('./h5wasm/H5WasmApp'));
 
 const query = new URLSearchParams(document.location.search);
-// @ts-expect-error
-window.H5WEB_EXPERIMENTAL = query.has('experimental');
+// @ts-expect-error - Untyped global flag
+globalThis.H5WEB_EXPERIMENTAL = query.has('experimental');
 
 function DemoApp() {
   return (

apps/demo/src/h5wasm/DropZone.tsx

@@ -1,9 +1,8 @@
-import type { PropsWithChildren } from 'react';
-import { useCallback } from 'react';
+import { type PropsWithChildren, useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import styles from './DropZone.module.css';
-import type { RemoteFile } from './models';
+import { type RemoteFile } from './models';
 import UrlForm from './UrlForm';
 
 const EXT = ['.h5', '.hdf5', '.hdf', '.nx', '.nx5', '.nexus', '.nxs', '.cxi'];

apps/demo/src/h5wasm/H5WasmApp.tsx

@@ -5,7 +5,7 @@ import { useSearch } from 'wouter';
 
 import { getFeedbackURL } from '../utils';
 import DropZone from './DropZone';
-import type { RemoteFile } from './models';
+import { type RemoteFile } from './models';
 import { getPlugin } from './plugin-utils';
 
 function H5WasmApp() {

apps/demo/src/h5wasm/UrlForm.tsx

@@ -1,10 +1,9 @@
 import useAxios from 'axios-hooks';
-import type { FormEvent } from 'react';
-import { useCallback, useEffect } from 'react';
+import { type FormEvent, useCallback, useEffect } from 'react';
 import { FiLoader } from 'react-icons/fi';
 import { useLocation, useSearch } from 'wouter';
 
-import type { RemoteFile } from './models';
+import { type RemoteFile } from './models';
 import styles from './UrlForm.module.css';
 
 interface Props {

apps/demo/src/utils.ts

@@ -1,5 +1,4 @@
-import type { FeedbackContext } from '@h5web/app';
-import { getFeedbackMailto } from '@h5web/app';
+import { type FeedbackContext, getFeedbackMailto } from '@h5web/app';
 
 export function getFeedbackURL(context: FeedbackContext): string {
   const email = import.meta.env.VITE_FEEDBACK_EMAIL as string;

apps/demo/src/vite-env.d.ts

@@ -1,5 +1,3 @@
-/* eslint-disable spaced-comment */
-
 /// <reference types="vite/client" />
 
 // HDF5 compression plugins

apps/demo/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src"]
+  "include": ["src", "*"]
 }

apps/storybook/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-vite';
+import { type StorybookConfig } from '@storybook/react-vite';
 import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {

apps/storybook/eslint.config.js

@@ -0,0 +1,13 @@
+import { createConfig, detectOpts } from '../../eslint.config.base.js';
+
+const opts = detectOpts(import.meta.dirname);
+
+const config = [
+  ...createConfig(opts),
+  {
+    name: 'h5web/storybook/ignores',
+    ignores: ['build/'],
+  },
+];
+
+export default config;

apps/storybook/package.json

@@ -8,7 +8,7 @@
     "start": "storybook dev -p 6006",
     "build": "storybook build -o build",
     "serve": "pnpm dlx http-server -p 6006 ./build",
-    "lint:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
+    "lint:eslint": "eslint --max-warnings=0",
     "lint:tsc": "tsc"
   },
   "dependencies": {
@@ -42,8 +42,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/three": "0.167.1",
-    "eslint": "8.57.0",
-    "eslint-config-galex": "4.5.2",
+    "eslint": "9.16.0",
     "remark-gfm": "4.0.0",
     "storybook": "8.3.5",
     "typescript": "5.4.5",

apps/storybook/src/Annotation.stories.tsx

@@ -1,13 +1,13 @@
-import type { CanvasEvent } from '@h5web/lib';
 import {
   Annotation,
+  type CanvasEvent,
   DefaultInteractions,
   useCanvasEvent,
   VisCanvas,
 } from '@h5web/lib';
 import { useRafState } from '@react-hookz/web';
-import type { Meta, StoryObj } from '@storybook/react';
-import type { ReactNode } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ReactNode } from 'react';
 
 import FillHeight from './decorators/FillHeight';
 import { formatCoord } from './utils';

apps/storybook/src/AxialSelectToZoom.stories.tsx

@@ -12,13 +12,13 @@ import {
   VisCanvas,
   Zoom,
 } from '@h5web/lib';
-import type { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { range } from 'd3-array';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray1D = mockValues.oneD();
-const dataArray2D = toTypedNdArray(mockValues.twoD(), Float32Array);
+const oneD = mockValues.oneD();
+const typedTwoD = toTypedNdArray(mockValues.twoD(), Float32Array);
 
 const meta = {
   title: 'Building Blocks/Interactions/AxialSelectToZoom',
@@ -45,24 +45,20 @@ type Story = StoryObj<typeof meta>;
 const Default = {
   render: (args) => {
     const { modifierKey } = args;
-    const domain = useDomain(dataArray1D);
+    const domain = useDomain(oneD);
     assertDefined(domain);
 
     return (
       <VisCanvas
-        abscissaConfig={{ visDomain: [0, dataArray1D.size], showGrid: true }}
+        abscissaConfig={{ visDomain: [0, oneD.size], showGrid: true }}
         ordinateConfig={{ visDomain: domain, showGrid: true }}
       >
         <Pan modifierKey={modifierKey?.length === 0 ? 'Control' : undefined} />
         <Zoom />
         <AxialSelectToZoom {...args} />
         <ResetZoomButton />
 
-        <Line
-          abscissas={range(dataArray1D.size)}
-          ordinates={dataArray1D.data}
-          color="blue"
-        />
+        <Line abscissas={range(oneD.size)} ordinates={oneD.data} color="blue" />
       </VisCanvas>
     );
   },
@@ -115,8 +111,8 @@ export const Disabled = {
 
 export const DisabledInsideEqualAspectCanvas = {
   render: (args) => {
-    const [rows, cols] = dataArray2D.shape;
-    const domain = useDomain(dataArray2D);
+    const [rows, cols] = typedTwoD.shape;
+    const domain = useDomain(typedTwoD);
     assertDefined(domain);
 
     return (
@@ -131,7 +127,7 @@ export const DisabledInsideEqualAspectCanvas = {
         <ResetZoomButton />
 
         <HeatmapMesh
-          values={dataArray2D}
+          values={typedTwoD}
           domain={domain}
           colorMap="Viridis"
           scaleType={ScaleType.Linear}

apps/storybook/src/AxialSelectionTool.stories.tsx

@@ -1,16 +1,16 @@
-import type { Selection } from '@h5web/lib';
 import {
   AxialSelectionTool,
   Box,
   Pan,
   ResetZoomButton,
+  type Selection,
   SvgElement,
   SvgRect,
   VisCanvas,
   Zoom,
 } from '@h5web/lib';
 import { useThrottledState } from '@react-hookz/web';
-import type { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 
 import FillHeight from './decorators/FillHeight';
 import { getTitleForSelection } from './utils';

apps/storybook/src/ColorBar.stories.tsx

@@ -1,7 +1,6 @@
-import type { ColorBarProps } from '@h5web/lib';
-import { ColorBar, ScaleType } from '@h5web/lib';
+import { ColorBar, type ColorBarProps, ScaleType } from '@h5web/lib';
 import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { type Meta, type StoryFn, type StoryObj } from '@storybook/react';
 
 import FillHeight from './decorators/FillHeight';
 
@@ -77,7 +76,7 @@ export const WithBounds = {
   args: {
     ...Default.args,
     domainMin: -235.111,
-    domainMax: 98765,
+    domainMax: 98_765,
     withBounds: true,
   },
 } satisfies Story;

apps/storybook/src/ColorBarHorizontal.stories.tsx

@@ -1,7 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 
-import type { StoryProps } from './ColorBar.stories';
-import ColorBarStoriesMeta, { Default } from './ColorBar.stories';
+import ColorBarStoriesMeta, {
+  Default,
+  type StoryProps,
+} from './ColorBar.stories';
 
 const meta = {
   ...ColorBarStoriesMeta,
@@ -24,7 +26,7 @@ export const WithBounds = {
   args: {
     ...Default.args,
     domainMin: -235.111,
-    domainMax: 98765,
+    domainMax: 98_765,
     horizontal: true,
     withBounds: true,
   },

apps/storybook/src/DataCurve.stories.tsx

@@ -9,13 +9,13 @@ import {
   VisCanvas,
 } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
-import type { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { range } from 'd3-array';
 import { useState } from 'react';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray = mockValues.oneD();
+const oneD = mockValues.oneD();
 
 const meta = {
   title: 'Building Blocks/DataCurve',
@@ -26,9 +26,9 @@ const meta = {
     controls: { sort: 'requiredFirst' },
   },
   args: {
-    abscissas: range(dataArray.size),
-    ordinates: dataArray.data,
-    errors: dataArray.data.map(() => 10),
+    abscissas: range(oneD.size),
+    ordinates: oneD.data,
+    errors: oneD.data.map(() => 10),
     curveType: CurveType.LineOnly,
     color: 'blue',
     visible: true,