feat(esm): Generate esm sources and support import

Author: Codex-

lib/index.ts

@@ -1,2 +1,2 @@
-export { TypeScriptLoader } from "./loader";
-export type { TypeScriptCompileError } from "./typescript-compile-error";
+export { TypeScriptLoader } from "./loader.js";
+export type { TypeScriptCompileError } from "./typescript-compile-error.js";

lib/loader.ts

@@ -1,18 +1,23 @@
 import type { Loader } from "cosmiconfig";
 import { register, RegisterOptions } from "ts-node";
 
-import { TypeScriptCompileError } from "./typescript-compile-error";
+import { TypeScriptCompileError } from "./typescript-compile-error.js";
 
 export function TypeScriptLoader(options?: RegisterOptions): Loader {
   const tsNodeInstance = register({
     ...options,
     compilerOptions: { module: "commonjs" },
   });
-  return (path: string, content: string) => {
+  return async (path: string, content: string) => {
     try {
       // cosmiconfig requires the transpiled configuration to be CJS
       tsNodeInstance.compile(content, path);
-      const result = require(path);
+      let result;
+      if (typeof require !== "undefined") {
+        result = require(path);
+      } else {
+        result = await import(path);
+      }
 
       // `default` is used when exporting using export default, some modules
       // may still use `module.exports` or if in TS `export = `

package.json

@@ -15,8 +15,21 @@
   "files": [
     "dist/**/*"
   ],
-  "main": "dist/cjs/index.js",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    }
+  },
   "scripts": {
     "build": "npm run build:types && npm run build:bundles",
     "build:bundles": "node ./scripts/esbuild.config.mjs",

scripts/esbuild.config.mjs

@@ -1,18 +1,73 @@
+// @ts-check
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
 import chalk from "chalk";
 import { analyzeMetafile, build } from "esbuild";
-import { readFile } from "fs/promises";
-import path from "path";
-import { fileURLToPath } from "url";
-
-const nodeTargets = ["node14", "node16", "node18"];
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const packageJsonPath = path.resolve(__dirname, "..", "package.json");
 
-async function getExternals() {
-  const packageJson = JSON.parse(await readFile(packageJsonPath));
+/**
+ * Available formats: https://esbuild.github.io/api/#format
+ *
+ * @type {Array<"cjs" | "esm">}
+ */
+const FORMATS = ["cjs", "esm"];
+/**
+ * @type {import('esbuild').BuildOptions['target']}
+ */
+const TARGETS = ["node14", "node16", "node18", "node20", "esnext"];
+
+const ROOT = path.resolve(__dirname, "..");
+const SOURCES_ROOT = path.resolve(ROOT, "./lib");
+
+/**
+ * @param {"cjs" | "esm"} format
+ * @return {import('esbuild').Plugin}
+ */
+function addExtension(format) {
+  const newExtension = format === "cjs" ? ".cjs" : ".mjs";
+  return {
+    name: "add-extension",
+    setup(build) {
+      build.onResolve({ filter: /.*/ }, (args) => {
+        if (args.importer)
+          return {
+            path: args.path.replace(/\.js$/, newExtension),
+            external: true,
+          };
+      });
+    },
+  };
+}
+
+/**
+ * @param {string[]} entryPoints
+ * @param {"cjs" | "esm"} format
+ */
+async function buildSources(entryPoints, format) {
+  return build({
+    entryPoints: entryPoints,
+    outdir: `${ROOT}/dist/${format}`,
+    target: TARGETS,
+    platform: "node",
+    format: format,
+    metafile: true,
 
-  return Object.keys(packageJson.peerDependencies);
+    // These allow us to build compliant exports and imports based on modern node
+    bundle: true,
+    outExtension: { ".js": format === "cjs" ? ".cjs" : ".mjs" },
+    plugins: [addExtension(format)],
+  });
+}
+
+async function getSourceEntryPoints() {
+  const entryPoints = await fs.readdir(SOURCES_ROOT);
+
+  return entryPoints
+    .filter((file) => !/__fixtures__|\.spec\./.test(file))
+    .map((file) => path.resolve(SOURCES_ROOT, file));
 }
 
 (async () => {
@@ -24,27 +79,34 @@ async function getExternals() {
       )
     );
 
-    const externalDeps = await getExternals();
+    console.info("- Generate sources");
 
-    const result = await build({
-      entryPoints: ["./lib/index.ts"],
-      outfile: "dist/cjs/index.js",
-      metafile: true,
-      bundle: true,
-      format: "cjs",
-      external: externalDeps,
-      platform: "node",
-      target: nodeTargets,
-      treeShaking: true,
-    });
+    const sourceEntryPoints = await getSourceEntryPoints();
 
-    const analysis = await analyzeMetafile(result.metafile);
-    console.info(`📝 Bundle Analysis:${analysis}`);
+    for (const format of FORMATS) {
+      console.info(`- Generating ${chalk.bold.greenBright(format)} sources`);
+
+      const result = await buildSources(sourceEntryPoints, format);
+      const analysis = await analyzeMetafile(result.metafile);
+      console.info(
+        `${analysis
+          .trim()
+          .split(/\n\r/)
+          .map((line) => `  ${line}`)
+          .join()}`
+      );
+
+      console.info(
+        `${chalk.bold.greenBright("✔")} Generating ${chalk.bold.greenBright(
+          format
+        )} sources completed!\n`
+      );
+    }
 
     console.info(
-      `${chalk.bold.green("✔ Bundled successfully!")} (${
-        Date.now() - startTime
-      }ms)`
+      chalk.bold.green(
+        `✔ Generate sources completed! (${Date.now() - startTime}ms)`
+      )
     );
   } catch (error) {
     console.error(`🧨 ${chalk.red.bold("Failed:")} ${error.message}`);

smoke-tests/smoke-test-cjs.js renamed to smoke-tests/smoke-test-cjs.cjs

@@ -1,4 +1,4 @@
-const { TypeScriptLoader } = require("../dist/cjs/index.js");
+const { TypeScriptLoader } = require("../dist/cjs/index.cjs");
 TypeScriptLoader();
 
 console.info("Loaded with CJS successfully");

smoke-tests/smoke-test-esm.mjs

@@ -1,4 +1,4 @@
-import { TypeScriptLoader } from "../dist/cjs/index.js";
+import { TypeScriptLoader } from "../dist/esm/index.mjs";
 TypeScriptLoader();
 
 console.info("Loaded with ESM successfully");

smoke-tests/smoke-test.js

@@ -2,8 +2,8 @@ const assert = require("node:assert");
 
 (async () => {
   try {
-    const { TypeScriptLoader: esm } = await import("../dist/cjs/index.js");
-    const { TypeScriptLoader: cjs } = require("../dist/cjs/index.js");
+    const { TypeScriptLoader: esm } = await import("../dist/esm/index.mjs");
+    const { TypeScriptLoader: cjs } = require("../dist/cjs/index.cjs");
 
     assert.strictEqual(esm, cjs, "esm === cjs");
 

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2016",
+    "module": "esnext",
+    "target": "es2020",
     "noEmit": true,
     "pretty": true,
     "sourceMap": true,