feat!: migrate parse5 to v7+/v8 and convert JSDoc packages to TypeScript

BREAKING CHANGE: parse5 v6 is no longer supported.

parse5 v7+/v8 migration:
- Update all parse5 type imports to use DefaultTreeAdapterTypes namespace
- Update parse5 dependencies from ^6.0.1 to ^7.0.0 || ^8.0.0
- Remove @types/parse5 (types now bundled with parse5)
- Update dom5 internal library for parse5 v8 compatibility

JSDoc → TypeScript conversions:
- config-loader: convert .js source files to .ts
- parse5-utils: rewrite as TypeScript with parse5 v8 API
- rollup-plugin-copy: convert .js source files to .ts
- rollup-plugin-import-meta-assets: convert .js source files to .ts
- storybook-utils: convert .js source files to .ts

Additional changes:
- Upgrade koa to v3.1.1 and ws to v8.18.3 in dev-server-core
- Upgrade @types/koa to v3.0.1 and @types/ws to v8.5.13
- Fix WebSocketsManager for ws v8 API (WebSocketServer)
- Update test-runner-mocha rollup config for ESM/nodenext

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bennypowers

package-lock.json

@@ -55,8 +55,10 @@
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/chai": "^4.2.22",
     "@types/fs-extra": "^11.0.4",
+    "@types/koa": "^3.0.1",
     "@types/mocha": "^10.0.1",
     "@types/node": "*",
+    "@types/ws": "^8.5.13",
     "@typescript-eslint/eslint-plugin": "^8.48.0",
     "@typescript-eslint/parser": "^8.48.0",
     "alex": "^11.0.0",
@@ -71,6 +73,7 @@
     "lint-staged": "^15.2.11",
     "mocha": "^10.8.2",
     "nanocolors": "^0.2.1",
+    "parse5": "^8.0.0",
     "prettier": "^3.7.1",
     "prettier-plugin-package": "^2.0.0",
     "rimraf": "^4.4.1",

package.json

@@ -0,0 +1 @@
+export default class ConfigLoaderError extends Error {}

packages/config-loader/src/ConfigLoaderError.js

@@ -1,14 +1,12 @@
-const fs = require('fs').promises;
-const path = require('path');
-const { fileExists } = require('./utils');
+import fs from 'fs/promises';
+import path from 'path';
+import { fileExists } from './utils.ts';
 
 /**
  * Gets the package type for a given directory. Walks up the file system, looking
  * for a package.json file and returns the package type.
- * @param {string} basedir
- * @returns {Promise<string>}
  */
-async function getPackageType(basedir) {
+async function getPackageType(basedir: string): Promise<string> {
   let currentPath = basedir;
   try {
     while (await fileExists(currentPath)) {
@@ -28,4 +26,4 @@ async function getPackageType(basedir) {
   return 'commonjs';
 }
 
-module.exports = getPackageType;
+export default getPackageType;

packages/config-loader/src/ConfigLoaderError.ts

@@ -1,5 +1,5 @@
-const { pathToFileURL } = require('url');
-const ConfigLoaderError = require('./ConfigLoaderError');
+import { pathToFileURL } from 'url';
+import ConfigLoaderError from './ConfigLoaderError.ts';
 
 // These strings may be node-version dependent and need updating over time
 // They're just to display a helpful error message
@@ -9,10 +9,7 @@ const CJS_ERRORS = [
   'ReferenceError: exports is not defined',
 ];
 
-/**
- * @param {string} path
- */
-async function importConfig(path) {
+async function importConfig(path: string): Promise<object> {
   try {
     const config = await import(pathToFileURL(path).href);
 
@@ -24,7 +21,7 @@ async function importConfig(path) {
 
     return config.default;
   } catch (e) {
-    if (CJS_ERRORS.some(msg => /** @type {Error} */(e).stack?.includes(msg))) {
+    if (CJS_ERRORS.some(msg => (e as Error).stack?.includes(msg))) {
       throw new ConfigLoaderError(
         'You are using CommonJS syntax such as "require" or "module.exports" in a config loaded as es module. ' +
           'Use import/export syntax, or load the file as a CommonJS module by ' +
@@ -35,4 +32,4 @@ async function importConfig(path) {
   }
 }
 
-module.exports = importConfig;
+export default importConfig;

…ages/config-loader/src/getPackageType.js …ages/config-loader/src/getPackageType.tspackages/config-loader/src/getPackageType.js renamed to packages/config-loader/src/getPackageType.ts packages/config-loader/src/getPackageType.js renamed to packages/config-loader/src/getPackageType.ts

@@ -0,0 +1,20 @@
+import getPackageType from './getPackageType.ts';
+import path from 'path';
+import requireConfig from './requireConfig.ts';
+import importConfigFunction from './importConfig.ts';
+
+async function importOrRequireConfig(configPath: string, basedir: string): Promise<object> {
+  const ext = path.extname(configPath);
+
+  switch (ext) {
+    case '.mjs':
+      return importConfigFunction(configPath);
+    case '.cjs':
+      return requireConfig(configPath);
+    default:
+      const packageType = await getPackageType(basedir);
+      return packageType === 'module' ? importConfigFunction(configPath) : requireConfig(configPath);
+  }
+}
+
+export default importOrRequireConfig;

…ckages/config-loader/src/importConfig.js …ckages/config-loader/src/importConfig.tspackages/config-loader/src/importConfig.js renamed to packages/config-loader/src/importConfig.ts packages/config-loader/src/importConfig.js renamed to packages/config-loader/src/importConfig.ts

@@ -1,16 +1,11 @@
-const path = require('path');
-const { fileExists } = require('./utils');
-const ConfigLoaderError = require('./ConfigLoaderError.js');
-const importOrRequireConfig = require('./importOrRequireConfig');
+import path from 'path';
+import { fileExists } from './utils.ts';
+import ConfigLoaderError from './ConfigLoaderError.ts';
+import importOrRequireConfig from './importOrRequireConfig.ts';
 
 const EXTENSIONS = ['.mjs', '.cjs', '.js'];
 
-/**
- * @param {string} name
- * @param {string} [customPath]
- * @param {string} [basedir]
- */
-async function readConfig(name, customPath, basedir = process.cwd()) {
+async function readConfig(name: string, customPath?: string, basedir: string = process.cwd()): Promise<any> {
   const resolvedCustomPath = customPath ? path.resolve(basedir, customPath) : undefined;
   if (resolvedCustomPath && !(await fileExists(resolvedCustomPath))) {
     throw new ConfigLoaderError(`Could not find a config file at ${resolvedCustomPath}`);
@@ -32,4 +27,4 @@ async function readConfig(name, customPath, basedir = process.cwd()) {
   return null;
 }
 
-module.exports = { readConfig, ConfigLoaderError };
+export { readConfig, ConfigLoaderError };

packages/config-loader/src/importOrRequireConfig.js

@@ -1,4 +1,7 @@
-const ConfigLoaderError = require('./ConfigLoaderError');
+import { createRequire } from 'module';
+import ConfigLoaderError from './ConfigLoaderError.ts';
+
+const require = createRequire(import.meta.url);
 
 // These strings may be node-version dependent and need updating over time
 // They're just to display a helpful error message
@@ -7,14 +10,11 @@ const ESM_ERRORS = [
   'SyntaxError: Cannot use import statement outside a module',
 ];
 
-/**
- * @param {string} path
- */
-function requireConfig(path) {
+function requireConfig(path: string): object {
   try {
     return require(path);
   } catch (e) {
-    if (ESM_ERRORS.some(msg => /** @type {Error} **/(e).stack?.includes(msg))) {
+    if (ESM_ERRORS.some(msg => (e as Error).stack?.includes(msg))) {
       throw new ConfigLoaderError(
         'You are using es module syntax in a config loaded as CommonJS module. ' +
           'Use require/module.exports syntax, or load the file as es module by using the .mjs ' +
@@ -25,4 +25,4 @@ function requireConfig(path) {
   }
 }
 
-module.exports = requireConfig;
+export default requireConfig;