Component Bundler Bugfix

This commit is contained in:
Benjamin Toby 2026-04-04 20:30:40 +01:00
parent 1037bbb546
commit 5166ba037f
8 changed files with 118 additions and 91 deletions

View File

@ -12,7 +12,7 @@ export default async function grabPageBundledReactComponent({ file_path, root_fi
if (!tsx) {
return undefined;
}
const mod = await grabTsxStringModule({ tsx, file_path });
const mod = await grabTsxStringModule({ tsx });
const Main = mod.default;
const component = _jsx(Main, {});
return {

View File

@ -1,12 +1,11 @@
import EJSON from "../../../utils/ejson";
import isDevelopment from "../../../utils/is-development";
import { log } from "../../../utils/log";
import pagePathTransform from "../../../utils/page-path-transform";
export default function grabPageReactComponentString({ file_path, root_file_path, server_res, }) {
const now = Date.now();
const dev = isDevelopment();
try {
// const target_path = pagePathTransform({ page_path: file_path });
// const target_root_path = root_file_path
// ? pagePathTransform({ page_path: root_file_path })
// : undefined;
const import_suffix = dev ? `?t=${now}` : "";
let tsx = ``;
const server_res_json = JSON.stringify(EJSON.stringify(server_res || {}) ?? "{}");
// Import Root from its original source path so that all sub-components
@ -15,9 +14,9 @@ export default function grabPageReactComponentString({ file_path, root_file_path
// createContext() call, breaking context for any sub-component that
// imports AppContext via a relative path to the source __root.
if (root_file_path) {
tsx += `import Root from "${root_file_path}"\n`;
tsx += `import Root from "${root_file_path}${import_suffix}"\n`;
}
tsx += `import Page from "${file_path}"\n`;
tsx += `import Page from "${file_path}${import_suffix}"\n`;
tsx += `export default function Main() {\n\n`;
tsx += `const props = JSON.parse(${server_res_json})\n\n`;
tsx += ` return (\n`;

View File

@ -1,6 +1,5 @@
type Params = {
tsx: string;
file_path: string;
};
export default function grabTsxStringModule<T extends any = any>({ tsx, file_path, }: Params): Promise<T>;
export default function grabTsxStringModule<T extends any = any>({ tsx, }: Params): Promise<T>;
export {};

View File

@ -1,38 +1,55 @@
import isDevelopment from "../../../utils/is-development";
import tailwindcss from "bun-plugin-tailwind";
import grabDirNames from "../../../utils/grab-dir-names";
import path from "path";
import BunSkipNonBrowserPlugin from "../../bundler/plugins/bun-skip-browser-plugin";
export default async function grabTsxStringModule({ tsx, file_path, }) {
import { transform } from "esbuild";
export default async function grabTsxStringModule({ tsx, }) {
const dev = isDevelopment();
const { BUNX_CWD_MODULE_CACHE_DIR } = grabDirNames();
const trimmed_file_path = file_path
.replace(/.*\/src\/pages\//, "")
.replace(/\.tsx$/, "");
const src_file_path = path.join(BUNX_CWD_MODULE_CACHE_DIR, `${trimmed_file_path}.tsx`);
const out_file_path = path.join(BUNX_CWD_MODULE_CACHE_DIR, `${trimmed_file_path}.js`);
await Bun.write(src_file_path, tsx);
const build = await Bun.build({
entrypoints: [src_file_path],
const now = Date.now();
const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
const result = await transform(final_tsx, {
loader: "tsx",
format: "esm",
target: "bun",
external: ["react", "react-dom"],
minify: true,
define: {
"process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),
},
metafile: true,
plugins: [tailwindcss, BunSkipNonBrowserPlugin],
jsx: {
runtime: "automatic",
development: dev,
},
outdir: BUNX_CWD_MODULE_CACHE_DIR,
jsx: "automatic",
minify: !dev,
});
Loader.registry.delete(out_file_path);
const module = await import(`${out_file_path}?t=${Date.now()}`);
return module;
const blob = new Blob([result.code], { type: "text/javascript" });
const url = URL.createObjectURL(blob);
const mod = await import(url);
URL.revokeObjectURL(url);
return mod;
}
// const trimmed_file_path = file_path
// .replace(/.*\/src\/pages\//, "")
// .replace(/\.tsx$/, "");
// const src_file_path = path.join(
// BUNX_CWD_MODULE_CACHE_DIR,
// `${trimmed_file_path}.tsx`,
// );
// const out_file_path = path.join(
// BUNX_CWD_MODULE_CACHE_DIR,
// `${trimmed_file_path}.js`,
// );
// await Bun.write(src_file_path, tsx);
// const build = await Bun.build({
// entrypoints: [src_file_path],
// format: "esm",
// target: "bun",
// // external: ["react", "react-dom"],
// minify: true,
// define: {
// "process.env.NODE_ENV": JSON.stringify(
// dev ? "development" : "production",
// ),
// },
// metafile: true,
// plugins: [tailwindcss, BunSkipNonBrowserPlugin],
// jsx: {
// runtime: "automatic",
// development: dev,
// },
// outdir: BUNX_CWD_MODULE_CACHE_DIR,
// });
// Loader.registry.delete(out_file_path);
// const module = await import(`${out_file_path}?t=${Date.now()}`);
// return module as T;
// await esbuild.build({
// stdin: {
// contents: tsx,

View File

@ -2,7 +2,7 @@
"name": "@moduletrace/bunext",
"module": "index.ts",
"type": "module",
"version": "1.0.47",
"version": "1.0.48",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"exports": {

View File

@ -25,7 +25,7 @@ export default async function grabPageBundledReactComponent({
return undefined;
}
const mod = await grabTsxStringModule({ tsx, file_path });
const mod = await grabTsxStringModule({ tsx });
const Main = mod.default;
const component = <Main />;

View File

@ -1,6 +1,6 @@
import EJSON from "../../../utils/ejson";
import isDevelopment from "../../../utils/is-development";
import { log } from "../../../utils/log";
import pagePathTransform from "../../../utils/page-path-transform";
type Params = {
file_path: string;
@ -13,11 +13,11 @@ export default function grabPageReactComponentString({
root_file_path,
server_res,
}: Params): string | undefined {
const now = Date.now();
const dev = isDevelopment();
try {
// const target_path = pagePathTransform({ page_path: file_path });
// const target_root_path = root_file_path
// ? pagePathTransform({ page_path: root_file_path })
// : undefined;
const import_suffix = dev ? `?t=${now}` : "";
let tsx = ``;
@ -31,10 +31,10 @@ export default function grabPageReactComponentString({
// createContext() call, breaking context for any sub-component that
// imports AppContext via a relative path to the source __root.
if (root_file_path) {
tsx += `import Root from "${root_file_path}"\n`;
tsx += `import Root from "${root_file_path}${import_suffix}"\n`;
}
tsx += `import Page from "${file_path}"\n`;
tsx += `import Page from "${file_path}${import_suffix}"\n`;
tsx += `export default function Main() {\n\n`;
tsx += `const props = JSON.parse(${server_res_json})\n\n`;
tsx += ` return (\n`;

View File

@ -1,63 +1,75 @@
import isDevelopment from "../../../utils/is-development";
import tailwindcss from "bun-plugin-tailwind";
import grabDirNames from "../../../utils/grab-dir-names";
import path from "path";
import BunSkipNonBrowserPlugin from "../../bundler/plugins/bun-skip-browser-plugin";
import { transform } from "esbuild";
type Params = {
tsx: string;
file_path: string;
};
export default async function grabTsxStringModule<T extends any = any>({
tsx,
file_path,
}: Params): Promise<T> {
const dev = isDevelopment();
const { BUNX_CWD_MODULE_CACHE_DIR } = grabDirNames();
const now = Date.now();
const trimmed_file_path = file_path
.replace(/.*\/src\/pages\//, "")
.replace(/\.tsx$/, "");
const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
const src_file_path = path.join(
BUNX_CWD_MODULE_CACHE_DIR,
`${trimmed_file_path}.tsx`,
);
const out_file_path = path.join(
BUNX_CWD_MODULE_CACHE_DIR,
`${trimmed_file_path}.js`,
);
await Bun.write(src_file_path, tsx);
const build = await Bun.build({
entrypoints: [src_file_path],
const result = await transform(final_tsx, {
loader: "tsx",
format: "esm",
target: "bun",
external: ["react", "react-dom"],
minify: true,
define: {
"process.env.NODE_ENV": JSON.stringify(
dev ? "development" : "production",
),
},
metafile: true,
plugins: [tailwindcss, BunSkipNonBrowserPlugin],
jsx: {
runtime: "automatic",
development: dev,
},
outdir: BUNX_CWD_MODULE_CACHE_DIR,
jsx: "automatic",
minify: !dev,
});
Loader.registry.delete(out_file_path);
const module = await import(`${out_file_path}?t=${Date.now()}`);
const blob = new Blob([result.code], { type: "text/javascript" });
const url = URL.createObjectURL(blob);
const mod = await import(url);
return module as T;
URL.revokeObjectURL(url);
return mod as T;
}
// const trimmed_file_path = file_path
// .replace(/.*\/src\/pages\//, "")
// .replace(/\.tsx$/, "");
// const src_file_path = path.join(
// BUNX_CWD_MODULE_CACHE_DIR,
// `${trimmed_file_path}.tsx`,
// );
// const out_file_path = path.join(
// BUNX_CWD_MODULE_CACHE_DIR,
// `${trimmed_file_path}.js`,
// );
// await Bun.write(src_file_path, tsx);
// const build = await Bun.build({
// entrypoints: [src_file_path],
// format: "esm",
// target: "bun",
// // external: ["react", "react-dom"],
// minify: true,
// define: {
// "process.env.NODE_ENV": JSON.stringify(
// dev ? "development" : "production",
// ),
// },
// metafile: true,
// plugins: [tailwindcss, BunSkipNonBrowserPlugin],
// jsx: {
// runtime: "automatic",
// development: dev,
// },
// outdir: BUNX_CWD_MODULE_CACHE_DIR,
// });
// Loader.registry.delete(out_file_path);
// const module = await import(`${out_file_path}?t=${Date.now()}`);
// return module as T;
// await esbuild.build({
// stdin: {
// contents: tsx,