@builder.io/sdk-svelte 0.4.5 → 0.5.1

package/package/components/{render-block → block/components}/block-styles.svelte

@@ -1,41 +1,31 @@
 <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";
+<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;
-$: 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 || {});
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
-    const className = useBlock().id;
+    const className = processedBlock.id;
     if (!className) {
         return "";
     }
@@ -61,6 +51,14 @@ $: css = () => {
         : "";
     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/package/components/{render-block → block/components}/block-styles.svelte.d.ts

@@ -3,8 +3,8 @@ export type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
 declare const __propDef: {
     props: {
         block: BlockStylesProps["block"];

package/package/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}

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

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ type BlockWrapperProps = {
+    Wrapper: string;
+    block: BuilderBlock;
+    context: Writable<BuilderContextInterface>;
+    hasChildren: boolean;
+};
+import type { PropsWithChildren } from "../../../types/typescript.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        Wrapper: PropsWithChildren<BlockWrapperProps>["Wrapper"];
+        block: PropsWithChildren<BlockWrapperProps>["block"];
+        context: PropsWithChildren<BlockWrapperProps>["context"];
+        hasChildren: PropsWithChildren<BlockWrapperProps>["hasChildren"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BlockWrapperProps = typeof __propDef.props;
+export type BlockWrapperEvents = typeof __propDef.events;
+export type BlockWrapperSlots = typeof __propDef.slots;
+export default class BlockWrapper extends SvelteComponentTyped<BlockWrapperProps, BlockWrapperEvents, BlockWrapperSlots> {
+}
+export {};

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

@@ -0,0 +1,36 @@
+import type { Writable } from "svelte/store";
+import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.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 declare const getWrapperProps: ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }: Omit<ComponentProps, "registeredComponents" | "blockChildren"> & {
+    contextValue: BuilderContextInterface;
+}) => InteractiveElementProps | {
+    attributes?: {
+        'builder-id': string | undefined;
+        style: string | Partial<CSSStyleDeclaration> | undefined;
+        class: string;
+        href: any;
+    } | {
+        [index: string]: any;
+    } | undefined;
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+};
+export {};

package/package/components/block/components/component-ref/component-ref.helpers.js

@@ -0,0 +1,22 @@
+import { getBlockProperties } from '../../../../functions/get-block-properties.js';
+export const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
+    const 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/package/components/block/components/component-ref/component-ref.svelte

@@ -0,0 +1,37 @@
+<script>import BlockStyles from "../block-styles.svelte";
+import Block from "../../block.svelte";
+import InteractiveElement from "../interactive-element.svelte";
+import { getWrapperProps } from "./component-ref.helpers.js";
+export let isInteractive;
+export let componentRef;
+export let componentOptions;
+export let builderBlock;
+export let context;
+export let includeBlockProps;
+export let blockChildren;
+export let 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/package/components/block/components/component-ref/component-ref.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentProps } from "./component-ref.helpers.js";
+declare const __propDef: {
+    props: {
+        isInteractive: ComponentProps["isInteractive"];
+        componentRef: ComponentProps["componentRef"];
+        componentOptions: ComponentProps["componentOptions"];
+        builderBlock: ComponentProps["builderBlock"];
+        context: ComponentProps["context"];
+        includeBlockProps: ComponentProps["includeBlockProps"];
+        blockChildren: ComponentProps["blockChildren"];
+        registeredComponents: ComponentProps["registeredComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentRefProps = typeof __propDef.props;
+export type ComponentRefEvents = typeof __propDef.events;
+export type ComponentRefSlots = typeof __propDef.slots;
+export default class ComponentRef extends SvelteComponentTyped<ComponentRefProps, ComponentRefEvents, ComponentRefSlots> {
+}
+export {};

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

@@ -0,0 +1,29 @@
+<script context="module"></script>
+
+<script>import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+export let Wrapper;
+export let wrapperProps;
+export let block;
+export let 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/package/components/block/components/interactive-element.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+export type InteractiveElementProps = {
+    Wrapper: any;
+    block: BuilderBlock;
+    context: Writable<BuilderContextInterface>;
+    wrapperProps: object;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { PropsWithChildren } from "../../../types/typescript.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        Wrapper: PropsWithChildren<InteractiveElementProps>["Wrapper"];
+        wrapperProps: PropsWithChildren<InteractiveElementProps>["wrapperProps"];
+        block: PropsWithChildren<InteractiveElementProps>["block"];
+        context: PropsWithChildren<InteractiveElementProps>["context"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type InteractiveElementProps = typeof __propDef.props;
+export type InteractiveElementEvents = typeof __propDef.events;
+export type InteractiveElementSlots = typeof __propDef.slots;
+export default class InteractiveElement extends SvelteComponentTyped<InteractiveElementProps, InteractiveElementEvents, InteractiveElementSlots> {
+}
+export {};

package/package/components/{render-block/render-repeated-block.svelte → block/components/repeated-block.svelte}

@@ -2,12 +2,13 @@
 
 <script>import { setContext } from "svelte";
 import { writable } from "svelte/store";
-import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.svelte";
+import BuilderContext from "../../../context/builder.context";
+import Block from "../block.svelte";
 export let repeatContext;
 export let block;
+export let registeredComponents;
 let store = writable(repeatContext);
 setContext(BuilderContext.key, store);
 </script>
 
-<RenderBlock {block} context={store} />
+<Block {block} context={store} {registeredComponents} />

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+};
+import type { BuilderContextInterface, RegisteredComponents } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+declare const __propDef: {
+    props: {
+        repeatContext: Props["repeatContext"];
+        block: Props["block"];
+        registeredComponents: Props["registeredComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RepeatedBlockProps = typeof __propDef.props;
+export type RepeatedBlockEvents = typeof __propDef.events;
+export type RepeatedBlockSlots = typeof __propDef.slots;
+export default class RepeatedBlock extends SvelteComponentTyped<RepeatedBlockProps, RepeatedBlockEvents, RepeatedBlockSlots> {
+}
+export {};

package/package/components/{render-blocks.svelte → blocks/blocks-wrapper.svelte}

@@ -1,10 +1,6 @@
 <script context="module"></script>
 
-<script>import { getContext } from "svelte";
-import BuilderContext from "../context/builder.context.js";
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.svelte";
-import RenderBlock from "./render-block/render-block.svelte";
+<script>import { isEditing } from "../../functions/is-editing.js";
 export let blocks;
 export let parent;
 export let path;
@@ -19,7 +15,6 @@ function mitosis_styling(node, vars) {
         }
     });
 }
-let builderContext = getContext(BuilderContext.key);
 function onClick() {
     if (isEditing() && !blocks?.length) {
         window.parent?.postMessage({
@@ -52,9 +47,7 @@ $: className = () => {
   class={className() + " div"}
   builder-path={path}
   builder-parent-id={parent}
-  dataSet={{
-    class: className(),
-  }}
+  {...{}}
   on:click={(event) => {
     onClick();
   }}
@@ -65,17 +58,7 @@ $: className = () => {
     onClick();
   }}
 >
-  {#if blocks}
-    {#each blocks as block ("render-block-" + block.id)}
-      <RenderBlock {block} context={builderContext} />
-    {/each}
-  {/if}
-
-  {#if blocks}
-    {#each blocks as block ("block-style-" + block.id)}
-      <BlockStyles {block} context={$builderContext} />
-    {/each}
-  {/if}
+  <slot />
 </div>
 
 <style>

package/package/components/blocks/blocks-wrapper.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+export type BlocksWrapperProps = {
+    blocks: BuilderBlock[] | undefined;
+    parent: string | undefined;
+    path: string | undefined;
+    styleProp: Record<string, any> | undefined;
+};
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { PropsWithChildren } from "../../types/typescript.js";
+declare const __propDef: {
+    props: {
+        blocks: PropsWithChildren<BlocksWrapperProps>["blocks"];
+        parent: PropsWithChildren<BlocksWrapperProps>["parent"];
+        path: PropsWithChildren<BlocksWrapperProps>["path"];
+        styleProp: PropsWithChildren<BlocksWrapperProps>["styleProp"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BlocksWrapperProps = typeof __propDef.props;
+export type BlocksWrapperEvents = typeof __propDef.events;
+export type BlocksWrapperSlots = typeof __propDef.slots;
+export default class BlocksWrapper extends SvelteComponentTyped<BlocksWrapperProps, BlocksWrapperEvents, BlocksWrapperSlots> {
+}
+export {};

package/package/components/blocks/blocks.svelte

@@ -0,0 +1,36 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BlockStyles from "../block/components/block-styles.svelte";
+import Block from "../block/block.svelte";
+import BlocksWrapper from "./blocks-wrapper.svelte";
+import BuilderContext from "../../context/builder.context";
+import ComponentsContext from "../../context/components.context";
+export let blocks;
+export let parent;
+export let path;
+export let styleProp;
+export let context;
+export let registeredComponents;
+let builderContext = getContext(BuilderContext.key);
+let componentsContext = getContext(ComponentsContext.key);
+</script>
+
+<BlocksWrapper {blocks} {parent} {path} {styleProp}>
+  {#if blocks}
+    {#each blocks as block ("render-block-" + block.id)}
+      <Block
+        {block}
+        context={context || builderContext}
+        registeredComponents={registeredComponents ||
+          componentsContext.registeredComponents}
+      />
+    {/each}
+  {/if}
+
+  {#if blocks}
+    {#each blocks as block ("block-style-" + block.id)}
+      <BlockStyles {block} context={$context || $builderContext} />
+    {/each}
+  {/if}
+</BlocksWrapper>

package/package/components/blocks/blocks.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+export type BlocksProps = Partial<BlocksWrapperProps> & {
+    context?: Writable<BuilderContextInterface>;
+    registeredComponents?: RegisteredComponents;
+};
+import type { BlocksWrapperProps } from "./blocks-wrapper.svelte";
+import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        blocks: BlocksProps["blocks"];
+        parent: BlocksProps["parent"];
+        path: BlocksProps["path"];
+        styleProp: BlocksProps["styleProp"];
+        context: BlocksProps["context"];
+        registeredComponents: BlocksProps["registeredComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BlocksProps = typeof __propDef.props;
+export type BlocksEvents = typeof __propDef.events;
+export type BlocksSlots = typeof __propDef.slots;
+export default class Blocks extends SvelteComponentTyped<BlocksProps, BlocksEvents, BlocksSlots> {
+}
+export {};