Add support for ESM via esbuild

.eslintrc.json

@@ -45,10 +45,13 @@
     "addons/*/src/third-party/*.ts",
     "out/*",
     "out-test/*",
+    "out-esbuild/*",
+    "out-esbuild-test/*",
     "**/inwasm-sdks/*",
     "**/typings/*.d.ts",
     "**/node_modules",
-    "**/*.js"
+    "**/*.js",
+    "**/*.mjs"
   ],
   "plugins": [
     "@stylistic/ts",

.github/workflows/ci.yml

@@ -19,37 +19,52 @@ jobs:
         cache: 'yarn'
     - name: Install dependencies
       run: yarn --frozen-lockfile
-    - name: Build
+    - name: Setup and run tsc
       run: yarn setup
+    - name: Esbuild
+      run: yarn esbuild
     - name: Zip artifacts
       run: |
         zip -r compressed-build \
+          ./lib/* \
           ./out/* \
-          ./out-test/* \
+          ./out-*/* \
+          ./addons/addon-attach/lib/* \
           ./addons/addon-attach/out/* \
-          ./addons/addon-attach/out-test/* \
+          ./addons/addon-attach/out-*/* \
+          ./addons/addon-canvas/lib/* \
           ./addons/addon-canvas/out/* \
-          ./addons/addon-canvas/out-test/* \
+          ./addons/addon-canvas/out-*/* \
+          ./addons/addon-clipboard/lib/* \
           ./addons/addon-clipboard/out/* \
-          ./addons/addon-clipboard/out-test/* \
+          ./addons/addon-clipboard/out-*/* \
+          ./addons/addon-fit/lib/* \
           ./addons/addon-fit/out/* \
-          ./addons/addon-fit/out-test/* \
+          ./addons/addon-fit/out-*/* \
+          ./addons/addon-image/lib/* \
           ./addons/addon-image/out/* \
-          ./addons/addon-image/out-test/* \
+          ./addons/addon-image/out-*/* \
+          ./addons/addon-ligatures/lib/* \
           ./addons/addon-ligatures/out/* \
-          ./addons/addon-ligatures/out-test/* \
+          ./addons/addon-ligatures/out-*/* \
+          ./addons/addon-search/lib/* \
           ./addons/addon-search/out/* \
-          ./addons/addon-search/out-test/* \
+          ./addons/addon-search/out-*/* \
+          ./addons/addon-serialize/lib/* \
           ./addons/addon-serialize/out/* \
-          ./addons/addon-serialize/out-test/* \
+          ./addons/addon-serialize/out-*/* \
+          ./addons/addon-unicode11/lib/* \
           ./addons/addon-unicode11/out/* \
-          ./addons/addon-unicode11/out-test/* \
+          ./addons/addon-unicode11/out-*/* \
+          ./addons/addon-unicode-graphemes/lib/* \
           ./addons/addon-unicode-graphemes/out/* \
-          ./addons/addon-unicode-graphemes/out-test/* \
+          ./addons/addon-unicode-graphemes/out-*/* \
+          ./addons/addon-web-links/lib/* \
           ./addons/addon-web-links/out/* \
-          ./addons/addon-web-links/out-test/* \
+          ./addons/addon-web-links/out-*/* \
+          ./addons/addon-webgl/lib/* \
           ./addons/addon-webgl/out/* \
-          ./addons/addon-webgl/out-test/*
+          ./addons/addon-webgl/out-*st/*
     - name: Upload artifacts
       uses: actions/upload-artifact@v3
       with:
@@ -189,7 +204,7 @@ jobs:
         fi
         ls -R
     - name: Build demo
-      run: yarn build-demo
+      run: yarn esbuild-demo
     - name: Integration tests (core) # Tests use 50% workers to reduce flakiness
       run: yarn test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=core
     - name: Integration tests (addon-attach)

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 lib/
 out/
 out-test/
+out-esbuild/
+out-esbuild-test/
 .nyc_output/
 Makefile.gyp
 *.Makefile

.npmignore

@@ -17,6 +17,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

.vscode/settings.json

@@ -2,15 +2,25 @@
   "files.associations": {
     ".eslintrc.json.typings": "jsonc"
   },
+  // Hide output files from the file explorer, comment this out to see the build output
+  "files.exclude": {
+    "**/lib": true,
+    "**/out": true,
+    "**/out-*": true,
+  },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.quoteStyle": "single",
   "mochaExplorer.envPath": ".mocha.env",
   "mochaExplorer.files": [
     "out/**/*.test.js",
-    "addons/**/out/*.test.js"
+    "addons/**/out/*.test.js",
+    "out-*/**/*.test.js",
+    "addons/**/out-*/*.test.js"
   ],
   "mochaExplorer.watch": [
     "out/**/*.js",
-    "addons/**/out/*.js"
+    "addons/**/out/*.js",
+    "out-*/**/*.js",
+    "addons/**/out-*/*.js"
   ]
 }

.vscode/tasks.json

@@ -8,67 +8,74 @@
     "showReuseMessage": true
   },
   "tasks": [
+    // Compound tasks
     {
-      "type": "npm",
-      "script": "test",
-      "group":{
-        "kind": "test",
+      "label": "Development",
+      "dependsOn": ["demo-server", "tsc", "esbuild", "esbuild-demo"],
+      "group": {
+        "kind": "build",
         "isDefault": true
-      },
-      "problemMatcher": []
+      }
+    },
+
+    // Demo
+    {
+      "label": "demo-server",
+      "type": "npm",
+      "script": "start",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": [],
+      "presentation": {
+        "group": "xterm-demo"
+      }
     },
+
+    // Build
     {
-      "label": "watch",
+      "label": "tsc",
       "type": "npm",
-      "script": "watch",
+      "script": "tsc-watch",
       "group": "build",
       "isBackground": true,
       "problemMatcher": "$tsc-watch",
       "presentation": {
-        "group": "vscode"
+        "group": "xterm-build"
       }
     },
     {
-      "label": "start",
+      "label": "esbuild",
       "type": "npm",
-      "script": "start",
+      "script": "esbuild-watch",
       "group": "build",
       "isBackground": true,
-      "problemMatcher": [],
+      "problemMatcher": "$esbuild-watch",
       "presentation": {
-        "group": "vscode"
+        "group": "xterm-build"
       }
     },
     {
-      "label": "Start demo",
-      "dependsOn": ["start", "watch"],
-      "group": {
-        "kind": "build",
-        "isDefault": true
-      },
+      "label": "esbuild-demo",
+      "type": "npm",
+      "script": "esbuild-demo-watch",
+      "dependsOn": ["esbuild", "tsc"],
+      "group": "build",
       "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "fileLocation": [
-          "relative",
-          "${workspaceFolder}"
-        ],
-        "pattern": [
-          {
-            "regexp": "^([^\\\\s].*)\\\\((\\\\d+,\\\\d+)\\\\):\\\\s*(.*)$",
-            "file": 1,
-            "location": 2,
-            "message": 3
-          }
-        ],
-        "background": {
-          "beginsPattern": "assets by",
-          "endsPattern": "webpack \\d+\\.\\d+\\.\\d+ compiled successfully"
-        }
-      },
+      "problemMatcher": "$esbuild-watch",
       "presentation": {
-        "group": "vscode"
+        "group": "xterm-demo"
       }
+    },
+
+    // Test
+    {
+      "type": "npm",
+      "script": "test",
+      "group":{
+        "kind": "test",
+        "isDefault": true
+      },
+      "problemMatcher": []
     }
   ]
 }

CONTRIBUTING.md

@@ -60,3 +60,45 @@ By contributing code to xterm.js you:
 ### Test coverage
 
 One area that always needs attention is improving out unit test coverage, you can view the code coverage report on [Azure Pipelines](https://dev.azure.com/xtermjs/xterm.js/_build/latest?definitionId=3) by clicking the Code Coverage tab.
+
+## Testing
+
+### Unit tests
+
+Unit tests are run with `yarn test-unit`:
+
+```sh
+# All unit tests
+yarn test-unit
+
+# Absolute file path
+yarn test-unit out-esbuild/browser/Terminal.test.js
+
+# Filter by wildcard
+yarn test-unit out-esbuild/**/Terminal.test.js
+
+# Specific addon unit tests tests
+yarn test-unit addons/addon-image/out-esbuild/*.test.js
+
+# Multiple files
+yarn test-unit out-esbuild/**/Terminal.test.js out-esbuild/**/InputHandler.test.js
+```
+
+These use mocha to run all `.test.js` files within the esbuild output (`out-esbuild/`).
+
+### Integration tests
+
+Integration tests are run with `yarn test-integration`:
+
+```sh
+# All integration tests
+yarn test-integration
+
+# Core integration tests
+yarn test-integration --suite=core
+
+# Specific addon integration tests
+yarn test-integration --suite=addon-search
+```
+
+These use `@playwright/test` to run all tests within the esbuild test output (`out-esbuild-test/`).

addons/addon-attach/.npmignore

@@ -8,6 +8,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

addons/addon-attach/package.json

@@ -6,6 +6,7 @@
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-attach.js",
+  "module": "lib/addon-attach.mjs",
   "types": "typings/addon-attach.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-attach",
   "license": "MIT",
@@ -19,7 +20,7 @@
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package",
-    "start-server-only": "node ../../demo/start-server-only"
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
     "@xterm/xterm": "^5.0.0"

addons/addon-attach/test/AttachAddon.test.ts

@@ -6,7 +6,7 @@
 import WebSocket = require('ws');
 
 import test from '@playwright/test';
-import { ITestContext, createTestContext, openTerminal, pollFor, timeout } from '../../../out-test/playwright/TestUtils';
+import { ITestContext, createTestContext, openTerminal, pollFor, timeout } from '../../../test/playwright/TestUtils';
 
 let ctx: ITestContext;
 test.beforeAll(async ({ browser }) => {

addons/addon-attach/test/playwright.config.ts

@@ -26,7 +26,7 @@ const config: PlaywrightTestConfig = {
   ],
   reporter: 'list',
   webServer: {
-    command: 'npm run start-server-only',
+    command: 'npm run start',
     port: 3000,
     timeout: 120000,
     reuseExistingServer: !process.env.CI

addons/addon-attach/test/tsconfig.json

@@ -20,8 +20,7 @@
     },
     "strict": true,
     "types": [
-      "../../../node_modules/@types/node",
-      "../../../out-test/playwright/TestUtils"
+      "../../../node_modules/@types/node"
     ]
   },
   "include": [
@@ -34,6 +33,9 @@
     },
     {
       "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../test/playwright"
     }
   ]
 }

addons/addon-canvas/.npmignore

@@ -8,6 +8,9 @@
 !lib/**/*.js
 !lib/**/*.js.map
 
+!lib/**/*.mjs
+!lib/**/*.mjs.map
+
 !lib/**/*.css
 
 # Whitelist - src/

addons/addon-canvas/package.json

@@ -6,6 +6,7 @@
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-canvas.js",
+  "module": "lib/addon-canvas.mjs",
   "types": "typings/addon-canvas.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas",
   "license": "MIT",
@@ -20,7 +21,7 @@
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package",
-    "start-server-only": "node ../../demo/start-server-only"
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
     "@xterm/xterm": "^5.0.0"