@hyperspan/framework 1.0.0-alpha.8 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/framework",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0",
   "description": "Hyperspan Web Framework",
   "main": "src/server.ts",
   "types": "src/server.ts",
@@ -37,10 +37,6 @@
       "types": "./src/client/js.ts",
       "default": "./src/client/js.ts"
     },
-    "./plugins": {
-      "types": "./src/plugins.ts",
-      "default": "./src/plugins.ts"
-    },
     "./actions": {
       "types": "./src/actions.ts",
       "default": "./src/actions.ts"
@@ -76,7 +72,8 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@hyperspan/html": "^1.0.0-alpha",
+    "@hyperspan/html": "^1.0.0",
+    "isbot": "^5.1.32",
     "zod": "^4.1.12"
   }
 }

package/src/actions.test.ts

@@ -1,92 +1,33 @@
 import { test, expect, describe } from 'bun:test';
-import { formDataToJSON, createAction } from './actions';
+import { createAction } from './actions';
 import { html, render, type HSHtml } from '@hyperspan/html';
 import { createContext } from './server';
 import type { Hyperspan as HS } from './types';
 import * as z from 'zod/v4';
 
-describe('formDataToJSON', () => {
-  test('formDataToJSON returns empty object for empty FormData', () => {
-    const formData = new FormData();
-    const result = formDataToJSON(formData);
-
-    expect(result).toEqual({});
-  });
-
-  test('formDataToJSON handles simple FormData object', () => {
-    const formData = new FormData();
-    formData.append('name', 'John Doe');
-    formData.append('email', 'john@example.com');
-    formData.append('age', '30');
-
-    const result = formDataToJSON(formData);
-
-    expect(result).toEqual({
-      name: 'John Doe',
-      email: 'john@example.com',
-      age: '30',
-    });
-  });
-
-  test('formDataToJSON handles complex FormData with nested fields', () => {
-    const formData = new FormData();
-    formData.append('user[firstName]', 'John');
-    formData.append('user[lastName]', 'Doe');
-    formData.append('user[email]', 'john@example.com');
-    formData.append('user[address][street]', '123 Main St');
-    formData.append('user[address][city]', 'New York');
-    formData.append('user[address][zip]', '10001');
-
-    const result = formDataToJSON(formData);
-
-    expect(result).toEqual({
-      user: {
-        firstName: 'John',
-        lastName: 'Doe',
-        email: 'john@example.com',
-        address: {
-          street: '123 Main St',
-          city: 'New York',
-          zip: '10001',
-        },
-      },
-    } as any);
-  });
-
-  test('formDataToJSON handles FormData with array of values', () => {
-    const formData = new FormData();
-    formData.append('tags', 'javascript');
-    formData.append('tags', 'typescript');
-    formData.append('tags', 'nodejs');
-    formData.append('colors[]', 'red');
-    formData.append('colors[]', 'green');
-    formData.append('colors[]', 'blue');
-
-    const result = formDataToJSON(formData);
-
-    expect(result).toEqual({
-      tags: ['javascript', 'typescript', 'nodejs'],
-      colors: ['red', 'green', 'blue'],
-    });
-  });
-});
-
 describe('createAction', () => {
   test('creates an action with a simple form and no schema', async () => {
     const action = createAction({
-      form: (c: HS.Context) => {
-        return html`
+      name: 'test',
+      schema: z.object({
+        name: z.string().min(1, 'Name is required'),
+      }),
+    }).form((c) => {
+      return html`
           <form>
             <input type="text" name="name" />
             <button type="submit">Submit</button>
           </form>
         `;
-      },
+    }).post(async (c, { data }) => {
+      return c.res.html(`
+          <p>Hello, ${data?.name}!</p>
+        `);
     });
 
     expect(action).toBeDefined();
     expect(action._kind).toBe('hsAction');
-    expect(action._route).toContain('/__actions/');
+    expect(action._path()).toContain('/__actions/');
 
     // Test render method
     const request = new Request('http://localhost:3000/');
@@ -106,17 +47,17 @@ describe('createAction', () => {
     });
 
     const action = createAction({
+      name: 'test',
       schema,
-      form: (c: HS.Context, { data }) => {
-        return html`
+    }).form((c, { data }) => {
+      return html`
           <form>
-            <input type="text" name="name" value="${data?.name || ''}" />
-            <input type="email" name="email" value="${data?.email || ''}" />
+            <input type="text" name="name" />
+            <input type="email" name="email" />
             <button type="submit">Submit</button>
           </form>
         `;
-      },
-    }).post(async (c: HS.Context, { data }) => {
+    }).post(async (c, { data }) => {
       return c.res.html(`
         <p>Hello, ${data?.name}!</p>
         <p>Your email is ${data?.email}.</p>
@@ -125,7 +66,7 @@ describe('createAction', () => {
 
     expect(action).toBeDefined();
     expect(action._kind).toBe('hsAction');
-    expect(action._route).toContain('/__actions/');
+    expect(action._path()).toContain('/__actions/');
 
     // Test render method
     const request = new Request('http://localhost:3000/');
@@ -142,7 +83,7 @@ describe('createAction', () => {
     formData.append('name', 'John Doe');
     formData.append('email', 'john@example.com');
 
-    const postRequest = new Request(`http://localhost:3000${action._route}`, {
+    const postRequest = new Request(`http://localhost:3000${action._path()}`, {
       method: 'POST',
       body: formData,
     });
@@ -163,9 +104,10 @@ describe('createAction', () => {
     });
 
     const action = createAction({
+      name: 'test',
       schema,
-      form: (c: HS.Context, { data, error }) => {
-        return html`
+    }).form((c, { data, error }) => {
+      return html`
           <form>
             <input type="text" name="name" value="${data?.name || ''}" />
             ${error ? html`<div class="error">Validation failed</div>` : ''}
@@ -173,8 +115,7 @@ describe('createAction', () => {
             <button type="submit">Submit</button>
           </form>
         `;
-      },
-    }).post(async (c: HS.Context, { data }) => {
+    }).post(async (c, { data }) => {
       return c.res.html(`
         <p>Hello, ${data?.name}!</p>
         <p>Your email is ${data?.email}.</p>

package/src/actions.ts

@@ -1,10 +1,12 @@
-import { html, HSHtml } from '@hyperspan/html';
+import { html } from '@hyperspan/html';
 import { createRoute, returnHTMLResponse } from './server';
 import * as z from 'zod/v4';
 import type { Hyperspan as HS } from './types';
 import { assetHash, formDataToJSON } from './utils';
-import * as actionsClient from './client/_hs/hyperspan-actions.client';
-import { renderClientJS } from './client/js';
+import { buildClientJS } from './client/js';
+import { validateBody } from './middleware';
+
+const actionsClientJS = await buildClientJS(import.meta.resolve('./client/_hs/hyperspan-actions.client'));
 
 /**
  * Actions = Form + route handler
@@ -19,7 +21,7 @@ import { renderClientJS } from './client/js';
  * 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
  */
-export function createAction<T extends z.ZodTypeAny>(params: { name: string; schema?: T }): HS.Action<T> {
+export function createAction<T extends z.ZodObject<any, any>>(params: { name: string; schema?: T }): HS.Action<T> {
   const { name, schema } = params;
   const path = `/__actions/${assetHash(name)}`;
 
@@ -30,7 +32,7 @@ export function createAction<T extends z.ZodTypeAny>(params: { name: string; sch
     .get((c: HS.Context) => api.render(c))
     .post(async (c: HS.Context) => {
       // Parse form data
-      const formData = await c.req.raw.formData();
+      const formData = await c.req.formData();
       const jsonData = formDataToJSON(formData) as Partial<z.infer<T>>;
       const schemaData = schema ? schema.safeParse(jsonData) : null;
       const data = schemaData?.success ? (schemaData.data as Partial<z.infer<T>>) : jsonData;
@@ -69,7 +71,10 @@ export function createAction<T extends z.ZodTypeAny>(params: { name: string; sch
       }
 
       return await returnHTMLResponse(c, () => api.render(c, { data, error }), { status: 400 });
-    });
+    }, { middleware: schema ? [validateBody(schema)] : [] });
+
+  // Set the name of the action for the route
+  route._config.name = name;
 
   const api: HS.Action<T> = {
     _kind: 'hsAction',
@@ -101,7 +106,7 @@ export function createAction<T extends z.ZodTypeAny>(params: { name: string; sch
      */
     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;
+      return formContent ? html`<hs-action url="${this._path()}">${formContent}</hs-action>${actionsClientJS.renderScriptTag()}` : null;
     },
     errorHandler(handler) {
       _errorHandler = handler;

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

@@ -1,68 +1,5 @@
-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.
@@ -91,4 +28,39 @@ async function waitForContent(
       reject(new Error(`[Hyperspan] Timeout waiting for end of streaming content ${el.id}`));
     }, options.timeoutMs || 10000);
   });
-}
+}
+
+function renderStreamChunk(chunk: { id: string }) {
+  const slotId = chunk.id;
+  const slotEl = document.getElementById(slotId);
+  const templateEl = document.getElementById(`${slotId}_content`) as HTMLTemplateElement;
+
+  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 as unknown as HTMLElement, (el2) => {
+      return Array.from(el2.childNodes).find(
+        (node) => node.nodeType === Node.COMMENT_NODE && node.nodeValue === 'end'
+      );
+    })
+      .then((endComment) => {
+        templateEl.content.removeChild(endComment as Node);
+        const content = templateEl.content.cloneNode(true);
+        slotEl.replaceWith(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) => {
+      (slotEl as HTMLElement)?.replaceWith(templateEl.content.cloneNode(true));
+      lazyLoadScripts();
+    });
+  }
+}
+
+// @ts-ignore
+window._hscc = renderStreamChunk;

package/src/client/js.test.ts

@@ -0,0 +1,200 @@
+import { test, expect, describe } from 'bun:test';
+import { functionToString } from './js';
+
+describe('functionToString', () => {
+  describe('named functions', () => {
+    test('converts named function to string', () => {
+      function myFunction() {
+        return 'hello';
+      }
+
+      const result = functionToString(myFunction);
+      expect(result).toContain('function');
+      expect(result).toContain('myFunction');
+      expect(result).toContain("return 'hello'");
+    });
+
+    test('converts named function with parameters', () => {
+      function add(a: number, b: number) {
+        return a + b;
+      }
+
+      const result = functionToString(add);
+      expect(result).toContain('function');
+      expect(result).toContain('add');
+      expect(result).toContain('a');
+      expect(result).toContain('b');
+    });
+
+    test('converts named async function', () => {
+      async function fetchData() {
+        const response = await fetch('/api/data');
+        return response.json();
+      }
+
+      const result = functionToString(fetchData);
+      expect(result).toContain('async function');
+      expect(result).toContain('fetchData');
+      expect(result).toContain('await');
+    });
+  });
+
+  describe('anonymous functions', () => {
+    test('converts anonymous function to string', () => {
+      const fn = function () {
+        return 'anonymous';
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain("return 'anonymous'");
+    });
+
+    test('converts anonymous function with parameters', () => {
+      const fn = function (x: number, y: number) {
+        return x * y;
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain('x');
+      expect(result).toContain('y');
+    });
+
+    test('converts anonymous async function', () => {
+      const fn = async function () {
+        await new Promise(resolve => setTimeout(resolve, 100));
+        return 'done';
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('async function');
+      expect(result).toContain('await');
+    });
+  });
+
+  describe('arrow functions', () => {
+    test('converts single-line arrow function without braces', () => {
+      const fn = (x: number) => x * 2;
+
+      const result = functionToString(fn);
+      expect(result).toContain('function(x) { return x * 2; }');
+    });
+
+    test('converts single-line arrow function with single parameter', () => {
+      const fn = (name: string) => `Hello, ${name}!`;
+
+      const result = functionToString(fn);
+      expect(result).toContain('function(name) { return `Hello, ${name}!`; }');
+    });
+
+    test('converts single-line arrow function with multiple parameters', () => {
+      const fn = (a: number, b: number) => a + b;
+
+      const result = functionToString(fn);
+      expect(result).toContain('function(a, b) { return a + b; }');
+    });
+
+    test('converts arrow function with braces', () => {
+      const fn = (x: number) => {
+        const doubled = x * 2;
+        return doubled;
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain('x');
+      expect(result).toContain('doubled');
+    });
+
+    test('converts multi-line arrow function', () => {
+      const fn = (items: string[]) => {
+        const filtered = items.filter(item => item.length > 0);
+        return filtered.map(item => item.toUpperCase());
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain('items');
+      expect(result).toContain('filtered');
+    });
+
+    test('converts async arrow function without braces', () => {
+      const fn = async (id: number) => await fetch(`/api/${id}`);
+
+      const result = functionToString(fn);
+      expect(result).toContain('async function');
+      expect(result).toContain('id');
+      expect(result).toContain('await');
+    });
+
+    test('converts async arrow function with braces', () => {
+      const fn = async (id: number) => {
+        const response = await fetch(`/api/${id}`);
+        return response.json();
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('async function');
+      expect(result).toContain('id');
+      expect(result).toContain('await');
+    });
+
+    test('converts arrow function with no parameters', () => {
+      const fn = () => 'no params';
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain("return 'no params'");
+    });
+
+    test('converts arrow function with complex expression', () => {
+      const fn = (obj: { x: number; y: number }) => obj.x + obj.y;
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain('return');
+      expect(result).toContain('obj.x + obj.y');
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles function with whitespace', () => {
+      const fn = function () {
+        return 'test';
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain("return 'test'");
+    });
+
+    test('handles arrow function with whitespace', () => {
+      const fn = (x) => x * 2;
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain('return');
+    });
+
+    test('handles function with comments', () => {
+      const fn = function () {
+        // This is a comment
+        return 'commented';
+      };
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      expect(result).toContain("return 'commented'");
+    });
+
+    test('handles nested arrow functions', () => {
+      const fn = (arr: number[]) => arr.map(x => x * 2);
+
+      const result = functionToString(fn);
+      expect(result).toContain('function');
+      // The nested arrow function should also be converted
+      expect(result).toContain('x * 2');
+    });
+  });
+});