@builder.io/sdk-svelte 0.4.5 → 0.5.0

package/src/components/{render-block/render-block.helpers.ts → block/block.helpers.ts}

@@ -1,43 +1,24 @@
-import type { BuilderContextInterface } from '../../context/types';
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
 import { evaluate } from '../../functions/evaluate';
-import { getProcessedBlock } from '../../functions/get-processed-block';
-import type { BuilderBlock } from '../../types/builder-block';
-import type { RepeatData } from './types';
+import { getProcessedBlock } from '../../functions/get-processed-block.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+import type { RepeatData } from './types.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: unknown) => {
-  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,
+  registeredComponents
 }: {
   block: BuilderBlock;
   context: BuilderContextInterface;
+  registeredComponents: RegisteredComponents;
 }) => {
   const componentName = getProcessedBlock({
     block,
@@ -45,15 +26,12 @@ export const getComponent = ({
     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(`
@@ -64,40 +42,36 @@ export const getComponent = ({
     return ref;
   }
 };
-
 export const getRepeatItemData = ({
   block,
-  context,
+  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,
+   * 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;
-
+  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,
+    context: context.context
   });
-
   if (!Array.isArray(itemsArray)) {
     return undefined;
   }
-
   const collectionName = repeat.collection.split('.').pop();
-  const itemNameToUse =
-    repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
-
+  const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
   const repeatArray = itemsArray.map<RepeatData>((item, index) => ({
     context: {
       ...context,
@@ -106,11 +80,10 @@ export const getRepeatItemData = ({
         $index: index,
         $item: item,
         [itemNameToUse]: item,
-        [`$${itemNameToUse}Index`]: index,
-      },
+        [`$${itemNameToUse}Index`]: index
+      }
     },
-    block: blockWithoutRepeat,
+    block: blockWithoutRepeat
   }));
-
   return repeatArray;
-};
+}

package/src/components/block/block.svelte

@@ -0,0 +1,158 @@
+<script context="module" lang="ts">
+  export type BlockProps = {
+    block: BuilderBlock;
+    context: Writable<BuilderContextInterface>;
+    registeredComponents: RegisteredComponents;
+  };
+</script>
+
+<script lang="ts">
+  import { writable } from "svelte/store";
+
+  import type {
+    BuilderContextInterface,
+    RegisteredComponents,
+  } from "../../context/types.js";
+  import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+  import { getBlockProperties } from "../../functions/get-block-properties.js";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import type { BuilderBlock } from "../../types/builder-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 { extractTextStyles } from "../../functions/extract-text-styles.js";
+  import ComponentRef from "./components/component-ref/component-ref.svelte";
+  import type { ComponentProps } from "./components/component-ref/component-ref.helpers.js";
+  import BlockWrapper from "./components/block-wrapper.svelte";
+  import type { Writable } from "svelte/store";
+
+  export let block: BlockProps["block"];
+  export let context: BlockProps["context"];
+  export let registeredComponents: BlockProps["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/src/components/{render-block → block/components}/block-styles.svelte

@@ -9,40 +9,30 @@
   import {
     getMaxWidthQueryForSize,
     getSizesForBreakpoints,
-  } from "../../constants/device-sizes.js";
-  import { TARGET } from "../../constants/target.js";
-  import type { BuilderContextInterface } from "../../context/types.js";
-  import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import { createCssClass } from "../../helpers/css.js";
-  import { checkIsDefined } from "../../helpers/nullable.js";
-  import type { BuilderBlock } from "../../types/builder-block.js";
-  import InlinedStyles from "../inlined-styles.svelte";
+  } from "../../../constants/device-sizes.js";
+  import { TARGET } from "../../../constants/target.js";
+  import type { BuilderContextInterface } from "../../../context/types.js";
+  import { getProcessedBlock } from "../../../functions/get-processed-block.js";
+  import { createCssClass } from "../../../helpers/css.js";
+  import { checkIsDefined } from "../../../helpers/nullable.js";
+  import type { BuilderBlock } from "../../../types/builder-block.js";
+  import InlinedStyles from "../../inlined-styles.svelte";
 
   export let block: BlockStylesProps["block"];
   export let context: BlockStylesProps["context"];
 
-  $: useBlock = () => {
-    return getProcessedBlock({
-      block: block,
-      localState: context.localState,
-      rootState: context.rootState,
-      rootSetState: context.rootSetState,
-      context: context.context,
-      shouldEvaluateBindings: true,
-    });
-  };
   $: canShowBlock = () => {
     // only render styles for blocks that are visible
-    if (checkIsDefined(useBlock().hide)) {
-      return !useBlock().hide;
+    if (checkIsDefined(processedBlock.hide)) {
+      return !processedBlock.hide;
     }
-    if (checkIsDefined(useBlock().show)) {
-      return useBlock().show;
+    if (checkIsDefined(processedBlock.show)) {
+      return processedBlock.show;
     }
     return true;
   };
   $: css = () => {
-    const styles = useBlock().responsiveStyles;
+    const styles = processedBlock.responsiveStyles;
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
@@ -50,7 +40,7 @@
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
-    const className = useBlock().id;
+    const className = processedBlock.id;
     if (!className) {
       return "";
     }
@@ -82,6 +72,15 @@
       : "";
     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()}

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

@@ -0,0 +1,70 @@
+<script context="module" lang="ts">
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
+  type BlockWrapperProps = {
+    Wrapper: string;
+    block: BuilderBlock;
+    context: Writable<BuilderContextInterface>;
+    hasChildren: boolean;
+  };
+
+  /**
+   * 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 lang="ts">
+  import type { PropsWithChildren } from "../../../types/typescript.js";
+  import type { BuilderBlock } from "../../../types/builder-block.js";
+  import type { BuilderContextInterface } from "../../../context/types.js";
+  import { getBlockActions } from "../../../functions/get-block-actions.js";
+  import { getBlockProperties } from "../../../functions/get-block-properties.js";
+  import { setAttrs } from "../../../blocks/helpers.js";
+  import type { Writable } from "svelte/store";
+
+  export let Wrapper: PropsWithChildren<BlockWrapperProps>["Wrapper"];
+  export let block: PropsWithChildren<BlockWrapperProps>["block"];
+  export let context: PropsWithChildren<BlockWrapperProps>["context"];
+  export let hasChildren: PropsWithChildren<BlockWrapperProps>["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}

package/src/components/block/components/component-ref/component-ref.helpers.ts

@@ -0,0 +1,53 @@
+import type { Writable } from "svelte/store";
+import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.js';
+import { getBlockProperties } from '../../../../functions/get-block-properties.js';
+import type { BuilderBlock } from '../../../../types/builder-block.js';
+import type { PropsWithBuilderData } from '../../../../types/builder-props.js';
+import type { InteractiveElementProps } from '../interactive-element.svelte';
+type ComponentOptions = PropsWithBuilderData<{
+  [index: string]: any;
+  attributes?: {
+    [index: string]: any;
+  };
+}>;
+export interface ComponentProps {
+  componentRef: any;
+  componentOptions: ComponentOptions;
+  blockChildren: BuilderBlock[];
+  context: Writable<BuilderContextInterface>;
+  registeredComponents: RegisteredComponents;
+  builderBlock: BuilderBlock;
+  includeBlockProps: boolean;
+  isInteractive: boolean | undefined;
+}
+export const getWrapperProps = ({
+  componentOptions,
+  builderBlock,
+  context,
+  componentRef,
+  includeBlockProps,
+  isInteractive,
+  contextValue
+}: Omit<ComponentProps, 'blockChildren' | 'registeredComponents'> & {
+  contextValue: BuilderContextInterface;
+}) => {
+  const interactiveElementProps: InteractiveElementProps = {
+    Wrapper: componentRef,
+    block: builderBlock,
+    context,
+    wrapperProps: componentOptions
+  };
+  return isInteractive ? interactiveElementProps : {
+    ...componentOptions,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...(includeBlockProps ? {
+      attributes: getBlockProperties({
+        block: builderBlock,
+        context: contextValue
+      })
+    } : {})
+  };
+}

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import BlockStyles from "../block-styles.svelte";
+  import Block from "../../block.svelte";
+  import InteractiveElement from "../interactive-element.svelte";
+  import type { ComponentProps } from "./component-ref.helpers.js";
+  import { getWrapperProps } from "./component-ref.helpers.js";
+
+  export let isInteractive: ComponentProps["isInteractive"];
+  export let componentRef: ComponentProps["componentRef"];
+  export let componentOptions: ComponentProps["componentOptions"];
+  export let builderBlock: ComponentProps["builderBlock"];
+  export let context: ComponentProps["context"];
+  export let includeBlockProps: ComponentProps["includeBlockProps"];
+  export let blockChildren: ComponentProps["blockChildren"];
+  export let registeredComponents: ComponentProps["registeredComponents"];
+
+  let Wrapper = isInteractive ? InteractiveElement : componentRef;
+</script>
+
+{#if componentRef}
+  <svelte:component
+    this={Wrapper}
+    {...getWrapperProps({
+      componentOptions: componentOptions,
+      builderBlock: builderBlock,
+      context: context,
+      componentRef: componentRef,
+      includeBlockProps: includeBlockProps,
+      isInteractive: isInteractive,
+      contextValue: $context,
+    })}
+  >
+    {#each blockChildren as child ("block-" + child.id)}
+      <Block block={child} {context} {registeredComponents} />
+    {/each}
+
+    {#each blockChildren as child ("block-style-" + child.id)}
+      <BlockStyles block={child} context={$context} />
+    {/each}
+  </svelte:component>
+{/if}

package/src/components/block/components/interactive-element.svelte

@@ -0,0 +1,42 @@
+<script context="module" lang="ts">
+  export type InteractiveElementProps = {
+    Wrapper: any;
+    block: BuilderBlock;
+    context: Writable<BuilderContextInterface>;
+    wrapperProps: object;
+  };
+</script>
+
+<script lang="ts">
+  import type { BuilderContextInterface } from "../../../context/types.js";
+  import { getBlockActions } from "../../../functions/get-block-actions.js";
+  import { getBlockProperties } from "../../../functions/get-block-properties.js";
+  import type { BuilderBlock } from "../../../types/builder-block.js";
+  import type { PropsWithChildren } from "../../../types/typescript.js";
+  import type { Writable } from "svelte/store";
+
+  export let Wrapper: PropsWithChildren<InteractiveElementProps>["Wrapper"];
+  export let wrapperProps: PropsWithChildren<InteractiveElementProps>["wrapperProps"];
+  export let block: PropsWithChildren<InteractiveElementProps>["block"];
+  export let context: PropsWithChildren<InteractiveElementProps>["context"];
+</script>
+
+<svelte:component
+  this={Wrapper}
+  {...wrapperProps}
+  attributes={{
+    ...getBlockProperties({
+      block: block,
+      context: $context,
+    }),
+    ...getBlockActions({
+      block: block,
+      rootState: $context.rootState,
+      rootSetState: $context.rootSetState,
+      localState: $context.localState,
+      context: $context.context,
+    }),
+  }}
+>
+  <slot />
+</svelte:component>

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

@@ -0,0 +1,30 @@
+<script context="module" lang="ts">
+  type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+  };
+</script>
+
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  import BuilderContext from "../../../context/builder.context";
+  import type {
+    BuilderContextInterface,
+    RegisteredComponents,
+  } from "../../../context/types.js";
+  import type { BuilderBlock } from "../../../types/builder-block.js";
+  import Block from "../block.svelte";
+
+  export let repeatContext: Props["repeatContext"];
+  export let block: Props["block"];
+  export let registeredComponents: Props["registeredComponents"];
+
+  let store = writable(repeatContext);
+
+  setContext(BuilderContext.key, store);
+</script>
+
+<Block {block} context={store} {registeredComponents} />

package/src/components/{render-block → block}/types.ts

@@ -1,7 +1,6 @@
 import type { BuilderContextInterface } from '../../context/types.js';
 import type { BuilderBlock } from '../../types/builder-block.js';
-
 export interface RepeatData {
   block: BuilderBlock;
   context: BuilderContextInterface;
-}
+}