@builder.io/sdk-svelte 0.5.8 → 0.6.0

package/lib/browser/blocks/text/text.svelte

@@ -0,0 +1,21 @@
+<script context="module"></script>
+
+<script>export let text = undefined;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+<span
+  use:mitosis_styling={{
+    outline: "none",
+  }}
+  class="builder-text">{@html text?.toString() || ""}</span
+>

package/lib/browser/blocks/textarea/textarea.svelte

@@ -0,0 +1,19 @@
+<script context="module"></script>
+
+<script>import { filterAttrs } from "../helpers.js";
+import { setAttrs } from "../helpers.js";
+export let attributes = undefined;
+export let placeholder = undefined;
+export let name = undefined;
+export let value = undefined;
+export let defaultValue = undefined;
+</script>
+
+<textarea
+  {...filterAttrs(attributes, "on:", false)}
+  {placeholder}
+  {name}
+  {value}
+  {defaultValue}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
+/>

package/lib/browser/blocks/video/video.svelte

@@ -0,0 +1,76 @@
+<script context="module"></script>
+
+<script>export let autoPlay = undefined;
+export let muted = undefined;
+export let controls = undefined;
+export let loop = undefined;
+export let playsInline = undefined;
+export let attributes = undefined;
+export let preload = undefined;
+export let fit = undefined;
+export let position = undefined;
+export let video = undefined;
+export let posterImage = undefined;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+$: videoProps = () => {
+    return {
+        ...(autoPlay === true
+            ? {
+                autoPlay: true,
+            }
+            : {}),
+        ...(muted === true
+            ? {
+                muted: true,
+            }
+            : {}),
+        ...(controls === true
+            ? {
+                controls: true,
+            }
+            : {}),
+        ...(loop === true
+            ? {
+                loop: true,
+            }
+            : {}),
+        ...(playsInline === true
+            ? {
+                playsInline: true,
+            }
+            : {}),
+    };
+};
+$: spreadProps = () => {
+    return {
+        ...attributes,
+        ...videoProps(),
+    };
+};
+</script>
+
+<video
+  use:mitosis_styling={{
+    width: "100%",
+    height: "100%",
+    ...attributes?.style,
+    objectFit: fit,
+    objectPosition: position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    borderRadius: 1,
+  }}
+  {...spreadProps()}
+  preload={preload || "metadata"}
+  src={video || "no-src"}
+  poster={posterImage}
+/>

package/lib/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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 {};

package/lib/browser/components/content/components/styles.svelte

@@ -0,0 +1,33 @@
+<script context="module"></script>
+
+<script>import InlinedStyles from "../../inlined-styles.svelte";
+import { getCss } from "./styles.helpers.js";
+import { getFontCss } from "./styles.helpers.js";
+export let cssCode = undefined;
+export let contentId = undefined;
+export let customFonts = undefined;
+let injectedStyles = `
+${getCss({
+    cssCode: cssCode,
+    contentId: contentId,
+})}
+${getFontCss({
+    customFonts: customFonts,
+})}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`.trim();
+</script>
+
+<InlinedStyles styles={injectedStyles} />

package/lib/browser/components/content/components/styles.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+    contentId?: string;
+}
+import type { CustomFont } from "./styles.helpers.js";
+declare const __propDef: {
+    props: {
+        cssCode?: Props["cssCode"];
+        contentId?: Props["contentId"];
+        customFonts?: Props["customFonts"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StylesProps = typeof __propDef.props;
+export type StylesEvents = typeof __propDef.events;
+export type StylesSlots = typeof __propDef.slots;
+export default class Styles extends SvelteComponent<StylesProps, StylesEvents, StylesSlots> {
+}
+export {};