@spirobel/mininext 0.7.5 → 0.8.0

package/README.md

@@ -17,13 +17,7 @@ github:
 quickstart:
 
 ```bash
-bun create spirobel/gucci yournewproject
-```
-
-barebones quickstart:
-
-```bash
-bun create spirobel/aldi yournewproject
+bun create spirobel/counter yournewproject
 ```
 
 if you don't have bun installed, run first:
@@ -41,27 +35,19 @@ bun install
 dev:
 
 ```bash
-bun run dev
+bun run --hot counter.ts
 ```
 
 production:
 
 ```bash
-bun run start
-```
-
-build:
-
-```bash
-bun run build
+NODE_ENV=production bun run counter.ts
 ```
 
 ## Tutorial
 
-If you understand these 3 basic concepts you can build your own website with mininext:
+If you understand these 3 basic concepts you can build your own webapp with mininext:
 
 1. html + css
 2. templating
 3. you can use data inside of your html templates
-
-Tutorial video: [intro to mininext](https://www.youtube.com/watch?v=rz4awKntpzE)

package/dist/backend/html.d.ts

@@ -0,0 +1,46 @@
+import { type CacheAndCursor } from "../minicache";
+import { type Mini, type MiniValue, type ResolvedMiniHtmlString } from "../mininext";
+export declare function newBackendMini(): Mini;
+export type Skeleton = {
+    static_routes: BunStaticRoutes;
+    _build_result: Bun.BuildOutput;
+    _rendered_skeleton: {
+        result: string;
+        placeholder_ids: string[];
+    };
+    _resolved_skeleton: ResolvedMiniHtmlString;
+    import_paths: string[];
+    fill: (...args: MiniValue[]) => Blob;
+    mini: () => Mini;
+};
+export type SkeletonBuildParams = {
+    stringLiterals: TemplateStringsArray;
+    values: MiniValue[];
+    root: string;
+    mini?: Mini;
+    config?: Bun.BuildConfig;
+};
+export declare function buildSkeleton({ stringLiterals, values, root, mini, config, }: SkeletonBuildParams): Promise<Skeleton>;
+export declare function build(params: SkeletonBuildParams): Promise<Skeleton>;
+export declare function curryFill(placeholder_ids: string[], rendered_skeleton: string, mini?: Mini): (...args: MiniValue[]) => Blob;
+export declare function renderBackend(cac: CacheAndCursor): {
+    result: string;
+    placeholder_ids: string[];
+};
+export type BunStaticRoutes = Record<string, Response>;
+export declare function createStaticRoutes(build_result: Bun.BuildOutput): BunStaticRoutes;
+export declare function getCallerDir(): string;
+export declare function hmr(skel: Skeleton, params: SkeletonBuildParams): Promise<void>;
+declare global {
+    interface ReadableStream<R = any> {
+        /** consumes the stream and returns the full content as string */
+        text(): Promise<string>;
+        /** consumes the stream and parses it as JSON */
+        json(): Promise<unknown>;
+        /** consumes the stream as ArrayBuffer */
+        arrayBuffer(): Promise<ArrayBuffer>;
+        /** consumes the stream as Uint8Array */
+        bytes(): Promise<Uint8Array>;
+    }
+    var minireload: () => void;
+}

package/dist/backend/html.js

@@ -0,0 +1,233 @@
+import { getResolvedMiniHtmlStringThrows, } from "../minicache";
+import { isBackend, makeNewMini, resolveMiniValue, } from "../mininext";
+import { resolve as backendResolve } from "./miniresolve";
+export function newBackendMini() {
+    return makeNewMini({
+        cache: new Map(),
+        cursor: "1",
+    });
+}
+export async function buildSkeleton({ stringLiterals, values, root, mini, config, }) {
+    const watchedPaths = [];
+    const logPathsPlugin = {
+        name: "log-paths",
+        setup(build) {
+            build.onLoad({ filter: /.*/ }, (args) => {
+                watchedPaths.push(args.path);
+                return undefined;
+            });
+        },
+    };
+    if (!isBackend)
+        throw new Error(`build() can only be called on backend, not frontend.
+            Use renderRoot() in to mount components in the frontend`);
+    if (!mini)
+        mini = newBackendMini();
+    const _resolved_skeleton = backendResolve(stringLiterals, values, mini);
+    const _rendered_skeleton = renderBackend(mini.cacheAndCursor);
+    const minify = Bun.env.NODE_ENV === "production";
+    const indexpath = root + "/index.html";
+    const _build_result = await Bun.build({
+        entrypoints: [indexpath],
+        files: {
+            [indexpath]: _rendered_skeleton.result,
+        },
+        plugins: [logPathsPlugin],
+        root,
+        minify,
+        ...(config ?? {}),
+    });
+    if (Bun.env.NODE_ENV === "production") {
+        if (!_build_result.success) {
+            console.error("Build failed:", _build_result.logs);
+            process.exit(1);
+        }
+    }
+    let htmlArtifact = _build_result.outputs.find((output) => output.path === "./index.html");
+    if (!htmlArtifact) {
+        throw new Error("No index.html found in build outputs");
+    }
+    let rendered_built_result = await htmlArtifact.text();
+    const static_routes = createStaticRoutes(_build_result);
+    if (Bun.env.NODE_ENV !== "production") {
+        const buildId = crypto.randomUUID();
+        const hmrUrl = `/hmr-${buildId}`;
+        static_routes[hmrUrl] = new Response(JSON.stringify({ buildId: buildId }), {
+            headers: { "Content-Type": "application/json; charset=utf-8" },
+        });
+        const hmrReloadScript = `<script>
+          setInterval(reload, 100); 
+          async function reload(){
+            try {
+              const res = await fetch("${hmrUrl}");
+              if (!res.ok) return location.reload();
+              const { buildId } = await res.json();
+              if (buildId !== "${buildId}") location.reload();
+            } catch {
+              location.reload();
+            }
+          }
+    </script>`;
+        const rewriter = new HTMLRewriter().on("body", {
+            element(head) {
+                head.append(hmrReloadScript, { html: true });
+            },
+        });
+        rendered_built_result = rewriter.transform(rendered_built_result);
+    }
+    const getMini = () => {
+        const newMini = newBackendMini();
+        newMini.fill = curryFill(_rendered_skeleton.placeholder_ids, rendered_built_result, newMini);
+        return newMini;
+    };
+    const fill = curryFill(_rendered_skeleton.placeholder_ids, rendered_built_result);
+    const result = {
+        static_routes,
+        _build_result,
+        _rendered_skeleton,
+        _resolved_skeleton,
+        mini: getMini,
+        fill,
+        import_paths: watchedPaths,
+    };
+    return result;
+}
+export async function build(params) {
+    const result = await buildSkeleton(params);
+    if (Bun.env.NODE_ENV !== "production") {
+        hmr(result, params);
+    }
+    return result;
+}
+export function curryFill(placeholder_ids, rendered_skeleton, mini) {
+    const fill = (...args) => {
+        let localSkeleton = rendered_skeleton;
+        const localMini = mini ?? newBackendMini();
+        let pointer = 0;
+        for (const placeholderID of placeholder_ids) {
+            const filler = args[pointer];
+            if (typeof filler === undefined || filler === null) {
+                localSkeleton = localSkeleton.replace(placeholderID, "");
+            }
+            else if (typeof filler === "string" || typeof filler === "number") {
+                localSkeleton = localSkeleton.replace(placeholderID, String(filler));
+            }
+            else {
+                const slotId = `${pointer}-filled`;
+                resolveMiniValue(filler, localMini, slotId);
+                const newCac = { ...localMini.cacheAndCursor, cursor: slotId };
+                const renderedValue = renderBackend(newCac);
+                localSkeleton = localSkeleton.replace(placeholderID, renderedValue.result);
+            }
+            pointer++;
+        }
+        return new Blob([localSkeleton], { type: "text/html;charset=utf-8" });
+    };
+    return fill;
+}
+export function renderBackend(cac) {
+    const htmlsnippet = getResolvedMiniHtmlStringThrows(cac);
+    if (!htmlsnippet.stringLiterals || !htmlsnippet.values || !htmlsnippet.slots)
+        throw new Error("should have literals,values & slots once resolved");
+    let result = "";
+    const placeholder_ids = [];
+    let index = 0;
+    for (const literal of htmlsnippet.stringLiterals) {
+        const value = index < htmlsnippet.values.length ? htmlsnippet.values[index] : "";
+        if (value && typeof value === "object" && "childId" in value) {
+            const partRender = renderBackend({
+                cache: cac.cache,
+                cursor: value.childId,
+            });
+            result += literal + partRender.result;
+        }
+        else {
+            let primValue = value;
+            if (primValue === null) {
+                const pl_id = crypto.randomUUID();
+                primValue = pl_id;
+                placeholder_ids.push(pl_id);
+            }
+            result += literal + Bun.escapeHTML(primValue);
+        }
+        index++;
+    }
+    return { result, placeholder_ids };
+}
+export function createStaticRoutes(build_result) {
+    const routes = {};
+    for (const output of build_result.outputs) {
+        if (output.path === "./index.html")
+            continue;
+        let urlPath = output.path;
+        if (urlPath.startsWith("./")) {
+            urlPath = "/" + urlPath.slice(2);
+        }
+        routes[urlPath] = new Response(output, {
+            headers: { "Content-Type": output.type },
+        });
+    }
+    return routes;
+}
+export function getCallerDir() {
+    const origPrepareStackTrace = Error.prepareStackTrace;
+    Error.prepareStackTrace = (_, stack) => stack; // Return raw CallSite objects
+    const err = new Error();
+    Error.captureStackTrace(err, getCallerDir); // Skip frames up to this function
+    const stack = err.stack; // Type it as CallSite array
+    Error.prepareStackTrace = origPrepareStackTrace; // Restore original
+    // stack[0] should now be the caller of getCallerDir (inside build)
+    // stack[1] is the external caller of build
+    const callerCallsite = stack[1];
+    if (!callerCallsite) {
+        throw new Error("Unable to determine caller directory");
+    }
+    const callerFile = callerCallsite.getFileName();
+    if (!callerFile) {
+        throw new Error("Caller file name not available");
+    }
+    let lastSlash = callerFile.lastIndexOf("/");
+    let lastBackslash = callerFile.lastIndexOf("\\");
+    let lastSep = Math.max(lastSlash, lastBackslash);
+    if (lastSep <= 0) {
+        return ".";
+    }
+    return callerFile.slice(0, lastSep);
+}
+export async function hmr(skel, params) {
+    const escapedPaths = skel.import_paths
+        .slice(1)
+        .map((p) => JSON.stringify(p))
+        .join(", ");
+    const watcherCode = `
+  import fs from "node:fs"; 
+  const files=[${escapedPaths}];
+  files.forEach(f=>fs.watchFile(f,{interval:100},()=>{
+              console.log("file changed:",f);
+             process.exit(0);
+            })
+   );`;
+    const proc = Bun.spawn(["bun", "run", "-"], {
+        stdin: "pipe",
+        stdout: "pipe",
+        stderr: "pipe",
+    });
+    proc.stdin.write(watcherCode);
+    proc.stdin.end();
+    const output = await proc.stdout.text();
+    console.log("(hmr process)", output);
+    if (output.includes("file changed:")) {
+        const newSkel = await buildSkeleton(params);
+        Object.assign(skel, {
+            static_routes: newSkel.static_routes,
+            _build_result: newSkel._build_result,
+            _rendered_skeleton: newSkel._rendered_skeleton,
+            _resolved_skeleton: newSkel._resolved_skeleton,
+            fill: newSkel.fill,
+            mini: newSkel.mini,
+        });
+        hmr(skel, params);
+        if (globalThis.minireload)
+            globalThis.minireload();
+    }
+}

package/dist/backend/miniresolve.d.ts

@@ -0,0 +1,8 @@
+import { type CacheAndCursor, type ResolvedMiniCacheValue } from "../minicache";
+import { type Mini, type MiniValue, type ResolvedMiniHtmlString, type StringArray } from "../mininext";
+export declare function resolveMiniHtmlString(stringLiterals: StringArray, unresolvedValues: MiniValue[], mini: Mini, slots: string[]): ResolvedMiniHtmlString;
+export declare function resolveValuesForCache(unresolvedValues: MiniValue[], cac: CacheAndCursor, slots?: string[] | null): {
+    slots: string[];
+    values: ResolvedMiniCacheValue[];
+};
+export declare function resolve(stringLiterals: StringArray, unresolvedValues: MiniValue[], mini: Mini): ResolvedMiniHtmlString;

package/dist/backend/miniresolve.js

@@ -0,0 +1,60 @@
+import {} from "../minicache";
+import { resolveMiniValue, } from "../mininext";
+export function resolveMiniHtmlString(stringLiterals, unresolvedValues, mini, slots) {
+    const resolvedValues = [];
+    let index = 0;
+    for (const unresolvedValue of unresolvedValues) {
+        const slotId = slots[index];
+        if (!slotId)
+            throw new Error(`Could not find slot id for ${unresolvedValue}`);
+        resolvedValues.push(resolveMiniValue(unresolvedValue, mini, slotId));
+        index++;
+    }
+    return {
+        slots,
+        stringLiterals,
+        values: resolvedValues,
+        render: (target, cacheAndCursor) => {
+            throw new Error(`not implemented, should not be called on backend.
+        Use .build() to make an html skeleton, then use .fill() to fill in the values`);
+        },
+    };
+}
+export function resolveValuesForCache(unresolvedValues, cac, slots = null) {
+    // todo increment number in root cursor instead of using random  (1-randromroot-to-avoid-collisions-in-frontend)
+    if (!slots)
+        slots = unresolvedValues.map(() => crypto.randomUUID());
+    const values = unresolvedValues.map((value, index) => {
+        const childId = slots[index];
+        if (!childId)
+            throw new Error("Could not find slot id for value");
+        // CASE: primitive
+        if (typeof value === "string" ||
+            typeof value === "number" ||
+            value === null) {
+            const cacheEntry = cac.cache.get(childId);
+            if (cacheEntry) {
+                if (cacheEntry.value === value)
+                    return value;
+                cacheEntry.value = value;
+                cacheEntry.dirty = true;
+                return value;
+            }
+            cac.cache.set(childId, { value, dirty: true });
+            return value;
+        }
+        // CASE: child mini htmlstring or component
+        return { childId };
+    });
+    return { slots, values };
+}
+export function resolve(stringLiterals, unresolvedValues, mini) {
+    // CASE our cache entry does not exist yet is the only one we need to handle in the backend
+    const cac = mini.cacheAndCursor;
+    const { slots, values } = resolveValuesForCache(unresolvedValues, cac);
+    cac.cache.set(cac.cursor, {
+        value: { stringLiterals, values, slots, state: null },
+        dirty: true,
+    });
+    return resolveMiniHtmlString(stringLiterals, unresolvedValues, mini, slots);
+}

package/dist/frontend/minidom.d.ts

@@ -0,0 +1,8 @@
+import type { CacheAndCursor } from "../minicache";
+import { type Mini, type MiniHtmlString } from "../mininext";
+export type RootOptions = {
+    component: (mini: Mini) => MiniHtmlString;
+    container: HTMLElement;
+    cac?: CacheAndCursor;
+};
+export declare function renderRoot(options: RootOptions): void;

package/dist/frontend/minidom.js

@@ -0,0 +1,29 @@
+import { makeNewMini } from "../mininext";
+let roots = [];
+export function renderRoot(options) {
+    roots.push(options);
+    startRafLoop();
+}
+let rafRunning = false;
+function startRafLoop() {
+    if (rafRunning)
+        return;
+    rafRunning = true;
+    function loop() {
+        for (const root of roots) {
+            let { component, cac } = root;
+            if (!cac) {
+                cac = {
+                    cache: new Map(),
+                    cursor: crypto.randomUUID(),
+                };
+            }
+            const mini = makeNewMini(cac);
+            const evaluated = component(mini);
+            const resolved = evaluated.resolve(mini);
+            root.cac = resolved.render(root.container, cac);
+        }
+        requestAnimationFrame(loop);
+    }
+    requestAnimationFrame(loop);
+}

package/dist/frontend/minirender.d.ts

@@ -0,0 +1,10 @@
+import { type CacheAndCursor } from "../minicache";
+export declare function render(target: Element | HTMLElement, cac: CacheAndCursor): CacheAndCursor;
+export type IsInside = {
+    element: boolean;
+    singleQuotes: boolean;
+    doubleQuotes: boolean;
+    lastElement: string;
+};
+export declare function isInside(stringLiteral: string, isInside: IsInside): void;
+export declare function makeIdMap(parent: Element): Map<string, HTMLElement>;

package/dist/frontend/minirender.js

@@ -0,0 +1,136 @@
+import { getCacheEntryThrows, getResolvedMiniHtmlStringThrows, } from "../minicache";
+export function render(target, cac) {
+    const cacheEntry = getCacheEntryThrows(cac);
+    const htmlsnippet = getResolvedMiniHtmlStringThrows(cac);
+    if (!htmlsnippet.stringLiterals || !htmlsnippet.values || !htmlsnippet.slots)
+        throw new Error("should have literals,values & slots once resolved");
+    const children = new Map();
+    let new_html_portion = null;
+    if (cacheEntry.dirty) {
+        let placeholder = "";
+        let index = 0;
+        const inside = {
+            element: false,
+            singleQuotes: false,
+            doubleQuotes: false,
+            lastElement: "",
+        };
+        for (const literal of htmlsnippet.stringLiterals) {
+            isInside(literal, inside);
+            const id = htmlsnippet.slots[index];
+            if (inside.element || inside.lastElement.trim().endsWith("<style")) {
+                placeholder += literal + escapeHtml(htmlsnippet.values[index]);
+            }
+            else if (!inside.element && index < htmlsnippet.values.length) {
+                placeholder += literal + `<span id="${id}"></span>`;
+            }
+            else {
+                placeholder += literal;
+            }
+            index++;
+        }
+        new_html_portion = htmlPortion(placeholder);
+        const idmap = makeIdMap(new_html_portion);
+        for (const childId of htmlsnippet.slots) {
+            const cacheEntry = cac.cache.get(childId);
+            if (!cacheEntry)
+                continue;
+            cacheEntry.el = idmap.get(childId);
+            children.set(childId, cacheEntry);
+        }
+    }
+    if (!cacheEntry.dirty) {
+        for (const childId of htmlsnippet.slots) {
+            const cacheEntry = cac.cache.get(childId);
+            if (!cacheEntry)
+                continue;
+            children.set(childId, cacheEntry);
+        }
+    }
+    for (const [childId, child] of children) {
+        const value = child.value;
+        if (typeof value == "object") {
+            const childtarget = child.el;
+            if (!childtarget)
+                throw new Error(`if not dirty should have el: ${childId}`);
+            render(childtarget, { ...cac, cursor: childId });
+        }
+        else {
+            if (!child.dirty)
+                continue;
+            if (!child.el)
+                child.el = document.getElementById(childId) ?? undefined;
+            if (!child.el)
+                continue; //throw new Error(`${child.value} should have el`);
+            child.el.textContent = String(value);
+            child.dirty = false;
+        }
+    }
+    if (new_html_portion) {
+        const parent = target.parentNode;
+        if (parent)
+            parent.replaceChild(new_html_portion, target);
+        cacheEntry.el = new_html_portion;
+        cacheEntry.dirty = false;
+    }
+    return cac;
+}
+export function isInside(stringLiteral, isInside) {
+    for (const char of stringLiteral) {
+        // Check for HTML element start (< not in quotes)
+        if (char === "<" && !isInside.singleQuotes && !isInside.doubleQuotes) {
+            isInside.element = true;
+        }
+        if (char === ">" && !isInside.singleQuotes && !isInside.doubleQuotes) {
+            isInside.element = false;
+        }
+        if (isInside.element)
+            isInside.lastElement += char;
+        if (!isInside.element)
+            continue;
+        // Handle quotes
+        if (char === "'" && !isInside.doubleQuotes) {
+            isInside.singleQuotes = !isInside.singleQuotes;
+        }
+        else if (char === '"' && !isInside.singleQuotes) {
+            isInside.doubleQuotes = !isInside.doubleQuotes;
+        }
+    }
+}
+function escapeHtml(string) {
+    if (!string)
+        return "";
+    if (typeof string !== "string" && typeof string !== "number")
+        throw new Error(`inside < html > tags or open style tags only use string | number as values.
+       ${JSON.stringify(string)}`);
+    string = String(string);
+    const div = document.createElement("div");
+    div.textContent = string;
+    return div.innerHTML;
+}
+function htmlPortion(html) {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const fragment = template.content;
+    const hasManyRoots = fragment.childElementCount > 1;
+    if (hasManyRoots)
+        throw new Error(`Mini html placeholder template:\n
+    ${html}\n
+    Root elements: ${fragment.childElementCount}
+    Every mini html string should have only one root element.\n`);
+    return fragment.firstElementChild;
+}
+// if element is not in DOM yet we cant use getElementById
+export function makeIdMap(parent) {
+    const idMap = new Map();
+    function recurse(el) {
+        if (el.id) {
+            idMap.set(el.id, el);
+        }
+        for (const child of el.children) {
+            recurse(child);
+        }
+    }
+    recurse(parent);
+    return idMap;
+}

package/dist/frontend/miniresolve.d.ts

@@ -0,0 +1,9 @@
+import { type CacheAndCursor, type ResolvedMiniCacheValue } from "../minicache";
+import { type Mini, type MiniValue, type ResolvedMiniHtmlString, type StringArray } from "../mininext";
+export declare function resolveMiniHtmlString(stringLiterals: StringArray, unresolvedValues: MiniValue[], mini: Mini, slots: string[]): ResolvedMiniHtmlString;
+export declare function resolveValuesForCache(unresolvedValues: MiniValue[], cac: CacheAndCursor, slots?: string[] | null): {
+    slots: string[];
+    values: ResolvedMiniCacheValue[];
+};
+export declare function resolve(stringLiterals: StringArray, unresolvedValues: MiniValue[], mini: Mini): ResolvedMiniHtmlString;
+export declare function parametricHtmlChanges(stringLiterals: StringArray, cached_values: ResolvedMiniCacheValue[] | null, values: MiniValue[]): boolean;