@builder.io/sdk-svelte 0.0.4 → 0.0.5

package/src/blocks/embed/embed.svelte

@@ -0,0 +1,51 @@
+<script context="module" lang="ts">
+  export interface EmbedProps {
+    content: string;
+  }
+</script>
+
+<script lang="ts">
+  import { afterUpdate } from "svelte";
+
+  import { isJsScript } from "./helpers.js";
+
+  export let content: EmbedProps["content"];
+
+  function findAndRunScripts() {
+    if (!elem || !elem.getElementsByTagName) return;
+    const scripts = elem.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src && !scriptsInserted.includes(script.src)) {
+        scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`Embed`: Error running script:", error);
+        }
+      }
+    }
+  }
+
+  let elem;
+
+  let scriptsInserted = [];
+  let scriptsRun = [];
+  let ranInitFn = false;
+
+  function onUpdateFn_0() {
+    if (elem && !ranInitFn) {
+      ranInitFn = true;
+      findAndRunScripts();
+    }
+  }
+  $: onUpdateFn_0(...[elem, ranInitFn]);
+</script>
+
+<div class="builder-embed" bind:this={elem}>{@html content}</div>

package/src/blocks/embed/helpers.ts

@@ -0,0 +1,8 @@
+const SCRIPT_MIME_TYPES = [
+  'text/javascript',
+  'application/javascript',
+  'application/ecmascript',
+];
+
+export const isJsScript = (script: HTMLScriptElement) =>
+  SCRIPT_MIME_TYPES.includes(script.type);

package/src/blocks/form/component-info.ts

@@ -0,0 +1,282 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Form:Form',
+  builtIn: true,
+  // editableTags: ['builder-form-error']
+  defaults: {
+    responsiveStyles: {
+      large: {
+        marginTop: '15px',
+        paddingBottom: '15px',
+      },
+    },
+  },
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
+  inputs: [
+    {
+      name: 'sendSubmissionsTo',
+      type: 'string',
+      // TODO: save to builder data and user can download as csv
+      // TODO: easy for mode too or computed add/remove fields form mode
+      // so you can edit details and high level mode at same time...
+      // Later - more integrations like mailchimp
+      // /api/v1/form-submit?to=mailchimp
+      enum: [
+        {
+          label: 'Send to email',
+          value: 'email',
+          helperText:
+            'Send form submissions to the email address of your choosing',
+        },
+        {
+          label: 'Custom',
+          value: 'custom',
+          helperText:
+            'Handle where the form requests go manually with a little code, e.g. to your own custom backend',
+        },
+      ],
+      defaultValue: 'email',
+    },
+    {
+      name: 'sendSubmissionsToEmail',
+      type: 'string',
+      required: true, // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+      defaultValue: 'your@email.com',
+      showIf: 'options.get("sendSubmissionsTo") === "email"',
+    },
+    {
+      name: 'sendWithJs',
+      type: 'boolean',
+      helperText: 'Set to false to use basic html form action',
+      defaultValue: true,
+      showIf: 'options.get("sendSubmissionsTo") === "custom"',
+    },
+    {
+      name: 'name',
+      type: 'string',
+      defaultValue: 'My form',
+      // advanced: true
+    },
+    {
+      name: 'action',
+      type: 'string',
+      helperText: 'URL to send the form data to',
+      showIf: 'options.get("sendSubmissionsTo") === "custom"',
+    },
+    {
+      name: 'contentType',
+      type: 'string',
+      defaultValue: 'application/json',
+      advanced: true,
+      // TODO: do automatically if file input
+      enum: [
+        'application/json',
+        'multipart/form-data',
+        'application/x-www-form-urlencoded',
+      ],
+      showIf:
+        'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
+    },
+    {
+      name: 'method',
+      type: 'string',
+      showIf: 'options.get("sendSubmissionsTo") === "custom"',
+      defaultValue: 'POST',
+      advanced: true,
+    },
+    {
+      name: 'previewState',
+      type: 'string',
+      // TODO: persist: false flag
+      enum: ['unsubmitted', 'sending', 'success', 'error'],
+      defaultValue: 'unsubmitted',
+      helperText:
+        'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
+      showIf:
+        'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
+    },
+    {
+      name: 'successUrl',
+      type: 'url',
+      helperText:
+        'Optional URL to redirect the user to on form submission success',
+      showIf:
+        'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
+    },
+    {
+      name: 'resetFormOnSubmit',
+      type: 'boolean',
+      showIf:
+        "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
+      advanced: true,
+    },
+    {
+      name: 'successMessage',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [
+        {
+          '@type': '@builder.io/sdk:Element',
+          responsiveStyles: {
+            large: {
+              marginTop: '10px',
+            },
+          },
+          component: {
+            name: 'Text',
+            options: {
+              text: '<span>Thanks!</span>',
+            },
+          },
+        },
+      ],
+    },
+    {
+      name: 'validate',
+      type: 'boolean',
+      defaultValue: true,
+      advanced: true,
+    },
+    {
+      name: 'errorMessagePath',
+      type: 'text',
+      advanced: true,
+      helperText:
+        'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}',
+    },
+    {
+      name: 'errorMessage',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [
+        {
+          '@type': '@builder.io/sdk:Element',
+          responsiveStyles: {
+            large: {
+              marginTop: '10px',
+            },
+          },
+          bindings: {
+            'component.options.text':
+              'state.formErrorMessage || block.component.options.text',
+          },
+          component: {
+            name: 'Text',
+            options: {
+              text: '<span>Form submission error :( Please check your answers and try again</span>',
+            },
+          },
+        },
+      ],
+    },
+    {
+      name: 'sendingMessage',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [
+        {
+          '@type': '@builder.io/sdk:Element',
+          responsiveStyles: {
+            large: {
+              marginTop: '10px',
+            },
+          },
+          component: {
+            name: 'Text',
+            options: {
+              text: '<span>Sending...</span>',
+            },
+          },
+        },
+      ],
+    },
+    {
+      name: 'customHeaders',
+      type: 'map',
+      valueType: {
+        type: 'string',
+      },
+      advanced: true,
+      showIf:
+        'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
+    },
+  ],
+  noWrap: true,
+  canHaveChildren: true,
+  defaultChildren: [
+    {
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px',
+        },
+      },
+      component: {
+        name: 'Text',
+        options: {
+          text: '<span>Enter your name</span>',
+        },
+      },
+    },
+    {
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px',
+        },
+      },
+      component: {
+        name: 'Form:Input',
+        options: {
+          name: 'name',
+          placeholder: 'Jane Doe',
+        },
+      },
+    },
+    {
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px',
+        },
+      },
+      component: {
+        name: 'Text',
+        options: {
+          text: '<span>Enter your email</span>',
+        },
+      },
+    },
+    {
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px',
+        },
+      },
+      component: {
+        name: 'Form:Input',
+        options: {
+          name: 'email',
+          placeholder: 'jane@doe.com',
+        },
+      },
+    },
+    {
+      '@type': '@builder.io/sdk:Element',
+      responsiveStyles: {
+        large: {
+          marginTop: '10px',
+        },
+      },
+      component: {
+        name: 'Form:SubmitButton',
+        options: {
+          text: 'Submit',
+        },
+      },
+    },
+  ],
+};

package/src/blocks/form/form.svelte

@@ -0,0 +1,332 @@
+<script context="module" lang="ts">
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-nocheck
+
+  /* eslint-disable */
+
+  /**
+   * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+   * to be cleaned up before the component can actually be usable.
+   */
+
+  interface BuilderElement {}
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-nocheck
+
+  /* eslint-disable */
+
+  /**
+   * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+   * to be cleaned up before the component can actually be usable.
+   */
+
+  export interface FormProps {
+    attributes?: any;
+    name?: string;
+    action?: string;
+    validate?: boolean;
+    method?: string;
+    builderBlock?: BuilderElement;
+    sendSubmissionsTo?: string;
+    sendSubmissionsToEmail?: string;
+    sendWithJs?: boolean;
+    contentType?: string;
+    customHeaders?: {
+      [key: string]: string;
+    };
+    successUrl?: string;
+    previewState?: FormState;
+    successMessage?: BuilderElement[];
+    errorMessage?: BuilderElement[];
+    sendingMessage?: BuilderElement[];
+    resetFormOnSubmit?: boolean;
+    errorMessagePath?: string;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-nocheck
+
+  /* eslint-disable */
+
+  /**
+   * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+   * to be cleaned up before the component can actually be usable.
+   */
+
+  export type FormState = "unsubmitted" | "sending" | "success" | "error";
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import RenderBlock from "../../components/render-block/render-block.svelte";
+  import BuilderBlocks from "../../components/render-blocks.svelte";
+  import { isEditing } from "../../functions/is-editing.js";
+
+  export let previewState: FormProps["previewState"];
+  export let sendWithJs: FormProps["sendWithJs"];
+  export let sendSubmissionsTo: FormProps["sendSubmissionsTo"];
+  export let action: FormProps["action"];
+  export let customHeaders: FormProps["customHeaders"];
+  export let contentType: FormProps["contentType"];
+  export let sendSubmissionsToEmail: FormProps["sendSubmissionsToEmail"];
+  export let name: FormProps["name"];
+  export let method: FormProps["method"];
+  export let errorMessagePath: FormProps["errorMessagePath"];
+  export let resetFormOnSubmit: FormProps["resetFormOnSubmit"];
+  export let successUrl: FormProps["successUrl"];
+  export let validate: FormProps["validate"];
+  export let attributes: FormProps["attributes"];
+  export let builderBlock: FormProps["builderBlock"];
+  export let errorMessage: FormProps["errorMessage"];
+  export let sendingMessage: FormProps["sendingMessage"];
+  export let successMessage: FormProps["successMessage"];
+
+  let builderContext = getContext(BuilderContext.key);
+
+  function onSubmit(event) {
+    const sendWithJs = sendWithJs || sendSubmissionsTo === "email";
+    if (sendSubmissionsTo === "zapier") {
+      event.preventDefault();
+    } else if (sendWithJs) {
+      if (!(action || sendSubmissionsTo === "email")) {
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      const el = event.currentTarget;
+      const headers = customHeaders || {};
+      let body;
+      const formData = new FormData(el);
+
+      // TODO: maybe support null
+      const formPairs = Array.from(
+        event.currentTarget.querySelectorAll("input,select,textarea")
+      )
+        .filter((el) => !!el.name)
+        .map((el) => {
+          let value;
+          const key = el.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.value;
+          }
+          return {
+            key,
+            value,
+          };
+        });
+      let contentType = contentType;
+      if (sendSubmissionsTo === "email") {
+        contentType = "multipart/form-data";
+      }
+      Array.from(formPairs).forEach(({ value }) => {
+        if (
+          value instanceof File ||
+          (Array.isArray(value) && value[0] instanceof File) ||
+          value instanceof FileList
+        ) {
+          contentType = "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 (contentType !== "application/json") {
+        body = formData;
+      } else {
+        // Json
+        const json = {};
+        Array.from(formPairs).forEach(({ value, key }) => {
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
+      }
+      if (contentType && contentType !== "multipart/form-data") {
+        if (
+          /* Zapier doesn't allow content-type header to be sent from browsers */
+          !(sendWithJs && action?.includes("zapier.com"))
+        ) {
+          headers["content-type"] = contentType;
+        }
+      }
+      const presubmitEvent = new CustomEvent("presubmit", {
+        detail: {
+          body,
+        },
+      });
+      if (formRef) {
+        formRef.dispatchEvent(presubmitEvent);
+        if (presubmitEvent.defaultPrevented) {
+          return;
+        }
+      }
+      formState = "sending";
+      const formUrl = `${
+        builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
+      }/api/v1/form-submit?apiKey=${builder.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;
+            }
+          }
+          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";
+        }
+      );
+    }
+  }
+  $: submissionState = () => {
+    return (isEditing() && previewState) || formState;
+  };
+
+  let formRef;
+
+  let formState = "unsubmitted";
+  let responseData = null;
+  let formErrorMessage = "";
+</script>
+
+<form
+  {...attributes}
+  {validate}
+  bind:this={formRef}
+  action={!sendWithJs && action}
+  {method}
+  {name}
+  on:submit={(event) => {
+    onSubmit(event);
+  }}
+>
+  {#if builderBlock && builderBlock.children}
+    {#each builderBlock?.children as block}
+      <RenderBlock {block} context={builderContext} />
+    {/each}
+  {/if}
+
+  {#if submissionState() === "error"}
+    <BuilderBlocks dataPath="errorMessage" blocks={errorMessage} />
+  {/if}
+
+  {#if submissionState() === "sending"}
+    <BuilderBlocks dataPath="sendingMessage" blocks={sendingMessage} />
+  {/if}
+
+  {#if submissionState() === "error" && responseData}
+    <pre class="builder-form-error-text pre">
+        {JSON.stringify(responseData, null, 2)}
+      </pre>
+  {/if}
+
+  {#if submissionState() === "success"}
+    <BuilderBlocks dataPath="successMessage" blocks={successMessage} />
+  {/if}
+</form>
+
+<style>
+  .pre {
+    padding: 10px;
+    color: red;
+    text-align: center;
+  }
+</style>

package/src/blocks/fragment/component-info.ts

@@ -0,0 +1,10 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Fragment',
+  static: true,
+  hidden: true,
+  builtIn: true,
+  canHaveChildren: true,
+  noWrap: true,
+};

package/src/blocks/fragment/fragment.svelte

@@ -0,0 +1,12 @@
+<script context="module" lang="ts">
+  export interface FragmentProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+  }
+</script>
+
+<script lang="ts">
+</script>
+
+<span><slot /></span>