@builder.io/sdk-svelte 0.13.0 → 0.13.2

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

@@ -0,0 +1,359 @@
+<script context="module" lang="ts">
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */
+
+  export type FormProps = PropsWithBuilderData<
+    BuilderComponentsProp &
+      BuilderLinkComponentProp & {
+        attributes?: any;
+        name?: string;
+        action?: string;
+        validate?: boolean;
+        method?: string;
+        sendSubmissionsTo?: string;
+        sendSubmissionsToEmail?: string;
+        sendWithJs?: boolean;
+        contentType?: string;
+        customHeaders?: {
+          [key: string]: string;
+        };
+        successUrl?: string;
+        previewState?: FormState;
+        successMessage?: BuilderBlock[];
+        errorMessage?: BuilderBlock[];
+        sendingMessage?: BuilderBlock[];
+        resetFormOnSubmit?: boolean;
+        errorMessagePath?: string;
+      }
+  >;
+
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */
+
+  export type FormState = "unsubmitted" | "sending" | "success" | "error";
+</script>
+
+<script lang="ts">
+  import Block from "../../../components/block/block.svelte";
+  import Blocks from "../../../components/blocks/blocks.svelte";
+  import { getEnv } from "../../../functions/get-env.js";
+  import { get } from "../../../functions/get.js";
+  import { isEditing } from "../../../functions/is-editing.js";
+  import { set } from "../../../functions/set.js";
+  import type { BuilderBlock } from "../../../types/builder-block.js";
+  import type {
+    BuilderComponentsProp,
+    BuilderLinkComponentProp,
+    PropsWithBuilderData,
+  } from "../../../types/builder-props.js";
+  import type { Dictionary } from "../../../types/typescript.js";
+  import { filterAttrs } from "../../helpers.js";
+  import { setAttrs } from "../../helpers.js";
+
+  export let js: FormProps["js"];
+  export let builderContext: FormProps["builderContext"];
+  export let previewState: FormProps["previewState"] = undefined;
+  export let sendWithJs: FormProps["sendWithJs"] = undefined;
+  export let sendSubmissionsTo: FormProps["sendSubmissionsTo"] = undefined;
+  export let action: FormProps["action"] = undefined;
+  export let customHeaders: FormProps["customHeaders"] = undefined;
+  export let contentType: FormProps["contentType"] = undefined;
+  export let sendSubmissionsToEmail: FormProps["sendSubmissionsToEmail"] =
+    undefined;
+  export let name: FormProps["name"] = undefined;
+  export let method: FormProps["method"] = undefined;
+  export let errorMessagePath: FormProps["errorMessagePath"] = undefined;
+  export let resetFormOnSubmit: FormProps["resetFormOnSubmit"] = undefined;
+  export let successUrl: FormProps["successUrl"] = undefined;
+  export let validate: FormProps["validate"] = undefined;
+  export let attributes: FormProps["attributes"] = undefined;
+  export let builderBlock: FormProps["builderBlock"];
+  export let builderComponents: FormProps["builderComponents"];
+  export let builderLinkComponent: FormProps["builderLinkComponent"] =
+    undefined;
+  export let errorMessage: FormProps["errorMessage"] = undefined;
+  export let sendingMessage: FormProps["sendingMessage"] = undefined;
+  export let successMessage: FormProps["successMessage"] = undefined;
+
+  function mergeNewRootState(newData: Dictionary<any>) {
+    const combinedState = {
+      ...$builderContext.rootState,
+      ...newData,
+    };
+    if ($builderContext.rootSetState) {
+      $builderContext.rootSetState?.(combinedState);
+    } else {
+      $builderContext.rootState = combinedState;
+    }
+  }
+  function submissionState() {
+    return (isEditing() && previewState) || formState;
+  }
+  function onSubmit(event: any) {
+    const sendWithJsProp = sendWithJs || sendSubmissionsTo === "email";
+    if (sendSubmissionsTo === "zapier") {
+      event.preventDefault();
+    } else if (sendWithJsProp) {
+      if (!(action || sendSubmissionsTo === "email")) {
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      const el = event.currentTarget;
+      const headers = customHeaders || {};
+      let body: any;
+      const formData = new FormData(el);
+
+      // TODO: maybe support null
+      const formPairs: {
+        key: string;
+        value: File | boolean | number | string | FileList;
+      }[] = Array.from(
+        event.currentTarget.querySelectorAll("input,select,textarea")
+      )
+        .filter((el) => !!(el as HTMLInputElement).name)
+        .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;
+                return {
+                  key,
+                  value,
+                };
+              }
+            } else if (el.type === "checkbox") {
+              value = el.checked;
+            } else if (el.type === "number" || el.type === "range") {
+              const num = el.valueAsNumber;
+              if (!isNaN(num)) {
+                value = num;
+              }
+            } else if (el.type === "file") {
+              // TODO: one vs multiple files
+              value = el.files;
+            } else {
+              value = el.value;
+            }
+          } else {
+            value = (el as HTMLInputElement).value;
+          }
+          return {
+            key,
+            value,
+          };
+        });
+      let formContentType = contentType;
+      if (sendSubmissionsTo === "email") {
+        formContentType = "multipart/form-data";
+      }
+      Array.from(formPairs).forEach(({ value }) => {
+        if (
+          value instanceof File ||
+          (Array.isArray(value) && value[0] instanceof File) ||
+          value instanceof FileList
+        ) {
+          formContentType = "multipart/form-data";
+        }
+      });
+
+      // TODO: send as urlEncoded or multipart by default
+      // because of ease of use and reliability in browser API
+      // for encoding the form?
+      if (formContentType !== "application/json") {
+        body = formData;
+      } else {
+        // Json
+        const json = {};
+        Array.from(formPairs).forEach(({ value, key }) => {
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
+      }
+      if (formContentType && formContentType !== "multipart/form-data") {
+        if (
+          /* Zapier doesn't allow content-type header to be sent from browsers */
+          !(sendWithJsProp && action?.includes("zapier.com"))
+        ) {
+          headers["content-type"] = formContentType;
+        }
+      }
+      const presubmitEvent = new CustomEvent("presubmit", {
+        detail: {
+          body,
+        },
+      });
+      if (formRef) {
+        formRef.dispatchEvent(presubmitEvent);
+        if (presubmitEvent.defaultPrevented) {
+          return;
+        }
+      }
+      formState = "sending";
+      const formUrl = `${
+        getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"
+      }/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(
+        sendSubmissionsToEmail || ""
+      )}&name=${encodeURIComponent(name || "")}`;
+      fetch(
+        sendSubmissionsTo === "email"
+          ? formUrl
+          : action! /* TODO: throw error if no action URL */,
+        {
+          body,
+          headers,
+          method: method || "post",
+        }
+      ).then(
+        async (res) => {
+          let body;
+          const contentType = res.headers.get("content-type");
+          if (contentType && contentType.indexOf("application/json") !== -1) {
+            body = await res.json();
+          } else {
+            body = await res.text();
+          }
+          if (!res.ok && errorMessagePath) {
+            /* TODO: allow supplying an error formatter function */
+            let message = get(body, errorMessagePath);
+            if (message) {
+              if (typeof message !== "string") {
+                /* TODO: ideally convert json to yaml so it woul dbe like
+           error: - email has been taken */
+                message = JSON.stringify(message);
+              }
+              formErrorMessage = message;
+              mergeNewRootState({
+                formErrorMessage: message,
+              });
+            }
+          }
+          responseData = body;
+          formState = res.ok ? "success" : "error";
+          if (res.ok) {
+            const submitSuccessEvent = new CustomEvent("submit:success", {
+              detail: {
+                res,
+                body,
+              },
+            });
+            if (formRef) {
+              formRef.dispatchEvent(submitSuccessEvent);
+              if (submitSuccessEvent.defaultPrevented) {
+                return;
+              }
+              /* TODO: option to turn this on/off? */
+              if (resetFormOnSubmit !== false) {
+                formRef.reset();
+              }
+            }
+
+            /* TODO: client side route event first that can be preventDefaulted */
+            if (successUrl) {
+              if (formRef) {
+                const event = new CustomEvent("route", {
+                  detail: {
+                    url: successUrl,
+                  },
+                });
+                formRef.dispatchEvent(event);
+                if (!event.defaultPrevented) {
+                  location.href = successUrl;
+                }
+              } else {
+                location.href = successUrl;
+              }
+            }
+          }
+        },
+        (err) => {
+          const submitErrorEvent = new CustomEvent("submit:error", {
+            detail: {
+              error: err,
+            },
+          });
+          if (formRef) {
+            formRef.dispatchEvent(submitErrorEvent);
+            if (submitErrorEvent.defaultPrevented) {
+              return;
+            }
+          }
+          responseData = err;
+          formState = "error";
+        }
+      );
+    }
+  }
+
+  let formRef;
+
+  let formState = "unsubmitted";
+  let responseData = null;
+  let formErrorMessage = "";
+</script>
+
+<form
+  {validate}
+  bind:this={formRef}
+  action={!sendWithJs && action}
+  {method}
+  {name}
+  on:submit={(event) => {
+    onSubmit(event);
+  }}
+  {...filterAttrs(attributes, "on:", false)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+>
+  {#if builderBlock && builderBlock.children}
+    {#each builderBlock?.children as block, idx (`form-block-${idx}`)}
+      <Block
+        {block}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    {/each}
+  {/if}
+
+  {#if submissionState() === "error"}
+    <Blocks
+      path="errorMessage"
+      blocks={errorMessage}
+      context={builderContext}
+    />
+  {/if}
+
+  {#if submissionState() === "sending"}
+    <Blocks
+      path="sendingMessage"
+      blocks={sendingMessage}
+      context={builderContext}
+    />
+  {/if}
+
+  {#if submissionState() === "error" && responseData}
+    <pre class="builder-form-error-text pre">
+        {JSON.stringify(responseData, null, 2)}
+      </pre>
+  {/if}
+
+  {#if submissionState() === "success"}
+    <Blocks
+      path="successMessage"
+      blocks={successMessage}
+      context={builderContext}
+    />
+  {/if}
+</form>
+
+<style>
+  .pre {
+    padding: 10px;
+    color: red;
+    text-align: center;
+  }
+</style>

package/src/blocks/{input → form/input}/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Form:Input',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',

package/src/blocks/{input → form/input}/input.svelte

@@ -15,9 +15,9 @@
 </script>
 
 <script lang="ts">
-  import { isEditing } from "../../functions/is-editing.js";
-  import { filterAttrs } from "../helpers.js";
-  import { setAttrs } from "../helpers.js";
+  import { isEditing } from "../../../functions/is-editing.js";
+  import { filterAttrs } from "../../helpers.js";
+  import { setAttrs } from "../../helpers.js";
 
   export let attributes: FormInputProps["attributes"] = undefined;
   export let defaultValue: FormInputProps["defaultValue"] = undefined;

package/src/blocks/{select → form/select}/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Form:Select',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',

package/src/blocks/{select → form/select}/select.svelte

@@ -16,9 +16,9 @@
 </script>
 
 <script lang="ts">
-  import { isEditing } from "../../functions/is-editing.js";
-  import { filterAttrs } from "../helpers.js";
-  import { setAttrs } from "../helpers.js";
+  import { isEditing } from "../../../functions/is-editing.js";
+  import { filterAttrs } from "../../helpers.js";
+  import { setAttrs } from "../../helpers.js";
 
   export let attributes: FormSelectProps["attributes"] = undefined;
   export let value: FormSelectProps["value"] = undefined;

package/src/blocks/{submit-button → form/submit-button}/component-info.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Form:SubmitButton',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',

package/src/blocks/{submit-button → form/submit-button}/submit-button.svelte

@@ -10,8 +10,8 @@
 </script>
 
 <script lang="ts">
-  import { filterAttrs } from "../helpers.js";
-  import { setAttrs } from "../helpers.js";
+  import { filterAttrs } from "../../helpers.js";
+  import { setAttrs } from "../../helpers.js";
 
   export let attributes: ButtonProps["attributes"] = undefined;
   export let text: ButtonProps["text"] = undefined;

package/src/blocks/slot/slot.svelte

@@ -1,19 +1,17 @@
 <script context="module" lang="ts">
-  export interface DropzoneProps {
+  export type DropzoneProps = PropsWithBuilderData<{
     name: string;
-    builderBlock: BuilderBlock;
-    builderContext: Writable<BuilderContextInterface>;
     attributes: any;
-  }
+  }>;
 </script>
 
 <script lang="ts">
   import Blocks from "../../components/blocks/blocks.svelte";
-  import type { BuilderContextInterface } from "../../context/types.js";
   import { deoptSignal } from "../../functions/deopt.js";
   import type { BuilderBlock } from "../../types/builder-block.js";
-  import type { Writable } from "svelte/store";
+  import type { PropsWithBuilderData } from "../../types/builder-props.js";
 
+  export let js: DropzoneProps["js"];
   export let builderContext: DropzoneProps["builderContext"];
   export let name: DropzoneProps["name"];
 

package/src/components/block/block.svelte

@@ -102,13 +102,15 @@
         builderContext: context,
         ...(blockComponent?.()?.name === "Core:Button" ||
         blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns"
+        blockComponent?.()?.name === "Columns" ||
+        blockComponent?.()?.name === "Form:Form"
           ? {
               builderLinkComponent: linkComponent,
             }
           : {}),
         ...(blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns"
+        blockComponent?.()?.name === "Columns" ||
+        blockComponent?.()?.name === "Form:Form"
           ? {
               builderComponents: registeredComponents,
             }

package/src/constants/builder-registered-components.ts

@@ -2,16 +2,10 @@ import { default as Button } from '../blocks/button/button.svelte';
 import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
 import { default as Columns } from '../blocks/columns/columns.svelte';
 import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
-import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
-import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
-import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
-import { default as embed } from '../blocks/embed/embed.svelte';
 import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
 import { default as Fragment } from '../blocks/fragment/fragment.svelte';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
 import { default as Image } from '../blocks/image/image.svelte';
-import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
-import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/section.svelte';
 import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
@@ -20,9 +14,8 @@ import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component
 import { default as Symbol } from '../blocks/symbol/symbol.svelte';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
 import { default as Text } from '../blocks/text/text.svelte';
-import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
-import { default as Video } from '../blocks/video/video.svelte';
 import type { RegisteredComponent } from '../context/types.js';
+import { getExtraComponents } from './extra-components.js';
 
 /**
  * Returns a list of all registered components.
@@ -34,34 +27,22 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Columns,
   ...columnsComponentInfo
-}, {
-  component: customCode,
-  ...customCodeInfo
-}, {
-  component: embed,
-  ...embedComponentInfo
 }, {
   component: Fragment,
   ...fragmentComponentInfo
 }, {
   component: Image,
   ...imageComponentInfo
-}, {
-  component: Img,
-  ...imgComponentInfo
 }, {
   component: Section,
   ...sectionComponentInfo
+}, {
+  component: Slot,
+  ...slotComponentInfo
 }, {
   component: Symbol,
   ...symbolComponentInfo
 }, {
   component: Text,
   ...textComponentInfo
-}, {
-  component: Video,
-  ...videoComponentInfo
-}, {
-  component: Slot,
-  ...slotComponentInfo
-}]
+}, ...getExtraComponents()]

package/src/constants/extra-components.ts

@@ -0,0 +1,49 @@
+/**
+ * These are in a separate file because React Native does not support them (yet).
+ * Having them in a separate file allows us to override it to be empty in the
+ * React Native SDK.
+ */
+
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed.svelte';
+import { componentInfo as formComponentInfo } from '../blocks/form/form/component-info.js';
+import { default as Form } from '../blocks/form/form/form.svelte';
+import { componentInfo as formInputComponentInfo } from '../blocks/form/input/component-info.js';
+import { default as FormInput } from '../blocks/form/input/input.svelte';
+import { componentInfo as formSelectComponentInfo } from '../blocks/form/select/component-info.js';
+import { default as FormSelect } from '../blocks/form/select/select.svelte';
+import { componentInfo as formSubmitButtonComponentInfo } from '../blocks/form/submit-button/component-info.js';
+import { default as FormSubmitButton } from '../blocks/form/submit-button/submit-button.svelte';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as Img } from '../blocks/img/img.svelte';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video.svelte';
+import type { RegisteredComponent } from '../context/types.js';
+import { TARGET } from './target.js';
+export const getExtraComponents: () => RegisteredComponent[] = () => [{
+  component: customCode,
+  ...customCodeInfo
+}, {
+  component: embed,
+  ...embedComponentInfo
+}, ...(TARGET === 'rsc' ? [] : [{
+  component: Form,
+  ...formComponentInfo
+}, {
+  component: FormInput,
+  ...formInputComponentInfo
+}, {
+  component: FormSubmitButton,
+  ...formSubmitButtonComponentInfo
+}, {
+  component: FormSelect,
+  ...formSelectComponentInfo
+}]), {
+  component: Img,
+  ...imgComponentInfo
+}, {
+  component: Video,
+  ...videoComponentInfo
+}]

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.13.0"
+export const SDK_VERSION = "0.13.2"

package/src/functions/get-env.ts

@@ -0,0 +1,5 @@
+export const validEnvList = ['production', 'qa', 'test', 'development', 'dev', 'cdn-qa', 'cloud', 'fast', 'cdn2', 'cdn-prod'];
+export const getEnv = (): string => {
+  const env = process.env.NODE_ENV || 'production';
+  return validEnvList.includes(env) ? env : 'production';
+}

package/src/functions/get.ts

@@ -0,0 +1,4 @@
+export const get = (obj: any, path: string, defaultValue?: any) => {
+  const result = String.prototype.split.call(path, /[,[\].]+?/).filter(Boolean).reduce((res, key) => res !== null && res !== undefined ? res[key] : res, obj);
+  return result === undefined || result === obj ? defaultValue : result;
+}

package/src/helpers/preview-lru-cache/helpers.ts

@@ -0,0 +1 @@
+export {}

package/src/helpers/preview-lru-cache/types.ts

@@ -0,0 +1 @@
+export {}

package/lib/browser/blocks/form/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components.js';
-export declare const componentInfo: ComponentInfo;

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

@@ -1,2 +0,0 @@
-<script>"use strict";
-</script>

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

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
-export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
-}
-export {};

package/lib/browser/blocks/input/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components.js';
-export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/select/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components.js';
-export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/submit-button/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components.js';
-export declare const componentInfo: ComponentInfo;

package/lib/edge/blocks/form/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components.js';
-export declare const componentInfo: ComponentInfo;

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

@@ -1,2 +0,0 @@
-<script>"use strict";
-</script>

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

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
-export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
-}
-export {};

package/lib/edge/blocks/input/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components.js';
-export declare const componentInfo: ComponentInfo;