@builder.io/sdk-svelte 0.5.8 → 0.6.0

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

@@ -1,37 +0,0 @@
-import { SvelteComponentTyped } 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 SvelteComponentTyped<ColumnsProps, ColumnsEvents, ColumnsSlots> {
-}
-export {};

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

@@ -1,55 +0,0 @@
-<script context="module"></script>
-
-<script>import { onMount } from "svelte";
-export let replaceNodes;
-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/package/blocks/custom-code/custom-code.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export interface CustomCodeProps {
-    code: string;
-    replaceNodes?: boolean;
-}
-declare const __propDef: {
-    props: {
-        replaceNodes: CustomCodeProps["replaceNodes"];
-        code: CustomCodeProps["code"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CustomCodeProps = typeof __propDef.props;
-export type CustomCodeEvents = typeof __propDef.events;
-export type CustomCodeSlots = typeof __propDef.slots;
-export default class CustomCode extends SvelteComponentTyped<CustomCodeProps, CustomCodeEvents, CustomCodeSlots> {
-}
-export {};

package/package/blocks/embed/embed.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export interface EmbedProps {
-    content: string;
-}
-declare const __propDef: {
-    props: {
-        content: EmbedProps["content"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type EmbedProps = typeof __propDef.props;
-export type EmbedEvents = typeof __propDef.events;
-export type EmbedSlots = typeof __propDef.slots;
-export default class Embed extends SvelteComponentTyped<EmbedProps, EmbedEvents, EmbedSlots> {
-}
-export {};

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } 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 SvelteComponentTyped<FormProps, FormEvents, FormSlots> {
-}
-export {};

package/package/blocks/fragment/fragment.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export interface FragmentProps {
-    maxWidth?: number;
-    attributes?: any;
-    children?: any;
-}
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type FragmentProps = typeof __propDef.props;
-export type FragmentEvents = typeof __propDef.events;
-export type FragmentSlots = typeof __propDef.slots;
-export default class Fragment extends SvelteComponentTyped<FragmentProps, FragmentEvents, FragmentSlots> {
-}
-export {};

package/package/blocks/image/image.svelte

@@ -1,126 +0,0 @@
-<script context="module"></script>
-
-<script>import { getSrcSet } from "./image.helpers.js";
-export let image;
-export let src;
-export let srcset;
-export let noWebp;
-export let aspectRatio;
-export let altText;
-export let backgroundPosition;
-export let backgroundSize;
-export let className;
-export let sizes;
-export let builderBlock;
-export let fitContent;
-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/package/blocks/image/image.svelte.d.ts

@@ -1,49 +0,0 @@
-/// <reference types="react" />
-import { SvelteComponentTyped } from "svelte";
-export interface ImageProps {
-    className?: string;
-    image: string;
-    sizes?: string;
-    lazy?: boolean;
-    height?: number;
-    width?: number;
-    altText?: string;
-    backgroundSize?: "cover" | "contain";
-    backgroundPosition?: string;
-    srcset?: string;
-    aspectRatio?: number;
-    children?: JSX.Element;
-    fitContent?: boolean;
-    builderBlock?: BuilderBlock;
-    noWebp?: boolean;
-    src?: string;
-}
-import type { BuilderBlock } from "../../types/builder-block.js";
-declare const __propDef: {
-    props: {
-        image: ImageProps["image"];
-        src: ImageProps["src"];
-        srcset: ImageProps["srcset"];
-        noWebp: ImageProps["noWebp"];
-        aspectRatio: ImageProps["aspectRatio"];
-        altText: ImageProps["altText"];
-        backgroundPosition: ImageProps["backgroundPosition"];
-        backgroundSize: ImageProps["backgroundSize"];
-        className: ImageProps["className"];
-        sizes: ImageProps["sizes"];
-        builderBlock: ImageProps["builderBlock"];
-        fitContent: ImageProps["fitContent"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ImageProps = typeof __propDef.props;
-export type ImageEvents = typeof __propDef.events;
-export type ImageSlots = typeof __propDef.slots;
-export default class Image extends SvelteComponentTyped<ImageProps, ImageEvents, ImageSlots> {
-}
-export {};

package/package/blocks/img/img.svelte

@@ -1,34 +0,0 @@
-<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;
-export let backgroundPosition;
-export let imgSrc;
-export let altText;
-export let image;
-export let attributes;
-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/package/blocks/img/img.svelte.d.ts

@@ -1,31 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */ export interface ImgProps {
-    attributes?: any;
-    imgSrc?: string;
-    image?: string;
-    altText?: string;
-    backgroundSize?: "cover" | "contain";
-    backgroundPosition?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
-}
-declare const __propDef: {
-    props: {
-        backgroundSize: ImgProps["backgroundSize"];
-        backgroundPosition: ImgProps["backgroundPosition"];
-        imgSrc: ImgProps["imgSrc"];
-        altText: ImgProps["altText"];
-        image: ImgProps["image"];
-        attributes: ImgProps["attributes"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ImgProps = typeof __propDef.props;
-export type ImgEvents = typeof __propDef.events;
-export type ImgSlots = typeof __propDef.slots;
-export default class Img extends SvelteComponentTyped<ImgProps, ImgEvents, ImgSlots> {
-}
-export {};

package/package/blocks/input/input.svelte

@@ -1,25 +0,0 @@
-<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;
-export let defaultValue;
-export let placeholder;
-export let type;
-export let name;
-export let value;
-export let required;
-</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/package/blocks/input/input.svelte.d.ts

@@ -1,33 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */ export interface FormInputProps {
-    type?: string;
-    attributes?: any;
-    name?: string;
-    value?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    required?: boolean;
-}
-declare const __propDef: {
-    props: {
-        attributes: FormInputProps["attributes"];
-        defaultValue: FormInputProps["defaultValue"];
-        placeholder: FormInputProps["placeholder"];
-        type: FormInputProps["type"];
-        name: FormInputProps["name"];
-        value: FormInputProps["value"];
-        required: FormInputProps["required"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputProps = typeof __propDef.props;
-export type InputEvents = typeof __propDef.events;
-export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
-}
-export {};

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

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

package/package/blocks/raw-text/raw-text.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export interface RawTextProps {
-    attributes?: any;
-    text?: string;
-}
-declare const __propDef: {
-    props: {
-        text: RawTextProps["text"];
-        attributes: RawTextProps["attributes"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RawTextProps = typeof __propDef.props;
-export type RawTextEvents = typeof __propDef.events;
-export type RawTextSlots = typeof __propDef.slots;
-export default class RawText extends SvelteComponentTyped<RawTextProps, RawTextEvents, RawTextSlots> {
-}
-export {};

package/package/blocks/section/section.svelte

@@ -1,36 +0,0 @@
-<script context="module"></script>
-
-<script>import { filterAttrs } from "../helpers.js";
-import { setAttrs } from "../helpers.js";
-export let attributes;
-export let maxWidth;
-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/package/blocks/section/section.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */ export interface SectionProps {
-    maxWidth?: number;
-    attributes?: any;
-    children?: any;
-    builderBlock?: any;
-}
-declare const __propDef: {
-    props: {
-        attributes: SectionProps["attributes"];
-        maxWidth: SectionProps["maxWidth"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type SectionProps = typeof __propDef.props;
-export type SectionEvents = typeof __propDef.events;
-export type SectionSlots = typeof __propDef.slots;
-export default class Section extends SvelteComponentTyped<SectionProps, SectionEvents, SectionSlots> {
-}
-export {};

package/package/blocks/select/select.svelte

@@ -1,24 +0,0 @@
-<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;
-export let value;
-export let defaultValue;
-export let name;
-export let options;
-</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/package/blocks/select/select.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */ export interface FormSelectProps {
-    options?: {
-        name?: string;
-        value: string;
-    }[];
-    attributes?: any;
-    name?: string;
-    value?: string;
-    defaultValue?: string;
-}
-declare const __propDef: {
-    props: {
-        attributes: FormSelectProps["attributes"];
-        value: FormSelectProps["value"];
-        defaultValue: FormSelectProps["defaultValue"];
-        name: FormSelectProps["name"];
-        options: FormSelectProps["options"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
-}
-export {};

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

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

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

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } 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 SvelteComponentTyped<SubmitButtonProps, SubmitButtonEvents, SubmitButtonSlots> {
-}
-export {};