@bananacool467/authtics-host 0.1.7 → 0.1.9

package/README.md

@@ -1,12 +1,21 @@
 # Authtics Host
 
-Version 0.1.7
+Version 0.1.9
 License: MIT
 
 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)**
 
+**(Fixes we're applied on this version with security fixes too)**
+
+**(From the Developer: I am having 2 small issues:**
+
+1. **Web Socket Connections** are **not showing** in the DevPanel's Network tab
+2. The page doesnt **refresh properly**. (Have to refresh by doing: refresh -> cancel -> refresh to prevent halting)
+
+**I need help fixing those)**
+
 ## Setting Up
 
 To get **Authtics Host** use:
@@ -151,13 +160,13 @@ 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 **(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.
+* **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 **(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.
 
 The information the Developer Panel shows outside of the tabs is just your **DAT** (Developer Access Token).
 
@@ -165,9 +174,9 @@ The information the Developer Panel shows outside of the tabs is just your **DAT
 
 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:
+* **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" }
 ```
@@ -196,6 +205,36 @@ Then when you go to `/hi` you see:
 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 also redesign the UI for the DevPanel using [UI Tools](https://npmjs.com/package/@bananakitssu/ui-tools).
+
+> **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**
+
 ## Developer Panel Notes And DAT (Developer Access Token)
 
 A DAT (Developer Access Token) is your token that is used to access the Developer Panel.
@@ -222,4 +261,4 @@ There isn't any limit of DATs you can add.
 
 ## Contacting The Developer Of Authtics Host
 
-If you ever encounter a bug, report it to (or have questions, contact): authtics@proton.me
+If you have any questions, or encountered a bug while using HostJS, contact: authtics@proton.me

package/dist/cli.js

@@ -15,16 +15,67 @@ const routes = new Map();
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const hmrClients = new Set();
-function notifyHmrClients() {
-    for (const client of hmrClients) {
-        try {
-            client.write('data: reload\n\n');
+function safeWatch(target, onChange) {
+    const shouldReact = (filename) => {
+        if (!filename)
+            return false;
+        if (filename.includes('.authtics_host'))
+            return false;
+        if (filename.includes('node_modules'))
+            return false;
+        return /\.(tsx?|jsx?|html|css)$/i.test(filename);
+    };
+    try {
+        const stat = fs.statSync(target);
+        if (stat.isFile()) {
+            fs.watch(target, (_et, filename) => { if (shouldReact(filename ?? target))
+                onChange(); });
+            return;
         }
-        catch {
-            hmrClients.delete(client);
+        fs.watch(target, { recursive: true }, (_et, filename) => {
+            if (shouldReact(filename))
+                onChange();
+        });
+    }
+    catch (err) {
+        if (err.code === 'ERR_FEATURE_UNAVAILABLE_ON_PLATFORM' || err.code === 'EINVAL' || err.code === 'ENOSYS') {
+            try {
+                fs.watch(target, (_et, f) => { if (shouldReact(f))
+                    onChange(); });
+            }
+            catch { }
+            try {
+                for (const entry of fs.readdirSync(target, { withFileTypes: true })) {
+                    if (entry.isDirectory()) {
+                        try {
+                            const sub = path.join(target, entry.name);
+                            fs.watch(sub, (_et, f) => { if (shouldReact(f))
+                                onChange(); });
+                        }
+                        catch { }
+                    }
+                }
+            }
+            catch { }
         }
     }
 }
+let hmrDebounceTimer = null;
+function notifyHmrClients() {
+    if (hmrDebounceTimer)
+        clearTimeout(hmrDebounceTimer);
+    hmrDebounceTimer = setTimeout(() => {
+        hmrDebounceTimer = null;
+        for (const client of hmrClients) {
+            try {
+                client.write('data: reload\n\n');
+            }
+            catch {
+                hmrClients.delete(client);
+            }
+        }
+    }, 120);
+}
 const MIME_TYPES = {
     '.html': 'text/html',
     '.css': 'text/css',
@@ -854,34 +905,24 @@ async function start() {
         }, 1000);
     });
     if (config.hotReload === true) {
-        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))
-            watchDirs.push(devPanelDir);
-        for (const dir of watchDirs) {
-            if (dir && !fs.existsSync(dir))
-                continue;
-            if (dir) {
-                fs.watch(dir, { recursive: true }, (eventType, filename) => {
-                    if (!filename)
-                        return;
-                    notifyHmrClients();
-                });
-            }
+        const watchSet = new Set();
+        watchSet.add(process.cwd());
+        if (pagesDir && fs.existsSync(pagesDir))
+            watchSet.add(pagesDir);
+        const appTsx = routes.get("APP_TSX");
+        if (appTsx) {
+            const appTsxDir = path.dirname(path.join(process.cwd(), appTsx));
+            if (fs.existsSync(appTsxDir))
+                watchSet.add(appTsxDir);
         }
-        if (fs.existsSync(_404Dir))
-            watchDirs.push(_404Dir);
-        for (const dir of watchDirs) {
-            if (dir && !fs.existsSync(dir))
-                continue;
-            if (dir) {
-                fs.watch(dir, { recursive: true }, (eventType, filename) => {
-                    if (!filename)
-                        return;
-                    notifyHmrClients();
-                });
-            }
+        const devPanelBuilt = path.join(__dirname, 'devPanel.js');
+        const _404Built = path.join(__dirname, '404.js');
+        if (fs.existsSync(devPanelBuilt))
+            watchSet.add(devPanelBuilt);
+        if (fs.existsSync(_404Built))
+            watchSet.add(_404Built);
+        for (const dir of watchSet) {
+            safeWatch(dir, notifyHmrClients);
         }
     }
     return server;

package/dist/devPanel.js

@@ -84,7 +84,7 @@ function installNetworkInterceptor(onFetch, setFetch, onEventSource, setEventSou
         try {
             const resp = await originalFetch(...args);
             const clone = resp.clone();
-            setFetch({ url, method, status: resp.status, id: savedFetchId, response: await resp.text(), sent: body ? JSON.stringify(body, null, 2).replace('"{', '{')
+            setFetch({ url, method, status: clone.status, id: savedFetchId, response: await clone.text(), sent: body ? JSON.stringify(body, null, 2).replace('"{', '{')
                     .replace('}"', '}')
                     .replaceAll('\\"', '"') : null });
             clone.arrayBuffer().then(buf => {
@@ -294,7 +294,7 @@ function installConsoleInterceptor() {
     });
 }
 function SecuredTab() {
-    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '8px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(CircleX, { size: 32, color: 'red' }), _jsx("span", { style: { color: 'red', fontSize: 24 }, children: "This Tab Is Currently Not Accessible" }), _jsx("span", { style: { color: 'red', fontSize: 12 }, children: "To access this tab, you need to set \"dat\" in the Authtics Host config to set restriction and then restart." })] }));
+    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(CircleX, { size: 32, color: 'red' }), _jsx("span", { style: { color: 'red', fontSize: 24 }, children: "This Tab Is Currently Not Accessible" }), _jsx("span", { style: { color: 'red', fontSize: 12 }, children: "To access this tab, you need to set \"dat\" in the Authtics Host config to set restriction and then restart." })] }));
 }
 function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled }) {
     const [hovered, setHovered] = useState(false);
@@ -659,23 +659,27 @@ export default function DevPanel() {
                 setTokenLength(length);
             }
             else {
-                const newToken = generateToken();
-                try {
-                    let localStorageToken;
+                const cfg = window.__authtics_config__;
+                const serverDevMode = cfg?.devMode !== false;
+                const serverDatRestricted = cfg?.datRestricted === true;
+                if (serverDevMode && !serverDatRestricted) {
+                    const newToken = generateToken();
                     try {
-                        localStorageToken = localStorage.getItem('dat');
+                        let localStorageToken;
+                        try {
+                            localStorageToken = localStorage.getItem('dat');
+                        }
+                        catch (e) { }
+                        cookie.set('dat', localStorageToken || newToken);
+                        setToken(newToken);
+                        let length_ = newToken?.split('');
+                        let length;
+                        length = length_?.length;
+                        setTokenLength(length);
                     }
-                    catch (e) {
+                    catch (error) {
+                        console.error('[Authtics Host] Error storing token in localStorage:', error);
                     }
-                    cookie.set('dat', localStorageToken || newToken);
-                    setToken(newToken);
-                    let length_ = newToken?.split('');
-                    let length;
-                    length = length_?.length;
-                    setTokenLength(length);
-                }
-                catch (error) {
-                    console.error('[Authtics Host] Error storing token in localStorage:', error);
                 }
             }
         }

package/dist/renderEngine.js

@@ -9,6 +9,39 @@ import { renderToString } from "react-dom/server";
 import { tempFileForTsx, writeTempFile, readTempFile, ensureTempDirs, } from "./rendererTempFiles.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const NODE_BUILTINS = [
+    'fs', 'path', 'http', 'https', 'net', 'tls', 'os', 'url', 'dns',
+    'crypto', 'stream', 'buffer', 'events', 'util', 'zlib', 'assert',
+    'child_process', 'cluster', 'dgram', 'readline', 'repl', 'vm',
+    'worker_threads', 'timers', 'module', 'process', 'string_decoder',
+    'querystring', 'punycode', 'domain', 'constants', 'sys',
+    'node:fs', 'node:path', 'node:http', 'node:https', 'node:net', 'node:tls',
+    'node:os', 'node:url', 'node:dns', 'node:crypto', 'node:stream',
+    'node:buffer', 'node:events', 'node:util', 'node:zlib', 'node:assert',
+    'node:child_process', 'node:cluster', 'node:dgram', 'node:readline',
+    'node:repl', 'node:vm', 'node:worker_threads', 'node:timers',
+    'node:module', 'node:process', 'node:string_decoder', 'node:querystring',
+    'express', 'jiti',
+];
+const nodeStubPlugin = {
+    name: 'browser-node-stub',
+    setup(build) {
+        const escapedNames = NODE_BUILTINS.map(n => n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        const filter = new RegExp(`^(${escapedNames.join('|')})$`);
+        build.onResolve({ filter }, args => ({
+            path: args.path,
+            namespace: 'browser-node-stub',
+        }));
+        build.onLoad({ filter: /.*/, namespace: 'browser-node-stub' }, () => ({
+            contents: `
+        // Node.js built-in stub for browser builds
+        const stub = new Proxy({}, { get: () => () => undefined });
+        export default stub;
+      `,
+            loader: 'js',
+        }));
+    },
+};
 async function buildWithBabel(entryPath, virtualContent, platform) {
     const presets = [
         [babelPresetEnv, {
@@ -26,6 +59,7 @@ async function buildWithBabel(entryPath, virtualContent, platform) {
     return result.code;
 }
 async function buildWithEsbuild(virtualContent, resolveDir, platform) {
+    const toFwdSlash = (p) => p.split(path.sep).join('/');
     const isNode = platform === 'node';
     const result = await esbuild.build({
         stdin: {
@@ -42,22 +76,19 @@ async function buildWithEsbuild(virtualContent, resolveDir, platform) {
         target: isNode ? ['node18'] : ['es2020'],
         minify: true,
         treeShaking: true,
+        plugins: isNode ? [] : [nodeStubPlugin],
         external: isNode
-            ? ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'node:http',
-                'node:path',
-                'node:fs',
-                'node:url',
-                'tls',
-                path.join(__dirname, 'cli.js'),
-                path.join(__dirname, 'config.js'),
-                path.join(__dirname, 'renderEngine.js'),
-                path.join(__dirname, 'rendererTempFiles.js')]
+            ? ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime', 'react/jsx-dev-runtime',
+                'node:http', 'node:path', 'node:fs', 'node:url', 'tls',
+                toFwdSlash(path.join(__dirname, 'cli.js')),
+                toFwdSlash(path.join(__dirname, 'config.js')),
+                toFwdSlash(path.join(__dirname, 'renderEngine.js')),
+                toFwdSlash(path.join(__dirname, 'rendererTempFiles.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')
+                toFwdSlash(path.join(__dirname, 'cli.js')),
+                toFwdSlash(path.join(__dirname, 'config.js')),
+                toFwdSlash(path.join(__dirname, 'renderEngine.js')),
+                toFwdSlash(path.join(__dirname, 'rendererTempFiles.js'))
             ],
     });
     return result.outputFiles[0].text;
@@ -93,7 +124,8 @@ function resolveTemplate(appDir, autoPageDir, autoPaging) {
     return nextToCli;
 }
 function buildHtml(opts) {
-    const { pageHtml, clientCode, devPanelContainer, templatePath, hotReload, fileName } = opts;
+    const { pageHtml, clientCode, devPanelContainer, templatePath, hotReload, fileName, datRestricted, devMode } = opts;
+    const configScript = `<script>window.__authtics_config__={datRestricted:${datRestricted ? 'true' : 'false'},devMode:${devMode !== false ? 'true' : 'false'}};</script>`;
     const hmrScript = hotReload ? HMR_SCRIPT : '';
     if (templatePath && fs.existsSync(templatePath)) {
         let template = fs.readFileSync(templatePath, "utf-8");
@@ -101,8 +133,8 @@ function buildHtml(opts) {
         if (contentTag.test(template)) {
             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>`}\n${hmrScript}`;
+                ? 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}`;
             return template;
         }
         console.warn('[authtics] _template.html has no <authtics_host_content /> — using default layout.');
@@ -116,6 +148,7 @@ function buildHtml(opts) {
   <body>
     <div id="root">${pageHtml}</div>
     ${devPanelContainer}
+    ${configScript}
     ${fileName ? `<script src="${fileName}"></script>` : `<script>${clientCode}</script>`}
     ${hmrScript}
   </body>
@@ -138,18 +171,47 @@ function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPa
         return false;
     }
 }
-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>`;
+const HMR_SCRIPT = `<script>(function(){
+  var reloading=false;
+  var es=new EventSource('/hmr');
+  es.onmessage=function(e){
+    if(e.data==='reload'&&!reloading){
+      reloading=true;
+      es.close();
+      window.location.reload();
+    }
+  };
+  es.onerror=function(){
+    // onerror fires on both server-down AND on page-unload (SSE closed by navigation).
+    // Guard with reloading so a navigate-away never schedules a second reload.
+    if(!reloading){
+      setTimeout(function(){
+        if(!reloading){reloading=true;window.location.reload();}
+      },1500);
+    }
+  };
+})();</script>`;
 export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir, fileHandler, rmvFileHandler, reqDAT, configDAT) {
     ensureTempDirs();
     if (!fs.existsSync(tsxPath)) {
         throw new Error(`renderPage: source file not found: ${tsxPath}`);
     }
     let usesDevPanel = showPanel && devPanelPath !== null;
+    if (usesDevPanel) {
+        let datMatched = configDAT === undefined;
+        if (configDAT && configDAT === reqDAT)
+            datMatched = true;
+        if (configDAT && Array.isArray(configDAT) && configDAT.includes(reqDAT ?? ""))
+            datMatched = true;
+        if (!datMatched)
+            usesDevPanel = false;
+    }
     const templatePath = resolveTemplate(appDir, autoPageDir, autoPaging);
     const tempPath = tempFileForTsx(tsxPath);
     const serverCjsPath = tempPath.replace(/\.json$/, ".server.cjs");
     let clientCode;
     let serverCode;
+    let freshWrite = false;
     if (isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath) && autoPaging) {
         try {
             const parsed = JSON.parse(readTempFile(tempPath));
@@ -189,9 +251,10 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
         }
         fs.writeFileSync(serverCjsPath, serverCode, "utf-8");
         writeTempFile(tempPath, JSON.stringify({ clientCode }));
+        freshWrite = true;
     }
-    fileHandler ? fileHandler(clientCode, `/${tempPath.substring(tempPath.lastIndexOf('/') + 1).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`) : null;
-    const serverModule = await import(`${serverCjsPath}?t=${Date.now()}`);
+    fileHandler ? fileHandler(clientCode, `/${path.basename(tempPath).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`) : null;
+    const serverModule = await import(freshWrite ? `${serverCjsPath}?t=${Date.now()}` : serverCjsPath);
     const exports = serverModule.default ?? serverModule;
     const PageComponent = exports.default ?? exports.Page ?? exports.page ?? null;
     const DevPanelComponent = usesDevPanel ? (exports.DevPanel ?? null) : null;
@@ -205,5 +268,9 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
     const devPanelContainer = usesDevPanel
         ? `<div id="authtics-dev-panel-root">${devPanelHtml}</div>`
         : "";
-    return buildHtml({ pageHtml, clientCode, devPanelContainer, templatePath, hotReload, fileName: `/${tempPath.substring(tempPath.lastIndexOf('/') + 1).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}` });
+    return buildHtml({ pageHtml, clientCode, devPanelContainer, templatePath, hotReload,
+        fileName: `/${path.basename(tempPath).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`,
+        datRestricted: configDAT !== undefined,
+        devMode: showPanel,
+    });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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",