@bananacool467/authtics-host 0.2.5 → 0.2.7

package/dist/index.d.ts

@@ -27,4 +27,5 @@ declare module "http" {
 import { defineConfig } from './config.js';
 import App from './cli.js';
 import { Route, RouteMap, Paused } from './route.js';
-export { App, Route, RouteMap, Paused, defineConfig };
+import { load as loadBAPI, Cookies } from "./BrowserAPIs.js";
+export { App, Route, RouteMap, Paused, defineConfig, loadBAPI, Cookies };

package/dist/index.js

@@ -1,4 +1,5 @@
 import { defineConfig } from './config.js';
 import App from './cli.js';
 import { Route, RouteMap, Paused } from './route.js';
-export { App, Route, RouteMap, Paused, defineConfig };
+import { load as loadBAPI, Cookies } from "./BrowserAPIs.js";
+export { App, Route, RouteMap, Paused, defineConfig, loadBAPI, Cookies };

package/dist/renderEngine.d.ts

@@ -1,3 +1,7 @@
+export declare function deleteSrtwsServer(): void;
+export declare function handleSrtwsConnection(server: any, tsxPath: string, config: any, reqUrl?: string, reqDAT?: string, rmvFileHandler?: (p: string) => void, fileHandler?: (f: string, p: string) => void): boolean;
 export type CompilerType = 'esbuild';
+export type RenderMode = 'ssr' | 'csr' | 'ssg' | 'srtws';
 export declare function findFileUpwards(startDir: string, relativePath: string): string | null;
-export declare function renderPage(tsxPath: string, reqUrl?: string, showPanel?: boolean, compiler?: CompilerType, hotReload?: boolean, autoPaging?: boolean, autoPageDir?: string, appDir?: string, fileHandler?: (f: string, p: string) => void, rmvFileHandler?: (p: string) => void, reqDAT?: string | undefined, configDAT?: string | string[] | undefined): Promise<string>;
+export declare function handleHTML(rawHtml: string, actuallyShowPanel: boolean, configDAT?: string | string[], userDAT?: string, hotReload?: boolean): Promise<string>;
+export declare function renderPage(tsxPath: string, reqUrl?: string, showPanel?: boolean, compiler?: CompilerType, hotReload?: boolean, autoPaging?: boolean, autoPageDir?: string, appDir?: string, fileHandler?: (f: string, p: string) => void, rmvFileHandler?: (p: string) => void, reqDAT?: string | undefined, configDAT?: string | string[] | undefined, renderMode?: RenderMode, patchForServer?: boolean, prebuildOnly?: boolean): Promise<string>;

package/dist/renderEngine.js

@@ -1,12 +1,45 @@
 import path from "node:path";
 import fs from "node:fs";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import * as esbuild from "esbuild";
 import React from "react";
 import { renderToString } from "react-dom/server";
-import { tempFileForTsx, writeTempFile, readTempFile, ensureTempDirs, } from "./rendererTempFiles.js";
+import { tempFileForTsx, clientBundleForTsx, serverBundleForTsx, ssgHtmlForTsx, getBuildStyle, getBuildTrigger, writeTempFile, readTempFile, ensureTempDirs, } from "./rendererTempFiles.js";
 import { createRequire } from "node:module";
 const customRequire = createRequire(import.meta.url);
+import { WebSocketServer } from "ws";
+let srtwsServer = null;
+export function deleteSrtwsServer() {
+    if (srtwsServer)
+        srtwsServer.close();
+    srtwsServer = null;
+}
+export function handleSrtwsConnection(server, tsxPath, config, reqUrl, reqDAT, rmvFileHandler, fileHandler) {
+    const wss = new WebSocketServer({ noServer: true });
+    srtwsServer = wss;
+    server.on("upgrade", (req, socket, head) => {
+        if (req.url === "/__authtics_srtws__") {
+            wss.handleUpgrade(req, socket, head, (ws) => {
+                wss.emit("connection", ws, req);
+            });
+        }
+    });
+    wss.on("connection", (ws) => {
+        const renderAndSend = async () => {
+            const pageHtml = await renderPage(tsxPath, reqUrl, config.devMode, config.compilerType, config.hotReload, config.autoPage, config.autoPageDir, config.appDir, fileHandler, rmvFileHandler, reqDAT, config.dat, 'csr', config.patchForSsr);
+            ws.send(JSON.stringify({ type: "DOM", html: pageHtml }));
+        };
+        ws.on("message", () => {
+            try {
+                renderAndSend();
+            }
+            catch (err) {
+                console.error("[HostJS] SRTWS error:", err);
+            }
+        });
+    });
+    return true;
+}
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const NODE_BUILTINS = [
@@ -23,6 +56,34 @@ const NODE_BUILTINS = [
     'node:module', 'node:process', 'node:string_decoder', 'node:querystring',
     'express', 'jiti',
 ];
+const SRTWS_CLIENT_SCRIPT = `<script>
+(function() {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  const ws = new WebSocket(protocol + window.location.host + '/__authtics_srtws__');
+
+  ws.onmessage = function(event) {
+  const msg = JSON.parse(event.data);
+  if (msg.type === 'DOM') {
+    document.documentElement.innerHTML = msg.html;
+    const scripts = document.documentElement.querySelectorAll('script');
+    
+    scripts.forEach(oldScript => {
+      const newScript = document.createElement('script');
+      Array.from(oldScript.attributes).forEach(attr => {
+        newScript.setAttribute(attr.name, attr.value);
+      });
+      newScript.textContent = oldScript.textContent;
+      oldScript.parentNode.replaceChild(newScript, oldScript);
+    });
+  }
+};
+
+
+  ws.onopen = function() {
+    ws.send(JSON.stringify({}));
+  };
+})();
+</script>`;
 const nodeStubPlugin = {
     name: 'browser-node-stub',
     setup(build) {
@@ -34,7 +95,6 @@ const nodeStubPlugin = {
         }));
         build.onLoad({ filter: /.*/, namespace: 'browser-node-stub' }, () => ({
             contents: `
-        // Node.js built-in stub for browser builds
         const stub = new Proxy({}, { get: () => () => undefined });
         export default stub;
       `,
@@ -42,9 +102,11 @@ const nodeStubPlugin = {
         }));
     },
 };
-async function buildWithEsbuild(virtualContent, resolveDir, platform) {
+async function buildWithEsbuild(virtualContent, resolveDir, platform, patchForServer = false, options = {}) {
     const toFwdSlash = (p) => p.split(path.sep).join('/');
     const isNode = platform === 'node';
+    const sourceMaps = options.sourceMaps === true;
+    const outfile = path.resolve(options.outfile ?? path.join(resolveDir, `virtual-entry-${platform}.js`));
     const result = await esbuild.build({
         stdin: {
             contents: virtualContent,
@@ -53,13 +115,91 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
         },
         bundle: true,
         write: false,
+        outfile,
         format: isNode ? 'cjs' : 'iife',
         platform,
         jsx: 'automatic',
-        sourcemap: isNode ? false : false,
         target: isNode ? ['node18'] : ['es2020'],
-        minify: true,
+        sourcemap: sourceMaps ? "external" : false,
+        sourcesContent: sourceMaps,
+        minify: options.minify ?? !sourceMaps,
         treeShaking: true,
+        banner: (isNode && patchForServer) ? {
+            js: `if (typeof globalThis.window === "undefined") {
+    const noop = () => {};
+
+    const createStorageMock = () => {
+      let store = {};
+      return {
+        getItem: (key) => store[key] ?? null,
+        setItem: (key, val) => { store[key] = String(val); },
+        removeItem: (key) => { delete store[key]; },
+        clear: () => { store = {}; },
+        key: (i) => Object.keys(store)[i] ?? null,
+        get length() { return Object.keys(store).length; },
+      };
+    };
+
+    const mockLocalStorage = createStorageMock();
+    const mockSessionStorage = createStorageMock();
+
+    const mockElement = {
+      setAttribute: noop,
+      getAttribute: () => null,
+      removeAttribute: noop,
+      style: {},
+      appendChild: (node) => node,
+      removeChild: (node) => node,
+      addEventListener: noop,
+      removeEventListener: noop,
+      classList: { add: noop, remove: noop, toggle: noop, contains: () => false },
+    };
+
+    const mockDocument = {
+      createElement: () => mockElement,
+      querySelector: () => null,
+      querySelectorAll: () => [],
+      getElementById: () => null,
+      getElementsByTagName: () => [],
+      getElementsByClassName: () => [],
+      cookie: "",
+      body: mockElement,
+      documentElement: mockElement,
+      addEventListener: noop,
+      removeEventListener: noop,
+    };
+
+    const mockNavigator = {
+      userAgent: "Mozilla/5.0 (Server-Side)",
+      language: "en-US",
+      languages: ["en-US"],
+      onLine: true,
+      clipboard: { writeText: async () => {}, readText: async () => "" },
+    };
+
+
+    globalThis.document = globalThis.document || mockDocument;
+    globalThis.navigator = globalThis.navigator || mockNavigator;
+    globalThis.localStorage = globalThis.localStorage || mockLocalStorage;
+    globalThis.sessionStorage = globalThis.sessionStorage || mockSessionStorage;
+
+    globalThis.window = new Proxy(globalThis, {
+      get: (target, prop) => {
+        if (prop in target) return target[prop];
+        if (prop === 'document') return globalThis.document;
+        if (prop === 'navigator') return globalThis.navigator;
+        if (prop === 'localStorage') return globalThis.localStorage;
+        if (prop === 'sessionStorage') return globalThis.sessionStorage;
+        if (prop === 'addEventListener' || prop === 'removeEventListener') return noop;
+        if (prop === 'location') return { href: '', search: '', pathname: '/', origin: '', assign: noop, replace: noop };
+        if (prop === 'matchMedia') return () => ({ matches: false, addEventListener: noop, removeEventListener: noop, dispatchEvent: noop });
+        if (prop === 'getComputedStyle') return () => ({ getPropertyValue: () => '' });
+        if (prop === 'requestAnimationFrame' || prop === 'cancelAnimationFrame') return (cb) => setTimeout(cb, 0);
+        return undefined;
+      }
+    });
+  }`
+        } : undefined,
         plugins: isNode ? [] : [nodeStubPlugin],
         external: isNode
             ? ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime', 'react/jsx-dev-runtime',
@@ -75,7 +215,15 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
                 toFwdSlash(path.join(__dirname, 'rendererTempFiles.js'))
             ],
     });
-    return result.outputFiles[0].text;
+    const jsFile = result.outputFiles.find((file) => path.resolve(file.path) === outfile);
+    const mapFile = result.outputFiles.find((file) => path.resolve(file.path) === `${outfile}.map`);
+    if (!jsFile) {
+        throw new Error(`esbuild did not produce ${outfile}`);
+    }
+    const code = mapFile && options.sourceMapUrl
+        ? `${jsFile.text}\n//# sourceMappingURL=${options.sourceMapUrl}\n`
+        : jsFile.text;
+    return { code, map: mapFile?.text };
 }
 export function findFileUpwards(startDir, relativePath) {
     let dir = path.resolve(startDir);
@@ -107,18 +255,86 @@ function resolveTemplate(appDir, autoPageDir, autoPaging) {
     }
     return nextToCli;
 }
+let htmlPanelBundleCache;
+async function getHtmlPanelClientBundle() {
+    if (!devPanelPath) {
+        throw new Error("[HostJS] DevPanel is not available.");
+    }
+    const mtimeMs = fs.statSync(devPanelPath).mtimeMs;
+    if (htmlPanelBundleCache?.path === devPanelPath &&
+        htmlPanelBundleCache.mtimeMs === mtimeMs) {
+        return htmlPanelBundleCache.bundle;
+    }
+    const clientEntry = `
+    import React from "react";
+    import { hydrateRoot } from "react-dom/client";
+    import DevPanel from ${JSON.stringify(devPanelPath)};
+
+    const panelRoot = document.getElementById("authtics-dev-panel-root");
+    if (panelRoot) {
+      hydrateRoot(panelRoot, React.createElement(DevPanel));
+    }
+  `;
+    const bundle = buildWithEsbuild(clientEntry, path.dirname(devPanelPath), "browser", false, { sourceMaps: false, minify: true }).then(({ code }) => code);
+    htmlPanelBundleCache = {
+        path: devPanelPath,
+        mtimeMs,
+        bundle,
+    };
+    return bundle;
+}
+export async function handleHTML(rawHtml, actuallyShowPanel, configDAT, userDAT, hotReload = false) {
+    const datMatches = configDAT === undefined ||
+        configDAT === userDAT ||
+        (Array.isArray(configDAT) && configDAT.includes(userDAT ?? ""));
+    const usesDevPanel = actuallyShowPanel &&
+        devPanelPath !== null &&
+        datMatches;
+    const configScript = `<script>window.__authtics_config__=` +
+        JSON.stringify({
+            datRestricted: configDAT !== undefined,
+            devMode: usesDevPanel,
+        }) +
+        `;</script>`;
+    let panelContainer = "";
+    let panelClientScript = "";
+    if (usesDevPanel && devPanelPath) {
+        const panelModule = await import(pathToFileURL(devPanelPath).href);
+        const Panel = (panelModule.default ?? panelModule.DevPanel);
+        const panelHtml = renderToString(React.createElement(Panel));
+        panelContainer =
+            `<div id="authtics-dev-panel-root">${panelHtml}</div>`;
+        const clientCode = await getHtmlPanelClientBundle();
+        const safeClientCode = clientCode.replace(/<\/script/gi, "<\\/script");
+        panelClientScript = `<script>${safeClientCode}</script>`;
+    }
+    const injection = [
+        panelContainer,
+        configScript,
+        panelClientScript,
+        hotReload ? HMR_SCRIPT : "",
+    ]
+        .filter(Boolean)
+        .join("\n");
+    const bodyClose = /<\/body\s*>/i;
+    if (bodyClose.test(rawHtml)) {
+        return rawHtml.replace(bodyClose, `${injection}\n$&`);
+    }
+    return `${rawHtml}\n${injection}`;
+}
 function buildHtml(opts) {
-    const { pageHtml, clientCode, devPanelContainer, templatePath, hotReload, fileName, datRestricted, devMode } = opts;
+    const { pageHtml, clientCode, devPanelContainer, templatePath, hotReload, fileName, datRestricted, devMode, renderMode } = opts;
     const configScript = `<script>window.__authtics_config__={datRestricted:${datRestricted ? 'true' : 'false'},devMode:${devMode !== false ? 'true' : 'false'}};</script>`;
     const hmrScript = hotReload ? HMR_SCRIPT : '';
+    const srtwsScript = renderMode === 'srtws' ? SRTWS_CLIENT_SCRIPT : '';
     if (templatePath && fs.existsSync(templatePath)) {
         let template = fs.readFileSync(templatePath, "utf-8");
         const contentTag = /<authtics_host_content\s*\/>/i;
         if (contentTag.test(template)) {
             template = template.replace(contentTag, `<div id="root">${pageHtml}</div>\n    ${devPanelContainer}`);
             template = template.includes("</body>")
-                ? template.replace("</body>", `  ${configScript}${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}\n${hmrScript}</body>`)
-                : template + `\n${configScript}${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}\n${hmrScript}`;
+                ? template.replace("</body>", `  ${configScript}${srtwsScript}${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}\n${hmrScript}</body>`)
+                : template + `\n${configScript}${srtwsScript}${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}\n${hmrScript}`;
             return template;
         }
         console.warn('[authtics] _template.html has no <authtics_host_content /> — using default layout.');
@@ -133,16 +349,24 @@ function buildHtml(opts) {
     <div id="root">${pageHtml}</div>
     ${devPanelContainer}
     ${configScript}
-    ${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}
+    ${renderMode === 'srtws' ? '' : (fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`)}
+    ${srtwsScript}
     ${hmrScript}
   </body>
 </html>`;
 }
-function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath) {
-    if (!fs.existsSync(tempPath) || !fs.existsSync(serverCjsPath))
+function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath, clientBundlePath, serverBundleRequired = true, requiredArtifacts = [], checkArtifactFreshness = true) {
+    if (!fs.existsSync(tempPath) || (serverBundleRequired && !fs.existsSync(serverCjsPath)))
+        return false;
+    if (clientBundlePath && !fs.existsSync(clientBundlePath))
+        return false;
+    if (requiredArtifacts.some((artifactPath) => !fs.existsSync(artifactPath)))
         return false;
     try {
         const cacheMtime = fs.statSync(tempPath).mtimeMs;
+        if (checkArtifactFreshness &&
+            requiredArtifacts.some((artifactPath) => fs.statSync(artifactPath).mtimeMs < cacheMtime))
+            return false;
         if (fs.statSync(tsxPath).mtimeMs > cacheMtime)
             return false;
         if (templatePath && fs.existsSync(templatePath) && fs.statSync(templatePath).mtimeMs > cacheMtime)
@@ -155,62 +379,128 @@ function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPa
         return false;
     }
 }
-const HMR_SCRIPT = `<script>(function(){
-  var reloading=false;
-  window.addEventListener('beforeunload', function() {
-    reloading = true;
-  });
+const HMR_SCRIPT = `<script>
+(function () {
+  var es = null;
+  var disposed = false;
+  var reloading = false;
 
-  var es=new EventSource('/hmr');
-  es.onmessage=function(e){
-    if(e.data==='reload'&&!reloading){
-      reloading=true;
+  function connect() {
+    if (disposed || reloading || es) return;
+
+    es = new EventSource('/hmr');
+
+    es.onopen = function () { };
+
+    es.onmessage = function (event) {
+      if (event.data !== 'reload' || disposed || reloading) return;
+
+      reloading = true;
+
+      es.onmessage = null;
+      es.onerror = null;
       es.close();
+      es = null;
+
       window.location.reload();
+    };
+
+    es.onerror = function () {
+      if (disposed || reloading) return;
+    };
+  }
+
+  function dispose() {
+    if (disposed) return;
+
+    disposed = true;
+
+    if (es) {
+      es.onmessage = null;
+      es.onerror = null;
+      es.close();
+      es = null;
     }
-  };
-  es.onerror=function(){
-    if(!reloading){
-      setTimeout(function(){
-        if(!reloading){
-          reloading=true;
-          window.location.reload();
-        }
-      },1500);
-    }
-  };
-})();</script>`;
-export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir, fileHandler, rmvFileHandler, reqDAT, configDAT) {
+  }
+  window.addEventListener('pagehide', dispose, { once: true });
+  window.addEventListener('unload', dispose, { once: true });
+
+  connect();
+})();
+</script>`;
+export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir, fileHandler, rmvFileHandler, reqDAT, configDAT, renderMode = 'ssr', patchForServer = false, prebuildOnly = false) {
     ensureTempDirs();
     if (!fs.existsSync(tsxPath)) {
         throw new Error(`renderPage: source file not found: ${tsxPath}`);
     }
-    let usesDevPanel = showPanel && devPanelPath !== null;
-    if (usesDevPanel) {
-        let datMatched = configDAT === undefined;
-        if (configDAT && configDAT === reqDAT)
-            datMatched = true;
-        if (configDAT && Array.isArray(configDAT) && configDAT.includes(reqDAT ?? ""))
-            datMatched = true;
-        if (!datMatched)
-            usesDevPanel = false;
-    }
+    const datMatches = configDAT === undefined ||
+        configDAT === reqDAT ||
+        (Array.isArray(configDAT) && configDAT.includes(reqDAT ?? ""));
+    const usesDevPanel = showPanel &&
+        devPanelPath !== null &&
+        datMatches;
+    const enableDiagnostics = usesDevPanel;
     const templatePath = resolveTemplate(appDir, autoPageDir, autoPaging);
-    const tempPath = tempFileForTsx(tsxPath);
-    const serverCjsPath = tempPath.replace(/\.json$/, ".server.cjs");
+    const cacheVariant = [
+        usesDevPanel ? "panel" : "normal",
+        enableDiagnostics ? "mapped" : "fast",
+        compiler,
+    ].join("-");
+    const tempPath = tempFileForTsx(tsxPath, cacheVariant);
+    const separateClientBundle = getBuildStyle() === "super";
+    const clientBundlePath = clientBundleForTsx(tsxPath, cacheVariant);
+    const serverCjsPath = serverBundleForTsx(tsxPath, cacheVariant, tempPath);
+    const ssgHtmlPath = ssgHtmlForTsx(tsxPath, cacheVariant, tempPath);
+    const requiredClientBundlePath = separateClientBundle ? clientBundlePath : undefined;
+    const serverCodeDisabled = renderMode === 'csr' || renderMode === 'srtws';
+    const clientJsUrl = `/${path.basename(tempPath).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`;
+    const clientMapUrl = `${clientJsUrl}.map`;
+    const clientMapPath = `${clientBundlePath}.map`;
+    const serverMapPath = `${serverCjsPath}.map`;
+    const requiredMapArtifacts = enableDiagnostics && renderMode !== "srtws"
+        ? [clientMapPath, ...(!serverCodeDisabled ? [serverMapPath] : [])]
+        : [];
+    if (renderMode === 'ssg' &&
+        isCacheValid(tsxPath, ssgHtmlPath, serverCjsPath, templatePath, devPanelPath, requiredClientBundlePath, !serverCodeDisabled, requiredMapArtifacts, false)) {
+        try {
+            return fs.readFileSync(ssgHtmlPath, "utf-8");
+        }
+        catch {
+        }
+    }
     let clientCode;
+    let clientMap;
     let serverCode;
+    let serverMap;
     let freshWrite = false;
-    if (isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath) && autoPaging) {
+    if (isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath, requiredClientBundlePath, !serverCodeDisabled, requiredMapArtifacts) &&
+        (autoPaging || getBuildTrigger() === "prebuilt")) {
         try {
             const parsed = JSON.parse(readTempFile(tempPath));
-            clientCode = parsed.clientCode;
-            serverCode = fs.readFileSync(serverCjsPath, "utf-8");
+            if (separateClientBundle) {
+                const expectedBundleRef = path.relative(process.cwd(), clientBundlePath);
+                clientCode = parsed.clientBundle === expectedBundleRef
+                    ? fs.readFileSync(clientBundlePath, "utf-8")
+                    : undefined;
+            }
+            else {
+                clientCode = parsed.clientCode;
+            }
+            if (enableDiagnostics && renderMode !== "srtws") {
+                clientMap = fs.readFileSync(clientMapPath, "utf-8");
+                if (!serverCodeDisabled)
+                    serverMap = fs.readFileSync(serverMapPath, "utf-8");
+            }
+            serverCode = serverCodeDisabled ? undefined : fs.readFileSync(serverCjsPath, "utf-8");
         }
         catch {
+            clientCode = undefined;
+            clientMap = undefined;
+            serverCode = undefined;
+            serverMap = undefined;
         }
     }
-    if (!clientCode || !serverCode) {
+    if (clientCode === undefined || (clientCode === "" && renderMode !== "srtws") || (!serverCode && !serverCodeDisabled)) {
         const virtualServer = `
       ${usesDevPanel ? `import DevPanel from ${JSON.stringify(devPanelPath)};` : ""}
       import Page from ${JSON.stringify(tsxPath)};
@@ -219,49 +509,109 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
     `;
         const virtualClient = `
       import React from "react";
-      import { hydrateRoot } from "react-dom/client";
+      import { ${renderMode === 'csr' ? 'createRoot' : 'hydrateRoot'} } from "react-dom/client";
       ${usesDevPanel ? `import DevPanel from ${JSON.stringify(devPanelPath)};` : ""}
       import Page from ${JSON.stringify(tsxPath)};
 
       ${usesDevPanel ? `
       const panelEl = document.getElementById("authtics-dev-panel-root");
-      if (panelEl) hydrateRoot(panelEl, React.createElement(DevPanel));
+      if (panelEl) ${renderMode === 'csr' ? `createRoot(panelEl).render(React.createElement(DevPanel));` : `hydrateRoot(panelEl, React.createElement(DevPanel));`}
       ` : ""}
       const rootEl = document.getElementById("root");
-      if (rootEl) hydrateRoot(rootEl, React.createElement(Page));
+      if (rootEl) {
+        ${renderMode === 'csr'
+            ? `createRoot(rootEl).render(React.createElement(Page));`
+            : `hydrateRoot(rootEl, React.createElement(Page));`}
+      }
     `;
         if (compiler === 'esbuild') {
-            serverCode = await buildWithEsbuild(virtualServer, process.cwd(), 'node');
-            clientCode = await buildWithEsbuild(virtualClient, process.cwd(), 'browser');
+            if (!serverCodeDisabled) {
+                const builtServer = await buildWithEsbuild(virtualServer, process.cwd(), 'node', patchForServer, {
+                    sourceMaps: enableDiagnostics,
+                    minify: !enableDiagnostics,
+                    outfile: serverCjsPath,
+                    sourceMapUrl: path.basename(serverMapPath),
+                });
+                serverCode = builtServer.code;
+                serverMap = builtServer.map;
+            }
+            if (renderMode !== 'srtws') {
+                const built = await buildWithEsbuild(virtualClient, process.cwd(), 'browser', patchForServer, {
+                    sourceMaps: enableDiagnostics,
+                    minify: !enableDiagnostics,
+                    outfile: clientBundlePath,
+                    sourceMapUrl: clientMapUrl,
+                });
+                clientCode = built.code;
+                clientMap = built.map;
+            }
+            else {
+                clientCode = "";
+            }
+        }
+        if (serverCode)
+            await fs.promises.writeFile(serverCjsPath, serverCode, "utf-8");
+        if (separateClientBundle) {
+            await fs.promises.writeFile(clientBundlePath, clientCode ?? "", "utf-8");
+            writeTempFile(tempPath, JSON.stringify({
+                clientBundle: path.relative(process.cwd(), clientBundlePath),
+            }));
+        }
+        else {
+            writeTempFile(tempPath, JSON.stringify({ clientCode }));
+        }
+        if (serverMap)
+            await fs.promises.writeFile(serverMapPath, serverMap, "utf-8");
+        if (clientMap)
+            await fs.promises.writeFile(clientMapPath, clientMap, "utf-8");
+        if (requiredMapArtifacts.includes(clientMapPath) && !clientMap) {
+            throw new Error(`[HostJS] Source-map build did not produce ${clientMapPath}`);
+        }
+        if (requiredMapArtifacts.includes(serverMapPath) && !serverMap) {
+            throw new Error(`[HostJS] Source-map build did not produce ${serverMapPath}`);
         }
-        await fs.promises.writeFile(serverCjsPath, serverCode || "", "utf-8");
-        writeTempFile(tempPath, JSON.stringify({ clientCode }));
         freshWrite = true;
     }
-    fileHandler ? fileHandler(clientCode || "", `/${path.basename(tempPath).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`) : null;
-    const absoluteServerPath = path.resolve(serverCjsPath);
-    delete customRequire.cache[absoluteServerPath];
-    const serverModule = customRequire(absoluteServerPath);
-    const exports = serverModule.__esModule ? serverModule.default : serverModule;
-    const PageComponent = exports?.default?.default ??
-        exports?.default ??
-        exports?.Page ??
-        exports?.page ??
-        (typeof exports === 'function' ? exports : null);
-    const DevPanelComponent = usesDevPanel ? (exports.DevPanel ?? null) : null;
-    if (!PageComponent) {
-        throw new Error(`renderPage: no default export found in ${tsxPath}`);
-    }
-    const pageHtml = renderToString(React.createElement(PageComponent));
-    const devPanelHtml = DevPanelComponent
-        ? renderToString(React.createElement(DevPanelComponent))
-        : "";
-    const devPanelContainer = usesDevPanel
-        ? `<div id="authtics-dev-panel-root">${devPanelHtml}</div>`
+    if (clientCode !== undefined)
+        fileHandler?.(clientCode, clientJsUrl);
+    if (clientMap !== undefined)
+        fileHandler?.(clientMap, clientMapUrl);
+    if (prebuildOnly && renderMode !== 'ssg')
+        return "";
+    let pageHtml = "";
+    let devPanelContainer = usesDevPanel
+        ? `<div id="authtics-dev-panel-root"></div>`
         : "";
-    return buildHtml({ pageHtml, clientCode: clientCode || "", devPanelContainer, templatePath, hotReload,
+    if (!serverCodeDisabled) {
+        const absoluteServerPath = path.resolve(serverCjsPath);
+        delete customRequire.cache[absoluteServerPath];
+        const serverModule = customRequire(absoluteServerPath);
+        const exports = serverModule.__esModule ? serverModule.default : serverModule;
+        const PageComponent = exports?.default?.default ??
+            exports?.default ??
+            exports?.Page ??
+            exports?.page ??
+            (typeof exports === 'function' ? exports : null);
+        const DevPanelComponent = usesDevPanel ? (exports.DevPanel ?? null) : null;
+        if (!PageComponent) {
+            throw new Error(`renderPage: no default export found in ${tsxPath}`);
+        }
+        pageHtml = renderToString(React.createElement(PageComponent));
+        const devPanelHtml = DevPanelComponent
+            ? renderToString(React.createElement(DevPanelComponent))
+            : "";
+        devPanelContainer = usesDevPanel
+            ? `<div id="authtics-dev-panel-root">${devPanelHtml}</div>`
+            : "";
+    }
+    const finalHtml = buildHtml({ pageHtml, clientCode: clientCode || "", devPanelContainer, templatePath, hotReload,
         fileName: `/${path.basename(tempPath).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`,
         datRestricted: configDAT !== undefined,
         devMode: showPanel,
+        renderMode
     });
+    if (renderMode === 'ssg') {
+        await fs.promises.writeFile(ssgHtmlPath, finalHtml, "utf-8");
+    }
+    return finalHtml;
 }