Updates

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

@@ -0,0 +1,50 @@
+import path from "path";
+import { renderToString } from "react-dom/server";
+import grabContants from "../../../utils/grab-constants";
+import EJSON from "../../../utils/ejson";
+import type { PageDistGenParams } from "../../../types";
+import isDevelopment from "../../../utils/is-development";
+
+export default async function genWebHTML({
+    component,
+    pageProps,
+    pageName,
+    module,
+}: PageDistGenParams) {
+    const { ClientRootElementIDName, ClientWindowPagePropsName } =
+        await grabContants();
+
+    const componentHTML = renderToString(component);
+
+    const SCRIPT_SRC = path.join("/public/routes", pageName + ".js");
+
+    let html = `<!DOCTYPE html>\n`;
+
+    if (isDevelopment()) {
+        html += `<script>
+            const hmr = new EventSource("/__hmr");
+            hmr.addEventListener("update", (event) => {
+                if (event.data === "reload") {
+                    window.location.reload();
+                }
+            });
+        </script>\n`;
+    }
+
+    html += `<html>\n`;
+    html += `    <head>\n`;
+    html += `        <meta charset="utf-8" />\n`;
+    html += `        <title>React SSR with Bun</title>\n`;
+    html += `    </head>\n`;
+    html += `    <body>\n`;
+    html += `        <div id="${ClientRootElementIDName}">${componentHTML}</div>\n`;
+    html += `        <script>window.${ClientWindowPagePropsName} = ${
+        EJSON.stringify(pageProps || {}) || "{}"
+    }</script>\n`;
+    html += `        <script src="${SCRIPT_SRC}" type="module"></script>\n`;
+
+    html += `    </body>\n`;
+    html += `</html>\n`;
+
+    return html;
+}

src/functions/server/web-pages/handle-web-pages.tsx

@@ -0,0 +1,63 @@
+import type { FC } from "react";
+import grabDirNames from "../../../utils/grab-dir-names";
+import type { Server } from "bun";
+import grabPageName from "../../../utils/grab-page-name";
+import grabRouteParams from "../../../utils/grab-route-params";
+import genWebHTML from "./generate-web-html";
+import grabRouter from "../../../utils/grab-router";
+import type { BunextPageModule } from "../../../types";
+
+type Params = {
+    req: Request;
+    server: Server;
+};
+
+export default async function ({ req, server }: Params): Promise<Response> {
+    const url = new URL(req.url);
+
+    try {
+        const router = grabRouter();
+        const match = router.match(url.pathname);
+
+        if (!match?.filePath) {
+            const errMsg = `Page ${url.pathname} not found`;
+            console.error(errMsg);
+            throw new Error(errMsg);
+        }
+
+        const pageName = grabPageName({ path: match.filePath });
+
+        const module: BunextPageModule = await import(match.filePath);
+        // const config = module.config as ServerRouteConfig | undefined;
+
+        const routeParams = await grabRouteParams({ req, server });
+
+        const serverRes = await (async () => {
+            try {
+                return await module["server"]?.(routeParams);
+            } catch (error) {
+                return {};
+            }
+        })();
+
+        const Component = module.default as FC<any>;
+        const component = <Component pageProps={serverRes} />;
+
+        const html = await genWebHTML({
+            component,
+            pageProps: serverRes,
+            pageName,
+            module,
+        });
+
+        return new Response(html, {
+            headers: {
+                "Content-Type": "text/html",
+            },
+        });
+    } catch (error) {
+        return new Response(`Page Not Found`, {
+            status: 404,
+        });
+    }
+}

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

@@ -0,0 +1,41 @@
+import { writeFileSync } from "fs";
+import path from "path";
+import grabDirNames from "../../../utils/grab-dir-names";
+import grabContants from "../../../utils/grab-constants";
+import genWebHTML from "./generate-web-html";
+import type { PageDistGenParams } from "../../../types";
+
+const { BUNX_HYDRATION_SRC_DIR, HYDRATION_DST_DIR } = grabDirNames();
+
+export default async function (params: PageDistGenParams) {
+    const { ClientRootElementIDName, ClientWindowPagePropsName } =
+        await grabContants();
+
+    const PAGE_DIST_DIR = path.join(HYDRATION_DST_DIR, params.pageName);
+
+    const pageSrcTs = `index.tsx`;
+
+    let script = "";
+
+    script += `import React from "react";\n`;
+    script += `import { hydrateRoot } from "react-dom/client";\n`;
+    script += `import App from "./";\n`;
+
+    script += `declare global {\n`;
+    script += `    interface Window {\n`;
+    script += `        ${ClientWindowPagePropsName}: any;\n`;
+    script += `    }\n`;
+    script += `}\n`;
+
+    script += `const container = document.getElementById("${ClientRootElementIDName}");\n`;
+    script += `hydrateRoot(container, <App {...window.${ClientWindowPagePropsName}} />);\n`;
+
+    const SRC_WRITE_FILE = path.join(PAGE_DIST_DIR, pageSrcTs);
+    writeFileSync(SRC_WRITE_FILE, script, "utf-8");
+
+    let html = await genWebHTML(params);
+    const pageHtml = `index.html`;
+
+    const HTML_WRITE_FILE = path.join(PAGE_DIST_DIR, pageHtml);
+    writeFileSync(HTML_WRITE_FILE, html, "utf-8");
+}