Refactor Bundler. Fix bugs.

This commit is contained in:
2026-03-24 22:03:55 +01:00
parent 336fa812a5
commit 321c8ebb89
25 changed files with 387 additions and 167 deletions
-1
View File
@@ -64,7 +64,6 @@ export default async function allPagesBundler(params) {
if (build_starts == MAX_BUILD_STARTS) {
const error_msg = `Build Failed. Please check all your components and imports.`;
log.error(error_msg);
process.exit(1);
}
});
// build.onEnd((result) => {
@@ -0,0 +1,7 @@
type Params = {
post_build_fn?: (params: {
artifacts: any[];
}) => Promise<void> | void;
};
export default function allPagesESBuildContextBundlerFiles(params?: Params): Promise<void>;
export {};
@@ -0,0 +1,58 @@
import * as esbuild from "esbuild";
import grabAllPages from "../../utils/grab-all-pages";
import grabDirNames from "../../utils/grab-dir-names";
import isDevelopment from "../../utils/is-development";
import tailwindEsbuildPlugin from "../server/web-pages/tailwind-esbuild-plugin";
import grabClientHydrationScript from "./grab-client-hydration-script";
import path from "path";
import esbuildCTXArtifactTracker from "./plugins/esbuild-ctx-artifact-tracker";
const { HYDRATION_DST_DIR, BUNX_HYDRATION_SRC_DIR } = grabDirNames();
export default async function allPagesESBuildContextBundlerFiles(params) {
const pages = grabAllPages({ exclude_api: true });
global.PAGE_FILES = pages;
const dev = isDevelopment();
const entryToPage = new Map();
for (const page of pages) {
const tsx = await grabClientHydrationScript({
page_local_path: page.local_path,
});
if (!tsx)
continue;
const entryFile = path.join(BUNX_HYDRATION_SRC_DIR, `${page.url_path}.tsx`);
await Bun.write(entryFile, tsx, { createPath: true });
entryToPage.set(entryFile, { ...page, tsx });
}
const entryPoints = [...entryToPage.keys()];
const ctx = await esbuild.context({
entryPoints,
outdir: HYDRATION_DST_DIR,
bundle: true,
minify: !dev,
format: "esm",
target: "es2020",
platform: "browser",
define: {
"process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
},
entryNames: "[dir]/[hash]",
metafile: true,
plugins: [
tailwindEsbuildPlugin,
esbuildCTXArtifactTracker({
entryToPage,
post_build_fn: params?.post_build_fn,
}),
],
jsx: "automatic",
splitting: true,
logLevel: "silent",
external: [
"react",
"react-dom",
"react-dom/client",
"react/jsx-runtime",
],
});
await ctx.rebuild();
global.BUNDLER_CTX = ctx;
}
+23 -67
View File
@@ -2,81 +2,30 @@ import * as esbuild from "esbuild";
import grabAllPages from "../../utils/grab-all-pages";
import grabDirNames from "../../utils/grab-dir-names";
import isDevelopment from "../../utils/is-development";
import { log } from "../../utils/log";
import tailwindEsbuildPlugin from "../server/web-pages/tailwind-esbuild-plugin";
import grabClientHydrationScript from "./grab-client-hydration-script";
import grabArtifactsFromBundledResults from "./grab-artifacts-from-bundled-result";
import { writeFileSync } from "fs";
import path from "path";
const { HYDRATION_DST_DIR, HYDRATION_DST_DIR_MAP_JSON_FILE, BUNX_HYDRATION_SRC_DIR, } = grabDirNames();
let build_starts = 0;
const MAX_BUILD_STARTS = 10;
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();
const entryToPage = new Map();
for (const page of pages) {
const txt = await grabClientHydrationScript({
const tsx = await grabClientHydrationScript({
page_local_path: page.local_path,
});
if (!txt)
if (!tsx)
continue;
const entryFile = path.join(BUNX_HYDRATION_SRC_DIR, `${page.url_path}.tsx`);
await Bun.write(entryFile, txt, { createPath: true });
entryToPage.set(path.resolve(entryFile), page);
// await Bun.write(entryFile, txt, { createPath: true });
entryToPage.set(entryFile, { ...page, tsx });
}
let buildStart = 0;
const artifactTracker = {
name: "artifact-tracker",
setup(build) {
build.onStart(() => {
build_starts++;
buildStart = performance.now();
if (build_starts == MAX_BUILD_STARTS) {
const error_msg = `Build Failed. Please check all your components and imports.`;
log.error(error_msg);
process.exit(1);
}
});
build.onEnd((result) => {
if (result.errors.length > 0) {
for (const error of result.errors) {
const loc = error.location;
const location = loc
? ` ${loc.file}:${loc.line}:${loc.column}`
: "";
log.error(`[Build]${location} ${error.text}`);
}
return;
}
const artifacts = grabArtifactsFromBundledResults({
result,
entryToPage,
});
if (artifacts?.[0] && artifacts.length > 0) {
for (let i = 0; i < artifacts.length; i++) {
const artifact = artifacts[i];
if (artifact?.local_path && global.BUNDLER_CTX_MAP) {
global.BUNDLER_CTX_MAP[artifact.local_path] =
artifact;
}
}
params?.post_build_fn?.({ artifacts });
// writeFileSync(
// HYDRATION_DST_DIR_MAP_JSON_FILE,
// JSON.stringify(artifacts, null, 4),
// );
}
const elapsed = (performance.now() - buildStart).toFixed(0);
log.success(`[Built] in ${elapsed}ms`);
global.RECOMPILING = false;
build_starts = 0;
});
},
};
const entryPoints = [...entryToPage.keys()];
const ctx = await esbuild.context({
const entryPoints = [...entryToPage.keys()].map((e) => `hydration-virtual:${e}`);
global.BUNDLER_CTX = await esbuild.context({
entryPoints,
outdir: HYDRATION_DST_DIR,
bundle: true,
@@ -89,10 +38,21 @@ export default async function allPagesESBuildContextBundler(params) {
},
entryNames: "[dir]/[hash]",
metafile: true,
plugins: [tailwindEsbuildPlugin, artifactTracker],
plugins: [
tailwindEsbuildPlugin,
virtualFilesPlugin({
entryToPage,
}),
esbuildCTXArtifactTracker({
entryToPage,
post_build_fn: params?.post_build_fn,
}),
],
jsx: "automatic",
splitting: true,
logLevel: "silent",
// logLevel: "silent",
// logLevel: dev ? "error" : "silent",
external: [
"react",
"react-dom",
@@ -100,9 +60,5 @@ export default async function allPagesESBuildContextBundler(params) {
"react/jsx-runtime",
],
});
await ctx.rebuild();
// if (params?.watch) {
// await ctx.watch();
// }
global.BUNDLER_CTX = ctx;
await global.BUNDLER_CTX.rebuild();
}
@@ -2,7 +2,9 @@ import * as esbuild from "esbuild";
import type { BundlerCTXMap, PageFiles } from "../../types";
type Params = {
result: esbuild.BuildResult<esbuild.BuildOptions>;
entryToPage: Map<string, PageFiles>;
entryToPage: Map<string, PageFiles & {
tsx: string;
}>;
};
export default function grabArtifactsFromBundledResults({ result, entryToPage, }: Params): BundlerCTXMap[] | undefined;
export {};
@@ -1,6 +1,7 @@
import path from "path";
import * as esbuild from "esbuild";
import grabDirNames from "../../utils/grab-dir-names";
import { log } from "../../utils/log";
const { ROOT_DIR } = grabDirNames();
export default function grabArtifactsFromBundledResults({ result, entryToPage, }) {
if (result.errors.length > 0)
@@ -8,24 +9,29 @@ export default function grabArtifactsFromBundledResults({ result, entryToPage, }
const artifacts = Object.entries(result.metafile.outputs)
.filter(([, meta]) => meta.entryPoint)
.map(([outputPath, meta]) => {
const entrypoint = path.join(ROOT_DIR, meta.entryPoint || "");
const entrypoint = meta.entryPoint?.match(/^hydration-virtual:/)
? meta.entryPoint?.replace(/^hydration-virtual:/, "")
: meta.entryPoint
? path.join(ROOT_DIR, meta.entryPoint)
: "";
// const entrypoint = path.join(ROOT_DIR, meta.entryPoint || "");
// console.log("entrypoint", entrypoint);
const target_page = entryToPage.get(entrypoint);
if (!target_page || !meta.entryPoint) {
return undefined;
}
const { file_name, local_path, url_path, transformed_path } = target_page;
const { file_name, local_path, url_path } = target_page;
return {
path: outputPath,
hash: path.basename(outputPath, path.extname(outputPath)),
type: outputPath.endsWith(".css")
? "text/css"
: "text/javascript",
entrypoint,
entrypoint: meta.entryPoint,
css_path: meta.cssBundle,
file_name,
local_path,
url_path,
transformed_path,
};
});
if (artifacts.length > 0) {
+1 -1
View File
@@ -1,5 +1,5 @@
type Params = {
page_local_path: string;
};
export default function grabClientHydrationScript({ page_local_path, }: Params): Promise<string>;
export default function grabClientHydrationScript({ page_local_path, }: Params): Promise<string | undefined>;
export {};
+16
View File
@@ -13,6 +13,22 @@ export default async function grabClientHydrationScript({ page_local_path, }) {
// const target_root_path = root_file_path
// ? pagePathTransform({ page_path: root_file_path })
// : undefined;
if (!existsSync(page_local_path)) {
return undefined;
}
if (root_file_path) {
if (!existsSync(root_file_path)) {
return undefined;
}
const root_content = await Bun.file(root_file_path).text();
if (!root_content.match(/^export default/m)) {
return undefined;
}
}
const page_content = await Bun.file(page_local_path).text();
if (!page_content.match(/^export default/m)) {
return undefined;
}
let txt = ``;
txt += `import { hydrateRoot } from "react-dom/client";\n`;
if (root_file_path) {
@@ -0,0 +1,12 @@
import type { Plugin } from "esbuild";
import type { PageFiles } from "../../../types";
type Params = {
entryToPage: Map<string, PageFiles & {
tsx: string;
}>;
post_build_fn?: (params: {
artifacts: any[];
}) => Promise<void> | void;
};
export default function esbuildCTXArtifactTracker({ entryToPage, post_build_fn, }: Params): Plugin;
export {};
@@ -0,0 +1,57 @@
import { log } from "../../../utils/log";
import grabArtifactsFromBundledResults from "../grab-artifacts-from-bundled-result";
let buildStart = 0;
let build_starts = 0;
const MAX_BUILD_STARTS = 10;
export default function esbuildCTXArtifactTracker({ entryToPage, post_build_fn, }) {
const artifactTracker = {
name: "artifact-tracker",
setup(build) {
build.onStart(() => {
build_starts++;
buildStart = performance.now();
if (build_starts == MAX_BUILD_STARTS) {
const error_msg = `Build Failed. Please check all your components and imports.`;
log.error(error_msg);
global.RECOMPILING = false;
}
});
build.onEnd((result) => {
if (result.errors.length > 0) {
// for (const error of result.errors) {
// const loc = error.location;
// const location = loc
// ? ` ${loc.file}:${loc.line}:${loc.column}`
// : "";
// log.error(`[Build]${location} ${error.text}`);
// }
return;
}
const artifacts = grabArtifactsFromBundledResults({
result,
entryToPage,
});
// console.log("artifacts", artifacts);
if (artifacts?.[0] && artifacts.length > 0) {
for (let i = 0; i < artifacts.length; i++) {
const artifact = artifacts[i];
if (artifact?.local_path && global.BUNDLER_CTX_MAP) {
global.BUNDLER_CTX_MAP[artifact.local_path] =
artifact;
}
}
post_build_fn?.({ artifacts });
// writeFileSync(
// HYDRATION_DST_DIR_MAP_JSON_FILE,
// JSON.stringify(artifacts, null, 4),
// );
}
const elapsed = (performance.now() - buildStart).toFixed(0);
log.success(`[Built] in ${elapsed}ms`);
global.RECOMPILING = false;
build_starts = 0;
});
},
};
return artifactTracker;
}
@@ -0,0 +1,9 @@
import type { Plugin } from "esbuild";
import type { PageFiles } from "../../../types";
type Params = {
entryToPage: Map<string, PageFiles & {
tsx: string;
}>;
};
export default function virtualFilesPlugin({ entryToPage }: Params): Plugin;
export {};
+28
View File
@@ -0,0 +1,28 @@
import path from "path";
import { log } from "../../../utils/log";
export default function virtualFilesPlugin({ entryToPage }) {
const virtualPlugin = {
name: "virtual-hydration",
setup(build) {
build.onResolve({ filter: /^hydration-virtual:/ }, (args) => {
const final_path = args.path.replace(/hydration-virtual:/, "");
return {
path: final_path,
namespace: "hydration-virtual",
};
});
build.onLoad({ filter: /.*/, namespace: "hydration-virtual" }, (args) => {
const target = entryToPage.get(args.path);
if (!target?.tsx)
return null;
const contents = target.tsx;
return {
contents: contents || "",
loader: "tsx",
resolveDir: path.dirname(target.local_path),
};
});
},
};
return virtualPlugin;
}