@builder.io/sdk-svelte 0.0.3 → 0.0.4

package/package/blocks/form/form.lite.tsx

@@ -1,351 +0,0 @@
-<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/package/blocks/fragment/fragment.lite.tsx

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

package/package/blocks/image/image.lite.tsx

@@ -1,148 +0,0 @@
-<script context="module" lang="ts">
-  import type { BuilderBlock } from "../../types/builder-block.js";
-
-  export interface ImageProps {
-    className?: string;
-    image: string;
-    sizes?: string;
-    lazy?: boolean;
-    height?: number;
-    width?: number;
-    altText?: string;
-    backgroundSize?: string;
-    backgroundPosition?: string;
-    srcset?: string;
-    aspectRatio?: number;
-    children?: JSX.Element;
-    fitContent?: boolean;
-    builderBlock?: BuilderBlock;
-    noWebp?: boolean;
-    src?: string;
-  }
-</script>
-
-<script lang="ts">
-  import { getSrcSet } from "./image.helpers.js";
-
-  export let image: ImageProps["image"];
-  export let src: ImageProps["src"];
-  export let srcset: ImageProps["srcset"];
-  export let noWebp: ImageProps["noWebp"];
-  export let altText: ImageProps["altText"];
-  export let backgroundSize: ImageProps["backgroundSize"];
-  export let className: ImageProps["className"];
-  export let sizes: ImageProps["sizes"];
-  export let aspectRatio: ImageProps["aspectRatio"];
-  export let fitContent: ImageProps["fitContent"];
-  export let builderBlock: ImageProps["builderBlock"];
-
-  function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-      node.style[p] = v;
-    });
-  }
-
-  $: srcSetToUse = () => {
-    const imageToUse = image || src;
-    const url = imageToUse;
-
-    if (
-      !url || // We can auto add srcset for cdn.builder.io and shopify
-      // images, otherwise you can supply this prop manually
-      !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))
-    ) {
-      return srcset;
-    }
-
-    if (srcset && image?.includes("builder.io/api/v1/image")) {
-      if (!srcset.includes(image.split("?")[0])) {
-        console.debug("Removed given srcset");
-        return getSrcSet(url);
-      }
-    } else if (image && !srcset) {
-      return getSrcSet(url);
-    }
-
-    return getSrcSet(url);
-  };
-
-  $: webpSrcSet = () => {
-    if (srcSetToUse?.()?.match(/builder\.io/) && !noWebp) {
-      return srcSetToUse().replace(/\?/g, "?format=webp&");
-    } else {
-      return "";
-    }
-  };
-</script>
-
-<div class="div">
-  <picture>
-    {#if webpSrcSet()}
-      <source type="image/webp" srcset={webpSrcSet()} />
-    {/if}
-    <img
-      use:mitosis_styling={{
-        objectPosition: backgroundSize || "center",
-        objectFit: backgroundSize || "cover",
-      }}
-      loading="lazy"
-      alt={altText}
-      role={altText ? "presentation" : undefined}
-      class={"builder-image" + (className ? " " + className : "") + " img"}
-      src={image}
-      srcset={srcSetToUse()}
-      {sizes}
-    />
-    <source srcset={srcSetToUse()} />
-  </picture>
-
-  {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
-    <div
-      use:mitosis_styling={{
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        paddingTop: aspectRatio * 100 + "%",
-      }}
-      class="builder-image-sizer div-2"
-    />
-  {/if}
-
-  {#if builderBlock?.children?.length && fitContent}
-    <slot />
-  {/if}
-
-  {#if !fitContent}
-    <div class="div-3">
-      <slot />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .div {
-    position: relative;
-  }
-  .img {
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0px;
-    left: 0px;
-  }
-  .div-2 {
-    width: 100%;
-    pointer-events: none;
-    font-size: 0;
-  }
-  .div-3 {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-</style>

package/package/blocks/img/img.lite.tsx

@@ -1,48 +0,0 @@
-<script context="module" lang="ts">
-  export interface ImgProps {
-    attributes?: any;
-    imgSrc?: string; // TODO(misko): I think this is unused
-
-    image?: string;
-    altText?: string;
-    backgroundSize?: "cover" | "contain";
-    backgroundPosition?:
-      | "center"
-      | "top"
-      | "left"
-      | "right"
-      | "bottom"
-      | "top left"
-      | "top right"
-      | "bottom left"
-      | "bottom right";
-  }
-</script>
-
-<script lang="ts">
-  import { isEditing } from "../../functions/is-editing.js";
-
-  export let backgroundSize: ImgProps["backgroundSize"];
-  export let backgroundPosition: ImgProps["backgroundPosition"];
-  export let imgSrc: ImgProps["imgSrc"];
-  export let altText: ImgProps["altText"];
-  export let image: ImgProps["image"];
-  export let attributes: ImgProps["attributes"];
-
-  function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-      node.style[p] = v;
-    });
-  }
-</script>
-
-<img
-  {...attributes}
-  use:mitosis_styling={{
-    objectFit: backgroundSize || "cover",
-    objectPosition: backgroundPosition || "center",
-  }}
-  key={(isEditing() && imgSrc) || "default-key"}
-  alt={altText}
-  src={imgSrc || image}
-/>

package/package/blocks/input/input.lite.tsx

@@ -1,34 +0,0 @@
-<script context="module" lang="ts">
-  export interface FormInputProps {
-    type?: string;
-    attributes?: any;
-    name?: string;
-    value?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    required?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  import { isEditing } from "../../functions/is-editing.js";
-
-  export let attributes: FormInputProps["attributes"];
-  export let defaultValue: FormInputProps["defaultValue"];
-  export let placeholder: FormInputProps["placeholder"];
-  export let type: FormInputProps["type"];
-  export let name: FormInputProps["name"];
-  export let value: FormInputProps["value"];
-  export let required: FormInputProps["required"];
-</script>
-
-<input
-  {...attributes}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {placeholder}
-  {type}
-  {name}
-  {value}
-  {defaultValue}
-  {required}
-/>

package/package/blocks/raw-text/raw-text.lite.tsx

@@ -1,15 +0,0 @@
-<script context="module" lang="ts">
-  export interface RawTextProps {
-    attributes?: any;
-    text?: string; // builderBlock?: any;
-  }
-</script>
-
-<script lang="ts">
-  export let attributes: RawTextProps["attributes"];
-  export let text: RawTextProps["text"];
-</script>
-
-<span class={attributes?.class || attributes?.className}
-  >{@html text || ""}</span
->

package/package/blocks/section/section.lite.tsx

@@ -1,30 +0,0 @@
-<script context="module" lang="ts">
-  export interface SectionProps {
-    maxWidth?: number;
-    attributes?: any;
-    children?: any;
-    builderBlock?: any;
-  }
-</script>
-
-<script lang="ts">
-  export let attributes: SectionProps["attributes"];
-  export let maxWidth: SectionProps["maxWidth"];
-
-  function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-      node.style[p] = v;
-    });
-  }
-</script>
-
-<section
-  {...attributes}
-  use:mitosis_styling={maxWidth && typeof maxWidth === "number"
-    ? {
-        maxWidth: maxWidth,
-      }
-    : undefined}
->
-  <slot />
-</section>

package/package/blocks/select/select.lite.tsx

@@ -1,34 +0,0 @@
-<script context="module" lang="ts">
-  export interface FormSelectProps {
-    options?: {
-      name?: string;
-      value: string;
-    }[];
-    attributes?: any;
-    name?: string;
-    value?: string;
-    defaultValue?: string;
-  }
-</script>
-
-<script lang="ts">
-  import { isEditing } from "../../functions/is-editing.js";
-
-  export let attributes: FormSelectProps["attributes"];
-  export let value: FormSelectProps["value"];
-  export let defaultValue: FormSelectProps["defaultValue"];
-  export let name: FormSelectProps["name"];
-  export let options: FormSelectProps["options"];
-</script>
-
-<select
-  {...attributes}
-  {value}
-  key={isEditing() && defaultValue ? defaultValue : "default-key"}
-  {defaultValue}
-  {name}
->
-  {#each options as option}
-    <option value={option.value}>{option.name || option.value}</option>
-  {/each}
-</select>