@builder.io/sdk-svelte 0.5.8 → 0.6.0

package/lib/edge/blocks/submit-button/component-info.js

@@ -0,0 +1,26 @@
+export const componentInfo = {
+    name: 'Form:SubmitButton',
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
+    defaultStyles: {
+        appearance: 'none',
+        paddingTop: '15px',
+        paddingBottom: '15px',
+        paddingLeft: '25px',
+        paddingRight: '25px',
+        backgroundColor: '#3898EC',
+        color: 'white',
+        borderRadius: '4px',
+        cursor: 'pointer'
+    },
+    inputs: [{
+            name: 'text',
+            type: 'text',
+            defaultValue: 'Click me'
+        }],
+    static: true,
+    noWrap: true
+    // TODO: optional children? maybe as optional form input
+    // that only shows if advanced setting is flipped
+    // TODO: defaultChildren
+    // canHaveChildren: true,
+};

package/lib/edge/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/edge/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/edge/blocks/symbol/component-info.d.ts

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

package/lib/edge/blocks/symbol/component-info.js

@@ -0,0 +1,34 @@
+export const componentInfo = {
+    name: 'Symbol',
+    noWrap: true,
+    static: true,
+    isRSC: true,
+    inputs: [{
+            name: 'symbol',
+            type: 'uiSymbol'
+        }, {
+            name: 'dataOnly',
+            helperText: "Make this a data symbol that doesn't display any UI",
+            type: 'boolean',
+            defaultValue: false,
+            advanced: true,
+            hideFromUI: true
+        }, {
+            name: 'inheritState',
+            helperText: 'Inherit the parent component state and data',
+            type: 'boolean',
+            defaultValue: false,
+            advanced: true
+        }, {
+            name: 'renderToLiquid',
+            helperText: 'Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting',
+            type: 'boolean',
+            defaultValue: false,
+            advanced: true,
+            hideFromUI: true
+        }, {
+            name: 'useChildren',
+            hideFromUI: true,
+            type: 'boolean'
+        }]
+};

package/lib/edge/blocks/symbol/symbol.helpers.d.ts

@@ -0,0 +1,14 @@
+import type { BuilderContextInterface } from '../../context/types.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+export interface SymbolInfo {
+    model?: string;
+    entry?: string;
+    data?: any;
+    content?: BuilderContent;
+    inline?: boolean;
+    dynamic?: boolean;
+}
+export declare const fetchSymbolContent: ({ builderContextValue, symbol }: {
+    symbol: SymbolInfo | undefined;
+    builderContextValue: BuilderContextInterface;
+}) => Promise<BuilderContent | null | undefined>;

package/lib/edge/blocks/symbol/symbol.helpers.js

@@ -0,0 +1,31 @@
+import { logger } from '../../helpers/logger.js';
+import { fetchOneEntry } from '../../index.js';
+export const fetchSymbolContent = async ({ builderContextValue, symbol }) => {
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+    if (symbol?.model &&
+        // This is a hack, we should not need to check for this, but it is needed for Svelte.
+        builderContextValue?.apiKey) {
+        return fetchOneEntry({
+            model: symbol.model,
+            apiKey: builderContextValue.apiKey,
+            apiVersion: builderContextValue.apiVersion,
+            ...(symbol?.entry && {
+                query: {
+                    id: symbol.entry
+                }
+            })
+        }).catch(err => {
+            logger.error('Could not fetch symbol content: ', err);
+            return undefined;
+        });
+    }
+    return undefined;
+};

package/lib/edge/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>

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

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

package/lib/edge/blocks/text/component-info.js

@@ -0,0 +1,19 @@
+export const componentInfo = {
+    name: 'Text',
+    static: true,
+    isRSC: true,
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
+    inputs: [{
+            name: 'text',
+            type: 'html',
+            required: true,
+            autoFocus: true,
+            bubble: true,
+            defaultValue: 'Enter some text...'
+        }],
+    defaultStyles: {
+        lineHeight: 'normal',
+        height: 'auto',
+        textAlign: 'center'
+    }
+};

package/lib/edge/blocks/text/text.svelte

@@ -0,0 +1,21 @@
+<script context="module"></script>
+
+<script>export let text = 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>
+
+<span
+  use:mitosis_styling={{
+    outline: "none",
+  }}
+  class="builder-text">{@html text?.toString() || ""}</span
+>

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

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

package/lib/edge/blocks/textarea/component-info.js

@@ -0,0 +1,37 @@
+export const componentInfo = {
+    name: 'Form:TextArea',
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
+    inputs: [{
+            advanced: true,
+            name: 'value',
+            type: 'string'
+        }, {
+            name: 'name',
+            type: 'string',
+            required: true,
+            helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+        }, {
+            name: 'defaultValue',
+            type: 'string'
+        }, {
+            name: 'placeholder',
+            type: 'string',
+            defaultValue: 'Hello there'
+        }, {
+            name: 'required',
+            type: 'boolean',
+            defaultValue: false
+        }],
+    defaultStyles: {
+        paddingTop: '10px',
+        paddingBottom: '10px',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        borderRadius: '3px',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: '#ccc'
+    },
+    static: true,
+    noWrap: true
+};

package/lib/edge/blocks/textarea/textarea.svelte

@@ -0,0 +1,19 @@
+<script context="module"></script>
+
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let placeholder = undefined;
+export let name = undefined;
+export let value = undefined;
+export let defaultValue = undefined;
+</script>
+
+<textarea
+  {...filterAttrs(attributes, "on:", false)}
+  {placeholder}
+  {name}
+  {value}
+  {defaultValue}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+/>

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

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

package/lib/edge/blocks/video/component-info.js

@@ -0,0 +1,82 @@
+export const componentInfo = {
+    name: 'Video',
+    canHaveChildren: true,
+    defaultStyles: {
+        minHeight: '20px',
+        minWidth: '20px'
+    },
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
+    inputs: [{
+            name: 'video',
+            type: 'file',
+            allowedFileTypes: ['mp4'],
+            bubble: true,
+            defaultValue: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+            required: true
+        }, {
+            name: 'posterImage',
+            type: 'file',
+            allowedFileTypes: ['jpeg', 'png'],
+            helperText: 'Image to show before the video plays'
+        }, {
+            name: 'autoPlay',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'controls',
+            type: 'boolean',
+            defaultValue: false
+        }, {
+            name: 'muted',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'loop',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'playsInline',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'fit',
+            type: 'text',
+            defaultValue: 'cover',
+            enum: ['contain', 'cover', 'fill', 'auto']
+        }, {
+            name: 'preload',
+            type: 'text',
+            defaultValue: 'metadata',
+            enum: ['auto', 'metadata', 'none']
+        }, {
+            name: 'fitContent',
+            type: 'boolean',
+            helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
+            defaultValue: true,
+            advanced: true
+        }, {
+            name: 'position',
+            type: 'text',
+            defaultValue: 'center',
+            enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+        }, {
+            name: 'height',
+            type: 'number',
+            advanced: true
+        }, {
+            name: 'width',
+            type: 'number',
+            advanced: true
+        }, {
+            name: 'aspectRatio',
+            type: 'number',
+            advanced: true,
+            defaultValue: 0.7004048582995948
+        }, {
+            name: 'lazyLoad',
+            type: 'boolean',
+            helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+            defaultValue: true,
+            advanced: true
+        }]
+};

package/lib/edge/blocks/video/video.svelte

@@ -0,0 +1,76 @@
+<script context="module"></script>
+
+<script>export let autoPlay = undefined;
+export let muted = undefined;
+export let controls = undefined;
+export let loop = undefined;
+export let playsInline = undefined;
+export let attributes = undefined;
+export let preload = undefined;
+export let fit = undefined;
+export let position = undefined;
+export let video = undefined;
+export let posterImage = 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;
+        }
+    });
+}
+$: videoProps = () => {
+    return {
+        ...(autoPlay === true
+            ? {
+                autoPlay: true,
+            }
+            : {}),
+        ...(muted === true
+            ? {
+                muted: true,
+            }
+            : {}),
+        ...(controls === true
+            ? {
+                controls: true,
+            }
+            : {}),
+        ...(loop === true
+            ? {
+                loop: true,
+            }
+            : {}),
+        ...(playsInline === true
+            ? {
+                playsInline: true,
+            }
+            : {}),
+    };
+};
+$: spreadProps = () => {
+    return {
+        ...attributes,
+        ...videoProps(),
+    };
+};
+</script>
+
+<video
+  use:mitosis_styling={{
+    width: "100%",
+    height: "100%",
+    ...attributes?.style,
+    objectFit: fit,
+    objectPosition: position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    borderRadius: 1,
+  }}
+  {...spreadProps()}
+  preload={preload || "metadata"}
+  src={video || "no-src"}
+  poster={posterImage}
+/>

package/lib/edge/components/block/block.helpers.d.ts

@@ -0,0 +1,13 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+import type { RepeatData } from './types.js';
+export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
+export declare const getComponent: ({ block, context, registeredComponents }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+}) => import("../../context/types.js").RegisteredComponent | null | undefined;
+export declare const getRepeatItemData: ({ block, context }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => RepeatData[] | undefined;

package/lib/edge/components/block/block.helpers.js

@@ -0,0 +1,69 @@
+import { evaluate } from '../../functions/evaluate/index.js';
+import { getProcessedBlock } from '../../functions/get-processed-block.js';
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+export const isEmptyHtmlElement = (tagName) => {
+    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export const getComponent = ({ block, context, registeredComponents }) => {
+    const componentName = getProcessedBlock({
+        block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: false
+    }).component?.name;
+    if (!componentName) {
+        return null;
+    }
+    const ref = registeredComponents[componentName];
+    if (!ref) {
+        // TODO: Public doc page with more info about this message
+        console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+    }
+    else {
+        return ref;
+    }
+};
+export const getRepeatItemData = ({ block, context }) => {
+    /**
+     * we don't use `state.processedBlock` here because the processing done within its logic includes evaluating the block's bindings,
+     * which will not work if there is a repeat.
+     */
+    const { repeat, ...blockWithoutRepeat } = block;
+    if (!repeat?.collection) {
+        return undefined;
+    }
+    const itemsArray = evaluate({
+        code: repeat.collection,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context
+    });
+    if (!Array.isArray(itemsArray)) {
+        return undefined;
+    }
+    const collectionName = repeat.collection.split('.').pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+    const repeatArray = itemsArray.map((item, index) => ({
+        context: {
+            ...context,
+            localState: {
+                ...context.localState,
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index
+            }
+        },
+        block: blockWithoutRepeat
+    }));
+    return repeatArray;
+};