Component Bundler Bugfix

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 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`;

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<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,