@builder.io/sdk-svelte 0.5.8 → 0.6.0

package/lib/edge/components/block/block.svelte

@@ -0,0 +1,135 @@
+<script context="module"></script>
+
+<script>import { writable } from "svelte/store";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import "../../functions/get-block-properties.js";
+import { getProcessedBlock } from "../../functions/get-processed-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 "../../functions/extract-text-styles.js";
+import ComponentRef from "./components/component-ref/component-ref.svelte";
+import BlockWrapper from "./components/block-wrapper.svelte";
+export let block;
+export let context;
+export let 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/lib/edge/components/block/components/block-styles.svelte

@@ -0,0 +1,66 @@
+<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";
+export let block;
+export let context;
+$: canShowBlock = () => {
+    // only render styles for blocks that are visible
+    if (checkIsDefined(processedBlock.hide)) {
+        return !processedBlock.hide;
+    }
+    if (checkIsDefined(processedBlock.show)) {
+        return processedBlock.show;
+    }
+    return true;
+};
+$: css = () => {
+    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 = processedBlock.id;
+    if (!className) {
+        return "";
+    }
+    const largeStylesClass = largeStyles
+        ? createCssClass({
+            className,
+            styles: largeStyles,
+        })
+        : "";
+    const mediumStylesClass = mediumStyles
+        ? createCssClass({
+            className,
+            styles: mediumStyles,
+            mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints),
+        })
+        : "";
+    const smallStylesClass = smallStyles
+        ? createCssClass({
+            className,
+            styles: smallStyles,
+            mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
+        })
+        : "";
+    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()}
+  <InlinedStyles styles={css()} />
+{/if}

package/lib/edge/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/lib/edge/components/block/components/block-wrapper.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } 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: {};
+    };
+};
+type BlockWrapperProps_ = typeof __propDef.props;
+export { BlockWrapperProps_ as BlockWrapperProps };
+export type BlockWrapperEvents = typeof __propDef.events;
+export type BlockWrapperSlots = typeof __propDef.slots;
+export default class BlockWrapper extends SvelteComponent<BlockWrapperProps, BlockWrapperEvents, BlockWrapperSlots> {
+}

package/lib/edge/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/lib/edge/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/lib/edge/components/block/components/component-ref/component-ref.svelte

@@ -0,0 +1,38 @@
+<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";
+import "../../../content/wrap-component-ref.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/lib/edge/components/block/components/component-ref/component-ref.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } 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 SvelteComponent<ComponentRefProps, ComponentRefEvents, ComponentRefSlots> {
+}
+export {};

package/lib/edge/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/lib/edge/components/block/components/repeated-block.svelte

@@ -0,0 +1,14 @@
+<script context="module"></script>
+
+<script>import { setContext } from "svelte";
+import { writable } from "svelte/store";
+import BuilderContext from "../../../context/builder.context.js";
+import Block from "../block.svelte";
+export let repeatContext;
+export let block;
+export let registeredComponents;
+let store = writable(repeatContext);
+setContext(BuilderContext.key, store);
+</script>
+
+<Block {block} context={store} {registeredComponents} />

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } 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 SvelteComponent<RepeatedBlockProps, RepeatedBlockEvents, RepeatedBlockSlots> {
+}
+export {};

package/lib/edge/components/block/types.d.ts

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

package/lib/edge/components/blocks/blocks-wrapper.svelte

@@ -0,0 +1,70 @@
+<script context="module"></script>
+
+<script>import { isEditing } from "../../functions/is-editing.js";
+export let blocks;
+export let parent;
+export let path;
+export let styleProp;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+function onClick() {
+    if (isEditing() && !blocks?.length) {
+        window.parent?.postMessage({
+            type: "builder.clickEmptyBlocks",
+            data: {
+                parentElementId: parent,
+                dataPath: path,
+            },
+        }, "*");
+    }
+}
+function onMouseEnter() {
+    if (isEditing() && !blocks?.length) {
+        window.parent?.postMessage({
+            type: "builder.hoverEmptyBlocks",
+            data: {
+                parentElementId: parent,
+                dataPath: path,
+            },
+        }, "*");
+    }
+}
+$: className = () => {
+    return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
+};
+</script>
+
+<div
+  use:mitosis_styling={styleProp}
+  class={className() + " div"}
+  builder-path={path}
+  builder-parent-id={parent}
+  {...{}}
+  on:click={(event) => {
+    onClick();
+  }}
+  on:mouseenter={(event) => {
+    onMouseEnter();
+  }}
+  on:keypress={(event) => {
+    onClick();
+  }}
+>
+  <slot />
+</div>
+
+<style>
+  .div {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+</style>

package/lib/edge/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.js";
+import ComponentsContext from "../../context/components.context.js";
+export let blocks;
+export let parent;
+export let path;
+export let styleProp;
+export let context = undefined;
+export let registeredComponents = undefined;
+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>