@hyperspan/framework 0.1.2 → 0.1.3

package/build.ts

@@ -1,27 +1,29 @@
 import {build} from 'bun';
 import dts from 'bun-plugin-dts';
 
-const filesToBuild = ['./src/index.ts', './src/server.ts', './src/assets.ts'];
+const entrypoints = ['./src/server.ts', './src/assets.ts'];
+const external = ['@hyperspan/html'];
 const outdir = './dist';
 const target = 'node';
+const splitting = true;
 
-await Promise.all(
-  filesToBuild.map((file) =>
-    Promise.all([
-      // Build JS
-      build({
-        entrypoints: [file],
-        outdir,
-        target,
-      }),
+await Promise.all([
+  // Build JS
+  build({
+    entrypoints,
+    external,
+    outdir,
+    target,
+    splitting,
+  }),
 
-      // Build type files for TypeScript
-      build({
-        entrypoints: [file],
-        outdir,
-        target,
-        plugins: [dts()],
-      }),
-    ])
-  )
-);
+  // Build type files for TypeScript
+  build({
+    entrypoints,
+    external,
+    outdir,
+    target,
+    splitting,
+    plugins: [dts()],
+  }),
+]);

package/dist/assets.d.ts

@@ -19,7 +19,7 @@ export declare const clientJSFiles: Map<string, {
 	src: string;
 	type?: string;
 }>;
-export declare function buildClientJS(): Promise<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

package/dist/assets.js

@@ -1,161 +1,5 @@
-// ../html/dist/html.js
-/*!
- * escape-html
- * Copyright(c) 2012-2013 TJ Holowaychuk
- * Copyright(c) 2015 Andreas Lubbe
- * Copyright(c) 2015 Tiancheng "Timothy" Gu
- * MIT Licensed
- */
-var matchHtmlRegExp = /["'&<>]/;
-function escapeHtml(string) {
-  const str = "" + string;
-  const match = matchHtmlRegExp.exec(str);
-  if (!match) {
-    return str;
-  }
-  let escape;
-  let html = "";
-  let index = 0;
-  let 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;
-}
-
-class TmplHtml {
-  _kind = "hstmpl";
-  content = "";
-  asyncContent;
-  constructor(props) {
-    this.content = props.content;
-    this.asyncContent = props.asyncContent;
-  }
-}
-var htmlId = 0;
-function html(strings, ...values) {
-  const asyncContent = [];
-  let content = "";
-  for (let i = 0;i < strings.length; i++) {
-    const value = values[i];
-    const kind = _typeOf(value);
-    const renderValue = _renderValue(value, { kind, asyncContent }) || "";
-    content += strings[i] + (renderValue ? renderValue : "");
-  }
-  return new TmplHtml({ content, asyncContent });
-}
-html.raw = (content) => ({ _kind: "html_safe", content });
-function _renderValue(value, opts = {
-  kind: undefined,
-  id: undefined,
-  asyncContent: []
-}) {
-  if (value === null || value === undefined || Number.isNaN(value)) {
-    return "";
-  }
-  const kind = opts.kind || _typeOf(value);
-  let id = opts.id;
-  switch (kind) {
-    case "array":
-      return value.map((v) => _renderValue(v, { id, asyncContent: opts.asyncContent })).join("");
-    case "object":
-      id = `async_loading_${htmlId++}`;
-      if (value instanceof TmplHtml || value.constructor.name === "TmplHtml" || value?._kind === "hstmpl") {
-        opts.asyncContent.push(...value.asyncContent);
-        return value.content;
-      }
-      if (value?._kind === "html_safe") {
-        return value?.content || "";
-      }
-      if (typeof value.renderAsync === "function") {
-        opts.asyncContent.push({
-          id,
-          promise: value.renderAsync().then((result) => ({
-            id,
-            value: result,
-            asyncContent: opts.asyncContent
-          }))
-        });
-      }
-      if (typeof value.render === "function") {
-        return render(_htmlPlaceholder(id, value.render()));
-      }
-      return JSON.stringify(value);
-    case "promise":
-      id = `async_loading_${htmlId++}`;
-      opts.asyncContent.push({
-        id,
-        promise: value.then((result) => ({
-          id,
-          value: result,
-          asyncContent: opts.asyncContent
-        }))
-      });
-      return render(_htmlPlaceholder(id));
-    case "generator":
-      throw new Error("Generators are not supported as a template value at this time. Sorry :(");
-    default:
-      console.log("_renderValue kind =", kind, value);
-  }
-  return escapeHtml(String(value));
-}
-function _htmlPlaceholder(id, content = "Loading...") {
-  return html`<!--hs:loading:${id}--><slot id="${id}">${content}</slot><!--/hs:loading:${id}-->`;
-}
-function render(tmpl) {
-  return tmpl.content;
-}
-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";
-  return typeof obj;
-}
-function isGenerator(obj) {
-  return obj && typeof obj.next == "function" && typeof obj.throw == "function";
-}
+// src/assets.ts
+import { html } from "@hyperspan/html";
 
 // src/clientjs/md5.js
 function md5cycle(x, k) {
@@ -307,7 +151,6 @@ async function buildClientJS() {
   });
   const jsFile = output.outputs[0].path.split("/").reverse()[0];
   clientJSFiles.set("_hs", { src: "/_hs/js/" + jsFile });
-  return jsFile;
 }
 var clientCSSFiles = new Map;
 async function buildClientCSS() {
@@ -391,3 +234,4 @@ export {
   buildClientJS,
   buildClientCSS
 };
+

package/dist/server.js

@@ -1,194 +1,12 @@
+import {
+  buildClientCSS,
+  buildClientJS
+} from "./assets.js";
+
 // src/server.ts
-import { readdir as readdir2 } from "node:fs/promises";
+import { readdir } from "node:fs/promises";
 import { basename, extname, join } from "node:path";
-
-// ../html/dist/html.js
-/*!
- * escape-html
- * Copyright(c) 2012-2013 TJ Holowaychuk
- * Copyright(c) 2015 Andreas Lubbe
- * Copyright(c) 2015 Tiancheng "Timothy" Gu
- * MIT Licensed
- */
-var matchHtmlRegExp = /["'&<>]/;
-function escapeHtml(string) {
-  const str = "" + string;
-  const match = matchHtmlRegExp.exec(str);
-  if (!match) {
-    return str;
-  }
-  let escape;
-  let html = "";
-  let index = 0;
-  let 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;
-}
-
-class TmplHtml {
-  _kind = "hstmpl";
-  content = "";
-  asyncContent;
-  constructor(props) {
-    this.content = props.content;
-    this.asyncContent = props.asyncContent;
-  }
-}
-var htmlId = 0;
-function html(strings, ...values) {
-  const asyncContent = [];
-  let content = "";
-  for (let i = 0;i < strings.length; i++) {
-    const value = values[i];
-    const kind = _typeOf(value);
-    const renderValue = _renderValue(value, { kind, asyncContent }) || "";
-    content += strings[i] + (renderValue ? renderValue : "");
-  }
-  return new TmplHtml({ content, asyncContent });
-}
-html.raw = (content) => ({ _kind: "html_safe", content });
-function _renderValue(value, opts = {
-  kind: undefined,
-  id: undefined,
-  asyncContent: []
-}) {
-  if (value === null || value === undefined || Number.isNaN(value)) {
-    return "";
-  }
-  const kind = opts.kind || _typeOf(value);
-  let id = opts.id;
-  switch (kind) {
-    case "array":
-      return value.map((v) => _renderValue(v, { id, asyncContent: opts.asyncContent })).join("");
-    case "object":
-      id = `async_loading_${htmlId++}`;
-      if (value instanceof TmplHtml || value.constructor.name === "TmplHtml" || value?._kind === "hstmpl") {
-        opts.asyncContent.push(...value.asyncContent);
-        return value.content;
-      }
-      if (value?._kind === "html_safe") {
-        return value?.content || "";
-      }
-      if (typeof value.renderAsync === "function") {
-        opts.asyncContent.push({
-          id,
-          promise: value.renderAsync().then((result) => ({
-            id,
-            value: result,
-            asyncContent: opts.asyncContent
-          }))
-        });
-      }
-      if (typeof value.render === "function") {
-        return render(_htmlPlaceholder(id, value.render()));
-      }
-      return JSON.stringify(value);
-    case "promise":
-      id = `async_loading_${htmlId++}`;
-      opts.asyncContent.push({
-        id,
-        promise: value.then((result) => ({
-          id,
-          value: result,
-          asyncContent: opts.asyncContent
-        }))
-      });
-      return render(_htmlPlaceholder(id));
-    case "generator":
-      throw new Error("Generators are not supported as a template value at this time. Sorry :(");
-    default:
-      console.log("_renderValue kind =", kind, value);
-  }
-  return escapeHtml(String(value));
-}
-function _htmlPlaceholder(id, content = "Loading...") {
-  return html`<!--hs:loading:${id}--><slot id="${id}">${content}</slot><!--/hs:loading:${id}-->`;
-}
-function render(tmpl) {
-  return tmpl.content;
-}
-async function renderAsync(tmpl) {
-  let { content, asyncContent } = tmpl;
-  while (asyncContent.length !== 0) {
-    const resolvedHtml = await Promise.all(asyncContent.map((p) => p.promise));
-    asyncContent = [];
-    resolvedHtml.map((obj) => {
-      const r = new RegExp(`<!--hs:loading:${obj.id}-->(.*?)<!--/hs:loading:${obj.id}-->`);
-      const found = content.match(r);
-      if (found) {
-        content = content.replace(found[0], _renderValue(obj.value, { asyncContent }));
-      }
-    });
-  }
-  return content;
-}
-async function* renderStream(tmpl) {
-  yield render(tmpl);
-  let asyncContent = tmpl.asyncContent;
-  while (asyncContent.length > 0) {
-    const nextContent = await Promise.race(asyncContent.map((p) => p.promise));
-    asyncContent = asyncContent.filter((p) => p.id !== nextContent.id);
-    const id = nextContent.id;
-    const content = _renderValue(nextContent.value, {
-      asyncContent
-    });
-    const script = html`<template id="${id}_content">${html.raw(content)}<!--end--></template>`;
-    yield render(script);
-  }
-}
-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";
-  return typeof obj;
-}
-function isGenerator(obj) {
-  return obj && typeof obj.next == "function" && typeof obj.throw == "function";
-}
+import { TmplHtml, html, 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";
@@ -209,48 +27,6 @@ function isbot(userAgent) {
   return Boolean(userAgent) && getPattern().test(userAgent);
 }
 
-// src/clientjs/md5.js
-var hex_chr = "0123456789abcdef".split("");
-
-// src/assets.ts
-import { readdir } from "node:fs/promises";
-import { resolve } from "node:path";
-var IS_PROD = false;
-var PWD = import.meta.dir;
-var clientJSFiles = new Map;
-async function buildClientJS() {
-  const sourceFile = resolve(PWD, "../", "./src/clientjs/hyperspan-client.ts");
-  const output = await Bun.build({
-    entrypoints: [sourceFile],
-    outdir: `./public/_hs/js`,
-    naming: IS_PROD ? "[dir]/[name]-[hash].[ext]" : undefined,
-    minify: IS_PROD
-  });
-  const jsFile = output.outputs[0].path.split("/").reverse()[0];
-  clientJSFiles.set("_hs", { src: "/_hs/js/" + jsFile });
-  return jsFile;
-}
-var clientCSSFiles = new Map;
-async function buildClientCSS() {
-  if (clientCSSFiles.has("_hs")) {
-    return clientCSSFiles.get("_hs");
-  }
-  const cssDir = "./public/_hs/css/";
-  const cssFiles = await readdir(cssDir);
-  let foundCSSFile = "";
-  for (const file of cssFiles) {
-    if (!file.endsWith(".css")) {
-      continue;
-    }
-    foundCSSFile = file.replace(cssDir, "");
-    clientCSSFiles.set("_hs", foundCSSFile);
-    break;
-  }
-  if (!foundCSSFile) {
-    console.log(`Unable to build CSS files from ${cssDir}`);
-  }
-}
-
 // node_modules/hono/dist/compose.js
 var compose = (middleware, onError, onNotFound) => {
   return (context, next) => {
@@ -920,15 +696,15 @@ var Context = class {
     this.#preparedHeaders["content-type"] = "application/json";
     return typeof arg === "number" ? this.#newResponse(body, arg, headers) : this.#newResponse(body, arg);
   };
-  html = (html2, arg, headers) => {
+  html = (html, arg, headers) => {
     this.#preparedHeaders ??= {};
     this.#preparedHeaders["content-type"] = "text/html; charset=UTF-8";
-    if (typeof html2 === "object") {
-      return resolveCallback(html2, HtmlEscapedCallbackPhase.Stringify, false, {}).then((html22) => {
-        return typeof arg === "number" ? this.#newResponse(html22, arg, headers) : this.#newResponse(html22, arg);
+    if (typeof html === "object") {
+      return resolveCallback(html, HtmlEscapedCallbackPhase.Stringify, false, {}).then((html2) => {
+        return typeof arg === "number" ? this.#newResponse(html2, arg, headers) : this.#newResponse(html2, arg);
       });
     }
-    return typeof arg === "number" ? this.#newResponse(html2, arg, headers) : this.#newResponse(html2, arg);
+    return typeof arg === "number" ? this.#newResponse(html, arg, headers) : this.#newResponse(html, arg);
   };
   redirect = (location, status) => {
     this.#headers ??= new Headers;
@@ -2190,7 +1966,7 @@ class ZodError extends $ZodError {
 var parse = /* @__PURE__ */ _parse.bind({ Error: ZodError });
 
 // src/server.ts
-var IS_PROD2 = false;
+var IS_PROD = false;
 var CWD = process.cwd();
 function createRoute(handler) {
   return new HSRoute(handler);
@@ -2330,7 +2106,7 @@ async function runAPIRoute(routeFn, context, middlewareResult) {
       meta: { success: false },
       data: {
         message: e.message,
-        stack: IS_PROD2 ? undefined : e.stack?.split(`
+        stack: IS_PROD ? undefined : e.stack?.split(`
 `)
       }
     }, { status: 500 });
@@ -2341,7 +2117,7 @@ async function showErrorReponse(context, err) {
     <main>
       <h1>Error</h1>
       <pre>${err.message}</pre>
-      <pre>${!IS_PROD2 && err.stack ? err.stack.split(`
+      <pre>${!IS_PROD && err.stack ? err.stack.split(`
 `).slice(1).join(`
 `) : ""}</pre>
     </main>
@@ -2354,7 +2130,7 @@ var ROUTE_SEGMENT = /(\[[a-zA-Z_\.]+\])/g;
 async function buildRoutes(config2) {
   const routesDir = join(config2.appDir, "routes");
   console.log(routesDir);
-  const files = await readdir2(routesDir, { recursive: true });
+  const files = await readdir(routesDir, { recursive: true });
   const routes = [];
   for (const file of files) {
     if (!file.includes(".") || basename(file).startsWith(".")) {
@@ -2412,7 +2188,7 @@ async function createServer(config2) {
       return context.text("No routes found. Add routes to app/routes. Example: `app/routes/index.ts`", { status: 404 });
     });
   }
-  if (!IS_PROD2) {
+  if (!IS_PROD) {
     console.log("[Hyperspan] File system routes (in app/routes):");
     console.table(routeMap);
   }
@@ -2469,7 +2245,7 @@ export {
   createComponent,
   buildRoutes,
   StreamResponse,
-  IS_PROD2 as IS_PROD,
+  IS_PROD,
   HS_DEFAULT_LOADING,
   HSRoute,
   HSFormRoute,

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@hyperspan/framework",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Hyperspan Web Framework",
-  "main": "dist/index.js",
+  "main": "dist/server.js",
   "public": true,
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
     },
     "./assets": {
       "types": "./dist/assets.d.ts",
@@ -38,10 +42,10 @@
     "url": "https://github.com/vlucas/hyperspan/issues"
   },
   "scripts": {
-    "build": "bun ./build.ts",
+    "build": "bun ./build.ts && sed -i '' -e '$ d' dist/assets.js",
     "clean": "rm -rf dist",
     "test": "bun test",
-    "prepack": "npm run clean && npm run build"
+    "prepack": "bun run clean && bun run build"
   },
   "devDependencies": {
     "@types/bun": "^1.1.9",
@@ -55,7 +59,7 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "@hyperspan/html": "^0.1.1",
+    "@hyperspan/html": "^0.1.2",
     "@preact/compat": "^18.3.1",
     "hono": "^4.7.4",
     "isbot": "^5.1.25",

package/src/assets.ts

@@ -1,7 +1,7 @@
-import {html} from '@hyperspan/html';
-import {md5} from './clientjs/md5';
-import {readdir} from 'node:fs/promises';
-import {resolve} from 'node:path';
+import { html } from '@hyperspan/html';
+import { md5 } from './clientjs/md5';
+import { readdir } from 'node:fs/promises';
+import { resolve } from 'node:path';
 
 const IS_PROD = process.env.NODE_ENV === 'production';
 const PWD = import.meta.dir;
@@ -9,7 +9,7 @@ const PWD = import.meta.dir;
 /**
  * Build client JS for end users (minimal JS for Hyperspan to work)
  */
-export const clientJSFiles = new Map<string, {src: string; type?: string}>();
+export const clientJSFiles = new Map<string, { src: string; type?: string }>();
 export async function buildClientJS() {
   const sourceFile = resolve(PWD, '../', './src/clientjs/hyperspan-client.ts');
   const output = await Bun.build({
@@ -20,8 +20,8 @@ export async function buildClientJS() {
   });
 
   const jsFile = output.outputs[0].path.split('/').reverse()[0];
-  clientJSFiles.set('_hs', {src: '/_hs/js/' + jsFile});
-  return jsFile;
+
+  clientJSFiles.set('_hs', { src: '/_hs/js/' + jsFile });
 }
 
 /**
@@ -71,6 +71,7 @@ export function hyperspanStyleTags() {
  */
 export function hyperspanScriptTags() {
   const jsFiles = Array.from(clientJSFiles.entries());
+
   return html`
     <script type="importmap">
       {
@@ -84,13 +85,13 @@ export function hyperspanScriptTags() {
       }
     </script>
     ${jsFiles.map(
-    ([key, file]) =>
-      html`<script
+      ([key, file]) =>
+        html`<script
           id="js-${key}"
           type="${file.type || 'text/javascript'}"
           src="${file.src}"
         ></script>`
-  )}
+    )}
   `;
 }