@bananacool467/authtics-host 0.2.5 → 0.2.6

package/README.md

@@ -1,17 +1,11 @@
 # Authtics Host
 
-Version 0.2.5, License: MIT
+Version 0.2.6, License: MIT
 
-Authtics Host is a web framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild. This is not to be confused with auth platforms.
+Authtics Host is a web framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering), SSG (Static Site Generation), CSR (Client-Side Rendering) and SRTWS (Site Rendering Through WebSockets) and uses **Esbuild**. This is not to be confused with auth platforms.
 
 **(NOTE: The short name for Authtics Host is HostJS or Host.js)**
 
-**(From the Developer: I am having 1 small issue:**
-
-1. **Web Socket Connections** are **not showing** in the DevPanel's Network tab
-
-**I need help fixing that)**
-
 ## Setting Up
 
 To get **Authtics Host** use:
@@ -51,7 +45,7 @@ import { defineConfig } from "@bananacool467/authtics-host";
 
 export default defineConfig({
   port: 8000,
-  ssr: true,
+  renderType: 'ssr',
   devMode: true,
   autoFile: true,
   autoPage: true,
@@ -94,7 +88,7 @@ import { defineConfig } from "@bananacool467/authtics-host";
 
 export default defineConfig({
   port: 8000,
-  ssr: true,
+  renderType: 'ssr',
   devMode: true,
   autoFile: false,
   autoPage: false
@@ -154,7 +148,7 @@ Then when you run your project, you will get a page just saying **"Hello, World!
 
 ## About The Developer Panel
 
-The Developer Panel is what you could use to help you debug your code. The Developer Panel has **7 tabs**:
+The Developer Panel is what you could use to help you debug your code. The Developer Panel has **8 tabs**:
 
 * **Console** — Shows current logs.
 * **Route** — Shows information about the current route.
@@ -163,6 +157,7 @@ The Developer Panel is what you could use to help you debug your code. The Devel
 * **Client Info** — Shows information about your client's User Agent, OS **(Operating System)** and FPS **(Frames Per Second)**.
 * **About Host** — Shows the current version of *Authtics Host*.
 * **Server Info** — Shows how much heap was used and how much CPU was used on the server and how much requests there were and how much users are currently on the site and how long the site has been up.
+* **Panel Customization** — Customize the dev panel.
 
 The information the Developer Panel shows outside of the tabs is just your **DAT** (Developer Access Token).
 
@@ -186,6 +181,17 @@ and then create a file like `paused.tsx` and then inside `App.tsx`, import `Paus
 ```
 and if your using `autoPaging` then you just create a file named `_paused.tsx`.
 
+## Page Patching
+
+Pages may fail to render in SSR if it uses `window` instead of assigning it to a **useState** while in a **useEffect** in *React*
+
+You can fix this by adding this to your config file:
+```json
+"patchForSsr": true
+```
+
+It makes a fake `window`, `document`, etc for SSR when building for Node. Which fixes the issue.
+
 ## App APIs
 
 You can add APIs like `get`, `post`, `del` and `put`.
@@ -203,32 +209,10 @@ Hello!
 
 ## Notes about Authtics Host
 
-Since Authtics Host is SSR, stuff like NPM packages that uses **Browser APIs** (e.g., `window`, `document`) will cause errors.
-The developer (The one that is writing this README) may add a feature where Authtics Host converts:
-```tsx
-export function Component() {
-  return (
-    <p>{window.__status_code__}</p>
-  )
-}
-```
-To:
-```tsx
-import { useState, useEffect } from 'react';
-export function Component() {
-  const [__window, __set_window] = useState<any>(null);
-  useEffect(() => {
-    if (window) __set_window(window);
-  }, []);
-  return (
-    <p>{__window.__status_code__}</p>
-  )
-}
-```
+The developer might redesign the UI for the DevPanel using [UI Tools](https://npmjs.com/package/@bananakitssu/ui-tools).
 
-The developer might also redesign the UI for the DevPanel using [UI Tools](https://npmjs.com/package/@bananakitssu/ui-tools).
-
-And also maybe, add Developer Panel customization.
+> **Warning**:
+> SRTWS may not work properly. It may render pages, but not run scripts.
 
 > **Warning**:
 > Asking AI about HostJS is not recommended, it will give an Auth platform and call HostJS/Authtics Host a typo, say it doesn't exist, say it was renamed, it is private, or the account doesn't exist. Or if it knows, it may swap your server script with regular **Node.js**/**ExpressJS**/**Next.js** or use **Next.js-like** code because this framework is **Next.js-inspired**

package/dist/cli.js

@@ -4,12 +4,14 @@ import { createJiti } from "jiti";
 import path from "node:path";
 import fs from "node:fs";
 import url from "node:url";
-import { renderPage } from "./renderEngine.js";
+import { renderPage, handleSrtwsConnection } from "./renderEngine.js";
+import { tempFileForTsx } from "./rendererTempFiles.js";
 let config_ = {};
 let uptime = 0;
 let totalRequests = 0;
 let users = 0;
 let usersPaused = false;
+let srtws;
 const jiti = createJiti(import.meta.url);
 const routes = new Map();
 const __filename = url.fileURLToPath(import.meta.url);
@@ -277,7 +279,7 @@ export default class App {
                 });
             }
         });
-        this.post("/__authtics_host_apis__/get-is-ssr", async (req, res) => {
+        this.post("/__authtics_host_apis__/get-render-type", async (req, res) => {
             let datMatched = false;
             if (config_.dat && config_.dat == req.dat)
                 datMatched = true;
@@ -286,7 +288,7 @@ export default class App {
             if (datMatched) {
                 res.writeHead(200, { "Content-Type": "application/json" });
                 res.end(JSON.stringify({
-                    isSsr: config_.ssr
+                    renderType: config_.renderType
                 }));
             }
         });
@@ -421,6 +423,7 @@ async function start() {
     catch {
     }
     const PORT = config.port ?? 3000;
+    const renderType = config.renderType ?? 'ssr';
     const showPanel = config.devMode !== false;
     const autoPaging = config.autoPage !== false;
     const compiler = 'esbuild';
@@ -565,7 +568,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, (p) => { routes.delete(`GET:${p}`); }, req.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.dat, config_.dat, config_.renderType, config_.patchForSsr);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -588,7 +591,7 @@ async function start() {
                                         res.setHeader("Content-Type", "application/javascript");
                                         res.end(f);
                                     });
-                                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType);
                                 html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                                 res.setHeader("Content-Type", "text/html");
                                 return res.end(html);
@@ -618,7 +621,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -641,7 +644,7 @@ async function start() {
                                         res.setHeader("Content-Type", "application/javascript");
                                         res.end(f);
                                     });
-                                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType);
                                 html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                                 res.setHeader("Content-Type", "text/html");
                                 return res.end(html);
@@ -682,6 +685,9 @@ async function start() {
             req.on('close', () => { hmrClients.delete(res); users--; });
             return;
         }
+        if (pathname === '/__authtics_srtws__') {
+            return;
+        }
         if (Array.isArray(config_.dat) && !config_.dat.includes(req.dat) && usersPaused) {
             if (autoPaging) {
                 const pausedTsxFile = pagesDir ? path.join(pagesDir, "_paused.tsx") : undefined;
@@ -692,7 +698,7 @@ async function start() {
                                 res.setHeader("Content-Type", "application/javascript");
                                 res.end(f);
                             });
-                        }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                        }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                         html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                         res.setHeader("Content-Type", "text/html");
                         return res.end(html);
@@ -715,7 +721,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -745,7 +751,7 @@ async function start() {
                                 res.setHeader("Content-Type", "application/javascript");
                                 res.end(f);
                             });
-                        }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                        }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                         html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                         res.setHeader("Content-Type", "text/html");
                         return res.end(html);
@@ -768,7 +774,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -826,7 +832,7 @@ async function start() {
                             res.setHeader("Content-Type", "application/javascript");
                             res.end(f);
                         });
-                    }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                    }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                     res.setHeader("Content-Type", "text/html");
                     res.writeHead(404);
                     html = html.replace("<script>", "<script>\nwindow.__status_code__ = 404;");
@@ -845,6 +851,10 @@ async function start() {
         const urlPath = pathname === "/" ? "/index" : pathname;
         const tsxPath = pagesDir ? path.join(pagesDir, `${urlPath}.tsx`) : undefined;
         const htmlPath = pagesDir ? path.join(pagesDir, `${urlPath}.html`) : undefined;
+        if (fs.existsSync(tempFileForTsx(tsxPath || ""))) {
+            const { default: PageComponent } = await import(tempFileForTsx(tsxPath || "").replace(/\.json$/, ".server.cjs"));
+            srtws = handleSrtwsConnection(server, PageComponent);
+        }
         if (tsxPath && fs.existsSync(tsxPath)) {
             try {
                 const html = await renderPage(tsxPath, url, actuallyShowPanel, compiler, hotReload, autoPaging, config.autoPageDir, (routes.get("APP_TSX") || ""), (f, p) => {
@@ -852,7 +862,7 @@ async function start() {
                         res.setHeader("Content-Type", "application/javascript");
                         res.end(f);
                     });
-                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                 res.setHeader("Content-Type", "text/html");
                 return res.end(html);
             }
@@ -876,7 +886,7 @@ async function start() {
                             res.setHeader("Content-Type", "application/javascript");
                             res.end(f);
                         });
-                    }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                    }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                     res.setHeader("Content-Type", "text/html");
                     return res.end(html);
                 }
@@ -895,7 +905,7 @@ async function start() {
                         res.setHeader("Content-Type", "application/javascript");
                         res.end(f);
                     });
-                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
+                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat, config_.renderType, config_.patchForSsr);
                 res.setHeader("Content-Type", "text/html");
                 res.writeHead(404);
                 html = html.replace("<script>", "<script>\nwindow.__status_code__ = 404;");

package/dist/config.d.ts

@@ -1,9 +1,10 @@
 export interface AuthticsConfig {
     port?: number;
     ssr?: boolean;
+    renderType?: 'ssr' | 'csr' | 'ssg' | 'srtws';
     dir?: string;
     devMode?: boolean;
-    compilerType?: 'esbuild' | 'babel';
+    compilerType?: 'esbuild';
     hotReload?: boolean;
     dat?: string | string[];
     showError?: boolean;
@@ -12,5 +13,6 @@ export interface AuthticsConfig {
     autoFile?: boolean;
     autoFileDir?: string;
     hasPausedRoute?: boolean;
+    patchForSsr?: boolean;
 }
 export declare function defineConfig(config: AuthticsConfig): AuthticsConfig;

package/dist/config.js

@@ -7,8 +7,14 @@ export function defineConfig(config) {
         config.showError = true;
     if (config.compilerType == undefined)
         config.compilerType = 'esbuild';
+    if (config.patchForSsr === undefined)
+        config.patchForSsr = false;
     if (config.ssr == undefined)
         config.ssr = true;
+    else
+        console.warn("Using \"ssr\" in Authtics Host Config is deprecated. Use \"renderType\" instead.");
+    if (config.renderType == undefined)
+        config.renderType = config.ssr ? 'ssr' : 'csr';
     if (config.port == undefined || config.port == 0)
         config.port = 3000;
     if (config.devMode == undefined)

package/dist/devPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, TriangleAlert, Eye, Zap, Power } from 'lucide-react';
+import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, Cog, TriangleAlert, Eye, Zap, Power, Check as Tick } from 'lucide-react';
 function getCallerSource() {
     try {
         const stack = new Error().stack ?? '';
@@ -349,8 +349,13 @@ export default function DevPanel() {
     const [clientInfoOpen, setClientInfoOpen] = useState(false);
     const [aboutHostOpen, setAboutHostOpen] = useState(false);
     const [serverInfoOpen, setServerInfoOpen] = useState(false);
+    const [panelCustomOpen, setPanelCustomOpen] = useState(false);
     const [shutdown, setShutdown] = useState(false);
     const [shuttingDown, setShuttingDown] = useState(false);
+    const [panelColor, setPanelColor] = useState({
+        background: '#111',
+        border: '#333'
+    });
     const [hasIssue, setHasIssue] = useState(false);
     const [ping__, setPing__] = useState(0);
     const [networkFetches, setNetworkFetches] = useState([]);
@@ -363,7 +368,7 @@ export default function DevPanel() {
     const [hostName, setHostName] = useState(undefined);
     const [protocol, setProtocol] = useState(undefined);
     const [path, setPath] = useState(undefined);
-    const [isSsr, setIsSsr] = useState(false);
+    const [renderType, setRenderType] = useState("???");
     const datRestrictionMissingRef = useRef(true);
     const cpuUsage = useRef(0);
     const heapUsage = useRef(0);
@@ -465,15 +470,15 @@ export default function DevPanel() {
             }
             return "";
         };
-        const isSSR = async () => {
-            const resp = await fetch('/__authtics_host_apis__/get-is-ssr', {
+        const getRenderType = async () => {
+            const resp = await fetch('/__authtics_host_apis__/get-render-type', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({})
             });
             if (resp.status === 200) {
                 const data = await resp.json();
-                setIsSsr(data.isSsr);
+                setRenderType(data.renderType);
             }
         };
         const getUsage = async () => {
@@ -561,7 +566,7 @@ export default function DevPanel() {
                     getPath();
                     getCompilerType();
                     getHttpVersion();
-                    isSSR();
+                    getRenderType();
                     userSettings();
                     getHostVersion();
                     setInterval(() => {
@@ -683,6 +688,16 @@ export default function DevPanel() {
         };
         try {
             const existingToken = cookie.get('dat');
+            const panelColor = cookie.get('panelColor');
+            if (panelColor) {
+                setPanelColor({
+                    background: panelColor.split('|')[0],
+                    border: panelColor.split('|')[1]
+                });
+            }
+            else {
+                cookie.set('panelColor', '#111|#333');
+            }
             if (existingToken) {
                 setToken(existingToken);
                 let length_ = existingToken?.split('');
@@ -1056,7 +1071,7 @@ export default function DevPanel() {
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Renderer Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: isSsr ? 'SSR (Server-Side Rendering)' : 'CSR (Client-Side Rendering)' })] }), _jsxs("div", { style: {
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Renderer Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: renderType === "ssr" ? 'SSR (Server-Side Rendering)' : renderType === "csr" ? 'CSR (Client-Side Rendering)' : renderType === "ssg" ? 'SSG (Static Site Generation)' : '???' })] }), _jsxs("div", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
@@ -1099,7 +1114,46 @@ export default function DevPanel() {
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "OS" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: getOS() })] }), _jsx(Sparkline, { data: fpsHistory, color: frames.current < 30 ? '#e53e3e' : frames.current < 60 ? '#d97706' : '#16a34a', label: "FPS", unit: " frames" })] })] })) : aboutHostOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "OS" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: getOS() })] }), _jsx(Sparkline, { data: fpsHistory, color: frames.current < 30 ? '#e53e3e' : frames.current < 60 ? '#d97706' : '#16a34a', label: "FPS", unit: " frames" })] })] })) : panelCustomOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setPanelCustomOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Cog, { size: 12, color: "#3b82f6" }), " Panel Configuration"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Colors" }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        alignItems: 'center'
+                                                    }, children: [_jsxs("div", { style: { background: '#16a34a', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #15803d', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#16a34a',
+                                                                    border: '#15803d'
+                                                                });
+                                                                cookie.set('panelColor', '#16a34a|#15803d');
+                                                            }, children: [panelColor.background === '#16a34a' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Green" })] }), _jsxs("div", { style: { background: '#111', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #333', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#111',
+                                                                    border: '#333'
+                                                                });
+                                                                cookie.set('panelColor', '#111|#333');
+                                                            }, children: [panelColor.background === '#111' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Black" })] }), _jsxs("div", { style: { background: '#f7c623', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #d9ad1e', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#f7c623',
+                                                                    border: '#d9ad1e'
+                                                                });
+                                                                cookie.set('panelColor', '#f7c623|#d9ad1e');
+                                                            }, children: [panelColor.background === '#f7c623' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Yellow" })] }), _jsxs("div", { style: { background: '#3bb0ff', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #3290cf', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#3bb0ff',
+                                                                    border: '#3290cf'
+                                                                });
+                                                                cookie.set('panelColor', '#3bb0ff|#3290cf');
+                                                            }, children: [panelColor.background === '#3bb0ff' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Blue" })] })] })] })] })) : aboutHostOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                                 padding: '6px 8px',
                                                 borderBottom: '1px solid #ddd',
                                                 background: '#fff',
@@ -1169,7 +1223,7 @@ export default function DevPanel() {
                                                         border: '1px solid #eee',
                                                         fontSize: '12px',
                                                         color: '#333',
-                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total current users" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: users })] }), _jsx(Sparkline, { data: cpuUsageHistory, color: "#3b82f6", label: "CPU Usage", unit: "" }), _jsx(Sparkline, { data: heapUsageHistory, color: "#3b82f6", label: "Heap Used", unit: heapResult })] })] })) : !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px', gap: '4px', display: 'flex', flexDirection: 'column' }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), logs.length > 0 && (_jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: logs.length }))] }), _jsxs(PanelButton, { onClick: () => setRouteOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsxs("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }, children: [datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" }), pathName] })] }), _jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsx(PanelButton, { onClick: () => setNetworkOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] }) }), _jsxs(PanelButton, { onClick: () => setClientInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setAboutHostOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About HostJS"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setServerInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] })] }), _jsxs("div", { style: {
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total current users" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: users })] }), _jsx(Sparkline, { data: cpuUsageHistory, color: "#3b82f6", label: "CPU Usage", unit: "" }), _jsx(Sparkline, { data: heapUsageHistory, color: "#3b82f6", label: "Heap Used", unit: heapResult })] })] })) : !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px', gap: '4px', display: 'flex', flexDirection: 'column' }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), logs.length > 0 && (_jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: logs.length }))] }), _jsxs(PanelButton, { onClick: () => setRouteOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsxs("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }, children: [datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" }), pathName] })] }), _jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsx(PanelButton, { onClick: () => setPanelCustomOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Cog, { size: 12, color: "#3b82f6" }), " Panel Customization"] }) }), _jsx(PanelButton, { onClick: () => setNetworkOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] }) }), _jsxs(PanelButton, { onClick: () => setClientInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setAboutHostOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About HostJS"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setServerInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] })] }), _jsxs("div", { style: {
                                                 padding: '6px 8px',
                                                 borderTop: '1px solid #ddd',
                                                 background: '#fff',
@@ -1229,8 +1283,8 @@ export default function DevPanel() {
                             alignItems: 'center',
                             padding: '8px 12px',
                             borderRadius: hasIssue ? '100px' : '10px',
-                            background: hasIssue ? '#ba4e4e' : '#111',
-                            border: hasIssue ? '1px solid #991b1b' : '1px solid #333',
+                            background: hasIssue ? '#ba4e4e' : panelColor.background,
+                            border: hasIssue ? '1px solid #991b1b' : `1px solid ${panelColor.border ?? '#333'}`,
                             boxShadow: hasIssue
                                 ? '0 4px 20px rgba(220,38,38,0.2)'
                                 : '0 4px 20px rgba(0,0,0,0.4)',

package/dist/renderEngine.d.ts

@@ -1,3 +1,6 @@
+import React from "react";
+export declare function handleSrtwsConnection(server: any, PageComponent: React.ComponentType<any>): 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 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, patchForSsr?: boolean): Promise<string>;

package/dist/renderEngine.js

@@ -7,6 +7,32 @@ import { renderToString } from "react-dom/server";
 import { tempFileForTsx, writeTempFile, readTempFile, ensureTempDirs, } from "./rendererTempFiles.js";
 import { createRequire } from "node:module";
 const customRequire = createRequire(import.meta.url);
+import { WebSocketServer } from "ws";
+export function handleSrtwsConnection(server, PageComponent) {
+    const wss = new WebSocketServer({ noServer: true });
+    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 = () => {
+            const pageHtml = renderToString(React.createElement(PageComponent));
+            ws.send(JSON.stringify({ type: "DOM", html: pageHtml }));
+        };
+        ws.on("message", () => {
+            try {
+                renderAndSend();
+            }
+            catch (err) {
+                console.error("[authtics] SRTWS error:", err);
+            }
+        });
+    });
+    return true;
+}
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const NODE_BUILTINS = [
@@ -23,6 +49,24 @@ 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') {
+      const root = document.getElementById('root');
+      if (root) root.innerHTML = msg.html;
+    }
+  };
+
+  ws.onopen = function() {
+    ws.send(JSON.stringify({}));
+  };
+})();
+</script>`;
 const nodeStubPlugin = {
     name: 'browser-node-stub',
     setup(build) {
@@ -42,7 +86,7 @@ const nodeStubPlugin = {
         }));
     },
 };
-async function buildWithEsbuild(virtualContent, resolveDir, platform) {
+async function buildWithEsbuild(virtualContent, resolveDir, platform, patchForSsr = false) {
     const toFwdSlash = (p) => p.split(path.sep).join('/');
     const isNode = platform === 'node';
     const result = await esbuild.build({
@@ -56,10 +100,86 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
         format: isNode ? 'cjs' : 'iife',
         platform,
         jsx: 'automatic',
-        sourcemap: isNode ? false : false,
+        sourcemap: false,
         target: isNode ? ['node18'] : ['es2020'],
         minify: true,
         treeShaking: true,
+        banner: (isNode && patchForSsr) ? {
+            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',
@@ -108,17 +228,18 @@ function resolveTemplate(appDir, autoPageDir, autoPaging) {
     return nextToCli;
 }
 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,7 +254,8 @@ 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>`;
@@ -180,7 +302,7 @@ const HMR_SCRIPT = `<script>(function(){
     }
   };
 })();</script>`;
-export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir, fileHandler, rmvFileHandler, reqDAT, configDAT) {
+export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir, fileHandler, rmvFileHandler, reqDAT, configDAT, renderMode = 'ssr', patchForSsr = false) {
     ensureTempDirs();
     if (!fs.existsSync(tsxPath)) {
         throw new Error(`renderPage: source file not found: ${tsxPath}`);
@@ -198,6 +320,14 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
     const templatePath = resolveTemplate(appDir, autoPageDir, autoPaging);
     const tempPath = tempFileForTsx(tsxPath);
     const serverCjsPath = tempPath.replace(/\.json$/, ".server.cjs");
+    const ssgHtmlPath = tempPath.replace(/\.json$/, ".ssg.html");
+    if (renderMode === 'ssg' && isCacheValid(tsxPath, ssgHtmlPath, serverCjsPath, templatePath, devPanelPath)) {
+        try {
+            return fs.readFileSync(ssgHtmlPath, "utf-8");
+        }
+        catch {
+        }
+    }
     let clientCode;
     let serverCode;
     let freshWrite = false;
@@ -210,7 +340,8 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
         catch {
         }
     }
-    if (!clientCode || !serverCode) {
+    const isCsr = renderMode === 'csr';
+    if (!clientCode || (!serverCode && !isCsr)) {
         const virtualServer = `
       ${usesDevPanel ? `import DevPanel from ${JSON.stringify(devPanelPath)};` : ""}
       import Page from ${JSON.stringify(tsxPath)};
@@ -219,49 +350,71 @@ 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 (!isCsr)
+                serverCode = await buildWithEsbuild(virtualServer, process.cwd(), 'node', patchForSsr);
+            if (renderMode !== 'srtws') {
+                clientCode = await buildWithEsbuild(virtualClient, process.cwd(), 'browser');
+            }
+            else {
+                clientCode = "";
+            }
         }
-        await fs.promises.writeFile(serverCjsPath, serverCode || "", "utf-8");
+        if (serverCode)
+            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>`
+    let pageHtml = "";
+    let devPanelContainer = usesDevPanel
+        ? `<div id="authtics-dev-panel-root"></div>`
         : "";
-    return buildHtml({ pageHtml, clientCode: clientCode || "", devPanelContainer, templatePath, hotReload,
+    if (!isCsr) {
+        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;
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.2.5",
-  "description": "Authtics Host, A Next.js-inspired SSR framework for Node.js with TypeScript and JSX support.",
+  "version": "0.2.6",
+  "description": "Authtics Host, A Next.js-inspired web framework for Node.js and React with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "sideEffects": false,
   "bin": {
-    "hostjs": "dist/cli.js"
+    "host": "dist/cli.js"
   },
   "exports": {
     ".": "./dist/index.js"
@@ -25,6 +25,9 @@
     "host",
     "server-side-rendering",
     "ssr",
+    "ssg",
+    "csr",
+    "srtws",
     "framework",
     "nodejs",
     "typescript",
@@ -44,26 +47,28 @@
   "author": "bananacool467",
   "license": "MIT",
   "dependencies": {
-    "esbuild": "^0.27.3",
+    "esbuild": "^0.28.2",
     "jiti": "^2.6.1",
     "lucide-react": "^0.577.0",
-    "prismjs": "^1.30.0"
+    "prismjs": "^1.30.0",
+    "ws": "^8.21.3"
   },
   "peerDependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__preset-env": "^7.10.0",
     "@types/node": "^22.13.11",
     "@types/prismjs": "^1.26.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/babel__core": "^7.20.5",
-    "@types/babel__preset-env": "^7.10.0",
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5"
+    "@types/ws": "^8.18.1"
   }
 }