@builder.io/sdk-svelte 0.0.1-19 → 0.0.1-21

package/src/blocks/textarea/textarea.svelte

@@ -1,33 +1,9 @@
 <script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
   export let attributes;
-export let placeholder;
-export let name;
-export let value;
-export let defaultValue;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let placeholder;
+  export let name;
+  export let value;
+  export let defaultValue;
 </script>
 
-<textarea {...attributes} placeholder={placeholder}  name={name}  value={value}  defaultValue={defaultValue} ></textarea>
+<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />

package/src/blocks/video/video.svelte

@@ -1,46 +1,38 @@
 <script>
-    
-    
-    
-    
-  
-  
-  
+  export let attributes;
+  export let fit;
+  export let position;
+  export let video;
+  export let posterImage;
+  export let autoPlay;
+  export let muted;
+  export let controls;
+  export let loop;
 
-    
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
 
-    
-    export let attributes;
-export let fit;
-export let position;
-export let video;
-export let posterImage;
-export let autoPlay;
-export let muted;
-export let controls;
-export let loop;
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <video {...attributes} preload="none"  style={{
-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
-}}  key={video || 'no-src'}  poster={posterImage}  autoPlay={autoPlay}  muted={muted}  controls={controls}  loop={loop} ></video>
+<video
+  {...attributes}
+  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,
+  }}
+  preload="none"
+  key={video || "no-src"}
+  poster={posterImage}
+  {autoPlay}
+  {muted}
+  {controls}
+  {loop}
+/>

package/src/components/render-block/block-styles.svelte

@@ -1,65 +1,55 @@
 <script>
-    
-    
-    
-    
-  import { TARGET } from '../../constants/target.js';
-import BuilderContext from '../../context/builder.context';
-import { getProcessedBlock } from '../../functions/get-processed-block.js';
-import RenderInlinedStyles from '../render-inlined-styles.svelte';
-import { convertStyleMaptoCSS } from '../../helpers/css.js';
-import { getMaxWidthQueryForSize } from '../../constants/device-sizes.js';
-  
-  
-
-    import { getContext, setContext } from "svelte";
-
-    
-    export let block;
-    
-    
-    $: useBlock = () => {
-return getProcessedBlock({
-  block: block,
-  state: builderContext.state,
-  context: builderContext.context
-});
-};
-
-$: css = () => {
-const styles = useBlock().responsiveStyles;
-const largeStyles = styles?.large;
-const mediumStyles = styles?.medium;
-const smallStyles = styles?.small;
-return `
-      ${largeStyles ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}` : ''}
-      ${mediumStyles ? `${getMaxWidthQueryForSize('medium')} {
+  import { TARGET } from "../../constants/target.js";
+  import BuilderContext from "../../context/builder.context";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import RenderInlinedStyles from "../render-inlined-styles.svelte";
+  import { convertStyleMaptoCSS } from "../../helpers/css.js";
+  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+
+  import { getContext, setContext } from "svelte";
+
+  export let block;
+
+  $: useBlock = () => {
+    return getProcessedBlock({
+      block: block,
+      state: builderContext.state,
+      context: builderContext.context,
+      evaluateBindings: true,
+    });
+  };
+
+  $: css = () => {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    return `
+      ${
+        largeStyles
+          ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}`
+          : ""
+      }
+      ${
+        mediumStyles
+          ? `${getMaxWidthQueryForSize("medium")} {
             .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
-          }` : ''}
-      ${smallStyles ? `${getMaxWidthQueryForSize('small')} {
+          }`
+          : ""
+      }
+      ${
+        smallStyles
+          ? `${getMaxWidthQueryForSize("small")} {
             .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
-          }` : ''}
+          }`
+          : ""
+      }
     }`;
-};
-
-    let builderContext = getContext(BuilderContext.key);
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  
-{#if TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte' }
-
-    
-<RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>
-
-  
+  };
 
+  let builderContext = getContext(BuilderContext.key);
+</script>
 
-{/if}
+{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
+  <RenderInlinedStyles styles={css()} />
+{/if}

package/src/components/render-block/render-block.svelte

@@ -1,172 +1,202 @@
 <script>
-    
-    
-    
-    
-  import BuilderContext from '../../context/builder.context';
-import { getBlockActions } from '../../functions/get-block-actions.js';
-import { getBlockComponentOptions } from '../../functions/get-block-component-options.js';
-import { getBlockProperties } from '../../functions/get-block-properties.js';
-import { getBlockStyles } from '../../functions/get-block-styles.js';
-import { getBlockTag } from '../../functions/get-block-tag.js';
-import { getProcessedBlock } from '../../functions/get-processed-block.js';
-import BlockStyles from './block-styles.svelte';
-import { isEmptyHtmlElement } from './render-block.helpers.js';
-import RenderComponent from './render-component.svelte';
-  
-  
-
-    import { getContext, setContext } from "svelte";
-
-    
-    export let block;
-    
-    
-    $: component = () => {
-const componentName = useBlock().component?.name;
-
-if (!componentName) {
-  return null;
-}
-
-const ref = builderContext.registeredComponents[componentName];
-
-if (!ref) {
-  // TODO: Public doc page with more info about this message
-  console.warn(`
+  import BuilderContext from "../../context/builder.context";
+  import { getBlockActions } from "../../functions/get-block-actions.js";
+  import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+  import { getBlockProperties } from "../../functions/get-block-properties.js";
+  import { getBlockStyles } from "../../functions/get-block-styles.js";
+  import { getBlockTag } from "../../functions/get-block-tag.js";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import { evaluate } from "../../functions/evaluate.js";
+  import BlockStyles from "./block-styles.svelte";
+  import { isEmptyHtmlElement } from "./render-block.helpers.js";
+  import RenderComponent from "./render-component.svelte";
+  import RenderRepeatedBlock from "./render-repeated-block.svelte";
+
+  import { getContext, setContext } from "svelte";
+
+  export let block;
+
+  $: component = () => {
+    const componentName = getProcessedBlock({
+      block: block,
+      state: builderContext.state,
+      context: builderContext.context,
+      evaluateBindings: false,
+    }).component?.name;
+
+    if (!componentName) {
+      return null;
+    }
+
+    const ref = builderContext.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;
-}
-};
-
-$: componentInfo = () => {
-if (component()) {
-  const {
-    component: _,
-    ...info
-  } = component();
-  return info;
-} else {
-  return undefined;
-}
-};
-
-$: componentRef = () => {
-return component?.()?.component;
-};
-
-$: tagName = () => {
-return getBlockTag(useBlock());
-};
-
-$: useBlock = () => {
-return getProcessedBlock({
-  block: block,
-  state: builderContext.state,
-  context: builderContext.context
-});
-};
-
-$: attributes = () => {
-return { ...getBlockProperties(useBlock()),
-  ...getBlockActions({
-    block: useBlock(),
-    state: builderContext.state,
-    context: builderContext.context
-  }),
-  style: getBlockStyles(useBlock())
-};
-};
-
-$: shouldWrap = () => {
-return !componentInfo?.()?.noWrap;
-};
-
-$: componentOptions = () => {
-return { ...getBlockComponentOptions(useBlock()),
-
-  /**
-   * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-   * they are provided to the component itself directly.
-   */
-  ...(shouldWrap() ? {} : {
-    attributes: attributes()
-  })
-};
-};
-
-$: children = () => {
-// TO-DO: When should `canHaveChildren` dictate rendering?
-// This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-// but still receive and need to render children.
-// return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
-return useBlock().children ?? [];
-};
-
-$: noCompRefChildren = () => {
-/**
- * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
- * we render them outside of `componentRef`
- */
-return componentRef() ? [] : children();
-};
-
-    let builderContext = getContext(BuilderContext.key);
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  
-{#if shouldWrap() }
-
-    
-
-{#if !isEmptyHtmlElement(tagName()) }
-
-      
-<svelte:element {...attributes()} this={tagName()} >
-        
-<RenderComponent  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponent>
-
-        
-
-        
-
-{#each noCompRefChildren() as child, index }
-<svelte:self  key={'render-block-' + child.id}  block={child} ></svelte:self>
-{/each}
-
-
-        
-
-{#each noCompRefChildren() as child, index }
-<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
-{/each}
-
-
-      </svelte:element>
-
-    
-
-
+      return undefined;
+    } else {
+      return ref;
+    }
+  };
+
+  $: componentInfo = () => {
+    if (component()) {
+      const { component: _, ...info } = component();
+      return info;
+    } else {
+      return undefined;
+    }
+  };
+
+  $: componentRef = () => {
+    return component?.()?.component;
+  };
+
+  $: tagName = () => {
+    return getBlockTag(useBlock());
+  };
+
+  $: useBlock = () => {
+    return repeatItemData()
+      ? block
+      : getProcessedBlock({
+          block: block,
+          state: builderContext.state,
+          context: builderContext.context,
+          evaluateBindings: true,
+        });
+  };
+
+  $: attributes = () => {
+    return {
+      ...getBlockProperties(useBlock()),
+      ...getBlockActions({
+        block: useBlock(),
+        state: builderContext.state,
+        context: builderContext.context,
+      }),
+      style: getBlockStyles(useBlock()),
+    };
+  };
+
+  $: shouldWrap = () => {
+    return !componentInfo?.()?.noWrap;
+  };
+
+  $: componentOptions = () => {
+    return {
+      ...getBlockComponentOptions(useBlock()),
+
+      /**
+       * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+       * they are provided to the component itself directly.
+       */
+      ...(shouldWrap()
+        ? {}
+        : {
+            attributes: attributes(),
+          }),
+    };
+  };
+
+  $: renderComponentProps = () => {
+    return {
+      blockChildren: children(),
+      componentRef: componentRef(),
+      componentOptions: componentOptions(),
+    };
+  };
+
+  $: children = () => {
+    // TO-DO: When should `canHaveChildren` dictate rendering?
+    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+    // but still receive and need to render children.
+    // return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
+    return useBlock().children ?? [];
+  };
+
+  $: 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 = !componentRef() && !repeatItemData();
+    return shouldRenderChildrenOutsideRef ? children() : [];
+  };
+
+  $: repeatItemData = () => {
+    /**
+     * we don't use `useBlock()` 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 { collection, itemName } = repeat;
+    const itemsArray = evaluate({
+      code: collection,
+      state: builderContext.state,
+      context: builderContext.context,
+    });
+
+    if (Array.isArray(itemsArray)) {
+      const collectionName = collection.split(".").pop();
+      const itemNameToUse =
+        itemName || (collectionName ? collectionName + "Item" : "item");
+      const repeatArray = itemsArray.map((item, index) => ({
+        context: {
+          ...builderContext,
+          state: {
+            ...builderContext.state,
+            $index: index,
+            $item: item,
+            [itemNameToUse]: item,
+            [`$${itemNameToUse}Index`]: index,
+          },
+        },
+        block: blockWithoutRepeat,
+      }));
+      return repeatArray;
+    } else {
+      return undefined;
+    }
+  };
+
+  let builderContext = getContext(BuilderContext.key);
+</script>
+
+{#if shouldWrap()}
+  {#if !isEmptyHtmlElement(tagName())}
+    <svelte:element this={tagName()} {...attributes()}>
+      {#if repeatItemData()}
+        {#each repeatItemData() as data, index (index)}
+          <RenderRepeatedBlock
+            repeatContext={data.context}
+            block={data.block}
+          />
+        {/each}
+      {:else}
+        <RenderComponent {...renderComponentProps()} />
+      {/if}
+
+      {#each childrenWithoutParentComponent() as child, undefined ("render-block-" + child.id)}
+        <svelte:self block={child} />
+      {/each}
+
+      {#each childrenWithoutParentComponent() as child, undefined ("block-style-" + child.id)}
+        <BlockStyles block={child} />
+      {/each}
+    </svelte:element>
+  {:else}
+    <svelte:element this={tagName()} {...attributes()} />
+  {/if}
 {:else}
-<svelte:element {...attributes()} this={tagName()} ></svelte:element>
-
+  <RenderComponent {...renderComponentProps()} />
 {/if}
-
-  
-
-
-{:else}
-<RenderComponent  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponent>
-
-{/if}

package/src/components/render-block/render-component.svelte

@@ -1,58 +1,20 @@
 <script>
-  
-  
-  
-  
-import BlockStyles from './block-styles.svelte';
-import RenderBlock from './render-block.svelte';
+  import BlockStyles from "./block-styles.svelte";
+  import RenderBlock from "./render-block.svelte";
 
-
-
-  
-
-  
   export let componentRef;
-export let componentOptions;
-export let blockChildren;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let componentOptions;
+  export let blockChildren;
 </script>
 
+{#if componentRef}
+  <svelte:component this={componentRef} {...componentOptions}>
+    {#each blockChildren as child, undefined ("render-block-" + child.id)}
+      <RenderBlock block={child} />
+    {/each}
 
-{#if componentRef }
-
-  
-<svelte:component {...componentOptions} this={componentRef} >
-    
-
-    
-
-{#each blockChildren as child, index }
-<RenderBlock  key={'render-block-' + child.id}  block={child} ></RenderBlock>
-{/each}
-
-
-    
-
-{#each blockChildren as child, index }
-<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
-{/each}
-
-
+    {#each blockChildren as child, undefined ("block-style-" + child.id)}
+      <BlockStyles block={child} />
+    {/each}
   </svelte:component>
-
-
-
-
-{/if}
+{/if}