module-tsx/tsdown.config.ts at main · YieldRay/module-tsx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import { defineConfig, type UserConfig } from "tsdown";
import * as esbuild from "esbuild";
import fs from "node:fs";

const pkg = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
const dependencies = pkg.dependencies || {};

const esbuildTypescript = await esbuild.build({
  entryPoints: ["node_modules/typescript/lib/typescript.js"],
  bundle: true,
  format: "esm",
  platform: "browser",
  minify: true,
  write: false,
});

/**
 * Rolldown cannot bundle TypeScript directly due to its use of Node.js-specific features and dynamic imports.
 * To work around this, we pre-bundle TypeScript using esbuild, which can handle these features and produce a browser-compatible ESM bundle.
 * We then create a custom plugin for tsdown that serves this pre-bundled TypeScript whenever the "typescript" module is imported.
 */
const bundleTypescriptPlugin: UserConfig["plugins"] = {
  name: "bundle-typescript-with-esbuild",
  resolveId: {
    order: "pre",
    handler(id: string) {
      if (id === "typescript") return "virtual:typescript-esm";
    },
  },
  async load(id: string) {
    if (id === "virtual:typescript-esm") {
      return esbuildTypescript.outputFiles[0].text;
    }
  },
};

const esmShPlugin: UserConfig["plugins"] = {
  name: "rewrite-to-esm-sh",
  resolveId: {
    order: "pre",
    handler(id: string) {
      if (!id.startsWith(".") && !id.startsWith("/") && !id.startsWith("virtual:") && !id.startsWith("\0")) {
        const parts = id.split("/");
        const packageName = id.startsWith("@") ? `${parts[0]}/${parts[1]}` : parts[0];
        const subpath = id.slice(packageName.length);

        if (dependencies[packageName]) {
          let version = dependencies[packageName];
          try {
            const pkgJson = JSON.parse(fs.readFileSync(`./node_modules/${packageName}/package.json`, "utf-8"));
            if (pkgJson.version) version = pkgJson.version;
          } catch {
            version = version.replace(/^[\^~]/, "");
          }
          return { id: `https://esm.sh/${packageName}@${version}${subpath}`, external: true };
        }
        return { id: `https://esm.sh/${id}`, external: true };
      }
    },
  },
};

export default defineConfig([
  // index.cdn.js — ESM, unbundled, external deps rewritten to esm.sh
  {
    dts: false,
    entry: { index: "./src/index.ts" },
    format: "esm",
    platform: "browser",
    target: ["esnext"],
    plugins: esmShPlugin,
    outputOptions: {
      entryFileNames: "[name].cdn.mjs",
    },
  },
  // index.js — ESM, unbundled (external deps)
  {
    dts: true,
    entry: { index: "./src/index.ts" },
    format: "esm",
    platform: "browser",
    target: ["esnext"],
    outputOptions: {
      entryFileNames: "[name].js",
    },
  },
  // index.mjs — ESM, bundled (typescript bundled via esbuild for browser compatibility)
  {
    dts: false,
    entry: { index: "./src/index.ts" },
    format: "esm",
    platform: "browser",
    target: ["esnext"],
    deps: { alwaysBundle: (id) => id !== "typescript", onlyBundle: false },
    minify: true,
    plugins: bundleTypescriptPlugin,
    outputOptions: {
      entryFileNames: "[name].mjs",
    },
  },
  // index.umd.js — UMD, bundled + minified
  {
    dts: false,
    entry: { index: "./src/index.ts" },
    format: "umd",
    platform: "browser",
    target: ["esnext"],
    deps: { alwaysBundle: (id) => id !== "typescript", onlyBundle: false },
    minify: true,
    plugins: bundleTypescriptPlugin,
    outputOptions: {
      name: "ModuleTSX",
      entryFileNames: "[name].umd.js",
    },
  },
]);