@builder.io/sdk-svelte 0.5.9 → 0.6.1

package/lib/node/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/node/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/node/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/node/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/node/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/node/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/node/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/node/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/node/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/node/components/block/types.js

@@ -0,0 +1 @@
+export {};

package/lib/node/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/node/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>

package/lib/node/components/content/components/enable-editor.svelte

@@ -0,0 +1,298 @@
+<script context="module"></script>
+
+<script>import { onDestroy, onMount, setContext } from "svelte";
+import { evaluate } from "../../../functions/evaluate/index.js";
+import { fetch } from "../../../functions/get-fetch.js";
+import { isBrowser } from "../../../functions/is-browser.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { createRegisterComponentMessage } from "../../../functions/register-component.js";
+import { _track } from "../../../functions/track/index.js";
+import builderContext from "../../../context/builder.context.js";
+import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
+import { logger } from "../../../helpers/logger.js";
+import { fetchOneEntry } from "../../../functions/get-content/index.js";
+import { isPreviewing } from "../../../functions/is-previewing.js";
+import "../../../helpers/preview-lru-cache/set.js";
+import { fastClone } from "../../../functions/fast-clone.js";
+export let canTrack = undefined;
+export let builderContextSignal;
+export let model = undefined;
+export let context = undefined;
+export let apiKey;
+export let showContent;
+export let classNameProp;
+export let content = undefined;
+export let locale = undefined;
+export let includeRefs = undefined;
+export let enrich = undefined;
+function mergeNewContent(newContent) {
+    const newContentValue = {
+        ...$builderContextSignal.content,
+        ...newContent,
+        data: {
+            ...$builderContextSignal.content?.data,
+            ...newContent?.data,
+        },
+        meta: {
+            ...$builderContextSignal.content?.meta,
+            ...newContent?.meta,
+            breakpoints: newContent?.meta?.breakpoints ||
+                $builderContextSignal.content?.meta?.breakpoints,
+        },
+    };
+    $builderContextSignal.content = newContentValue;
+}
+function processMessage(event) {
+    const { data } = event;
+    if (data) {
+        switch (data.type) {
+            case "builder.configureSdk": {
+                const messageContent = data.data;
+                const { breakpoints, contentId } = messageContent;
+                if (!contentId || contentId !== $builderContextSignal.content?.id) {
+                    return;
+                }
+                if (breakpoints) {
+                    mergeNewContent({
+                        meta: {
+                            breakpoints,
+                        },
+                    });
+                }
+                forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+                break;
+            }
+            case "builder.contentUpdate": {
+                const messageContent = data.data;
+                const key = messageContent.key ||
+                    messageContent.alias ||
+                    messageContent.entry ||
+                    messageContent.modelName;
+                const contentData = messageContent.data;
+                if (key === model) {
+                    mergeNewContent(contentData);
+                    forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+                }
+                break;
+            }
+        }
+    }
+}
+function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = $builderContextSignal.content?.data?.jsCode;
+    if (jsCode) {
+        evaluate({
+            code: jsCode,
+            context: context || {},
+            localState: undefined,
+            rootState: $builderContextSignal.rootState,
+            rootSetState: $builderContextSignal.rootSetState,
+        });
+    }
+}
+function onClick(event) {
+    if ($builderContextSignal.content) {
+        const variationId = $builderContextSignal.content?.testVariationId;
+        const contentId = $builderContextSignal.content?.id;
+        _track({
+            type: "click",
+            canTrack: canTrackToUse,
+            contentId,
+            apiKey: apiKey,
+            variationId: variationId !== contentId ? variationId : undefined,
+            ...getInteractionPropertiesForEvent(event),
+            unique: !clicked,
+        });
+    }
+    if (!clicked) {
+        clicked = true;
+    }
+}
+function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+        code: group,
+        context: context || {},
+        localState: undefined,
+        rootState: $builderContextSignal.rootState,
+        rootSetState: $builderContextSignal.rootSetState,
+    }));
+}
+function handleRequest({ url, key }) {
+    fetch(url)
+        .then((response) => response.json())
+        .then((json) => {
+        const newState = {
+            ...$builderContextSignal.rootState,
+            [key]: json,
+        };
+        $builderContextSignal.rootSetState?.(newState);
+        httpReqsData[key] = true;
+    })
+        .catch((err) => {
+        console.error("error fetching dynamic data", url, err);
+    });
+}
+function runHttpRequests() {
+    const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+        if (url && (!httpReqsData[key] || isEditing())) {
+            const evaluatedUrl = evalExpression(url);
+            handleRequest({
+                url: evaluatedUrl,
+                key,
+            });
+        }
+    });
+}
+function emitStateUpdate() {
+    if (isEditing()) {
+        window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+            detail: {
+                state: fastClone($builderContextSignal.rootState),
+                ref: {
+                    name: model,
+                },
+            },
+        }));
+    }
+}
+let elementRef;
+let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
+let forceReRenderCount = 0;
+let lastUpdated = 0;
+let shouldSendResetCookie = false;
+let httpReqsData = {};
+let clicked = false;
+onMount(() => {
+    if (!apiKey) {
+        logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+    }
+    if (isBrowser()) {
+        if (isEditing()) {
+            forceReRenderCount = forceReRenderCount + 1;
+            window.addEventListener("message", processMessage);
+            registerInsertMenu();
+            setupBrowserForEditing({
+                ...(locale
+                    ? {
+                        locale: locale,
+                    }
+                    : {}),
+                ...(includeRefs
+                    ? {
+                        includeRefs: includeRefs,
+                    }
+                    : {}),
+                ...(enrich
+                    ? {
+                        enrich: enrich,
+                    }
+                    : {}),
+            });
+            Object.values($builderContextSignal.componentInfos).forEach((registeredComponent) => {
+                const message = createRegisterComponentMessage(registeredComponent);
+                window.parent?.postMessage(message, "*");
+            });
+            window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+        }
+        if ($builderContextSignal.content) {
+            const variationId = $builderContextSignal.content?.testVariationId;
+            const contentId = $builderContextSignal.content?.id;
+            _track({
+                type: "impression",
+                canTrack: canTrackToUse,
+                contentId,
+                apiKey: apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
+            });
+        }
+        // override normal content in preview mode
+        if (isPreviewing()) {
+            const searchParams = new URL(location.href).searchParams;
+            const searchParamPreviewModel = searchParams.get("builder.preview");
+            const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
+            const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+            /**
+             * Make sure that:
+             * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
+             *  at the same time, e.g. header/page/footer.
+             * - the API key is the same, since we don't want to preview content from other organizations.
+             * - if there is content, that the preview ID is the same as that of the one we receive.
+             *
+             * TO-DO: should we only update the state when there is a change?
+             **/
+            if (searchParamPreviewModel === model &&
+                previewApiKey === apiKey &&
+                (!content || searchParamPreviewId === content.id)) {
+                fetchOneEntry({
+                    model: model,
+                    apiKey: apiKey,
+                    apiVersion: $builderContextSignal.apiVersion,
+                }).then((content) => {
+                    if (content) {
+                        mergeNewContent(content);
+                    }
+                });
+            }
+        }
+        evaluateJsCode();
+        runHttpRequests();
+        emitStateUpdate();
+    }
+});
+function onUpdateFn_0(..._args) {
+    if (content) {
+        mergeNewContent(content);
+    }
+}
+$: onUpdateFn_0(...[content]);
+function onUpdateFn_1(..._args) { }
+$: onUpdateFn_1(...[shouldSendResetCookie]);
+function onUpdateFn_2(..._args) {
+    evaluateJsCode();
+}
+$: onUpdateFn_2(...[
+    $builderContextSignal.content?.data?.jsCode,
+    $builderContextSignal.rootState,
+]);
+function onUpdateFn_3(..._args) {
+    runHttpRequests();
+}
+$: onUpdateFn_3(...[$builderContextSignal.content?.data?.httpRequests]);
+function onUpdateFn_4(..._args) {
+    emitStateUpdate();
+}
+$: onUpdateFn_4(...[$builderContextSignal.rootState]);
+setContext(builderContext.key, builderContextSignal);
+onDestroy(() => {
+    if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+    }
+});
+</script>
+
+{#if $builderContextSignal.content}
+  <div
+    key={forceReRenderCount}
+    bind:this={elementRef}
+    on:click={(event) => {
+      onClick(event);
+    }}
+    builder-content-id={$builderContextSignal.content?.id}
+    builder-model={model}
+    {...{}}
+    {...showContent
+      ? {}
+      : {
+          hidden: true,
+          "aria-hidden": true,
+        }}
+    class={classNameProp}
+  >
+    <slot />
+  </div>
+{/if}

package/lib/node/components/content/components/enable-editor.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
+    builderContextSignal: Writable<BuilderContextInterface>;
+    setBuilderContextSignal?: (signal: any) => any;
+    children?: any;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { ContentProps } from "../content.types.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        canTrack?: BuilderEditorProps["canTrack"];
+        builderContextSignal: BuilderEditorProps["builderContextSignal"];
+        model?: BuilderEditorProps["model"];
+        context?: BuilderEditorProps["context"];
+        apiKey: BuilderEditorProps["apiKey"];
+        showContent: BuilderEditorProps["showContent"];
+        classNameProp: BuilderEditorProps["classNameProp"];
+        content?: BuilderEditorProps["content"];
+        locale?: BuilderEditorProps["locale"];
+        includeRefs?: BuilderEditorProps["includeRefs"];
+        enrich?: BuilderEditorProps["enrich"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EnableEditorProps = typeof __propDef.props;
+export type EnableEditorEvents = typeof __propDef.events;
+export type EnableEditorSlots = typeof __propDef.slots;
+export default class EnableEditor extends SvelteComponent<EnableEditorProps, EnableEditorEvents, EnableEditorSlots> {
+}
+export {};