@builder.io/sdk-svelte 0.5.8 → 0.6.0

package/lib/edge/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/edge/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/edge/components/content/components/styles.helpers.d.ts

@@ -0,0 +1,15 @@
+export interface CustomFont {
+    family?: string;
+    kind?: string;
+    fileUrl?: string;
+    files?: {
+        [key: string]: string;
+    };
+}
+export declare const getFontCss: ({ customFonts }: {
+    customFonts?: CustomFont[] | undefined;
+}) => string;
+export declare const getCss: ({ cssCode, contentId }: {
+    cssCode?: string | undefined;
+    contentId?: string | undefined;
+}) => string;

package/lib/edge/components/content/components/styles.helpers.js

@@ -0,0 +1,58 @@
+const getCssFromFont = (font) => {
+    // TODO: compute what font sizes are used and only load those.......
+    const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+    const name = family.split(',')[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = '';
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            // TODO: maybe limit number loaded
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+export const getFontCss = ({ customFonts }) => {
+    // TODO: flag for this
+    // if (!this.builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
+};
+export const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return '';
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    // Allow using `&` in custom CSS code like @emotion
+    // E.g. `& .foobar { ... }` to scope CSS
+    // TODO: handle if '&' is within a string like `content: "&"`
+    return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};

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

package/lib/edge/components/content/content.helpers.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+import type { ContentProps } from './content.types.js';
+export declare const getContextStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data }: Pick<ContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/lib/edge/components/content/content.helpers.js

@@ -0,0 +1,30 @@
+export const getContextStateInitialValue = ({ content, data, locale }) => {
+    const defaultValues = {};
+    // set default values for content state inputs
+    content?.data?.inputs?.forEach(input => {
+        if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = {
+        ...content?.data?.state,
+        ...data,
+        ...(locale ? {
+            locale
+        } : {})
+    };
+    return {
+        ...defaultValues,
+        ...stateToUse
+    };
+};
+export const getContentInitialValue = ({ content, data }) => {
+    return !content ? undefined : {
+        ...content,
+        data: {
+            ...content?.data,
+            ...data
+        },
+        meta: content?.meta
+    };
+};

package/lib/edge/components/content/content.svelte

@@ -0,0 +1,118 @@
+<script>import { setContext } from "svelte";
+import { writable } from "svelte/store";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { components, serializeComponentInfo, } from "../../functions/register-component.js";
+import Blocks from "../blocks/blocks.svelte";
+import ContentStyles from "./components/styles.svelte";
+import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { getRenderContentScriptString } from "../content-variants/helpers.js";
+import EnableEditor from "./components/enable-editor.svelte";
+import InlinedScript from "../inlined-script.svelte";
+import "./wrap-component-ref.js";
+import ComponentsContext from "../../context/components.context.js";
+export let content = undefined;
+export let customComponents = undefined;
+export let data = undefined;
+export let locale = undefined;
+export let context = undefined;
+export let apiKey;
+export let apiVersion = undefined;
+export let model = undefined;
+export let canTrack = undefined;
+export let includeRefs = undefined;
+export let enrich = undefined;
+export let classNameProp;
+export let showContent;
+export let isSsrAbTest;
+function contentSetState(newRootState) {
+    $builderContextSignal.rootState = newRootState;
+}
+let scriptStr = getRenderContentScriptString({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    variationId: content?.testVariationId,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    contentId: content?.id,
+});
+let registeredComponents = [
+    ...getDefaultRegisteredComponents(),
+    // While this `components` object is deprecated, we must maintain support for it.
+    // Since users are able to override our default components, we need to make sure that we do not break such
+    // existing usage.
+    // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+    // which is the new standard way of providing custom components, and must therefore take precedence.
+    ...components,
+    ...(customComponents || []),
+].reduce((acc, { component, ...info }) => ({
+    ...acc,
+    [info.name]: {
+        component: component,
+        ...serializeComponentInfo(info),
+    },
+}), {});
+let builderContextSignal = writable({
+    content: getContentInitialValue({
+        content: content,
+        data: data,
+    }),
+    localState: undefined,
+    rootState: getContextStateInitialValue({
+        content: content,
+        data: data,
+        locale: locale,
+    }),
+    rootSetState: contentSetState,
+    context: context || {},
+    apiKey: apiKey,
+    apiVersion: apiVersion,
+    componentInfos: [
+        ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(customComponents || []),
+    ].reduce((acc, { component: _, ...info }) => ({
+        ...acc,
+        [info.name]: serializeComponentInfo(info),
+    }), {}),
+    inheritedStyles: {},
+});
+setContext(ComponentsContext.key, {
+    registeredComponents: registeredComponents,
+});
+</script>
+
+<EnableEditor
+  {content}
+  {model}
+  {context}
+  {apiKey}
+  {canTrack}
+  {locale}
+  {includeRefs}
+  {enrich}
+  {classNameProp}
+  {showContent}
+  {builderContextSignal}
+  {...{}}
+>
+  {#if isSsrAbTest}
+    <InlinedScript {scriptStr} />
+  {/if}
+
+  {#if TARGET !== "reactNative"}
+    <ContentStyles
+      contentId={$builderContextSignal.content?.id}
+      cssCode={$builderContextSignal.content?.data?.cssCode}
+      customFonts={$builderContextSignal.content?.data?.customFonts}
+    />
+  {/if}
+  <Blocks
+    blocks={$builderContextSignal.content?.data?.blocks}
+    context={builderContextSignal}
+    {registeredComponents}
+  />
+</EnableEditor>

package/lib/edge/components/content/content.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { ContentProps } from "./content.types.js";
+declare const __propDef: {
+    props: {
+        content?: ContentProps["content"];
+        customComponents?: ContentProps["customComponents"];
+        data?: ContentProps["data"];
+        locale?: ContentProps["locale"];
+        context?: ContentProps["context"];
+        apiKey: ContentProps["apiKey"];
+        apiVersion?: ContentProps["apiVersion"];
+        model?: ContentProps["model"];
+        canTrack?: ContentProps["canTrack"];
+        includeRefs?: ContentProps["includeRefs"];
+        enrich?: ContentProps["enrich"];
+        classNameProp: ContentProps["classNameProp"];
+        showContent: ContentProps["showContent"];
+        isSsrAbTest: ContentProps["isSsrAbTest"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ContentProps_ = typeof __propDef.props;
+export { ContentProps_ as ContentProps };
+export type ContentEvents = typeof __propDef.events;
+export type ContentSlots = typeof __propDef.slots;
+export default class Content extends SvelteComponent<ContentProps, ContentEvents, ContentSlots> {
+}

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

@@ -0,0 +1,24 @@
+import type { BuilderRenderState } from '../../context/types.js';
+import type { EnforcePartials } from '../../types/enforced-partials.js';
+import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
+interface InternalRenderProps {
+    /**
+     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
+     */
+    classNameProp: string | undefined;
+    showContent: boolean;
+    isSsrAbTest: boolean;
+}
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+        name?: string;
+        props?: {
+            builderBlock?: {
+                id?: string;
+            };
+        };
+    };
+}
+export {};

package/lib/edge/components/content/content.types.js

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

package/lib/edge/components/content/index.d.ts

@@ -0,0 +1 @@
+export { default } from './content.svelte';