Update bundler logic

src/functions/bundler/all-pages-esbuild-context-bundler-files.ts

@@ -0,0 +1,81 @@
+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 type { PageFiles } from "../../types";
+import path from "path";
+import esbuildCTXArtifactTracker from "./plugins/esbuild-ctx-artifact-tracker";
+
+const { HYDRATION_DST_DIR, BUNX_HYDRATION_SRC_DIR } = grabDirNames();
+
+type Params = {
+    post_build_fn?: (params: { artifacts: any[] }) => Promise<void> | void;
+};
+
+export default async function allPagesESBuildContextBundlerFiles(
+    params?: Params,
+) {
+    const pages = grabAllPages({ exclude_api: true });
+
+    global.PAGE_FILES = pages;
+
+    const dev = isDevelopment();
+
+    const entryToPage = new Map<string, PageFiles & { tsx: string }>();
+
+    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;
+}

src/functions/bundler/all-pages-esbuild-context-bundler.ts

@@ -16,6 +16,8 @@ type Params = {
 };
 
 export default async function allPagesESBuildContextBundler(params?: Params) {
+    // return await allPagesESBuildContextBundlerFiles(params);
+
     const pages = grabAllPages({ exclude_api: true });
 
     global.PAGE_FILES = pages;
@@ -39,9 +41,11 @@ export default async function allPagesESBuildContextBundler(params?: Params) {
         entryToPage.set(entryFile, { ...page, tsx });
     }
 
-    const entryPoints = [...entryToPage.keys()];
+    const entryPoints = [...entryToPage.keys()].map(
+        (e) => `hydration-virtual:${e}`,
+    );
 
-    const ctx = await esbuild.context({
+    global.BUNDLER_CTX = await esbuild.context({
         entryPoints,
         outdir: HYDRATION_DST_DIR,
         bundle: true,
@@ -69,6 +73,7 @@ export default async function allPagesESBuildContextBundler(params?: Params) {
         jsx: "automatic",
         splitting: true,
         logLevel: "silent",
+        // logLevel: "silent",
         // logLevel: dev ? "error" : "silent",
         external: [
             "react",
@@ -78,7 +83,5 @@ export default async function allPagesESBuildContextBundler(params?: Params) {
         ],
     });
 
-    await ctx.rebuild();
-
-    global.BUNDLER_CTX = ctx;
+    await global.BUNDLER_CTX.rebuild();
 }

src/functions/bundler/grab-artifacts-from-bundled-result.ts

@@ -2,6 +2,7 @@ import path from "path";
 import * as esbuild from "esbuild";
 import type { BundlerCTXMap, PageFiles } from "../../types";
 import grabDirNames from "../../utils/grab-dir-names";
+import { log } from "../../utils/log";
 
 const { ROOT_DIR } = grabDirNames();
 
@@ -26,7 +27,14 @@ export default function grabArtifactsFromBundledResults({
     )
         .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);
 
@@ -42,7 +50,7 @@ export default function grabArtifactsFromBundledResults({
                 type: outputPath.endsWith(".css")
                     ? "text/css"
                     : "text/javascript",
-                entrypoint,
+                entrypoint: meta.entryPoint,
                 css_path: meta.cssBundle,
                 file_name,
                 local_path,

src/functions/bundler/plugins/esbuild-ctx-artifact-tracker.ts

@@ -31,7 +31,7 @@ export default function esbuildCTXArtifactTracker({
                 if (build_starts == MAX_BUILD_STARTS) {
                     const error_msg = `Build Failed. Please check all your components and imports.`;
                     log.error(error_msg);
-                    global.BUNDLER_CTX?.cancel();
+                    global.RECOMPILING = false;
                 }
             });
 
@@ -52,6 +52,8 @@ export default function esbuildCTXArtifactTracker({
                     entryToPage,
                 });
 
+                // console.log("artifacts", artifacts);
+
                 if (artifacts?.[0] && artifacts.length > 0) {
                     for (let i = 0; i < artifacts.length; i++) {
                         const artifact = artifacts[i];

src/functions/bundler/plugins/virtual-files-plugin.ts

@@ -1,6 +1,7 @@
 import type { Plugin } from "esbuild";
 import path from "path";
 import type { PageFiles } from "../../../types";
+import { log } from "../../../utils/log";
 
 type Params = {
     entryToPage: Map<

src/functions/server/watcher-esbuild-ctx.ts

@@ -52,6 +52,8 @@ export default async function watcherEsbuildCTX() {
                     if (global.RECOMPILING) return;
                     global.RECOMPILING = true;
 
+                    log.info(`Rebuilding CTX ...`);
+
                     await global.BUNDLER_CTX?.rebuild();
 
                     if (filename.match(/(404|500)\.tsx?/)) {
@@ -105,12 +107,18 @@ async function fullRebuild(params?: { msg?: string }) {
             log.watch(msg);
         }
 
+        log.info(`Reloading Router ...`);
+
         global.ROUTER.reload();
 
+        log.info(`Disposing Bundler CTX ...`);
         await global.BUNDLER_CTX?.dispose();
         global.BUNDLER_CTX = undefined;
 
-        await allPagesESBuildContextBundler({
+        global.BUNDLER_CTX_MAP = {};
+
+        log.info(`Rebuilding Modules ...`);
+        allPagesESBuildContextBundler({
             post_build_fn: serverPostBuildFn,
         });
     } catch (error: any) {
@@ -120,6 +128,7 @@ async function fullRebuild(params?: { msg?: string }) {
     }
 
     if (global.PAGES_SRC_WATCHER) {
+        log.info(`Restarting watcher ...`);
         global.PAGES_SRC_WATCHER.close();
         watcherEsbuildCTX();
     }

src/functions/server/web-pages/grab-web-page-hydration-script.tsx

@@ -41,7 +41,7 @@ export default async function (params?: Params) {
     script += `        try {\n`;
     script += `            document.getElementById("__bunext_error_overlay")?.remove();\n`;
     script += `            const data = JSON.parse(event.data);\n`;
-    script += `            console.log("data", data);\n`;
+    // script += `            console.log("data", data);\n`;
 
     script += `            if (data.reload) {\n`;
     script += `                console.log(\`Root Changes Detected. Reloading Page ...\`);\n`;