elegance-js 2.1.23 → 2.1.26

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "elegance-js",
-  "version": "2.1.23",
+  "version": "2.1.26",
   "description": "Web-Framework",
   "type": "module",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "bin": {
-    "dev": "./scripts/ts-arc-dev.js",
-    "prod": "./scripts/ts-arc-prod.js",
-    "bootstrap": "./scripts/bootstrap.js",
-    "native": "./scripts/native-test.js"
+    "run": "./scripts/run.js",
+    "static": "./scripts/static.js",
+    "prod": "./scripts/prod.js",
+    "bootstrap": "./scripts/bootstrap.js"
   },
   "scripts": {
-    "build": "esbuild --format=esm --platform=node --bundle=false --outdir=./dist --out-extension:.js=.mjs \"./src/**/*.ts\" && esbuild --format=iife --platform=browser --bundle=true --outfile=./dist/client/client.mjs --out-extension:.js=.mjs ./src/client/client.ts  && tsc ",
-    "compile-docs": "node ./dist/compile_docs.mjs --environment=development",
-    "compile-docs-bun": "bun run ./dist/compile_docs.mjs --environment=development",
+    "build": "npx tsc --project tsconfig.json --rootDir ./src --outDir ./dist && node ./build_scripts/fix_imports.js",
     "prepare": "npm run build"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.mjs"
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     },
     "./*": {
       "types": "./dist/*.d.ts",
-      "import": "./dist/*.mjs",
-      "require": "./dist/*.mjs"
+      "import": "./dist/*.js",
+      "require": "./dist/*.js"
     }
   },
   "files": [
@@ -35,7 +35,7 @@
   "license": "MIT",
   "dependencies": {
     "esbuild": "^0.25.9",
-    "ts-arc": "^1.1.28"
+    "ts-arc": "^1.1.29"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.3",

package/scripts/bootstrap.js

@@ -4,289 +4,38 @@ import fs from "fs";
 import path from "path";
 
 import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
 
-execSync("npm install tailwindcss @tailwindcss/cli");
+execSync("npm install tailwindcss @tailwindcss/cli && npm install --save-dev @types/node");
 
-const dirs = ["pages", "public", "pages/components"];
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const dirs = ["pages", "public", path.join("pages", "api"), path.join("pages", "api", "middleware")];
 dirs.forEach((dir) => {
   if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
 });
 
 const pageTsPath = path.join("pages", "page.ts");
-const indexCssPath = path.join("pages", "index.css");
-const envDtsPath = "env.d.ts";
-const tsconfigPath = "tsconfig.json";
-
-const pageTsContent = `
-import { observe, loadHook, eventListener, state } from "elegance-js";
-
-/*
-    This is state.
-    It uses a simple observer model in the browser (see the observer function)
-    
-    You can update it's value using state.value, and when you want the observers
-    of said state to refresh, call state.signal().
-    
-    You can update the state to whatever value you want it to be,
-    before the page is finished building.
-    
-    Once the page is built, all state values are shipped to the browser as-is.
-*/
-const counter = state(0);
+const layoutTsPath = path.join("pages", "layout.ts");
+const middlewareTsPath = path.join("pages", "api", "middleware", "middleware.ts");
+const routeTsPath = path.join("pages", "api", "route.ts");
 
-/*
-    The server keeps track of every call to the loadHook() function,
-    does some preprocessing, and ships the loadhook to the browser.
-    The browser, after the page loads, runs the content of the function (the second paramater)
-    passed into the loadHook call.
-    
-    Loadhook takes in as it's first parameter, a dependency list of state()'s that
-    the loadHook can then reference in the browser.
-    
-    For newbies, note that the content of loadHook is *browser code*, and thus
-    cannot be trusted!
-*/
-loadHook(
-    [counter],
-    (_, counter) => {
-        const interval = setInterval(() => {
-            counter.value++;
-            counter.signal();
-        }, 1000);
-        
-        return () => clearInterval(interval);
-    },
-)
+const indexTsPath = path.join("index.ts");
+const eleganceTsPath = path.join("elegance.ts");
 
-/*
-    This variable lets you determine whether your page is:
-    1. Built at compile time (non dynamic page).
-        Meaning, the page is turned into HTML, CSS and JS *once*, and then served statically.
-        
-    2. Built per-request (dynamic page).
-        Meaning the page is *transpiled into JS*, and then every time someone requests the page,
-        it is built and then served.
-*/
-export const isDynamicPage = true;
+const bootstrapFilesDir = path.join(__dirname, "bootstrap_files");
 
-/*
-    This is a request hook,
-    it's available for pages with isDynamicPage set to true.
-    
-    It acts a little bit like a middleware.
-    The function is called *before* the page is served.
-    If you end the request in the hook, the page won't be served.
-    
-export const requestHook = (req: http.IncomingMessage, res: http.ServerResponse) => {
-    res.statusCode = 403;
-    res.end();
-};
-*/
-
-/*
-    State can also be an array!
-    In which case, the reactiveMap() method is added onto the state.
-    This allows you to run client-side code, which dynamically changes
-    the page's HTML content based on the state of the array in the browser.
-*/
-const ReactiveMap = () => {
-    const arrayState = state([
-        "John","Mary","William","Kimberly",
-    ]);
-    
-    return arrayState.reactiveMap((item, index) => {
-        index += 1;
-        
-        return div({
-        },
-            index + ". ", item,
-        )
-    })
-};
-
-const SlowComponent = () => {
-    const myMessage = state<string | undefined>(undefined);
-    
-    loadHook(
-        [myMessage],
-        (_, message) => {
-            setTimeout(() => {
-                message.value = "Hello World!";
-                message.signal()
-            }, 2000);
-        },
-    )
-    
-    /*
-        This is a Barrier component.
-        
-        You can use it to guard clause components in the browser.
-        
-        This is useful for when you for example fetch data in the browser,
-        and are waiting for it to resolve.
-        
-        Whilst you're waiting, you can display a loading component,
-        instead of blocking the entire page loading.
-        
-        Whenever any value in the dependency array changes,
-        the component is re-evaluated.
-    */
-    return Barrier(
-        [myMessage],
-        (message) => {
-            if (message === undefined) {
-                return div({
-                    class: "animate-pulse",
-                },
-                    "Loading..",
-                );
-            }
-            
-            return div({
-                class: "animate-bounce",
-            },
-                message
-            );
-        },
-    )
-};
-
-/*
-    This is the actual content of the page.
-    
-    It does not *have* to be an async function.
-    Page can be any value, as long as it resolves into a Child (a built element, eg. string, a return value of an element creation call, etc)
-*/
-export const page: Page = async () => {
-    const pageName = state("Elegance.JS");
-    
-    /*
-        The below is an element creation function.
-        The syntax is roughly similar to how HTML works.
-        
-        A call like: h1("Hello World!")
-        
-        Would generate the HTML: <h1>Hello World!</h1>
-        
-        The first parameter to an element may be another element (child), or an options object.
-        
-        Options objects are used to set things like classNames, style, ids. etc.
-        
-        For example this call: h1({ 
-            id: "my-id", 
-        },
-            "Hello World!"
-        )
-        
-        Turns into this HTML: <h1 id="my-id">Hello World!</h1>
-    */
-    return body ({
-        class: "text-white flex min-h-screen items-start sm:justify-center p-4 bg-black flex-col gap-4 max-w-[500px] w-full mx-auto",
-    },
-        h1 ({
-            class: "text-4xl font-inter font-semibold bg-clip-text text-transparent bg-gradient-to-tl from-[#EEB844] to-[#FF4FED] oveflow-clip",
-        },
-            \`Welcome to \${pageName.value}!\`,
-        ),
-        
-        ReactiveMap(),
-        
-        p ({
-        }, 
-            "Edit page.ts to get started.",
-        ),
-        
-        div({
-            class: "flex items-start gap-4 mt-2",
-        },
-            a ({
-                class: "px-4 py-2 rounded-md bg-red-400 text-black font-semibold relative group hover:scale-[1.05] duration-200",
-                href: "https://elegance.js.org/",
-                target: "_blank",
-            },
-                "Documentation",
-                
-                div ({
-                    class: "blur-[50px] absolute group-hover:bg-red-400 inset-0 bg-transparent duration-200 pointer-events-none -z-10",
-                    "aria-hidden": "true",
-                }),
-            ),
-                
-            button ({
-                class: "hover:cursor-pointer px-4 py-2 rounded-md bg-zinc-200 text-black font-semibold relative group hover:scale-[1.05] duration-200",
-                /*
-                    Normally, element attributes can only be a string, number or boolean.
-                    
-                    However, exceptions are made for *object attributes*.
-                    These are special values that usually perform client-side actions.
-                    
-                    Take the below for example.
-                    The eventListener() takes in a dependency array, and a callback function.
-                    
-                    It then returns an ObjectAttribute of type EVENT_LISTENER.
-                    
-                    The elegance-compiler, when it sees this, packs up the callback function and state references,
-                    and ships it to the page.
-                    
-                    The page, when it loads, then binds the eventListener callback to the corresponding event (in this case, "onclick").
-                    
-                    ObjectAttributes do not show up in HTML!
-                */
-                onClick: eventListener(
-                    [counter],
-                    (_, counter) => {
-                        counter.value++;
-                        
-                        counter.signal();
-                    },
-                ),
-                
-                /*
-                    This is another ObjectAttribute, just like eventListener
-                    It takes in an array of state it should watch,
-                    and when that state calls its state.signal() method,
-                    
-                    The observer calls it's callback function with the new values,
-                    and whatever is returned, is the new value of the property.
-                    
-                    So in this instance, whenever counter.signal() is called
-                    this observer displays Counter: VALUE, and makes it the
-                    innerText of this button.
-                */
-                innerText: observe([counter], (counter) => \`Counter: \${counter}\`),
-            },
-                div ({
-                    class: "blur-[50px] absolute group-hover:bg-zinc-200 inset-0 bg-transparent duration-200 pointer-events-none -z-10",
-                    "aria-hidden": "true",
-                }),
-            ),
-        )
-    );
-}
- 
-/*
-    This is the metadata of the page.
-    Aka the <head> element which gets served alongside the page content.
-    
-    It *must* be a function that resolves into a head() result.
-    
-    In it, you should do things like link your stylesheets,
-    set page titles, all that goodness.
-*/   
-export const metadata: Metadata = (...children) => html ({
-    lang: "en",
-},
-    link ({
-        rel: "stylesheet",
-        href: "/index.css",
-    }),
-    
-    title ("Elegance.JS Demo"),
-    
-    ...children,
-)
+const pageTsContent = fs.readFileSync(path.join(bootstrapFilesDir, "page.txt"));
+const layoutTsContent = fs.readFileSync(path.join(bootstrapFilesDir, "layout.txt"));
+const middlewareTsContent = fs.readFileSync(path.join(bootstrapFilesDir, "middleware.txt"));
+const routeTsContent = fs.readFileSync(path.join(bootstrapFilesDir, "route.txt"));
+const indexTsContent = fs.readFileSync(path.join(bootstrapFilesDir, "index.txt"));
+const eleganceTsContent = fs.readFileSync(path.join(bootstrapFilesDir, "elegance.txt"));
 
-`;
+const indexCssPath = path.join("pages", "input.css");
+const envDtsPath = "env.d.ts";
+const tsconfigPath = "tsconfig.json";
 
 const envDtsContent = `/// <reference types="elegance-js/global" />`;
 
@@ -323,9 +72,24 @@ const indexCssContent = `
 `;
 
 fs.writeFileSync(pageTsPath, pageTsContent, "utf8");
+fs.writeFileSync(layoutTsPath, layoutTsContent, "utf8");
+fs.writeFileSync(routeTsPath, routeTsContent, "utf8");
+fs.writeFileSync(middlewareTsPath, middlewareTsContent, "utf8");
 fs.writeFileSync(indexCssPath, indexCssContent, "utf8");
 fs.writeFileSync(envDtsPath, envDtsContent, "utf8");
 fs.writeFileSync(tsconfigPath, tsconfigContent, "utf8");
 
+if (process.argv[2] === "--manual") {
+    console.log("--manual: Creating manual defaults..");
+
+    execSync("npm install ts-arc");
+
+    fs.writeFileSync(eleganceTsPath, eleganceTsContent, "utf8");
+    fs.writeFileSync(indexTsPath, indexTsContent, "utf8");
+
+    console.log("Run this project with: npx ts-arc index.ts");
+} else {
+    console.log("Run this project with: npx run");
+}
+
 console.log("Bootstrapped new project!");
-console.log("Run this project with: npx dev")

package/scripts/bootstrap_files/elegance.txt

@@ -0,0 +1,40 @@
+import { execSync } from "child_process";
+import { serveProject, compileEntireProject, setCompilerOptions, } from "elegance-js";
+import path from "path";
+
+async function runtime() {
+    const pagesDirectory = path.resolve("./pages");
+    const publicDirectory = path.resolve("./public");
+    const outputDirectory = path.resolve(".elegance");
+
+    setCompilerOptions({
+        pagesDirectory: pagesDirectory,
+        publicDirectory: publicDirectory,
+        outputDirectory: outputDirectory,
+        environment: "development",
+
+        doHotReload: true,
+    });
+
+    const { allLayouts, allPages, allStatusCodePages, compiledStaticLayouts, compiledStaticPages, } = await compileEntireProject();
+
+    execSync(`npx @tailwindcss/cli -i ${path.join(pagesDirectory, "input.css")} -o ${path.join(outputDirectory, "DIST", "index.css")}`);
+
+    await serveProject({
+        port: 3000,
+        hostname: "0.0.0.0",
+        
+        allowDynamic: true,
+        allowStatusCodePages: true, 
+        serveAPI: true,
+        
+        allLayouts,
+        allStatusCodePages,
+        allPages,
+
+        builtStaticPages: compiledStaticPages,
+        builtStaticLayouts: compiledStaticLayouts,
+    });
+}
+
+runtime();

package/scripts/bootstrap_files/index.txt

@@ -0,0 +1,3 @@
+import { startEleganceRuntime } from "elegance-js";
+
+startEleganceRuntime("./elegance.ts");

package/scripts/bootstrap_files/layout.txt

@@ -0,0 +1,46 @@
+import { AnyElement, loadHook, observer, state } from "elegance-js";
+
+function Header() {
+    const pathname = state("");
+
+    loadHook((pathname) => {
+        pathname.value = window.location.pathname;
+
+        const id = eleganceClient.onNavigate((newPathname) => {
+            pathname.value = newPathname;
+        });
+
+        return () => eleganceClient.removeNavigationCallback(id);
+    }, [pathname])
+
+    return div({
+        class: "px-4 py-2 w-max rounded-md bg-green-400 text-black"
+    },
+        "Currently visiting: ",
+
+        span({
+            innerText: observer(pathname)
+        }),
+    );
+}
+
+export function layout(child: AnyElement) {
+    return html(
+        body({
+            class: "bg-black text-white h-screen w-screen grid grid-cols-1 p-4 gap-4 grid-rows-[auto_1fr]",
+        },
+            Header(),
+
+            child,
+        ),
+    );
+}
+
+export function metadata() {
+    return [
+        link({
+            rel: "stylesheet",
+            href: "/index.css",
+        }),
+    ]
+}

package/scripts/bootstrap_files/middleware.txt

@@ -0,0 +1,18 @@
+import { IncomingMessage, ServerResponse } from "http";
+
+async function middleware(req: IncomingMessage, res: ServerResponse, next: () => void) {
+    if (Math.random() > 0.3) {
+        res.statusCode = 401;
+        res.end("Sorry, you're not getting into this page, cause you're not logged in!");
+        
+        next();
+
+        return;
+    }
+
+    next();
+}
+
+export {
+    middleware,
+}

package/scripts/bootstrap_files/page.txt

@@ -0,0 +1,123 @@
+import { ClientComponent, eventListener, loadHook, observer, state } from "elegance-js";
+
+function Counter() {
+    const counter = state(0);
+
+    return div({
+        class: "flex flex-col"
+    },
+        div({
+            class: "flex gap-2"
+        },
+            button({
+                onClick: eventListener((_, counter) => {
+                    counter.value--;
+                }, [counter]),
+                class: "w-max hover:scale-120 hover:duration-200 p-2 rounded-sm bg-gray-400 text-black"
+            },
+                "Less!",
+            ),
+            button({
+                onClick: eventListener((_, counter) => {
+                    counter.value++;
+                }, [counter]),
+                class: "w-max hover:scale-120 hover:duration-200 p-2 rounded-sm bg-gray-400 text-black"
+            },
+                "More!",
+            ),
+        ),
+
+        div(
+            "The counter is at: ",
+            span({ innerText: observer(counter), })
+        ),
+    );
+}
+
+function NameList() {
+    const names = state(["Lisa", "John", "Mary", "Mike"]);
+
+    loadHook((names) => {
+        const intervalId = setInterval(() => {
+            names.value.sort(() => Math.random() - 0.5);
+            names.triggerObservers();
+        }, 1000);
+
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [names]);
+
+    return div(
+        h3({
+            class: "font-semibold"
+        },
+            "My favourite people:",
+        ),
+        div({
+            class: "grid grid-rows-2 grid-cols-2 w-max gap-2 font-mono",
+        },
+            names.reactiveMap((name) => p(name))
+        )
+    );
+}
+
+function SlowComponent() {
+    const slowData = state<undefined | number>(undefined);
+
+    loadHook((slowData) => {
+        const id = Date.now().toString();
+
+        let timeoutId: NodeJS.Timeout;
+
+        slowData.observe(id, (value) => {
+            if (value !== undefined) return;
+
+            timeoutId = setTimeout(() => {
+                slowData.value = Math.random() * 100;
+            }, Math.random() * 1000 * 2 + 1);
+        })
+
+        return () => {
+            clearTimeout(timeoutId);
+        }
+    }, [slowData]);
+
+    return div(
+
+        button({
+            disabled: observer((s) => s === undefined ? true : false, [slowData]),
+            class: "disabled:opacity-30",
+            onClick: eventListener((_, slowData) => {
+                slowData.value = undefined;
+            }, [slowData]),
+        }, "Refresh"),
+
+        ClientComponent((slowData) => {
+            if (!slowData.value) {
+                return div("Waiting for slow data..");
+            }
+
+            return div("Slow Component gave result: ", slowData.value);
+        }, [slowData]),
+
+    );
+}
+
+export function page() {
+    return div({
+        class: "bg-gray-950 border-2 border-gray-900 p-4 flex flex-col gap-8"
+    },
+        Counter(),
+
+        NameList(),
+
+        SlowComponent(),
+    );
+}
+
+export function metadata() {
+    return [
+        title("This is a demo page!"),
+    ]
+}

package/scripts/bootstrap_files/route.txt

@@ -0,0 +1,6 @@
+import { IncomingMessage, ServerResponse } from "http";
+
+export async function GET(req: IncomingMessage, res: ServerResponse) {
+    res.statusCode = 403;
+    res.end("You're not allowed!! Shoo!");
+}

package/scripts/elegance_dev.ts

@@ -0,0 +1,40 @@
+import { execSync } from "child_process";
+import { serveProject, compileEntireProject, setCompilerOptions, } from "elegance-js";
+import path from "path";
+
+async function runtime() {
+    const pagesDirectory = path.resolve("./pages");
+    const publicDirectory = path.resolve("./public");
+    const outputDirectory = path.resolve(".elegance");
+
+    setCompilerOptions({
+        pagesDirectory: pagesDirectory,
+        publicDirectory: publicDirectory,
+        outputDirectory: outputDirectory,
+        environment: "development",
+
+        doHotReload: true,
+    });
+
+    const { allLayouts, allPages, allStatusCodePages, compiledStaticLayouts, compiledStaticPages, } = await compileEntireProject();
+
+    execSync(`npx @tailwindcss/cli -i ${path.join(pagesDirectory, "input.css")} -o ${path.join(outputDirectory, "DIST", "index.css")}`);
+
+    await serveProject({
+        port: 3000,
+        hostname: "0.0.0.0",
+        
+        allowDynamic: true,
+        allowStatusCodePages: true, 
+        serveAPI: true,
+        
+        allLayouts,
+        allStatusCodePages,
+        allPages,
+
+        builtStaticPages: compiledStaticPages,
+        builtStaticLayouts: compiledStaticLayouts,
+    });
+}
+
+runtime();