@builder.io/sdk-svelte 0.5.8 → 0.6.0

package/README.md

@@ -21,7 +21,3 @@ Take a look at [our example repo](/examples/svelte/sveltekit) for how to use thi
 ## Fetch
 
 This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.
-
-## Non-Node.js Runtimes (Edge, Serverless)
-
-If planning to deploy your app to a non-Node.js runtime (like Edge or Serverless functions), make sure to read the [Non-Node.js Runtimes](../../README.md#non-nodejs-runtimes-edge-serverless) section of the main README.

package/lib/browser/blocks/button/button.svelte

@@ -0,0 +1,46 @@
+<script context="module"></script>
+
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let text = undefined;
+export let link = undefined;
+export let openLinkInNewTab = undefined;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+{#if link}
+  <a
+    role="button"
+    {...filterAttrs(attributes, "on:", false)}
+    href={link}
+    target={openLinkInNewTab ? "_blank" : undefined}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {text}
+  </a>
+{:else}
+  <button
+    use:mitosis_styling={attributes.style}
+    {...filterAttrs(attributes, "on:", false)}
+    class={attributes.class + " button"}
+    use:setAttrs={filterAttrs(attributes, "on:", true)}
+  >
+    {text}
+  </button>
+{/if}
+
+<style>
+  .button {
+    all: unset;
+  }
+</style>

package/lib/browser/blocks/columns/columns.svelte

@@ -0,0 +1,156 @@
+<script context="module"></script>
+
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
+import InlinedStyles from "../../components/inlined-styles.svelte";
+import { TARGET } from "../../constants/target.js";
+import "../../functions/deopt.js";
+export let js;
+export let space = undefined;
+export let columns = undefined;
+export let stackColumnsAt = undefined;
+export let reverseColumnsWhenStacked = undefined;
+export let builderContext;
+export let builderBlock;
+export let builderComponents;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+function getWidth(index) {
+    return cols[index]?.width || 100 / cols.length;
+}
+function getColumnCssWidth(index) {
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+}
+function getTabletStyle({ stackedStyle, desktopStyle, }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+}
+function getMobileStyle({ stackedStyle, desktopStyle, }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+}
+function columnCssVars(index) {
+    const gutter = index === 0 ? 0 : gutterSize;
+    const width = getColumnCssWidth(index);
+    const gutterPixels = `${gutter}px`;
+    const mobileWidth = "100%";
+    const mobileMarginLeft = 0;
+    const marginLeftKey = "margin-left";
+    return {
+        width,
+        [marginLeftKey]: gutterPixels,
+        "--column-width-mobile": getMobileStyle({
+            stackedStyle: mobileWidth,
+            desktopStyle: width,
+        }),
+        "--column-margin-left-mobile": getMobileStyle({
+            stackedStyle: mobileMarginLeft,
+            desktopStyle: gutterPixels,
+        }),
+        "--column-width-tablet": getTabletStyle({
+            stackedStyle: mobileWidth,
+            desktopStyle: width,
+        }),
+        "--column-margin-left-tablet": getTabletStyle({
+            stackedStyle: mobileMarginLeft,
+            desktopStyle: gutterPixels,
+        }),
+    };
+}
+function getWidthForBreakpointSize(size) {
+    const breakpointSizes = getSizesForBreakpoints($builderContext.content?.meta?.breakpoints || {});
+    return breakpointSizes[size].max;
+}
+$: columnsCssVars = () => {
+    return {
+        "--flex-dir": flexDir,
+        "--flex-dir-tablet": getTabletStyle({
+            stackedStyle: flexDir,
+            desktopStyle: "row",
+        }),
+    };
+};
+$: columnsStyles = () => {
+    return `
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+};
+let gutterSize = typeof space === "number" ? space || 0 : 20;
+let cols = columns || [];
+let stackAt = stackColumnsAt || "tablet";
+let flexDir = stackColumnsAt === "never"
+    ? "row"
+    : reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
+</script>
+
+<div
+  use:mitosis_styling={columnsCssVars()}
+  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+  {...{}}
+>
+  {#if TARGET !== "reactNative"}
+    <InlinedStyles styles={columnsStyles()} />
+  {/if}
+
+  {#each columns as column, index (index)}
+    <div
+      use:mitosis_styling={columnCssVars(index)}
+      class="builder-column div-2"
+      {...{}}
+    >
+      <Blocks
+        path={`component.options.columns.${index}.blocks`}
+        parent={builderBlock.id}
+        styleProp={{
+          flexGrow: "1",
+        }}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        blocks={column.blocks}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .div {
+    display: flex;
+    line-height: normal;
+  }
+  .div-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+</style>

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

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+type Column = {
+    blocks: BuilderBlock[];
+    width?: number;
+};
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps extends BuilderComponentsProp {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+    space?: number;
+    stackColumnsAt?: StackColumnsAt;
+    reverseColumnsWhenStacked?: boolean;
+}
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/builder-props.js";
+declare const __propDef: {
+    props: {
+        js: any;
+        space?: PropsWithBuilderData<ColumnProps>["space"];
+        columns?: PropsWithBuilderData<ColumnProps>["columns"];
+        stackColumnsAt?: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
+        reverseColumnsWhenStacked?: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
+        builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
+        builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
+        builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColumnsProps = typeof __propDef.props;
+export type ColumnsEvents = typeof __propDef.events;
+export type ColumnsSlots = typeof __propDef.slots;
+export default class Columns extends SvelteComponent<ColumnsProps, ColumnsEvents, ColumnsSlots> {
+}
+export {};

package/lib/browser/blocks/custom-code/custom-code.svelte

@@ -0,0 +1,55 @@
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+export let replaceNodes = undefined;
+export let code;
+function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
+        const scripts = elem.getElementsByTagName("script");
+        for (let i = 0; i < scripts.length; i++) {
+            const script = scripts[i];
+            if (script.src) {
+                if (scriptsInserted.includes(script.src)) {
+                    continue;
+                }
+                scriptsInserted.push(script.src);
+                const newScript = document.createElement("script");
+                newScript.async = true;
+                newScript.src = script.src;
+                document.head.appendChild(newScript);
+            }
+            else if (!script.type ||
+                [
+                    "text/javascript",
+                    "application/javascript",
+                    "application/ecmascript",
+                ].includes(script.type)) {
+                if (scriptsRun.includes(script.innerText)) {
+                    continue;
+                }
+                try {
+                    scriptsRun.push(script.innerText);
+                    new Function(script.innerText)();
+                }
+                catch (error) {
+                    console.warn("`CustomCode`: Error running script:", error);
+                }
+            }
+        }
+    }
+}
+let elem;
+let scriptsInserted = [];
+let scriptsRun = [];
+onMount(() => {
+    findAndRunScripts();
+});
+</script>
+
+<div
+  bind:this={elem}
+  class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
+>
+  {@html code}
+</div>

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

@@ -0,0 +1,14 @@
+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/image/image.svelte

@@ -0,0 +1,126 @@
+<script context="module"></script>
+
+<script>import { getSrcSet } from "./image.helpers.js";
+export let image;
+export let src = undefined;
+export let srcset = undefined;
+export let noWebp = undefined;
+export let aspectRatio = undefined;
+export let altText = undefined;
+export let backgroundPosition = undefined;
+export let backgroundSize = undefined;
+export let className = undefined;
+export let sizes = undefined;
+export let builderBlock = undefined;
+export let fitContent = undefined;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            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 "";
+    }
+};
+$: aspectRatioCss = () => {
+    const aspectRatioStyles = {
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: "0px",
+        top: "0px",
+    };
+    const out = aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+};
+</script>
+
+<picture>
+  {#if webpSrcSet()}
+    <source type="image/webp" srcset={webpSrcSet()} />
+  {/if}
+  <img
+    use:mitosis_styling={{
+      objectPosition: backgroundPosition || "center",
+      objectFit: backgroundSize || "cover",
+      ...aspectRatioCss(),
+    }}
+    loading="lazy"
+    alt={altText}
+    role={altText ? "presentation" : undefined}
+    class={"builder-image" + (className ? " " + className : "") + " img"}
+    src={image}
+    srcset={srcSetToUse()}
+    {sizes}
+  />
+</picture>
+
+{#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
+  <div
+    use:mitosis_styling={{
+      paddingTop: aspectRatio * 100 + "%",
+    }}
+    class="builder-image-sizer div"
+  />
+{/if}
+
+{#if builderBlock?.children?.length && fitContent}
+  <slot />
+{/if}
+
+{#if !fitContent && $$slots.default}
+  <div class="div-2">
+    <slot />
+  </div>
+{/if}
+
+<style>
+  .img {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+  }
+  .div {
+    width: 100%;
+    pointer-events: none;
+    font-size: 0;
+  }
+  .div-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/lib/browser/blocks/img/img.svelte

@@ -0,0 +1,34 @@
+<script context="module"></script>
+
+<script>import { isEditing } from "../../functions/is-editing.js";
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let backgroundSize = undefined;
+export let backgroundPosition = undefined;
+export let imgSrc = undefined;
+export let altText = undefined;
+export let image = undefined;
+export let attributes = undefined;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+<img
+  use:mitosis_styling={{
+    objectFit: backgroundSize || "cover",
+    objectPosition: backgroundPosition || "center",
+  }}
+  key={(isEditing() && imgSrc) || "default-key"}
+  alt={altText}
+  src={imgSrc || image}
+  {...filterAttrs(attributes, "on:", false)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+/>

package/lib/browser/blocks/input/input.svelte

@@ -0,0 +1,25 @@
+<script context="module"></script>
+
+<script>import { isEditing } from "../../functions/is-editing.js";
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let defaultValue = undefined;
+export let placeholder = undefined;
+export let type = undefined;
+export let name = undefined;
+export let value = undefined;
+export let required = undefined;
+</script>
+
+<input
+  {...filterAttrs(attributes, "on:", false)}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {placeholder}
+  {type}
+  {name}
+  {value}
+  {defaultValue}
+  {required}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+/>

package/lib/browser/blocks/raw-text/raw-text.svelte

@@ -0,0 +1,7 @@
+<script context="module"></script>
+
+<script>export let text = undefined;
+export let attributes = undefined;
+</script>
+
+<span class={attributes.class}>{@html text?.toString() || ""}</span>

package/lib/browser/blocks/section/section.svelte

@@ -0,0 +1,36 @@
+<script context="module"></script>
+
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let maxWidth = undefined;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+<section
+  use:mitosis_styling={{
+    width: "100%",
+    alignSelf: "stretch",
+    flexGrow: 1,
+    boxSizing: "border-box",
+    maxWidth: maxWidth || 1200,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    marginLeft: "auto",
+    marginRight: "auto",
+  }}
+  {...filterAttrs(attributes, "on:", false)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+>
+  <slot />
+</section>

package/lib/browser/blocks/select/select.svelte

@@ -0,0 +1,24 @@
+<script context="module"></script>
+
+<script>import { isEditing } from "../../functions/is-editing.js";
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let value = undefined;
+export let defaultValue = undefined;
+export let name = undefined;
+export let options = undefined;
+</script>
+
+<select
+  {...filterAttrs(attributes, "on:", false)}
+  {value}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {defaultValue}
+  {name}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+>
+  {#each options as option}
+    <option value={option.value}>{option.name || option.value}</option>
+  {/each}
+</select>

package/lib/browser/blocks/submit-button/submit-button.svelte

@@ -0,0 +1,15 @@
+<script context="module"></script>
+
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let text = undefined;
+</script>
+
+<button
+  type="submit"
+  {...filterAttrs(attributes, "on:", false)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+>
+  {text}
+</button>

package/lib/browser/blocks/submit-button/submit-button.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+}
+declare const __propDef: {
+    props: {
+        attributes?: ButtonProps["attributes"];
+        text?: ButtonProps["text"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubmitButtonProps = typeof __propDef.props;
+export type SubmitButtonEvents = typeof __propDef.events;
+export type SubmitButtonSlots = typeof __propDef.slots;
+export default class SubmitButton extends SvelteComponent<SubmitButtonProps, SubmitButtonEvents, SubmitButtonSlots> {
+}
+export {};

package/lib/browser/blocks/symbol/symbol.svelte

@@ -0,0 +1,66 @@
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+import ContentVariants from "../../components/content-variants/content-variants.svelte";
+import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+import { fetchSymbolContent } from "./symbol.helpers.js";
+export let js;
+export let attributes = undefined;
+export let symbol = undefined;
+export let dynamic = undefined;
+export let builderContext;
+export let builderComponents;
+function setContent() {
+    if (contentToUse)
+        return;
+    fetchSymbolContent({
+        symbol: symbol,
+        builderContextValue: $builderContext,
+    }).then((newContent) => {
+        if (newContent) {
+            contentToUse = newContent;
+        }
+    });
+}
+$: className = () => {
+    return [
+        ...[attributes.class],
+        "builder-symbol",
+        symbol?.inline ? "builder-inline-symbol" : undefined,
+        symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
+    ]
+        .filter(Boolean)
+        .join(" ");
+};
+let contentToUse = symbol?.content;
+onMount(() => {
+    setContent();
+});
+function onUpdateFn_0(..._args) {
+    setContent();
+}
+$: onUpdateFn_0(...[symbol]);
+</script>
+
+<div
+  {...filterAttrs(attributes, "on:", false)}
+  {...{}}
+  class={className()}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+>
+  <ContentVariants
+    __isNestedRender={true}
+    apiVersion={$builderContext.apiVersion}
+    apiKey={$builderContext.apiKey}
+    context={$builderContext.context}
+    customComponents={Object.values(builderComponents)}
+    data={{
+      ...symbol?.data,
+      ...$builderContext.localState,
+      ...contentToUse?.data?.state,
+    }}
+    model={symbol?.model}
+    content={contentToUse}
+  />
+</div>