feat: add native node esm entrypoints

.changeset/wet-ducks-visit.md

@@ -0,0 +1,33 @@
+---
+'@web/browser-logs': minor
+'@web/config-loader': minor
+'@web/dev-server-core': minor
+'@web/dev-server-esbuild': minor
+'@web/dev-server-legacy': minor
+'@web/dev-server-rollup': minor
+'@web/test-runner': minor
+'@web/test-runner-browserstack': minor
+'@web/test-runner-chrome': minor
+'@web/test-runner-cli': minor
+'@web/test-runner-commands': minor
+'@web/test-runner-core': minor
+'@web/test-runner-coverage-v8': minor
+'@web/test-runner-mocha': minor
+'@web/test-runner-playwright': minor
+'@web/test-runner-puppeteer': minor
+'@web/test-runner-selenium': minor
+---
+
+Added native node es module entrypoints. This is a breaking change. Before, native node es module imports would import a CJS module as a default import and require destructuring afterwards:
+
+```js
+import playwrightModule from '@web/test-runner-playwright';
+
+const { playwrightLauncher } = playwrightModule;
+```
+
+Now, the exports are only available directly as a named export:
+
+```js
+import { playwrightLauncher } from '@web/test-runner-playwright';
+```

package.json

@@ -8,22 +8,23 @@
     "build:site": "rocket-build",
     "build:watch": "rimraf packages/*/tsconfig.tsbuildinfo && tsc --build --watch",
     "format": "npm run format:eslint && npm run format:prettier",
-    "format:eslint": "eslint --ext .ts,.js . --fix",
-    "format:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,md}\" \"**/package.json\" --write --ignore-path .eslintignore",
+    "format:eslint": "eslint --ext .ts,.js,.mjs,.cjs . --fix",
+    "format:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,mjs,cjs,md}\" \"**/package.json\" --write --ignore-path .eslintignore",
     "install-puppeteer-firefox": "cd node_modules/puppeteer && PUPPETEER_PRODUCT=firefox node install.js",
     "lint": "npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "eslint --ext .ts,.js .",
-    "lint:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,md}\" --check --ignore-path .eslintignore",
+    "lint:eslint": "eslint --ext .ts,.js,.mjs,.cjs .",
+    "lint:prettier": "node node_modules/prettier/bin-prettier.js \"**/*.{ts,js,mjs,cjs,md}\" --check --ignore-path .eslintignore",
     "postinstall": "patch-package",
     "reinstall-workspace": "rimraf packages/*/node_modules && rimraf node_modules && yarn install && yarn build",
     "release": "changeset publish && yarn format",
     "start": "rocket-start",
     "start:build": "es-dev-server --root-dir _site --compatibility none --open",
     "test": "yarn test:node && yarn test:browser && node scripts/workspaces-scripts-bin.mjs test:ci",
     "test:browser": "node packages/test-runner/dist/test-runner.js \"packages/*/test-browser/**/*.test.{js,ts}\"",
-    "test:node": "mocha \"packages/*/test/**/*.test.ts\" --require ts-node/register --parallel --reporter dot --exit --retries 3",
+    "test:node": "mocha \"packages/*/test/**/*.test.{ts,js,mjs,cjs}\" --require ts-node/register --parallel --reporter dot --exit --retries 3",
     "update-dependency": "node scripts/update-dependency.js",
-    "update-package-configs": "ts-node scripts/update-package-configs.ts"
+    "update-esm-entrypoints": "node scripts/update-esm-entrypoints.mjs && yarn format",
+    "update-package-configs": "node scripts/update-package-configs.mjs && yarn format"
   },
   "dependencies": {
     "@d4kmor/cli": "^0.1.15",
@@ -76,7 +77,8 @@
       "@typescript-eslint/explicit-module-boundary-types": "off",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-empty-interface": "off",
-      "@typescript-eslint/no-unused-vars": "error"
+      "@typescript-eslint/no-unused-vars": "error",
+      "@typescript-eslint/no-var-requires": "off"
     }
   },
   "husky": {

packages/browser-logs/index.d.ts

@@ -0,0 +1 @@
+export * from './dist/index.js';

packages/browser-logs/index.mjs

@@ -0,0 +1,6 @@
+// this file is autogenerated with the update-esm-entrypoints script
+import cjsEntrypoint from './dist/index.js';
+
+const { deserialize, MARKER_BROWSER_ERROR, browserScript } = cjsEntrypoint;
+
+export { deserialize, MARKER_BROWSER_ERROR, browserScript };

packages/browser-logs/package.json

@@ -39,5 +39,11 @@
   ],
   "devDependencies": {
     "@bundled-es-modules/chai": "^4.2.2"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./dist/index.js"
+    }
   }
 }

packages/browser-logs/tsconfig.json

@@ -3,8 +3,8 @@
 {
   "extends": "../../tsconfig.node-base.json",
   "compilerOptions": {
-    "outDir": "./dist",
     "module": "commonjs",
+    "outDir": "./dist",
     "rootDir": "./src",
     "composite": true,
     "allowJs": true

packages/config-loader/index.d.ts

@@ -0,0 +1 @@
+export * from './dist/index';

packages/config-loader/index.mjs

@@ -0,0 +1,4 @@
+import cjsModule from './src/index.js';
+
+const { readConfig, ConfigLoaderError } = cjsModule;
+export { readConfig, ConfigLoaderError };

packages/config-loader/package.json

@@ -39,5 +39,11 @@
   "dependencies": {
     "semver": "^7.3.2"
   },
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.,js",
+      "require": "./src/index.js"
+    }
+  }
 }

packages/config-loader/tsconfig.json

@@ -3,8 +3,8 @@
 {
   "extends": "../../tsconfig.node-base.json",
   "compilerOptions": {
-    "outDir": "./dist",
     "module": "commonjs",
+    "outDir": "./dist",
     "rootDir": "./src",
     "composite": true,
     "allowJs": true,

packages/dev-server-core/index.d.ts

@@ -0,0 +1 @@
+export * from './dist/index.js';

packages/dev-server-core/index.mjs

@@ -0,0 +1,30 @@
+// this file is autogenerated with the update-esm-entrypoints script
+import cjsEntrypoint from './dist/index.js';
+
+const {
+  DevServer,
+  getRequestBrowserPath,
+  getRequestFilePath,
+  getResponseBody,
+  isInlineScriptRequest,
+  EventStreamManager,
+  FSWatcher,
+  Koa,
+  Server,
+  PluginSyntaxError,
+  PluginError,
+} = cjsEntrypoint;
+
+export {
+  DevServer,
+  getRequestBrowserPath,
+  getRequestFilePath,
+  getResponseBody,
+  isInlineScriptRequest,
+  EventStreamManager,
+  FSWatcher,
+  Koa,
+  Server,
+  PluginSyntaxError,
+  PluginError,
+};

packages/dev-server-core/package.json

@@ -23,8 +23,7 @@
     "start:event-stream": "node demo/event-stream/start-server.js",
     "start:http2": "node demo/http2/start-server.js",
     "start:import-asset": "node demo/import-asset/start-server.js",
-    "test": "mocha 'test/**/*.test.ts' --recursive --require ts-node/register --reporter dot",
-    "test:watch": "mocha 'test/**/*.test.ts' --recursive --require ts-node/register --reporter dot --watch --watch-files src,test/tests"
+    "test": "mocha \"test/**/*.test.{ts,js,mjs,cjs}\" --require ts-node/register --reporter dot"
   },
   "files": [
     ".self-signed-dev-server-ssl.cert",
@@ -64,5 +63,18 @@
     "open": "^7.0.4",
     "portfinder": "^1.0.26",
     "uuid": "^8.2.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/dom5": {
+      "require": "./dist/dom5/index.js"
+    },
+    "./test-helpers": {
+      "import": "./test-helpers.mjs",
+      "require": "./dist/test-helpers.js"
+    }
   }
 }

packages/dev-server-core/test-helpers.js

@@ -1,2 +1,5 @@
-/* eslint-disable */
-module.exports = require('./dist/test-helpers');
+import cjsEntrypoint from './dist/test-helpers.js';
+
+const { expectNotIncludes, expectIncludes, fetchText, timeout, createTestServer } = cjsEntrypoint;
+
+export { expectNotIncludes, expectIncludes, fetchText, timeout, createTestServer };

packages/dev-server-core/test/tests/event-stream/eventStreamMiddleware.test.ts → packages/dev-server-core/test/event-stream/eventStreamMiddleware.test.ts

@@ -2,9 +2,9 @@ import fetch from 'node-fetch';
 import AbortController from 'abort-controller';
 import { expect } from 'chai';
 
-import { EVENT_STREAM_ENDPOINT } from '../../../src/event-stream/eventStreamMiddleware';
+import { EVENT_STREAM_ENDPOINT } from '../../src/event-stream/eventStreamMiddleware';
 import { createTestServer, timeout } from '../helpers';
-import { EventStreamManager } from '../../../src/event-stream/EventStreamManager';
+import { EventStreamManager } from '../../src/event-stream/EventStreamManager';
 
 describe('eventStreamMiddleware', () => {
   it('responds with an event stream', async () => {

packages/dev-server-core/test/tests/event-stream/eventStreamPlugin.test.ts → packages/dev-server-core/test/event-stream/eventStreamPlugin.test.ts

@@ -2,7 +2,7 @@ import fetch from 'node-fetch';
 import { expect } from 'chai';
 
 import { createTestServer } from '../helpers';
-import { eventStreamScript } from '../../../src/event-stream/eventStreamPlugin';
+import { eventStreamScript } from '../../src/event-stream/eventStreamPlugin';
 
 describe('eventStreamPlugin', () => {
   it('injects an event stream script if a plugin has inject set and event stream is enabled', async () => {

packages/dev-server-core/test/tests/helpers.ts → packages/dev-server-core/test/helpers.ts

@@ -4,13 +4,13 @@ import {
   timeout,
   fetchText,
   expectIncludes,
-} from '../../src/test-helpers';
-import { DevServerCoreConfig } from '../../src/DevServerCoreConfig';
+} from '../src/test-helpers';
+import { DevServerCoreConfig } from '../src/DevServerCoreConfig';
 
 export function createTestServer(config: Partial<DevServerCoreConfig> = {}) {
   return originalCreateTestServer({
     ...config,
-    rootDir: path.resolve(__dirname, '..', 'fixtures', 'basic'),
+    rootDir: path.resolve(__dirname, 'fixtures', 'basic'),
   });
 }
 

packages/dev-server-core/test/tests/middleware/basePathMiddleware.test.ts → packages/dev-server-core/test/middleware/basePathMiddleware.test.ts

@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import fetch from 'node-fetch';
 
-import { DevServer } from '../../../src/server/DevServer';
+import { DevServer } from '../../src/server/DevServer';
 import { createTestServer } from '../helpers';
 
 describe('base path middleware', () => {

packages/dev-server-core/test/tests/middleware/etagCacheMiddleware.test.ts → packages/dev-server-core/test/middleware/etagCacheMiddleware.test.ts

@@ -5,9 +5,9 @@ import fs from 'fs';
 import { v4 as uuid } from 'uuid';
 
 import { createTestServer, timeout } from '../helpers';
-import { DevServer } from '../../../src/server/DevServer';
+import { DevServer } from '../../src/server/DevServer';
 
-const fixtureDir = path.resolve(__dirname, '..', '..', 'fixtures', 'basic');
+const fixtureDir = path.resolve(__dirname, '..', 'fixtures', 'basic');
 const testFileAName = '/cached-file-a.js';
 const testFileBName = '/cached-file-b.js';
 const testFileAPath = path.join(fixtureDir, testFileAName);

packages/dev-server-core/test/tests/middleware/historyApiFallbackMiddleware.test.ts → packages/dev-server-core/test/middleware/historyApiFallbackMiddleware.test.ts

@@ -3,7 +3,7 @@ import fetch from 'node-fetch';
 import path from 'path';
 
 import { createTestServer } from '../helpers';
-import { DevServer } from '../../../src/server/DevServer';
+import { DevServer } from '../../src/server/DevServer';
 
 describe('history api fallback middleware', () => {
   describe('index in root', () => {
@@ -12,7 +12,7 @@ describe('history api fallback middleware', () => {
 
     beforeEach(async () => {
       ({ host, server } = await createTestServer({
-        appIndex: path.resolve(__dirname, '..', '..', 'fixtures', 'basic', 'index.html'),
+        appIndex: path.resolve(__dirname, '..', 'fixtures', 'basic', 'index.html'),
       }));
     });
 
@@ -68,7 +68,7 @@ describe('history api fallback middleware', () => {
 
     beforeEach(async () => {
       ({ host, server } = await createTestServer({
-        appIndex: path.resolve(__dirname, '..', '..', 'fixtures', 'basic', 'src', 'index.html'),
+        appIndex: path.resolve(__dirname, '..', 'fixtures', 'basic', 'src', 'index.html'),
       }));
     });
 

packages/dev-server-core/test/tests/middleware/pluginTransformMiddleware.test.ts → packages/dev-server-core/test/middleware/pluginTransformMiddleware.test.ts

@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import fetch from 'node-fetch';
 
 import { createTestServer } from '../helpers';
-import { fetchText, expectIncludes } from '../../../src/test-helpers';
+import { fetchText, expectIncludes } from '../../src/test-helpers';
 
 describe('plugin-transform middleware', () => {
   it('can transform a served file', async () => {

packages/dev-server-core/test/tests/plugins/resolveModuleImportsPlugin.test.ts → packages/dev-server-core/test/plugins/resolveModuleImportsPlugin.test.ts

@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import fetch from 'node-fetch';
 
-import { resolveModuleImports } from '../../../src/plugins/resolveModuleImportsPlugin';
+import { resolveModuleImports } from '../../src/plugins/resolveModuleImportsPlugin';
 import { createTestServer } from '../helpers';
 
 const defaultFilePath = '/root/my-file.js';

packages/dev-server-core/test/tests/server/DevServer.test.ts → packages/dev-server-core/test/server/DevServer.test.ts

@@ -3,8 +3,8 @@ import { Server } from 'net';
 import { FSWatcher } from 'chokidar';
 import { expect } from 'chai';
 import fetch from 'node-fetch';
-import { ServerArgs } from '../../../src/Plugin';
-import { DevServer } from '../../../src/server/DevServer';
+import { ServerArgs } from '../../src/Plugin';
+import { DevServer } from '../../src/server/DevServer';
 import { createTestServer } from '../helpers';
 
 describe('basic', () => {

packages/dev-server-core/tsconfig.json

@@ -3,8 +3,8 @@
 {
   "extends": "../../tsconfig.node-base.json",
   "compilerOptions": {
-    "outDir": "./dist",
     "module": "commonjs",
+    "outDir": "./dist",
     "rootDir": "./src",
     "composite": true,
     "allowJs": true

packages/dev-server-esbuild/index.d.ts

@@ -0,0 +1 @@
+export * from './dist/index.js';

packages/dev-server-esbuild/index.mjs

@@ -0,0 +1,6 @@
+// this file is autogenerated with the update-esm-entrypoints script
+import cjsEntrypoint from './dist/index.js';
+
+const { esbuildPlugin } = cjsEntrypoint;
+
+export { esbuildPlugin };

packages/dev-server-esbuild/package.json

@@ -13,7 +13,7 @@
   },
   "author": "modern-web",
   "homepage": "https://github.com/modernweb-dev/web/tree/master/packages/dev-server-esbuild",
-  "main": "dist/esbuildPlugin.js",
+  "main": "dist/index.js",
   "engines": {
     "node": ">=10.0.0"
   },
@@ -51,5 +51,11 @@
     "lit-element": "^2.3.1",
     "node-fetch": "^2.6.0",
     "preact": "^10.4.4"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./dist/index.js"
+    }
   }
 }

packages/dev-server-esbuild/src/esbuildPlugin.ts

@@ -172,5 +172,3 @@ export function esbuildPlugin(args: EsBuildPluginArgs): Plugin {
     },
   };
 }
-
-export default esbuildPlugin;

packages/dev-server-esbuild/src/index.ts

@@ -0,0 +1 @@
+export { esbuildPlugin } from './esbuildPlugin.js';

packages/dev-server-esbuild/test/jsx.test.ts

@@ -1,7 +1,6 @@
 import { expect } from 'chai';
 import fetch from 'node-fetch';
-import { createTestServer } from '@web/dev-server-core/test-helpers';
-import { expectIncludes } from '@web/dev-server-core/src/test-helpers';
+import { expectIncludes, createTestServer } from '@web/dev-server-core/test-helpers';
 
 import { esbuildPlugin } from '../src/esbuildPlugin';
 

packages/dev-server-esbuild/test/target.test.ts

@@ -1,7 +1,6 @@
 import { expect } from 'chai';
 import fetch from 'node-fetch';
-import { createTestServer } from '@web/dev-server-core/test-helpers';
-import { expectIncludes } from '@web/dev-server-core/src/test-helpers';
+import { createTestServer, expectIncludes } from '@web/dev-server-core/test-helpers';
 
 import { esbuildPlugin } from '../src/esbuildPlugin';
 

packages/dev-server-esbuild/test/ts.test.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import { expect } from 'chai';
 import fetch from 'node-fetch';
 import { createTestServer } from '@web/dev-server-core/test-helpers';
-import { expectIncludes, expectNotIncludes } from '@web/dev-server-core/src/test-helpers';
+import { expectIncludes, expectNotIncludes } from '@web/dev-server-core/test-helpers';
 
 import { esbuildPlugin } from '../src/esbuildPlugin';