@bananacool467/authtics-host 0.1.0 → 0.1.4

package/README.md

@@ -1,10 +1,8 @@
 # Authtics Host
 
-Version 0.1.0
+Version 0.1.4
 License: MIT
 
-**(NOTE: THIS IS AUTHTICS HOST'S FIRST RELEASE 🎉🎉🎉)**
-
 Authtics Host is a framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild.
 
 **(NOTE: The short name for Authtics Host is HostJS or Host.js)**
@@ -107,11 +105,12 @@ export default function App() {
   return (
     <RouteMap>
       <Route at="/" statusCode={200} page={Index} />
-    <RouteMap/>
+    </RouteMap>
   )
 }
 ```
 **(NOTE: You can change the `statusCode` to anything you want, the property is optional, it either gives 404 or 200 if the `statusCode` is missing.)**
+
 **(NOTE: To make an 404 page you can use:**
 ```tsx
 <Route statusCode={404} page={NotFound} />
@@ -152,13 +151,15 @@ 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 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)**
 

package/dist/cli.js

@@ -266,8 +266,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,
@@ -402,8 +420,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/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,142 @@ 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);
+    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++ });
+    });
 }
 function installConsoleInterceptor() {
     if (window.__authtics_intercepted__)
@@ -171,12 +307,18 @@ export default function DevPanel() {
     const [hasIssue, setHasIssue] = useState(false);
     const [ping__, setPing__] = useState(0);
     const [networkFetches, setNetworkFetches] = useState([]);
+    const [eventSources, setEventSources] = useState([]);
+    const [webSockets, setWebSockets] = useState([]);
+    const [resourcesFound, setResourcesFound] = useState([]);
     const [status, setStatus] = useState(200);
     const [code, setCode] = useState('');
     const [pathName, setPathName] = useState(undefined);
     const [hostName, setHostName] = useState(undefined);
     const [protocol, setProtocol] = useState(undefined);
     const [path, setPath] = useState(undefined);
+    const contextMenuTimeoutMobile = useRef(undefined);
+    const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const [contextMenuShown, setContextMenuShown] = useState(false);
     const [isSsr, setIsSsr] = useState(false);
     const datRestrictionMissingRef = useRef(true);
     const cpuUsage = useRef(0);
@@ -366,16 +508,26 @@ export default function DevPanel() {
                     isSSR();
                     userSettings();
                     getHostVersion();
-                    setInterval(() => {
-                        getUsage();
-                    }, 250);
                     setInterval(() => {
                         update();
+                        getUsage();
                     }, 500);
                 }
             }, 250);
         }, 250);
     }, []);
+    const datTouchStart = (e) => {
+        e.preventDefault();
+        setCursorPosition({ x: e.clientX || e.touches[0].clientX, y: e.clientY || e.touches[0].clientY });
+        contextMenuTimeoutMobile.current = setTimeout(() => {
+            setContextMenuShown(true);
+            clearTimeout(contextMenuTimeoutMobile.current);
+        }, 1000);
+    };
+    const datTouchEnd = (e) => {
+        e.preventDefault();
+        clearTimeout(contextMenuTimeoutMobile.current);
+    };
     const restart = async () => {
         const resp = await fetch('/__authtics_host_apis__/restart', {
             method: 'POST',
@@ -454,7 +606,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;
@@ -718,7 +870,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',
@@ -738,7 +890,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, overflow: 'hidden', color: '#333' }, children: r.url })] }) }, i)))] })] })) : routeOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                             padding: '6px 8px',
                                             borderBottom: '1px solid #ddd',
                                             background: '#fff',

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.0",
+  "version": "0.1.4",
   "description": "A Next.js-inspired SSR framework for Node.js with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -36,7 +36,8 @@
     "hot-reload",
     "dev",
     "developer",
-    "HostJS"
+    "HostJS",
+    "Host.js"
   ],
   "author": "bananacool467",
   "license": "MIT",
@@ -45,8 +46,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",
@@ -62,6 +61,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"
   }
 }