@jay-framework/stack-client-runtime 0.15.6 → 0.16.1

package/dist/index.cjs

@@ -130,13 +130,20 @@ function makeHeadlessInstanceComponent(preRender, componentDef, coordinateKey) {
         const clientVS = { ...resolvedFastVS, ...originalRender() };
         if (!done) {
           setHydrationDone(true);
+          if (instanceData)
+            instanceData.viewStates[resolvedKey] = component.materializeViewState(resolvedFastVS);
           return resolvedFastVS;
         }
+        if (instanceData)
+          instanceData.viewStates[resolvedKey] = component.materializeViewState(clientVS);
         return clientVS;
       };
     } else {
       compCore.render = () => {
-        return { ...resolvedFastVS, ...originalRender() };
+        const vs = { ...resolvedFastVS, ...originalRender() };
+        if (instanceData)
+          instanceData.viewStates[resolvedKey] = component.materializeViewState(vs);
+        return vs;
       };
     }
     return compCore;
@@ -204,6 +211,10 @@ function makeCompositeJayComponent(preRender, defaultViewState, fastCarryForward
             );
           }
         });
+        const ivs = instancesData.viewStates;
+        if (Object.keys(ivs).length > 0) {
+          viewState.__headlessInstances = ivs;
+        }
         return viewState;
       }
     };
@@ -278,6 +289,10 @@ function hydrateCompositeJayComponent(hydratePreRender, defaultViewState, fastCa
             );
           }
         });
+        const ivs = instancesData.viewStates;
+        if (Object.keys(ivs).length > 0) {
+          viewState.__headlessInstances = ivs;
+        }
         return viewState;
       }
     };
@@ -317,19 +332,60 @@ let globalOptions = {};
 function setActionCallerOptions(options) {
   globalOptions = { ...globalOptions, ...options };
 }
-function createActionCaller(actionName, method = "POST") {
+function buildFormData(input) {
+  const formData = new FormData();
+  const jsonFields = {};
+  for (const [key, value] of Object.entries(input)) {
+    if (value instanceof Blob) {
+      const name = value instanceof File ? value.name : `${key}.bin`;
+      formData.append(key, value, name);
+    } else if (Array.isArray(value) && value.some((v) => v instanceof Blob)) {
+      const nonFiles = [];
+      for (const item of value) {
+        if (item instanceof Blob) {
+          const name = item instanceof File ? item.name : `${key}.bin`;
+          formData.append(key, item, name);
+        } else {
+          nonFiles.push(item);
+        }
+      }
+      if (nonFiles.length > 0) {
+        jsonFields[key] = nonFiles;
+      }
+    } else {
+      jsonFields[key] = value;
+    }
+  }
+  if (Object.keys(jsonFields).length > 0) {
+    formData.append("_json", JSON.stringify(jsonFields));
+  }
+  return formData;
+}
+function hasFiles(input) {
+  if (typeof input !== "object" || input === null)
+    return false;
+  for (const value of Object.values(input)) {
+    if (value instanceof Blob)
+      return true;
+    if (Array.isArray(value) && value.some((v) => v instanceof Blob))
+      return true;
+  }
+  return false;
+}
+function createActionCaller(actionName, method = "POST", options) {
   return async (input) => {
     const baseUrl = globalOptions.baseUrl ?? "";
-    const url = buildActionUrl(baseUrl, actionName, method, input);
+    const useFormData = options?.acceptsFiles && hasFiles(input);
+    const url = useFormData ? `${baseUrl}${ACTION_ENDPOINT_BASE}/${actionName}` : buildActionUrl(baseUrl, actionName, method, input);
     const fetchOptions = {
       method,
       headers: {
-        "Content-Type": "application/json",
+        ...useFormData ? {} : { "Content-Type": "application/json" },
         ...globalOptions.headers
       }
     };
     if (method !== "GET") {
-      fetchOptions.body = JSON.stringify(input);
+      fetchOptions.body = useFormData ? buildFormData(input) : JSON.stringify(input);
     }
     const timeout = globalOptions.timeout ?? 3e4;
     const controller = new AbortController();
@@ -387,6 +443,113 @@ function buildActionUrl(baseUrl, actionName, method, input) {
   }
   return fullUrl;
 }
+function createStreamCaller(actionName, options) {
+  return (input) => {
+    return {
+      [Symbol.asyncIterator]() {
+        const baseUrl = globalOptions.baseUrl ?? "";
+        const url = `${baseUrl}${ACTION_ENDPOINT_BASE}/${actionName}`;
+        const useFormData = options?.acceptsFiles && hasFiles(input);
+        let reader = null;
+        let buffer = "";
+        let done = false;
+        let error = null;
+        const chunks = [];
+        let resolveNext = null;
+        const fetchPromise = fetch(url, {
+          method: "POST",
+          headers: {
+            ...useFormData ? {} : { "Content-Type": "application/json" },
+            ...globalOptions.headers
+          },
+          body: useFormData ? buildFormData(input) : JSON.stringify(input)
+        }).then((response) => {
+          if (!response.ok) {
+            throw new ActionError(
+              "STREAM_ERROR",
+              `Stream '${actionName}' failed with status ${response.status}`
+            );
+          }
+          reader = response.body.getReader();
+          pump();
+        }).catch((err) => {
+          error = err instanceof ActionError ? err : new ActionError(
+            "NETWORK_ERROR",
+            `Network error streaming '${actionName}': ${err.message}`
+          );
+          if (resolveNext)
+            resolveNext();
+        });
+        const decoder = new TextDecoder();
+        function pump() {
+          reader.read().then(({ done: readerDone, value }) => {
+            if (value) {
+              buffer += decoder.decode(value, { stream: true });
+              const lines = buffer.split("\n");
+              buffer = lines.pop();
+              for (const line of lines) {
+                if (!line.trim())
+                  continue;
+                const parsed = JSON.parse(line);
+                if (parsed.error) {
+                  error = new ActionError("STREAM_ERROR", parsed.error);
+                  if (resolveNext)
+                    resolveNext();
+                  return;
+                }
+                if (parsed.done) {
+                  done = true;
+                  if (resolveNext)
+                    resolveNext();
+                  return;
+                }
+                if ("chunk" in parsed) {
+                  chunks.push(parsed.chunk);
+                  if (resolveNext)
+                    resolveNext();
+                }
+              }
+            }
+            if (readerDone) {
+              done = true;
+              if (resolveNext)
+                resolveNext();
+              return;
+            }
+            pump();
+          }).catch((err) => {
+            error = new ActionError("STREAM_ERROR", err.message);
+            if (resolveNext)
+              resolveNext();
+          });
+        }
+        return {
+          async next() {
+            await fetchPromise;
+            while (true) {
+              if (chunks.length > 0) {
+                return { value: chunks.shift(), done: false };
+              }
+              if (error) {
+                throw error;
+              }
+              if (done) {
+                return { value: void 0, done: true };
+              }
+              await new Promise((resolve) => {
+                resolveNext = resolve;
+              });
+              resolveNext = null;
+            }
+          },
+          [Symbol.asyncIterator]() {
+            return this;
+          }
+        };
+      }
+    };
+  };
+}
 function isSimpleObject(obj) {
   if (typeof obj !== "object" || obj === null) {
     return false;
@@ -591,11 +754,6 @@ class AutomationAgent {
     if (options) {
       this.initialSlowViewState = options.initialViewState;
       this.trackByMap = options.trackByMap;
-      this.mergedViewState = deepMergeViewStates(
-        options.initialViewState,
-        this.component.viewState || {},
-        options.trackByMap
-      );
     }
     this.subscribeToUpdates();
   }
@@ -603,13 +761,7 @@ class AutomationAgent {
     this.viewStateHandler = () => {
       this.cachedRaw = null;
       this.cachedGrouped = null;
-      if (this.initialSlowViewState && this.trackByMap) {
-        this.mergedViewState = deepMergeViewStates(
-          this.initialSlowViewState,
-          this.component.viewState || {},
-          this.trackByMap
-        );
-      }
+      this.mergedViewState = null;
       this.notifyListeners();
     };
     this.component.addEventListener(VIEW_STATE_CHANGE, this.viewStateHandler);
@@ -630,9 +782,22 @@ class AutomationAgent {
     return this.cachedGrouped;
   }
   getPageState() {
+    let viewState;
+    if (this.initialSlowViewState && this.trackByMap) {
+      viewState = deepMergeViewStates(
+        this.initialSlowViewState,
+        this.component.viewState || {},
+        this.trackByMap
+      );
+      const componentInstances = this.component.viewState?.__headlessInstances;
+      if (componentInstances) {
+        viewState.__headlessInstances = componentInstances;
+      }
+    } else {
+      viewState = this.component.viewState;
+    }
     return {
-      // Use merged state if available (slow+fast), otherwise component's viewState
-      viewState: this.mergedViewState || this.component.viewState,
+      viewState,
       interactions: this.getGrouped(),
       customEvents: this.getCustomEvents()
     };
@@ -702,6 +867,7 @@ exports.AUTOMATION_CONTEXT = AUTOMATION_CONTEXT;
 exports.ActionError = ActionError;
 exports.HEADLESS_INSTANCES = HEADLESS_INSTANCES;
 exports.createActionCaller = createActionCaller;
+exports.createStreamCaller = createStreamCaller;
 exports.hydrateCompositeJayComponent = hydrateCompositeJayComponent;
 exports.makeCompositeJayComponent = makeCompositeJayComponent;
 exports.makeHeadlessInstanceComponent = makeHeadlessInstanceComponent;

package/dist/index.d.ts

@@ -145,6 +145,33 @@ declare function setActionCallerOptions(options: ActionCallerOptions): void;
  * const addToCart = createActionCaller<{productId: string}, {cartCount: number}>('cart.addToCart', 'POST');
  * ```
  */
-declare function createActionCaller<Input, Output>(actionName: string, method?: HttpMethod): (input: Input) => Promise<Output>;
+/**
+ * Options for action callers.
+ */
+interface CreateActionCallerOptions {
+    /** Whether this action accepts file uploads (DL#131) */
+    acceptsFiles?: boolean;
+}
+declare function createActionCaller<Input, Output>(actionName: string, method?: HttpMethod, options?: CreateActionCallerOptions): (input: Input) => Promise<Output>;
+/**
+ * Creates a client-side stream caller that makes an HTTP request and returns
+ * an async iterable of chunks via NDJSON streaming.
+ *
+ * This function is used by the build transform to replace server-side makeJayStream
+ * handlers with client-side HTTP stream consumers.
+ *
+ * @param actionName - The unique action name (matches server registration)
+ * @returns A callable function that returns an AsyncIterable of chunks
+ *
+ * @example
+ * ```typescript
+ * // Build transform replaces:
+ * import { checkInventory } from './actions/inventory-check.actions';
+ *
+ * // With:
+ * const checkInventory = createStreamCaller<void, { name: string }>('inventory.check');
+ * ```
+ */
+declare function createStreamCaller<Input, Chunk>(actionName: string, options?: CreateActionCallerOptions): (input: Input) => AsyncIterable<Chunk>;
 
-export { type ActionCallerOptions, ActionError, type CompositePart, HEADLESS_INSTANCES, type HeadlessComponentDef, type HeadlessInstancesData, type HttpMethod, createActionCaller, hydrateCompositeJayComponent, makeCompositeJayComponent, makeHeadlessInstanceComponent, setActionCallerOptions };
+export { type ActionCallerOptions, ActionError, type CompositePart, type CreateActionCallerOptions, HEADLESS_INSTANCES, type HeadlessComponentDef, type HeadlessInstancesData, type HttpMethod, createActionCaller, createStreamCaller, hydrateCompositeJayComponent, makeCompositeJayComponent, makeHeadlessInstanceComponent, setActionCallerOptions };

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { makeJayComponent, createSignal, COMPONENT_CONTEXT, materializeViewState } from "@jay-framework/component";
+import { makeJayComponent, createSignal, materializeViewState, COMPONENT_CONTEXT } from "@jay-framework/component";
 import { createJayContext, useContext, currentConstructionContext } from "@jay-framework/runtime";
 function deepMergeViewStates$1(base, overlay, trackByMap, path = "") {
   if (!base && !overlay)
@@ -128,13 +128,20 @@ function makeHeadlessInstanceComponent(preRender, componentDef, coordinateKey) {
         const clientVS = { ...resolvedFastVS, ...originalRender() };
         if (!done) {
           setHydrationDone(true);
+          if (instanceData)
+            instanceData.viewStates[resolvedKey] = materializeViewState(resolvedFastVS);
           return resolvedFastVS;
         }
+        if (instanceData)
+          instanceData.viewStates[resolvedKey] = materializeViewState(clientVS);
         return clientVS;
       };
     } else {
       compCore.render = () => {
-        return { ...resolvedFastVS, ...originalRender() };
+        const vs = { ...resolvedFastVS, ...originalRender() };
+        if (instanceData)
+          instanceData.viewStates[resolvedKey] = materializeViewState(vs);
+        return vs;
       };
     }
     return compCore;
@@ -202,6 +209,10 @@ function makeCompositeJayComponent(preRender, defaultViewState, fastCarryForward
             );
           }
         });
+        const ivs = instancesData.viewStates;
+        if (Object.keys(ivs).length > 0) {
+          viewState.__headlessInstances = ivs;
+        }
         return viewState;
       }
     };
@@ -276,6 +287,10 @@ function hydrateCompositeJayComponent(hydratePreRender, defaultViewState, fastCa
             );
           }
         });
+        const ivs = instancesData.viewStates;
+        if (Object.keys(ivs).length > 0) {
+          viewState.__headlessInstances = ivs;
+        }
         return viewState;
       }
     };
@@ -315,19 +330,60 @@ let globalOptions = {};
 function setActionCallerOptions(options) {
   globalOptions = { ...globalOptions, ...options };
 }
-function createActionCaller(actionName, method = "POST") {
+function buildFormData(input) {
+  const formData = new FormData();
+  const jsonFields = {};
+  for (const [key, value] of Object.entries(input)) {
+    if (value instanceof Blob) {
+      const name = value instanceof File ? value.name : `${key}.bin`;
+      formData.append(key, value, name);
+    } else if (Array.isArray(value) && value.some((v) => v instanceof Blob)) {
+      const nonFiles = [];
+      for (const item of value) {
+        if (item instanceof Blob) {
+          const name = item instanceof File ? item.name : `${key}.bin`;
+          formData.append(key, item, name);
+        } else {
+          nonFiles.push(item);
+        }
+      }
+      if (nonFiles.length > 0) {
+        jsonFields[key] = nonFiles;
+      }
+    } else {
+      jsonFields[key] = value;
+    }
+  }
+  if (Object.keys(jsonFields).length > 0) {
+    formData.append("_json", JSON.stringify(jsonFields));
+  }
+  return formData;
+}
+function hasFiles(input) {
+  if (typeof input !== "object" || input === null)
+    return false;
+  for (const value of Object.values(input)) {
+    if (value instanceof Blob)
+      return true;
+    if (Array.isArray(value) && value.some((v) => v instanceof Blob))
+      return true;
+  }
+  return false;
+}
+function createActionCaller(actionName, method = "POST", options) {
   return async (input) => {
     const baseUrl = globalOptions.baseUrl ?? "";
-    const url = buildActionUrl(baseUrl, actionName, method, input);
+    const useFormData = options?.acceptsFiles && hasFiles(input);
+    const url = useFormData ? `${baseUrl}${ACTION_ENDPOINT_BASE}/${actionName}` : buildActionUrl(baseUrl, actionName, method, input);
     const fetchOptions = {
       method,
       headers: {
-        "Content-Type": "application/json",
+        ...useFormData ? {} : { "Content-Type": "application/json" },
         ...globalOptions.headers
       }
     };
     if (method !== "GET") {
-      fetchOptions.body = JSON.stringify(input);
+      fetchOptions.body = useFormData ? buildFormData(input) : JSON.stringify(input);
     }
     const timeout = globalOptions.timeout ?? 3e4;
     const controller = new AbortController();
@@ -385,6 +441,113 @@ function buildActionUrl(baseUrl, actionName, method, input) {
   }
   return fullUrl;
 }
+function createStreamCaller(actionName, options) {
+  return (input) => {
+    return {
+      [Symbol.asyncIterator]() {
+        const baseUrl = globalOptions.baseUrl ?? "";
+        const url = `${baseUrl}${ACTION_ENDPOINT_BASE}/${actionName}`;
+        const useFormData = options?.acceptsFiles && hasFiles(input);
+        let reader = null;
+        let buffer = "";
+        let done = false;
+        let error = null;
+        const chunks = [];
+        let resolveNext = null;
+        const fetchPromise = fetch(url, {
+          method: "POST",
+          headers: {
+            ...useFormData ? {} : { "Content-Type": "application/json" },
+            ...globalOptions.headers
+          },
+          body: useFormData ? buildFormData(input) : JSON.stringify(input)
+        }).then((response) => {
+          if (!response.ok) {
+            throw new ActionError(
+              "STREAM_ERROR",
+              `Stream '${actionName}' failed with status ${response.status}`
+            );
+          }
+          reader = response.body.getReader();
+          pump();
+        }).catch((err) => {
+          error = err instanceof ActionError ? err : new ActionError(
+            "NETWORK_ERROR",
+            `Network error streaming '${actionName}': ${err.message}`
+          );
+          if (resolveNext)
+            resolveNext();
+        });
+        const decoder = new TextDecoder();
+        function pump() {
+          reader.read().then(({ done: readerDone, value }) => {
+            if (value) {
+              buffer += decoder.decode(value, { stream: true });
+              const lines = buffer.split("\n");
+              buffer = lines.pop();
+              for (const line of lines) {
+                if (!line.trim())
+                  continue;
+                const parsed = JSON.parse(line);
+                if (parsed.error) {
+                  error = new ActionError("STREAM_ERROR", parsed.error);
+                  if (resolveNext)
+                    resolveNext();
+                  return;
+                }
+                if (parsed.done) {
+                  done = true;
+                  if (resolveNext)
+                    resolveNext();
+                  return;
+                }
+                if ("chunk" in parsed) {
+                  chunks.push(parsed.chunk);
+                  if (resolveNext)
+                    resolveNext();
+                }
+              }
+            }
+            if (readerDone) {
+              done = true;
+              if (resolveNext)
+                resolveNext();
+              return;
+            }
+            pump();
+          }).catch((err) => {
+            error = new ActionError("STREAM_ERROR", err.message);
+            if (resolveNext)
+              resolveNext();
+          });
+        }
+        return {
+          async next() {
+            await fetchPromise;
+            while (true) {
+              if (chunks.length > 0) {
+                return { value: chunks.shift(), done: false };
+              }
+              if (error) {
+                throw error;
+              }
+              if (done) {
+                return { value: void 0, done: true };
+              }
+              await new Promise((resolve) => {
+                resolveNext = resolve;
+              });
+              resolveNext = null;
+            }
+          },
+          [Symbol.asyncIterator]() {
+            return this;
+          }
+        };
+      }
+    };
+  };
+}
 function isSimpleObject(obj) {
   if (typeof obj !== "object" || obj === null) {
     return false;
@@ -589,11 +752,6 @@ class AutomationAgent {
     if (options) {
       this.initialSlowViewState = options.initialViewState;
       this.trackByMap = options.trackByMap;
-      this.mergedViewState = deepMergeViewStates(
-        options.initialViewState,
-        this.component.viewState || {},
-        options.trackByMap
-      );
     }
     this.subscribeToUpdates();
   }
@@ -601,13 +759,7 @@ class AutomationAgent {
     this.viewStateHandler = () => {
       this.cachedRaw = null;
       this.cachedGrouped = null;
-      if (this.initialSlowViewState && this.trackByMap) {
-        this.mergedViewState = deepMergeViewStates(
-          this.initialSlowViewState,
-          this.component.viewState || {},
-          this.trackByMap
-        );
-      }
+      this.mergedViewState = null;
       this.notifyListeners();
     };
     this.component.addEventListener(VIEW_STATE_CHANGE, this.viewStateHandler);
@@ -628,9 +780,22 @@ class AutomationAgent {
     return this.cachedGrouped;
   }
   getPageState() {
+    let viewState;
+    if (this.initialSlowViewState && this.trackByMap) {
+      viewState = deepMergeViewStates(
+        this.initialSlowViewState,
+        this.component.viewState || {},
+        this.trackByMap
+      );
+      const componentInstances = this.component.viewState?.__headlessInstances;
+      if (componentInstances) {
+        viewState.__headlessInstances = componentInstances;
+      }
+    } else {
+      viewState = this.component.viewState;
+    }
     return {
-      // Use merged state if available (slow+fast), otherwise component's viewState
-      viewState: this.mergedViewState || this.component.viewState,
+      viewState,
       interactions: this.getGrouped(),
       customEvents: this.getCustomEvents()
     };
@@ -701,6 +866,7 @@ export {
   ActionError,
   HEADLESS_INSTANCES,
   createActionCaller,
+  createStreamCaller,
   hydrateCompositeJayComponent,
   makeCompositeJayComponent,
   makeHeadlessInstanceComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/stack-client-runtime",
-  "version": "0.15.6",
+  "version": "0.16.1",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -27,15 +27,15 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@jay-framework/component": "^0.15.6",
-    "@jay-framework/fullstack-component": "^0.15.6",
-    "@jay-framework/runtime": "^0.15.6",
-    "@jay-framework/runtime-automation": "^0.15.6",
-    "@jay-framework/view-state-merge": "^0.15.6"
+    "@jay-framework/component": "^0.16.1",
+    "@jay-framework/fullstack-component": "^0.16.1",
+    "@jay-framework/runtime": "^0.16.1",
+    "@jay-framework/runtime-automation": "^0.16.1",
+    "@jay-framework/view-state-merge": "^0.16.1"
   },
   "devDependencies": {
-    "@jay-framework/dev-environment": "^0.15.6",
-    "@jay-framework/jay-cli": "^0.15.6",
+    "@jay-framework/dev-environment": "^0.16.1",
+    "@jay-framework/jay-cli": "^0.16.1",
     "@types/express": "^5.0.2",
     "@types/node": "^22.15.21",
     "nodemon": "^3.0.3",