@hyperspan/framework 0.1.5 → 0.1.7

package/build.ts

@@ -1,5 +1,4 @@
-import {build} from 'bun';
-import dts from 'bun-plugin-dts';
+import { build } from 'bun';
 
 const entrypoints = ['./src/server.ts', './src/assets.ts'];
 const external = ['@hyperspan/html'];
@@ -7,23 +6,11 @@ const outdir = './dist';
 const target = 'node';
 const splitting = true;
 
-await Promise.all([
-  // Build JS
-  build({
-    entrypoints,
-    external,
-    outdir,
-    target,
-    splitting,
-  }),
-
-  // Build type files for TypeScript
-  build({
-    entrypoints,
-    external,
-    outdir,
-    target,
-    splitting,
-    plugins: [dts()],
-  }),
-]);
+// Build JS
+await build({
+  entrypoints,
+  external,
+  outdir,
+  target,
+  splitting,
+});

package/dist/assets.js

@@ -1,145 +1,11 @@
 // src/assets.ts
 import { html } from "@hyperspan/html";
-
-// src/clientjs/md5.js
-function md5cycle(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]);
-}
-function cmn(q, a, b, x, s, t) {
-  a = add32(add32(a, q), add32(x, t));
-  return add32(a << s | a >>> 32 - s, b);
-}
-function ff(a, b, c, d, x, s, t) {
-  return cmn(b & c | ~b & d, a, b, x, s, t);
-}
-function gg(a, b, c, d, x, s, t) {
-  return cmn(b & d | c & ~d, a, b, x, s, t);
-}
-function hh(a, b, c, d, x, s, t) {
-  return cmn(b ^ c ^ d, a, b, x, s, t);
-}
-function ii(a, b, c, d, x, s, t) {
-  return cmn(c ^ (b | ~d), a, b, x, s, t);
-}
-function md51(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;
-}
-function md5blk(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 hex_chr = "0123456789abcdef".split("");
-function rhex(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;
-}
-function hex(x) {
-  for (var i = 0;i < x.length; i++)
-    x[i] = rhex(x[i]);
-  return x.join("");
-}
-function add32(a, b) {
-  return a + b & 4294967295;
-}
-function md5(s) {
-  return hex(md51(s));
-}
-
-// src/assets.ts
+import { createHash } from "node:crypto";
 import { readdir } from "node:fs/promises";
 import { resolve } from "node:path";
 var IS_PROD = false;
 var PWD = import.meta.dir;
+var clientImportMap = new Map;
 var clientJSFiles = new Map;
 async function buildClientJS() {
   const sourceFile = resolve(PWD, "../", "./src/clientjs/hyperspan-client.ts");
@@ -180,15 +46,7 @@ function hyperspanScriptTags() {
   const jsFiles = Array.from(clientJSFiles.entries());
   return html`
     <script type="importmap">
-      {
-        "imports": {
-          "preact": "https://esm.sh/preact@10.26.4",
-          "preact/": "https://esm.sh/preact@10.26.4/",
-          "react": "https://esm.sh/preact@10.26.4/compat",
-          "react/": "https://esm.sh/preact@10.26.4/compat/",
-          "react-dom": "https://esm.sh/preact@10.26.4/compat"
-        }
-      }
+      {"imports": ${Object.fromEntries(clientImportMap)}}
     </script>
     ${jsFiles.map(([key, file]) => html`<script
           id="js-${key}"
@@ -197,21 +55,46 @@ function hyperspanScriptTags() {
         ></script>`)}
   `;
 }
+var PREACT_PUBLIC_FILE_PATH = "/_hs/js/preact.js";
+function md5(content) {
+  return createHash("md5").update(content).digest("hex");
+}
+async function copyPreactToPublicFolder() {
+  const sourceFile = resolve(PWD, "../", "./src/clientjs/preact.ts");
+  const preactClient = Bun.build({
+    entrypoints: [sourceFile],
+    outdir: "./public/_hs/js",
+    minify: true,
+    format: "esm",
+    target: "browser"
+  });
+}
 async function createPreactIsland(file) {
   let filePath = file.replace("file://", "");
+  const jsId = md5(filePath);
+  if (!clientImportMap.has("preact")) {
+    await copyPreactToPublicFolder();
+    clientImportMap.set("preact", "" + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set("preact/compat", "" + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set("preact/hooks", "" + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set("preact/jsx-runtime", "" + PREACT_PUBLIC_FILE_PATH);
+  }
+  if (!clientImportMap.has("react")) {
+    clientImportMap.set("react", "." + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set("react-dom", "." + PREACT_PUBLIC_FILE_PATH);
+  }
   let resultStr = 'import{h,render}from"preact";';
-  const build = await Bun.build({
+  const buildResult = await Bun.build({
     entrypoints: [filePath],
     minify: true,
     external: ["react", "preact"],
     env: "APP_PUBLIC_*"
   });
-  for (const output of build.outputs) {
+  for (const output of buildResult.outputs) {
     resultStr += await output.text();
   }
   const r = /export\{([a-zA-Z]+) as default\}/g;
   const matchExport = r.exec(resultStr);
-  const jsId = md5(resultStr);
   if (!matchExport) {
     throw new Error("File does not have a default export! Ensure a function has export default to use this.");
   }
@@ -230,6 +113,7 @@ export {
   hyperspanScriptTags,
   createPreactIsland,
   clientJSFiles,
+  clientImportMap,
   clientCSSFiles,
   buildClientJS,
   buildClientCSS

package/dist/server.js

@@ -6,10 +6,10 @@ import {
 // src/server.ts
 import { readdir } from "node:fs/promises";
 import { basename, extname, join } from "node:path";
-import { TmplHtml, html, renderStream, renderAsync, render } from "@hyperspan/html";
+import { html, isHSHtml, renderStream, renderAsync, render } from "@hyperspan/html";
 
 // node_modules/isbot/index.mjs
-var fullPattern = " daum[ /]| deusu/| yadirectfetcher|(?:^|[^g])news(?!sapphire)|(?<! (?:channel/|google/))google(?!(app|/google| pixel))|(?<! cu)bots?(?:\\b|_)|(?<!(?:lib))http|(?<![hg]m)score|@[a-z][\\w-]+\\.|\\(\\)|\\.com\\b|\\btime/|\\||^<|^[\\w \\.\\-\\(?:\\):%]+(?:/v?\\d+(?:\\.\\d+)?(?:\\.\\d{1,10})*?)?(?:,|$)|^[^ ]{50,}$|^\\d+\\b|^\\w*search\\b|^\\w+/[\\w\\(\\)]*$|^active|^ad muncher|^amaya|^avsdevicesdk/|^biglotron|^bot|^bw/|^clamav[ /]|^client/|^cobweb/|^custom|^ddg[_-]android|^discourse|^dispatch/\\d|^downcast/|^duckduckgo|^email|^facebook|^getright/|^gozilla/|^hobbit|^hotzonu|^hwcdn/|^igetter/|^jeode/|^jetty/|^jigsaw|^microsoft bits|^movabletype|^mozilla/\\d\\.\\d\\s[\\w\\.-]+$|^mozilla/\\d\\.\\d\\s\\(compatible;?(?:\\s\\w+\\/\\d+\\.\\d+)?\\)$|^navermailapp|^netsurf|^offline|^openai/|^owler|^php|^postman|^python|^rank|^read|^reed|^rest|^rss|^snapchat|^space bison|^svn|^swcd |^taringa|^thumbor/|^track|^w3c|^webbandit/|^webcopier|^wget|^whatsapp|^wordpress|^xenu link sleuth|^yahoo|^yandex|^zdm/\\d|^zoom marketplace/|^{{.*}}$|adscanner/|analyzer|archive|ask jeeves/teoma|audit|bit\\.ly/|bluecoat drtr|browsex|burpcollaborator|capture|catch|check\\b|checker|chrome-lighthouse|chromeframe|classifier|cloudflare|convertify|cookiehubscan|crawl|cypress/|dareboost|datanyze|dejaclick|detect|dmbrowser|download|evc-batch/|exaleadcloudview|feed|firephp|functionize|gomezagent|headless|httrack|hubspot marketing grader|hydra|ibisbrowser|infrawatch|insight|inspect|iplabel|ips-agent|java(?!;)|jsjcw_scanner|library|linkcheck|mail\\.ru/|manager|measure|neustar wpm|node|nutch|offbyone|onetrust|optimize|pageburst|pagespeed|parser|perl|phantomjs|pingdom|powermarks|preview|proxy|ptst[ /]\\d|retriever|rexx;|rigor|rss\\b|scanner\\.|scrape|server|sogou|sparkler/|speedcurve|spider|splash|statuscake|supercleaner|synapse|synthetic|tools|torrent|transcoder|url|validator|virtuoso|wappalyzer|webglance|webkit2png|whatcms/|zgrab";
+var fullPattern = " daum[ /]| deusu/| yadirectfetcher|(?:^|[^g])news(?!sapphire)|(?<! (?:channel/|google/))google(?!(app|/google| pixel))|(?<! cu)bots?(?:\\b|_)|(?<!(?:lib))http|(?<![hg]m)score|(?<!cam)scan|@[a-z][\\w-]+\\.|\\(\\)|\\.com\\b|\\btime/|\\||^<|^[\\w \\.\\-\\(?:\\):%]+(?:/v?\\d+(?:\\.\\d+)?(?:\\.\\d{1,10})*?)?(?:,|$)|^[^ ]{50,}$|^\\d+\\b|^\\w*search\\b|^\\w+/[\\w\\(\\)]*$|^active|^ad muncher|^amaya|^avsdevicesdk/|^biglotron|^bot|^bw/|^clamav[ /]|^client/|^cobweb/|^custom|^ddg[_-]android|^discourse|^dispatch/\\d|^downcast/|^duckduckgo|^email|^facebook|^getright/|^gozilla/|^hobbit|^hotzonu|^hwcdn/|^igetter/|^jeode/|^jetty/|^jigsaw|^microsoft bits|^movabletype|^mozilla/\\d\\.\\d\\s[\\w\\.-]+$|^mozilla/\\d\\.\\d\\s\\(compatible;?(?:\\s\\w+\\/\\d+\\.\\d+)?\\)$|^navermailapp|^netsurf|^offline|^openai/|^owler|^php|^postman|^python|^rank|^read|^reed|^rest|^rss|^snapchat|^space bison|^svn|^swcd |^taringa|^thumbor/|^track|^w3c|^webbandit/|^webcopier|^wget|^whatsapp|^wordpress|^xenu link sleuth|^yahoo|^yandex|^zdm/\\d|^zoom marketplace/|^{{.*}}$|analyzer|archive|ask jeeves/teoma|audit|bit\\.ly/|bluecoat drtr|browsex|burpcollaborator|capture|catch|check\\b|checker|chrome-lighthouse|chromeframe|classifier|cloudflare|convertify|crawl|cypress/|dareboost|datanyze|dejaclick|detect|dmbrowser|download|evc-batch/|exaleadcloudview|feed|firephp|functionize|gomezagent|grab|headless|httrack|hubspot marketing grader|hydra|ibisbrowser|infrawatch|insight|inspect|iplabel|ips-agent|java(?!;)|library|linkcheck|mail\\.ru/|manager|measure|neustar wpm|node|nutch|offbyone|onetrust|optimize|pageburst|pagespeed|parser|perl|phantomjs|pingdom|powermarks|preview|proxy|ptst[ /]\\d|retriever|rexx;|rigor|rss\\b|scrape|server|sogou|sparkler/|speedcurve|spider|splash|statuscake|supercleaner|synapse|synthetic|tools|torrent|transcoder|url|validator|virtuoso|wappalyzer|webglance|webkit2png|whatcms/";
 var naivePattern = /bot|crawl|http|lighthouse|scan|search|spider/i;
 var pattern;
 function getPattern() {
@@ -841,7 +841,11 @@ var Hono = class {
         optionHandler = options;
       } else {
         optionHandler = options.optionHandler;
-        replaceRequest = options.replaceRequest;
+        if (options.replaceRequest === false) {
+          replaceRequest = (request) => request;
+        } else {
+          replaceRequest = options.replaceRequest;
+        }
       }
     }
     const getOptions = optionHandler ? (c) => {
@@ -851,7 +855,8 @@ var Hono = class {
       let executionContext = undefined;
       try {
         executionContext = c.executionCtx;
-      } catch {}
+      } catch {
+      }
       return [c.env, executionContext];
     };
     replaceRequest ||= (() => {
@@ -1745,7 +1750,8 @@ var serveStatic2 = (options) => {
       try {
         const stats = await stat(path);
         isDir2 = stats.isDirectory();
-      } catch {}
+      } catch {
+      }
       return isDir2;
     };
     return serveStatic({
@@ -1862,7 +1868,7 @@ function createRoute(handler) {
       const streamOpt = context.req.query("__nostream");
       const streamingEnabled = !userIsBot && (streamOpt !== undefined ? streamOpt : true);
       const routeKind = typeof routeContent;
-      if (routeContent && routeKind === "object" && (routeContent instanceof TmplHtml || routeContent.constructor.name === "TmplHtml" || routeContent?._kind === "TmplHtml")) {
+      if (isHSHtml(routeContent)) {
         if (streamingEnabled) {
           return new StreamResponse(renderStream(routeContent));
         } else {

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@hyperspan/framework",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Hyperspan Web Framework",
   "main": "dist/server.js",
+  "types": "src/server.ts",
   "public": true,
   "publishConfig": {
     "access": "public"
@@ -63,10 +64,10 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "@hyperspan/html": "^0.1.4",
-    "@preact/compat": "^18.3.1",
+    "@hyperspan/html": "^0.1.6",
     "hono": "^4.7.4",
     "isbot": "^5.1.25",
+    "preact": "^10.26.5",
     "zod": "^4.0.0-beta.20250415T232143"
   }
 }

package/src/actions.test.ts

@@ -1,16 +1,16 @@
 import z from 'zod';
-import { createAction, THSFormData } from './actions';
+import { createAction } from './actions';
 import { describe, it, expect } from 'bun:test';
-import { html, render, type TmplHtml } from '@hyperspan/html';
+import { html, render, type HSHtml } from '@hyperspan/html';
 import type { Context } from 'hono';
 
 describe('createAction', () => {
-  const formWithNameOnly = ({ data }: THSFormData) => {
+  const formWithNameOnly = ({ data }: { data?: { name: string } }) => {
     return html`
       <form>
         <p>
           Name:
-          <input type="text" name="name" value="${data.name || ''}" />
+          <input type="text" name="name" value="${data?.name || ''}" />
         </p>
         <button type="submit">Submit</button>
       </form>
@@ -22,9 +22,9 @@ describe('createAction', () => {
       const schema = z.object({
         name: z.string(),
       });
-      const action = createAction(schema).form(formWithNameOnly);
+      const action = createAction(schema, formWithNameOnly);
 
-      const formResponse = render(action.render({ data: { name: 'John' } }) as TmplHtml);
+      const formResponse = render(action.render({ data: { name: 'John' } }) as HSHtml);
       expect(formResponse).toContain('value="John"');
     });
   });
@@ -34,10 +34,9 @@ describe('createAction', () => {
       const schema = z.object({
         name: z.string().nonempty(),
       });
-      const action = createAction(schema)
-        .form(formWithNameOnly)
-        .handler((c, { data }) => {
-          return html`<div>Thanks for submitting the form, ${data.name}!</div>`;
+      const action = createAction(schema, formWithNameOnly)
+        .post((c, { data }) => {
+          return html`<div>Thanks for submitting the form, ${data?.name}!</div>`;
         })
         .error((c, { error }) => {
           return html`<div>There was an error! ${error?.message}</div>`;
@@ -56,7 +55,7 @@ describe('createAction', () => {
 
       const response = await action.run('POST', mockContext);
 
-      const formResponse = render(response as TmplHtml);
+      const formResponse = render(response as HSHtml);
       expect(formResponse).toContain('Thanks for submitting the form, John!');
     });
   });
@@ -68,8 +67,8 @@ describe('createAction', () => {
       });
       const action = createAction(schema)
         .form(formWithNameOnly)
-        .handler((c, { data }) => {
-          return html`<div>Thanks for submitting the form, ${data.name}!</div>`;
+        .post((c, { data }) => {
+          return html`<div>Thanks for submitting the form, ${data?.name}!</div>`;
         })
         .error((c, { error }) => {
           return html`<div>There was an error! ${error?.message}</div>`;
@@ -88,7 +87,7 @@ describe('createAction', () => {
 
       const response = await action.run('POST', mockContext);
 
-      const formResponse = render(response as TmplHtml);
+      const formResponse = render(response as HSHtml);
       expect(formResponse).toContain('There was an error!');
     });
   });

package/src/actions.ts

@@ -1,4 +1,4 @@
-import { html } from '@hyperspan/html';
+import { html, HSHtml } from '@hyperspan/html';
 import * as z from 'zod';
 import { HTTPException } from 'hono/http-exception';
 
@@ -20,21 +20,24 @@ import type { Context } from 'hono';
  */
 export interface HSAction<T extends z.ZodTypeAny> {
   _kind: string;
-  form(renderForm: (data: z.infer<T>) => THSResponseTypes): HSAction<T>;
-  handler(handler: (c: Context, { data }: { data: z.infer<T> }) => THSResponseTypes): HSAction<T>;
+  form(renderForm: ({ data }: { data?: z.infer<T> }) => HSHtml): HSAction<T>;
+  post(handler: (c: Context, { data }: { data?: z.infer<T> }) => THSResponseTypes): HSAction<T>;
   error(
     handler: (
       c: Context,
-      { data, error }: { data: z.infer<T>; error?: z.ZodError | Error }
+      { data, error }: { data?: z.infer<T>; error?: z.ZodError | Error }
     ) => THSResponseTypes
   ): HSAction<T>;
-  render(props?: { data: z.infer<T>; error?: z.ZodError | Error }): THSResponseTypes;
+  render(props?: { data?: z.infer<T>; error?: z.ZodError | Error }): THSResponseTypes;
   run(method: 'GET' | 'POST', c: Context): Promise<THSResponseTypes>;
 }
 
-export function createAction<T extends z.ZodTypeAny>(schema: T | null = null) {
-  let _handler: Parameters<HSAction<T>['handler']>[0] | null = null,
-    _form: Parameters<HSAction<T>['form']>[0] | null = null,
+export function createAction<T extends z.ZodTypeAny>(
+  schema: T | null = null,
+  form: Parameters<HSAction<T>['form']>[0] | null = null
+) {
+  let _handler: Parameters<HSAction<T>['post']>[0] | null = null,
+    _form: Parameters<HSAction<T>['form']>[0] | null = form,
     _errorHandler: Parameters<HSAction<T>['error']>[0] | null = null;
 
   const api: HSAction<T> = {
@@ -50,7 +53,7 @@ export function createAction<T extends z.ZodTypeAny>(schema: T | null = null) {
      * Returns result from form processing if successful
      * Re-renders form with data and error information otherwise
      */
-    handler(handler) {
+    post(handler) {
       _handler = handler;
       return api;
     },
@@ -63,8 +66,8 @@ export function createAction<T extends z.ZodTypeAny>(schema: T | null = null) {
     /**
      * Get form renderer method
      */
-    render(data) {
-      const form = _form ? _form(data || { data: {} }) : null;
+    render(formState?: { data?: z.infer<T>; error?: z.ZodError | Error }) {
+      const form = _form ? _form(formState || {}) : null;
       return form ? html`<hs-action>${form}</hs-action>` : null;
     },
 
@@ -86,7 +89,7 @@ export function createAction<T extends z.ZodTypeAny>(schema: T | null = null) {
       const formData = await c.req.formData();
       const jsonData = formDataToJSON(formData);
       const schemaData = schema ? schema.safeParse(jsonData) : null;
-      const data = schemaData?.success ? (schemaData.data as z.infer<T>) : {};
+      const data = schemaData?.success ? (schemaData.data as z.infer<T>) : undefined;
       let error: z.ZodError | Error | null = null;
 
       try {
@@ -95,7 +98,7 @@ export function createAction<T extends z.ZodTypeAny>(schema: T | null = null) {
         }
 
         if (!_handler) {
-          throw new Error('Action handler not set! Every action must have a handler.');
+          throw new Error('Action POST handler not set! Every action must have a POST handler.');
         }
 
         return _handler(c, { data });

package/src/assets.ts

@@ -1,11 +1,13 @@
 import { html } from '@hyperspan/html';
-import { md5 } from './clientjs/md5';
+import { createHash } from 'node:crypto';
 import { readdir } from 'node:fs/promises';
 import { resolve } from 'node:path';
 
 const IS_PROD = process.env.NODE_ENV === 'production';
 const PWD = import.meta.dir;
 
+export const clientImportMap = new Map<string, string>();
+
 /**
  * Build client JS for end users (minimal JS for Hyperspan to work)
  */
@@ -74,15 +76,7 @@ export function hyperspanScriptTags() {
 
   return html`
     <script type="importmap">
-      {
-        "imports": {
-          "preact": "https://esm.sh/preact@10.26.4",
-          "preact/": "https://esm.sh/preact@10.26.4/",
-          "react": "https://esm.sh/preact@10.26.4/compat",
-          "react/": "https://esm.sh/preact@10.26.4/compat/",
-          "react-dom": "https://esm.sh/preact@10.26.4/compat"
-        }
-      }
+      {"imports": ${Object.fromEntries(clientImportMap)}}
     </script>
     ${jsFiles.map(
       ([key, file]) =>
@@ -95,14 +89,49 @@ export function hyperspanScriptTags() {
   `;
 }
 
+// External ESM = https://esm.sh/preact@10.26.4/compat
+const PREACT_PUBLIC_FILE_PATH = '/_hs/js/preact.js';
+
+function md5(content: string): string {
+  return createHash('md5').update(content).digest('hex');
+}
+
+/**
+ * Build Preact client JS and copy to public folder
+ */
+async function copyPreactToPublicFolder() {
+  const sourceFile = resolve(PWD, '../', './src/clientjs/preact.ts');
+  const preactClient = Bun.build({
+    entrypoints: [sourceFile],
+    outdir: './public/_hs/js',
+    minify: true,
+    format: 'esm',
+    target: 'browser',
+  });
+}
+
 /**
  * Return a Preact component, mounted as an island in a <script> tag so it can be embedded into the page response.
  */
 export async function createPreactIsland(file: string) {
   let filePath = file.replace('file://', '');
+  const jsId = md5(filePath);
+
+  // Add Preact to client import map if not already present
+  if (!clientImportMap.has('preact')) {
+    await copyPreactToPublicFolder();
+    clientImportMap.set('preact', '' + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set('preact/compat', '' + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set('preact/hooks', '' + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set('preact/jsx-runtime', '' + PREACT_PUBLIC_FILE_PATH);
+  }
+  if (!clientImportMap.has('react')) {
+    clientImportMap.set('react', '.' + PREACT_PUBLIC_FILE_PATH);
+    clientImportMap.set('react-dom', '.' + PREACT_PUBLIC_FILE_PATH);
+  }
 
   let resultStr = 'import{h,render}from"preact";';
-  const build = await Bun.build({
+  const buildResult = await Bun.build({
     entrypoints: [filePath],
     minify: true,
     external: ['react', 'preact'],
@@ -110,14 +139,13 @@ export async function createPreactIsland(file: string) {
     env: 'APP_PUBLIC_*', // Inlines any ENV that starts with 'APP_PUBLIC_'
   });
 
-  for (const output of build.outputs) {
+  for (const output of buildResult.outputs) {
     resultStr += await output.text(); // string
   }
 
   // Find default export - this is our component
   const r = /export\{([a-zA-Z]+) as default\}/g;
   const matchExport = r.exec(resultStr);
-  const jsId = md5(resultStr);
 
   if (!matchExport) {
     throw new Error(

package/src/clientjs/hyperspan-client.ts

@@ -26,14 +26,10 @@ function htmlAsyncContentObserver() {
           const slotEl = document.getElementById(slotId);
 
           if (slotEl) {
-            // Wait until next paint for streaming content to finish writing to DOM
-            // @TODO: Need a more guaranteed way to know HTML element is done streaming in...
-            // Maybe some ".end" element that is hidden and then removed before insertion?
-            requestAnimationFrame(() => {
-              setTimeout(() => {
-                Idiomorph.morph(slotEl, el.content.cloneNode(true));
-                el.parentNode.removeChild(el);
-              }, 100);
+            // Only insert the content if it is done streaming in
+            waitForEndContent(el.content).then(() => {
+              Idiomorph.morph(slotEl, el.content.cloneNode(true));
+              el.parentNode.removeChild(el);
             });
           }
         } catch (e) {
@@ -46,6 +42,25 @@ function htmlAsyncContentObserver() {
 }
 htmlAsyncContentObserver();
 
+/**
+ * Wait until ALL of the content inside an element is present from streaming in.
+ * Large chunks of content can sometimes take more than a single tick to write to DOM.
+ */
+async function waitForEndContent(el: HTMLElement) {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      const endComment = Array.from(el.childNodes).find((node) => {
+        return node.nodeType === Node.COMMENT_NODE && node.nodeValue === 'end';
+      });
+      if (endComment) {
+        el.removeChild(endComment);
+        clearInterval(interval);
+        resolve(true);
+      }
+    }, 10);
+  });
+}
+
 /**
  * Server action component to handle the client-side form submission and HTML replacement
  */

package/src/clientjs/preact.ts

@@ -1 +1,2 @@
-export * from '@preact/compat';
+export * from 'preact/compat';
+export { h, render } from 'preact';

package/src/server.ts

@@ -1,6 +1,6 @@
 import { readdir } from 'node:fs/promises';
 import { basename, extname, join } from 'node:path';
-import { TmplHtml, html, renderStream, renderAsync, render } from '@hyperspan/html';
+import { HSHtml, html, isHSHtml, renderStream, renderAsync, render } from '@hyperspan/html';
 import { isbot } from 'isbot';
 import { buildClientJS, buildClientCSS } from './assets';
 import { Hono, type Context } from 'hono';
@@ -13,7 +13,7 @@ const CWD = process.cwd();
 /**
  * Types
  */
-export type THSResponseTypes = TmplHtml | Response | string | null;
+export type THSResponseTypes = HSHtml | Response | string | null;
 export type THSRouteHandler = (context: Context) => THSResponseTypes | Promise<THSResponseTypes>;
 
 export type THSRoute = {
@@ -28,7 +28,7 @@ export type THSRoute = {
 
 /**
  * Define a route that can handle a direct HTTP request.
- * Route handlers should return a TmplHtml or Response object
+ * Route handlers should return a HSHtml or Response object
  */
 export function createRoute(handler?: THSRouteHandler): THSRoute {
   let _handlers: Record<string, THSRouteHandler> = {};
@@ -78,19 +78,12 @@ export function createRoute(handler?: THSRouteHandler): THSRoute {
       const streamingEnabled = !userIsBot && (streamOpt !== undefined ? streamOpt : true);
       const routeKind = typeof routeContent;
 
-      // Render TmplHtml if returned from route handler
-      if (
-        routeContent &&
-        routeKind === 'object' &&
-        (routeContent instanceof TmplHtml ||
-          routeContent.constructor.name === 'TmplHtml' ||
-          // @ts-ignore
-          routeContent?._kind === 'TmplHtml')
-      ) {
+      // Render HSHtml if returned from route handler
+      if (isHSHtml(routeContent)) {
         if (streamingEnabled) {
-          return new StreamResponse(renderStream(routeContent as TmplHtml)) as Response;
+          return new StreamResponse(renderStream(routeContent as HSHtml)) as Response;
         } else {
-          const output = await renderAsync(routeContent as TmplHtml);
+          const output = await renderAsync(routeContent as HSHtml);
           return context.html(output);
         }
       }

package/dist/assets.d.ts

@@ -1,46 +0,0 @@
-// Generated by dts-bundle-generator v9.5.1
-
-declare class TmplHtml {
-	_kind: string;
-	content: string;
-	asyncContent: Array<{
-		id: string;
-		promise: Promise<{
-			id: string;
-			value: unknown;
-		}>;
-	}>;
-	constructor(props: Pick<TmplHtml, "content" | "asyncContent">);
-}
-/**
- * Build client JS for end users (minimal JS for Hyperspan to work)
- */
-export declare const clientJSFiles: Map<string, {
-	src: string;
-	type?: string;
-}>;
-export declare function buildClientJS(): Promise<void>;
-/**
- * Find client CSS file built for end users
- * @TODO: Build this in code here vs. relying on tailwindcss CLI tool from package scripts
- */
-export declare const clientCSSFiles: Map<string, string>;
-export declare function buildClientCSS(): Promise<string | undefined>;
-/**
- * Output HTML style tag for Hyperspan app
- */
-export declare function hyperspanStyleTags(): TmplHtml;
-/**
- * Output HTML script tag for Hyperspan app
- * Required for functioning streaming so content can pop into place properly once ready
- */
-export declare function hyperspanScriptTags(): TmplHtml;
-/**
- * Return a Preact component, mounted as an island in a <script> tag so it can be embedded into the page response.
- */
-export declare function createPreactIsland(file: string): Promise<(props: any) => {
-	_kind: string;
-	content: string;
-}>;
-
-export {};

package/dist/server.d.ts

@@ -1,88 +0,0 @@
-// Generated by dts-bundle-generator v9.5.1
-
-import { Context, Hono } from 'hono';
-
-declare class TmplHtml {
-	_kind: string;
-	content: string;
-	asyncContent: Array<{
-		id: string;
-		promise: Promise<{
-			id: string;
-			value: unknown;
-		}>;
-	}>;
-	constructor(props: Pick<TmplHtml, "content" | "asyncContent">);
-}
-export declare const IS_PROD: boolean;
-/**
- * Types
- */
-export type THSResponseTypes = TmplHtml | Response | string | null;
-export type THSRouteHandler = (context: Context) => THSResponseTypes | Promise<THSResponseTypes>;
-export type THSRoute = {
-	_kind: "hsRoute";
-	get: (handler: THSRouteHandler) => THSRoute;
-	post: (handler: THSRouteHandler) => THSRoute;
-	put: (handler: THSRouteHandler) => THSRoute;
-	delete: (handler: THSRouteHandler) => THSRoute;
-	patch: (handler: THSRouteHandler) => THSRoute;
-	run: (method: string, context: Context) => Promise<Response>;
-};
-/**
- * Define a route that can handle a direct HTTP request.
- * Route handlers should return a TmplHtml or Response object
- */
-export declare function createRoute(handler?: THSRouteHandler): THSRoute;
-/**
- * Create new API Route
- * API Route handlers should return a JSON object or a Response
- */
-export declare function createAPIRoute(handler?: THSRouteHandler): THSRoute;
-/**
- * Get a Hyperspan runnable route from a module import
- * @throws Error if no runnable route found
- */
-export declare function getRunnableRoute(route: unknown): THSRoute;
-export declare function isRunnableRoute(route: unknown): boolean;
-export type THSServerConfig = {
-	appDir: string;
-	staticFileRoot: string;
-	rewrites?: Array<{
-		source: string;
-		destination: string;
-	}>;
-	beforeRoutesAdded?: (app: Hono) => void;
-	afterRoutesAdded?: (app: Hono) => void;
-};
-export type THSRouteMap = {
-	file: string;
-	route: string;
-	params: string[];
-};
-export declare function buildRoutes(config: THSServerConfig): Promise<THSRouteMap[]>;
-/**
- * Run route from file
- */
-export declare function createRouteFromModule(RouteModule: any): (context: Context) => Promise<Response>;
-/**
- * Create and start Bun HTTP server
- */
-export declare function createServer(config: THSServerConfig): Promise<Hono>;
-/**
- * Streaming HTML Response
- */
-export declare class StreamResponse extends Response {
-	constructor(iterator: AsyncIterator<unknown>, options?: {});
-}
-/**
- * Does what it says on the tin...
- */
-export declare function createReadableStreamFromAsyncGenerator(output: AsyncGenerator): ReadableStream<any>;
-/**
- * Normalize URL path
- * Removes trailing slash and lowercases path
- */
-export declare function normalizePath(urlPath: string): string;
-
-export {};