@bananacool467/authtics-host 0.1.2 → 0.1.5

package/README.md

@@ -1,6 +1,6 @@
 # Authtics Host
 
-Version 0.1.2
+Version 0.1.5
 License: MIT
 
 Authtics Host is a framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild.
@@ -151,19 +151,29 @@ Then when you run your project, you will get a page just saying **"Hello, World!
 
 The Developer Panel is what you could use to help you debug your code. The Developer Panel has **7 tabs**:
 
-**Console** — Shows current logs
-**Route** — Shows information about the current route
-**Webpage Info** — Shows information about the website/webpage
-**Network** — Shows the current ping and shows sent fetches from the client and shows received from the server after fetching
-**Client Info** — Shows information about your client's User Agent, OS and FPS
-**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
+**Console** — Shows current logs.
+**Route** — Shows information about the current route.
+**Webpage Info** — Shows information about the website/webpage.
+**Network** — Shows the current ping and shows sent fetches from the client and shows received from the server after fetching.
+**Client Info** — Shows information about your client's User Agent, OS and FPS.
+**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.
 
-The information the Developer Panel shows is just your **DAT** (Developer Access Token).
+The information the Developer Panel shows outside of the tabs is just your **DAT** (Developer Access Token).
 
 **(NOTE: If you do not set DAT restriction (Which will be explained on how to set it up in the next section), you will only get access to the Console and Network tabs)**
 
-## Developer Panel Notes And Warnings And DAT (Developer Access Token)
+The Developer Panel also have remote buttons:
+
+**Restart App** — Restarts the website.
+**Shut Down App** — Stops the website.
+**Pause Users**/**Resume Users** — Stops users from reaching a site and they will get a JSON error message like this when visiting if Pause Users is on:
+```json
+{ "message": "unhandled request" }
+```
+unless you click **Resume Users**.
+
+## Developer Panel Notes And DAT (Developer Access Token)
 
 A DAT (Developer Access Token) is your token that is used to access the Developer Panel.
 
@@ -185,7 +195,7 @@ But if you have multiple DATs, then use:
 
 There isn't any limit of DATs you can add.
 
-**(Warning: Make sure `devMode` is set to `false` in production. If `devMode` is on and DAT restriction is disabled, anyone can access the restart and shutdown endpoints.)**
+**(NOTE: Adding your DAT will give you access to Restart and Shutdown and Pause/Resume Users features)**
 
 ## Contacting The Developer Of Authtics Host
 

package/dist/cli.js

@@ -9,6 +9,7 @@ let config_ = {};
 let uptime = 0;
 let totalRequests = 0;
 let users = 0;
+let usersPaused = false;
 const jiti = createJiti(import.meta.url);
 const routes = new Map();
 const __filename = url.fileURLToPath(import.meta.url);
@@ -96,6 +97,48 @@ export default class App {
     server;
     constructor() {
         this.server = start();
+        this.get('/failed-to-handle', async (req, res) => {
+            if (!usersPaused) {
+                res.writeHead(302, {
+                    'Location': '/'
+                });
+                res.end();
+                return;
+            }
+            ;
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({
+                message: "unhandled request"
+            }));
+        });
+        this.post('/__authtics_host_apis__/set-users-paused', async (req, res) => {
+            const reqBody = (await getJsonBody(req));
+            let datMatched = false;
+            if (config_.dat && config_.dat == reqBody.dat)
+                datMatched = true;
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(reqBody.dat))
+                datMatched = true;
+            if (datMatched) {
+                usersPaused = reqBody.paused;
+                res.writeHead(200, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({
+                    message: "ok"
+                }));
+            }
+        });
+        this.post('/__authtics_host_apis__/is-users-paused', async (req, res) => {
+            const reqBody = (await getJsonBody(req));
+            let datMatched = false;
+            if (config_.dat && config_.dat == reqBody.dat)
+                datMatched = true;
+            if (config_.dat && Array.isArray(config_.dat) && config_.dat.includes(reqBody.dat))
+                datMatched = true;
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({
+                paused: (datMatched ? false : usersPaused),
+                realInfo: usersPaused
+            }));
+        });
         this.post('/__authtics_host_apis__/get-dat-restriction-missing', async (req, res) => {
             const reqBody = (await getJsonBody(req));
             let datMatched = false;
@@ -266,8 +309,26 @@ export default class App {
                 const pathname = reqBody.pathname;
                 const pagesDir = config_.autoPage === true ? path.join(process.cwd(), config_.autoPageDir || "") : undefined;
                 const safePath = path.normalize(pathname).replace(/^(\.\.[\/\\])+/, '');
-                const filePath = pagesDir ? path.join(pagesDir, safePath + ".tsx") : undefined;
-                const fileExists = filePath ? fs.existsSync(filePath) : true;
+                let filePath = pagesDir ? path.join(pagesDir, (safePath !== "/" ? safePath : "index") + ".tsx") : undefined;
+                let fileExists = filePath ? fs.existsSync(filePath) : true;
+                const publicDir = config_.autoFile === true ? path.join(process.cwd(), config_.autoFileDir || "") : undefined;
+                if (publicDir && !fileExists) {
+                    const staticPath = path.join(publicDir, pathname);
+                    const safePath = path.resolve(staticPath);
+                    if (safePath.startsWith(path.resolve(publicDir))) {
+                        filePath = safePath;
+                        fileExists = fs.existsSync(safePath) && fs.statSync(safePath).isFile();
+                    }
+                }
+                if (pathname.startsWith("/api/") && pagesDir != null && !fileExists) {
+                    const apiFile = path.join(pagesDir, `${pathname}.ts`);
+                    const apiFileTsx = path.join(pagesDir, `${pathname}.tsx`);
+                    filePath = fs.existsSync(apiFile) ? apiFile : fs.existsSync(apiFileTsx) ? apiFileTsx : apiFile;
+                    fileExists = filePath == apiFileTsx ? fs.existsSync(apiFileTsx) : fs.existsSync(apiFile);
+                }
+                if (!fileExists) {
+                    filePath = "File is unresolvable. Could be because it's not found.";
+                }
                 res.writeHead(200, { "Content-Type": "application/json" });
                 res.end(JSON.stringify({
                     fileExists,
@@ -327,10 +388,6 @@ async function start() {
     }
     catch {
     }
-    if (config.autoPage == null)
-        config.autoPage = true;
-    if (config.autoFile == null)
-        config.autoFile = true;
     const PORT = config.port ?? 3000;
     const showPanel = config.devMode !== false;
     const autoPaging = config.autoPage !== false;
@@ -402,8 +459,24 @@ async function start() {
                     return res.end(JSON.stringify({ error: e.message }));
                 }
             }
-            res.writeHead(404);
-            return res.end(JSON.stringify({ error: `API route not found: ${pathname}` }));
+            const notFoundPath = path.join(__dirname, '404.js');
+            if (fs.existsSync(notFoundPath)) {
+                try {
+                    let html = await renderPage(notFoundPath, url, actuallyShowPanel, compiler, hotReload, autoPaging, config.autoPageDir, (routes.get("APP_TSX") || ""));
+                    res.setHeader("Content-Type", "text/html");
+                    res.writeHead(404);
+                    html = html.replace("<script>", "<script>\nwindow.__status_code__ = 404;");
+                    res.end(html);
+                }
+                catch (e) {
+                    res.writeHead(404);
+                    res.end(`<html><head></head><body><center><b>404</b> | Not found: ${url}</center></body></html>`);
+                }
+            }
+            else {
+                res.writeHead(404);
+                res.end(`<html><head></head><body><center><b>404</b> | Not found: ${url}</center></body></html>`);
+            }
         }
         const urlPath = pathname === "/" ? "/index" : pathname;
         const tsxPath = pagesDir ? path.join(pagesDir, `${urlPath}.tsx`) : undefined;

package/dist/config.d.ts

@@ -6,10 +6,10 @@ export interface AuthticsConfig {
     compilerType?: 'esbuild' | 'babel';
     hotReload?: boolean;
     dat?: string | string[];
-    showError?: boolean | null;
-    autoPage?: boolean | null;
+    showError?: boolean;
+    autoPage?: boolean;
     autoPageDir?: string;
-    autoFile?: boolean | null;
+    autoFile?: boolean;
     autoFileDir?: string;
 }
 export declare function defineConfig(config: AuthticsConfig): AuthticsConfig;

package/dist/config.js

@@ -1,7 +1,17 @@
 export function defineConfig(config) {
-    if (config.autoPage == null)
+    if (config.autoPage == undefined)
         config.autoPage = true;
-    if (config.autoFile == null)
+    if (config.autoFile == undefined)
         config.autoFile = true;
+    if (config.showError == undefined)
+        config.showError = true;
+    if (config.compilerType == undefined)
+        config.compilerType = 'esbuild';
+    if (config.ssr == undefined)
+        config.ssr = true;
+    if (config.port == undefined || config.port == 0)
+        config.port = 3000;
+    if (config.devMode == undefined)
+        config.devMode = true;
     return config;
 }

package/dist/devPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from 'react';
-import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, TriangleAlert, Eye } from 'lucide-react';
+import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, TriangleAlert, Eye, Zap } from 'lucide-react';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-javascript';
 Prism.languages.javascript['builtin'] = /\b(window|document|console|navigator|localStorage|sessionStorage|fetch|Promise|setTimeout|setInterval|clearTimeout|clearInterval|requestAnimationFrame|Math|JSON|Object|Array|String|Number|Boolean|Date|RegExp|Error|Map|Set|Symbol|Proxy|Reflect|performance|history|location|screen|crypto|indexedDB|alert|confirm|prompt)\b/;
@@ -63,7 +63,7 @@ function Sparkline({ data, color, label, unit }) {
                                 return _jsx("circle", { cx: last[0], cy: last[1], r: "2.5", fill: color });
                             })()] }))] })] }));
 }
-function installNetworkInterceptor(onFetch, setFetch, onBytesClient, onBytesServer) {
+function installNetworkInterceptor(onFetch, setFetch, onEventSource, setEventSource, onWebSocket, setWebSocket, onResource, setResource, onBytesClient, onBytesServer) {
     if (window.__authtics_network_intercepted__)
         return;
     window.__authtics_network_intercepted__ = true;
@@ -100,6 +100,144 @@ function installNetworkInterceptor(onFetch, setFetch, onBytesClient, onBytesServ
             throw e;
         }
     };
+    const OriginalWebSocket = window.WebSocket;
+    window.WebSocket = function (url, protocols) {
+        fetchId++;
+        const savedId = fetchId;
+        const ws = new OriginalWebSocket(url, protocols);
+        if (url.includes('__authtics'))
+            return ws;
+        onWebSocket({
+            url,
+            status: 'Connecting...',
+            id: savedId,
+            type: "WebSocket"
+        });
+        ws.addEventListener('open', () => {
+            setWebSocket({
+                url,
+                status: 'Connected',
+                id: savedId,
+                type: "WebSocket"
+            });
+        });
+        ws.addEventListener('close', () => {
+            setWebSocket({
+                url,
+                status: 'Disconnected',
+                id: savedId,
+                type: "WebSocket"
+            });
+        });
+        ws.addEventListener('message', (event) => {
+            const bytes = new Blob([event.data]).size;
+            onBytesServer(bytes);
+            setWebSocket({
+                url,
+                status: 'Connected',
+                id: savedId,
+                type: "WebSocket"
+            });
+        });
+        ws.addEventListener('error', () => {
+            const status = ws.readyState === OriginalWebSocket.CLOSED
+                ? 'Disconnected'
+                : 'Connection Failed';
+            setWebSocket({
+                url,
+                status,
+                id: savedId,
+                type: "WebSocket"
+            });
+        });
+        const OriginalSend = ws.send;
+        ws.send = function (data) {
+            let bytes = 0;
+            if (typeof data === 'string') {
+                bytes = new Blob([data]).size;
+            }
+            else if (data instanceof Blob) {
+                bytes = data.size;
+            }
+            else if (data instanceof ArrayBuffer || data instanceof SharedArrayBuffer) {
+                bytes = data.byteLength;
+            }
+            else if (ArrayBuffer.isView(data)) {
+                bytes = data.byteLength;
+            }
+            onBytesClient(bytes);
+            OriginalSend.call(this, data);
+        };
+        return ws;
+    };
+    Object.defineProperty(window.WebSocket, 'prototype', {
+        value: OriginalWebSocket.prototype,
+        writable: false
+    });
+    Object.assign(window.WebSocket, OriginalWebSocket);
+    const OriginalEventSource = window.EventSource;
+    window.EventSource = function (url, eventSourceInitDict) {
+        fetchId++;
+        const savedId = fetchId;
+        const es = new OriginalEventSource(url, eventSourceInitDict);
+        if (url.includes('__authtics'))
+            return es;
+        onEventSource({
+            url,
+            status: 'Connecting...',
+            id: savedId,
+            type: "EventSource"
+        });
+        es.addEventListener('open', () => {
+            setEventSource({
+                url,
+                status: 'Connected',
+                id: savedId,
+                type: "EventSource"
+            });
+        });
+        es.addEventListener('message', (event) => {
+            const bytes = new Blob([event.data]).size;
+            onBytesServer(bytes);
+            setEventSource({
+                url,
+                status: 'Connected',
+                id: savedId,
+                type: "EventSource"
+            });
+        });
+        es.addEventListener('error', () => {
+            const status = es.readyState === OriginalEventSource.CLOSED
+                ? 'Disconnected'
+                : 'Connection Failed';
+            setEventSource({
+                url,
+                status: status,
+                id: savedId,
+                type: "EventSource"
+            });
+        });
+        return es;
+    };
+    window.EventSource.prototype = OriginalEventSource.prototype;
+    Object.assign(window.EventSource, OriginalEventSource);
+    setTimeout(() => {
+        const queryImg = document.querySelectorAll('img');
+        const queryScript = document.querySelectorAll('script');
+        const queryLink = document.querySelectorAll('link');
+        queryImg.forEach((img) => {
+            if (img.src)
+                onResource({ url: img.src, type: 'img', id: fetchId++ });
+        });
+        queryScript.forEach((script) => {
+            if (script.src)
+                onResource({ url: script.src, type: 'script', id: fetchId++ });
+        });
+        queryLink.forEach((link) => {
+            if (link.href)
+                onResource({ url: link.href, type: 'link', id: fetchId++ });
+        });
+    }, 5000);
 }
 function installConsoleInterceptor() {
     if (window.__authtics_intercepted__)
@@ -171,6 +309,11 @@ export default function DevPanel() {
     const [hasIssue, setHasIssue] = useState(false);
     const [ping__, setPing__] = useState(0);
     const [networkFetches, setNetworkFetches] = useState([]);
+    const [eventSources, setEventSources] = useState([]);
+    const [usersPaused, setUsersPaused] = useState(false);
+    const [usersPausedRealInfo, setUsersPausedRealInfo] = useState(false);
+    const [webSockets, setWebSockets] = useState([]);
+    const [resourcesFound, setResourcesFound] = useState([]);
     const [status, setStatus] = useState(200);
     const [code, setCode] = useState('');
     const [pathName, setPathName] = useState(undefined);
@@ -254,7 +397,19 @@ export default function DevPanel() {
             if (resp.status === 200) {
                 const data = await resp.json();
                 setDatMatch(data.isMatching);
-                if (!data.isMatching) {
+                const resp3 = await fetch('/__authtics_host_apis__/is-users-paused', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ dat: localStorage.getItem('dat') })
+                });
+                let paused = false;
+                if (resp3.status === 200) {
+                    const data = await resp3.json();
+                    paused = data.paused;
+                    setUsersPaused(paused);
+                    setUsersPausedRealInfo(data.realInfo);
+                }
+                if (!data.isMatching && !paused) {
                     doc?.getElementById('authtics-dev-panel-root')?.remove();
                 }
                 const resp2 = await fetch('/__authtics_host_apis__/get-dat-restriction-missing', {
@@ -369,11 +524,9 @@ export default function DevPanel() {
                     isSSR();
                     userSettings();
                     getHostVersion();
-                    setInterval(() => {
-                        getUsage();
-                    }, 250);
                     setInterval(() => {
                         update();
+                        getUsage();
                     }, 500);
                 }
             }, 250);
@@ -469,7 +622,7 @@ export default function DevPanel() {
     }, []);
     useEffect(() => {
         installConsoleInterceptor();
-        installNetworkInterceptor((f) => setNetworkFetches(prev => [...prev.slice(-49), f]), (f) => setNetworkFetches(prev => prev.map(p => p.id === f.id ? f : p)), (sent) => {
+        installNetworkInterceptor((f) => setNetworkFetches(prev => [...prev.slice(-49), f]), (f) => setNetworkFetches(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setEventSources(prev => [...prev.slice(-49), f]), (f) => setEventSources(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setWebSockets(prev => [...prev.slice(-49), f]), (f) => setWebSockets(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => [...prev.slice(-49), f]), (f) => setResourcesFound(prev => prev.map(p => p.id === f.id ? f : p)), (sent) => {
             pendingSent.current += sent;
         }, (received) => {
             pendingReceived.current += received;
@@ -595,6 +748,38 @@ export default function DevPanel() {
             }
         }));
     };
+    const pause_Resume_Users = async () => {
+        if (usersPausedRealInfo) {
+            const resp = await fetch('/__authtics_host_apis__/set-users-paused', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    dat: localStorage.getItem('dat'),
+                    paused: false
+                })
+            });
+            if (resp.status === 200) {
+                setUsersPausedRealInfo(false);
+            }
+        }
+        else {
+            const resp = await fetch('/__authtics_host_apis__/set-users-paused', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    dat: localStorage.getItem('dat'),
+                    paused: true
+                })
+            });
+            if (resp.status === 200) {
+                setUsersPausedRealInfo(true);
+            }
+        }
+    };
+    if (usersPaused) {
+        doc?.getElementById('root')?.remove();
+        window.location.href = '/failed-to-handle';
+    }
     return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     position: 'absolute',
                     zIndex: 999999,
@@ -733,7 +918,7 @@ export default function DevPanel() {
                                                     border: '1px solid #eee',
                                                     fontSize: '12px',
                                                     color: '#333',
-                                                }, children: [_jsx("span", { children: "Ping" }), _jsx("span", { style: { color: ping__ < 100 ? '#16a34a' : ping__ < 300 ? '#d97706' : '#e53e3e', fontFamily: 'monospace' }, children: ping__ > 0 ? `${ping__}ms` : '??ms' })] }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "this analytic is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(Sparkline, { data: receivedHistory, color: "#3b82f6", label: "Received", unit: " bytes" }), _jsx(Sparkline, { data: sentHistory, color: "#16a34a", label: "Sent", unit: " bytes" }), networkFetches.length === 0
+                                                }, children: [_jsx("span", { children: "Ping" }), _jsx("span", { style: { color: ping__ < 100 ? '#16a34a' : ping__ < 300 ? '#d97706' : '#e53e3e', fontFamily: 'monospace' }, children: ping__ > 0 ? `${ping__}ms` : '??ms' })] }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "this analytic is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(Sparkline, { data: receivedHistory, color: "#3b82f6", label: "Received", unit: " bytes" }), _jsx(Sparkline, { data: sentHistory, color: "#16a34a", label: "Sent", unit: " bytes" }), _jsxs("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: ["Fetches \u2014 ", networkFetches.length, " total fetches"] }), networkFetches.length === 0
                                                 ? _jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No network requests yet." })
                                                 : [...networkFetches].reverse().map((f, i) => (_jsxs("div", { style: {
                                                         background: '#fff',
@@ -753,7 +938,25 @@ export default function DevPanel() {
                                                                 obj___.innerText = f.response?.slice(0, 100) + "...";
                                                                 obj___.removeAttribute('expanded');
                                                                 e.currentTarget.innerText = `View more (${f.response ? (f.response.split('').length - 100) : 0} bytes hidden)`;
-                                                            } }, style: { padding: '8px 10px', borderRadius: '10px', background: '#34a8eb', color: '#fff', border: 'none', cursor: 'pointer', margin: '10px', textAlign: 'center', fontFamily: 'system-ui, sans-serif' }, children: ["View more (", f.response ? (f.response.split('').length - 100) : 0, " bytes hidden)"] })) : (_jsx(_Fragment, {}))) : (_jsx(_Fragment, {}))] }, i)))] })] })) : routeOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                            } }, style: { padding: '8px 10px', borderRadius: '10px', background: '#34a8eb', color: '#fff', border: 'none', cursor: 'pointer', margin: '10px', textAlign: 'center', fontFamily: 'system-ui, sans-serif' }, children: ["View more (", f.response ? (f.response.split('').length - 100) : 0, " bytes hidden)"] })) : (_jsx(_Fragment, {}))) : (_jsx(_Fragment, {}))] }, i))), _jsx("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: "Active connections" }), eventSources.length === 0 ? (_jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No active connections." })) :
+                                                [...eventSources, ...webSockets].reverse().map((es, i) => (_jsx("div", { style: {
+                                                        background: '#fff',
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '11px',
+                                                        fontFamily: 'monospace'
+                                                    }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: '8px', padding: '6px 10px' }, children: [_jsxs("span", { style: { color: '#3b82f6', display: 'flex', gap: '4px', justifyContent: 'center', alignItems: 'center' }, children: [es.type === "EventSource" ? _jsx(Zap, { color: "green", size: 12 }) : es.type === "WebSocket" ? _jsx(Globe, { color: "green", size: 12 }) : _jsx(_Fragment, {}), es.type === "EventSource" ? "Event Source" : es.type === "WebSocket" ? "Web Socket" : "???"] }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#333' }, children: es.url }), _jsx("span", { style: { color: es.status === 'Connected' ? '#16a34a' : es.status === 'Disconnected' ? '#e53e3e' : 'orange' }, children: es.status === 'Connected' ? 'Active' : es.status === 'Disconnected' ? 'Disconnected' : es.status === 'Connecting...' ? '...' : es.status === 'Connection Failed' ? 'Failed' : 'Unknown' })] }) }, i))), _jsxs("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: ["Resources Found \u2014 ", resourcesFound.length, " total resources"] }), resourcesFound.length === 0 ? (_jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No resources found." })) :
+                                                [...resourcesFound].reverse().map((r, i) => (_jsx("div", { style: {
+                                                        background: '#fff',
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '11px',
+                                                        fontFamily: 'monospace'
+                                                    }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: '8px', padding: '6px 10px' }, children: [_jsx("span", { style: { color: '#3b82f6', display: 'flex', gap: '4px', justifyContent: 'center', alignItems: 'center' }, children: r.type }), _jsx("span", { style: { flex: 1, color: '#333' }, children: r.url })] }) }, i)))] })] })) : routeOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                             padding: '6px 8px',
                                             borderBottom: '1px solid #ddd',
                                             background: '#fff',
@@ -997,7 +1200,7 @@ export default function DevPanel() {
                                                         gap: '6px',
                                                         color: '#fff',
                                                         flexDirection: 'row',
-                                                    }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Restart App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Restarting the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Shut Down App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Shutting down the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
+                                                    }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Restart App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Restarting the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Shut Down App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Shutting down the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { pause_Resume_Users(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: usersPausedRealInfo ? "Resume Users" : "Pause Users" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Pausing users from accessing the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',

package/dist/renderEngine.js

@@ -162,23 +162,23 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
     }
     if (!clientCode || !serverCode) {
         const virtualServer = `
-      import Page from ${JSON.stringify(tsxPath)};
       ${usesDevPanel ? `import DevPanel from ${JSON.stringify(devPanelPath)};` : ""}
+      import Page from ${JSON.stringify(tsxPath)};
       export default Page;
       ${usesDevPanel ? `export { DevPanel };` : ""}
     `;
         const virtualClient = `
       import React from "react";
       import { hydrateRoot } from "react-dom/client";
-      import Page from ${JSON.stringify(tsxPath)};
       ${usesDevPanel ? `import DevPanel from ${JSON.stringify(devPanelPath)};` : ""}
+      import Page from ${JSON.stringify(tsxPath)};
 
-      const rootEl = document.getElementById("root");
-      if (rootEl) hydrateRoot(rootEl, React.createElement(Page));
       ${usesDevPanel ? `
       const panelEl = document.getElementById("authtics-dev-panel-root");
       if (panelEl) hydrateRoot(panelEl, React.createElement(DevPanel));
       ` : ""}
+      const rootEl = document.getElementById("root");
+      if (rootEl) hydrateRoot(rootEl, React.createElement(Page));
     `;
         if (compiler === 'babel') {
             serverCode = await buildWithBabel(tsxPath, virtualServer, 'node');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "A Next.js-inspired SSR framework for Node.js with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -37,7 +37,8 @@
     "dev",
     "developer",
     "HostJS",
-    "Host.js"
+    "Host.js",
+    "website"
   ],
   "author": "bananacool467",
   "license": "MIT",
@@ -46,8 +47,6 @@
     "@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",
     "esbuild": "^0.27.3",
     "jiti": "^2.6.1",
     "lucide-react": "^0.577.0",
@@ -63,6 +62,8 @@
     "@types/prismjs": "^1.26.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/react-syntax-highlighter": "^15.5.13"
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__preset-env": "^7.10.0"
   }
 }