@hyperspan/framework 1.0.0-alpha.3 → 1.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/framework",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "Hyperspan Web Framework",
   "main": "src/server.ts",
   "types": "src/server.ts",
@@ -10,8 +10,8 @@
   },
   "exports": {
     ".": {
-      "types": "./src/server.ts",
-      "default": "./src/server.ts"
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
     },
     "./server": {
       "types": "./src/server.ts",
@@ -80,7 +80,7 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@hyperspan/html": "0.2.0",
+    "@hyperspan/html": "^1.0.0-alpha",
     "zod": "^4.1.12"
   }
 }

package/src/actions.ts

@@ -1,8 +1,10 @@
 import { html, HSHtml } from '@hyperspan/html';
-import { createRoute, parsePath, returnHTMLResponse } from './server';
+import { createRoute, returnHTMLResponse } from './server';
 import * as z from 'zod/v4';
 import type { Hyperspan as HS } from './types';
-import { assetHash } from './utils';
+import { assetHash, formDataToJSON } from './utils';
+import * as actionsClient from './client/_hs/hyperspan-actions.client';
+import { renderClientJS } from './client/js';
 
 /**
  * Actions = Form + route handler
@@ -16,45 +18,15 @@ import { assetHash } from './utils';
  * 4. All validation and save logic is run on the server
  * 5. Replaces form content in place with HTML response content from server via the Idiomorph library
  * 6. Handles any Exception thrown on server as error displayed back to user on the page
- */;
-type HSActionResponse = HSHtml | void | null | Promise<HSHtml | void | null> | Response | Promise<Response>;
-export type HSFormHandler<T extends z.ZodTypeAny> = (
-  c: HS.Context,
-  { data, error }: { data?: Partial<z.infer<T>>; error?: z.ZodError | Error }
-) => HSActionResponse;
-export interface HSAction<T extends z.ZodTypeAny> {
-  _kind: 'hsAction';
-  _name: string;
-  _path(): string;
-  _form: null | HSFormHandler<T>;
-  form(form: HSFormHandler<T>): HSAction<T>;
-  post(
-    handler: (
-      c: HS.Context,
-      { data }: { data?: Partial<z.infer<T>> }
-    ) => HSActionResponse
-  ): HSAction<T>;
-  error(
-    handler: (
-      c: HS.Context,
-      { data, error }: { data?: Partial<z.infer<T>>; error?: z.ZodError | Error }
-    ) => HSActionResponse
-  ): HSAction<T>;
-  render(
-    c: HS.Context,
-    props?: { data?: Partial<z.infer<T>>; error?: z.ZodError | Error }
-  ): HSActionResponse;
-  middleware: (middleware: Array<HS.MiddlewareFunction>) => HSAction<T>;
-  fetch(request: Request): Response | Promise<Response>;
-}
-
-export function createAction<T extends z.ZodTypeAny>(params: { name: string; schema?: T }) {
+ */
+export function createAction<T extends z.ZodTypeAny>(params: { name: string; schema?: T }): HS.Action<T> {
   const { name, schema } = params;
+  const path = `/__actions/${assetHash(name)}`;
 
-  let _handler: Parameters<HSAction<T>['post']>[0] | null = null;
-  let _errorHandler: Parameters<HSAction<T>['error']>[0] | null = null;
+  let _handler: Parameters<HS.Action<T>['post']>[0] | null = null;
+  let _errorHandler: Parameters<HS.Action<T>['errorHandler']>[0] | null = null;
 
-  const route = createRoute()
+  const route = createRoute({ path, name })
     .get((c: HS.Context) => api.render(c))
     .post(async (c: HS.Context) => {
       // Parse form data
@@ -99,18 +71,18 @@ export function createAction<T extends z.ZodTypeAny>(params: { name: string; sch
       return await returnHTMLResponse(c, () => api.render(c, { data, error }), { status: 400 });
     });
 
-  const api: HSAction<T> = {
+  const api: HS.Action<T> = {
     _kind: 'hsAction',
-    _name: name,
+    _config: route._config,
     _path() {
-      return `/__actions/${assetHash(name)}`;
+      return path;
     },
     _form: null,
     /**
      * Form to render
      * This will be wrapped in a <hs-action> web component and submitted via fetch()
      */
-    form(form: HSFormHandler<T>) {
+    form(form: HS.ActionFormHandler<T>) {
       api._form = form;
       return api;
     },
@@ -125,102 +97,22 @@ export function createAction<T extends z.ZodTypeAny>(params: { name: string; sch
       return api;
     },
     /**
-     * Cusotm error handler if you want to display something other than the default
+     * Get form renderer method
      */
-    error(handler) {
+    render(c: HS.Context, props?: HS.ActionProps<T>) {
+      const formContent = api._form ? api._form(c, props || {}) : null;
+      return formContent ? html`<hs-action url="${this._path()}">${formContent}</hs-action>${renderClientJS(actionsClient)}` : null;
+    },
+    errorHandler(handler) {
       _errorHandler = handler;
       return api;
     },
-    /**
-     * Add middleware specific to this route
-     */
-    middleware(middleware) {
+    middleware(middleware: Array<HS.MiddlewareFunction>) {
       route.middleware(middleware);
       return api;
     },
-    /**
-     * Get form renderer method
-     */
-    render(c: HS.Context, props?: { data?: Partial<z.infer<T>>; error?: z.ZodError | Error }) {
-      const formContent = api._form ? api._form(c, props || {}) : null;
-      return formContent ? html`<hs-action url="${this._path()}">${formContent}</hs-action>` : null;
-    },
-    /**
-     * Run action route handler
-     */
-    fetch(request: Request) {
-      return route.fetch(request);
-    },
+    fetch: route.fetch,
   };
 
   return api;
-}
-
-/**
- * Return JSON data structure for a given FormData object
- * Accounts for array fields (e.g. name="options[]" or <select multiple>)
- *
- * @link https://stackoverflow.com/a/75406413
- */
-export function formDataToJSON(formData: FormData): Record<string, string | string[]> {
-  let object = {};
-
-  /**
-   * Parses FormData key xxx`[x][x][x]` fields into array
-   */
-  const parseKey = (key: string) => {
-    const subKeyIdx = key.indexOf('[');
-
-    if (subKeyIdx !== -1) {
-      const keys = [key.substring(0, subKeyIdx)];
-      key = key.substring(subKeyIdx);
-
-      for (const match of key.matchAll(/\[(?<key>.*?)]/gm)) {
-        if (match.groups) {
-          keys.push(match.groups.key);
-        }
-      }
-      return keys;
-    } else {
-      return [key];
-    }
-  };
-
-  /**
-   * Recursively iterates over keys and assigns key/values to object
-   */
-  const assign = (keys: string[], value: FormDataEntryValue, object: any): void => {
-    const key = keys.shift();
-
-    // When last key in the iterations
-    if (key === '' || key === undefined) {
-      return object.push(value);
-    }
-
-    if (Reflect.has(object, key)) {
-      // If key has been found, but final pass - convert the value to array
-      if (keys.length === 0) {
-        if (!Array.isArray(object[key])) {
-          object[key] = [object[key], value];
-          return;
-        }
-      }
-      // Recurse again with found object
-      return assign(keys, value, object[key]);
-    }
-
-    // Create empty object for key, if next key is '' do array instead, otherwise set value
-    if (keys.length >= 1) {
-      object[key] = keys[0] === '' ? [] : {};
-      return assign(keys, value, object[key]);
-    } else {
-      object[key] = value;
-    }
-  };
-
-  for (const pair of formData.entries()) {
-    assign(parseKey(pair[0]), pair[1], object);
-  }
-
-  return object;
 }

package/src/client/_hs/hyperspan-actions.client.ts

@@ -0,0 +1,98 @@
+import { Idiomorph } from './idiomorph';
+import { lazyLoadScripts } from './hyperspan-scripts.client';
+
+const actionFormObserver = new MutationObserver((list) => {
+  list.forEach((mutation) => {
+    mutation.addedNodes.forEach((node) => {
+      if (node && ('closest' in node || node instanceof HTMLFormElement)) {
+        bindHSActionForm(
+          (node as HTMLElement).closest('hs-action') as HSAction,
+          node instanceof HTMLFormElement
+            ? node
+            : ((node as HTMLElement | HTMLFormElement).querySelector('form') as HTMLFormElement)
+        );
+      }
+    });
+  });
+});
+
+/**
+ * Server action component to handle the client-side form submission and HTML replacement
+ */
+class HSAction extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    actionFormObserver.observe(this, { childList: true, subtree: true });
+    bindHSActionForm(this, this.querySelector('form') as HTMLFormElement);
+  }
+}
+window.customElements.define('hs-action', HSAction);
+
+/**
+ * Bind the form inside an hs-action element to the action URL and submit handler
+ */
+function bindHSActionForm(hsActionElement: HSAction, form: HTMLFormElement) {
+  if (!hsActionElement || !form) {
+    return;
+  }
+
+  form.setAttribute('action', hsActionElement.getAttribute('url') || '');
+  const submitHandler = (e: Event) => {
+    e.preventDefault();
+    formSubmitToRoute(e, form as HTMLFormElement, {
+      afterResponse: () => bindHSActionForm(hsActionElement, form),
+    });
+    form.removeEventListener('submit', submitHandler);
+  };
+  form.addEventListener('submit', submitHandler);
+}
+
+/**
+ * Submit form data to route and replace contents with response
+ */
+type TFormSubmitOptons = { afterResponse: () => any };
+function formSubmitToRoute(e: Event, form: HTMLFormElement, opts: TFormSubmitOptons) {
+  const formData = new FormData(form);
+  const formUrl = form.getAttribute('action') || '';
+  const method = form.getAttribute('method')?.toUpperCase() || 'POST';
+  const headers = {
+    Accept: 'text/html',
+    'X-Request-Type': 'partial',
+  };
+
+  const hsActionTag = form.closest('hs-action');
+  const submitBtn = form.querySelector('button[type=submit],input[type=submit]');
+  if (submitBtn) {
+    submitBtn.setAttribute('disabled', 'disabled');
+  }
+
+  fetch(formUrl, { body: formData, method, headers })
+    .then((res: Response) => {
+      // Look for special header that indicates a redirect.
+      // fetch() automatically follows 3xx redirects, so we need to handle this manually to redirect the user to the full page
+      if (res.headers.has('X-Redirect-Location')) {
+        const newUrl = res.headers.get('X-Redirect-Location');
+        if (newUrl) {
+          window.location.assign(newUrl);
+        }
+        return '';
+      }
+
+      return res.text();
+    })
+    .then((content: string) => {
+      // No content = DO NOTHING (redirect or something else happened)
+      if (!content) {
+        return;
+      }
+
+      const target = content.includes('<html') ? window.document.body : hsActionTag || form;
+
+      Idiomorph.morph(target, content);
+      opts.afterResponse && opts.afterResponse();
+      lazyLoadScripts();
+    });
+}

package/src/client/_hs/hyperspan-scripts.client.ts

@@ -0,0 +1,31 @@
+/**
+ * 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
+ */
+export function lazyLoadScripts() {
+  document
+    .querySelectorAll('div[data-loading=lazy]')
+    .forEach((el) => lazyLoadScriptObserver.observe(el));
+}
+
+window.addEventListener('load', () => {
+  lazyLoadScripts();
+});

package/src/client/_hs/hyperspan-streaming.client.ts

@@ -0,0 +1,94 @@
+import { Idiomorph } from './idiomorph';
+import { lazyLoadScripts } from './hyperspan-scripts.client';
+
+/**
+ * Used for streaming content from the server to the client.
+ */
+function htmlAsyncContentObserver() {
+  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) => {
+            if (!node || !node?.id || typeof node.id !== 'string') {
+              return false;
+            }
+            return node.id?.startsWith('async_loading_') && node.id?.endsWith('_content');
+          })
+        )
+        .filter((node: any) => node);
+
+      asyncContent.forEach((templateEl: any) => {
+        try {
+          // Also observe for content inside the template content (shadow DOM is separate)
+          asyncContentObserver.observe(templateEl.content, { childList: true, subtree: true });
+
+          const slotId = templateEl.id.replace('_content', '');
+          const slotEl = document.getElementById(slotId);
+
+          if (slotEl) {
+            // Content AND slot are present - let's insert the content into the slot
+            // Ensure the content is fully done streaming in before inserting it into the slot
+            waitForContent(templateEl.content, (el2) => {
+              return Array.from(el2.childNodes).find(
+                (node) => node.nodeType === Node.COMMENT_NODE && node.nodeValue === 'end'
+              );
+            })
+              .then((endComment) => {
+                templateEl.content.removeChild(endComment);
+                const content = templateEl.content.cloneNode(true);
+                Idiomorph.morph(slotEl, content);
+                templateEl.parentNode.removeChild(templateEl);
+                lazyLoadScripts();
+              })
+              .catch(console.error);
+          } else {
+            // Slot is NOT present - wait for it to be added to the DOM so we can insert the content into it
+            waitForContent(document.body, () => {
+              return document.getElementById(slotId);
+            }).then((slotEl) => {
+              Idiomorph.morph(slotEl, templateEl.content.cloneNode(true));
+              lazyLoadScripts();
+            });
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      });
+    });
+    asyncContentObserver.observe(document.body, { childList: true, subtree: true });
+  }
+}
+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 waitForContent(
+  el: HTMLElement,
+  waitFn: (
+    node: HTMLElement
+  ) => HTMLElement | HTMLTemplateElement | Node | ChildNode | null | undefined,
+  options: { timeoutMs?: number; intervalMs?: number } = { timeoutMs: 10000, intervalMs: 20 }
+): Promise<HTMLElement | HTMLTemplateElement | Node | ChildNode | null | undefined> {
+  return new Promise((resolve, reject) => {
+    let timeout: NodeJS.Timeout;
+    const interval = setInterval(() => {
+      const content = waitFn(el);
+      if (content) {
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+        clearInterval(interval);
+        resolve(content);
+      }
+    }, options.intervalMs || 20);
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      reject(new Error(`[Hyperspan] Timeout waiting for end of streaming content ${el.id}`));
+    }, options.timeoutMs || 10000);
+  });
+}

package/src/client/js.ts

@@ -1,5 +1,4 @@
 import { html } from '@hyperspan/html';
-import type { Hyperspan as HS } from '../types';
 
 export const JS_PUBLIC_PATH = '/_hs/js';
 export const JS_ISLAND_PUBLIC_PATH = '/_hs/js/islands';
@@ -59,23 +58,4 @@ export function functionToString(fn: any) {
   }
 
   return str;
-}
-
-/**
- * Island defaults
- */
-export const ISLAND_DEFAULTS: () => HS.ClientIslandOptions = () => ({
-  ssr: true,
-  loading: undefined,
-});
-
-export function renderIsland(Component: any, props: any, options = ISLAND_DEFAULTS()) {
-  // Render island with its own logic
-  if (Component.__HS_ISLAND?.render) {
-    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 'islandPlugins' option in your hyperspan.config.ts file?`
-  );
 }

package/src/index.ts

@@ -0,0 +1,2 @@
+export { createConfig, createContext, createRoute, createServer, getRunnableRoute, StreamResponse } from './server';
+export type { Hyperspan } from './types';

package/src/plugins.ts

@@ -46,6 +46,7 @@ export function clientJSPlugin(): HS.Plugin {
           const esmName = String(result.outputs[0].path.split('/').reverse()[0]).replace('.js', '');
           JS_IMPORT_MAP.set(esmName, `${JS_PUBLIC_PATH}/${esmName}.js`);
 
+          // Get the contents of the file to extract the exports
           const contents = await result.outputs[0].text();
           const exportLine = EXPORT_REGEX.exec(contents);
 
@@ -67,9 +68,6 @@ export function clientJSPlugin(): HS.Plugin {
           const moduleCode = `// hyperspan:processed
 import { functionToString } from '@hyperspan/framework/client/js';
 
-// Original file contents
-${contents}
-
 // hyperspan:client-js-plugin
 export const __CLIENT_JS = {
   id: "${jsId}",

package/src/server.ts

@@ -2,7 +2,6 @@ import { HSHtml, html, isHSHtml, renderStream, renderAsync, render } from '@hype
 import { executeMiddleware } from './middleware';
 import type { Hyperspan as HS } from './types';
 import { clientJSPlugin } from './plugins';
-import { CSS_ROUTE_MAP } from './client/css';
 export type { HS as Hyperspan };
 
 export const IS_PROD = process.env.NODE_ENV === 'production';
@@ -50,7 +49,10 @@ export function createContext(req: Request, route?: HS.Route): HS.Context {
       method,
       headers,
       query,
-      body: req.body,
+      async text() { return req.text() },
+      async json<T = unknown>() { return await req.json() as T },
+      async formData<T = unknown>() { return await req.formData() as T },
+      async urlencoded() { return new URLSearchParams(await req.text()) },
     },
     res: {
       headers: new Headers(),
@@ -135,6 +137,10 @@ export function createRoute(config: HS.RouteConfig = {}): HS.Route {
       _middleware['OPTIONS'] = handlerOptions?.middleware || [];
       return api;
     },
+    errorHandler(handler: HS.RouteHandler) {
+      _handlers['_ERROR'] = handler;
+      return api;
+    },
     /**
      * Add middleware specific to this route
      */
@@ -196,7 +202,16 @@ export function createRoute(config: HS.RouteConfig = {}): HS.Route {
         return routeContent;
       };
 
-      return executeMiddleware(context, [...globalMiddleware, ...methodMiddleware, methodHandler]);
+      // Run the route handler and any middleware
+      // If an error occurs, run the error handler if it exists
+      try {
+        return await executeMiddleware(context, [...globalMiddleware, ...methodMiddleware, methodHandler]);
+      } catch (e) {
+        if (_handlers['_ERROR']) {
+          return await (_handlers['_ERROR'](context) as Promise<Response>);
+        }
+        throw e;
+      }
     },
   };
 
@@ -329,11 +344,6 @@ export function getRunnableRoute(route: unknown, routeConfig?: HS.RouteConfig):
 
   const kind = typeof route;
 
-  // Plain function - wrap in createRoute()
-  if (kind === 'function') {
-    return createRoute(routeConfig).get(route as HS.RouteHandler);
-  }
-
   // Module - get default and use it
   // @ts-ignore
   if (kind === 'object' && 'default' in route) {
@@ -355,7 +365,7 @@ export function isRunnableRoute(route: unknown): boolean {
   }
 
   const obj = route as { _kind: string; fetch: (request: Request) => Promise<Response> };
-  return 'hsRoute' === obj?._kind && 'fetch' in obj;
+  return typeof obj?._kind === 'string' && 'fetch' in obj;
 }
 
 /**
@@ -365,7 +375,7 @@ export function isValidRoutePath(path: string): boolean {
   const isHiddenRoute = path.includes('/__');
   const isTestFile = path.includes('.test') || path.includes('.spec');
 
-  return !isHiddenRoute && !isTestFile;
+  return !isHiddenRoute && !isTestFile && Boolean(path);
 }
 
 /**

package/src/types.ts

@@ -1,3 +1,6 @@
+import { HSHtml } from '@hyperspan/html';
+import * as z from 'zod/v4';
+
 /**
  * Hyperspan Types
  */
@@ -39,7 +42,10 @@ export namespace Hyperspan {
       method: string; // Always uppercase
       headers: Headers; // Case-insensitive
       query: URLSearchParams;
-      body: any;
+      text: () => Promise<string>;
+      json<T = unknown>(): Promise<T>;
+      formData<T = unknown>(): Promise<T>;
+      urlencoded(): Promise<URLSearchParams>;
     };
     res: {
       headers: Headers; // Headers to merge with final outgoing response
@@ -94,7 +100,6 @@ export namespace Hyperspan {
 
   export interface Route {
     _kind: 'hsRoute';
-    _name: string | undefined;
     _config: Hyperspan.RouteConfig;
     _path(): string;
     _methods(): string[];
@@ -104,7 +109,29 @@ export namespace Hyperspan {
     patch: (handler: Hyperspan.RouteHandler, handlerOptions?: Hyperspan.RouteHandlerOptions) => Hyperspan.Route;
     delete: (handler: Hyperspan.RouteHandler, handlerOptions?: Hyperspan.RouteHandlerOptions) => Hyperspan.Route;
     options: (handler: Hyperspan.RouteHandler, handlerOptions?: Hyperspan.RouteHandlerOptions) => Hyperspan.Route;
+    errorHandler: (handler: Hyperspan.RouteHandler) => Hyperspan.Route;
     middleware: (middleware: Array<Hyperspan.MiddlewareFunction>) => Hyperspan.Route;
     fetch: (request: Request) => Promise<Response>;
   };
+
+  /**
+   * Action = Form + route handler
+   */
+  export type ActionResponse = HSHtml | void | null | Promise<HSHtml | void | null> | Response | Promise<Response>;
+  export type ActionProps<T extends z.ZodTypeAny> = { data?: Partial<z.infer<T>>; error?: z.ZodError | Error };
+  export type ActionFormHandler<T extends z.ZodTypeAny> = (
+    c: Context, props: ActionProps<T>
+  ) => ActionResponse;
+  export interface Action<T extends z.ZodTypeAny> {
+    _kind: 'hsAction';
+    _config: Hyperspan.RouteConfig;
+    _path(): string;
+    _form: null | ActionFormHandler<T>;
+    form(form: ActionFormHandler<T>): Action<T>;
+    render: (c: Context, props?: ActionProps<T>) => ActionResponse;
+    post: (handler: ActionFormHandler<T>) => Action<T>;
+    errorHandler: (handler: ActionFormHandler<T>) => Action<T>;
+    middleware: (middleware: Array<Hyperspan.MiddlewareFunction>) => Action<T>;
+    fetch: (request: Request) => Promise<Response>;
+  }
 }

package/src/utils.ts

@@ -6,4 +6,73 @@ export function assetHash(content: string): string {
 
 export function randomHash(): string {
   return createHash('md5').update(randomBytes(32).toString('hex')).digest('hex');
+}
+
+/**
+ * Return JSON data structure for a given FormData or URLSearchParams object
+ * Accounts for array fields (e.g. name="options[]" or <select multiple>)
+ *
+ * @link https://stackoverflow.com/a/75406413
+ */
+export function formDataToJSON(formData: FormData | URLSearchParams): Record<string, string | string[]> {
+  let object = {};
+
+  /**
+   * Parses FormData key xxx`[x][x][x]` fields into array
+   */
+  const parseKey = (key: string) => {
+    const subKeyIdx = key.indexOf('[');
+
+    if (subKeyIdx !== -1) {
+      const keys = [key.substring(0, subKeyIdx)];
+      key = key.substring(subKeyIdx);
+
+      for (const match of key.matchAll(/\[(?<key>.*?)]/gm)) {
+        if (match.groups) {
+          keys.push(match.groups.key);
+        }
+      }
+      return keys;
+    } else {
+      return [key];
+    }
+  };
+
+  /**
+   * Recursively iterates over keys and assigns key/values to object
+   */
+  const assign = (keys: string[], value: FormDataEntryValue, object: any): void => {
+    const key = keys.shift();
+
+    // When last key in the iterations
+    if (key === '' || key === undefined) {
+      return object.push(value);
+    }
+
+    if (Reflect.has(object, key)) {
+      // If key has been found, but final pass - convert the value to array
+      if (keys.length === 0) {
+        if (!Array.isArray(object[key])) {
+          object[key] = [object[key], value];
+          return;
+        }
+      }
+      // Recurse again with found object
+      return assign(keys, value, object[key]);
+    }
+
+    // Create empty object for key, if next key is '' do array instead, otherwise set value
+    if (keys.length >= 1) {
+      object[key] = keys[0] === '' ? [] : {};
+      return assign(keys, value, object[key]);
+    } else {
+      object[key] = value;
+    }
+  };
+
+  for (const pair of formData.entries()) {
+    assign(parseKey(pair[0]), pair[1], object);
+  }
+
+  return object;
 }

package/src/clientjs/hyperspan-client.ts

@@ -1,224 +0,0 @@
-import { html } from '@hyperspan/html';
-import { Idiomorph } from './idiomorph';
-
-/**
- * Used for streaming content from the server to the client.
- */
-function htmlAsyncContentObserver() {
-  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) => {
-            if (!node || !node?.id || typeof node.id !== 'string') {
-              return false;
-            }
-            return node.id?.startsWith('async_loading_') && node.id?.endsWith('_content');
-          })
-        )
-        .filter((node: any) => node);
-
-      asyncContent.forEach((templateEl: any) => {
-        try {
-          // Also observe for content inside the template content (shadow DOM is separate)
-          asyncContentObserver.observe(templateEl.content, { childList: true, subtree: true });
-
-          const slotId = templateEl.id.replace('_content', '');
-          const slotEl = document.getElementById(slotId);
-
-          if (slotEl) {
-            // Content AND slot are present - let's insert the content into the slot
-            // Ensure the content is fully done streaming in before inserting it into the slot
-            waitForContent(templateEl.content, (el2) => {
-              return Array.from(el2.childNodes).find(
-                (node) => node.nodeType === Node.COMMENT_NODE && node.nodeValue === 'end'
-              );
-            })
-              .then((endComment) => {
-                templateEl.content.removeChild(endComment);
-                const content = templateEl.content.cloneNode(true);
-                Idiomorph.morph(slotEl, content);
-                templateEl.parentNode.removeChild(templateEl);
-                lazyLoadScripts();
-              })
-              .catch(console.error);
-          } else {
-            // Slot is NOT present - wait for it to be added to the DOM so we can insert the content into it
-            waitForContent(document.body, () => {
-              return document.getElementById(slotId);
-            }).then((slotEl) => {
-              Idiomorph.morph(slotEl, templateEl.content.cloneNode(true));
-              lazyLoadScripts();
-            });
-          }
-        } catch (e) {
-          console.error(e);
-        }
-      });
-    });
-    asyncContentObserver.observe(document.body, { childList: true, subtree: true });
-  }
-}
-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 waitForContent(
-  el: HTMLElement,
-  waitFn: (
-    node: HTMLElement
-  ) => HTMLElement | HTMLTemplateElement | Node | ChildNode | null | undefined,
-  options: { timeoutMs?: number; intervalMs?: number } = { timeoutMs: 10000, intervalMs: 20 }
-): Promise<HTMLElement | HTMLTemplateElement | Node | ChildNode | null | undefined> {
-  return new Promise((resolve, reject) => {
-    let timeout: NodeJS.Timeout;
-    const interval = setInterval(() => {
-      const content = waitFn(el);
-      if (content) {
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-        clearInterval(interval);
-        resolve(content);
-      }
-    }, options.intervalMs || 20);
-    timeout = setTimeout(() => {
-      clearInterval(interval);
-      reject(new Error(`[Hyperspan] Timeout waiting for end of streaming content ${el.id}`));
-    }, options.timeoutMs || 10000);
-  });
-}
-
-/**
- * Server action component to handle the client-side form submission and HTML replacement
- */
-class HSAction extends HTMLElement {
-  constructor() {
-    super();
-  }
-
-  connectedCallback() {
-    actionFormObserver.observe(this, { childList: true, subtree: true });
-    bindHSActionForm(this, this.querySelector('form') as HTMLFormElement);
-  }
-}
-window.customElements.define('hs-action', HSAction);
-const actionFormObserver = new MutationObserver((list) => {
-  list.forEach((mutation) => {
-    mutation.addedNodes.forEach((node) => {
-      if (node && ('closest' in node || node instanceof HTMLFormElement)) {
-        bindHSActionForm(
-          (node as HTMLElement).closest('hs-action') as HSAction,
-          node instanceof HTMLFormElement
-            ? node
-            : ((node as HTMLElement | HTMLFormElement).querySelector('form') as HTMLFormElement)
-        );
-      }
-    });
-  });
-});
-
-/**
- * Bind the form inside an hs-action element to the action URL and submit handler
- */
-function bindHSActionForm(hsActionElement: HSAction, form: HTMLFormElement) {
-  if (!hsActionElement || !form) {
-    return;
-  }
-
-  form.setAttribute('action', hsActionElement.getAttribute('url') || '');
-  const submitHandler = (e: Event) => {
-    e.preventDefault();
-    formSubmitToRoute(e, form as HTMLFormElement, {
-      afterResponse: () => bindHSActionForm(hsActionElement, form),
-    });
-    form.removeEventListener('submit', submitHandler);
-  };
-  form.addEventListener('submit', submitHandler);
-}
-
-/**
- * Submit form data to route and replace contents with response
- */
-type TFormSubmitOptons = { afterResponse: () => any };
-function formSubmitToRoute(e: Event, form: HTMLFormElement, opts: TFormSubmitOptons) {
-  const formData = new FormData(form);
-  const formUrl = form.getAttribute('action') || '';
-  const method = form.getAttribute('method')?.toUpperCase() || 'POST';
-  const headers = {
-    Accept: 'text/html',
-    'X-Request-Type': 'partial',
-  };
-
-  const hsActionTag = form.closest('hs-action');
-  const submitBtn = form.querySelector('button[type=submit],input[type=submit]');
-  if (submitBtn) {
-    submitBtn.setAttribute('disabled', 'disabled');
-  }
-
-  fetch(formUrl, { body: formData, method, headers })
-    .then((res: Response) => {
-      // Look for special header that indicates a redirect.
-      // fetch() automatically follows 3xx redirects, so we need to handle this manually to redirect the user to the full page
-      if (res.headers.has('X-Redirect-Location')) {
-        const newUrl = res.headers.get('X-Redirect-Location');
-        if (newUrl) {
-          window.location.assign(newUrl);
-        }
-        return '';
-      }
-
-      return res.text();
-    })
-    .then((content: string) => {
-      // No content = DO NOTHING (redirect or something else happened)
-      if (!content) {
-        return;
-      }
-
-      const target = content.includes('<html') ? window.document.body : hsActionTag || form;
-
-      Idiomorph.morph(target, content);
-      opts.afterResponse && opts.afterResponse();
-      lazyLoadScripts();
-    });
-}
-
-/**
- * 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;