@builder.io/sdk-svelte 0.1.2 → 0.1.3-0

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

@@ -8,7 +8,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -18,16 +17,12 @@
     });
     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);
@@ -50,4 +45,4 @@
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   {text}
-</button>
+</button>

package/src/blocks/symbol/symbol.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate, getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import RenderContent from "../../components/render-content/render-content.svelte";
   import BuilderContext from "../../context/builder.context.js";
@@ -34,7 +34,6 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -44,16 +43,12 @@
     });
     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);
@@ -106,7 +101,9 @@
       symbolToUse &&
       !symbolToUse.content &&
       !fetchedContent &&
-      symbolToUse.model
+      symbolToUse.model &&
+      // This is a hack, we should not need to check for this, but it is needed for Svelte.
+      builderContext?.apiKey
     ) {
       getContent({
         model: symbolToUse.model,
@@ -142,4 +139,4 @@
     model={symbol?.model}
     content={contentToUse()}
   />
-</div>
+</div>

package/src/blocks/text/text.svelte

@@ -8,4 +8,4 @@
   export let text: TextProps["text"];
 </script>
 
-<span class="builder-text">{@html text}</span>
+<span class="builder-text">{@html text}</span>

package/src/blocks/textarea/textarea.svelte

@@ -11,7 +11,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -21,16 +20,12 @@
     });
     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);
@@ -57,4 +52,4 @@
   {value}
   {defaultValue}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>

package/src/blocks/video/video.svelte

@@ -29,7 +29,6 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
   const filterAttrs = (attrs, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
@@ -39,16 +38,12 @@
     });
     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);
@@ -134,4 +129,4 @@
   src={video || "no-src"}
   poster={posterImage}
   use:setAttrs={filterAttrs(spreadProps(), isEvent)}
-/>
+/>

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

@@ -72,4 +72,4 @@
 
 {#if TARGET !== "reactNative" && css()}
   <RenderInlinedStyles styles={css()} />
-{/if}
+{/if}

package/src/components/render-block/render-block.helpers.ts

@@ -1,3 +1,9 @@
+import type { BuilderContextInterface } from '../../context/types';
+import { evaluate } from '../../functions/evaluate';
+import { getProcessedBlock } from '../../functions/get-processed-block';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { RepeatData } from './types';
+
 /**
  * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
  */
@@ -25,3 +31,82 @@ export const isEmptyHtmlElement = (tagName: unknown) => {
     EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase())
   );
 };
+
+export const getComponent = ({
+  block,
+  context,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) => {
+  const componentName = getProcessedBlock({
+    block: block,
+    state: context.state,
+    context: context.context,
+    shouldEvaluateBindings: false,
+  }).component?.name;
+
+  if (!componentName) {
+    return null;
+  }
+
+  const ref = context.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,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}): RepeatData[] | undefined => {
+  /**
+   * we don't use `state.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 itemsArray = evaluate({
+    code: repeat.collection,
+    state: context.state,
+    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<RepeatData>((item, index) => ({
+    context: {
+      ...context,
+      state: {
+        ...context.state,
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index,
+      },
+    },
+    block: blockWithoutRepeat,
+  }));
+
+  return repeatArray;
+};

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

@@ -1,17 +1,10 @@
 <script context="module" lang="ts">
-  import type {
-    BuilderContextInterface,
-    RegisteredComponent,
-  } from "../../context/types.js";
+  import type { BuilderContextInterface } from "../../context/types.js";
 
   import type { BuilderBlock } from "../../types/builder-block.js";
 
-  import type { Nullable } from "../../types/typescript.js";
-
   import type { RenderComponentProps } from "./render-component";
 
-  import type { RepeatData } from "./types.js";
-
   export type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
@@ -24,25 +17,24 @@
   import { getBlockProperties } from "../../functions/get-block-properties.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 {
+    getComponent,
+    getRepeatItemData,
+    isEmptyHtmlElement,
+  } from "./render-block.helpers.js";
   import RenderRepeatedBlock from "./render-repeated-block.svelte";
   import { TARGET } from "../../constants/target.js";
   import { extractTextStyles } from "../../functions/extract-text-styles.js";
-  import RenderComponentWithContext from "./render-component-with-context.svelte";
   import RenderComponent from "./render-component.svelte";
   import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 
   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);
@@ -58,32 +50,11 @@
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
-  $: component = () => {
-    const componentName = getProcessedBlock({
-      block: block,
-      state: context.state,
-      context: context.context,
-      shouldEvaluateBindings: false,
-    }).component?.name;
-    if (!componentName) {
-      return null;
-    }
-    const ref = context.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;
-    }
-  };
   $: tag = () => {
     return getBlockTag(useBlock());
   };
   $: useBlock = () => {
-    return repeatItemData()
+    return repeatItemData
       ? block
       : getProcessedBlock({
           block: block,
@@ -114,20 +85,17 @@
         : {}),
     };
   };
-  $: shouldWrap = () => {
-    return !component?.()?.noWrap;
-  };
   $: renderComponentProps = () => {
     return {
-      blockChildren: useChildren(),
-      componentRef: component?.()?.component,
+      blockChildren: useBlock().children ?? [],
+      componentRef: component?.component,
       componentOptions: {
         ...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()
+        ...(!component?.noWrap
           ? {}
           : {
               attributes: {
@@ -140,13 +108,6 @@
       context: childrenContext(),
     };
   };
-  $: useChildren = () => {
-    // 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,
@@ -155,94 +116,56 @@
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? useChildren() : [];
-  };
-  $: 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 itemsArray = evaluate({
-      code: repeat.collection,
-      state: context.state,
-      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,
-        state: {
-          ...context.state,
-          $index: index,
-          $item: item,
-          [itemNameToUse]: item,
-          [`$${itemNameToUse}Index`]: index,
-        },
-      },
-      block: blockWithoutRepeat,
-    }));
-    return repeatArray;
-  };
-  $: inheritedTextStyles = () => {
-    if (TARGET !== "reactNative") {
-      return {};
-    }
-    const styles = getReactNativeBlockStyles({
-      block: useBlock(),
-      context: context,
-      blockStyles: attributes().style,
-    });
-    return extractTextStyles(styles);
+      !component?.component && !repeatItemData;
+    return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   };
   $: childrenContext = () => {
+    const getInheritedTextStyles = () => {
+      if (TARGET !== "reactNative") {
+        return {};
+      }
+      return extractTextStyles(
+        getReactNativeBlockStyles({
+          block: useBlock(),
+          context: context,
+          blockStyles: attributes().style,
+        })
+      );
+    };
     return {
       apiKey: context.apiKey,
       state: context.state,
       content: context.content,
       context: context.context,
       registeredComponents: context.registeredComponents,
-      inheritedStyles: inheritedTextStyles(),
+      inheritedStyles: getInheritedTextStyles(),
     };
   };
-  $: renderComponentTag = () => {
-    if (TARGET === "reactNative") {
-      return RenderComponentWithContext;
-    } else if (TARGET === "vue3") {
-      // vue3 expects a string for the component tag
-      return "RenderComponent";
-    } else {
-      return RenderComponent;
-    }
-  };
+
+  let component = getComponent({
+    block: block,
+    context: context,
+  });
+  let repeatItemData = getRepeatItemData({
+    block: block,
+    context: context,
+  });
 </script>
 
-{#if shouldWrap()}
+{#if !component?.noWrap}
   {#if isEmptyHtmlElement(tag())}
     <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
   {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
-    {#each repeatItemData() as data, index (index)}
+  {#if !isEmptyHtmlElement(tag()) && repeatItemData}
+    {#each repeatItemData as data, index (index)}
       <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
     {/each}
   {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
+  {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
     <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
-      <svelte:component
-        this={renderComponentTag()}
-        {...renderComponentProps()}
-      />
+      <RenderComponent {...renderComponentProps()} />
 
       {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
         <svelte:self block={child} context={childrenContext()} />
@@ -254,5 +177,5 @@
     </svelte:element>
   {/if}
 {:else}
-  <svelte:component this={renderComponentTag()} {...renderComponentProps()} />
-{/if}
+  <RenderComponent {...renderComponentProps()} />
+{/if}

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

@@ -34,4 +34,4 @@
       <BlockStyles block={child} {context} />
     {/each}
   </svelte:component>
-{/if}
+{/if}

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

@@ -20,7 +20,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { setContext } from "svelte";
 
   import BuilderContext from "../../context/builder.context.js";
   import RenderBlock from "./render-block.svelte";
@@ -29,25 +29,13 @@
   export let repeatContext: Props["repeatContext"];
 
   setContext(BuilderContext.key, {
-    get content() {
-      return repeatContext.content;
-    },
-    get state() {
-      return repeatContext.state;
-    },
-    get context() {
-      return repeatContext.context;
-    },
-    get apiKey() {
-      return repeatContext.apiKey;
-    },
-    get registeredComponents() {
-      return repeatContext.registeredComponents;
-    },
-    get inheritedStyles() {
-      return repeatContext.inheritedStyles;
-    },
+    content: repeatContext.content,
+    state: repeatContext.state,
+    context: repeatContext.context,
+    apiKey: repeatContext.apiKey,
+    registeredComponents: repeatContext.registeredComponents,
+    inheritedStyles: repeatContext.inheritedStyles,
   });
 </script>
 
-<RenderBlock {block} context={repeatContext} />
+<RenderBlock {block} context={repeatContext} />

package/src/components/render-blocks.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import BuilderContext from "../context/builder.context.js";
   import { isEditing } from "../functions/is-editing.js";
@@ -101,4 +101,4 @@
     flex-direction: column;
     align-items: stretch;
   }
-</style>
+</style>

package/src/components/render-content/builder-editing.svelte

@@ -1,4 +1,4 @@
 <script lang="ts">
 </script>
 
-<div />
+<div />

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

@@ -62,11 +62,13 @@
   }
   function getFontCss({ customFonts }) {
     // TODO: flag for this
-    // if (!builder.allowCustomFonts) {
+    // if (!this.builder.allowCustomFonts) {
     //   return '';
     // }
     // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+    return (
+      customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
+    );
   }
   $: injectedStyles = () => {
     return `
@@ -77,4 +79,4 @@ ${getFontCss({
   };
 </script>
 
-<RenderInlinedStyles styles={injectedStyles()} />
+<RenderInlinedStyles styles={injectedStyles()} />