@builder.io/sdk-svelte 4.1.3 → 4.2.1

package/lib/browser/blocks/form/form/form.svelte

@@ -62,13 +62,16 @@ function onSubmit(event) {
         // TODO: maybe support null
         const formPairs = Array.from(el.querySelectorAll("input,select,textarea"))
             .filter((el) => !!el.name)
+            .filter((el) => !!el.name &&
+            (el.type !== "radio" ||
+                el.checked))
             .map((el) => {
             let value;
             const key = el.name;
             if (el instanceof HTMLInputElement) {
                 if (el.type === "radio") {
                     if (el.checked) {
-                        value = el.name;
+                        value = el.value;
                         return {
                             key,
                             value,

package/lib/browser/components/content/components/enable-editor.svelte

@@ -126,15 +126,20 @@ function onClick(event) {
 }
 function runHttpRequests() {
     const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
-    Object.entries(requests).forEach(([key, url]) => {
-        if (!url)
+    Object.entries(requests).forEach(([key, httpRequest]) => {
+        if (!httpRequest)
             return;
+        const isCoreRequest = typeof httpRequest === "object" &&
+            httpRequest["@type"] === "@builder.io/core:Request";
         // request already in progress
         if (httpReqsPending[key])
             return;
         // request already completed, and not in edit mode
         if (httpReqsData[key] && !isEditing())
             return;
+        const url = isCoreRequest
+            ? httpRequest.request.url
+            : httpRequest;
         httpReqsPending[key] = true;
         const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
             code: group,
@@ -143,8 +148,23 @@ function runHttpRequests() {
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
         })));
-        logFetch(evaluatedUrl);
-        fetch(evaluatedUrl)
+        const fetchRequestObj = isCoreRequest
+            ? {
+                url: evaluatedUrl,
+                method: httpRequest.request.method,
+                headers: httpRequest.request.headers,
+                body: httpRequest.request.body,
+            }
+            : {
+                url: evaluatedUrl,
+                method: "GET",
+            };
+        logFetch(JSON.stringify(fetchRequestObj));
+        fetch(fetchRequestObj.url, {
+            method: fetchRequestObj.method,
+            headers: fetchRequestObj.headers,
+            body: fetchRequestObj.body,
+        })
             .then((response) => response.json())
             .then((json) => {
             mergeNewRootState({
@@ -153,7 +173,7 @@ function runHttpRequests() {
             httpReqsData[key] = true;
         })
             .catch((err) => {
-            console.error("error fetching dynamic data", url, err);
+            console.error("error fetching dynamic data", JSON.stringify(httpRequest), err);
         })
             .finally(() => {
             httpReqsPending[key] = false;

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.1.3";
+export declare const SDK_VERSION = "4.2.1";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.1.3";
+export const SDK_VERSION = "4.2.1";

package/lib/browser/functions/register.d.ts

@@ -1,5 +1,22 @@
 import type { BuilderBlock } from '../types/builder-block';
 import type { DeepPartial } from '../types/deep-partial';
+import type { Input } from '../types/input';
+export interface Action {
+    name: string;
+    inputs?: readonly Input[];
+    returnType?: Input;
+    action: (options: Record<string, any>) => string;
+    /**
+     * Is an action for expression (e.g. calculating a binding like a formula
+     * to fill a value based on locale) or a function (e.g. something to trigger
+     * on an event like add to cart) or either (e.g. a custom code block)
+     */
+    kind: 'expression' | 'function' | 'any';
+    /**
+     * Globally unique ID for an action, e.g. "@builder.io:setState"
+     */
+    id: string;
+}
 export interface InsertMenuItem {
     name: string;
     icon?: string;
@@ -14,3 +31,4 @@ export interface InsertMenuConfig {
 }
 export declare function register(type: 'insertMenu', info: InsertMenuConfig): void;
 export declare function register(type: string, info: any): void;
+export declare function registerAction(action: Action): void;

package/lib/browser/functions/register.js

@@ -29,3 +29,15 @@ export function register(type, info) {
         }
     }
 }
+export function registerAction(action) {
+    if (isBrowser()) {
+        const actionClone = JSON.parse(JSON.stringify(action));
+        if (action.action) {
+            actionClone.action = action.action.toString();
+        }
+        window.parent?.postMessage({
+            type: 'builder.registerAction',
+            data: actionClone
+        }, '*');
+    }
+}

package/lib/browser/server-index.d.ts

@@ -25,7 +25,7 @@ export type { ComponentInfo } from './types/components';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export type { Settings } from './functions/set-editor-settings';

package/lib/browser/server-index.js

@@ -5,7 +5,7 @@ export * from './index-helpers/top-of-file';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index';
 export { track } from './functions/track/index';

package/lib/edge/blocks/form/form/form.svelte

@@ -62,13 +62,16 @@ function onSubmit(event) {
         // TODO: maybe support null
         const formPairs = Array.from(el.querySelectorAll("input,select,textarea"))
             .filter((el) => !!el.name)
+            .filter((el) => !!el.name &&
+            (el.type !== "radio" ||
+                el.checked))
             .map((el) => {
             let value;
             const key = el.name;
             if (el instanceof HTMLInputElement) {
                 if (el.type === "radio") {
                     if (el.checked) {
-                        value = el.name;
+                        value = el.value;
                         return {
                             key,
                             value,

package/lib/edge/components/content/components/enable-editor.svelte

@@ -126,15 +126,20 @@ function onClick(event) {
 }
 function runHttpRequests() {
     const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
-    Object.entries(requests).forEach(([key, url]) => {
-        if (!url)
+    Object.entries(requests).forEach(([key, httpRequest]) => {
+        if (!httpRequest)
             return;
+        const isCoreRequest = typeof httpRequest === "object" &&
+            httpRequest["@type"] === "@builder.io/core:Request";
         // request already in progress
         if (httpReqsPending[key])
             return;
         // request already completed, and not in edit mode
         if (httpReqsData[key] && !isEditing())
             return;
+        const url = isCoreRequest
+            ? httpRequest.request.url
+            : httpRequest;
         httpReqsPending[key] = true;
         const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
             code: group,
@@ -143,8 +148,23 @@ function runHttpRequests() {
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
         })));
-        logFetch(evaluatedUrl);
-        fetch(evaluatedUrl)
+        const fetchRequestObj = isCoreRequest
+            ? {
+                url: evaluatedUrl,
+                method: httpRequest.request.method,
+                headers: httpRequest.request.headers,
+                body: httpRequest.request.body,
+            }
+            : {
+                url: evaluatedUrl,
+                method: "GET",
+            };
+        logFetch(JSON.stringify(fetchRequestObj));
+        fetch(fetchRequestObj.url, {
+            method: fetchRequestObj.method,
+            headers: fetchRequestObj.headers,
+            body: fetchRequestObj.body,
+        })
             .then((response) => response.json())
             .then((json) => {
             mergeNewRootState({
@@ -153,7 +173,7 @@ function runHttpRequests() {
             httpReqsData[key] = true;
         })
             .catch((err) => {
-            console.error("error fetching dynamic data", url, err);
+            console.error("error fetching dynamic data", JSON.stringify(httpRequest), err);
         })
             .finally(() => {
             httpReqsPending[key] = false;

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.1.3";
+export declare const SDK_VERSION = "4.2.1";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.1.3";
+export const SDK_VERSION = "4.2.1";

package/lib/edge/functions/register.d.ts

@@ -1,5 +1,22 @@
 import type { BuilderBlock } from '../types/builder-block';
 import type { DeepPartial } from '../types/deep-partial';
+import type { Input } from '../types/input';
+export interface Action {
+    name: string;
+    inputs?: readonly Input[];
+    returnType?: Input;
+    action: (options: Record<string, any>) => string;
+    /**
+     * Is an action for expression (e.g. calculating a binding like a formula
+     * to fill a value based on locale) or a function (e.g. something to trigger
+     * on an event like add to cart) or either (e.g. a custom code block)
+     */
+    kind: 'expression' | 'function' | 'any';
+    /**
+     * Globally unique ID for an action, e.g. "@builder.io:setState"
+     */
+    id: string;
+}
 export interface InsertMenuItem {
     name: string;
     icon?: string;
@@ -14,3 +31,4 @@ export interface InsertMenuConfig {
 }
 export declare function register(type: 'insertMenu', info: InsertMenuConfig): void;
 export declare function register(type: string, info: any): void;
+export declare function registerAction(action: Action): void;

package/lib/edge/functions/register.js

@@ -29,3 +29,15 @@ export function register(type, info) {
         }
     }
 }
+export function registerAction(action) {
+    if (isBrowser()) {
+        const actionClone = JSON.parse(JSON.stringify(action));
+        if (action.action) {
+            actionClone.action = action.action.toString();
+        }
+        window.parent?.postMessage({
+            type: 'builder.registerAction',
+            data: actionClone
+        }, '*');
+    }
+}

package/lib/edge/server-index.d.ts

@@ -25,7 +25,7 @@ export type { ComponentInfo } from './types/components';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export type { Settings } from './functions/set-editor-settings';

package/lib/edge/server-index.js

@@ -5,7 +5,7 @@ export * from './index-helpers/top-of-file';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index';
 export { track } from './functions/track/index';

package/lib/node/blocks/form/form/form.svelte

@@ -62,13 +62,16 @@ function onSubmit(event) {
         // TODO: maybe support null
         const formPairs = Array.from(el.querySelectorAll("input,select,textarea"))
             .filter((el) => !!el.name)
+            .filter((el) => !!el.name &&
+            (el.type !== "radio" ||
+                el.checked))
             .map((el) => {
             let value;
             const key = el.name;
             if (el instanceof HTMLInputElement) {
                 if (el.type === "radio") {
                     if (el.checked) {
-                        value = el.name;
+                        value = el.value;
                         return {
                             key,
                             value,

package/lib/node/components/content/components/enable-editor.svelte

@@ -126,15 +126,20 @@ function onClick(event) {
 }
 function runHttpRequests() {
     const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
-    Object.entries(requests).forEach(([key, url]) => {
-        if (!url)
+    Object.entries(requests).forEach(([key, httpRequest]) => {
+        if (!httpRequest)
             return;
+        const isCoreRequest = typeof httpRequest === "object" &&
+            httpRequest["@type"] === "@builder.io/core:Request";
         // request already in progress
         if (httpReqsPending[key])
             return;
         // request already completed, and not in edit mode
         if (httpReqsData[key] && !isEditing())
             return;
+        const url = isCoreRequest
+            ? httpRequest.request.url
+            : httpRequest;
         httpReqsPending[key] = true;
         const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
             code: group,
@@ -143,8 +148,23 @@ function runHttpRequests() {
             rootState: $builderContextSignal.rootState,
             rootSetState: $builderContextSignal.rootSetState,
         })));
-        logFetch(evaluatedUrl);
-        fetch(evaluatedUrl)
+        const fetchRequestObj = isCoreRequest
+            ? {
+                url: evaluatedUrl,
+                method: httpRequest.request.method,
+                headers: httpRequest.request.headers,
+                body: httpRequest.request.body,
+            }
+            : {
+                url: evaluatedUrl,
+                method: "GET",
+            };
+        logFetch(JSON.stringify(fetchRequestObj));
+        fetch(fetchRequestObj.url, {
+            method: fetchRequestObj.method,
+            headers: fetchRequestObj.headers,
+            body: fetchRequestObj.body,
+        })
             .then((response) => response.json())
             .then((json) => {
             mergeNewRootState({
@@ -153,7 +173,7 @@ function runHttpRequests() {
             httpReqsData[key] = true;
         })
             .catch((err) => {
-            console.error("error fetching dynamic data", url, err);
+            console.error("error fetching dynamic data", JSON.stringify(httpRequest), err);
         })
             .finally(() => {
             httpReqsPending[key] = false;

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.1.3";
+export declare const SDK_VERSION = "4.2.1";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.1.3";
+export const SDK_VERSION = "4.2.1";

package/lib/node/functions/register.d.ts

@@ -1,5 +1,22 @@
 import type { BuilderBlock } from '../types/builder-block';
 import type { DeepPartial } from '../types/deep-partial';
+import type { Input } from '../types/input';
+export interface Action {
+    name: string;
+    inputs?: readonly Input[];
+    returnType?: Input;
+    action: (options: Record<string, any>) => string;
+    /**
+     * Is an action for expression (e.g. calculating a binding like a formula
+     * to fill a value based on locale) or a function (e.g. something to trigger
+     * on an event like add to cart) or either (e.g. a custom code block)
+     */
+    kind: 'expression' | 'function' | 'any';
+    /**
+     * Globally unique ID for an action, e.g. "@builder.io:setState"
+     */
+    id: string;
+}
 export interface InsertMenuItem {
     name: string;
     icon?: string;
@@ -14,3 +31,4 @@ export interface InsertMenuConfig {
 }
 export declare function register(type: 'insertMenu', info: InsertMenuConfig): void;
 export declare function register(type: string, info: any): void;
+export declare function registerAction(action: Action): void;

package/lib/node/functions/register.js

@@ -29,3 +29,15 @@ export function register(type, info) {
         }
     }
 }
+export function registerAction(action) {
+    if (isBrowser()) {
+        const actionClone = JSON.parse(JSON.stringify(action));
+        if (action.action) {
+            actionClone.action = action.action.toString();
+        }
+        window.parent?.postMessage({
+            type: 'builder.registerAction',
+            data: actionClone
+        }, '*');
+    }
+}

package/lib/node/server-index.d.ts

@@ -25,7 +25,7 @@ export type { ComponentInfo } from './types/components';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export type { Settings } from './functions/set-editor-settings';

package/lib/node/server-index.js

@@ -5,7 +5,7 @@ export * from './index-helpers/top-of-file';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index';
 export { track } from './functions/track/index';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "4.1.3",
+  "version": "4.2.1",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/form/form/form.svelte

@@ -108,13 +108,19 @@
         value: File | boolean | number | string | FileList;
       }[] = Array.from(el.querySelectorAll("input,select,textarea"))
         .filter((el) => !!(el as HTMLInputElement).name)
+        .filter(
+          (el) =>
+            !!(el as HTMLInputElement).name &&
+            ((el as HTMLInputElement).type !== "radio" ||
+              (el as HTMLInputElement).checked)
+        )
         .map((el) => {
           let value: any;
           const key = (el as HTMLImageElement).name;
           if (el instanceof HTMLInputElement) {
             if (el.type === "radio") {
               if (el.checked) {
-                value = el.name;
+                value = el.value;
                 return {
                   key,
                   value,

package/src/components/content/components/enable-editor.svelte

@@ -12,6 +12,27 @@
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;
   };
+
+  interface BuilderRequest {
+    "@type": "@builder.io/core:Request";
+    request: {
+      url: string;
+      query?: {
+        [key: string]: string;
+      };
+      headers?: {
+        [key: string]: string;
+      };
+      method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+      body?: any;
+    };
+    options?: {
+      [key: string]: any;
+    };
+    bindings?: {
+      [key: string]: string;
+    };
+  }
 </script>
 
 <script lang="ts">
@@ -155,44 +176,73 @@
   }
   function runHttpRequests() {
     const requests: {
-      [key: string]: string;
+      [key: string]: string | any;
     } = $builderContextSignal.content?.data?.httpRequests ?? {};
-    Object.entries(requests).forEach(([key, url]) => {
-      if (!url) return;
+    Object.entries(requests).forEach(
+      ([key, httpRequest]: [string, BuilderRequest | string]) => {
+        if (!httpRequest) return;
+        const isCoreRequest =
+          typeof httpRequest === "object" &&
+          httpRequest["@type"] === "@builder.io/core:Request";
 
-      // request already in progress
-      if (httpReqsPending[key]) return;
+        // request already in progress
+        if (httpReqsPending[key]) return;
 
-      // request already completed, and not in edit mode
-      if (httpReqsData[key] && !isEditing()) return;
-      httpReqsPending[key] = true;
-      const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) =>
-        String(
-          evaluate({
-            code: group,
-            context: context || {},
-            localState: undefined,
-            rootState: $builderContextSignal.rootState,
-            rootSetState: $builderContextSignal.rootSetState,
+        // request already completed, and not in edit mode
+        if (httpReqsData[key] && !isEditing()) return;
+        const url = isCoreRequest
+          ? httpRequest.request.url
+          : (httpRequest as string);
+        httpReqsPending[key] = true;
+        const evaluatedUrl = url.replace(
+          /{{([^}]+)}}/g,
+          (_match: string, group: string) =>
+            String(
+              evaluate({
+                code: group,
+                context: context || {},
+                localState: undefined,
+                rootState: $builderContextSignal.rootState,
+                rootSetState: $builderContextSignal.rootSetState,
+              })
+            )
+        );
+        const fetchRequestObj = isCoreRequest
+          ? {
+              url: evaluatedUrl,
+              method: httpRequest.request.method,
+              headers: httpRequest.request.headers,
+              body: httpRequest.request.body,
+            }
+          : {
+              url: evaluatedUrl,
+              method: "GET",
+            };
+        logFetch(JSON.stringify(fetchRequestObj));
+        fetch(fetchRequestObj.url, {
+          method: fetchRequestObj.method,
+          headers: fetchRequestObj.headers,
+          body: fetchRequestObj.body,
+        })
+          .then((response) => response.json())
+          .then((json) => {
+            mergeNewRootState({
+              [key]: json,
+            });
+            httpReqsData[key] = true;
           })
-        )
-      );
-      logFetch(evaluatedUrl);
-      fetch(evaluatedUrl)
-        .then((response) => response.json())
-        .then((json) => {
-          mergeNewRootState({
-            [key]: json,
+          .catch((err) => {
+            console.error(
+              "error fetching dynamic data",
+              JSON.stringify(httpRequest),
+              err
+            );
+          })
+          .finally(() => {
+            httpReqsPending[key] = false;
           });
-          httpReqsData[key] = true;
-        })
-        .catch((err) => {
-          console.error("error fetching dynamic data", url, err);
-        })
-        .finally(() => {
-          httpReqsPending[key] = false;
-        });
-    });
+      }
+    );
   }
   function emitStateUpdate() {
     if (isEditing()) {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.1.3"
+export const SDK_VERSION = "4.2.1"

package/src/functions/register.ts

@@ -1,7 +1,24 @@
 import type { BuilderBlock } from '../types/builder-block';
 import type { DeepPartial } from '../types/deep-partial';
+import type { Input } from '../types/input';
 import { isBrowser } from './is-browser';
 import { serializeIncludingFunctions } from './register-component';
+export interface Action {
+  name: string;
+  inputs?: readonly Input[];
+  returnType?: Input;
+  action: (options: Record<string, any>) => string;
+  /**
+   * Is an action for expression (e.g. calculating a binding like a formula
+   * to fill a value based on locale) or a function (e.g. something to trigger
+   * on an event like add to cart) or either (e.g. a custom code block)
+   */
+  kind: 'expression' | 'function' | 'any';
+  /**
+   * Globally unique ID for an action, e.g. "@builder.io:setState"
+   */
+  id: string;
+}
 export interface InsertMenuItem {
   name: string;
   icon?: string;
@@ -45,4 +62,16 @@ export function register(type: string, info: any) {
       console.debug('Could not postmessage', err);
     }
   }
+}
+export function registerAction(action: Action) {
+  if (isBrowser()) {
+    const actionClone = JSON.parse(JSON.stringify(action));
+    if (action.action) {
+      actionClone.action = action.action.toString();
+    }
+    window.parent?.postMessage({
+      type: 'builder.registerAction',
+      data: actionClone
+    }, '*');
+  }
 }

package/src/server-index.ts

@@ -28,7 +28,7 @@ export type { ComponentInfo } from './types/components';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export type { Settings } from './functions/set-editor-settings';