Bugfix. Extract react imports from main bundler to vendor static files

dist/functions/server/handle-bunext-public-assets.js

@@ -1,54 +1,22 @@
 import grabDirNames from "../../utils/grab-dir-names";
 import path from "path";
 import isDevelopment from "../../utils/is-development";
-import { existsSync } from "fs";
 import { readFileResponse } from "./handle-public";
-const { HYDRATION_DST_DIR } = grabDirNames();
+const { BUNEXT_PUBLIC_DIR } = grabDirNames();
 export default async function ({ req }) {
     try {
         const is_dev = isDevelopment();
         const url = new URL(req.url);
-        // switch (url.pathname) {
-        //     case "/.bunext/react":
-        //         return readFileResponse({
-        //             file_path: is_dev
-        //                 ? global.DIR_NAMES.REACT_DEVELOPMENT_MODULE
-        //                 : global.DIR_NAMES.REACT_PRODUCTION_MODULE,
-        //         });
-        //     case "/.bunext/react-dom":
-        //         return readFileResponse({
-        //             file_path: is_dev
-        //                 ? global.DIR_NAMES.REACT_DOM_DEVELOPMENT_MODULE
-        //                 : global.DIR_NAMES.REACT_DOM_PRODUCTION_MODULE,
-        //         });
-        //     case "/.bunext/react-dom-client":
-        //         return readFileResponse({
-        //             file_path: is_dev
-        //                 ? global.DIR_NAMES.REACT_DOM_CLIENT_DEVELOPMENT_MODULE
-        //                 : global.DIR_NAMES.REACT_DOM_CLIENT_PRODUCTION_MODULE,
-        //         });
-        //     case "/.bunext/react-jsx-runtime":
-        //         return readFileResponse({
-        //             file_path: is_dev
-        //                 ? global.DIR_NAMES.REACT_JSX_RUNTIME_DEVELOPMENT_MODULE
-        //                 : global.DIR_NAMES.REACT_JSX_RUNTIME_PRODUCTION_MODULE,
-        //         });
-        //     case "/.bunext/react-jsx-dev-runtime":
-        //         return readFileResponse({
-        //             file_path: is_dev
-        //                 ? global.DIR_NAMES
-        //                       .REACT_JSX_DEVELOPMENT_RUNTIME_DEVELOPMENT_MODULE
-        //                 : global.DIR_NAMES
-        //                       .REACT_JSX_DEVELOPMENT_RUNTIME_PRODUCTION_MODULE,
-        //         });
-        //     default:
-        //         break;
-        // }
-        const file_path = path.join(HYDRATION_DST_DIR, url.pathname.replace(/\/\.bunext\/public\/pages\//, ""));
-        if (!file_path.startsWith(HYDRATION_DST_DIR + path.sep)) {
+        const file_path = path.join(BUNEXT_PUBLIC_DIR, url.pathname.replace(/\/\.bunext\/public\//, ""));
+        if (!file_path.startsWith(BUNEXT_PUBLIC_DIR + path.sep)) {
             return new Response("Forbidden", { status: 403 });
         }
-        return readFileResponse({ file_path });
+        return readFileResponse({
+            file_path,
+            cache: url.pathname.includes("/vendor/")
+                ? { duration: 3600 }
+                : undefined,
+        });
     }
     catch (error) {
         return new Response(`File Not Found`, {

dist/functions/server/handle-public.d.ts

@@ -2,7 +2,11 @@ type Params = {
     req: Request;
 };
 export default function ({ req }: Params): Promise<Response>;
-export declare function readFileResponse({ file_path }: {
+type FileResponse = {
     file_path: string;
-}): Response;
+    cache?: {
+        duration?: "infinite" | number;
+    };
+};
+export declare function readFileResponse({ file_path, cache }: FileResponse): Response;
 export {};

dist/functions/server/handle-public.js

@@ -19,13 +19,21 @@ export default async function ({ req }) {
         });
     }
 }
-export function readFileResponse({ file_path }) {
+export function readFileResponse({ file_path, cache }) {
     if (!existsSync(file_path)) {
         return new Response(`Public File Doesn't Exist`, {
             status: 404,
         });
     }
     const file = Bun.file(file_path);
-    // let res_opts: ResponseInit = {};
-    return new Response(file);
+    const headers = new Headers();
+    if (cache?.duration == "infinite" || (cache && !cache.duration)) {
+        headers.set("Cache-Control", "public, max-age=31536000, immutable");
+    }
+    else if (cache?.duration) {
+        headers.set("Cache-Control", `public, max-age=${cache.duration}`);
+    }
+    return new Response(file, {
+        headers,
+    });
 }

dist/functions/server/web-pages/generate-web-html.js

@@ -6,16 +6,9 @@ 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";
 import _ from "lodash";
 import grabDirNames from "../../../utils/grab-dir-names";
 const { ROOT_DIR } = grabDirNames();
-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, pageProps, bundledMap, module, routeParams, debug, root_module, }) {
     const { ClientRootElementIDName, ClientWindowPagePropsName } = grabContants();
     const { renderToReadableStream } = await import(`${ROOT_DIR}/node_modules/react-dom/server.js`);
@@ -46,47 +39,23 @@ export default async function genWebHTML({ component, pageProps, bundledMap, mod
     const Head = module?.Head;
     const RootHead = root_module?.Head;
     const dev = isDevelopment();
-    const devSuffix = dev ? "?dev" : "";
-    // const browser_imports: Record<string, string> = {
-    //     react: `/.bunext/react`,
-    //     "react-dom": `/.bunext/react-dom`,
-    //     "react-dom/client": `/.bunext/react-dom-client`,
-    //     "react/jsx-runtime": `/.bunext/react-jsx-runtime`,
-    //     "react/jsx-dev-runtime": `/.bunext/react-jsx-dev-runtime`,
-    // };
-    // const browser_imports: Record<string, string> = {
-    //     react: `https://esm.sh/react@${_reactVersion}`,
-    //     "react-dom": `https://esm.sh/react-dom@${_reactVersion}`,
-    //     "react-dom/client": `https://esm.sh/react-dom@${_reactVersion}/client`,
-    //     "react/jsx-runtime": `https://esm.sh/react@${_reactVersion}/jsx-runtime`,
-    //     "react/jsx-dev-runtime": `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime`,
-    // };
-    // if (dev) {
-    //     browser_imports["react/jsx-dev-runtime"] =
-    //         `https://esm.sh/react@${_reactVersion}/jsx-dev-runtime`;
-    // }
-    // const importMap = JSON.stringify({
-    //     imports: browser_imports,
-    // });
     const final_meta = _.merge(root_meta, page_meta);
     let final_component = (_jsxs("html", { ...html_props, children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8", "data-bunext-head": true }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0", "data-bunext-head": true }), final_meta ? grabWebMetaHTML({ meta: final_meta }) : null, bundledMap?.css_path ? (_jsx("link", { rel: "stylesheet", href: `/${bundledMap.css_path}`, "data-bunext-head": true })) : null, _jsx("script", { dangerouslySetInnerHTML: {
                             __html: `window.${ClientWindowPagePropsName} = ${serializedProps}`,
-                        }, "data-bunext-head": true }), RootHead ? (_jsx(RootHead, { serverRes: pageProps, ctx: routeParams })) : null, Head ? _jsx(Head, { serverRes: pageProps, ctx: routeParams }) : null, bundledMap?.path ? (_jsx(_Fragment, { children: _jsx("script", { src: `/${bundledMap.path}`, type: "module", id: AppData["BunextClientHydrationScriptID"], defer: true, "data-bunext-head": true }) })) : null, is_dev ? (_jsx("script", { defer: true, dangerouslySetInnerHTML: {
+                        }, "data-bunext-head": true }), RootHead ? (_jsx(RootHead, { serverRes: pageProps, ctx: routeParams })) : null, Head ? _jsx(Head, { serverRes: pageProps, ctx: routeParams }) : null, bundledMap?.path ? (_jsxs(_Fragment, { children: [_jsx("script", { type: "importmap", dangerouslySetInnerHTML: {
+                                    __html: JSON.stringify(global.REACT_IMPORTS_MAP),
+                                }, defer: true, "data-bunext-head": true }), _jsx("script", { src: `/${bundledMap.path}`, type: "module", id: AppData["BunextClientHydrationScriptID"], defer: true, "data-bunext-head": true })] })) : null, is_dev ? (_jsx("script", { defer: true, dangerouslySetInnerHTML: {
                             __html: page_hydration_script,
                         }, "data-bunext-head": true })) : null] }), _jsx("body", { children: _jsx("div", { id: ClientRootElementIDName, suppressHydrationWarning: !dev, children: component }) })] }));
     let html = `<!DOCTYPE html>\n`;
     const stream = await renderToReadableStream(final_component, {
         onError(error) {
-            // This is where you "omit" or handle the errors
-            // You can log it silently or ignore it
             if (error.message.includes('unique "key" prop'))
                 return;
             console.error(error);
         },
     });
-    // 2. Convert the Web Stream to a String (Bun-optimized)
     const htmlBody = await new Response(stream).text();
     html += htmlBody;
-    // html += renderToString(final_component);
     return html;
 }

dist/functions/server/web-pages/grab-file-path-module.js

@@ -14,7 +14,7 @@ export default async function grabFilePathModule({ file_path, out_file, }) {
         format: "esm",
         target: "es2020",
         platform: "node",
-        external: ["react", "react-dom"],
+        // external: ["react", "react-dom"],
         minify: true,
         define: {
             "process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production"),

dist/functions/server/web-pages/grab-web-page-hydration-script.js

@@ -75,6 +75,16 @@ export default async function (params) {
     script += `            } else if (oldCSSLink) {\n`;
     script += `                oldCSSLink.remove();\n`;
     script += `            }\n`;
+    // script += `            const newScriptPath = \`/\${data.target_map.path}?t=\${Date.now()}\`;\n\n`;
+    // script += `            try {\n`;
+    // script += `                const mod = await import(newScriptPath);\n`;
+    // script += `                if (typeof mod.default === "function" || typeof window.__BUNEXT_RERENDER__ === "function") {\n`;
+    // script += `                    window.__BUNEXT_RERENDER__?.();\n`;
+    // script += `                }\n`;
+    // script += `            } catch (importErr) {\n`;
+    // script += `                console.error("HMR import failed, reloading:", importErr.message);\n`;
+    // script += `                window.location.reload();\n`;
+    // script += `            }\n`;
     script += `            const newScriptPath = \`/\${data.target_map.path}?t=\${Date.now()}\`;\n\n`;
     script += `            const oldScript = document.getElementById("${AppData["BunextClientHydrationScriptID"]}");\n`;
     script += `            if (oldScript) {\n`;