Bundle vendors from the source package (#12582)

scripts/build/bundler.mjs

@@ -6,6 +6,7 @@ import esbuild from "esbuild";
 import { NodeModulesPolyfillPlugin as esbuildPluginNodeModulePolyfills } from "@esbuild-plugins/node-modules-polyfill";
 import browserslistToEsbuild from "browserslist-to-esbuild";
 import { PROJECT_ROOT, DIST_DIR } from "../utils/index.mjs";
+import { vendorMetaFile, vendorsDirectory } from "../vendors/utils.mjs";
 import esbuildPluginEvaluate from "./esbuild-plugins/evaluate.mjs";
 import esbuildPluginReplaceModule from "./esbuild-plugins/replace-module.mjs";
 import esbuildPluginLicense from "./esbuild-plugins/license.mjs";
@@ -18,6 +19,12 @@ const { __dirname, readJsonSync, require } = createEsmUtils(import.meta);
 const packageJson = readJsonSync("../../package.json");
 
 const umdTarget = browserslistToEsbuild(packageJson.browserslist);
+const vendorsReplacements = Object.entries(readJsonSync(vendorMetaFile).entries)
+  .filter(([, entry]) => !entry.endsWith(".json"))
+  .map(([vendorName, entry]) => ({
+    module: path.join(vendorsDirectory, entry),
+    path: require.resolve(vendorName),
+  }));
 
 function getBabelConfig(bundle) {
   const config = {
@@ -76,6 +83,7 @@ const bundledFiles = [
 
 function* getEsbuildOptions(bundle, buildOptions) {
   const replaceModule = [
+    ...vendorsReplacements,
     // #12493, not sure what the problem is, but replace the cjs version with esm version seems fix it
     {
       module: require.resolve("tslib"),

scripts/vendors/bundle-vendors.mjs

@@ -1,24 +1,26 @@
 #!/usr/bin/env node
 
 import fs from "node:fs/promises";
+import path from "node:path";
 import assert from "node:assert";
-import { fileURLToPath } from "node:url";
 import createEsmUtils from "esm-utils";
 import esbuild from "esbuild";
 import { outdent } from "outdent";
 import { PROJECT_ROOT, writeJson } from "../utils/index.mjs";
 import esbuildPluginLicense from "../build/esbuild-plugins/license.mjs";
 import vendors from "./vendors.mjs";
-import { vendorMetaFile, saveVendorLicenses } from "./utils.mjs";
+import {
+  vendorsDirectory,
+  vendorMetaFile,
+  saveVendorLicenses,
+  saveVendorEntry,
+} from "./utils.mjs";
 import esbuildPluginTsNocheck from "./esbuild-plugin-ts-nocheck.mjs";
 
 const { require } = createEsmUtils(import.meta);
-const rootDir = new URL("../../", import.meta.url);
-// prettier/vendors
-const vendorsDir = new URL("./vendors/", rootDir);
 // prettier/vendors/*.js
 const getVendorFilePath = (vendorName, extension = "js") =>
-  fileURLToPath(new URL(`./${vendorName}.${extension}`, vendorsDir));
+  path.join(vendorsDirectory, `${vendorName}.${extension}`);
 
 // Unsafe, but good enough for now.
 const isJson = (value) => {
@@ -31,7 +33,7 @@ const isJson = (value) => {
 };
 
 async function clean() {
-  for (const directoryOrFile of [vendorsDir, vendorMetaFile]) {
+  for (const directoryOrFile of [vendorsDirectory, vendorMetaFile]) {
     try {
       await fs.rm(directoryOrFile, { recursive: true, force: true });
     } catch {
@@ -43,7 +45,7 @@ async function clean() {
 async function generateDts({ vendor, module }) {
   const hasDefault = Boolean(module.default);
   await fs.writeFile(
-    new URL(`${vendor}.d.ts`, vendorsDir),
+    path.join(vendorsDirectory, `${vendor}.d.ts`),
     [
       "// This file is generated automatically.",
       hasDefault ? `export {default} from "${vendor}";` : null,
@@ -83,11 +85,14 @@ async function bundle(vendor, options) {
   const module = await import(vendor);
   if (isJson(module)) {
     await fs.rm(outfile);
-    await writeJson(getVendorFilePath(vendor, "json"), module);
+    const file = getVendorFilePath(vendor, "json");
+    await writeJson(file, module);
+    saveVendorEntry(vendor, file);
     return;
   }
 
   await generateDts({ vendor, module });
+  saveVendorEntry(vendor, outfile);
 }
 
 async function main() {
@@ -107,7 +112,7 @@ async function main() {
   console.log("Vendor licenses saved");
 
   await fs.writeFile(
-    new URL("./README.md", vendorsDir),
+    path.join(vendorsDirectory, "README.md"),
     outdent`
       # \`./vendors\`
 

scripts/vendors/utils.mjs

@@ -1,6 +1,8 @@
 import fs from "node:fs";
-import { readJson, writeJson } from "../utils/index.mjs";
+import path from "node:path";
+import { PROJECT_ROOT, readJson, writeJson } from "../utils/index.mjs";
 
+export const vendorsDirectory = path.join(PROJECT_ROOT, "vendors");
 export const vendorMetaFile = new URL("./vendor-meta.json", import.meta.url);
 const getMeta = () =>
   fs.existsSync(vendorMetaFile) ? readJson(vendorMetaFile) : {};
@@ -10,3 +12,12 @@ export async function saveVendorLicenses(licenses) {
   meta.licenses = licenses;
   await writeJson(vendorMetaFile, meta);
 }
+
+export async function saveVendorEntry(vendorName, file) {
+  const meta = await getMeta();
+  meta.entries = {
+    ...meta.entries,
+    [vendorName]: path.relative(vendorsDirectory, file),
+  };
+  await writeJson(vendorMetaFile, meta);
+}

scripts/vendors/vendor-meta.json

@@ -1,4 +1,14 @@
 {
+  "entries": {
+    "chalk": "chalk.js",
+    "escape-string-regexp": "escape-string-regexp.js",
+    "execa": "execa.js",
+    "html-element-attributes": "html-element-attributes.json",
+    "html-tag-names": "html-tag-names.json",
+    "html-void-elements": "html-void-elements.json",
+    "mem": "mem.js",
+    "string-width": "string-width.js"
+  },
   "licenses": [
     {
       "name": "chalk",