@builder.io/sdk-svelte 0.4.4 → 0.5.0

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

@@ -1,20 +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: [
-        {
+    inputs: [{
             name: 'text',
             type: 'html',
             required: true,
             autoFocus: true,
             bubble: true,
-            defaultValue: 'Enter some text...',
-        },
-    ],
+            defaultValue: 'Enter some text...'
+        }],
     defaultStyles: {
         lineHeight: 'normal',
         height: 'auto',
-        textAlign: 'center',
-    },
+        textAlign: 'center'
+    }
 };

package/package/blocks/text/text.svelte

@@ -17,5 +17,5 @@ function mitosis_styling(node, vars) {
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text}</span
+  class="builder-text">{@html text?.toString() || ""}</span
 >

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 export interface TextProps {
-    text: string;
+    text?: string;
 }
 declare const __propDef: {
     props: {

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

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

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

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

package/package/blocks/textarea/textarea.svelte

@@ -1,32 +1,7 @@
 <script context="module"></script>
 
-<script>const isEvent = (attr) => attr.startsWith("on:");
-const isNonEvent = (attr) => !attr.startsWith("on:");
-const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-        if (filter(attr)) {
-            validAttr[attr] = attrs[attr];
-        }
-    });
-    return validAttr;
-};
-const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) => node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-        update(attrs = {}) {
-            const attrKeys = Object.keys(attrs);
-            attrKeys.map(teardown);
-            attrKeys.map(setup);
-        },
-        destroy() {
-            attrKeys.map(teardown);
-        },
-    };
-};
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
 export let attributes;
 export let placeholder;
 export let name;
@@ -35,10 +10,10 @@ export let defaultValue;
 </script>
 
 <textarea
-  {...filterAttrs(attributes, isNonEvent)}
+  {...filterAttrs(attributes, "on:", false)}
   {placeholder}
   {name}
   {value}
   {defaultValue}
-  use:setAttrs={filterAttrs(attributes, isEvent)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

package/package/blocks/textarea/textarea.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-export interface TextareaProps {
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ export interface TextareaProps {
     attributes?: any;
     name?: string;
     value?: string;

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

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

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

@@ -3,100 +3,80 @@ export const componentInfo = {
     canHaveChildren: true,
     defaultStyles: {
         minHeight: '20px',
-        minWidth: '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: [
-        {
+    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,
-        },
-        {
+            required: true
+        }, {
             name: 'posterImage',
             type: 'file',
             allowedFileTypes: ['jpeg', 'png'],
-            helperText: 'Image to show before the video plays',
-        },
-        {
+            helperText: 'Image to show before the video plays'
+        }, {
             name: 'autoPlay',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'controls',
             type: 'boolean',
-            defaultValue: false,
-        },
-        {
+            defaultValue: false
+        }, {
             name: 'muted',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'loop',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'playsInline',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'fit',
             type: 'text',
             defaultValue: 'cover',
-            enum: ['contain', 'cover', 'fill', 'auto'],
-        },
-        {
+            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,
-        },
-        {
+            advanced: true
+        }, {
             name: 'position',
             type: 'text',
             defaultValue: 'center',
-            enum: [
-                'center',
-                'top',
-                'left',
-                'right',
-                'bottom',
-                'top left',
-                'top right',
-                'bottom left',
-                'bottom right',
-            ],
-        },
-        {
+            enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+        }, {
             name: 'height',
             type: 'number',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'width',
             type: 'number',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'aspectRatio',
             type: 'number',
             advanced: true,
-            defaultValue: 0.7004048582995948,
-        },
-        {
+            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,
-        },
-    ],
+            advanced: true
+        }]
 };

package/package/blocks/video/video.svelte

@@ -1,38 +1,12 @@
 <script context="module"></script>
 
-<script>const isEvent = (attr) => attr.startsWith("on:");
-const isNonEvent = (attr) => !attr.startsWith("on:");
-const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-        if (filter(attr)) {
-            validAttr[attr] = attrs[attr];
-        }
-    });
-    return validAttr;
-};
-const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) => node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-        update(attrs = {}) {
-            const attrKeys = Object.keys(attrs);
-            attrKeys.map(teardown);
-            attrKeys.map(setup);
-        },
-        destroy() {
-            attrKeys.map(teardown);
-        },
-    };
-};
-export let autoPlay;
+<script>export let autoPlay;
 export let muted;
 export let controls;
 export let loop;
 export let playsInline;
 export let attributes;
+export let preload;
 export let fit;
 export let position;
 export let video;
@@ -95,8 +69,8 @@ $: spreadProps = () => {
     // not have the video overflow
     borderRadius: 1,
   }}
-  {...filterAttrs(spreadProps(), isNonEvent)}
+  {...spreadProps()}
+  preload={preload || "metadata"}
   src={video || "no-src"}
   poster={posterImage}
-  use:setAttrs={filterAttrs(spreadProps(), isEvent)}
 />

package/package/blocks/video/video.svelte.d.ts

@@ -11,6 +11,7 @@ export interface VideoProps {
     width?: number;
     height?: number;
     fit?: "contain" | "cover" | "fill";
+    preload?: "auto" | "metadata" | "none";
     position?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
     posterImage?: string;
     lazyLoad?: boolean;
@@ -23,6 +24,7 @@ declare const __propDef: {
         loop: VideoProps["loop"];
         playsInline: VideoProps["playsInline"];
         attributes: VideoProps["attributes"];
+        preload: VideoProps["preload"];
         fit: VideoProps["fit"];
         position: VideoProps["position"];
         video: VideoProps["video"];

package/package/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/package/components/{render-block/render-block.helpers.js → block/block.helpers.js}

@@ -1,42 +1,25 @@
 import { evaluate } from '../../functions/evaluate';
-import { getProcessedBlock } from '../../functions/get-processed-block';
+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',
-];
+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()));
+    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
 };
-export const getComponent = ({ block, context, }) => {
+export const getComponent = ({ block, context, registeredComponents }) => {
     const componentName = getProcessedBlock({
         block,
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
         context: context.context,
-        shouldEvaluateBindings: false,
+        shouldEvaluateBindings: false
     }).component?.name;
     if (!componentName) {
         return null;
     }
-    const ref = context.registeredComponents[componentName];
+    const ref = registeredComponents[componentName];
     if (!ref) {
         // TODO: Public doc page with more info about this message
         console.warn(`
@@ -48,9 +31,9 @@ export const getComponent = ({ block, context, }) => {
         return ref;
     }
 };
-export const getRepeatItemData = ({ block, context, }) => {
+export const getRepeatItemData = ({ block, context }) => {
     /**
-     * we don't use `state.useBlock` here because the processing done within its logic includes evaluating the block's bindings,
+     * 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;
@@ -62,7 +45,7 @@ export const getRepeatItemData = ({ block, context, }) => {
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
-        context: context.context,
+        context: context.context
     });
     if (!Array.isArray(itemsArray)) {
         return undefined;
@@ -77,10 +60,10 @@ export const getRepeatItemData = ({ block, context, }) => {
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
-                [`$${itemNameToUse}Index`]: index,
-            },
+                [`$${itemNameToUse}Index`]: index
+            }
         },
-        block: blockWithoutRepeat,
+        block: blockWithoutRepeat
     }));
     return repeatArray;
 };

package/package/components/block/block.svelte

@@ -0,0 +1,135 @@
+<script context="module"></script>
+
+<script>import { writable } from "svelte/store";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import "../../functions/get-block-properties.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./components/block-styles.svelte";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./block.helpers.js";
+import RepeatedBlock from "./components/repeated-block.svelte";
+import "../../functions/extract-text-styles.js";
+import ComponentRef from "./components/component-ref/component-ref.svelte";
+import BlockWrapper from "./components/block-wrapper.svelte";
+export let block;
+export let context;
+export let registeredComponents;
+$: blockComponent = () => {
+    return getComponent({
+        block: block,
+        context: $context,
+        registeredComponents: registeredComponents,
+    });
+};
+$: repeatItem = () => {
+    return getRepeatItemData({
+        block: block,
+        context: $context,
+    });
+};
+$: processedBlock = () => {
+    return repeatItem()
+        ? block
+        : getProcessedBlock({
+            block: block,
+            localState: $context.localState,
+            rootState: $context.rootState,
+            rootSetState: $context.rootSetState,
+            context: $context.context,
+            shouldEvaluateBindings: true,
+        });
+};
+$: Tag = () => {
+    return block.tagName || "div";
+};
+$: canShowBlock = () => {
+    if ("hide" in processedBlock()) {
+        return !processedBlock().hide;
+    }
+    if ("show" in processedBlock()) {
+        return processedBlock().show;
+    }
+    return true;
+};
+$: childrenWithoutParentComponent = () => {
+    /**
+     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+     * we render them outside of `componentRef`.
+     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+     * blocks, and the children will be repeated within those blocks.
+     */
+    const shouldRenderChildrenOutsideRef = !blockComponent?.()?.component && !repeatItem();
+    return shouldRenderChildrenOutsideRef
+        ? processedBlock().children ?? []
+        : [];
+};
+$: componentRefProps = () => {
+    return {
+        blockChildren: processedBlock().children ?? [],
+        componentRef: blockComponent?.()?.component,
+        componentOptions: {
+            ...getBlockComponentOptions(processedBlock()),
+            builderContext: context,
+            ...(blockComponent?.()?.name === "Symbol" ||
+                blockComponent?.()?.name === "Columns"
+                ? {
+                    builderComponents: registeredComponents,
+                }
+                : {}),
+        },
+        context: childrenContext,
+        registeredComponents: registeredComponents,
+        builderBlock: processedBlock(),
+        includeBlockProps: blockComponent?.()?.noWrap === true,
+        isInteractive: !blockComponent?.()?.isRSC,
+    };
+};
+let childrenContext = writable($context);
+</script>
+
+{#if canShowBlock()}
+  {#if !blockComponent?.()?.noWrap}
+    {#if isEmptyHtmlElement(Tag())}
+      <BlockWrapper
+        Wrapper={Tag()}
+        block={processedBlock()}
+        {context}
+        hasChildren={false}
+      />
+    {/if}
+
+    {#if !isEmptyHtmlElement(Tag()) && repeatItem()}
+      {#each repeatItem() as data, index (index)}
+        <RepeatedBlock
+          repeatContext={data.context}
+          block={data.block}
+          {registeredComponents}
+        />
+      {/each}
+    {/if}
+
+    {#if !isEmptyHtmlElement(Tag()) && !repeatItem()}
+      <BlockWrapper
+        Wrapper={Tag()}
+        block={processedBlock()}
+        {context}
+        hasChildren={true}
+      >
+        <ComponentRef {...componentRefProps()} />
+
+        {#each childrenWithoutParentComponent() as child ("block-" + child.id)}
+          <svelte:self
+            block={child}
+            context={childrenContext}
+            {registeredComponents}
+          />
+        {/each}
+
+        {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
+          <BlockStyles block={child} context={$childrenContext} />
+        {/each}
+      </BlockWrapper>
+    {/if}
+  {:else}
+    <ComponentRef {...componentRefProps()} />
+  {/if}
+{/if}

package/package/components/block/block.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+export type BlockProps = {
+    block: BuilderBlock;
+    context: Writable<BuilderContextInterface>;
+    registeredComponents: RegisteredComponents;
+};
+import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        block: BlockProps["block"];
+        context: BlockProps["context"];
+        registeredComponents: BlockProps["registeredComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BlockProps = typeof __propDef.props;
+export type BlockEvents = typeof __propDef.events;
+export type BlockSlots = typeof __propDef.slots;
+export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
+}
+export {};