@builder.io/sdk-svelte 0.5.8 → 0.6.0

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

@@ -1,298 +0,0 @@
-<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;
-export let builderContextSignal;
-export let model;
-export let context;
-export let apiKey;
-export let showContent;
-export let classNameProp;
-export let content;
-export let locale;
-export let includeRefs;
-export let enrich;
-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/package/components/content/components/enable-editor.svelte.d.ts

@@ -1,36 +0,0 @@
-import { SvelteComponentTyped } 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 SvelteComponentTyped<EnableEditorProps, EnableEditorEvents, EnableEditorSlots> {
-}
-export {};

package/package/components/content/components/styles.svelte

@@ -1,33 +0,0 @@
-<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;
-export let contentId;
-export let customFonts;
-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/package/components/content/components/styles.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } 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 SvelteComponentTyped<StylesProps, StylesEvents, StylesSlots> {
-}
-export {};

package/package/components/content/content.svelte

@@ -1,118 +0,0 @@
-<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;
-export let customComponents;
-export let data;
-export let locale;
-export let context;
-export let apiKey;
-export let apiVersion;
-export let model;
-export let canTrack;
-export let includeRefs;
-export let enrich;
-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/package/components/content/content.svelte.d.ts

@@ -1,30 +0,0 @@
-import { SvelteComponentTyped } 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: {};
-};
-export type ContentProps = typeof __propDef.props;
-export type ContentEvents = typeof __propDef.events;
-export type ContentSlots = typeof __propDef.slots;
-export default class Content extends SvelteComponentTyped<ContentProps, ContentEvents, ContentSlots> {
-}
-export {};

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

@@ -1,24 +0,0 @@
-import type { BuilderRenderState } from '../../context/types.js';
-import type { EnforcePartials } from '../../types/enforced-partials.js';
-import type { ContentVariantsProps } 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<ContentVariantsProps>;
-export interface BuilderComponentStateChange {
-    state: BuilderRenderState;
-    ref: {
-        name?: string;
-        props?: {
-            builderBlock?: {
-                id?: string;
-            };
-        };
-    };
-}
-export {};

package/package/components/content-variants/content-variants.svelte

@@ -1,104 +0,0 @@
-<script context="module"></script>
-
-<script>import { onMount } from "svelte";
-import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
-import ContentComponent from "../content/content.svelte";
-import { getDefaultCanTrack } from "../../helpers/canTrack.js";
-import InlinedStyles from "../inlined-styles.svelte";
-import { handleABTestingSync } from "../../helpers/ab-tests.js";
-import InlinedScript from "../inlined-script.svelte";
-import { TARGET } from "../../constants/target.js";
-export let canTrack;
-export let content;
-export let __isNestedRender;
-export let model;
-export let data;
-export let context;
-export let apiKey;
-export let apiVersion;
-export let customComponents;
-export let locale;
-export let includeRefs;
-export let enrich;
-$: variantScriptStr = () => {
-    return getVariantsScriptString(getVariants(content).map((value) => ({
-        id: value.testVariationId,
-        testRatio: value.testRatio,
-    })), content?.id || "");
-};
-$: hideVariantsStyleString = () => {
-    return getVariants(content)
-        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
-        .join("");
-};
-$: defaultContent = () => {
-    return shouldRenderVariants
-        ? {
-            ...content,
-            testVariationId: content?.id,
-        }
-        : handleABTestingSync({
-            item: content,
-            canTrack: getDefaultCanTrack(canTrack),
-        });
-};
-let shouldRenderVariants = checkShouldRunVariants({
-    canTrack: getDefaultCanTrack(canTrack),
-    content: content,
-});
-onMount(() => {
-    /**
-     * We unmount the non-winning variants post-hydration in Vue.
-     */
-});
-</script>
-
-{#if !__isNestedRender && TARGET !== "reactNative"}
-  <InlinedScript scriptStr={getScriptString()} />
-{/if}
-
-{#if shouldRenderVariants}
-  <InlinedStyles
-    id={`variants-styles-${content?.id}`}
-    styles={hideVariantsStyleString()}
-  />
-
-  <InlinedScript scriptStr={variantScriptStr()} />
-
-  {#each getVariants(content) as variant (variant.testVariationId)}
-    <ContentComponent
-      content={variant}
-      showContent={false}
-      classNameProp={undefined}
-      {model}
-      {data}
-      {context}
-      {apiKey}
-      {apiVersion}
-      {customComponents}
-      {canTrack}
-      {locale}
-      {includeRefs}
-      {enrich}
-      isSsrAbTest={shouldRenderVariants}
-    />
-  {/each}
-{/if}
-
-<ContentComponent
-  {...{}}
-  content={defaultContent()}
-  classNameProp={`variant-${content?.id}`}
-  showContent={true}
-  {model}
-  {data}
-  {context}
-  {apiKey}
-  {apiVersion}
-  {customComponents}
-  {canTrack}
-  {locale}
-  {includeRefs}
-  {enrich}
-  isSsrAbTest={shouldRenderVariants}
-/>