feat(Build): modernize build and test tooling with Vite/Vitest & oxlint/oxfmt

.github/workflows/build-test.yml

@@ -12,35 +12,34 @@ jobs:
         node: [22]
     name: ${{ matrix.os }} and node ${{ matrix.node }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
       - name: Install dependencies
-        run: |
-          npm ci
-          sudo apt-get install xvfb
+        run: npm ci
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium firefox
       - name: Build
         run: npm run build:release
       - name: Archive build output
         if: github.event_name != 'merge_group'
         uses: actions/upload-artifact@v4
         with:
-          name: build-results-${{ matrix.runs_on }}-node_${{ matrix.node }}
+          name: build-results-${{ matrix.os }}-node_${{ matrix.node }}
           path: dist
           retention-days: 15
       - name: Validate generated typescript definitions
         run: |
           npx tsc -p tsconfig.esm-check.json
-          npx tsc -p tsconfig.umd-check.json
       - name: Chrome and Firefox tests
-        run: xvfb-run --auto-servernum npm run test -- --browsers ChromeSwiftShader,Firefox
+        run: xvfb-run --auto-servernum npm run test:reporter
       - name: Archive test results
         if: github.event_name != 'merge_group' && (success() || failure())
         uses: actions/upload-artifact@v4
         continue-on-error: true
         with:
-          name: test-results-${{ matrix.runs_on }}-node_${{ matrix.node }}
-          path: Utilities/TestResults/Test-Report.html
+          name: test-results-${{ matrix.os }}-node_${{ matrix.node }}
+          path: Utilities/TestResults/
           retention-days: 15

.github/workflows/pr-checks.yml

@@ -8,13 +8,13 @@ jobs:
     runs-on: ubuntu-24.04
     name: Check and lint PR
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # needed so commitlint can lint the commits
       - name: Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - run: npm ci
       - name: Enforce code style
         run: npm run validate

.github/workflows/publish.yml

@@ -22,33 +22,32 @@ jobs:
       name: npm
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Setup node
         uses: actions/setup-node@v4
         with:
           node-version: 22
       - name: Install dependencies
-        run: |
-          npm ci
-          sudo apt-get install xvfb
+        run: npm ci
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium firefox
       - name: Build
         run: npm run build:release
       - name: Validate code style
         run: npm run validate
       - name: Validate generated typescript definitions
         run: |
           npx tsc -p tsconfig.esm-check.json
-          npx tsc -p tsconfig.umd-check.json
       - name: Chrome and Firefox tests
-        run: xvfb-run --auto-servernum npm run test -- --browsers ChromeSwiftShader,Firefox
+        run: xvfb-run --auto-servernum npm run test:reporter
       - name: Archive test results
         if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-results
-          path: Utilities/TestResults/Test-Report.html
+          path: Utilities/TestResults/
           retention-days: 15
       - name: Release
         env:
@@ -70,11 +69,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 1
       - name: Setup node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: 22
       - name: Install dependencies

.oxfmtrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "sortPackageJson": false,
+  "ignorePatterns": []
+}

.oxlintrc.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["import"],
+  "env": {
+    "es2020": true,
+    "es6": true,
+    "browser": true
+  },
+  "globals": {
+    "__BASE_PATH__": "readonly",
+    "__VTK_TEST_NO_WEBGL__": "readonly",
+    "__VTK_TEST_WEBGPU__": "readonly",
+    "VRFrameData": "readonly"
+  },
+  "rules": {
+    "linebreak-style": "off",
+    "no-console": "off",
+    "no-param-reassign": [
+      "warn",
+      {
+        "props": false
+      }
+    ],
+    "no-plusplus": "off",
+    "no-underscore-dangle": "off",
+    "no-unused-vars": [
+      "warn",
+      {
+        "args": "none"
+      }
+    ],
+    "prefer-destructuring": "off"
+  },
+  "ignorePatterns": [
+    "**/example_/*.js",
+    "Utilities/**/*.js",
+    "vite.config.js",
+    "vitest.config.js",
+    ".eslintrc.js"
+  ]
+}

Documentation/docs/develop_example.md

@@ -47,7 +47,7 @@ Which means the sub-directory of the __Examples__ directory correspond to a grou
 
 ## Running an example
 
-To simplify the development and execution of examples we have a script that let you list all the examples and run a given one using the webpack dev server which will automatically rebuild the code while running when you are editing any file that get involved in it.
+To simplify the development and execution of examples we have a script that lets you list all the examples and run a given one using the Vite dev server, which automatically rebuilds while you edit relevant files.
 
 To list the examples you can run the following command:
 
@@ -64,5 +64,5 @@ $ npm run example -- ConeSource
 Then the example could be seen at the following URL where standard debug tools could be used within your browser:
 
 ```sh
-http://localhost:9999/
+http://localhost:3000/
 ```

Documentation/docs/develop_webxr.md

@@ -132,19 +132,19 @@ VTK.js supports rendering to most devices that support the WebXR API. Rendering
 
 ### Building and Running Examples
 
-Webpack can be used to run examples on local XR hardware. The following command will
+Vite can be used to run examples on local XR hardware. The following command will
 serve the "AR" example over a self-signed HTTPS connection:
 
 ```
 path/to/vtk-js> npm run example:https -- AR
 ...
-<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Loopback: https://localhost:9999/
-<i> [webpack-dev-server] On Your Network (IPv4): https://xxx.xxx.xxx.xxx:9999/
+VITE vX.Y.Z  ready in XXX ms
+➜  Local:   https://localhost:3000/
+➜  Network: https://xxx.xxx.xxx.xxx:3000/
 ```
 
 The example can then be launched on the WebXR device by navigating in a compatible browser to the
-address given at `https://xxx.xxx.xxx.xxx:9999` in the output.
+address given at `https://xxx.xxx.xxx.xxx:3000` in the output.
 
 ### Emulating XR Hardware
 

Examples/Rendering/ImageResliceMapperLabelOutline/index.js

@@ -292,9 +292,8 @@ async function update() {
     }
   });
 
-  const { image: itkImage } = await window.itk.readImageDICOMArrayBufferSeries(
-    arrayBuffers
-  );
+  const { image: itkImage } =
+    await window.itk.readImageDICOMArrayBufferSeries(arrayBuffers);
 
   const vtkImage = vtkITKHelper.convertItkToVtkImage(itkImage);
   setImage(vtkImage);