Replace Galex ESLint config

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/vite-env.d.ts

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

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/AxialSelectToZoom.stories.tsx

@@ -17,8 +17,8 @@ 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/ColorBar.stories.tsx

@@ -77,7 +77,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

@@ -24,7 +24,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

@@ -15,7 +15,7 @@ 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,

apps/storybook/src/DefaultInteractions.stories.tsx

@@ -13,7 +13,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray = toTypedNdArray(mockValues.twoD(), Float32Array);
+const typedTwoD = toTypedNdArray(mockValues.twoD(), Float32Array);
 
 const meta = {
   title: 'Building Blocks/Interactions/DefaultInteractions',
@@ -36,8 +36,8 @@ type Story = StoryObj<typeof meta>;
 
 export const InsideAutoAspectCanvas = {
   render: (args) => {
-    const [rows, cols] = dataArray.shape;
-    const domain = useDomain(dataArray);
+    const [rows, cols] = typedTwoD.shape;
+    const domain = useDomain(typedTwoD);
     assertDefined(domain);
 
     return (
@@ -50,7 +50,7 @@ export const InsideAutoAspectCanvas = {
         <ResetZoomButton />
 
         <HeatmapMesh
-          values={dataArray}
+          values={typedTwoD}
           domain={domain}
           colorMap="Viridis"
           scaleType={ScaleType.Linear}
@@ -62,8 +62,8 @@ export const InsideAutoAspectCanvas = {
 
 export const InsideEqualAspectCanvas = {
   render: (args) => {
-    const [rows, cols] = dataArray.shape;
-    const domain = useDomain(dataArray);
+    const [rows, cols] = typedTwoD.shape;
+    const domain = useDomain(typedTwoD);
     assertDefined(domain);
 
     return (
@@ -76,7 +76,7 @@ export const InsideEqualAspectCanvas = {
         <ResetZoomButton />
 
         <HeatmapMesh
-          values={dataArray}
+          values={typedTwoD}
           domain={domain}
           colorMap="Viridis"
           scaleType={ScaleType.Linear}

apps/storybook/src/ErrorBars.stories.tsx

@@ -12,7 +12,7 @@ import { range } from 'd3-array';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray = mockValues.oneD();
+const oneD = mockValues.oneD();
 
 const meta = {
   title: 'Building Blocks/ErrorBars',
@@ -23,9 +23,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),
     color: 'blue',
     visible: true,
   },

apps/storybook/src/Glyphs.stories.tsx

@@ -13,7 +13,7 @@ import { range } from 'd3-array';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray = mockValues.oneD();
+const oneD = mockValues.oneD();
 
 const meta = {
   title: 'Building Blocks/Glyphs',
@@ -24,8 +24,8 @@ const meta = {
     controls: { sort: 'requiredFirst' },
   },
   args: {
-    abscissas: range(dataArray.size),
-    ordinates: dataArray.data,
+    abscissas: range(oneD.size),
+    ordinates: oneD.data,
     glyphType: GlyphTypeEnum.Cross,
     color: 'blue',
     size: 6,

apps/storybook/src/HeatmapMesh.stories.tsx

@@ -16,11 +16,11 @@ import { LinearFilter, NearestFilter } from 'three';
 
 import FillHeight from './decorators/FillHeight';
 
-const dataArray = mockValues.twoD();
-const domain = getDomain(dataArray.data);
+const twoD = mockValues.twoD();
+const domain = getDomain(twoD.data);
 assertDefined(domain);
 
-const uint16Values = [0x4900, 0x4d00, 0x4f80, 0x5100]; // 10, 20, 30, 40
+const uint16Values = [0x49_00, 0x4d_00, 0x4f_80, 0x51_00]; // 10, 20, 30, 40
 const uint16DataArray = ndarray(Uint16Array.from(uint16Values), [2, 2]);
 const uint16Domain: Domain = [10, 40];
 const mask = ndarray(
@@ -74,7 +74,7 @@ export const Default = {
     );
   },
   args: {
-    values: toTypedNdArray(dataArray, Float32Array),
+    values: toTypedNdArray(twoD, Float32Array),
     domain,
     scaleType: ScaleType.SymLog,
     colorMap: 'Inferno',