@spirobel/mininext 0.3.2 → 0.3.3

package/dist/mininext/html.d.ts

@@ -0,0 +1,73 @@
+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;

package/dist/mininext/html.js

@@ -0,0 +1,288 @@
+export 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 = true;
+    async resolve(mini) {
+        if (this.resolved)
+            return this;
+        for (const [index, htmlPiece] of this.entries()) {
+            if (htmlPiece instanceof HtmlString) {
+                let resolvedHtmlPiece = await htmlPiece.resolve(mini);
+                if (this instanceof JsonString || this instanceof DangerJsonInHtml) {
+                    this[index] = JSON.stringify(resolvedHtmlPiece);
+                }
+                else {
+                    this[index] = resolvedHtmlPiece;
+                }
+            }
+            else if (typeof htmlPiece === "function") {
+                let resolvedHtmlPiece = await htmlPiece(mini); //passing mini
+                //same cases as outer if statement
+                if (resolvedHtmlPiece instanceof HtmlString) {
+                    resolvedHtmlPiece = await resolvedHtmlPiece.resolve(mini);
+                }
+                else if (htmlPiece instanceof BasedHtml) {
+                    this[index] = htmlPiece;
+                }
+                else {
+                    if (this instanceof JsonString || this instanceof DangerJsonInHtml) {
+                        resolvedHtmlPiece = JSON.stringify(resolvedHtmlPiece);
+                    }
+                    else {
+                        const notEmpty = resolvedHtmlPiece || "";
+                        // values will be escaped by default
+                        resolvedHtmlPiece = Bun.escapeHTML(notEmpty + "");
+                    }
+                }
+                // Replace the function with the resolved HTML piece in place
+                this[index] = resolvedHtmlPiece;
+            }
+            else if (htmlPiece instanceof BasedHtml) {
+                this[index] = htmlPiece;
+            }
+        }
+        this.resolved = true;
+        return this;
+    }
+    flat(depth = 1) {
+        const flattened = super.flat(depth);
+        const newHtmlString = new this.constructor(...flattened);
+        newHtmlString.resolved = this.resolved;
+        return newHtmlString;
+    }
+}
+export function html(strings, ...values) {
+    const htmlStringArray = new HtmlString();
+    htmlStringArray.resolved = true;
+    // Iterate over strings and values, alternating between them
+    for (const [index, string] of strings.entries()) {
+        htmlStringArray.push(string);
+        if (index < values.length) {
+            const value = values[index];
+            // we can pass arrays of HtmlString and they will get flattened in the HtmlResponder
+            if (Array.isArray(value) &&
+                value.every((val) => val instanceof HtmlString || val instanceof BasedHtml)) {
+                // If the value is an array of HtmlString objects, add the whole array as a single value
+                const notResolved = new HtmlString(...value);
+                notResolved.resolved = false;
+                values[index] = notResolved;
+                htmlStringArray.resolved = false; // we could bother with .find here
+            }
+            else if (typeof value === "function") {
+                htmlStringArray.resolved = false;
+                values[index] = value;
+            }
+            else if (value instanceof JsonString) {
+                values[index] = html `<div style="color:red;">
+          Please use dangerjson to include json in html. Untrusted input needs
+          to pass through a html template function to get escaped. You can do
+          html -> dangerjson -> html if you want!
+        </div>`;
+            }
+            else if (!(value instanceof HtmlString || value instanceof BasedHtml)) {
+                const notEmpty = value || "";
+                // values will be escaped by default
+                values[index] = Bun.escapeHTML(notEmpty + "");
+            }
+            else if (value instanceof HtmlString) {
+                if (!value.resolved) {
+                    htmlStringArray.resolved = false;
+                }
+            }
+            htmlStringArray.push(values[index]);
+        }
+    }
+    return htmlStringArray;
+}
+export class JsonString extends HtmlString {
+}
+export class DangerJsonInHtml extends HtmlString {
+}
+function JsonTemplateProcessor(danger = false) {
+    const constructorr = danger
+        ? () => new DangerJsonInHtml()
+        : () => new JsonString();
+    return function (strings, ...values) {
+        const jsonStringArray = constructorr();
+        jsonStringArray.resolved = true;
+        // Iterate over strings and values, alternating between them
+        for (const [index, string] of strings.entries()) {
+            jsonStringArray.push(string);
+            if (index < values.length) {
+                const value = values[index];
+                // we can pass arrays of HtmlString and they will get flattened in the HtmlResponder
+                if (Array.isArray(value) &&
+                    value.every((val) => val instanceof HtmlString || val instanceof BasedHtml)) {
+                    // If the value is an array of HtmlString objects, add the whole array as a single value
+                    const notResolved = new HtmlString(...value);
+                    notResolved.resolved = false;
+                    values[index] = notResolved;
+                    jsonStringArray.resolved = false; // we could bother with .find here
+                }
+                else if (typeof value === "function") {
+                    jsonStringArray.resolved = false;
+                    values[index] = value;
+                }
+                else if (value instanceof HtmlString || value instanceof BasedHtml) {
+                    if (value instanceof HtmlString && !value.resolved) {
+                        jsonStringArray.resolved = false;
+                    }
+                    values[index] = value;
+                }
+                else if (!(value instanceof JsonString)) {
+                    // values will be turned into a JSON string
+                    if (value) {
+                        values[index] = JSON.stringify(value);
+                    }
+                }
+                jsonStringArray.push(values[index]);
+            }
+        }
+        return jsonStringArray;
+    };
+}
+export const json = JsonTemplateProcessor();
+export const dangerjson = JsonTemplateProcessor(true);
+export const commonHead = html ` <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <script>
+    /* prevent form resubmission */
+    if (window.history.replaceState) {
+      window.history.replaceState(null, null, window.location.href);
+    }
+  </script>`;
+export const cssReset = html ` <style>
+  /* CSS Reset */
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Set the background color to black */
+  html,
+  body {
+    background-color: #000;
+    color: #fff; /* Set the default text color to white for better contrast */
+  }
+</style>`;
+let default_head = (mini) => mini.html `
+  <title>mini-next</title>
+  ${commonHead} ${cssReset}
+`;
+/**
+ * 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 function head(defaultHead) {
+    default_head = defaultHead;
+}
+export async function htmlResponder(mini, maybeUnresolved, head = default_head, options = {
+    headers: {
+        "Content-Type": "text/html; charset=utf-8",
+    },
+}) {
+    if (!(maybeUnresolved instanceof HtmlString)) {
+        maybeUnresolved = html `${maybeUnresolved + ""}`;
+    }
+    if (maybeUnresolved instanceof DangerJsonInHtml) {
+        maybeUnresolved = html `<div style="color:red;">
+      Use json and not dangerjson. The purpose of dangerjson is to be explicit
+      when you embed unescaped json elements in an html document.
+    </div>`;
+    }
+    if (!(maybeUnresolved instanceof JsonString)) {
+        const reloader = new HtmlString();
+        reloader.push(global.Reloader || "");
+        maybeUnresolved = html `<!DOCTYPE html>
+      <html>
+        <head>
+          ${reloader} ${head}
+        </head>
+        <body>
+          ${maybeUnresolved}
+        </body>
+      </html> `;
+    }
+    else {
+        const headers = {
+            ...options.headers,
+            ...{ "Content-Type": "application/json; charset=utf-8" },
+        };
+        options.headers = headers;
+    }
+    const definitelyResolved = await maybeUnresolved.resolve(mini);
+    const flattend = definitelyResolved.flat(Infinity);
+    async function* stepGen() {
+        let index = 0;
+        while (index < flattend.length) {
+            const step = flattend[index++];
+            if (step)
+                yield String(step);
+        }
+    }
+    function Stream(a) {
+        return a;
+    }
+    return new Response(Stream(stepGen), options);
+}
+/**
+ * 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 function isError(submissionResult) {
+    return ("error" in submissionResult && submissionResult.error instanceof HtmlString);
+}
+/**
+ * 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 class BasedHtml extends String {
+}
+//TODO make it so we can embed BasedHtml into mini.html partially resolved html strings
+/**
+ * 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 const basedHtml = (strings, ...values) => {
+    // Apply escapeHtml to each value before using them in the template string
+    // In case it didn't already get escaped
+    for (const [index, value] of values.entries()) {
+        // we can pass arrays of BasedHtml and they will get flattened automatically
+        if (Array.isArray(value) &&
+            value.every((val) => val instanceof BasedHtml)) {
+            // If the value is an array of BasedHtml objects, flatten it and add to ...values
+            values[index] = value.join("");
+        }
+        else if (!(value instanceof BasedHtml)) {
+            const notEmpty = value || "";
+            // values will be escaped by default
+            values[index] = Bun.escapeHTML(notEmpty + "");
+        }
+    }
+    return new BasedHtml(String.raw({ raw: strings }, ...values));
+};

package/dist/mininext/mininext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="bun-types" />
+/// <reference types="bun-types" />
+import { url, Mini, type HtmlHandler } from "./url";
+import { isError, HtmlString, BasedHtml, head, commonHead, cssReset, basedHtml as html } from "./html";
+import type { Server, WebSocketHandler } from "bun";
+declare global {
+    var PROJECT_ROOT: string | undefined;
+}
+declare function build(backendPath?: string): Promise<void>;
+declare const standardDevReloader: BasedHtml;
+declare function makeEntrypoint(): Promise<{
+    fetch: (req: Request, server: Server) => Promise<Response>;
+    websocket: WebSocketHandler;
+}>;
+export { html, url, head, build, makeEntrypoint, isError, BasedHtml, HtmlString, type HtmlHandler, Mini, standardDevReloader, commonHead, cssReset, };

package/dist/mininext/mininext.js

@@ -0,0 +1,185 @@
+import { url, Mini } from "./url";
+import { isError, HtmlString, BasedHtml, head, commonHead, cssReset, basedHtml as html, } from "./html";
+import { watch } from "fs/promises";
+import * as path from "path";
+function projectRoot() {
+    return global.PROJECT_ROOT || import.meta.dir + "/../../../../";
+}
+async function build(backendPath = "backend/backend.ts") {
+    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,
+                };
+        });
+    },
+};
+async function buildBackend(backendPath = "backend/backend.ts") {
+    global.FrontendScriptUrls = [];
+    global.FrontendScripts = [];
+    global.bundledSVGs = {};
+    const i = await import(path.resolve(projectRoot(), backendPath));
+    for (const frontend of url.getFrontends()) {
+        const f = await buildFrontend(frontend);
+        FrontendScriptUrls.push("/" + f.url);
+        FrontendScripts.push(f.script);
+    }
+    for (const svgPath of url.getSvgPaths()) {
+        const parsedSvgPath = path.parse(svgPath);
+        const svgContent = Bun.file(path.join(projectRoot() + "/backend/", svgPath));
+        const svgHash = Bun.hash(await svgContent.arrayBuffer());
+        const svgUrl = `/${parsedSvgPath.name}-${svgHash}.svg`;
+        bundledSVGs[svgUrl] = {
+            svgContent: await svgContent.text(),
+            svgPath,
+        };
+    }
+    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: {
+            FrontendScripts: JSON.stringify(FrontendScripts),
+            FrontendScriptUrls: JSON.stringify(FrontendScriptUrls),
+            bundledSVGs: JSON.stringify(bundledSVGs),
+        },
+    });
+}
+async function buildFrontend(file) {
+    const result = await Bun.build({
+        entrypoints: [path.resolve(projectRoot(), `frontend/${file}`)],
+        outdir: path.resolve(projectRoot(), "dist"),
+        naming: "[name]-[hash].[ext]",
+        minify: Bun.argv[2] === "dev" ? false : true, //production
+        target: "browser",
+        plugins: [bufferPlugin, streamPlugin, cryptoPlugin],
+    });
+    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 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 });
+        },
+        websocket: {
+            open(ws) {
+                ws.subscribe("reloader");
+                if (!refreshed_once) {
+                    ws.send("Reload!");
+                    refreshed_once = true;
+                }
+            },
+            message(ws, message) { }, // a message is received
+        },
+    });
+    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!");
+                });
+            }
+        }
+        catch (e) {
+            console.log(`mini-next dev server has trouble watching "./${dir}", does the directory exist?`);
+        }
+    }
+    watchAndBuild("frontend");
+    watchAndBuild("backend");
+}
+const standardDevReloader = html `
+  <script>
+    function reloader() {
+      let socket = null;
+
+      function connectWebSocket() {
+        if (socket) {
+          return;
+        }
+        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();
+}
+export { html, url, head, build, makeEntrypoint, isError, BasedHtml, HtmlString, Mini, standardDevReloader, commonHead, cssReset, };