@builder.io/sdk-svelte 0.5.9 → 0.6.0

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

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

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

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

package/lib/node/components/content/index.js

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

package/lib/node/components/content/wrap-component-ref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export declare const wrapComponentRef: (component: any) => any;

package/lib/node/components/content/wrap-component-ref.js

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component) => component;

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

@@ -0,0 +1,104 @@
+<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 = undefined;
+export let content = undefined;
+export let __isNestedRender = undefined;
+export let model = undefined;
+export let data = undefined;
+export let context = undefined;
+export let apiKey;
+export let apiVersion = undefined;
+export let customComponents = undefined;
+export let locale = undefined;
+export let includeRefs = undefined;
+export let enrich = undefined;
+$: 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}
+/>

package/lib/node/components/content-variants/content-variants.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+type VariantsProviderProps = ContentVariantsPrps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { ContentVariantsPrps } from "./content-variants.types.js";
+declare const __propDef: {
+    props: {
+        canTrack?: VariantsProviderProps["canTrack"];
+        content?: VariantsProviderProps["content"];
+        __isNestedRender?: VariantsProviderProps["__isNestedRender"];
+        model?: VariantsProviderProps["model"];
+        data?: VariantsProviderProps["data"];
+        context?: VariantsProviderProps["context"];
+        apiKey: VariantsProviderProps["apiKey"];
+        apiVersion?: VariantsProviderProps["apiVersion"];
+        customComponents?: VariantsProviderProps["customComponents"];
+        locale?: VariantsProviderProps["locale"];
+        includeRefs?: VariantsProviderProps["includeRefs"];
+        enrich?: VariantsProviderProps["enrich"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContentVariantsProps = typeof __propDef.props;
+export type ContentVariantsEvents = typeof __propDef.events;
+export type ContentVariantsSlots = typeof __propDef.slots;
+export default class ContentVariants extends SvelteComponent<ContentVariantsProps, ContentVariantsEvents, ContentVariantsSlots> {
+}
+export {};

package/lib/node/components/content-variants/content-variants.types.d.ts

@@ -0,0 +1,20 @@
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types.js';
+import type { ApiVersion } from '../../types/api-version.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+export interface ContentVariantsPrps {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    apiVersion?: ApiVersion;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    /** @deprecated use `enrich` instead **/
+    includeRefs?: boolean;
+    enrich?: boolean;
+}

package/lib/node/components/content-variants/content-variants.types.js

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

package/lib/node/components/content-variants/helpers.d.ts

@@ -0,0 +1,41 @@
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+export declare const getVariants: (content: Nullable<BuilderContent>) => {
+    testVariationId: string | undefined;
+    id: string | undefined;
+    data?: {
+        [key: string]: any;
+        title?: string | undefined;
+        blocks?: import("../../types/builder-block.js").BuilderBlock[] | undefined;
+        inputs?: import("../../types/input.js").Input[] | undefined;
+        state?: {
+            [key: string]: any;
+        } | undefined;
+        jsCode?: string | undefined;
+        tsCode?: string | undefined;
+        httpRequests?: {
+            [key: string]: string;
+        } | undefined;
+    } | undefined;
+    name?: string | undefined;
+    testRatio?: number | undefined;
+    meta?: {
+        [key: string]: any;
+        breakpoints?: import("../../types/typescript.js").Nullable<import("../../types/builder-content.js").Breakpoints>;
+    } | undefined;
+}[];
+export declare const checkShouldRunVariants: ({ canTrack, content }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getScriptString: () => string;
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ contentId, variationId }: {
+    variationId: string;
+    contentId: string;
+}) => string;
+export {};