@spirobel/mininext 0.3.5 → 0.3.7

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@spirobel/mininext",
   "license" : "MIT" ,
-  "module": "dist/mininext.js",
+  "module": "dist/mininext/mininext.js",
   "type": "module",
   "main": "dist/mininext.js",
   "types": "dist/mininext.d.ts",
   "scripts": {
     "publish": "bun run build && npm publish",
-    "build": "tsc"
+    "build": "tsc",
+    "clean":"rm -rf ./dist"
   },
-  "files": ["dist", "mininext"],
-  "version": "0.3.5",
+  "files": ["dist"],
+  "version": "0.3.7",
   "devDependencies": {
     "@types/bun": "latest"
   },

package/dist/tests/html.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/tests/html.test.js

@@ -1,38 +0,0 @@
-import { expect, test, mock } from "bun:test";
-import { html, url } from "../mininext/mininext";
-// Example of creating a mock request object
-const mockRequestObject = {
-    method: "GET", // or 'POST', etc.
-    url: "http://example.com/api/some-endpoint",
-    body: JSON.stringify({ key: "value" }),
-    headers: {
-        "Content-Type": "application/json",
-        get: () => undefined,
-    },
-};
-const makeMockRequest = mock(() => mockRequestObject);
-test("no xss when BasedHtml inside of html", async () => {
-    const req = makeMockRequest();
-    url.set([
-        [
-            "/",
-            (mini) => {
-                const basedHtmlString = html `<h2>
-            this html string is resolved (it can't contain functions like
-            mini.html HtmlStrings)
-          </h2>
-          ${"<script>alert(1)</script>"}`;
-                return mini.html `<h1>  ${"<script>alert(1)</script>"}this HtmlString can contain functions,
-                                         that get resolved at request time.</h1>${basedHtmlString}
-        <h3>${(mini) => mini.html ` ${"<script>alert(1)</script>"}it gives you convenient access to the request object,
-                                         anywhere in your code base:${mini.req.url}.
-            no need to do "props drilling" anymore. just write a function like this:
-             (mini: Mini)=> return some html and you are golden. ${"<script>alert(1)</script>"} `}`;
-            },
-        ],
-    ]);
-    const response = await url.match(req, "/");
-    const responseText = await response?.text();
-    expect(responseText).not.toInclude("<script>alert(1)</script>");
-    expect(responseText).toInclude("&lt;script&gt;alert(1)&lt;/script&gt;");
-});

package/mininext/html.ts

@@ -1,354 +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 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<T>(mini: Mini<T>) {
-    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: number = 1) {
-    const flattened = super.flat(depth);
-    const newHtmlString = new (this.constructor as any)(...flattened);
-    newHtmlString.resolved = this.resolved;
-    return newHtmlString as this;
-  }
-}
-
-export function html<X = unknown>(
-  strings: TemplateStringsArray,
-  ...values: HtmlStringValues<X>[]
-) {
-  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 as any[]));
-        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: true
-): <X = unknown>(
-  strings: TemplateStringsArray,
-  ...values: JsonStringValues<X>[]
-) => DangerJsonInHtml;
-function JsonTemplateProcessor(
-  danger?: false | undefined
-): <X = unknown>(
-  strings: TemplateStringsArray,
-  ...values: JsonStringValues<X>[]
-) => JsonString;
-
-function JsonTemplateProcessor(danger: boolean = false) {
-  const constructorr = danger
-    ? () => new DangerJsonInHtml()
-    : () => new JsonString();
-  return function <X = unknown>(
-    strings: TemplateStringsArray,
-    ...values: JsonStringValues<X>[]
-  ) {
-    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 as any[]));
-          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: HtmlHandler = (mini: 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: HtmlHandler) {
-  default_head = defaultHead;
-}
-
-export async function htmlResponder(
-  mini: Mini,
-  maybeUnresolved: HandlerReturnType,
-  head: HtmlHandler = default_head,
-  options: ResponseInit = {
-    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: any) {
-    return a as ReadableStream;
-  }
-  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:
-    | any
-    | {
-        error: HtmlString;
-      }
-): submissionResult is { error: HtmlString } {
-  return (
-    "error" in submissionResult && submissionResult.error instanceof 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 class BasedHtml extends String {}
-export type BasedHtmlValues =
-  | number
-  | string
-  | undefined
-  | null
-  | boolean
-  | BasedHtml
-  | BasedHtml[];
-//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: TemplateStringsArray,
-  ...values: BasedHtmlValues[]
-) => {
-  // 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/mininext/mininext.ts

@@ -1,228 +0,0 @@
-import { url, Mini, type HtmlHandler } from "./url";
-import {
-  isError,
-  HtmlString,
-  BasedHtml,
-  head,
-  commonHead,
-  cssReset,
-  basedHtml as html,
-} from "./html";
-import type { BunPlugin, Server, WebSocketHandler } from "bun";
-import { watch } from "fs/promises";
-import * as path from "path";
-function projectRoot() {
-  return global.PROJECT_ROOT || import.meta.dir + "/../../../../";
-}
-declare global {
-  var PROJECT_ROOT: string | undefined;
-}
-async function build(backendPath: string = "backend/backend.ts") {
-  await buildBackend(backendPath);
-  if (Bun.argv[2] === "dev") {
-    await devServer();
-  }
-}
-
-const streamPlugin: BunPlugin = {
-  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: BunPlugin = {
-  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: BunPlugin = {
-  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: string = "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: string) {
-  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: Boolean = 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: string) {
-    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() as {
-    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/mininext/url.ts

@@ -1,554 +0,0 @@
-import type { Server, WebSocketHandler } from "bun";
-import { htmlResponder, html, json, dangerjson, HtmlString } from "./html";
-import type {
-  BasedHtml,
-  DangerJsonInHtml,
-  JsonString,
-  JsonStringValues,
-} from "./html";
-export type Form = {
-  post: boolean;
-  urlencoded: boolean;
-  multipart: boolean;
-  formJson?: any;
-  formData?: FormData;
-  formName?: string;
-  hiddenField?: HtmlString;
-  actionlink<Y = unknown>(
-    qs?: string[] | string,
-    settings?: LinkSettings
-  ): (mini: Mini<Y>) => string;
-  onPostSubmit<F>(cb: () => F): F | undefined;
-};
-
-export type DataMaker<X, Z = unknown> =
-  | ((mini: Mini, rerun?: Z) => DataMakerReturnType<X>)
-  | (() => DataMakerReturnType<X>);
-export type DataMakerReturnType<X> = X | Promise<X>;
-export type HandlerReturnType =
-  | JsonString
-  | DangerJsonInHtml
-  | HtmlString
-  | string
-  | void;
-export type LazyHandlerReturnType =
-  | HandlerReturnType
-  | Promise<HandlerReturnType>;
-
-export type NamedForm<Z> = {
-  formResponse: LazyHandlerReturnType;
-  formInfo?: Z;
-};
-export type NamedFormHandlerReturnType<X> =
-  | HandlerReturnType
-  | Promise<HandlerReturnType>
-  | NamedForm<X>
-  | Promise<NamedForm<X>>;
-
-/**
- * Mini - the data object can be filled with url.data
- * @example
- * ``` js
- * const {html,json, css, data, req, form, link, svg, deliver, route, params, header, head } = mini  //pull everything out of the mini handbag
- * ```
- */
-export class Mini<X = unknown> {
-  html: typeof html<X>;
-  css: typeof html<X>;
-  json: typeof json<X>;
-  dangerjson: typeof dangerjson<X>;
-
-  data: X;
-  req!: Request;
-  head!: (head: HtmlHandler | HtmlString) => undefined;
-  headers!: (headers: HeadersInit, overwrite?: boolean) => undefined;
-  options!: (options: ResponseInit) => undefined;
-  deliver!: typeof url.deliver;
-  route!: string;
-  params!: URLSearchParams;
-  form!: Form;
-  requrl!: Readonly<URL>;
-
-  constructor(mini: Mini<unknown>, data: X) {
-    Object.assign(this, mini);
-    this.html = html<X>;
-    this.css = html<X>;
-    this.json = json<X>;
-    this.dangerjson = dangerjson<X>;
-    this.data = data;
-    this.deliver = url.deliver;
-    this.form.onPostSubmit = (cb) => {
-      if (this.form.formName) {
-        if (
-          this.form.formData &&
-          this.form.formData.get("formName") === this.form.formName
-        ) {
-          return cb();
-        } else if (
-          this.form.formJson &&
-          this.form.formJson.formName === this.form.formName
-        ) {
-          return cb();
-        }
-      } else if (this.form.post) {
-        return cb();
-      }
-    };
-  }
-}
-/**
- * HtmlHandler
- * @param mini - the mini object
- * @returns - return a partially resolved html string with mini.html
- * @example
- * ``` js
- * const {html,json, css, data, req, form, link, svg, deliver, route, params, header, head } = mini  //pull everything out of the mini handbag
- * ```
- */
-export type HtmlHandler<Y = unknown> =
-  | ((mini: Mini<Y>) => LazyHandlerReturnType)
-  | (() => LazyHandlerReturnType);
-export type NamedFormHandler<Y = unknown, Z = undefined> =
-  | ((mini: Mini<Y>) => NamedFormHandlerReturnType<Z>)
-  | (() => NamedFormHandlerReturnType<Z>);
-
-declare global {
-  var FrontendScripts: Array<string>; // An array of the bundled scriptFiles corresponding to the frontend files, example frontends[0] = "index.tsx" -> FrontendScripts[0] = CONTENT OF frontend/index.js
-  var FrontendScriptUrls: Array<string>;
-  var bundledSVGs: Record<string, { svgContent: string; svgPath: string }>;
-}
-export type ScriptTag = (...params: any[]) => Promise<HtmlString>;
-interface LinkSettings {
-  [key: string]: string | null | undefined;
-}
-export class url {
-  static websocket: WebSocketHandler | undefined = undefined;
-  static server: Server;
-
-  // direct mapping of "url string" -> function leads to Html Response
-  static direct_handlers_html: ReadonlyMap<string, HtmlHandler>;
-
-  // An array of the uncompiled frontend files, example frontends[0] = "index.tsx" -> frontend/index.tsx (from the project root)
-  private static frontends: Array<string> = [];
-  private static svgs: Map<string, ResponseInit> = new Map();
-
-  static svg(
-    path: string,
-    options: ResponseInit = {
-      headers: {
-        "Content-Type": "image/svg+xml",
-        "Content-Disposition": "attachment",
-      },
-    }
-  ) {
-    url.svgs.set(path, options);
-    var foundEntry = Object.entries(bundledSVGs).find(
-      ([key, value]) => value.svgPath === path
-    );
-
-    return foundEntry && foundEntry[0];
-  }
-  static frontend(path: string, snippet?: HtmlHandler) {
-    const frontendIndex = url.frontends.push(path) - 1;
-    const scriptUrl = FrontendScriptUrls[frontendIndex];
-
-    return html` ${snippet}
-      <script type="module" src="${scriptUrl}"></script>`; // return an html script tag with the index hash
-  }
-  /**
-   * This is used by the frontend bundler in order to find all frontends and their corresponding script files.
-   */
-  static getFrontends() {
-    return url.frontends;
-  }
-  static getSvgPaths() {
-    return [...url.svgs.keys()];
-  }
-  static serveFrontend(req: Request) {
-    const reqPath = new URL(req.url).pathname;
-    const index = FrontendScriptUrls.indexOf(reqPath);
-
-    if (index !== -1) {
-      return new Response(FrontendScripts[index], {
-        headers: {
-          "Content-Type": "application/javascript; charset=utf-8",
-        },
-      });
-    }
-  }
-  static serveSvg(req: Request) {
-    const reqPath = new URL(req.url).pathname;
-    const resolvedSvg = bundledSVGs[reqPath];
-    if (resolvedSvg) {
-      return new Response(
-        resolvedSvg.svgContent,
-        url.svgs.get(resolvedSvg.svgPath)
-      );
-    }
-  }
-  /**
-   * tool to expose data to a frontend as a global variable.
-   * @param name  this will be added as window.name to the window object in the frontend
-   * @param value this will be parsed as json in the frontend and asigned as follows: window.name = JSON.parsed(value)
-   * @returns the script tag to be embeded in the html response
-   *
-   * @example
-   * ``` js
-   * //backend
-   * url.deliver("user", userData); // window.user = JSON.parse(userData)
-   * //frontend
-   * const user = window["user"];
-   * ```
-   * if you want to use types, declare them like so in your frontend code:
-   * ``` ts
-   * declare global {
-   * var user: string;
-   *}
-   * ```
-   */
-  static deliver(name: string, value: JsonStringValues) {
-    return html` <script type="application/json" id="${name}">
-        ${dangerjson`${value}`}
-      </script>
-
-      <script>
-        window["${name}"] = JSON.parse(
-          document.getElementById("${name}").innerHTML
-        );
-      </script>`;
-  }
-  /**
-   * @param dataHandler the function that prepares the data for the handlers
-   * @example const {html,json, css, data, req, form, link, svg, deliver, route, params, header, head } = mini  //pull everything out of the mini handbag
-   * @returns
-   */
-  static data<T, Z>(dataMaker: DataMaker<T, Z>) {
-    return {
-      /**
-       * @param dataHandler the function that prepares the data for the handlers
-       * @example const {html,json, css, data, req, form, link, svg, deliver, route, params, header, head } = mini  //pull everything out of the mini handbag
-       * @returns
-       */
-      handler: (dataHandler: HtmlHandler<T>) => {
-        return async (oldmini: Mini) => {
-          const data = await dataMaker(oldmini);
-          const mini = new Mini(oldmini, data);
-
-          const unresolvedDataHandler = await dataHandler(mini); // passing mini
-          if (unresolvedDataHandler instanceof HtmlString) {
-            return await unresolvedDataHandler.resolve(mini);
-          }
-          return unresolvedDataHandler;
-        };
-      },
-      dataMaker,
-      /**
-       * use this to **specify the input type for the functions**,
-       *
-       * that you want to use in the HtmlHandlers that follow this **data blend!**
-       * @example type lol = typeof MaybeLoggedIn.$Mini
-       */
-      $Mini: {
-        data: "DONT USE THIS DIRECTLY, ya goofball. This is just to infer the Mini type",
-      } as Mini<T>,
-      /**
-       * use this to **specify the input type for the functions**,
-       *
-       * that you want to use in the Htmlhandlers that follow this **data blend!**
-       * @example type haha = Mini<typeof MaybeLoggedIn.$Data>
-       */
-      $Data: {
-        data: "DONT USE THIS DIRECTLY, ya goofball. This is just to infer the Mini type",
-      } as T,
-    };
-  }
-  /**
-   * use this to define your routes.
-   * @example
-   * ``` js
-   *    url.set([
-   *      ["/", (mini) => mini.html`<h1>Hello world</h1>`],
-   *      ["/apple", (mini) => mini.html`<h1>Hello apple</h1>`],
-   *      ["/banana", (mini) => mini.html`<h1>Hello banana</h1>`],
-   *    ]);
-   * ```
-   */
-  static set<K extends string>(entries: [K, HtmlHandler][]) {
-    url.direct_handlers_html = new Map(entries) as ReadonlyMap<K, HtmlHandler>;
-  }
-  /**
-   * wrap your handlers in this if you mutate something to prevent CSRF issues.
-   * @param handler - normal html handler with mini as the argument
-   * @returns a wrapped html handler that will only be called when the request is post
-   */
-  static post(handler: HtmlHandler) {
-    return (mini: Mini) => {
-      if (mini.form.post) {
-        return handler(mini);
-      } else {
-        return no_post_warning;
-      }
-    };
-  }
-  /**
-   * wrap your handlers in this if you mutate something to prevent CSRF issues.
-   * @param handler - normal html handler with mini as the argument
-   * @returns a wrapped html handler that will only be called when the request is post and contains a json body
-   */
-  static postJson(handler: HtmlHandler) {
-    return (mini: Mini) => {
-      if (mini.form.formJson) {
-        return handler(mini);
-      } else {
-        return no_post_warning;
-      }
-    };
-  }
-  /**
-   * wrap your handlers in this if you mutate something to prevent CSRF issues.
-   * @param handler - normal html handler with mini as the argument
-   * @returns a wrapped html handler that will only be called when the request is post and contains a FormData body
-   */
-  static postFormData(handler: HtmlHandler) {
-    return (mini: Mini) => {
-      if (mini.form.formData) {
-        return handler(mini);
-      } else {
-        return no_post_warning;
-      }
-    };
-  }
-  /**
-   * This is useful to decouple forms from routes.
-   * @param name name of the form - mini.form.onPostSubmit() will only be called if a (possibly hidden) field called formName matches this
-   * @param handler just like a normal handler (aka you can return the form as a HtmlString), but you can optionally return additional data in formInfo
-   * @returns - { formResponse: result of the handler, formInfo?: some info about the form. Totally up to you}
-   */
-  static namedForm<X = unknown, Z = undefined>(
-    name: string,
-    handler: NamedFormHandler<X, Z>
-  ) {
-    return async (mini: Mini<X>) => {
-      mini.form.formName = name;
-      mini.form.hiddenField = html`<input
-        type="hidden"
-        name="formName"
-        value="${name}"
-      />`;
-      const namedFormResponse = await handler(mini);
-      let handlerResult = {} as NamedForm<Z>;
-      if (
-        typeof namedFormResponse !== "string" &&
-        namedFormResponse &&
-        "formResponse" in namedFormResponse
-      ) {
-        handlerResult.formResponse = await namedFormResponse.formResponse;
-        handlerResult.formInfo = namedFormResponse.formInfo;
-      } else {
-        handlerResult.formResponse = namedFormResponse;
-      }
-      delete mini.form.formName;
-      delete mini.form.hiddenField;
-      return handlerResult;
-    };
-  }
-
-  /**
-   * pass in all the query string parameter names that you want to preserve in the link
-   * @param Url - the url that you want to link to (example: "/login")
-   * @param qs - the query string parameters that you want to preserve in the link
-   * @param settings - key and string values that you want to set in the link
-   * @returns - the link that you can use in your html template
-   */
-  static link<X>(
-    Url: string,
-    qs: string[] | string = "",
-    settings?: LinkSettings
-  ) {
-    return (mini: Mini<X>) => {
-      return url.currylink(Url, qs, mini.req, settings);
-    };
-  }
-  static currylink(
-    Url: string,
-    qs: string[] | string,
-    req: Request,
-    settings?: LinkSettings
-  ) {
-    if (!Array.isArray(qs)) {
-      qs = [qs];
-    }
-    // Create a new URL object from the current location
-    // https://github.com/whatwg/url/issues/531#issuecomment-1337050285
-    const GOOFY_HACK = "http://goofyhack.com";
-    const updatedUrl = new URL(url.get(Url), GOOFY_HACK);
-    for (const q of qs) {
-      // Use URLSearchParams to set the name query parameter
-      const reqParam = new URL(req.url).searchParams.get(q);
-      if (reqParam) {
-        updatedUrl.searchParams.set(q, reqParam);
-      }
-    }
-    for (const key in settings) {
-      const value = settings[key];
-      if (value !== undefined && value !== null) {
-        updatedUrl.searchParams.set(key, value);
-      }
-    }
-    // Return the updated URL as a string
-    return updatedUrl.toString().slice(GOOFY_HACK.length);
-  }
-  /**
-   * This method retrieves a url from the urls array. If the url does not exist in the urls array, an error will be thrown.
-   * @param {string} Url - The url to retrieve.
-   * @return {string} - The retrieved url.
-   * @throws Will throw an Error if the provided url is not found in the urls array.
-   */
-  static get(Url: string): string {
-    const foundUrl = url.direct_handlers_html.get(Url);
-    if (!foundUrl) {
-      throw new Error(`URL "${html`${Url}`}" was not set.`);
-    }
-    return Url;
-  }
-  static async match(req: Request, reqPath?: string) {
-    const miniurl: Readonly<URL> = Object.freeze(new URL(req.url));
-    if (typeof reqPath === "undefined") {
-      reqPath = miniurl.pathname;
-    }
-    const handler = url.direct_handlers_html.get(reqPath);
-    if (handler) {
-      //this is the source of mini
-      let handlerHead: HtmlHandler | HtmlString | undefined = undefined;
-      let handlerOptions: ResponseInit = {
-        headers: {
-          "Content-Type": "text/html; charset=utf-8",
-        },
-      };
-      const post = req.method === "POST";
-      let formJson: any;
-      let formData: FormData | undefined;
-      const urlencoded = (req.headers.get("Content-Type") + "").includes(
-        "application/x-www-form-urlencoded"
-      );
-      const multipart = (req.headers.get("Content-Type") + "").includes(
-        "multipart/form-data"
-      );
-      if (post && !urlencoded && !multipart) {
-        const length = Number(req.headers.get("content-length"));
-        const bodyNotEmpty = length > 0;
-        if (bodyNotEmpty) {
-          formJson = await req.json();
-        } else {
-          formJson = {};
-        }
-      }
-      if (post && (urlencoded || multipart)) {
-        formData = await req.formData();
-      }
-
-      const mini = new Mini(
-        {
-          requrl: miniurl,
-          data: undefined,
-          req,
-          html,
-          css: html,
-          deliver: url.deliver,
-          route: reqPath,
-          params: new URL(req.url).searchParams,
-          json,
-          form: {
-            post,
-            urlencoded,
-            multipart,
-            formJson,
-            formData,
-            onPostSubmit(cb) {
-              if (post) {
-                return cb();
-              }
-            },
-            actionlink: (qs = "", settings) => url.link(reqPath, qs, settings),
-          },
-          dangerjson,
-          head: (head) => {
-            handlerHead = head;
-          },
-          headers: (headers, overwrite = false) => {
-            if (overwrite) {
-              handlerOptions.headers = headers;
-            } else {
-              handlerOptions.headers = {
-                ...handlerOptions.headers,
-                ...headers,
-              };
-            }
-          },
-          options: (options) => {
-            handlerOptions = options;
-          },
-        },
-        undefined
-      );
-      const unresolved = await handler(mini); //passing mini
-      return htmlResponder(mini, unresolved, handlerHead, handlerOptions);
-    }
-  }
-  /**
-   * user this to set the Websocket object. Check out [the bun docs](https://bun.sh/docs/api/websockets) for more details.
-   * @param wsObject the websocketsocket object {@link WebSocketHandler}
-   */
-  static setWebsocket<T = undefined>(wsObject: WebSocketHandler<T>) {
-    url.websocket = wsObject as WebSocketHandler;
-  }
-  /**
-   * Send a message to all connected {@link ServerWebSocket} subscribed to a topic
-   * @param topic The topic to publish to
-   * @param message The data to send
-   * @returns 0 if the message was dropped, -1 if backpressure was applied, or the number of bytes sent.
-   */
-  static publishHtml(topic: string, message: BasedHtml) {
-    return url.server.publish(topic, message as string);
-  }
-  /**
-   * Fetch handler that is called by the server when a request is made to any of the urls.
-   * @param {Request} req - The Request object.
-   * @return {Promise<Response>} - The Response object.
-   */
-  static install() {
-    async function fetchFunction(req: Request, server: Server) {
-      if (!url.server) url.server = server;
-      //go through all the Htmlhandlers and see if there is a match
-      let res = await url.match(req);
-      if (res) return res;
-
-      //handle frontend js file serving
-      res = url.serveFrontend(req);
-      if (res) return res;
-      //handle svg file serving
-      res = url.serveSvg(req);
-      if (res) return res;
-      // go through all the Htmlhandlers again with added slash at the end.
-      res = await url.match(req, new URL(req.url).pathname + "/");
-      if (res) return res;
-
-      return new Response("No matching url found", { status: 404 });
-    }
-    return { fetch: fetchFunction, websocket: url.websocket };
-  }
-}
-
-const no_post_warning = html`<div style="color:red;">
-  This method is only accessible through the POST method. Remember to make all
-  mutations (insert / update data in the database) only accessible via POST and
-  implement your session cookies like this:
-  <div
-    style="color:#0FFF50; width:800px; overflow:wrap; margin-left:30px; margin-top:20px; margin-bottom:20px;"
-  >
-    "Set-Cookie": sessionId=="some random string made with crypto.randomUUID()"
-    expires=Thu, 01 Jan 1970 00:00:00 GMT Secure; HttpOnly; SameSite=Strict;
-    path=/,
-  </div>
-  This is necessary to prevent CSRF issues.
-</div>`;