Merge pull request #236 from allen-cell-animated/feature/vite-transpile

use vite and vitest

.eslintrc.json

@@ -2,8 +2,7 @@
   "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "env": {
     "browser": true,
-    "es6": true,
-    "mocha": true
+    "es6": true
   },
   "plugins": ["@typescript-eslint"],
   "rules": {

.github/workflows/nightly.yml

@@ -39,6 +39,6 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./volumeviewer
+          publish_dir: ./public/volumeviewer
           tag_name: ${{ steps.prepare_tag.outputs.deploy_tag_name }}
           tag_message: "Deployment to gh-pages to test new viewer ${{ steps.prepare_tag.outputs.tag_name }}"

.gitignore

@@ -4,4 +4,7 @@ lib
 es
 build
 demo
+public/dist
+public/demo
+public/volumeviewer
 

package.json

@@ -16,15 +16,15 @@
     "build-docs": "node node_modules/documentation/bin/documentation.js build src/Histogram.ts src/View3d.ts src/Volume.ts src/VolumeMaker.ts src/VolumeLoader.ts -f html -o docs --shallow",
     "build": "npm run transpileES && npm run build-types",
     "build-types": "tsc -p tsconfig.types.json",
-    "build-demo": "webpack --config webpack.demo.js",
+    "build-demo": "vite build public/ --config vite.config.ts --outDir ./demo",
     "clean": "rimraf es/",
-    "format": "prettier --write src/**/*.js",
-    "gh-build": "webpack --config webpack.dev.js",
-    "dev": "webpack serve --config webpack.dev.js",
-    "start": "webpack serve --config webpack.dev.js",
+    "format": "prettier --write src/**/*.ts",
+    "gh-build": "vite build public/ --config vite.config.ts --outDir ./volumeviewer",
+    "dev": "vite serve",
+    "start": "vite serve",
     "lint": "eslint --config ./.eslintrc.json --ignore-path ./.eslintignore --ext .js --ext .ts ./src",
-    "test": "cross-env NODE_OPTIONS=\"--loader ts-node/esm\" mocha --require ts-node/register --es-module-specifier-resolution=node src/**/test/*.[jt]s",
-    "transpileES": "babel src --out-dir es --extensions .js,.ts --ignore **/*.test.js",
+    "test": "vitest run",
+    "transpileES": "babel src --out-dir es --extensions .js,.ts --ignore **/*.test.ts",
     "typeCheck": "tsc -p tsconfig.json --noEmit"
   },
   "author": "Daniel Toloudis",
@@ -48,16 +48,13 @@
     "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
     "@tweakpane/core": "^1.1.9",
-    "@types/chai": "^4.3.12",
-    "@types/mocha": "^9.1.1",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.30.5",
     "acorn": "^8.7.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-inline-import-data-uri": "^1.0.1",
-    "chai": "^5.1.0",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
@@ -67,15 +64,17 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "husky": "^7.0.1",
+    "jsdom": "^25.0.1",
     "lil-gui": "^0.19.2",
     "lint-staged": "^13.2.1",
-    "mocha": "^10.3.0",
     "prettier": "^2.3.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "ts-node": "^10.9.2",
     "typescript": "^4.3.5",
     "url-loader": "^4.1.1",
+    "vite": "^6.0.6",
+    "vitest": "^2.1.8",
     "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"

public/index.html

@@ -69,5 +69,6 @@
         <input id="gammaMax" type="number" min="0" max="255" step="1" value="255"/>    
     </p>
 </body>
+<script type="module" src="index.ts"></script>
 
 </html>

src/FusedChannelData.ts

@@ -23,9 +23,9 @@ import {
 
 import Channel from "./Channel.js";
 import { renderToBufferVertShader } from "./constants/basicShaders.js";
-import fuseShaderSrcUI from "./constants/shaders/fuseUI.frag";
-import fuseShaderSrcF from "./constants/shaders/fuseF.frag";
-import fuseShaderSrcI from "./constants/shaders/fuseI.frag";
+import fuseShaderSrcUI from "./constants/shaders/fuseUI.frag?raw";
+import fuseShaderSrcF from "./constants/shaders/fuseF.frag?raw";
+import fuseShaderSrcI from "./constants/shaders/fuseI.frag?raw";
 import type { FuseChannel, NumberType } from "./types.js";
 
 // This is the owner of the fused RGBA volume texture atlas, and the mask texture atlas.

src/constants/denoiseShader.ts

@@ -1,6 +1,6 @@
 import { Vector2 } from "three";
 
-import denoiseFragmentShader from "./shaders/pathtrace_denoise.frag";
+import denoiseFragmentShader from "./shaders/pathtrace_denoise.frag?raw";
 export const denoiseFragmentShaderSrc = denoiseFragmentShader;
 
 const DENOISE_WINDOW_RADIUS = 3;

src/constants/pathtraceOutputShader.ts

@@ -1,4 +1,4 @@
-import pathtraceOutputFragmentShader from "./shaders/pathtrace_output.frag";
+import pathtraceOutputFragmentShader from "./shaders/pathtrace_output.frag?raw";
 export const pathtraceOutputFragmentShaderSrc = pathtraceOutputFragmentShader;
 
 export const pathtraceOutputShaderUniforms = () => ({

src/constants/volumePTshader.ts

@@ -1,6 +1,6 @@
 import { Texture, Vector2, Vector3, Vector4 } from "three";
 import { Light, AREA_LIGHT, SKY_LIGHT } from "../Light.js";
-import pathTraceFragmentShader from "./shaders/pathtrace.frag";
+import pathTraceFragmentShader from "./shaders/pathtrace.frag?raw";
 
 export const pathTracingFragmentShaderSrc = pathTraceFragmentShader;
 

src/constants/volumeRayMarchShader.ts

@@ -1,6 +1,6 @@
 import { Vector2, Vector3, Matrix4, Texture } from "three";
-import rayMarchVertexShader from "./shaders/raymarch.vert";
-import rayMarchFragmentShader from "./shaders/raymarch.frag";
+import rayMarchVertexShader from "./shaders/raymarch.vert?raw";
+import rayMarchFragmentShader from "./shaders/raymarch.frag?raw";
 
 export const rayMarchingVertexShaderSrc = rayMarchVertexShader;
 export const rayMarchingFragmentShaderSrc = rayMarchFragmentShader;

src/constants/volumeSliceShader.ts

@@ -1,5 +1,5 @@
-import sliceVertexShader from "./shaders/slice.vert";
-import sliceFragShader from "./shaders/slice.frag";
+import sliceVertexShader from "./shaders/slice.vert?raw";
+import sliceFragShader from "./shaders/slice.frag?raw";
 import { Vector2, Vector3, Matrix4, Texture } from "three";
 
 export const sliceVertexShaderSrc = sliceVertexShader;

src/loaders/TiffLoader.ts

@@ -260,7 +260,7 @@ class TiffLoader extends ThreadableVolumeLoader {
           url: this.url,
         };
 
-        const worker = new Worker(new URL("../workers/FetchTiffWorker", import.meta.url));
+        const worker = new Worker(new URL("../workers/FetchTiffWorker", import.meta.url), {type: "module"});
         worker.onmessage = (e: MessageEvent<TiffLoadResult | { isError: true; error: ErrorObject }>) => {
           if (e.data.isError) {
             reject(deserializeError(e.data.error));

src/test/ChunkPrefetchIterator.test.ts

@@ -1,5 +1,3 @@
-import { expect } from "chai";
-
 import { TCZYX } from "../loaders/zarr_utils/types";
 import ChunkPrefetchIterator from "../loaders/zarr_utils/ChunkPrefetchIterator";
 import { PrefetchDirection } from "../loaders/zarr_utils/types";

src/test/RequestQueue.test.ts

@@ -1,4 +1,5 @@
-import { expect } from "chai";
+import { vi } from "vitest";
+
 import { Vector3 } from "three";
 import { TypedArray } from "@zarrita/core";
 
@@ -439,6 +440,14 @@ describe("test RequestQueue", () => {
     }
 
     it("can issue and cancel mock loadspec requests", async () => {
+      const fn = vi.fn();
+      const unhandledPromise = new Promise<void>((resolve) => {
+        process.on("unhandledRejection", () => {
+          fn();
+          resolve();
+        });
+      });
+
       const rq = new RequestQueue(10);
       const xDim = 400;
       const yDim = 600;
@@ -489,6 +498,10 @@ describe("test RequestQueue", () => {
       expect(workCount)
         .to.be.lessThan(2 * numFrames)
         .and.greaterThanOrEqual(numFrames);
+
+      await unhandledPromise;
+      // This seems to be randomized. Expect some number of times either numFrames or numFrames-1.
+      expect([numFrames, numFrames - 1]).to.include(fn.mock.calls.length);
     });
   });
 });

src/test/SubscribableRequestQueue.test.ts

@@ -1,5 +1,3 @@
-import { expect } from "chai";
-
 import SubscribableRequestQueue from "../utils/SubscribableRequestQueue";
 
 const TIMEOUT = 10;

src/test/VolumeCache.test.ts

@@ -1,4 +1,3 @@
-import { expect } from "chai";
 import VolumeCache from "../VolumeCache";
 
 describe("VolumeCache", () => {

src/test/VolumeRenderSettings.test.ts

@@ -1,4 +1,3 @@
-import { expect } from "chai";
 import { Axis, VolumeRenderSettings } from "../VolumeRenderSettings";
 import { Vector3 } from "three";
 

src/test/lut.test.ts

@@ -1,5 +1,3 @@
-import { expect } from "chai";
-
 import type { ControlPoint } from "../Lut";
 import { Lut, remapLut, remapControlPoints } from "../Lut";
 import Histogram from "../Histogram";

src/test/num_utils.test.ts

@@ -1,6 +1,3 @@
-import { expect } from "chai";
-import { it } from "mocha";
-
 import { constrainToAxis, formatNumber, getTimestamp } from "../utils/num_utils";
 import { Axis } from "../VolumeRenderSettings.js";
 

src/test/volume.test.ts

@@ -1,5 +1,3 @@
-import { expect } from "chai";
-
 import Volume from "../Volume";
 import VolumeMaker from "../VolumeMaker";
 import { LUT_ARRAY_LENGTH } from "../Lut";

src/test/zarr_utils.test.ts

@@ -1,5 +1,3 @@
-import { expect } from "chai";
-
 import { AbsolutePath, SyncReadable } from "@zarrita/storage";
 import * as zarr from "@zarrita/core";
 

src/types/glsl.d.ts

@@ -5,12 +5,12 @@ declare module "*.glsl" {
   export default value;
 }
 
-declare module "*.frag" {
+declare module "*.frag?raw" {
   const value: string;
   export default value;
 }
 
-declare module "*.vert" {
+declare module "*.vert?raw" {
   const value: string;
   export default value;
 }

src/workers/VolumeLoaderContext.ts

@@ -52,7 +52,7 @@ class SharedLoadWorkerHandle {
   public onUpdateMetadata: ((e: MetadataUpdateEvent) => void) | undefined = undefined;
 
   constructor() {
-    this.worker = new Worker(new URL("./VolumeLoadWorker", import.meta.url));
+    this.worker = new Worker(new URL("./VolumeLoadWorker", import.meta.url), {type:"module"});
     this.worker.onmessage = this.receiveMessage.bind(this);
   }
 

tsconfig.json

@@ -14,7 +14,8 @@
     "sourceMap": true,
     "strict": true,
     "target": "ES6",
-    "typeRoots": ["src/types", "node_modules/@types"]
+    "typeRoots": ["src/types", "node_modules/@types"],
+    "types": ["vitest/globals"]
   },
   "files": ["src/index.ts", "public/index.ts"],
   "include": ["src/**/*", "public/**/*"]

tsconfig.types.json

@@ -8,6 +8,6 @@
   "include": ["src/**/*"],
   "exclude": [
     "src/workers/**/*",
-    "**/*.test.js",
+    "**/*.test.ts",
   ],
 }

vite.config.ts

@@ -0,0 +1,14 @@
+import type { UserConfig } from "vite";
+
+export default {
+    plugins: [],
+    define: {
+        "APP_VERSION": JSON.stringify(process.env.npm_package_version),
+    },
+    server: {
+        open: "public/index.html",
+    },
+    worker: {
+        format: "es",
+    },
+} satisfies UserConfig;

vitest.config.ts

@@ -0,0 +1,10 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+    test: {
+        environment: "jsdom",
+        globals: true,
+        setupFiles: [],
+    },
+});