@hyperspan/framework 0.0.1

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hyperspan/framework",
+  "version": "0.0.1",
+  "description": "Hyperspan Web Framework",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "public": true,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "bun run clean && bun run build:client && bun run build:server",
+    "build:client": "bun build ./src/index.ts --outdir ./dist --target browser",
+    "build:server": "bun build ./src/server.ts --outdir ./dist --target bun",
+    "clean": "rm -rf dist",
+    "test": "bun test",
+    "prepack": "npm run clean && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vlucas/hyperspan-framework"
+  },
+  "keywords": ["framework", "node", "bun", "web", "framework", "javascript", "typescript"],
+  "author": "Vance Lucas <vance@vancelucas.com>",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/vlucas/hyperspan-framework/issues"
+  },
+  "homepage": "https://www.hyperspan.dev",
+  "dependencies": {
+    "@fastify/deepmerge": "^2.0.0",
+    "@mjackson/headers": "^0.7.2",
+    "escape-html": "^1.0.3",
+    "isbot": "^5.1.17",
+    "trek-middleware": "^1.2.0",
+    "trek-router": "^1.2.0"
+  }
+}

package/src/app.ts

@@ -0,0 +1,186 @@
+// @ts-ignore
+import Router from 'trek-router';
+// @ts-ignore
+import Middleware from 'trek-middleware';
+import deepmerge from '@fastify/deepmerge';
+import Headers from '@mjackson/headers';
+
+const mergeAll = deepmerge({ all: true });
+
+type THTTPMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+/**
+ * Request context
+ */
+export class HSRequestContext {
+  public req: Request;
+  public locals: Record<string, any>;
+  public headers: Headers;
+  public route: {
+    params: Record<string, string>;
+    query: URLSearchParams;
+  };
+
+  constructor(req: Request, params: Record<string, string> = {}) {
+    this.req = req;
+    this.locals = {};
+    this.route = {
+      params,
+      query: new URL(req.url).searchParams,
+    };
+
+    // This could probably be re-visited...
+    const allowHeaders = ['cookie'];
+    const reqHeaders: Record<string, string> = {};
+
+    for (let [name, value] of req.headers) {
+      if (allowHeaders.includes(name)) {
+        reqHeaders[name] = value;
+      }
+    }
+
+    this.headers = new Headers(reqHeaders);
+  }
+
+  /**
+   * Response helper
+   * Merges a Response object while preserving all headers added in context/middleware
+   */
+  resMerge(res: Response) {
+    const cHeaders: Record<string, string> = {};
+    for (let [name, value] of this.headers) {
+      cHeaders[name] = value;
+    }
+
+    const newRes = new Response(
+      res.body,
+      mergeAll(
+        { headers: cHeaders },
+        { headers: res.headers.toJSON() },
+        { status: res.status, statusText: res.statusText }
+      )
+    );
+
+    return newRes;
+  }
+
+  /**
+   * HTML response helper
+   * Preserves all headers added in context/middleware
+   */
+  html(content: string, options?: ResponseInit): Response {
+    return new Response(content, mergeAll({ headers: { 'Content-Type': 'text/html' } }, options));
+  }
+
+  /**
+   * JSON response helper
+   * Preserves all headers added in context/middleware
+   */
+  json(content: any, options?: ResponseInit): Response {
+    return new Response(
+      JSON.stringify(content),
+      mergeAll({ headers: { 'Content-Type': 'application/json' } }, options)
+    );
+  }
+
+  notFound(msg: string = 'Not found!') {
+    return this.html(msg, { status: 404 });
+  }
+}
+
+type THSRouteHandler = (
+  context: HSRequestContext
+) => (Response | null | void) | Promise<Response | null | void>;
+
+/**
+ * App
+ */
+export class HSApp {
+  private _router: typeof Router;
+  private _mw: typeof Middleware;
+  public _defaultRoute: THSRouteHandler;
+
+  constructor() {
+    this._router = new Router();
+    this._mw = new Middleware();
+    this._defaultRoute = (c: HSRequestContext) => {
+      return c.notFound('Not found');
+    };
+  }
+
+  // @TODO: Middleware !!!!
+
+  public get(path: string, handler: THSRouteHandler) {
+    return this._route('GET', path, handler);
+  }
+  public post(path: string, handler: THSRouteHandler) {
+    return this._route('POST', path, handler);
+  }
+  public put(path: string, handler: THSRouteHandler) {
+    return this._route('PUT', path, handler);
+  }
+  public delete(path: string, handler: THSRouteHandler) {
+    return this._route('DELETE', path, handler);
+  }
+  public all(path: string, handler: THSRouteHandler) {
+    return this.addRoute(['GET', 'POST', 'PUT', 'PATCH', 'DELETE'], path, handler);
+  }
+  public addRoute(methods: THTTPMethod[], path: string, handler: THSRouteHandler) {
+    methods.forEach((method) => {
+      this._route(method, path, handler);
+    });
+    return this;
+  }
+  public defaultRoute(handler: THSRouteHandler) {
+    this._defaultRoute = handler;
+  }
+  private _route(method: string | string[], path: string, handler: any) {
+    this._router.add(method, path, handler);
+    return this;
+  }
+
+  async run(req: Request): Promise<Response> {
+    let response: Response;
+    let url = new URL(req.url);
+    let urlPath = normalizePath(url.pathname);
+
+    // Redirect to normalized path (lowercase & without trailing slash)
+    if (urlPath !== url.pathname) {
+      url.pathname = urlPath;
+      return Response.redirect(url);
+    }
+
+    let result = this._router.find(req.method.toUpperCase(), urlPath);
+    let params: Record<string, any> = {};
+
+    if (result && result[0]) {
+      // Build params
+      result[1].forEach((param: any) => (params[param.name] = param.value));
+
+      // Run route with context
+      const context = new HSRequestContext(req, params);
+      response = result[0](context);
+    }
+
+    // @ts-ignore
+    if (response) {
+      return response;
+    }
+
+    const context = new HSRequestContext(req);
+
+    // @ts-ignore
+    return this._defaultRoute(context);
+  }
+}
+
+/**
+ * Normalize URL path
+ * Removes trailing slash and lowercases path
+ */
+export function normalizePath(urlPath: string): string {
+  return (
+    (urlPath.endsWith('/') ? urlPath.substring(0, urlPath.length - 1) : urlPath).toLowerCase() ||
+    '/'
+  );
+}

package/src/clientjs/hyperspan-client.ts

@@ -0,0 +1,218 @@
+import { html, renderToString } from '../html';
+import { Idiomorph } from './idomorph.esm';
+
+function setupAsyncContentObserver() {
+  if (typeof MutationObserver != 'undefined') {
+    // Hyperspan - Async content loader
+    // Puts streamed content in its place immediately after it is added to the DOM
+    const asyncContentObserver = new MutationObserver((list) => {
+      const asyncContent = list
+        .map((mutation) =>
+          Array.from(mutation.addedNodes).find((node: any) => {
+            return node.id?.startsWith('async_') && node.id?.endsWith('_content');
+          })
+        )
+        .filter((node: any) => node);
+
+      asyncContent.forEach((el: any) => {
+        try {
+          // Also observe child nodes for nested async content
+          asyncContentObserver.observe(el.content, { childList: true, subtree: true });
+
+          const slotId = el.id.replace('_content', '');
+          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);
+            });
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      });
+    });
+    asyncContentObserver.observe(document.body, { childList: true, subtree: true });
+  }
+}
+setupAsyncContentObserver();
+
+/**
+ * Event binding for added/updated content
+ */
+function setupEventBindingObserver() {
+  if (typeof MutationObserver != 'undefined') {
+    const eventBindingObserver = new MutationObserver((list) => {
+      bindHyperspanEvents(document.body);
+    });
+    eventBindingObserver.observe(document.body, { childList: true, subtree: true });
+  }
+}
+setupEventBindingObserver();
+
+/**
+ * Global Window assignments...
+ */
+
+// @ts-ignore
+const hyperspan: any = {
+  _fn: new Map(),
+  wc: new Map(),
+  compIdOrLast(id?: string) {
+    let comp = hyperspan.wc.get(id);
+
+    // Get last component if id lookup failed
+    if (!comp) {
+      const lastComp = Array.from(hyperspan.wc).pop();
+      // @ts-ignore - The value returned from a Map is a tuple. The second value (lastComp[1]) is the actual value
+      comp = lastComp ? lastComp[1] : false;
+    }
+
+    return comp || false;
+  },
+  fn(id: string, ufn: any) {
+    const comp = this.compIdOrLast(id);
+
+    const fnd = {
+      id,
+      cid: comp ? comp.id : null,
+      fn: comp ? ufn.bind(comp) : ufn,
+      comp,
+    };
+
+    this._fn.set(id, fnd);
+  },
+  // Binds function execution to the component instance so 'this' keyword works as expected inside event handlers
+  fnc(id: string, ...args: any[]) {
+    const fnd = this._fn.get(id);
+
+    if (!fnd) {
+      console.log('[Hyperspan] Unable to find function with id ' + id);
+      return;
+    }
+
+    if (fnd.comp) {
+      fnd.fn.call(fnd.comp, ...args);
+    } else {
+      fnd.fn(...args);
+    }
+  },
+};
+
+/**
+ * Web component (foundation of client components)
+ */
+class HyperspanComponent extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  static get observedAttributes() {
+    return ['data-state'];
+  }
+
+  randomId() {
+    return Math.random().toString(36).substring(2, 9);
+  }
+
+  async render() {
+    let content = '<div>Loading...</div>';
+
+    const comp = hyperspan.wc.get(this.id);
+
+    if (comp) {
+      content = await renderToString(comp.render());
+    }
+
+    Idiomorph.morph(this, content, { morphStyle: 'innerHTML' });
+  }
+
+  connectedCallback() {
+    const comp = hyperspan.wc.get(this.id);
+
+    if (comp) {
+      comp.mount && comp.mount();
+    }
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+}
+
+// Bind events
+function bindHyperspanEvents(webComponentEl: HTMLElement) {
+  const domEvents = [
+    'click',
+    'dblclick',
+    'contextmenu',
+    'hover',
+    'focus',
+    'blur',
+    'mouseup',
+    'mousedown',
+    'touchstart',
+    'touchend',
+    'touchcancel',
+    'touchmove',
+    'submit',
+    'change',
+    'scroll',
+    'keyup',
+    'keydown',
+  ];
+  const eventEls = Array.from(
+    webComponentEl.querySelectorAll('[on' + domEvents.join('], [on') + ']')
+  );
+
+  for (let i = 0; i < eventEls.length; i++) {
+    const el = eventEls[i] as HTMLElement;
+    const elEvents = el.getAttributeNames();
+
+    elEvents
+      .filter((ev) => ev.startsWith('on'))
+      .map((event) => {
+        const fnId = el.getAttribute(event)?.replace('hyperspan:', '');
+
+        if (fnId && el.dataset[event] !== fnId) {
+          const eventName = event.replace('on', '');
+          el.addEventListener(eventName, globalEventDispatch);
+          el.dataset[event] = fnId;
+          el.removeAttribute(event);
+        }
+      });
+  }
+}
+
+// Proxies all events to the function they go to by event type
+function globalEventDispatch(e: Event) {
+  let el = e.target as HTMLElement;
+
+  if (el) {
+    const dataName = 'on' + e.type;
+    let fnId = el.dataset[dataName];
+
+    if (!fnId) {
+      el = el.closest('[data-' + dataName + ']') || el;
+    }
+
+    fnId = el.dataset[dataName];
+
+    if (fnId) {
+      hyperspan.fnc(fnId, e, el);
+    }
+  }
+}
+
+customElements.define('hs-wc', HyperspanComponent);
+
+// @ts-ignore
+window.hyperspan = hyperspan;
+// @ts-ignore
+window.html = html;