npm - @hyperspan/framework - Versions diffs - 0.3.0 → 0.3.2 - Mend

@hyperspan/framework 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/assets.js +3 -8
package/dist/server.js +31 -24
package/package.json +1 -1
package/src/assets.ts +9 -13
package/src/clientjs/hyperspan-client.ts +35 -0
package/src/server.ts +51 -28
package/src/clientjs/md5.js +0 -176
package/src/clientjs/preact.ts +0 -3

package/dist/assets.js CHANGED Viewed

@@ -60,17 +60,12 @@ function assetHash(content) {
 }
 var ISLAND_PUBLIC_PATH = "/_hs/js/islands";
 var ISLAND_DEFAULTS = () => ({
-  ssr: true
+  ssr: true,
+  loading: undefined
 });
 function renderIsland(Component, props, options = ISLAND_DEFAULTS()) {
   if (Component.__HS_ISLAND?.render) {
-    return Component.__HS_ISLAND.render(props, options);
-  }
-  if (Component.__HS_ISLAND?.ssr && options.ssr) {
-    return Component.__HS_ISLAND.ssr(props);
-  }
-  if (Component.__HS_ISLAND?.clientOnly) {
-    return Component.__HS_ISLAND.clientOnly(props);
+    return html.raw(Component.__HS_ISLAND.render(props, options));
   }
   throw new Error(`Module ${Component.name} was not loaded with an island plugin! Did you forget to install an island plugin and add it to the createServer() 'islandPlugins' config?`);
 }

package/dist/server.js CHANGED Viewed

@@ -1847,18 +1847,6 @@ function createRoute(handler) {
       _handlers["POST"] = handler2;
       return api;
     },
-    put(handler2) {
-      _handlers["PUT"] = handler2;
-      return api;
-    },
-    delete(handler2) {
-      _handlers["DELETE"] = handler2;
-      return api;
-    },
-    patch(handler2) {
-      _handlers["PATCH"] = handler2;
-      return api;
-    },
     middleware(middleware) {
       _middleware = middleware;
       return api;
@@ -1909,7 +1897,7 @@ function createAPIRoute(handler) {
     _handlers["GET"] = handler;
   }
   const api = {
-    _kind: "hsRoute",
+    _kind: "hsAPIRoute",
     get(handler2) {
       _handlers["GET"] = handler2;
       return api;
@@ -1988,21 +1976,40 @@ function getRunnableRoute(route) {
   throw new Error(`Route not runnable. Use "export default createRoute()" to create a Hyperspan route. Exported methods found were: ${Object.keys(route).join(", ")}`);
 }
 function isRunnableRoute(route) {
-  return typeof route === "object" && "_getRouteHandlers" in route;
+  if (typeof route !== "object") {
+    return false;
+  }
+  const obj = route;
+  const runnableKind = ["hsRoute", "hsAPIRoute", "hsAction"].includes(obj?._kind);
+  return runnableKind && "_getRouteHandlers" in obj;
 }
 async function showErrorReponse(context, err) {
-  const output = render(html`
-    <main>
-      <h1>Error</h1>
-      <pre>${err.message}</pre>
-      <pre>${!IS_PROD && err.stack ? err.stack.split(`
+  let status = 500;
+  const message = err.message || "Internal Server Error";
+  if (err instanceof HTTPException) {
+    status = err.status;
+  }
+  const stack = !IS_PROD && err.stack ? err.stack.split(`
 `).slice(1).join(`
-`) : ""}</pre>
-    </main>
+`) : "";
+  const output = render(html`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Application Error</title>
+      </head>
+      <body>
+        <main>
+          <h1>Application Error</h1>
+          <strong>${message}</strong>
+          ${stack ? html`<pre>${stack}</pre>` : ""}
+        </main>
+      </body>
+    </html>
   `);
-  return context.html(output, {
-    status: 500
-  });
+  return context.html(output, { status });
 }
 var ROUTE_SEGMENT = /(\[[a-zA-Z_\.]+\])/g;
 async function buildRoutes(config) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/framework",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Hyperspan Web Framework",
   "main": "dist/server.ts",
   "types": "src/server.ts",

package/src/assets.ts CHANGED Viewed

@@ -3,6 +3,11 @@ import { createHash } from 'node:crypto';
 import { readdir } from 'node:fs/promises';
 import { resolve } from 'node:path';
+export type THSIslandOptions = {
+  ssr?: boolean;
+  loading?: 'lazy' | undefined;
+};
 const IS_PROD = process.env.NODE_ENV === 'production';
 const PWD = import.meta.dir;
@@ -97,24 +102,15 @@ export function assetHash(content: string): string {
  * Island defaults
  */
 export const ISLAND_PUBLIC_PATH = '/_hs/js/islands';
-export const ISLAND_DEFAULTS = () => ({
+export const ISLAND_DEFAULTS: () => THSIslandOptions = () => ({
   ssr: true,
+  loading: undefined,
 });
 export function renderIsland(Component: any, props: any, options = ISLAND_DEFAULTS()) {
-  // Render is an OPTIONAL override that allows you to render the island with your own logic
+  // Render island with its own logic
   if (Component.__HS_ISLAND?.render) {
-    return Component.__HS_ISLAND.render(props, options);
-  }
-  // If ssr is true, render the island with the ssr function
-  if (Component.__HS_ISLAND?.ssr && options.ssr) {
-    return Component.__HS_ISLAND.ssr(props);
-  }
-  // If ssr is false, render the island with the clientOnly function
-  if (Component.__HS_ISLAND?.clientOnly) {
-    return Component.__HS_ISLAND.clientOnly(props);
+    return html.raw(Component.__HS_ISLAND.render(props, options));
   }
   throw new Error(

package/src/clientjs/hyperspan-client.ts CHANGED Viewed

@@ -31,6 +31,9 @@ function htmlAsyncContentObserver() {
               Idiomorph.morph(slotEl, el.content.cloneNode(true));
               el.parentNode.removeChild(el);
             });
+            // Lazy load scripts (if any) after the content is inserted
+            lazyLoadScripts();
           }
         } catch (e) {
           console.error(e);
@@ -122,5 +125,37 @@ function formSubmitToRoute(e: Event, form: HTMLFormElement) {
     });
 }
+/**
+ * Intersection observer for lazy loading <script> tags
+ */
+const lazyLoadScriptObserver = new IntersectionObserver(
+  (entries, observer) => {
+    entries
+      .filter((entry) => entry.isIntersecting)
+      .forEach((entry) => {
+        observer.unobserve(entry.target);
+        // @ts-ignore
+        if (entry.target.children[0]?.content) {
+          // @ts-ignore
+          entry.target.replaceWith(entry.target.children[0].content);
+        }
+      });
+  },
+  { rootMargin: '0px 0px -200px 0px' }
+);
+/**
+ * Lazy load <script> tags in the current document
+ */
+function lazyLoadScripts() {
+  document
+    .querySelectorAll('div[data-loading=lazy]')
+    .forEach((el) => lazyLoadScriptObserver.observe(el));
+}
+window.addEventListener('load', () => {
+  lazyLoadScripts();
+});
 // @ts-ignore
 window.html = html;

package/src/server.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import { Hono, type Context } from 'hono';
 import { serveStatic } from 'hono/bun';
 import { HTTPException } from 'hono/http-exception';
 import type { HandlerResponse, MiddlewareHandler } from 'hono/types';
+import type { ContentfulStatusCode } from 'hono/utils/http-status';
 export const IS_PROD = process.env.NODE_ENV === 'production';
 const CWD = process.cwd();
@@ -22,12 +23,19 @@ 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;
   middleware: (middleware: Array<MiddlewareHandler>) => THSRoute;
   _getRouteHandlers: () => Array<MiddlewareHandler | ((context: Context) => HandlerResponse<any>)>;
 };
+export type THSAPIRoute = {
+  _kind: 'hsAPIRoute';
+  get: (handler: THSAPIRouteHandler) => THSAPIRoute;
+  post: (handler: THSAPIRouteHandler) => THSAPIRoute;
+  put: (handler: THSAPIRouteHandler) => THSAPIRoute;
+  delete: (handler: THSAPIRouteHandler) => THSAPIRoute;
+  patch: (handler: THSAPIRouteHandler) => THSAPIRoute;
+  middleware: (middleware: Array<MiddlewareHandler>) => THSAPIRoute;
+  _getRouteHandlers: () => Array<MiddlewareHandler | ((context: Context) => HandlerResponse<any>)>;
+};
 export function createConfig(config: THSServerConfig): THSServerConfig {
   return config;
@@ -55,18 +63,6 @@ export function createRoute(handler?: THSRouteHandler): THSRoute {
       _handlers['POST'] = handler;
       return api;
     },
-    put(handler: THSRouteHandler) {
-      _handlers['PUT'] = handler;
-      return api;
-    },
-    delete(handler: THSRouteHandler) {
-      _handlers['DELETE'] = handler;
-      return api;
-    },
-    patch(handler: THSRouteHandler) {
-      _handlers['PATCH'] = handler;
-      return api;
-    },
     middleware(middleware: Array<MiddlewareHandler>) {
       _middleware = middleware;
       return api;
@@ -128,7 +124,7 @@ export function createRoute(handler?: THSRouteHandler): THSRoute {
  * Create new API Route
  * API Route handlers should return a JSON object or a Response
  */
-export function createAPIRoute(handler?: THSAPIRouteHandler): THSRoute {
+export function createAPIRoute(handler?: THSAPIRouteHandler): THSAPIRoute {
   let _handlers: Record<string, THSAPIRouteHandler> = {};
   let _middleware: Array<MiddlewareHandler> = [];
@@ -136,8 +132,8 @@ export function createAPIRoute(handler?: THSAPIRouteHandler): THSRoute {
     _handlers['GET'] = handler;
   }
-  const api: THSRoute = {
-    _kind: 'hsRoute',
+  const api: THSAPIRoute = {
+    _kind: 'hsAPIRoute',
     get(handler: THSAPIRouteHandler) {
       _handlers['GET'] = handler;
       return api;
@@ -246,9 +242,18 @@ export function getRunnableRoute(route: unknown): THSRoute {
   );
 }
+/**
+ * Check if a route is runnable by Hyperspan
+ */
 export function isRunnableRoute(route: unknown): boolean {
-  // @ts-ignore
-  return typeof route === 'object' && '_getRouteHandlers' in route;
+  if (typeof route !== 'object') {
+    return false;
+  }
+  const obj = route as { _kind: string; _getRouteHandlers: any };
+  const runnableKind = ['hsRoute', 'hsAPIRoute', 'hsAction'].includes(obj?._kind);
+  return runnableKind && '_getRouteHandlers' in obj;
 }
 /**
@@ -256,17 +261,35 @@ export function isRunnableRoute(route: unknown): boolean {
  * @TODO: Should check for and load user-customizeable template with special name (app/__error.ts ?)
  */
 async function showErrorReponse(context: Context, err: Error) {
+  let status: ContentfulStatusCode = 500;
+  const message = err.message || 'Internal Server Error';
+  // Send correct status code if HTTPException
+  if (err instanceof HTTPException) {
+    status = err.status as ContentfulStatusCode;
+  }
+  const stack = !IS_PROD && err.stack ? err.stack.split('\n').slice(1).join('\n') : '';
   const output = render(html`
-    <main>
-      <h1>Error</h1>
-      <pre>${err.message}</pre>
-      <pre>${!IS_PROD && err.stack ? err.stack.split('\n').slice(1).join('\n') : ''}</pre>
-    </main>
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Application Error</title>
+      </head>
+      <body>
+        <main>
+          <h1>Application Error</h1>
+          <strong>${message}</strong>
+          ${stack ? html`<pre>${stack}</pre>` : ''}
+        </main>
+      </body>
+    </html>
   `);
-  return context.html(output, {
-    status: 500,
-  });
+  return context.html(output, { status });
 }
 export type THSServerConfig = {

package/src/clientjs/md5.js DELETED Viewed

@@ -1,176 +0,0 @@
-/**
- * Fast browser md5 function (used for static asset hashing)
- * @link https://www.myersdaily.org/joseph/javascript/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] |= 0x80 << (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;
-}
-/* there needs to be support for Unicode here,
- * unless we pretend that we can redefine the MD-5
- * algorithm for multi-byte characters (perhaps
- * by adding every four 16-bit characters and
- * shortening the sum to 32 bits). Otherwise
- * I suggest performing MD-5 as if every character
- * was two bytes--e.g., 0040 0025 = @%--but then
- * how will an ordinary MD-5 sum be matched?
- * There is no way to standardize text to something
- * like UTF-8 before transformation; speed cost is
- * utterly prohibitive. The JavaScript standard
- * itself needs to look at this: it should start
- * providing access to strings as preformed UTF-8
- * 8-bit unsigned value arrays.
- */
-function md5blk(s) {
-  /* I figured global was faster.   */
-  var md5blks = [],
-    i; /* Andy King said do it this way. */
-  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)) & 0x0f] + hex_chr[(n >> (j * 8)) & 0x0f];
-  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) & 0xffffffff;
-}
-export function md5(s) {
-  return hex(md51(s));
-}

package/src/clientjs/preact.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export * from 'preact/compat';
-export * from 'preact/hooks';
-export { h, render, hydrate } from 'preact';