@spirobel/mininext 0.7.5 → 0.8.0

package/dist/mininext.js

@@ -1,242 +1,140 @@
-import { url, Mini, has } from "./url";
-import { isError, HtmlString, BasedHtml, head, commonHead, cssReset, basedHtml as html, } from "./html";
-import { $ } from "bun";
-import { watch } from "fs/promises";
-import * as path from "path";
-function projectRoot() {
-    return global.PROJECT_ROOT || import.meta.dir + "/../../../../";
+import { state } from "./minicache";
+import { resolve } from "./frontend/miniresolve";
+import { resolve as backendResolve } from "./backend/miniresolve";
+import { build, getCallerDir, newBackendMini, renderBackend, } from "./backend/html";
+export { renderRoot } from "./frontend/minidom";
+export { createRouter } from "./frontend/minirouter";
+export const isBackend = typeof window === "undefined";
+export function html(stringLiterals, ...values) {
+    return constructMiniHtmlString(stringLiterals, values);
 }
-async function build(backendPath = "backend/backend.ts") {
-    if (Bun.argv[2] === "frontend") {
-        const newFrontend = await buildFrontend(Bun.argv[3]);
-        process.stdout.write(JSON.stringify(newFrontend));
-        return 0;
-    }
-    await buildBackend(backendPath);
-    if (Bun.argv[2] === "dev") {
-        await devServer();
-    }
-}
-const streamPlugin = {
-    name: "node stream in the frontend",
-    setup(build) {
-        build.onResolve({ filter: /^stream$/ }, (args) => {
-            const path_to_stream_lib = path.resolve(projectRoot(), "node_modules/stream-browserify/index.js");
-            if (path_to_stream_lib)
-                return {
-                    path: path_to_stream_lib,
-                };
-        });
-    },
-};
-const bufferPlugin = {
-    name: "node buffer in the frontend",
-    setup(build) {
-        build.onResolve({ filter: /^buffer$/ }, (args) => {
-            const path_to_buffer_lib = path.resolve(projectRoot(), "node_modules/buffer/index.js");
-            if (path_to_buffer_lib)
-                return {
-                    path: path_to_buffer_lib,
-                };
-        });
-    },
-};
-const cryptoPlugin = {
-    name: "node crypto in the frontend",
-    setup(build) {
-        build.onResolve({ filter: /^crypto$/ }, (args) => {
-            const path_to_crypto_lib = path.resolve(projectRoot(), "node_modules/crypto-browserify/index.js");
-            if (path_to_crypto_lib)
-                return {
-                    path: path_to_crypto_lib,
-                };
-        });
-    },
-};
-const nodeHttpsPlugin = {
-    name: "node https in the frontend",
-    setup(build) {
-        build.onResolve({ filter: /^https$/ }, (args) => {
-            const path_to_node_https_lib = path.resolve(projectRoot(), "node_modules/https-browserify/index.js");
-            if (path_to_node_https_lib)
-                return {
-                    path: path_to_node_https_lib,
-                };
-        });
-    },
-};
-async function buildBackend(backendPath = "backend/backend.ts") {
-    global.bundledFrontends = {};
-    global.bundledSVGs = {};
-    const i = await import(path.resolve(projectRoot(), backendPath));
-    for (const frontend of url.getFrontends()) {
-        const firstPlaceToLook = path.resolve(path.dirname(frontend.callerPath), `frontend/${frontend.frontendFilePath}`);
-        const secondPlaceToLook = path.resolve(projectRoot(), `frontend/${frontend.frontendFilePath}`);
-        const frontEndPath = (await Bun.file(firstPlaceToLook).exists())
-            ? firstPlaceToLook
-            : secondPlaceToLook;
-        try {
-            const frontendResult = await $ `bun run build.ts frontend ${frontEndPath}`.json();
-            bundledFrontends[`/${frontendResult.url}`] = {
-                frontendContent: frontendResult.script,
-                frontendFilePath: frontend.frontendFilePath,
-                position: frontend.position,
-            };
-        }
-        catch (error) {
-            if (error &&
-                typeof error === "object" &&
-                "exitCode" in error &&
-                "stdout" in error &&
-                "stderr" in error &&
-                error.stdout instanceof Buffer &&
-                error.stderr instanceof Buffer) {
-                console.error(`Failed with exit code: ${error.exitCode}`);
-                console.error("Standard Output:", error.stdout.toString());
-                console.error("Standard Error:", error.stderr.toString());
-            }
-            console.log(await $ `bun run build.ts frontend ${frontEndPath}`.text());
-        }
-    }
-    for (const svg of url.getSvgs()) {
-        const firstPlaceToLook = path.resolve(path.dirname(svg.callerPath), `svgs/${svg.svgFilePath}`);
-        const secondPlaceToLook = path.resolve(projectRoot(), `${svg.svgFilePath}`);
-        const svgResolvedFilePath = (await Bun.file(firstPlaceToLook).exists())
-            ? firstPlaceToLook
-            : secondPlaceToLook;
-        const parsedSvgPath = path.parse(svgResolvedFilePath);
-        const svgContent = Bun.file(svgResolvedFilePath);
-        const svgHash = Bun.hash(await svgContent.arrayBuffer());
-        const svgUrl = `/${parsedSvgPath.name}-${svgHash}.svg`;
-        bundledSVGs[svgUrl] = {
-            svgContent: await svgContent.text(),
-            svgFilePath: svg.svgFilePath,
-            position: svg.position,
-            options: svg.options,
-        };
-    }
-    const res = await Bun.build({
-        entrypoints: [path.resolve(projectRoot(), backendPath)],
-        outdir: path.resolve(projectRoot(), "dist"),
-        naming: "backend.js",
-        minify: Bun.argv[2] === "dev" ? false : true, //production
-        target: "bun",
-        define: {
-            bundledFrontends: JSON.stringify(bundledFrontends),
-            bundledSVGs: JSON.stringify(bundledSVGs),
+export function constructMiniHtmlString(stringLiterals, values) {
+    return {
+        stringLiterals,
+        values,
+        resolve: (mini) => {
+            if (isBackend)
+                return backendResolve(stringLiterals, values, mini);
+            return resolve(stringLiterals, values, mini);
         },
-    });
-}
-async function buildFrontend(file) {
-    const result = await Bun.build({
-        entrypoints: [file],
-        outdir: path.resolve(projectRoot(), "dist"),
-        naming: "[name]-[hash].[ext]",
-        minify: Bun.argv[2] === "dev" ? false : true, //production
-        target: "browser",
-        plugins: [bufferPlugin, streamPlugin, cryptoPlugin, nodeHttpsPlugin],
-    });
-    if (!result?.outputs[0]?.path)
-        console.log(result);
-    const url = path.basename(result.outputs[0].path);
-    //results.push({ file, p });
-    return { url, script: await result.outputs[0].text() };
+        async build(mini, root, config) {
+            if (!root)
+                root = getCallerDir();
+            return await build({ stringLiterals, values, root, mini, config });
+        },
+        renderBackend: (mini) => {
+            if (!mini)
+                mini = newBackendMini();
+            backendResolve(stringLiterals, values, mini);
+            return renderBackend(mini.cacheAndCursor).result;
+        },
+    };
 }
-async function devServer() {
-    //start the reloader and tell browser to refresh once
-    await buildBackend();
-    let refreshed_once = false;
-    const server = Bun.serve({
-        port: 3001,
-        fetch(request) {
-            const success = server.upgrade(request);
-            return success
-                ? new Response("Reloader works!")
-                : new Response("Reloader WebSocket upgrade error", { status: 400 });
+export function makeNewMini(cac) {
+    return {
+        html,
+        state: (name, value, global) => {
+            if (isBackend)
+                global = true;
+            return state(name, value, cac, global);
         },
-        websocket: {
-            open(ws) {
-                ws.subscribe("reloader");
-                if (!refreshed_once) {
-                    ws.send("Reload!");
-                    refreshed_once = true;
-                }
-            },
-            message(ws, message) { }, // a message is received
+        flatten,
+        cacheAndCursor: cac,
+        fill: (...args) => {
+            throw new Error("this method can only be used if the mini instance was made from a html skeleton, const skeleton = html`<div></div>`.build(); const mini = skeleton.mini(); const htmlresult = skeleton.fill(...args);");
         },
-    });
-    async function watchAndBuild(dir) {
-        try {
-            //start the file watcher that will rebuild frontend on save
-            const watcher = watch(path.resolve(projectRoot(), dir), {
-                recursive: true,
-            });
-            for await (const event of watcher) {
-                buildBackend().then(() => {
-                    // tell browser to refresh again because we saw a change
-                    server.publish("reloader", "Reload!");
-                });
-            }
+    };
+}
+export function standardFlattenRoot(htmlstrings) {
+    return html `<div>${htmlstrings}</div>`;
+}
+export function flatten(htmlStringArray, flattenRootFn = standardFlattenRoot) {
+    const flattenedArray = combineMiniHtmlStrings(htmlStringArray);
+    return flattenValues(flattenRootFn(flattenedArray));
+}
+export function flattenValues(miniHtmlString) {
+    const literalsArray = [];
+    const values = [];
+    let mergeWithPrior = false;
+    let index = 0;
+    for (const literal of miniHtmlString.stringLiterals) {
+        if (mergeWithPrior) {
+            mergeWithPrior = false;
+            literalsArray[index] += literal;
+        }
+        else {
+            literalsArray.push(literal);
         }
-        catch (e) {
-            console.log(`mini-next dev server has trouble watching "./${dir}", does the directory exist?`);
+        const value = miniHtmlString.values[index];
+        if (typeof value === "function") {
+            throw new Error(`resolve components before passing them into the root element when flattening,
+         with const miniHtmlString = component(mini);
+         
+         optimally just have the root element's only value be the htmlstringsarray
+         you want to flatten. This is not the place for complex logic,
+         it is just to wrap your array in an <ul>, <ol> or <div> element.
+         
+         (every mini html string needs to have only one root element)`);
+        }
+        else if (value && typeof value === "object" && "resolve" in value) {
+            const priorLiteral = literalsArray[index];
+            if (!priorLiteral)
+                throw new Error("no prior literal, ");
+            literalsArray[index] = priorLiteral + value.stringLiterals[0];
+            literalsArray.push(...value.stringLiterals.slice(1));
+            mergeWithPrior = true;
+            values.push(...value.values);
+            index += value.stringLiterals.slice(1).length;
+        }
+        else {
+            if (typeof value === "string" || typeof value === "number")
+                values.push(value);
+            index++;
         }
     }
-    watchAndBuild("frontend");
-    watchAndBuild("backend");
+    const stringLiterals = createTemplateStringsArray(literalsArray);
+    return constructMiniHtmlString(stringLiterals, values);
+}
+function combineMiniHtmlStrings(htmlstrings) {
+    const stringLiterals = combineTemplateStringsArrays(htmlstrings.map((hs) => hs.stringLiterals));
+    const values = htmlstrings.flatMap((hs) => hs.values);
+    return constructMiniHtmlString(stringLiterals, values);
 }
-const standardDevReloader = html `
-  <script>
-    function reloader() {
-      let socket = null;
-
-      function connectWebSocket() {
-        if (socket) {
-          return;
+function combineTemplateStringsArrays(tsas) {
+    const stringlits = [];
+    for (const litarray of tsas) {
+        const prior = stringlits.at(-1);
+        const first = litarray[0];
+        if (prior && first) {
+            stringlits[stringlits.length - 1] += first;
+            stringlits.push(...litarray.slice(1));
+        }
+        else {
+            stringlits.push(...litarray);
         }
-        socket = new WebSocket("ws://localhost:3001/reload");
-
-        socket.addEventListener("message", (event) => {
-          window.location.reload();
-        });
-
-        socket.addEventListener("close", (event) => {
-          // Reestablish the connection after 1 second
-          socket = null;
-        });
-
-        socket.addEventListener("error", (event) => {
-          socket = null;
-        });
-      }
-      connectWebSocket(); // connect to reloader, if it does not work:
-      setInterval(connectWebSocket, 1000); // retry every 1 second
-    }
-    reloader();
-  </script>
-`;
-async function makeEntrypoint() {
-    let module;
-    const backendImportPath = projectRoot() + "/dist/backend.js";
-    try {
-        // @ts-ignore
-        module = await import(backendImportPath);
-    }
-    catch (error) {
-        await build();
-        // @ts-ignore
-        module = await import(backendImportPath);
     }
-    return module.default();
+    return createTemplateStringsArray(stringlits);
 }
-export function getCallerFilePath() {
-    // const stack = new Error().stack?.split("\n");
-    // //console.log(stack);
-    // if (!stack) return "";
-    // return stack[2].slice(
-    //   stack[2].lastIndexOf("(") + 1,
-    //   stack[2].lastIndexOf(")") + 3
-    // );
-    return __dirname;
+function createTemplateStringsArray(strings) {
+    const stringsArray = [...strings];
+    const frozenRaw = Object.freeze([...strings]);
+    Object.defineProperty(stringsArray, "raw", {
+        value: frozenRaw,
+        writable: false,
+        enumerable: false,
+        configurable: false,
+    });
+    return Object.freeze(stringsArray);
+}
+export function resolveMiniValue(value, parentMini, slotId) {
+    // make new mini with slotid as cursor
+    const mini = makeNewMini({ ...parentMini.cacheAndCursor, cursor: slotId });
+    if (typeof value === "function") {
+        const component = value(mini);
+        // if this happened we need to save the state to the cache
+        return component.resolve(mini);
+    }
+    if (value && typeof value === "object" && "resolve" in value)
+        return value.resolve(mini);
+    return value;
 }
-export { has, html, url, head, build, makeEntrypoint, isError, BasedHtml, HtmlString, Mini, standardDevReloader, commonHead, cssReset, };

package/package.json

@@ -11,9 +11,9 @@
     "clean": "rm -rf ./dist"
   },
   "files": ["dist"],
-  "version": "0.7.5",
+  "version": "0.8.0",
   "devDependencies": {
-    "@types/bun": "^1.2.9"
+    "@types/bun": "^1.3.9"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

package/dist/html.d.ts

@@ -1,73 +0,0 @@
-import type { HandlerReturnType, HtmlHandler, LazyHandlerReturnType, Mini } from "./url";
-export type HtmlStringValues<T = unknown> = HtmlString | HtmlString[] | BasedHtml | BasedHtml[] | (BasedHtml | HtmlString)[] | string | number | HtmlHandler<T> | JsonString | LazyHandlerReturnType | undefined;
-export type JsonStringValues<T = unknown> = HtmlStringValues<T> | {
-    [key: string]: any;
-};
-export declare class HtmlString extends Array {
-    /**
-     * a HtmlString is by default resolved.
-     * if we we pass a function as a value to the html`` template string, it will be unresolved.
-     * it can also become unresolved if an unresolved HtmlString is passed into it as a value
-     */
-    resolved: boolean;
-    resolve<T>(mini: Mini<T>): Promise<this>;
-    flat(depth?: number): this;
-}
-export declare function html<X = unknown>(strings: TemplateStringsArray, ...values: HtmlStringValues<X>[]): HtmlString;
-export declare class JsonString extends HtmlString {
-}
-export declare class DangerJsonInHtml extends HtmlString {
-}
-export declare const json: <X = unknown>(strings: TemplateStringsArray, ...values: JsonStringValues<X>[]) => JsonString;
-export declare const dangerjson: <X = unknown>(strings: TemplateStringsArray, ...values: JsonStringValues<X>[]) => DangerJsonInHtml;
-export declare const commonHead: HtmlString;
-export declare const cssReset: HtmlString;
-/**
- * Set the default head for all pages. Can still be overwritten on a per page basis
- * @param defaultHead - HtmlString
- *
- * @example Here is what a default head might look like:
- *  ```ts
- *head((mini)=>mini.html` <title>hello hello</title> `);
- * url.set([
- * ["/", (mini) => mini.html`<h1>Hello world</h1>`],
- *  [
- *   "/bye",
- *   (mini) =>
- *     mini.html`<h1>Goodbye world</h1>${mini.head(
- *       mini.html` <title>bye bye</title>`
- *     )}`,
- *  ],
- * ]);
- *  ```
- */
-export declare function head(defaultHead: HtmlHandler): void;
-export declare function htmlResponder(mini: Mini, maybeUnresolved: HandlerReturnType, head?: HtmlHandler, options?: ResponseInit): Promise<Response>;
-/**
- * Generic html error type guard
- * @param submissionResult output of some function
- * @returns boolean - true if the given object has a property called "error" and its value is an instance of HtmlString
- */
-export declare function isError(submissionResult: any | {
-    error: HtmlString;
-}): submissionResult is {
-    error: HtmlString;
-};
-declare global {
-    var Reloader: BasedHtml | HtmlString | undefined;
-}
-/**
- * The difference between this and HtmlString is that it is fully resolved and only accepts primitive types.
- * In plain english this means:
- * It does not accept functions (that will be resolved at request time with (mini)=>mini.html) like mini.html does.
- */
-export declare class BasedHtml extends String {
-}
-export type BasedHtmlValues = number | string | undefined | null | boolean | BasedHtml | BasedHtml[];
-/**
- * The difference between this and HtmlString is that it is fully resolved and only accepts primitive types.
- * @param strings - html literals
- * @param values - values will get escaped to prevent xss
- * @returns
- */
-export declare const basedHtml: (strings: TemplateStringsArray, ...values: BasedHtmlValues[]) => BasedHtml;