Moduletrace/bunext
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfix. Extract react imports from main bundler to vendor static files

Browse Source
This commit is contained in:
tben
2026-04-08 05:39:11 +01:00
parent c19b7c9607
commit 4b3a4dbc77
38 changed files with 825 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/functions/bundler/all-pages-esbuild-context-bundler.js
Vendored
+23 -12
View File
@@ -9,7 +9,6 @@ import virtualFilesPlugin from "./plugins/virtual-files-plugin";
import esbuildCTXArtifactTracker from "./plugins/esbuild-ctx-artifact-tracker";
const { HYDRATION_DST_DIR, BUNX_HYDRATION_SRC_DIR } = grabDirNames();
export default async function allPagesESBuildContextBundler(params) {
// return await allPagesESBuildContextBundlerFiles(params);
const pages = grabAllPages({ exclude_api: true });
global.PAGE_FILES = pages;
const dev = isDevelopment();
@@ -39,6 +38,7 @@ export default async function allPagesESBuildContextBundler(params) {
entryNames: "[dir]/[hash]",
metafile: true,
plugins: [
forceExternalReact(),
tailwindEsbuildPlugin,
virtualFilesPlugin({
entryToPage,
@@ -51,17 +51,28 @@ export default async function allPagesESBuildContextBundler(params) {
jsx: "automatic",
splitting: true,
treeShaking: true,
logLevel: "silent",
// logLevel: "silent",
// logLevel: dev ? "error" : "silent",
// external: [
// "react",
// "react-dom",
// "react-dom/client",
// "react/jsx-runtime",
// "react/jsx-dev-runtime",
// ],
// jsxDev: dev,
external: [
"react",
"react-dom",
"react-dom/client",
"react/jsx-runtime",
"react/jsx-dev-runtime",
],
});
await global.BUNDLER_CTX.rebuild();
}
function forceExternalReact() {
return {
name: "force-external-react",
setup(build) {
build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) => {
if (args.pluginData?.externalReact)
return null;
return {
path: args.path,
external: true,
};
});
},
};
}
dist/functions/bundler/bun-react-modules-bundler.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
export default function bunReactModulesBundler(): Promise<void>;
dist/functions/bundler/bun-react-modules-bundler.js
Vendored
+74
View File
@@ -0,0 +1,74 @@
import grabDirNames from "../../utils/grab-dir-names";
import isDevelopment from "../../utils/is-development";
import path from "path";
import { rmSync, mkdirSync, writeFileSync } from "fs";
const { BUNEXT_VENDOR_DIR, BUNX_CWD_DIR } = grabDirNames();
const VENDOR_ENTRIES = {
react: `
import React from "react";
export const {
Children, Component, Fragment, Profiler, PureComponent, StrictMode,
Suspense, cloneElement, createContext, createElement, createRef,
forwardRef, isValidElement, lazy, memo, startTransition,
useCallback, useContext, useDebugValue, useDeferredValue, useEffect,
useId, useImperativeHandle, useInsertionEffect, useLayoutEffect,
useMemo, useReducer, useRef, useState, useSyncExternalStore,
useTransition, version, use, cache, act,
} = React;
export default React;
`,
"react-dom": `
import ReactDOM from "react-dom";
export const {
createPortal, flushSync, version,
} = ReactDOM;
export default ReactDOM;
`,
"react-dom_client": `
import ReactDOMClient from "react-dom/client";
export const { createRoot, hydrateRoot } = ReactDOMClient;
export default ReactDOMClient;
`,
"react_jsx-runtime": `
import JSXRuntime from "react/jsx-runtime";
export const { jsx, jsxs, Fragment } = JSXRuntime;
`,
"react_jsx-dev-runtime": `
import JSXDevRuntime from "react/jsx-dev-runtime";
export const { jsxDEV, Fragment } = JSXDevRuntime;
`,
};
export default async function bunReactModulesBundler() {
const dev = isDevelopment();
rmSync(BUNEXT_VENDOR_DIR, { force: true, recursive: true });
const tmpDir = path.join(BUNEXT_VENDOR_DIR, "_tmp");
mkdirSync(tmpDir, { recursive: true });
const entrypoints = [];
for (const [name, contents] of Object.entries(VENDOR_ENTRIES)) {
const file = path.join(tmpDir, `${name}.mjs`);
writeFileSync(file, contents);
entrypoints.push(file);
}
await Bun.build({
entrypoints,
outdir: BUNEXT_VENDOR_DIR,
splitting: true,
format: "esm",
target: "browser",
minify: !dev,
define: {
"process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
},
});
rmSync(tmpDir, { force: true, recursive: true });
const PUBLIC_ROOT = BUNEXT_VENDOR_DIR.replace(BUNX_CWD_DIR, "/.bunext");
global.REACT_IMPORTS_MAP = {
imports: {
react: `${PUBLIC_ROOT}/react.js`,
"react-dom": `${PUBLIC_ROOT}/react-dom.js`,
"react-dom/client": `${PUBLIC_ROOT}/react-dom_client.js`,
"react/jsx-runtime": `${PUBLIC_ROOT}/react_jsx-runtime.js`,
"react/jsx-dev-runtime": `${PUBLIC_ROOT}/react_jsx-dev-runtime.js`,
},
};
}
dist/functions/bundler/grab-client-hydration-script.js
Vendored
+1
View File
@@ -28,6 +28,7 @@ export default async function grabClientHydrationScript({ page_local_path, }) {
}
let txt = ``;
txt += `import { hydrateRoot } from "${ROOT_DIR}/node_modules/react-dom/client.js";\n`;
// txt += `import react from "${ROOT_DIR}/node_modules/react/index.js";\n`;
if (root_file_path) {
txt += `import Root from "${root_file_path}";\n`;
}
dist/functions/bundler/plugins/chunk-react.d.ts
Vendored
+2
View File
@@ -0,0 +1,2 @@
import * as esbuild from "esbuild";
export default function reactVendorChunkPlugin(): esbuild.Plugin;
dist/functions/bundler/plugins/chunk-react.js
Vendored
+97
View File
@@ -0,0 +1,97 @@
// plugins/react-vendor-chunk-plugin.ts
import * as esbuild from "esbuild";
import path from "path";
import grabDirNames from "../../../utils/grab-dir-names";
const { BUNEXT_VENDOR_DIR } = grabDirNames();
const REACT_MODULES = new Set([
"react",
"react-dom",
"react-dom/client",
"react/jsx-runtime",
"react/jsx-dev-runtime",
]);
const VENDOR_BASE = "/.bunext/public/vendor";
const REACT_ENTRIES = {
react: `
import React from "react";
export const {
Children, Component, Fragment, Profiler, PureComponent, StrictMode,
Suspense, cloneElement, createContext, createElement, createFactory,
createRef, forwardRef, isValidElement, lazy, memo, startTransition,
useCallback, useContext, useDebugValue, useDeferredValue, useEffect,
useId, useImperativeHandle, useInsertionEffect, useLayoutEffect,
useMemo, useReducer, useRef, useState, useSyncExternalStore,
useTransition, version,
} = React;
export default React;
`,
"react-dom": `
import ReactDOM from "react-dom";
export const {
createPortal, flushSync, findDOMNode, hydrate, render,
unmountComponentAtNode, version,
} = ReactDOM;
export default ReactDOM;
`,
"react-dom/client": `
import ReactDOMClient from "react-dom/client";
export const { createRoot, hydrateRoot } = ReactDOMClient;
export default ReactDOMClient;
`,
"react/jsx-runtime": `
import JSXRuntime from "react/jsx-runtime";
export const { jsx, jsxs, Fragment } = JSXRuntime;
export default JSXRuntime;
`,
"react/jsx-dev-runtime": `
import JSXDevRuntime from "react/jsx-dev-runtime";
export const { jsxDEV, Fragment } = JSXDevRuntime;
export default JSXDevRuntime;
`,
};
// Map bare specifier -> browser path
function vendorPath(specifier) {
const filename = specifier.replace(/\//g, "_") + ".js";
return `${VENDOR_BASE}/${filename}`;
}
function vendorOutfile(specifier) {
const filename = specifier.replace(/\//g, "_") + ".js";
return path.join(BUNEXT_VENDOR_DIR, filename);
}
export default function reactVendorChunkPlugin() {
let vendorReady;
return {
name: "react-vendor-chunk",
setup(build) {
vendorReady ??= buildAllVendorChunks(build.initialOptions);
build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, async (args) => {
const bare = args.path.replace(/\/index(\.m?js)?$/, "");
if (!(bare in REACT_ENTRIES))
return;
await vendorReady;
return {
path: vendorPath(bare),
external: true,
};
});
},
};
}
async function buildAllVendorChunks(parentOptions) {
await Promise.all(Object.entries(REACT_ENTRIES).map(([specifier, contents]) => esbuild.build({
stdin: {
contents,
resolveDir: process.cwd(),
loader: "tsx",
},
outfile: vendorOutfile(specifier),
bundle: true,
minify: parentOptions.minify,
format: "esm",
target: parentOptions.target,
platform: "browser",
define: parentOptions.define,
mainFields: ["module", "main"],
conditions: ["import", "default"],
})));
}
dist/functions/bundler/plugins/react-alias.d.ts
Vendored
+3
View File
@@ -0,0 +1,3 @@
import type { Plugin } from "esbuild";
declare const reactAliasPlugin: Plugin;
export default reactAliasPlugin;
dist/functions/bundler/plugins/react-alias.js
Vendored
+22
View File
@@ -0,0 +1,22 @@
import path from "path";
import grabDirNames from "../../../utils/grab-dir-names";
const { ROOT_DIR } = grabDirNames();
const reactAliasPlugin = {
name: "react-alias",
setup(build) {
const reactPath = path.join(ROOT_DIR, "node_modules");
build.onResolve({ filter: /^react$/ }, () => ({
path: path.join(reactPath, "react", "index.js"),
}));
build.onResolve({ filter: /^react-dom$/ }, () => ({
path: path.join(reactPath, "react-dom", "index.js"),
}));
build.onResolve({ filter: /^react\/jsx-runtime$/ }, () => ({
path: path.join(reactPath, "react", "jsx-runtime.js"),
}));
build.onResolve({ filter: /^react\/jsx-dev-runtime$/ }, () => ({
path: path.join(reactPath, "react", "jsx-dev-runtime.js"),
}));
},
};
export default reactAliasPlugin;
dist/functions/bundler/plugins/virtual-files-plugin.js
Vendored
+12
View File
@@ -11,6 +11,18 @@ export default function virtualFilesPlugin({ entryToPage }) {
namespace: "hydration-virtual",
};
});
build.onResolve({ filter: /node_modules\/react(-dom)?/ }, (args) => ({
path: args.path.includes("react-dom")
? args.path.includes("client")
? "react-dom/client"
: "react-dom"
: args.path.includes("jsx-dev")
? "react/jsx-dev-runtime"
: args.path.includes("jsx")
? "react/jsx-runtime"
: "react",
external: true,
}));
build.onLoad({ filter: /.*/, namespace: "hydration-virtual" }, (args) => {
const target = entryToPage.get(args.path);
if (!target?.tsx)
dist/functions/bundler/react-modules-bundler.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
export default function reactModulesBundler(): Promise<void>;
dist/functions/bundler/react-modules-bundler.js
Vendored
+77
View File
@@ -0,0 +1,77 @@
import * as esbuild from "esbuild";
import grabDirNames from "../../utils/grab-dir-names";
import isDevelopment from "../../utils/is-development";
import path from "path";
import { rmSync, mkdirSync, writeFileSync } from "fs";
const { BUNEXT_VENDOR_DIR, BUNX_CWD_DIR, ROOT_DIR } = grabDirNames();
const VENDOR_ENTRIES = {
react: `
import React from "react";
export const {
Children, Component, Fragment, Profiler, PureComponent, StrictMode,
Suspense, cloneElement, createContext, createElement, createRef,
forwardRef, isValidElement, lazy, memo, startTransition,
useCallback, useContext, useDebugValue, useDeferredValue, useEffect,
useId, useImperativeHandle, useInsertionEffect, useLayoutEffect,
useMemo, useReducer, useRef, useState, useSyncExternalStore,
useTransition, version, use, cache, act,
} = React;
export default React;
`,
"react-dom": `
import ReactDOM from "react-dom";
export const {
createPortal, flushSync, version,
} = ReactDOM;
export default ReactDOM;
`,
"react-dom_client": `
import ReactDOMClient from "react-dom/client";
export const { createRoot, hydrateRoot } = ReactDOMClient;
export default ReactDOMClient;
`,
"react_jsx-runtime": `
import JSXRuntime from "react/jsx-runtime";
export const { jsx, jsxs, Fragment } = JSXRuntime;
`,
"react_jsx-dev-runtime": `
import JSXDevRuntime from "react/jsx-dev-runtime";
export const { jsxDEV, Fragment } = JSXDevRuntime;
`,
};
export default async function reactModulesBundler() {
const dev = isDevelopment();
rmSync(BUNEXT_VENDOR_DIR, { force: true, recursive: true });
const tmpDir = path.join(BUNEXT_VENDOR_DIR, "_tmp");
mkdirSync(tmpDir, { recursive: true });
const entrypoints = {};
for (const [name, contents] of Object.entries(VENDOR_ENTRIES)) {
const file = path.join(tmpDir, `${name}.mjs`);
writeFileSync(file, contents);
entrypoints[name] = file;
}
await esbuild.build({
entryPoints: entrypoints,
outdir: BUNEXT_VENDOR_DIR,
bundle: true,
splitting: true,
format: "esm",
platform: "browser",
target: "es2020",
minify: !dev,
define: {
"process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
},
});
rmSync(tmpDir, { force: true, recursive: true });
const PUBLIC_ROOT = BUNEXT_VENDOR_DIR.replace(BUNX_CWD_DIR, "/.bunext");
global.REACT_IMPORTS_MAP = {
imports: {
react: `${PUBLIC_ROOT}/react.js`,
"react-dom": `${PUBLIC_ROOT}/react-dom.js`,
"react-dom/client": `${PUBLIC_ROOT}/react-dom_client.js`,
"react/jsx-runtime": `${PUBLIC_ROOT}/react_jsx-runtime.js`,
"react/jsx-dev-runtime": `${PUBLIC_ROOT}/react_jsx-dev-runtime.js`,
},
};
}