@hyperspan/framework 1.0.19 → 1.0.21

package/package.json

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

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

@@ -99,7 +99,7 @@ function formSubmitToRoute(e: Event, form: HTMLFormElement, opts: TFormSubmitOpt
   }
 
   fetch(formUrl, { body: formData, method, headers })
-    .then((res: Response) => {
+    .then(async (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')) {
@@ -109,21 +109,20 @@ function formSubmitToRoute(e: Event, form: HTMLFormElement, opts: TFormSubmitOpt
 
           // If the new URL is the same as the current URL, we can just fetch the new HTML and apply it
           if (resolved.pathname === window.location.pathname) {
-            return fetch(resolved.href, {
+            const pageRes = await fetch(resolved.href, {
               headers: { Accept: 'text/html' },
-            })
-              .then((r) => r.text());
+            });
+            await consumeStreamingHtmlResponse(pageRes, applyResponseHtml);
+            return;
           }
 
           // If the new URL is different, we need to redirect the user to the new URL
           window.location.assign(newUrl);
         }
-        return '';
+        return;
       }
 
-      return res.text();
-    })
-    .then((content: string) => {
+      const content = await res.text();
       // No content = DO NOTHING (redirect or something else happened)
       if (!content) {
         return;
@@ -134,4 +133,94 @@ function formSubmitToRoute(e: Event, form: HTMLFormElement, opts: TFormSubmitOpt
     .catch((error) => {
       console.error('[Hyperspan] Error submitting form action:', error);
     });
+}
+
+/** Streaming async chunks use template ids ending in `_content`. */
+const STREAM_CHUNK_MARKER = /<template id="[^"]+_content">/;
+
+function splitInitialStreamHtml(html: string): { initial: string; streamTail: string | null } {
+  const match = STREAM_CHUNK_MARKER.exec(html);
+  if (!match || match.index === 0) {
+    return { initial: html, streamTail: null };
+  }
+  return {
+    initial: html.slice(0, match.index),
+    streamTail: html.slice(match.index),
+  };
+}
+
+/** Append streamed HTML to body and run any inline scripts (e.g. window._hsc.push). */
+function appendHtmlToBody(html: string) {
+  if (!html) {
+    return;
+  }
+
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  const scripts: HTMLScriptElement[] = [];
+  template.content.querySelectorAll('script').forEach((script) => {
+    scripts.push(script);
+    script.remove();
+  });
+  document.body.appendChild(template.content);
+  for (const script of scripts) {
+    const executable = document.createElement('script');
+    if (script.src) {
+      executable.src = script.src;
+    } else {
+      executable.textContent = script.textContent;
+    }
+    document.body.appendChild(executable);
+  }
+}
+
+/**
+ * Read a (possibly streaming) HTML response: Idiomorph the initial page HTML, then append
+ * later stream chunks to document.body so streaming scripts run and placeholders resolve.
+ */
+async function consumeStreamingHtmlResponse(
+  res: Response,
+  applyInitialHtml: (html: string) => void
+) {
+  const body = res.body;
+  if (!body) {
+    const text = await res.text();
+    if (text) {
+      applyInitialHtml(text);
+    }
+    return;
+  }
+
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let isFirstChunk = true;
+
+  function processChunk(html: string) {
+    if (!html) {
+      return;
+    }
+
+    if (isFirstChunk) {
+      isFirstChunk = false;
+      const { initial, streamTail } = splitInitialStreamHtml(html);
+      if (initial) {
+        applyInitialHtml(initial);
+      }
+      if (streamTail) {
+        appendHtmlToBody(streamTail);
+      }
+      return;
+    }
+
+    appendHtmlToBody(html);
+  }
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      processChunk(decoder.decode());
+      break;
+    }
+    processChunk(decoder.decode(value, { stream: true }));
+  }
 }

package/src/utils.test.ts

@@ -65,6 +65,40 @@ describe('formDataToJSON', () => {
       colors: ['red', 'green', 'blue'],
     });
   });
+
+  test('formDataToJSON handles array of objects with numeric keys', () => {
+    const formData = new FormData();
+    formData.append('contact[0][name]', 'John');
+    formData.append('contact[0][email]', 'john@example.com');
+    formData.append('contact[1][name]', 'Jane');
+    formData.append('contact[1][email]', 'jane@example.com');
+
+    const result = formDataToJSON(formData);
+
+    expect(result).toEqual({
+      contact: [
+        { name: 'John', email: 'john@example.com' },
+        { name: 'Jane', email: 'jane@example.com' },
+      ],
+    } as any);
+  });
+
+  test('formDataToJSON keeps object when keys are mixed numeric and text', () => {
+    const formData = new FormData();
+    formData.append('contact[0][name]', 'John');
+    formData.append('contact[0][email]', 'john@example.com');
+    formData.append('contact[label]', 'Primary');
+
+    const result = formDataToJSON(formData);
+
+    // Not ALL keys are numeric ("label"), so it must stay an object - not an array
+    expect(result).toEqual({
+      contact: {
+        '0': { name: 'John', email: 'john@example.com' },
+        label: 'Primary',
+      },
+    } as any);
+  });
 });
 
 describe('parsePath', () => {

package/src/utils.ts

@@ -131,11 +131,38 @@ export function formDataToJSON(formData: FormData | URLSearchParams): Record<str
     }
   };
 
+  /**
+   * Recursively converts objects whose keys are ALL numeric (e.g. "contact[0][name]",
+   * "contact[1][name]") into arrays of objects. Objects with any non-numeric key are
+   * left as-is.
+   */
+  const arrayify = (value: any): any => {
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+      return value;
+    }
+
+    const keys = Object.keys(value);
+    const allNumeric = keys.length > 0 && keys.every((key) => /^\d+$/.test(key));
+
+    if (allNumeric) {
+      const array: any[] = [];
+      for (const key of keys.sort((a, b) => Number(a) - Number(b))) {
+        array[Number(key)] = arrayify(value[key]);
+      }
+      return array;
+    }
+
+    for (const key of keys) {
+      value[key] = arrayify(value[key]);
+    }
+    return value;
+  };
+
   for (const pair of formData.entries()) {
     assign(parseKey(pair[0]), pair[1], object);
   }
 
-  return object;
+  return arrayify(object);
 }
 
 /**