@builder.io/sdk-svelte 0.0.1-9 → 0.0.1

package/package/components/render-block/render-block.lite.tsx

@@ -0,0 +1,216 @@
+<script context="module" lang="ts">
+  export type RenderBlockProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+  }; // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+</script>
+
+<script lang="ts">
+  import {
+    BuilderContextInterface,
+    RegisteredComponent,
+  } from "../../context/types.js";
+  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 { BuilderBlock } from "../../types/builder-block.js";
+  import { Nullable } from "../../types/typescript.js";
+  import { evaluate } from "../../functions/evaluate.js";
+  import BlockStyles from "./block-styles.svelte";
+  import { isEmptyHtmlElement } from "./render-block.helpers.js";
+  import RenderComponent, {
+    RenderComponentProps,
+  } from "./render-component.svelte";
+  import { RepeatData } from "./types.js";
+  import RenderRepeatedBlock from "./render-repeated-block.svelte";
+
+  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;
+    }
+  };
+
+  $: 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: context.state,
+          context: context.context,
+          shouldEvaluateBindings: true,
+        });
+  };
+
+  $: attributes = () => {
+    return {
+      ...getBlockProperties(useBlock()),
+      ...getBlockActions({
+        block: useBlock(),
+        state: context.state,
+        context: context.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(),
+      context: context,
+    };
+  };
+
+  $: 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 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;
+  };
+</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}
+      {/if}
+
+      {#if !repeatItemData()}
+        <RenderComponent {...renderComponentProps()} />
+      {/if}
+
+      {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
+        <svelte:self block={child} {context} />
+      {/each}
+
+      {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
+        <BlockStyles block={child} {context} />
+      {/each}
+    </svelte:element>
+  {:else}
+    <svelte:element this={tagName()} {...attributes()} />
+  {/if}
+{:else}
+  <RenderComponent {...renderComponentProps()} {context} />
+{/if}

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

@@ -0,0 +1,185 @@
+<script context="module"></script>
+
+<script>import "../../context/types.js";
+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 "../../types/builder-block.js";
+import "../../types/typescript.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 "./types.js";
+import RenderRepeatedBlock from "./render-repeated-block.svelte";
+export let block;
+export let 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;
+    }
+};
+$: 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: context.state,
+            context: context.context,
+            shouldEvaluateBindings: true,
+        });
+};
+$: attributes = () => {
+    return {
+        ...getBlockProperties(useBlock()),
+        ...getBlockActions({
+            block: useBlock(),
+            state: context.state,
+            context: context.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(),
+        context: context,
+    };
+};
+$: 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 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;
+};
+</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}
+      {/if}
+
+      {#if !repeatItemData()}
+        <RenderComponent {...renderComponentProps()} />
+      {/if}
+
+      {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
+        <svelte:self block={child} {context} />
+      {/each}
+
+      {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
+        <BlockStyles block={child} {context} />
+      {/each}
+    </svelte:element>
+  {:else}
+    <svelte:element this={tagName()} {...attributes()} />
+  {/if}
+{:else}
+  <RenderComponent {...renderComponentProps()} {context} />
+{/if}

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type RenderBlockProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+};
+import { BuilderContextInterface } from "../../context/types.js";
+import { BuilderBlock } from "../../types/builder-block.js";
+declare const __propDef: {
+    props: {
+        block: RenderBlockProps["block"];
+        context: RenderBlockProps["context"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderBlockProps = typeof __propDef.props;
+export declare type RenderBlockEvents = typeof __propDef.events;
+export declare type RenderBlockSlots = typeof __propDef.slots;
+export default class RenderBlock extends SvelteComponentTyped<RenderBlockProps, RenderBlockEvents, RenderBlockSlots> {
+}
+export {};

package/package/components/render-block/render-component.lite.tsx

@@ -0,0 +1,33 @@
+<script context="module" lang="ts">
+  export interface RenderComponentProps {
+    componentRef: any;
+    componentOptions: any;
+    blockChildren: BuilderBlock[];
+    context: BuilderContextInterface;
+  } // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+</script>
+
+<script lang="ts">
+  import { BuilderBlock } from "../../types/builder-block.js";
+  import BlockStyles from "./block-styles.svelte";
+  import RenderBlock from "./render-block.svelte";
+  import { BuilderContextInterface } from "../../context/types.js";
+  import { markPropsMutable } from "../../functions/mark-mutable.js";
+
+  export let componentRef: RenderComponentProps["componentRef"];
+  export let componentOptions: RenderComponentProps["componentOptions"];
+  export let blockChildren: RenderComponentProps["blockChildren"];
+  export let context: RenderComponentProps["context"];
+</script>
+
+{#if componentRef}
+  <svelte:component this={componentRef} {...markPropsMutable(componentOptions)}>
+    {#each blockChildren as child ("render-block-" + child.id)}
+      <RenderBlock block={child} {context} />
+    {/each}
+
+    {#each blockChildren as child ("block-style-" + child.id)}
+      <BlockStyles block={child} {context} />
+    {/each}
+  </svelte:component>
+{/if}

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

@@ -0,0 +1,24 @@
+<script context="module"></script>
+
+<script>import "../../types/builder-block.js";
+import BlockStyles from "./block-styles.svelte";
+import RenderBlock from "./render-block.svelte";
+import "../../context/types.js";
+import { markPropsMutable } from "../../functions/mark-mutable.js";
+export let componentRef;
+export let componentOptions;
+export let blockChildren;
+export let context;
+</script>
+
+{#if componentRef}
+  <svelte:component this={componentRef} {...markPropsMutable(componentOptions)}>
+    {#each blockChildren as child ("render-block-" + child.id)}
+      <RenderBlock block={child} {context} />
+    {/each}
+
+    {#each blockChildren as child ("block-style-" + child.id)}
+      <BlockStyles block={child} {context} />
+    {/each}
+  </svelte:component>
+{/if}

package/package/components/render-block/render-component.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+export interface RenderComponentProps {
+    componentRef: any;
+    componentOptions: any;
+    blockChildren: BuilderBlock[];
+    context: BuilderContextInterface;
+}
+import { BuilderBlock } from "../../types/builder-block.js";
+import { BuilderContextInterface } from "../../context/types.js";
+declare const __propDef: {
+    props: {
+        componentRef: RenderComponentProps["componentRef"];
+        componentOptions: RenderComponentProps["componentOptions"];
+        blockChildren: RenderComponentProps["blockChildren"];
+        context: RenderComponentProps["context"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderComponentProps = typeof __propDef.props;
+export declare type RenderComponentEvents = typeof __propDef.events;
+export declare type RenderComponentSlots = typeof __propDef.slots;
+export default class RenderComponent extends SvelteComponentTyped<RenderComponentProps, RenderComponentEvents, RenderComponentSlots> {
+}
+export {};

package/package/components/render-block/render-repeated-block.lite.tsx

@@ -0,0 +1,49 @@
+<script context="module" lang="ts">
+  import type { BuilderContextInterface } from "../../context/types.js";
+
+  import type { BuilderBlock } from "../../types/builder-block";
+
+  type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+  };
+  /**
+   * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
+   *
+   * ```vue
+   * <template>
+   *  <slot></slot>
+   * </template>
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import BuilderContext from "../../context/builder.context.js";
+  import RenderBlock from "./render-block.svelte";
+
+  export let block: Props["block"];
+  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;
+    },
+  });
+</script>
+
+<RenderBlock {block} context={repeatContext} />

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

@@ -0,0 +1,36 @@
+<script context="module">/**
+ * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
+ *
+ * ```vue
+ *
+ *  <slot></slot>
+ *
+ * ```
+ */
+</script>
+
+<script>import { setContext } from "svelte";
+import BuilderContext from "../../context/builder.context.js";
+import RenderBlock from "./render-block.svelte";
+export let block;
+export let 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;
+    },
+});
+</script>
+
+<RenderBlock {block} context={repeatContext} />

package/package/components/render-block/render-repeated-block.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block";
+declare type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+};
+declare const __propDef: {
+    props: {
+        block: Props["block"];
+        repeatContext: Props["repeatContext"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderRepeatedBlockProps = typeof __propDef.props;
+export declare type RenderRepeatedBlockEvents = typeof __propDef.events;
+export declare type RenderRepeatedBlockSlots = typeof __propDef.slots;
+export default class RenderRepeatedBlock extends SvelteComponentTyped<RenderRepeatedBlockProps, RenderRepeatedBlockEvents, RenderRepeatedBlockSlots> {
+}
+export {};

package/package/components/render-block/types.d.ts

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

package/package/components/render-block/types.js

@@ -0,0 +1,2 @@
+import '../../context/types.js';
+import '../../types/builder-block.js';