From 5166ba037f62a635073ba5b39d82f91809489086 Mon Sep 17 00:00:00 2001 From: Benjamin Toby Date: Sat, 4 Apr 2026 20:30:40 +0100 Subject: [PATCH] Component Bundler Bugfix --- .../grab-page-bundled-react-component.js | 2 +- .../grab-page-react-component-string.js | 13 ++- .../web-pages/grab-tsx-string-module.d.ts | 3 +- .../web-pages/grab-tsx-string-module.js | 77 +++++++++------ package.json | 2 +- .../grab-page-bundled-react-component.tsx | 2 +- .../grab-page-react-component-string.tsx | 14 +-- .../web-pages/grab-tsx-string-module.tsx | 96 +++++++++++-------- 8 files changed, 118 insertions(+), 91 deletions(-) diff --git a/dist/functions/server/web-pages/grab-page-bundled-react-component.js b/dist/functions/server/web-pages/grab-page-bundled-react-component.js index a5ad75e..75ea4cb 100644 --- a/dist/functions/server/web-pages/grab-page-bundled-react-component.js +++ b/dist/functions/server/web-pages/grab-page-bundled-react-component.js @@ -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 { diff --git a/dist/functions/server/web-pages/grab-page-react-component-string.js b/dist/functions/server/web-pages/grab-page-react-component-string.js index 6a3c79f..23cea5d 100644 --- a/dist/functions/server/web-pages/grab-page-react-component-string.js +++ b/dist/functions/server/web-pages/grab-page-react-component-string.js @@ -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`; diff --git a/dist/functions/server/web-pages/grab-tsx-string-module.d.ts b/dist/functions/server/web-pages/grab-tsx-string-module.d.ts index cb0073e..e0e1656 100644 --- a/dist/functions/server/web-pages/grab-tsx-string-module.d.ts +++ b/dist/functions/server/web-pages/grab-tsx-string-module.d.ts @@ -1,6 +1,5 @@ type Params = { tsx: string; - file_path: string; }; -export default function grabTsxStringModule({ tsx, file_path, }: Params): Promise; +export default function grabTsxStringModule({ tsx, }: Params): Promise; export {}; diff --git a/dist/functions/server/web-pages/grab-tsx-string-module.js b/dist/functions/server/web-pages/grab-tsx-string-module.js index c5ec7ff..95acea4 100644 --- a/dist/functions/server/web-pages/grab-tsx-string-module.js +++ b/dist/functions/server/web-pages/grab-tsx-string-module.js @@ -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, diff --git a/package.json b/package.json index b05c398..292c0bb 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/functions/server/web-pages/grab-page-bundled-react-component.tsx b/src/functions/server/web-pages/grab-page-bundled-react-component.tsx index 32b51cf..325330a 100644 --- a/src/functions/server/web-pages/grab-page-bundled-react-component.tsx +++ b/src/functions/server/web-pages/grab-page-bundled-react-component.tsx @@ -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 =
; diff --git a/src/functions/server/web-pages/grab-page-react-component-string.tsx b/src/functions/server/web-pages/grab-page-react-component-string.tsx index 79cd165..68667d2 100644 --- a/src/functions/server/web-pages/grab-page-react-component-string.tsx +++ b/src/functions/server/web-pages/grab-page-react-component-string.tsx @@ -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`; diff --git a/src/functions/server/web-pages/grab-tsx-string-module.tsx b/src/functions/server/web-pages/grab-tsx-string-module.tsx index 6618a36..6123d7b 100644 --- a/src/functions/server/web-pages/grab-tsx-string-module.tsx +++ b/src/functions/server/web-pages/grab-tsx-string-module.tsx @@ -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({ tsx, - file_path, }: Params): Promise { 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,