Speed up builds by not bundling typescript (#398)

This marks internal/typescript.js as internal in the worker Rollup config, and switches the worker to use modules so it can load the typescript module build.

playground-typescript-worker.js's size goes from 3034427 bytes to 39289 bytes, and the build time on my M1 Pro goes from 26.2s to 4.4s when the typescript bundle is already built.

Module worker support is very good now, at > 96% of tracked users: https://caniuse.com/mdn-api_worker_worker_ecmascript_modules

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 
 - Upgraded to TypeScript 5.2 and Lit 3.0
+- **BREAKING** Use modules in workers. See [caniuse.com's support table](https://caniuse.com/mdn-api_worker_worker_ecmascript_modules) for browser support information.
 
 <!-- ### Added -->
 <!-- ### Fixed -->

rollup.config.typescript.js

@@ -23,9 +23,8 @@ import commonjs from '@rollup/plugin-commonjs';
  *   because we don't need to run the commonjs transform every time we build the
  *   worker.
  *
- * - We may want to use module imports in the worker at some point, for a faster
- *   development mode that doesn't bundle. Having only module sources will make
- *   this easier too.
+ * - We use module imports in the worker, for a faster development mode that
+ *   doesn't bundle. Having only module sources makes this easier too.
  */
 export default [
   {

rollup.config.web-worker.js

@@ -6,12 +6,21 @@
 
 import resolve from '@rollup/plugin-node-resolve';
 import {maybeTerser} from './rollup.config.common.js';
+import * as path from 'path';
+
+const internalTypescriptPath = path.resolve(process.cwd(), 'internal/typescript.js');
 
 export default {
   input: 'typescript-worker/playground-typescript-worker.js',
+  external(id, parentId, isResolved) {
+    if (!isResolved && parentId !== undefined) {
+      id = path.resolve(path.dirname(parentId), id);
+    }
+    return id === internalTypescriptPath;
+  },
   output: {
     file: 'playground-typescript-worker.js',
-    format: 'iife',
+    format: 'esm',
     exports: 'none',
   },
   plugins: [resolve(), ...maybeTerser],

src/playground-project.ts

@@ -451,7 +451,7 @@ export class PlaygroundProject extends LitElement {
     let worker: Worker;
     if (typescriptWorkerScriptUrl.origin === window.location.origin) {
       // Easy case.
-      worker = new Worker(typescriptWorkerScriptUrl);
+      worker = new Worker(typescriptWorkerScriptUrl, {type: 'module'});
     } else {
       // If the worker script is different-origin, we need to fetch it ourselves
       // and create a blob URL.