Make things work in ESM with polyfill

Author: jakebailey

Herebyfile.mjs

@@ -1,6 +1,5 @@
 // @ts-check
 import { CancelToken } from "@esfx/canceltoken";
-import assert from "assert";
 import chalk from "chalk";
 import chokidar from "chokidar";
 import esbuild from "esbuild";
@@ -180,17 +179,15 @@ async function runDtsBundler(entrypoint, output) {
 function createBundler(entrypoint, outfile, taskOptions = {}) {
     const getOptions = memoize(async () => {
         const copyright = await getCopyrightHeader();
-        const banner = taskOptions.exportIsTsObject ? "var ts = {}; ((module) => {" : "";
-
         /** @type {esbuild.BuildOptions} */
         const options = {
             entryPoints: [entrypoint],
-            banner: { js: copyright + banner },
+            banner: { js: copyright },
             bundle: true,
             outfile,
             platform: "node",
             target: ["es2020", "node14.17"],
-            format: "cjs",
+            format: "esm",
             sourcemap: "linked",
             sourcesContent: false,
             treeShaking: taskOptions.treeShaking,
@@ -203,63 +200,15 @@ function createBundler(entrypoint, outfile, taskOptions = {}) {
             options.external = ["./typescript.js"];
             options.plugins = options.plugins || [];
             options.plugins.push({
-                name: "remap-typescript-to-require",
+                name: "remap-typescript-to-public-api",
                 setup(build) {
                     build.onLoad({ filter: /src[\\/]typescript[\\/]typescript\.ts$/ }, () => {
-                        return { contents: `export * from "./typescript.js"` };
+                        return { contents: `export * from "./typescript.js"` }; // TODO(jakebailey): require(ESM) - this remapping can be fixed up
                     });
                 },
             });
         }
 
-        if (taskOptions.exportIsTsObject) {
-            // Monaco bundles us as ESM by wrapping our code with something that defines module.exports
-            // but then does not use it, instead using the `ts` variable. Ensure that if we think we're CJS
-            // that we still set `ts` to the module.exports object.
-            options.footer = { js: `})(typeof module !== "undefined" && module.exports ? module : { exports: ts });\nif (typeof module !== "undefined" && module.exports) { ts = module.exports; }` };
-
-            // esbuild converts calls to "require" to "__require"; this function
-            // calls the real require if it exists, or throws if it does not (rather than
-            // throwing an error like "require not defined"). But, since we want typescript
-            // to be consumable by other bundlers, we need to convert these calls back to
-            // require so our imports are visible again.
-            //
-            // To fix this, we redefine "require" to a name we're unlikely to use with the
-            // same length as "require", then replace it back to "require" after bundling,
-            // ensuring that source maps still work.
-            //
-            // See: https://github.com/evanw/esbuild/issues/1905
-            const require = "require";
-            const fakeName = "Q".repeat(require.length);
-            const fakeNameRegExp = new RegExp(fakeName, "g");
-            options.define = { [require]: fakeName };
-
-            // For historical reasons, TypeScript does not set __esModule. Hack esbuild's __toCommonJS to be a noop.
-            // We reference `__copyProps` to ensure the final bundle doesn't have any unreferenced code.
-            const toCommonJsRegExp = /var __toCommonJS .*/;
-            const toCommonJsRegExpReplacement = "var __toCommonJS = (mod) => (__copyProps, mod); // Modified helper to skip setting __esModule.";
-
-            options.plugins = options.plugins || [];
-            options.plugins.push(
-                {
-                    name: "post-process",
-                    setup: build => {
-                        build.onEnd(async () => {
-                            let contents = await fs.promises.readFile(outfile, "utf-8");
-                            contents = contents.replace(fakeNameRegExp, require);
-                            let matches = 0;
-                            contents = contents.replace(toCommonJsRegExp, () => {
-                                matches++;
-                                return toCommonJsRegExpReplacement;
-                            });
-                            assert(matches === 1, "Expected exactly one match for __toCommonJS");
-                            await fs.promises.writeFile(outfile, contents);
-                        });
-                    },
-                },
-            );
-        }
-
         return options;
     });
 
@@ -324,13 +273,13 @@ function entrypointBuildTask(options) {
     });
 
     /**
-     * Writes a CJS module that reexports another CJS file. E.g. given
+     * Writes a module that reexports another file. E.g. given
      * `options.builtEntrypoint = "./built/local/tsc/tsc.js"` and
      * `options.output = "./built/local/tsc.js"`, this will create a file
      * named "./built/local/tsc.js" containing:
      *
      * ```
-     * module.exports = require("./tsc/tsc.js")
+     * export * from "./tsc/tsc.js";
      * ```
      */
     const shim = task({
@@ -339,7 +288,7 @@ function entrypointBuildTask(options) {
             const outDir = path.dirname(options.output);
             await fs.promises.mkdir(outDir, { recursive: true });
             const moduleSpecifier = path.relative(outDir, options.builtEntrypoint);
-            await fs.promises.writeFile(options.output, `module.exports = require("./${moduleSpecifier.replace(/[\\/]/g, "/")}")`);
+            await fs.promises.writeFile(options.output, `export * from "./${moduleSpecifier.replace(/[\\/]/g, "/")}"`);
         },
     });
 
@@ -447,6 +396,7 @@ export const watchMin = task({
 
 // This is technically not enough to make tsserverlibrary loadable in the
 // browser, but it's unlikely that anyone has actually been doing that.
+// TODO(jakebailey): require(ESM) - fix this
 const lsslJs = `
 if (typeof module !== "undefined" && module.exports) {
     module.exports = require("./typescript.js");
@@ -504,7 +454,7 @@ const { main: tests, watch: watchTests } = entrypointBuildTask({
     description: "Builds the test infrastructure",
     buildDeps: [generateDiagnostics],
     project: "src/testRunner",
-    srcEntrypoint: "./src/testRunner/_namespaces/Harness.ts",
+    srcEntrypoint: "./src/testRunner/runner.ts",
     builtEntrypoint: "./built/local/testRunner/runner.js",
     output: testRunner,
     mainDeps: [generateLibs],

bin/tsc

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('../lib/tsc.js')
+import '../lib/tsc.js';

bin/tsserver

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('../lib/tsserver.js')
+import '../lib/tsserver.js';

package-lock.json

@@ -43,6 +43,7 @@
         "@esfx/canceltoken": "^1.0.0",
         "@octokit/rest": "^20.0.2",
         "@types/chai": "^4.3.14",
+        "@types/diff": "^5.2.1",
         "@types/microsoft__typescript-etw": "^0.1.3",
         "@types/minimist": "^1.2.5",
         "@types/mocha": "^10.0.6",

package.json

@@ -0,0 +1,9 @@
+const _module = require("module");
+
+/** @type {(name: string) => any} */
+function getBuiltinModule(name) {
+    if (!_module.isBuiltin(name)) return undefined;
+    return require(name);
+}
+
+process.getBuiltinModule = getBuiltinModule;

patchProcessGetBuiltin.cjs

@@ -28,7 +28,7 @@ for (const browserType of browsers) {
 
     await page.setContent(`
     <html>
-    <script>${readFileSync(join("built", "local", "typescript.js"), "utf8")}</script>
+    <script type="module">${readFileSync(join("built", "local", "typescript.js"), "utf8")}</script>
     </html>
     `);
 

scripts/browserIntegrationTest.mjs

@@ -465,6 +465,7 @@ function emitAsNamespace(name, parent, moduleSymbol, needExportModifier) {
 
 emitAsNamespace("ts", "", moduleSymbol, /*needExportModifier*/ false);
 
+// TODO(jakebailey): require(ESM) - fix this
 write("export = ts;", WriteTarget.Both);
 
 const copyrightNotice = fs.readFileSync(path.join(__dirname, "CopyrightNotice.txt"), "utf-8");

scripts/dtsBundler.mjs

@@ -14,7 +14,10 @@
             { "name": "clearInterval" },
             { "name": "setImmediate" },
             { "name": "clearImmediate" },
-            { "name": "performance" }
+            { "name": "performance" },
+            { "name": "require" },
+            { "name": "__dirname" },
+            { "name": "__filename" }
         ]
     },
     "overrides": [

src/.eslintrc.json

@@ -17,7 +17,7 @@ function pipeExists(name: string): boolean {
     return fs.existsSync(name);
 }
 
-function createCancellationToken(args: string[]): ServerCancellationToken {
+export function createCancellationToken(args: string[]): ServerCancellationToken {
     let cancellationPipeName: string | undefined;
     for (let i = 0; i < args.length - 1; i++) {
         if (args[i] === "--cancellationPipeName") {
@@ -66,4 +66,3 @@ function createCancellationToken(args: string[]): ServerCancellationToken {
         };
     }
 }
-export = createCancellationToken;