@bananacool467/authtics-host 0.0.2-beta.3 → 0.1.0

package/README.md

@@ -1,13 +1,15 @@
 # Authtics Host
 
-Version 0.0.2-beta.3
+Version 0.1.0
 License: MIT
 
-**(NOTE: This version is in BETA, bugs are expected)**
+**(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.
 
-## Setting up
+**(NOTE: The short name for Authtics Host is HostJS or Host.js)**
+
+## Setting Up
 
 To get **Authtics Host** use:
 ```bash
@@ -98,17 +100,23 @@ export default defineConfig({
 
 `client/app.tsx` should look like:
 ```tsx
-import { Route } from "@bananacool467/authtics-host";
+import { Route, RouteMap } from "@bananacool467/authtics-host";
 import Index from "./pages/index";
 
 export default function App() {
   return (
-    <>
+    <RouteMap>
       <Route at="/" statusCode={200} page={Index} />
-    </>
+    <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} />
+```
+**)**
 
 `client/pages/index.tsx` should look like:
 ```tsx
@@ -140,6 +148,20 @@ node --experimental-strip-types index.ts
 
 Then when you run your project, you will get a page just saying **"Hello, World!"** and you should see a clickable Developer Panel at the bottom-right.
 
+## About The Developer Panel
+
+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
+
+**(NOTE: If you do not set DAT restriction (Which will be explained on how to set it up in the next section), you will only get access to the Console and Network tabs)**
+
 ## Developer Panel Notes And Warnings And DAT (Developer Access Token)
 
 A DAT (Developer Access Token) is your token that is used to access the Developer Panel.

package/dist/cli.js

@@ -331,7 +331,6 @@ async function start() {
         config.autoPage = true;
     if (config.autoFile == null)
         config.autoFile = true;
-    console.log(JSON.stringify(config));
     const PORT = config.port ?? 3000;
     const showPanel = config.devMode !== false;
     const autoPaging = config.autoPage !== false;
@@ -411,7 +410,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, actuallyShowPanel, compiler, hotReload, autoPaging);
+                const html = await renderPage(tsxPath, url, actuallyShowPanel, compiler, hotReload, autoPaging, config.autoPageDir, (routes.get("APP_TSX") || ""));
                 res.setHeader("Content-Type", "text/html");
                 return res.end(html);
             }
@@ -430,7 +429,7 @@ async function start() {
             const appPath = path.join(process.cwd(), appTsxPath);
             if (fs.existsSync(appPath)) {
                 try {
-                    const html = await renderPage(appPath, url, actuallyShowPanel, compiler, hotReload, autoPaging);
+                    const html = await renderPage(appPath, url, actuallyShowPanel, compiler, hotReload, autoPaging, config.autoPageDir, (routes.get("APP_TSX") || ""));
                     res.setHeader("Content-Type", "text/html");
                     return res.end(html);
                 }
@@ -444,7 +443,7 @@ async function start() {
         const notFoundPath = path.join(__dirname, '404.js');
         if (fs.existsSync(notFoundPath)) {
             try {
-                let html = await renderPage(notFoundPath, url, actuallyShowPanel, compiler, hotReload, autoPaging);
+                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;");

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 } from 'lucide-react';
+import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, TriangleAlert, Eye } 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/;
@@ -178,6 +178,7 @@ export default function DevPanel() {
     const [protocol, setProtocol] = useState(undefined);
     const [path, setPath] = useState(undefined);
     const [isSsr, setIsSsr] = useState(false);
+    const datRestrictionMissingRef = useRef(true);
     const cpuUsage = useRef(0);
     const heapUsage = useRef(0);
     const [datMatch, setDatMatch] = useState(false);
@@ -191,6 +192,7 @@ export default function DevPanel() {
     const [users, setUsers] = useState(0);
     const [token, setToken] = useState(null);
     const [tokenLength, setTokenLength] = useState(0);
+    const [tokenHidden, setTokenHidden] = useState(true);
     const [consoleInputFocused, setConsoleInputFocused] = useState(false);
     const consoleInputRef = useRef(null);
     const overlayRef = useRef(null);
@@ -251,7 +253,6 @@ export default function DevPanel() {
                 setDatMatch(data.isMatching);
                 if (!data.isMatching) {
                     doc?.getElementById('authtics-dev-panel-root')?.remove();
-                    return;
                 }
                 const resp2 = await fetch('/__authtics_host_apis__/get-dat-restriction-missing', {
                     method: 'POST',
@@ -261,8 +262,11 @@ export default function DevPanel() {
                 if (resp2.status === 200) {
                     const data = await resp2.json();
                     setDatRestrictionMissing(!data.enabled);
+                    datRestrictionMissingRef.current = !data.enabled;
+                    return "";
                 }
             }
+            return "";
         };
         const isSSR = async () => {
             const resp = await fetch('/__authtics_host_apis__/get-is-ssr', {
@@ -354,20 +358,22 @@ export default function DevPanel() {
         };
         setTimeout(async () => {
             await getDatMatching();
-            if (datRestrictionMissing === false) {
-                getPath();
-                getCompilerType();
-                getHttpVersion();
-                isSSR();
-                userSettings();
-                getHostVersion();
-                setInterval(() => {
-                    getUsage();
-                }, 250);
-                setInterval(() => {
-                    update();
-                }, 500);
-            }
+            setTimeout(() => {
+                if (datRestrictionMissingRef.current === false) {
+                    getPath();
+                    getCompilerType();
+                    getHttpVersion();
+                    isSSR();
+                    userSettings();
+                    getHostVersion();
+                    setInterval(() => {
+                        getUsage();
+                    }, 250);
+                    setInterval(() => {
+                        update();
+                    }, 500);
+                }
+            }, 250);
         }, 250);
     }, []);
     const restart = async () => {
@@ -491,7 +497,7 @@ export default function DevPanel() {
         catch (error) {
         }
         window.addEventListener('authtics:log', handler);
-        setStatus(window.__status_code__ | 200);
+        setInterval(() => setStatus(window.__status_code__ || 200), 1000);
         setPathName(window.location.pathname);
         setHostName(window.location.hostname);
         setDoc(document);
@@ -932,7 +938,6 @@ export default function DevPanel() {
                                             maxHeight: '260px',
                                             flexDirection: 'column',
                                         }, children: [_jsxs("div", { style: {
-                                                    display: 'flex',
                                                     justifyContent: 'space-between',
                                                     padding: '6px 10px',
                                                     background: '#fff',
@@ -940,7 +945,24 @@ export default function DevPanel() {
                                                     border: '1px solid #eee',
                                                     fontSize: '12px',
                                                     color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "DAT (Developer Access Token)" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: token })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
+                                                    display: 'flex'
+                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333', position: 'relative' }, children: "DAT (Developer Access Token)" }), _jsxs("div", { style: { position: 'relative',
+                                                            display: 'inline-flex' }, children: [_jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: token }), tokenHidden && (_jsxs("div", { style: {
+                                                                    position: 'absolute',
+                                                                    top: 0, left: 0,
+                                                                    marginTop: '-2.5px',
+                                                                    width: '100%', height: '100%',
+                                                                    backdropFilter: 'blur(10px)',
+                                                                    backgroundColor: 'rgba(255,255,255,0.3)',
+                                                                    cursor: 'pointer',
+                                                                    padding: '2.5px 2.5px',
+                                                                    borderRadius: '8px',
+                                                                    textAlign: 'center',
+                                                                    display: 'flex',
+                                                                    justifyContent: 'center',
+                                                                    alignItems: 'center',
+                                                                    gap: '4px'
+                                                                }, onClick: () => setTokenHidden(false), children: [_jsx(Eye, { size: 12 }), "Click to reveal"] }))] })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
                                                         display: 'flex',
                                                         background: '#ba4e4e',
                                                         borderRadius: '10px',

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from './config.js';
 import App from './cli.js';
-import Route from './route.js';
-export { App, Route, defineConfig };
+import { Route } from './route.js';
+import { RouteMap } from './route.js';
+export { App, Route, RouteMap, defineConfig };

package/dist/index.js

@@ -1,4 +1,5 @@
 import { defineConfig } from './config.js';
 import App from './cli.js';
-import Route from './route.js';
-export { App, Route, defineConfig };
+import { Route } from './route.js';
+import { RouteMap } from './route.js';
+export { App, Route, RouteMap, defineConfig };

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

package/dist/renderEngine.js

@@ -75,26 +75,20 @@ function resolveDevPanelPath() {
     return null;
 }
 const devPanelPath = resolveDevPanelPath();
-function resolveTemplate(tsxPath) {
-    const pagesDir = path.join(process.cwd(), "pages");
-    let dir = path.dirname(tsxPath);
-    while (true) {
-        const candidate = path.join(dir, "_template.html");
-        if (fs.existsSync(candidate))
-            return candidate;
-        if (dir === pagesDir || dir === path.dirname(pagesDir))
-            break;
-        const parent = path.dirname(dir);
-        if (parent === dir)
-            break;
-        dir = parent;
+function resolveTemplate(appDir, autoPageDir, autoPaging) {
+    let nextToCli;
+    if (autoPaging) {
+        nextToCli = path.join(process.cwd(), autoPageDir || "", "_template.html");
     }
-    return null;
+    else {
+        nextToCli = path.join(process.cwd(), appDir || "", "../", "_template.html");
+    }
+    return nextToCli;
 }
 function buildHtml(opts) {
     const { pageHtml, clientCode, devPanelContainer, templatePath, hotReload } = opts;
     const hmrScript = hotReload ? HMR_SCRIPT : '';
-    if (templatePath) {
+    if (templatePath && fs.existsSync(templatePath)) {
         let template = fs.readFileSync(templatePath, "utf-8");
         const contentTag = /<authtics_host_content\s*\/>/i;
         if (contentTag.test(template)) {
@@ -146,13 +140,13 @@ const HMR_SCRIPT = `
 })();
 </script>
 `;
-export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true) {
+export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = 'esbuild', hotReload = false, autoPaging = true, autoPageDir, appDir) {
     ensureTempDirs();
     if (!fs.existsSync(tsxPath)) {
         throw new Error(`renderPage: source file not found: ${tsxPath}`);
     }
     const usesDevPanel = showPanel && devPanelPath !== null;
-    const templatePath = resolveTemplate(tsxPath);
+    const templatePath = resolveTemplate(appDir, autoPageDir, autoPaging);
     const tempPath = tempFileForTsx(tsxPath);
     const serverCjsPath = tempPath.replace(/\.json$/, ".server.cjs");
     let clientCode;

package/dist/route.d.ts

@@ -1,4 +1,7 @@
-export default function Route({ page, statusCode, at }: {
+export declare function RouteMap({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Route({ page, statusCode, at }: {
     page: Function;
     statusCode?: number;
     at?: string;

package/dist/route.js

@@ -1,30 +1,55 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-export default function Route({ page, statusCode, at }) {
-    const Page = page;
-    const [pathName, setPathName] = useState("");
-    const [is404, setIs404] = useState(false);
-    const [thisPassed, setThisPassed] = useState(false);
+import { useEffect, useState, useRef } from "react";
+import NotFound from "./404.js";
+export function RouteMap({ children }) {
+    const childArray = useRef(children);
+    const [path, setPath] = useState('');
+    const matched = useRef(null);
+    const [MatchedEl, setMatchedEl] = useState(null);
+    const [currentlyAwaiting, setCurrentlyAwaiting] = useState(true);
+    const [At404, setAt404] = useState(false);
     useEffect(() => {
-        setPathName(window.location.pathname);
+        setPath(window.location.pathname);
     }, []);
     useEffect(() => {
-        if (window.___passed == true)
-            return;
-        if (at == "" || at == undefined) {
-            window.__status_code__ = statusCode || 404;
-            setIs404(true);
+        const childrenToProcess = Array.isArray(childArray.current)
+            ? childArray.current
+            : [childArray.current];
+        childrenToProcess.forEach((child) => {
+            if (child?.props?.at === path) {
+                matched.current = child.props;
+            }
+        });
+        if (!matched.current) {
+            childrenToProcess.forEach((child) => {
+                if (child?.props?.at === undefined) {
+                    matched.current = child.props;
+                    setAt404(true);
+                }
+            });
+        }
+        setCurrentlyAwaiting(false);
+    }, [path]);
+    useEffect(() => {
+        if (matched.current && !At404) {
+            setMatchedEl(() => matched.current.page);
+            window.__status_code__ = matched.current.statusCode || 200;
+        }
+        else if (At404) {
+            setMatchedEl(() => matched.current.page);
+            window.__status_code__ = matched.current.statusCode || 404;
         }
         else {
-            if (pathName == at) {
-                window.__status_code__ = statusCode || 200;
-            }
-            else {
-                return;
-            }
+            setMatchedEl(() => NotFound);
+            window.__status_code__ = 404;
         }
-        window.___passed = true;
-        setThisPassed(true);
-    }, [pathName]);
-    return (_jsx(_Fragment, { children: thisPassed ? (_jsx(_Fragment, { children: _jsx(Page, {}) })) : (_jsx(_Fragment, {})) }));
+    }, [path]);
+    if (matched.current && MatchedEl)
+        return _jsx(MatchedEl, {});
+    if (currentlyAwaiting)
+        return _jsx(_Fragment, {});
+    return _jsx(NotFound, {});
+}
+export function Route({ page, statusCode, at }) {
+    return (_jsx(_Fragment, {}));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.0.2-beta.3",
+  "version": "0.1.0",
   "description": "A Next.js-inspired SSR framework for Node.js with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -35,7 +35,8 @@
     "lightweight",
     "hot-reload",
     "dev",
-    "developer"
+    "developer",
+    "HostJS"
   ],
   "author": "bananacool467",
   "license": "MIT",