refactor: migrate webpack to vite, karma to web-test-runner (#1111)

Co-authored-by: Trevor Manz <trevor.j.manz@gmail.com>
Co-authored-by: Peter Kerpedjiev <pkerpedjiev@gmail.com>

.eslintrc

@@ -1,5 +1,4 @@
 {
-  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "es6": true
@@ -14,20 +13,12 @@
     "react",
     "prettier"
   ],
-  "settings": {
-    "react": {
-      "pragma": "React"
-    },
-    "ecmascript": 6
-  },
-  "globals": {
-    "VERSION": false
-  },
   "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    },
-    "ecmaVersion": 6
+    }
   },
   "rules": {
     // TODOs:
@@ -105,10 +96,21 @@
   },
   "overrides": [
     {
-      "files": ["test/**/*.js", "test/**/**/*.js" ],
+      "files": ["test/**/*.{js,jsx}"],
       "rules": {
         "no-use-before-define": 0, // So viewconfs can be below the body of the test.
-	"no-undef": 0
+        "no-undef": 0,
+        "no-unused-expressions": "off", // for Mocha's expect(foo).to.be.ok syntax
+      }
+    },
+    {
+      "files": [
+        "web-test-runner.config.mjs",
+        "vite.config.js",
+        "scripts/*",
+      ],
+      "rules": {
+        "import/no-extraneous-dependencies": 0,
       }
     }
   ]

.github/workflows/nodejs.yml

@@ -15,7 +15,7 @@ jobs:
       NODE_OPTIONS: --max-old-space-size=7168
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -24,8 +24,8 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: sudo apt-get install xvfb
-      - run: npm ci
-      - run: npm run build --if-present
+      - run: npm ci --legacy-peer-deps
+      - run: npm run optimize # let vite optimize deps first
       - run: xvfb-run --auto-servernum npm run test
         env:
           CI: true

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Release notes
 
+## Unreleased
+
+- Update to webpack5
+- Update a bunch of packages (most notably d3 packages which have a slightly different API)
+- Fix tests
+- Update scss to fix deprecation warnings
+
 ## v1.11.11
 
 - Bump terser-webpack-plugin version to fix build issue

README.md

@@ -37,18 +37,27 @@ npm clean-install
 npm run start
 ```
 
-This starts a server in development mode at http://localhost:8080/.
+This starts a server in development mode at http://localhost:5173/.
+
+> **Warning** 
+> The following examples need to be migrated to the latest build.
+> Once started, a list of the examples can be found at [http://localhost:8080/examples.html](http://localhost:8080/examples.html).
+> Template viewconfs located at `/docs/examples/viewconfs` can viewed directly at urls such as  [http://localhost:8080/apis/svg.html?/viewconfs/overlay-tracks.json](http://localhost:8080/apis/svg.html?/viewconfs/overlay-tracks.json).
 
-Once started, a list of the examples can be found at [http://localhost:8080/examples.html](http://localhost:8080/examples.html).
-Template viewconfs located at `/docs/examples/viewconfs` can viewed directly at urls such as  [http://localhost:8080/apis/svg.html?/viewconfs/overlay-tracks.json](http://localhost:8080/apis/svg.html?/viewconfs/overlay-tracks.json).
 
 ### Tests
 
-The tests for the React components and API functions are located in the `test` directory. To save time and only run relevant tests, open `karma.conf.js` and select the test files to run before running `test-watch`.
+The tests for the React components and API functions are located in the `test` directory.
+Tests are run with [`web-test-runner`](https://modern-web.dev/docs/test-runner/overview/), which you can learn more about the CLI in the [documentation](https://modern-web.dev/docs/test-runner/cli-and-configuration/#test-runner-cli-and-configuration).
 
-```
-npm run test-watch
-```
+Useful commands:
+
+- Run all tests: `npm test`
+- Run all tests in interactive "watch" mode: `npm test -- --watch`
+- Run a specific test or "glob" of tests: `npm test -- test/APITests.js [--watch]`
+- Manually run individual tests in an open browser window: `npm test -- --manual`
+
+There can sometimes be import issues due to timeouts when running tests after a clean installation. It is best to run `npm run optimize` prior to running tests for the first time.
 
 **Troubleshooting:**
 

app/bufferless-slugid.js

@@ -0,0 +1,36 @@
+import { v4 } from '@lukeed/uuid';
+
+/**
+ *
+ * Returns a randomly generated uuid v4 compliant slug which conforms to a set
+ * of "nice" properties, at the cost of some entropy. Currently this means one
+ * extra fixed bit (the first bit of the uuid is set to 0) which guarantees the
+ * slug will begin with [A-Za-f]. For example such slugs don't require special
+ * handling when used as command line parameters (whereas non-nice slugs may
+ * start with `-` which can confuse command line tools).
+ *
+ * Adapted from `slugid` to avoid the need a Buffer polyfill.
+ *
+ * @see https://github.com/taskcluster/slugid/blob/ce3bf62c6c50b7da014ce568e4510944d306d6f0/slugid.js#L63-L83
+ */
+function nice() {
+  // convert string uuid to bytes (without Buffer);
+  const uuid = v4();
+  const integers = uuid
+    .replace(/-/gi, '')    // remove '-' separator of string hex
+    .match(/[\dA-F]{2}/gi) // match each hex pair
+    .map(s => parseInt(s, 16));
+  const bytes = new Uint8Array(integers);
+
+  bytes[0] &= 0x7f; // unset first bit to ensure [A-Za-f] first char
+
+  return btoa(bytes)
+    .replace(/\+/g, '-')  // Replace + with - (see RFC 4648, sec. 5)
+    .replace(/\//g, '_')  // Replace / with _ (see RFC 4648, sec. 5)
+    .substring(0, 22);    // Drop '==' padding
+}
+
+export default {
+  v4,
+  nice,
+}