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

package/dist/index.cjs

@@ -332,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();
@@ -402,12 +443,13 @@ function buildActionUrl(baseUrl, actionName, method, input) {
   }
   return fullUrl;
 }
-function createStreamCaller(actionName) {
+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;
@@ -417,10 +459,10 @@ function createStreamCaller(actionName) {
         const fetchPromise = fetch(url, {
           method: "POST",
           headers: {
-            "Content-Type": "application/json",
+            ...useFormData ? {} : { "Content-Type": "application/json" },
             ...globalOptions.headers
           },
-          body: JSON.stringify(input)
+          body: useFormData ? buildFormData(input) : JSON.stringify(input)
         }).then((response) => {
           if (!response.ok) {
             throw new ActionError(

package/dist/index.d.ts

@@ -145,7 +145,14 @@ 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.
@@ -165,6 +172,6 @@ declare function createActionCaller<Input, Output>(actionName: string, method?:
  * const checkInventory = createStreamCaller<void, { name: string }>('inventory.check');
  * ```
  */
-declare function createStreamCaller<Input, Chunk>(actionName: string): (input: Input) => AsyncIterable<Chunk>;
+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, createStreamCaller, 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

@@ -330,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();
@@ -400,12 +441,13 @@ function buildActionUrl(baseUrl, actionName, method, input) {
   }
   return fullUrl;
 }
-function createStreamCaller(actionName) {
+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;
@@ -415,10 +457,10 @@ function createStreamCaller(actionName) {
         const fetchPromise = fetch(url, {
           method: "POST",
           headers: {
-            "Content-Type": "application/json",
+            ...useFormData ? {} : { "Content-Type": "application/json" },
             ...globalOptions.headers
           },
-          body: JSON.stringify(input)
+          body: useFormData ? buildFormData(input) : JSON.stringify(input)
         }).then((response) => {
           if (!response.ok) {
             throw new ActionError(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/stack-client-runtime",
-  "version": "0.16.0",
+  "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.16.0",
-    "@jay-framework/fullstack-component": "^0.16.0",
-    "@jay-framework/runtime": "^0.16.0",
-    "@jay-framework/runtime-automation": "^0.16.0",
-    "@jay-framework/view-state-merge": "^0.16.0"
+    "@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.16.0",
-    "@jay-framework/jay-cli": "^0.16.0",
+    "@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",