@bananacool467/authtics-host 0.1.6 → 0.1.7

package/README.md

@@ -1,6 +1,6 @@
 # Authtics Host
 
-Version 0.1.6
+Version 0.1.7
 License: MIT
 
 Authtics Host is a framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild.
@@ -181,6 +181,21 @@ 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`.
 
+## App APIs
+
+You can add APIs like `get`, `post`, `del` and `put`.
+
+You can use the get API, for example:
+```typescript
+app.get('/hi', (req, res) => {
+  res.text("Hello!");
+})
+```
+Then when you go to `/hi` you see:
+```
+Hello!
+```
+
 ## Developer Panel Notes And DAT (Developer Access Token)
 
 A DAT (Developer Access Token) is your token that is used to access the Developer Panel.

package/dist/cli.d.ts

@@ -8,4 +8,5 @@ export default class App {
     post(routePath: string, handler: (req: IncomingMessage, res: ServerResponse) => void): void;
     put(routePath: string, handler: (req: IncomingMessage, res: ServerResponse) => void): void;
     delete(routePath: string, handler: (req: IncomingMessage, res: ServerResponse) => void): void;
+    remove(method: string, routePath: string): void;
 }

package/dist/cli.js

@@ -343,6 +343,10 @@ export default class App {
     delete(routePath, handler) {
         routes.set(`DELETE:${routePath}`, handler);
     }
+    remove(method, routePath) {
+        if (routes.has(`${method}:${routePath}`))
+            routes.delete(`${method}:${routePath}`);
+    }
 }
 async function start() {
     let config = {};
@@ -483,7 +487,7 @@ async function start() {
         pathname = safePath;
         if (pathname !== "/" && pathname.endsWith("/"))
             pathname = pathname.slice(0, -1);
-        if (!pathname.includes('/__authtics')) {
+        if (!pathname.includes('/__authtics') && !pathname.includes('/hmr')) {
             totalRequests++;
         }
         const routeKey = `${method}:${pathname}`;
@@ -498,7 +502,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -521,7 +525,7 @@ async function start() {
                                         res.setHeader("Content-Type", "application/javascript");
                                         res.end(f);
                                     });
-                                }, req.cookies.dat, config_.dat);
+                                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                                 html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                                 res.setHeader("Content-Type", "text/html");
                                 return res.end(html);
@@ -551,7 +555,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -574,7 +578,7 @@ async function start() {
                                         res.setHeader("Content-Type", "application/javascript");
                                         res.end(f);
                                     });
-                                }, req.cookies.dat, config_.dat);
+                                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                                 html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                                 res.setHeader("Content-Type", "text/html");
                                 return res.end(html);
@@ -602,7 +606,7 @@ async function start() {
                 return handler(req, res);
             }
         }
-        if (pathname === '/__authtics_hmr__') {
+        if (pathname === '/hmr') {
             res.writeHead(200, {
                 'Content-Type': 'text/event-stream',
                 'Cache-Control': 'no-cache',
@@ -625,7 +629,7 @@ async function start() {
                                 res.setHeader("Content-Type", "application/javascript");
                                 res.end(f);
                             });
-                        }, req.cookies.dat, config_.dat);
+                        }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                         html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                         res.setHeader("Content-Type", "text/html");
                         return res.end(html);
@@ -648,7 +652,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -678,7 +682,7 @@ async function start() {
                                 res.setHeader("Content-Type", "application/javascript");
                                 res.end(f);
                             });
-                        }, req.cookies.dat, config_.dat);
+                        }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                         html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                         res.setHeader("Content-Type", "text/html");
                         return res.end(html);
@@ -701,7 +705,7 @@ async function start() {
                                     res.setHeader("Content-Type", "application/javascript");
                                     res.end(f);
                                 });
-                            }, req.cookies.dat, config_.dat);
+                            }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                             html = html.replace("<script>", "<script>\nwindow.__paused__ = true;");
                             res.setHeader("Content-Type", "text/html");
                             return res.end(html);
@@ -759,7 +763,7 @@ async function start() {
                             res.setHeader("Content-Type", "application/javascript");
                             res.end(f);
                         });
-                    }, req.cookies.dat, config_.dat);
+                    }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                     res.setHeader("Content-Type", "text/html");
                     res.writeHead(404);
                     html = html.replace("<script>", "<script>\nwindow.__status_code__ = 404;");
@@ -785,7 +789,7 @@ async function start() {
                         res.setHeader("Content-Type", "application/javascript");
                         res.end(f);
                     });
-                }, req.cookies.dat, config_.dat);
+                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                 res.setHeader("Content-Type", "text/html");
                 return res.end(html);
             }
@@ -809,7 +813,7 @@ async function start() {
                             res.setHeader("Content-Type", "application/javascript");
                             res.end(f);
                         });
-                    }, req.cookies.dat, config_.dat);
+                    }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                     res.setHeader("Content-Type", "text/html");
                     return res.end(html);
                 }
@@ -828,7 +832,7 @@ async function start() {
                         res.setHeader("Content-Type", "application/javascript");
                         res.end(f);
                     });
-                }, req.cookies.dat, config_.dat);
+                }, (p) => { routes.delete(`GET:${p}`); }, req.cookies.dat, config_.dat);
                 res.setHeader("Content-Type", "text/html");
                 res.writeHead(404);
                 html = html.replace("<script>", "<script>\nwindow.__status_code__ = 404;");
@@ -850,7 +854,7 @@ async function start() {
         }, 1000);
     });
     if (config.hotReload === true) {
-        const watchDirs = [pagesDir];
+        const watchDirs = [pagesDir || path.join(routes.get("APP_TSX"), "../")];
         const devPanelDir = path.join(__dirname, 'devPanel.js');
         const _404Dir = path.join(__dirname, '404.js');
         if (fs.existsSync(devPanelDir))

package/dist/devPanel.d.ts

@@ -1,2 +1 @@
-import 'prismjs/components/prism-javascript';
 export default function DevPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/devPanel.js

@@ -1,9 +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 } 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/;
 function getCallerSource() {
     try {
         const stack = new Error().stack ?? '';
@@ -63,7 +60,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, onEventSource, setEventSource, onWebSocket, setWebSocket, onResource, setResource, onBytesClient, onBytesServer) {
+function installNetworkInterceptor(onFetch, setFetch, onEventSource, setEventSource, onWebSocket, setWebSocket, onResource, setResource, rmvResource, onBytesClient, onBytesServer) {
     if (window.__authtics_network_intercepted__)
         return;
     window.__authtics_network_intercepted__ = true;
@@ -221,23 +218,60 @@ function installNetworkInterceptor(onFetch, setFetch, onEventSource, setEventSou
     };
     window.EventSource.prototype = OriginalEventSource.prototype;
     Object.assign(window.EventSource, OriginalEventSource);
-    setTimeout(() => {
+    let usedResourcesSlots = [];
+    let beforeResources = [];
+    let currentResources = [];
+    setInterval(() => {
+        beforeResources = currentResources;
+        currentResources = [];
         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++ });
+            if (img.src) {
+                fetchId++;
+                let savedFetchId = fetchId;
+                if (!usedResourcesSlots.includes({ url: img.src, type: 'img', id: savedFetchId }))
+                    onResource({ url: img.src, type: 'img', id: savedFetchId });
+                currentResources.push({ url: img.src, type: 'img', id: savedFetchId });
+                if (usedResourcesSlots.includes({ url: img.src, type: 'img', id: savedFetchId }))
+                    setResource({ url: img.src, type: 'img', id: savedFetchId });
+                if (!usedResourcesSlots.includes({ url: img.src, type: 'img', id: savedFetchId }))
+                    usedResourcesSlots.push({ url: img.src, type: 'img', id: savedFetchId });
+            }
         });
         queryScript.forEach((script) => {
-            if (script.src)
-                onResource({ url: script.src, type: 'script', id: fetchId++ });
+            if (script.src) {
+                fetchId++;
+                let savedFetchId = fetchId;
+                if (!usedResourcesSlots.includes({ url: script.src, type: 'script', id: savedFetchId }))
+                    onResource({ url: script.src, type: 'script', id: savedFetchId });
+                currentResources.push({ url: script.src, type: 'script', id: savedFetchId });
+                if (usedResourcesSlots.includes({ url: script.src, type: 'script', id: savedFetchId }))
+                    setResource({ url: script.src, type: 'script', id: savedFetchId });
+                if (!usedResourcesSlots.includes({ url: script.src, type: 'script', id: savedFetchId }))
+                    usedResourcesSlots.push({ url: script.src, type: 'script', id: savedFetchId });
+            }
         });
         queryLink.forEach((link) => {
-            if (link.href)
-                onResource({ url: link.href, type: 'link', id: fetchId++ });
+            if (link.href) {
+                fetchId++;
+                let savedFetchId = fetchId;
+                if (!usedResourcesSlots.includes({ url: link.href, type: 'link', id: savedFetchId }))
+                    onResource({ url: link.href, type: 'link', id: savedFetchId });
+                currentResources.push({ url: link.href, type: 'link', id: savedFetchId });
+                if (usedResourcesSlots.includes({ url: link.href, type: 'link', id: savedFetchId }))
+                    setResource({ url: link.href, type: 'link', id: savedFetchId });
+                if (!usedResourcesSlots.includes({ url: link.href, type: 'link', id: savedFetchId }))
+                    usedResourcesSlots.push({ url: link.href, type: 'link', id: savedFetchId });
+            }
+        });
+        beforeResources.forEach((resource) => {
+            if (!currentResources.includes(resource)) {
+                rmvResource(resource);
+            }
         });
-    }, 5000);
+    }, 250);
 }
 function installConsoleInterceptor() {
     if (window.__authtics_intercepted__)
@@ -309,7 +343,6 @@ export default function DevPanel() {
     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([]);
@@ -324,7 +357,6 @@ export default function DevPanel() {
     const heapUsage = useRef(0);
     const [datMatch, setDatMatch] = useState(false);
     const [compilerType, setCompilerType] = useState("?");
-    const [errorDetail, setErrorDetail] = useState(undefined);
     const [httpVersion, setHttpVersion] = useState("v?.?");
     const [errorBoxOpenable, setErrorBoxOpenable] = useState(false);
     const [uptime, setUptime] = useState("00:00:00:00");
@@ -400,7 +432,6 @@ export default function DevPanel() {
                 if (resp3.status === 200) {
                     const data = await resp3.json();
                     paused = data.paused;
-                    setUsersPaused(paused);
                     setUsersPausedRealInfo(data.realInfo);
                 }
                 if (!data.isMatching && !paused) {
@@ -603,7 +634,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)), (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) => {
+        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)), (f) => setResourcesFound(prev => prev.filter(p => p.id !== f.id)), (sent) => {
             pendingSent.current += sent;
         }, (received) => {
             pendingReceived.current += received;
@@ -615,7 +646,6 @@ export default function DevPanel() {
                 setHasIssue(true);
                 setErrorMsgs(prev => [...prev, detail.message]);
                 setErrorBoxOpen(true);
-                setErrorDetail(detail.source);
             }
             ;
         };

package/dist/renderEngine.d.ts

@@ -1,3 +1,3 @@
 export type CompilerType = 'esbuild' | 'babel';
 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, 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): Promise<string>;

package/dist/renderEngine.js

@@ -38,9 +38,9 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
         format: isNode ? 'cjs' : 'iife',
         platform,
         jsx: 'automatic',
-        sourcemap: isNode ? false : 'inline',
+        sourcemap: isNode ? false : false,
         target: isNode ? ['node18'] : ['es2020'],
-        minify: false,
+        minify: true,
         treeShaking: true,
         external: isNode
             ? ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'node:http',
@@ -48,9 +48,16 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
                 'node:fs',
                 'node:url',
                 'tls',
-                path.join(__dirname, 'cli.js')]
+                path.join(__dirname, 'cli.js'),
+                path.join(__dirname, 'config.js'),
+                path.join(__dirname, 'renderEngine.js'),
+                path.join(__dirname, 'rendererTempFiles.js')]
             : [
-                path.join(__dirname, 'cli.js')
+                path.join(__dirname, 'cli.js'),
+                path.join(__dirname, 'cli.js'),
+                path.join(__dirname, 'config.js'),
+                path.join(__dirname, 'renderEngine.js'),
+                path.join(__dirname, 'rendererTempFiles.js')
             ],
     });
     return result.outputFiles[0].text;
@@ -95,7 +102,7 @@ function buildHtml(opts) {
             template = template.replace(contentTag, `<div id="root">${pageHtml}</div>\n    ${devPanelContainer}`);
             template = template.includes("</body>")
                 ? template.replace("</body>", `  ${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}\n${hmrScript}</body>`)
-                : template + `\n${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}${hmrScript}`;
+                : template + `\n${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.');
@@ -131,34 +138,13 @@ function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPa
         return false;
     }
 }
-const HMR_SCRIPT = `
-<script>
-(function() {
-  const es = new EventSource('/__authtics_hmr__');
-  es.onmessage = function(e) { if (e.data === 'reload') window.location.reload(); };
-  es.onerror = function() { setTimeout(function() { window.location.reload(); }, 1000); };
-  window.onbeforeunload = function() {
-    es.close();
-    es = null;
-};
-})();
-</script>
-`;
-export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir, fileHandler, reqDAT, configDAT) {
+const HMR_SCRIPT = `<script>(function(){const es=new EventSource('/hmr');es.onmessage=function(e){if (e.data === 'reload') window.location.reload()};es.onerror=function(){setTimeout(function(){window.location.reload()},1000)};})();</script>`;
+export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir, fileHandler, rmvFileHandler, reqDAT, configDAT) {
     ensureTempDirs();
     if (!fs.existsSync(tsxPath)) {
         throw new Error(`renderPage: source file not found: ${tsxPath}`);
     }
     let usesDevPanel = showPanel && devPanelPath !== null;
-    let datMatched = false;
-    if (configDAT && configDAT == reqDAT)
-        datMatched = true;
-    if (configDAT && Array.isArray(configDAT) && configDAT.includes(reqDAT || ""))
-        datMatched = true;
-    if (configDAT == undefined)
-        datMatched = true;
-    if (!datMatched && usesDevPanel)
-        usesDevPanel = false;
     const templatePath = resolveTemplate(appDir, autoPageDir, autoPaging);
     const tempPath = tempFileForTsx(tsxPath);
     const serverCjsPath = tempPath.replace(/\.json$/, ".server.cjs");
@@ -204,6 +190,7 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
         fs.writeFileSync(serverCjsPath, serverCode, "utf-8");
         writeTempFile(tempPath, JSON.stringify({ clientCode }));
     }
+    fileHandler ? fileHandler(clientCode, `/${tempPath.substring(tempPath.lastIndexOf('/') + 1).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`) : null;
     const serverModule = await import(`${serverCjsPath}?t=${Date.now()}`);
     const exports = serverModule.default ?? serverModule;
     const PageComponent = exports.default ?? exports.Page ?? exports.page ?? null;
@@ -218,6 +205,5 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
     const devPanelContainer = usesDevPanel
         ? `<div id="authtics-dev-panel-root">${devPanelHtml}</div>`
         : "";
-    fileHandler ? fileHandler(clientCode.replace('\n', ''), `/${tsxPath.substring(tsxPath.lastIndexOf('/') + 1).replace(".tsx", ".js").toLowerCase()}`) : null;
-    return buildHtml({ pageHtml, clientCode, devPanelContainer, templatePath, hotReload, fileName: `/${tsxPath.substring(tsxPath.lastIndexOf('/') + 1).replace(".tsx", ".js").toLowerCase()}` });
+    return buildHtml({ pageHtml, clientCode, devPanelContainer, templatePath, hotReload, fileName: `/${tempPath.substring(tempPath.lastIndexOf('/') + 1).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}` });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Authtics Host, A Next.js-inspired SSR framework for Node.js with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",