@builder.io/sdk-svelte 0.5.9 → 0.6.0

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

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

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

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

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

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

package/lib/node/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/node/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/node/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/node/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;
+};

package/lib/node/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/lib/node/components/block/components/block-styles.svelte

@@ -0,0 +1,66 @@
+<script context="module"></script>
+
+<script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes.js";
+import { TARGET } from "../../../constants/target.js";
+import { getProcessedBlock } from "../../../functions/get-processed-block.js";
+import { createCssClass } from "../../../helpers/css.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import InlinedStyles from "../../inlined-styles.svelte";
+export let block;
+export let context;
+$: canShowBlock = () => {
+    // only render styles for blocks that are visible
+    if (checkIsDefined(processedBlock.hide)) {
+        return !processedBlock.hide;
+    }
+    if (checkIsDefined(processedBlock.show)) {
+        return processedBlock.show;
+    }
+    return true;
+};
+$: css = () => {
+    const styles = processedBlock.responsiveStyles;
+    const content = context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const className = processedBlock.id;
+    if (!className) {
+        return "";
+    }
+    const largeStylesClass = largeStyles
+        ? createCssClass({
+            className,
+            styles: largeStyles,
+        })
+        : "";
+    const mediumStylesClass = mediumStyles
+        ? createCssClass({
+            className,
+            styles: mediumStyles,
+            mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints),
+        })
+        : "";
+    const smallStylesClass = smallStyles
+        ? createCssClass({
+            className,
+            styles: smallStyles,
+            mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
+        })
+        : "";
+    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+};
+let processedBlock = getProcessedBlock({
+    block: block,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
+    context: context.context,
+    shouldEvaluateBindings: true,
+});
+</script>
+
+{#if TARGET !== "reactNative" && css() && canShowBlock()}
+  <InlinedStyles styles={css()} />
+{/if}

package/lib/node/components/block/components/block-wrapper.svelte

@@ -0,0 +1,53 @@
+<script context="module">/**
+ * This component renders a block's wrapper HTML element (from the block's `tagName` property).
+ * It reuses the exact same logic as the `InteractiveElement` component, but we need to have 2 separate components for
+ * Svelte's sake, as it needs to know at compile-time whether to use:
+ *  - `<svelte:element>` (for HTML element) or
+ *  - `<svelte:component>` (for custom components)
+ */
+</script>
+
+<script>import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+import { setAttrs } from "../../../blocks/helpers.js";
+export let Wrapper;
+export let block;
+export let context;
+export let hasChildren;
+</script>
+
+{#if hasChildren}
+  <svelte:element
+    this={Wrapper}
+    {...getBlockProperties({
+      block: block,
+      context: $context,
+    })}
+    use:setAttrs={getBlockActions({
+      block: block,
+      rootState: $context.rootState,
+      rootSetState: $context.rootSetState,
+      localState: $context.localState,
+      context: $context.context,
+      stripPrefix: true,
+    })}
+  >
+    <slot />
+  </svelte:element>
+{:else}
+  <svelte:element
+    this={Wrapper}
+    {...getBlockProperties({
+      block: block,
+      context: $context,
+    })}
+    use:setAttrs={getBlockActions({
+      block: block,
+      rootState: $context.rootState,
+      rootSetState: $context.rootSetState,
+      localState: $context.localState,
+      context: $context.context,
+      stripPrefix: true,
+    })}
+  />
+{/if}