@hyperspan/framework 0.0.1

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package/README.md

@@ -0,0 +1,83 @@
+# Hyperspan. Simple. Full-Stack. Streaming.
+
+> [!NOTE] > **Hyperspan is still in the early stages of development, your feedback is appreciated.**
+
+No JSX. No Virtual DOM. No hydration time. No nonsense. Just blazing fast HTML strings with reactive templates.
+
+Hyperspan is a full-stack framework built with [Bun](https://bun.sh) that is focused on simplicity and perforamnce.
+
+## Who Is Hyperspan For?
+
+Hyperspan is best for websites, web applications, and APIs that need fast streaming and dynamic server responses. It is
+great for performance critical applications and delivers no client-side JavaScript by default. This helps to ensure your
+website stays fast and lightweight for end users as it grows over time, since all client JavaScript is explicitly
+opt-in.
+
+## Why Bun?
+
+[Bun](https://bun.sh) is a Node-compatible runtime that offers better performance and built-in TypeScript support so
+transpiling is not required for writing type-safe server-side code. Bun also offers some other extras like built-in
+ultra fast testing utilities so extra dependencies are not required to write high-quality code.
+
+## React vs. Hyperspan
+
+Hyperspan is not a React replacement. React is a client-side library to build interactive JavaScript based UIs.
+Hyperspan is a full-stack server-side framework built to deliver high-performance streaming and dynamic responses, and
+does not deliver any JavaScript to the client by default.
+
+Hyperspan can be best thought of as an _alternative_ to React-based frameworks like Next.js. It has all the same types
+of things, like file-based page routes, API routes, middleware, components, etc. but Hyperspan has a very different
+runtime and execution model. React-based frameworks ship all React components and code to the client by default,
+resulting in surprisingly large JS bundle sizes that grow more over time as your site does. Hyperspan takes the opposite
+approach, and does not ship ANY components to the client by default. Client components are available, but are explicitly
+opt-in and should generally be used sparingly.
+
+React is all JavaScript, all the time, delivered to the client. Hyperspan is mostly static content and markup delivered
+to the client, with JavaScript sprinkles where needed.
+
+## Philosophy
+
+### P1: Server-Side First.
+
+Current JavaScript frameworks ship everything to the browser by default and use non-intuitive ways to opt-out of this.
+The first clue that this approach was backwards was when JavaScript bundle sizes started being measured in hundreds of
+kilobytes to megabytes.
+
+Keeping bundle sizes down in large projects over time can be challenging. A full stack framework should render as much
+as possible on the server by default for better performance. Sending JavaScript code to the client and increasing bundle
+sizes for all your users should be explicit and opt-in.
+
+Modern frameworks make it too easy to _accidentally_ ship code to the client that you don't want. They often mix client
+and server concerns in a way that is hard to understand and keep separate. They return cryptic and confusing errors when
+you make mistakes around client and server boundaries.
+
+We've lost the forrest from the trees. The complixity has become too much, and users are paying the price.
+
+This is the way back for a full-stack framework:
+
+- Server fetching and rendering by default.
+- Minimal client-side JavaScript by default. Code that ships to the client should be explicit and opt-in.
+- Most of the work and state should be maintained on the server. The framework should help make this easy.
+
+### P2: Performance Oriented.
+
+Server-side code is fast because it sends HTML strings to the client and lets the browser do its job - the job that is
+was built specifically to do. There is no sense in typing up the JavaScript thread for rendering markup that can just be
+sent directly.
+
+You don't need a Virtual DOM or expensive reconciliation diff calculations to make interactive web sites or
+applications. You just need a more intelligent template that knows the pieces that update.
+
+HTML strings are the fastest and easiest way to update the parts of the DOM that change. We have known this since the
+Web 1.0 days of AJAX and template partials. Modern JavaScript built-ins like Tagged Template Literals are an obvious
+choice to do do the same thing today, and are built into the language.
+
+### P3: Works the Same In Every Context.
+
+All templates and components should be rendered asynchronously to allow you to do any other kind of asynchronous work in
+them that you need to, in any context that you do it in. It's just JavaScript. Not special framework-flavored
+JavaScript.
+
+There should be no difference in how a template or component is rendered in one context vs. another. It should not
+matter if a component runs on the client or the server, or fetches data or streams in. The core conceptual semantics
+should be the same everywhere.

package/dist/index.js

@@ -0,0 +1,468 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+
+// node_modules/escape-html/index.js
+var require_escape_html = __commonJS((exports, module) => {
+  var escapeHtml = function(string) {
+    var str = "" + string;
+    var match = matchHtmlRegExp.exec(str);
+    if (!match) {
+      return str;
+    }
+    var escape;
+    var html = "";
+    var index = 0;
+    var lastIndex = 0;
+    for (index = match.index;index < str.length; index++) {
+      switch (str.charCodeAt(index)) {
+        case 34:
+          escape = "&quot;";
+          break;
+        case 38:
+          escape = "&amp;";
+          break;
+        case 39:
+          escape = "&#39;";
+          break;
+        case 60:
+          escape = "&lt;";
+          break;
+        case 62:
+          escape = "&gt;";
+          break;
+        default:
+          continue;
+      }
+      if (lastIndex !== index) {
+        html += str.substring(lastIndex, index);
+      }
+      lastIndex = index + 1;
+      html += escape;
+    }
+    return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
+  };
+  /*!
+   * escape-html
+   * Copyright(c) 2012-2013 TJ Holowaychuk
+   * Copyright(c) 2015 Andreas Lubbe
+   * Copyright(c) 2015 Tiancheng "Timothy" Gu
+   * MIT Licensed
+   */
+  var matchHtmlRegExp = /["'&<>]/;
+  module.exports = escapeHtml;
+});
+
+// src/html.ts
+var import_escape_html = __toESM(require_escape_html(), 1);
+
+// src/clientjs/md5.js
+var md5cycle = function(x, k) {
+  var a = x[0], b = x[1], c = x[2], d = x[3];
+  a = ff(a, b, c, d, k[0], 7, -680876936);
+  d = ff(d, a, b, c, k[1], 12, -389564586);
+  c = ff(c, d, a, b, k[2], 17, 606105819);
+  b = ff(b, c, d, a, k[3], 22, -1044525330);
+  a = ff(a, b, c, d, k[4], 7, -176418897);
+  d = ff(d, a, b, c, k[5], 12, 1200080426);
+  c = ff(c, d, a, b, k[6], 17, -1473231341);
+  b = ff(b, c, d, a, k[7], 22, -45705983);
+  a = ff(a, b, c, d, k[8], 7, 1770035416);
+  d = ff(d, a, b, c, k[9], 12, -1958414417);
+  c = ff(c, d, a, b, k[10], 17, -42063);
+  b = ff(b, c, d, a, k[11], 22, -1990404162);
+  a = ff(a, b, c, d, k[12], 7, 1804603682);
+  d = ff(d, a, b, c, k[13], 12, -40341101);
+  c = ff(c, d, a, b, k[14], 17, -1502002290);
+  b = ff(b, c, d, a, k[15], 22, 1236535329);
+  a = gg(a, b, c, d, k[1], 5, -165796510);
+  d = gg(d, a, b, c, k[6], 9, -1069501632);
+  c = gg(c, d, a, b, k[11], 14, 643717713);
+  b = gg(b, c, d, a, k[0], 20, -373897302);
+  a = gg(a, b, c, d, k[5], 5, -701558691);
+  d = gg(d, a, b, c, k[10], 9, 38016083);
+  c = gg(c, d, a, b, k[15], 14, -660478335);
+  b = gg(b, c, d, a, k[4], 20, -405537848);
+  a = gg(a, b, c, d, k[9], 5, 568446438);
+  d = gg(d, a, b, c, k[14], 9, -1019803690);
+  c = gg(c, d, a, b, k[3], 14, -187363961);
+  b = gg(b, c, d, a, k[8], 20, 1163531501);
+  a = gg(a, b, c, d, k[13], 5, -1444681467);
+  d = gg(d, a, b, c, k[2], 9, -51403784);
+  c = gg(c, d, a, b, k[7], 14, 1735328473);
+  b = gg(b, c, d, a, k[12], 20, -1926607734);
+  a = hh(a, b, c, d, k[5], 4, -378558);
+  d = hh(d, a, b, c, k[8], 11, -2022574463);
+  c = hh(c, d, a, b, k[11], 16, 1839030562);
+  b = hh(b, c, d, a, k[14], 23, -35309556);
+  a = hh(a, b, c, d, k[1], 4, -1530992060);
+  d = hh(d, a, b, c, k[4], 11, 1272893353);
+  c = hh(c, d, a, b, k[7], 16, -155497632);
+  b = hh(b, c, d, a, k[10], 23, -1094730640);
+  a = hh(a, b, c, d, k[13], 4, 681279174);
+  d = hh(d, a, b, c, k[0], 11, -358537222);
+  c = hh(c, d, a, b, k[3], 16, -722521979);
+  b = hh(b, c, d, a, k[6], 23, 76029189);
+  a = hh(a, b, c, d, k[9], 4, -640364487);
+  d = hh(d, a, b, c, k[12], 11, -421815835);
+  c = hh(c, d, a, b, k[15], 16, 530742520);
+  b = hh(b, c, d, a, k[2], 23, -995338651);
+  a = ii(a, b, c, d, k[0], 6, -198630844);
+  d = ii(d, a, b, c, k[7], 10, 1126891415);
+  c = ii(c, d, a, b, k[14], 15, -1416354905);
+  b = ii(b, c, d, a, k[5], 21, -57434055);
+  a = ii(a, b, c, d, k[12], 6, 1700485571);
+  d = ii(d, a, b, c, k[3], 10, -1894986606);
+  c = ii(c, d, a, b, k[10], 15, -1051523);
+  b = ii(b, c, d, a, k[1], 21, -2054922799);
+  a = ii(a, b, c, d, k[8], 6, 1873313359);
+  d = ii(d, a, b, c, k[15], 10, -30611744);
+  c = ii(c, d, a, b, k[6], 15, -1560198380);
+  b = ii(b, c, d, a, k[13], 21, 1309151649);
+  a = ii(a, b, c, d, k[4], 6, -145523070);
+  d = ii(d, a, b, c, k[11], 10, -1120210379);
+  c = ii(c, d, a, b, k[2], 15, 718787259);
+  b = ii(b, c, d, a, k[9], 21, -343485551);
+  x[0] = add32(a, x[0]);
+  x[1] = add32(b, x[1]);
+  x[2] = add32(c, x[2]);
+  x[3] = add32(d, x[3]);
+};
+var cmn = function(q, a, b, x, s, t) {
+  a = add32(add32(a, q), add32(x, t));
+  return add32(a << s | a >>> 32 - s, b);
+};
+var ff = function(a, b, c, d, x, s, t) {
+  return cmn(b & c | ~b & d, a, b, x, s, t);
+};
+var gg = function(a, b, c, d, x, s, t) {
+  return cmn(b & d | c & ~d, a, b, x, s, t);
+};
+var hh = function(a, b, c, d, x, s, t) {
+  return cmn(b ^ c ^ d, a, b, x, s, t);
+};
+var ii = function(a, b, c, d, x, s, t) {
+  return cmn(c ^ (b | ~d), a, b, x, s, t);
+};
+var md51 = function(s) {
+  var txt = "";
+  var n = s.length, state = [1732584193, -271733879, -1732584194, 271733878], i;
+  for (i = 64;i <= s.length; i += 64) {
+    md5cycle(state, md5blk(s.substring(i - 64, i)));
+  }
+  s = s.substring(i - 64);
+  var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+  for (i = 0;i < s.length; i++)
+    tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3);
+  tail[i >> 2] |= 128 << (i % 4 << 3);
+  if (i > 55) {
+    md5cycle(state, tail);
+    for (i = 0;i < 16; i++)
+      tail[i] = 0;
+  }
+  tail[14] = n * 8;
+  md5cycle(state, tail);
+  return state;
+};
+var md5blk = function(s) {
+  var md5blks = [], i;
+  for (i = 0;i < 64; i += 4) {
+    md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24);
+  }
+  return md5blks;
+};
+var rhex = function(n) {
+  var s = "", j = 0;
+  for (;j < 4; j++)
+    s += hex_chr[n >> j * 8 + 4 & 15] + hex_chr[n >> j * 8 & 15];
+  return s;
+};
+var hex = function(x) {
+  for (var i = 0;i < x.length; i++)
+    x[i] = rhex(x[i]);
+  return x.join("");
+};
+var add32 = function(a, b) {
+  return a + b & 4294967295;
+};
+function md5(s) {
+  return hex(md51(s));
+}
+var hex_chr = "0123456789abcdef".split("");
+
+// src/html.ts
+function html(strings, ...values) {
+  const content = [];
+  if (values.length === 0) {
+    content.push({ kind: "string_safe", value: strings.join("\n") });
+    return new HSTemplate(content);
+  }
+  let i = 0;
+  for (i = 0;i < values.length; i++) {
+    content.push({ kind: "string_safe", value: strings[i] });
+    let tValue = values[i] === undefined || values[i] === null || values[i] === "" ? "" : values[i];
+    if (!Array.isArray(tValue)) {
+      tValue = [tValue];
+    }
+    for (let j = 0;j < tValue.length; j++) {
+      content.push({ kind: _typeOf(tValue[j]), value: tValue[j] });
+    }
+  }
+  content.push({ kind: "string_safe", value: strings[i] });
+  return new HSTemplate(content);
+}
+async function* _render(obj, promises = [], { js }) {
+  let { kind, value } = obj;
+  let id = randomId();
+  if (!kind || !value) {
+    kind = _typeOf(obj);
+    value = obj;
+  }
+  if (value instanceof HSTemplate) {
+    yield* renderToStream(value);
+  } else if (typeof value.render !== "undefined") {
+    value.id = id;
+    yield await value.render();
+  } else if (value === undefined || value === null) {
+    yield "";
+  } else {
+    switch (kind) {
+      case "string":
+        yield import_escape_html.default(value);
+        break;
+      case "string_safe":
+        yield value;
+        break;
+      case "array":
+        yield* value;
+        break;
+      case "promise":
+        const promise = value.then((v) => {
+          return _render(v, promises, { js });
+        });
+        const pid = "async_" + id;
+        promises.push({ id: pid, pending: true, promise });
+        yield* renderToStream(html`<div id="${pid}">Loading...</div>`);
+        break;
+      case "function":
+        const fns = renderFunctionToString(value);
+        const fnId = "fn_" + md5(fns);
+        if (!IS_CLIENT || !window.hyperspan._fn.has(fnId)) {
+          js.push(`hyperspan.fn('${fnId}', ${fns});`);
+        }
+        yield `"hyperspan:${fnId}"`;
+        break;
+      case "json":
+        yield "";
+        break;
+      case "object":
+        if (typeof value.render === "function") {
+          yield value.render();
+        } else if (typeof value.toString === "function") {
+          yield value.toString();
+        } else {
+          yield value;
+        }
+        break;
+      case "generator":
+        yield* value;
+        break;
+      case "date":
+        yield value.toISOString();
+        break;
+      default:
+        yield String(value);
+    }
+  }
+}
+async function* renderToStream(template) {
+  let promises = [];
+  let js = [];
+  if (typeof template === "string") {
+    return template;
+  }
+  for (let i = 0;i < template.content.length; i++) {
+    yield* _render(template.content[i], promises, { js });
+  }
+  while (promises.length > 0) {
+    const promisesToRun = promises.map((p) => p.promise.then((v) => {
+      return { id: p.id, pending: false, value: v, promise: null };
+    }));
+    const result = await Promise.race(promisesToRun);
+    yield* renderToStream(html`<template id="${result.id}_content">${result.value}</template>`);
+    promises = promises.filter((p) => {
+      return p.id !== result.id;
+    });
+  }
+  if (js.length !== 0) {
+    yield "<script>" + js.join("\n") + "</script>";
+  }
+}
+async function renderToString(template) {
+  let result = "";
+  for await (const chunk of renderToStream(template)) {
+    result += chunk;
+  }
+  return result;
+}
+function compressHTMLString(str) {
+  return str.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");
+}
+var randomId = function() {
+  return Math.random().toString(36).substring(2, 9);
+};
+function _typeOf(obj) {
+  if (obj instanceof Promise)
+    return "promise";
+  if (obj instanceof Date)
+    return "date";
+  if (obj instanceof String)
+    return "string";
+  if (obj instanceof Number)
+    return "number";
+  if (obj instanceof Boolean)
+    return "boolean";
+  if (obj instanceof Function)
+    return "function";
+  if (Array.isArray(obj))
+    return "array";
+  if (Number.isNaN(obj))
+    return "nan";
+  if (obj === undefined)
+    return "undefined";
+  if (obj === null)
+    return "null";
+  if (isGenerator(obj))
+    return "generator";
+  if (isPlainObject(obj))
+    return "json";
+  return typeof obj;
+}
+var isGenerator = function(obj) {
+  return obj && typeof obj.next == "function" && typeof obj.throw == "function";
+};
+var isPlainObject = function(val) {
+  return Object == val.constructor;
+};
+function clientComponent(id, wc) {
+  const comp = {
+    ...wc,
+    state: wc.state || {},
+    id,
+    randomId() {
+      return Math.random().toString(36).substring(2, 9);
+    },
+    setState(fn) {
+      try {
+        const val = typeof fn === "function" ? fn(this.state) : fn;
+        this.state = val;
+        const el = document.getElementById(this.id);
+        if (el) {
+          el.dataset.state = JSON.stringify(val);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+      return this.state;
+    },
+    mergeState(newState) {
+      return this.setState(Object.assign(this.state, newState));
+    }
+  };
+  if (typeof window !== "undefined") {
+    window.hyperspan.wc.set(id, comp);
+  }
+  return (attrs, state) => {
+    const _state = Object.assign({}, comp.state, state || {});
+    return html`
+      <script>
+        ${html.raw(renderObjectToLiteralString(comp))};
+      </script>
+      <hs-wc id="${attrs?.id || id}" data-state="${JSON.stringify(_state)}"></hs-wc>
+    `;
+  };
+}
+function renderFunctionToString(fn) {
+  let fns = fn.toString();
+  const firstLine = fns.split("\n")[0];
+  const isFatArrow = firstLine.includes("=>");
+  const isAsync = firstLine.includes("async");
+  const hasFunctionWord = firstLine.includes("function");
+  if (isFatArrow) {
+    fns = "function (...args) { return (" + fns + ")(..args); }";
+  } else {
+    if (!hasFunctionWord) {
+      fns = "function " + fns;
+    }
+  }
+  if (isAsync) {
+    fns = "async " + fns.replace("async ", "");
+  }
+  return fns;
+}
+var renderObjectToLiteralString = function(obj) {
+  const lines = [];
+  let str = 'hyperspan.wc.set("' + obj.id + '", {\n';
+  for (const prop in obj) {
+    const kind = _typeOf(obj[prop]);
+    let val = obj[prop];
+    switch (kind) {
+      case "string":
+        lines.push([prop, ": ", '"' + val + '"']);
+        break;
+      case "object":
+      case "json":
+        lines.push([prop, ": ", "JSON.parse('" + JSON.stringify(val) + "')"]);
+        break;
+      case "function":
+        const fn = val.toString();
+        const isFatArrow = fn.split("\n")[0].includes("=>");
+        if (isFatArrow) {
+          lines.push([prop, ": ", fn]);
+        } else {
+          lines.push([fn]);
+        }
+        break;
+      default:
+        lines.push([prop, ": ", val]);
+    }
+  }
+  str += lines.map((line) => line.join("") + ",").join("\n");
+  str += "\n})";
+  return str;
+};
+var IS_CLIENT = typeof window !== "undefined";
+
+class HSTemplate {
+  __hsTemplate = true;
+  content;
+  constructor(content) {
+    this.content = content;
+  }
+}
+html.raw = (value) => {
+  return new HSTemplate([{ kind: "string_safe", value }]);
+};
+export {
+  renderToString,
+  renderToStream,
+  html,
+  compressHTMLString,
+  clientComponent,
+  _typeOf,
+  HSTemplate
+};