@bananacool467/authtics-host 0.0.1-beta.6 → 0.0.1-beta.7

package/README.md

@@ -1,9 +1,9 @@
 # Authtics Host
 
-Version 0.0.1-beta.6
+Version 0.0.1-beta.7
 License: MIT
 
-(NOTE: This version (v0.0.1-beta.1) is in BETA, bugs are expected)
+(NOTE: This version is in BETA, bugs are expected)
 
 Authtics Host is a framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild.
 
@@ -138,6 +138,32 @@ node --experimental-strip-types index.ts
 
 ## Result
 
-Then when you run your project, you will get a page just saying **"Hello, World!"**
+Then when you run your project, you will get a page just saying **"Hello, World!"** and you should see a panel at the bottom-right.
+
+## Developer Panel Notes and Warnings And DAT (Developer Access Token)
+
+A DAT (Developer Access Token) is your token that is used to access the Developer Panel.
+
+The Developer Panel can be turned off if you change `devMode` to `false` in **authtics_host.config.ts**.
+
+You can restrict the Developer Panel's access to developer(s) only by copying your DAT and then adding it to **authtics_host.config.ts** `defineConfig` export:
+```typescript
+"dat": "YOUR DAT HERE"
+```
+
+But if you have multiple DATs, then use:
+```typescript
+"dat": [
+  "DAT 1",
+  "DAT 2",
+  "DAT 3"
+]
+```
+
+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.)**
+
+## Contacting
 
 If you ever encounter a bug, report it to (or have questions, contact): authtics@proton.me

package/dist/cli.js

@@ -244,12 +244,13 @@ export default class App {
                 datMatched = true;
             if (datMatched) {
                 const pathname = reqBody.pathname;
-                const filePath = pathname == "/" ? path.join(process.cwd(), "pages", "index.tsx") : path.join(process.cwd(), "pages", pathname + ".tsx");
-                const fileExists = fs.existsSync(filePath);
+                const pagesDir = config_.autoPage === true ? path.join(process.cwd(), config_.autoPageDir || "") : undefined;
+                const filePath = pagesDir ? path.join(pagesDir, pathname + ".tsx") : undefined;
+                const fileExists = filePath ? fs.existsSync(filePath) : true;
                 res.writeHead(200, { "Content-Type": "application/json" });
                 res.end(JSON.stringify({
                     fileExists,
-                    filePath
+                    filePath: (filePath ? filePath : "Cannot find file because autoPage is disabled.")
                 }));
             }
         });
@@ -302,7 +303,7 @@ export default class App {
                 const notFoundPath = path.join(__dirname, '404.js');
                 if (fs.existsSync(notFoundPath)) {
                     try {
-                        let html = await renderPage(notFoundPath, url, showPanel, compiler, hotReload);
+                        let html = await renderPage(notFoundPath, url, showPanel, compiler, hotReload, (config_.autoPage != false));
                         res.setHeader("Content-Type", "text/html");
                         res.writeHead(404);
                         html = html.replace("<script>", "<script>\nwindow.__status_code__ = 404;");
@@ -357,19 +358,25 @@ async function start() {
     console.log(JSON.stringify(config));
     const PORT = config.port ?? 3000;
     const showPanel = config.devMode !== false;
+    const autoPaging = config.autoPage !== false;
     const compiler = config.compilerType === 'babel' ? 'babel' : 'esbuild';
     const hotReload = config.hotReload === true;
     const pagesDir = config.autoPage === true ? path.join(process.cwd(), config.autoPageDir || "") : undefined;
     const publicDir = config.autoFile === true ? path.join(process.cwd(), config.autoFileDir || "") : undefined;
     const apiDir = pagesDir ? path.join(pagesDir, "api") : undefined;
     const server = createServer(async (req, res) => {
+        //const body = await getJsonBody(req) as any;
+        const actuallyShowPanel = showPanel; /* && (config.dat != undefined ? (body.dat == config.dat || (Array.isArray(config.dat) && config.dat.includes(body.dat))) : true)*/
         const r = augmentRes(res);
         const { url = "/", method } = req;
         // Strip query string, hash, trailing slash
         let pathname = url.split("?")[0].split("#")[0];
         if (pathname !== "/" && pathname.endsWith("/"))
             pathname = pathname.slice(0, -1);
-        if (pathname !== "/__authtics_host_apis__/ping" && pathname !== "/__authtics_host_apis__/get-connection" && pathname !== "/__authtics_hmr__" && pathname !== "/__authtics_host_apis__/get-file-by-pathname" && pathname !== "/__authtics_host_apis__/get-is-ssr" && pathname !== "/__authtics_host_apis__/get-compiler" && pathname !== "/__authtics_host_apis__/restart" && pathname !== "/__authtics_host_apis__/shutdown" && pathname !== "/__authtics_host_apis__/get-server-info" && pathname !== "/__authtics_host_apis__/get-cpu_memory") {
+        /*if (pathname !== "/__authtics_host_apis__/ping" && pathname !== "/__authtics_host_apis__/get-connection" && pathname !== "/__authtics_hmr__" && pathname !== "/__authtics_host_apis__/get-file-by-pathname" && pathname !== "/__authtics_host_apis__/get-is-ssr" && pathname !== "/__authtics_host_apis__/get-compiler" && pathname !== "/__authtics_host_apis__/restart" && pathname !== "/__authtics_host_apis__/shutdown" && pathname !== "/__authtics_host_apis__/get-server-info" && pathname !== "/__authtics_host_apis__/get-cpu_memory") {
+          totalRequests++;
+        }*/
+        if (!pathname.includes('/__authtics_host_apis__/')) {
             totalRequests++;
         }
         // ── 1. Registered routes (from app.get/post/etc.) ──────────────────────
@@ -444,7 +451,7 @@ async function start() {
         const htmlPath = pagesDir ? path.join(pagesDir, `${urlPath}.html`) : undefined;
         if (tsxPath && fs.existsSync(tsxPath)) {
             try {
-                const html = await renderPage(tsxPath, url, showPanel, compiler, hotReload);
+                const html = await renderPage(tsxPath, url, actuallyShowPanel, compiler, hotReload, autoPaging);
                 res.setHeader("Content-Type", "text/html");
                 return res.end(html);
             }
@@ -465,7 +472,7 @@ async function start() {
             const appPath = path.join(process.cwd(), appTsxPath);
             if (fs.existsSync(appPath)) {
                 try {
-                    const html = await renderPage(appPath, url, showPanel, compiler, hotReload);
+                    const html = await renderPage(appPath, url, actuallyShowPanel, compiler, hotReload, autoPaging);
                     res.setHeader("Content-Type", "text/html");
                     return res.end(html);
                 }
@@ -480,7 +487,7 @@ async function start() {
         const notFoundPath = path.join(__dirname, '404.js');
         if (fs.existsSync(notFoundPath)) {
             try {
-                let html = await renderPage(notFoundPath, url, showPanel, compiler, hotReload);
+                let html = await renderPage(notFoundPath, url, actuallyShowPanel, compiler, hotReload, autoPaging);
                 res.setHeader("Content-Type", "text/html");
                 res.writeHead(404);
                 html = html.replace("<script>", "<script>\nwindow.__status_code__ = 404;");

package/dist/devPanel.js

@@ -5,7 +5,7 @@ import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info,
 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/;
-const isMobile = true;
+//const isMobile = true;
 function getCallerSource() {
     try {
         const stack = new Error().stack ?? '';
@@ -1088,15 +1088,6 @@ useEffect(() => {
                                                     border: '1px solid #eee',
                                                     fontSize: '12px',
                                                     color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Device Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: isMobile ? 'Mobile' : 'PC' })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
                                                 }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "FPS" }), _jsx("span", { style: { fontSize: '12px', color: (frames.current < 30 ? '#e53e3e' : frames.current < 60 ? '#d97706' : '#16a34a') }, ref: fpsSpanRef, children: "\u2014" })] })] })] })) : aboutHostOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                             padding: '6px 8px',
                                             borderBottom: '1px solid #ddd',
@@ -1113,7 +1104,7 @@ useEffect(() => {
                                                     border: '1px solid #eee',
                                                     fontSize: '12px',
                                                     color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Version" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: "v0.0-beta.1" })] }), _jsxs("div", { style: {
+                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Version" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: "v0.0.1-beta.7" })] }), _jsxs("div", { style: {
                                                     display: 'flex',
                                                     justifyContent: 'space-between',
                                                     padding: '6px 10px',
@@ -1133,7 +1124,7 @@ useEffect(() => {
                                                     color: '#333',
                                                     cursor: 'pointer',
                                                     textDecoration: 'none'
-                                                }, href: "https://bananakitssu.github.io/authtics-host-documentation", children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Documentation" }), _jsx("span", { style: { fontSize: '12px', color: '#333' }, children: _jsx(ChevronRight, { size: 12 }) })] })] })] })) : serverInfoOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                }, href: "https://www.npmjs.com/package/@bananacool467/authtics-host", children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Documentation" }), _jsx("span", { style: { fontSize: '12px', color: '#333' }, children: _jsx(ChevronRight, { size: 12 }) })] })] })] })) : serverInfoOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                             padding: '6px 8px',
                                             borderBottom: '1px solid #ddd',
                                             background: '#fff',

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): Promise<string>;
+export declare function renderPage(tsxPath: string, reqUrl?: string, showPanel?: boolean, compiler?: CompilerType, hotReload?: boolean, autoPaging?: boolean): Promise<string>;

package/dist/renderEngine.js

@@ -191,7 +191,7 @@ const HMR_SCRIPT = `
 })();
 </script>
 `;
-export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false) {
+export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true) {
     ensureTempDirs();
     if (!fs.existsSync(tsxPath)) {
         throw new Error(`renderPage: source file not found: ${tsxPath}`);
@@ -206,7 +206,7 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
     const serverCjsPath = tempPath.replace(/\.json$/, ".server.cjs");
     let clientCode;
     let serverCode;
-    if (isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath)) {
+    if (isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPath) && autoPaging) {
         try {
             const parsed = JSON.parse(readTempFile(tempPath));
             clientCode = parsed.clientCode;

package/package.json

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

package/dist/clientEntry.d.ts

@@ -1 +0,0 @@
-export declare function hydrate(Component: any): Promise<void>;

package/dist/clientEntry.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-// This function will be called by the browser
-export async function hydrate(Component) {
-    hydrateRoot(document.getElementById('root'), React.createElement(Component));
-}

package/dist/renderTempFiles.d.ts

@@ -1 +0,0 @@
-export declare function createTempFiles(tsxPath: string): Promise<string>;

package/dist/renderTempFiles.js

@@ -1,35 +0,0 @@
-import * as esbuild from "esbuild";
-import fs from "node:fs";
-import path from "node:path";
-export async function createTempFiles(tsxPath) {
-    const TEMP_DIR = path.join(process.cwd(), ".authtics_host", "%temp%", "jsx_to_js");
-    if (!fs.existsSync(TEMP_DIR))
-        fs.mkdirSync(TEMP_DIR, { recursive: true });
-    const fileName = path.basename(tsxPath);
-    const outPath = path.join(TEMP_DIR, `${fileName}.atx_js`);
-    const source = fs.readFileSync(tsxPath, "utf8");
-    // 1. Separate the "Brain" (Logic) from the "Body" (JSX)
-    // We look for everything inside the function before the 'return'
-    const logicRegex = /export default function.*?\s*\{([\s\S]*?)return\s*\(/;
-    const match = source.match(logicRegex);
-    const rawLogic = match ? match[1] : "";
-    // 2. Add the Authtics "Hook Shim"
-    // This makes sure 'useState' works without the full React library!
-    const shimmedLogic = `
-    const hooks = [];
-    let currentHook = 0;
-    function useState(initialValue) {
-      const pair = [initialValue, (newVal) => { /* logic to update DOM */ }];
-      return pair;
-    }
-    
-    // Original Logic:
-    ${rawLogic}
-  `;
-    const result = await esbuild.transform(shimmedLogic, {
-        loader: "ts",
-        format: "esm",
-    });
-    fs.writeFileSync(outPath, result.code);
-    return outPath;
-}

package/dist/resolveImports.d.ts

@@ -1,16 +0,0 @@
-/**
- * rewriteBareImports(virtualSource, fromDir)
- * - virtualSource: string source code that may contain bare imports like `import x from "pkg"`
- * - fromDir: directory to resolve from (usually process.cwd())
- *
- * Returns: { code: string, resolvedMap: Record<string,string> }
- *   - code: source with bare imports rewritten to absolute file paths
- *   - resolvedMap: mapping from original specifier -> resolved absolute path
- *
- * NOTE: This uses require.resolve to find package entry points. It prefers ESM entry if package.json.module exists,
- * otherwise falls back to main. For CJS-only packages this may still work because esbuild can bundle CJS.
- */
-export declare function rewriteBareImports(virtualSource: string, fromDir: string): {
-    code: string;
-    resolvedMap: Record<string, string>;
-};

package/dist/resolveImports.js

@@ -1,76 +0,0 @@
-import path from "node:path";
-/**
- * rewriteBareImports(virtualSource, fromDir)
- * - virtualSource: string source code that may contain bare imports like `import x from "pkg"`
- * - fromDir: directory to resolve from (usually process.cwd())
- *
- * Returns: { code: string, resolvedMap: Record<string,string> }
- *   - code: source with bare imports rewritten to absolute file paths
- *   - resolvedMap: mapping from original specifier -> resolved absolute path
- *
- * NOTE: This uses require.resolve to find package entry points. It prefers ESM entry if package.json.module exists,
- * otherwise falls back to main. For CJS-only packages this may still work because esbuild can bundle CJS.
- */
-export function rewriteBareImports(virtualSource, fromDir) {
-    // quick regex to find import/export statements with bare specifiers
-    // This is a pragmatic approach; not a full parser.
-    const importRegex = /(?:import\s+(?:[^'"]+)\s+from\s+|import\s*\(\s*|export\s+.*\s+from\s+)(['"])([^'"]+)\1/g;
-    const importSimpleRegex = /import\s+(['"])([^'"]+)\1/g; // import "side-effect"
-    const resolvedMap = {};
-    let code = virtualSource;
-    function resolveSpecifier(spec) {
-        // If it's relative or absolute, leave it
-        if (spec.startsWith(".") || spec.startsWith("/") || spec.startsWith("http://") || spec.startsWith("https://")) {
-            return spec;
-        }
-        // Node built-in polyfill map (you can extend)
-        const builtinPolyfills = {
-            crypto: "crypto-browserify",
-            stream: "stream-browserify",
-            buffer: "buffer",
-            util: "util",
-            path: "path-browserify",
-            os: "os-browserify/browser",
-        };
-        const mapped = builtinPolyfills[spec] ?? spec;
-        try {
-            // Try to resolve package.json "module" or "exports" if possible by checking package.json
-            // First try require.resolve for mapped spec
-            const resolved = require.resolve(mapped, { paths: [fromDir] });
-            return resolved;
-        }
-        catch (e) {
-            // fallback: try to resolve mapped + '/index.js'
-            try {
-                const resolved2 = require.resolve(path.join(mapped), { paths: [fromDir] });
-                return resolved2;
-            }
-            catch (e2) {
-                // give up: return original spec so esbuild can try to handle it (or fail)
-                return spec;
-            }
-        }
-    }
-    // Replace matches from importRegex
-    code = code.replace(importRegex, (full, quote, spec) => {
-        const resolved = resolveSpecifier(spec);
-        if (resolved !== spec) {
-            resolvedMap[spec] = resolved;
-            // convert to file:// absolute path so esbuild can import it
-            const fileUrl = resolved.startsWith("/") ? resolved : path.resolve(fromDir, resolved);
-            return full.replace(quote + spec + quote, JSON.stringify(fileUrl));
-        }
-        return full;
-    });
-    // handle import "side-effect" forms
-    code = code.replace(importSimpleRegex, (full, quote, spec) => {
-        const resolved = resolveSpecifier(spec);
-        if (resolved !== spec) {
-            resolvedMap[spec] = resolved;
-            const fileUrl = resolved.startsWith("/") ? resolved : path.resolve(fromDir, resolved);
-            return full.replace(quote + spec + quote, JSON.stringify(fileUrl));
-        }
-        return full;
-    });
-    return { code, resolvedMap };
-}