Update Hydration and HMR logic

src/functions/server/bunext-req-handler.ts

@@ -5,6 +5,7 @@ import grabConstants from "../../utils/grab-constants";
 import handleHmr from "./handle-hmr";
 import handlePublic from "./handle-public";
 import handleFiles from "./handle-files";
+import handleBunextPublicAssets from "./handle-bunext-public-assets";
 type Params = {
     req: Request;
 };
@@ -39,6 +40,8 @@ export default async function bunextRequestHandler({
 
         if (url.pathname === "/__hmr" && is_dev) {
             response = await handleHmr({ req });
+        } else if (url.pathname.startsWith("/.bunext/public/pages")) {
+            response = await handleBunextPublicAssets({ req });
         } else if (url.pathname.startsWith("/api/")) {
             response = await handleRoutes({ req });
         } else if (url.pathname.startsWith("/public/")) {

src/functions/server/cleanup-artifacts.tsx

@@ -0,0 +1,52 @@
+import { log } from "../../utils/log";
+import path from "path";
+import grabDirNames from "../../utils/grab-dir-names";
+import { existsSync, readdirSync, statSync, unlinkSync } from "fs";
+import type { BundlerCTXMap } from "../../types";
+
+type Params = {
+    new_artifacts: BundlerCTXMap[];
+};
+
+const { ROOT_DIR, HYDRATION_DST_DIR_MAP_JSON_FILE_NAME } = grabDirNames();
+
+export default async function cleanupArtifacts({ new_artifacts }: Params) {
+    try {
+        for (let i = 0; i < new_artifacts.length; i++) {
+            const new_artifact = new_artifacts[i];
+
+            const artifact_public_dir = path.dirname(
+                path.join(ROOT_DIR, new_artifact.path),
+            );
+
+            const dir_content = readdirSync(artifact_public_dir);
+
+            for (let d = 0; d < dir_content.length; d++) {
+                const dir_or_file = dir_content[d];
+                const full_path = path.join(artifact_public_dir, dir_or_file);
+
+                const file_or_path_stats = statSync(full_path);
+
+                if (
+                    file_or_path_stats.isDirectory() ||
+                    dir_or_file == HYDRATION_DST_DIR_MAP_JSON_FILE_NAME
+                ) {
+                    continue;
+                }
+
+                if (
+                    new_artifact.path.includes(dir_or_file) ||
+                    new_artifact.css_path?.includes(dir_or_file)
+                ) {
+                    continue;
+                }
+
+                if (existsSync(full_path)) {
+                    unlinkSync(full_path);
+                }
+            }
+        }
+    } catch (error: any) {
+        log.error(error);
+    }
+}

src/functions/server/handle-bunext-public-assets.ts

@@ -0,0 +1,34 @@
+import grabDirNames from "../../utils/grab-dir-names";
+import path from "path";
+import isDevelopment from "../../utils/is-development";
+import { existsSync } from "fs";
+
+const { HYDRATION_DST_DIR } = grabDirNames();
+
+type Params = {
+    req: Request;
+};
+
+export default async function ({ req }: Params): Promise<Response> {
+    try {
+        const is_dev = isDevelopment();
+        const url = new URL(req.url);
+        const file_path = path.join(
+            HYDRATION_DST_DIR,
+            url.pathname.replace(/\/\.bunext\/public\/pages\//, ""),
+        );
+
+        if (!existsSync(file_path)) {
+            return new Response(`File Doesn't Exist`, {
+                status: 404,
+            });
+        }
+
+        const file = Bun.file(file_path);
+        return new Response(file);
+    } catch (error) {
+        return new Response(`File Not Found`, {
+            status: 404,
+        });
+    }
+}

src/functions/server/handle-hmr.ts

@@ -7,7 +7,7 @@ export default async function ({ req }: Params): Promise<Response> {
     const match = global.ROUTER.match(referer_url.pathname);
 
     const target_map = match?.filePath
-        ? global.BUNDLER_CTX_MAP[match.filePath]
+        ? global.BUNDLER_CTX_MAP?.[match.filePath]
         : undefined;
 
     let controller: ReadableStreamDefaultController<string>;

src/functions/server/rebuild-bundler.tsx

@@ -1,6 +1,7 @@
-import allPagesBundler from "../bundler/all-pages-bundler";
 import serverPostBuildFn from "./server-post-build-fn";
 import { log } from "../../utils/log";
+import allPagesBunBundler from "../bundler/all-pages-bun-bundler";
+import cleanupArtifacts from "./cleanup-artifacts";
 
 type Params = {
     target_file_paths?: string[];
@@ -13,11 +14,15 @@ export default async function rebuildBundler(params?: Params) {
         // await global.BUNDLER_CTX?.dispose();
         // global.BUNDLER_CTX = undefined;
 
-        await allPagesBundler({
+        const new_artifacts = await allPagesBunBundler({
             page_file_paths: params?.target_file_paths,
         });
 
         await serverPostBuildFn();
+
+        if (new_artifacts?.[0]) {
+            cleanupArtifacts({ new_artifacts });
+        }
     } catch (error: any) {
         log.error(error);
     }

src/functions/server/watcher.ts

@@ -8,8 +8,6 @@ import rewritePagesModule from "../../utils/rewrite-pages-module";
 const { ROOT_DIR } = grabDirNames();
 
 export default async function watcher() {
-    await Bun.sleep(1000);
-
     const pages_src_watcher = watch(
         ROOT_DIR,
         {
@@ -88,7 +86,9 @@ async function fullRebuild(params?: { msg?: string }) {
             (hmr) => hmr.target_map?.local_path,
         ).filter((f) => typeof f == "string");
 
-        await rewritePagesModule({ page_file_path: target_file_paths });
+        await rewritePagesModule({
+            page_file_path: target_file_paths,
+        });
 
         if (msg) {
             log.watch(msg);

src/functions/server/web-pages/generate-web-html.tsx

@@ -7,6 +7,18 @@ import grabWebPageHydrationScript from "./grab-web-page-hydration-script";
 import grabWebMetaHTML from "./grab-web-meta-html";
 import { log } from "../../../utils/log";
 import { AppData } from "../../../data/app-data";
+import { readFileSync } from "fs";
+import path from "path";
+
+let _reactVersion = "19";
+try {
+    _reactVersion = JSON.parse(
+        readFileSync(
+            path.join(process.cwd(), "node_modules/react/package.json"),
+            "utf-8",
+        ),
+    ).version;
+} catch {}
 
 export default async function genWebHTML({
     component,
@@ -54,6 +66,18 @@ export default async function genWebHTML({
     }</script>\n`;
 
     if (bundledMap?.path) {
+        const dev = isDevelopment();
+        const devSuffix = dev ? "?dev" : "";
+        const importMap = JSON.stringify({
+            imports: {
+                react: `https://esm.sh/react@${_reactVersion}${devSuffix}`,
+                "react-dom": `https://esm.sh/react-dom@${_reactVersion}${devSuffix}`,
+                "react-dom/client": `https://esm.sh/react-dom@${_reactVersion}/client${devSuffix}`,
+                "react/jsx-runtime": `https://esm.sh/react@${_reactVersion}/jsx-runtime${devSuffix}`,
+                "react/jsx-dev-runtime": `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime${devSuffix}`,
+            },
+        });
+        html += `        <script type="importmap">${importMap}</script>\n`;
         html += `        <script src="/${bundledMap.path}" type="module" id="${AppData["BunextClientHydrationScriptID"]}" async></script>\n`;
     }
 

src/functions/server/web-pages/grab-page-component.tsx

@@ -62,7 +62,7 @@ export default async function grabPageComponent({
             throw new Error(errMsg);
         }
 
-        const bundledMap = global.BUNDLER_CTX_MAP[file_path];
+        const bundledMap = global.BUNDLER_CTX_MAP?.[file_path];
 
         if (!bundledMap?.path) {
             const errMsg = `No Bundled File Path for this request path!`;

src/functions/server/web-pages/grab-page-error-component.tsx

@@ -33,7 +33,7 @@ export default async function grabPageErrorComponent({
         const filePath = match?.filePath || presetComponent;
 
         const bundledMap = match?.filePath
-            ? global.BUNDLER_CTX_MAP[match.filePath]
+            ? global.BUNDLER_CTX_MAP?.[match.filePath]
             : ({} as BundlerCTXMap);
 
         const module: BunextPageModule = await import(filePath);