Component Bundler Bugfix

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 {

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 import_suffix = dev ? `?t=${now}` : "";
-        // const target_root_path = root_file_path
-        //     ? pagePathTransform({ page_path: root_file_path })
-        //     : undefined;
         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`;

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<T extends any = any>({ tsx, file_path, }: Params): Promise<T>;
+export default function grabTsxStringModule<T extends any = any>({ tsx, }: Params): Promise<T>;
 export {};

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 { transform } from "esbuild";
-import grabDirNames from "../../../utils/grab-dir-names";
+export default async function grabTsxStringModule({ tsx, }) {
-import path from "path";
-import BunSkipNonBrowserPlugin from "../../bundler/plugins/bun-skip-browser-plugin";
-export default async function grabTsxStringModule({ tsx, file_path, }) {
     const dev = isDevelopment();
-    const { BUNX_CWD_MODULE_CACHE_DIR } = grabDirNames();
+    const now = Date.now();
-    const trimmed_file_path = file_path
+    const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
-        .replace(/.*\/src\/pages\//, "")
+    const result = await transform(final_tsx, {
-        .replace(/\.tsx$/, "");
+        loader: "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",
+        jsx: "automatic",
-        external: ["react", "react-dom"],
+        minify: !dev,
-        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 blob = new Blob([result.code], { type: "text/javascript" });
-    const module = await import(`${out_file_path}?t=${Date.now()}`);
+    const url = URL.createObjectURL(blob);
-    return module;
+    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,

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": {

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 = <Main />;
 

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 import_suffix = dev ? `?t=${now}` : "";
-        // const target_root_path = root_file_path
-        //     ? pagePathTransform({ page_path: root_file_path })
-        //     : undefined;
 
         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`;

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 { transform } from "esbuild";
-import grabDirNames from "../../../utils/grab-dir-names";
-import path from "path";
-import BunSkipNonBrowserPlugin from "../../bundler/plugins/bun-skip-browser-plugin";
 
 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
+    const final_tsx = dev ? tsx + `\n// v_${now}` : tsx;
-        .replace(/.*\/src\/pages\//, "")
-        .replace(/\.tsx$/, "");
 
-    const src_file_path = path.join(
+    const result = await transform(final_tsx, {
-        BUNX_CWD_MODULE_CACHE_DIR,
+        loader: "tsx",
-        `${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",
+        jsx: "automatic",
-        external: ["react", "react-dom"],
+        minify: !dev,
-        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 blob = new Blob([result.code], { type: "text/javascript" });
-    const module = await import(`${out_file_path}?t=${Date.now()}`);
+    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,