@builder.io/sdk-svelte 0.4.5 → 0.5.0

package/src/components/content/content.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { writable } from "svelte/store";
+
+  import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+  import type {
+    BuilderContextInterface,
+    BuilderRenderState,
+    RegisteredComponents,
+  } from "../../context/types.js";
+  import {
+    components,
+    serializeComponentInfo,
+  } from "../../functions/register-component.js";
+  import Blocks from "../blocks/blocks.svelte";
+  import ContentStyles from "./components/styles.svelte";
+  import type { ContentProps } from "./content.types.js";
+  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 { wrapComponentRef } from "./wrap-component-ref.js";
+  import type { ComponentInfo } from "../../types/components.js";
+  import type { Dictionary } from "../../types/typescript.js";
+
+  export let content: ContentProps["content"];
+  export let customComponents: ContentProps["customComponents"];
+  export let data: ContentProps["data"];
+  export let locale: ContentProps["locale"];
+  export let context: ContentProps["context"];
+  export let apiKey: ContentProps["apiKey"];
+  export let apiVersion: ContentProps["apiVersion"];
+  export let model: ContentProps["model"];
+  export let canTrack: ContentProps["canTrack"];
+  export let includeRefs: ContentProps["includeRefs"];
+  export let enrich: ContentProps["enrich"];
+  export let classNameProp: ContentProps["classNameProp"];
+  export let showContent: ContentProps["showContent"];
+  export let isSsrAbTest: ContentProps["isSsrAbTest"];
+
+  function contentSetState(newRootState: BuilderRenderState) {
+    $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<RegisteredComponents>(
+    (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<Dictionary<ComponentInfo>>(
+      (acc, { component: _, ...info }) => ({
+        ...acc,
+        [info.name]: serializeComponentInfo(info),
+      }),
+      {}
+    ),
+    inheritedStyles: {},
+  });
+</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/src/components/{render-content/render-content.types.ts → content/content.types.ts}

@@ -1,7 +1,6 @@
-import type { BuilderRenderState } from '../../context/types';
-import type { EnforcePartials } from '../../types/enforced-partials';
-import type { RenderContentVariantsProps } from '../render-content-variants/render-content-variants.types';
-
+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`
@@ -10,10 +9,7 @@ interface InternalRenderProps {
   showContent: boolean;
   isSsrAbTest: boolean;
 }
-
-export type RenderContentProps = InternalRenderProps &
-  EnforcePartials<RenderContentVariantsProps>;
-
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
 export interface BuilderComponentStateChange {
   state: BuilderRenderState;
   ref: {
@@ -24,4 +20,4 @@ export interface BuilderComponentStateChange {
       };
     };
   };
-}
+}

package/src/components/content/index.ts

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

package/src/components/{render-content → content}/wrap-component-ref.ts

@@ -3,4 +3,4 @@
  *
  * See overrides/* for examples.
  */
-export const wrapComponentRef = (component: any) => component;
+export const wrapComponentRef = (component: any) => component

package/src/components/{render-content-variants/render-content-variants.svelte → content-variants/content-variants.svelte}

@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  type VariantsProviderProps = RenderContentVariantsProps & {
+  type VariantsProviderProps = ContentVariantsProps & {
     /**
      * For internal use only. Do not provide this prop.
      */
@@ -15,14 +15,14 @@
     getScriptString,
     getVariants,
     getVariantsScriptString,
-  } from "./helpers";
-  import RenderContent from "../render-content/render-content.svelte";
-  import { getDefaultCanTrack } from "../../helpers/canTrack";
+  } 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";
+  import { handleABTestingSync } from "../../helpers/ab-tests.js";
   import InlinedScript from "../inlined-script.svelte";
-  import { TARGET } from "../../constants/target";
-  import type { RenderContentVariantsProps } from "./render-content-variants.types";
+  import { TARGET } from "../../constants/target.js";
+  import type { ContentVariantsProps } from "./content-variants.types.js";
 
   export let canTrack: VariantsProviderProps["canTrack"];
   export let content: VariantsProviderProps["content"];
@@ -37,28 +37,30 @@
   export let includeRefs: VariantsProviderProps["includeRefs"];
   export let enrich: VariantsProviderProps["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("");
+  };
+
   let shouldRenderVariants = checkShouldRunVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
   });
-  let variantScriptStr = getVariantsScriptString(
-    getVariants(content).map((value) => ({
-      id: value.testVariationId!,
-      testRatio: value.testRatio,
-    })),
-    content?.id || ""
-  );
-  let hideVariantsStyleString = getVariants(content)
-    .map((value) => `.variant-${value.testVariationId} { display: none; } `)
-    .join("");
 
   onMount(() => {
     /**
      * We unmount the non-winning variants post-hydration in Vue.
      */
-    if (TARGET === "vue2" || TARGET === "vue3") {
-      shouldRenderVariants = false;
-    }
   });
 </script>
 
@@ -69,13 +71,13 @@
 {#if shouldRenderVariants}
   <InlinedStyles
     id={`variants-styles-${content?.id}`}
-    styles={hideVariantsStyleString}
+    styles={hideVariantsStyleString()}
   />
 
-  <InlinedScript scriptStr={variantScriptStr} />
+  <InlinedScript scriptStr={variantScriptStr()} />
 
   {#each getVariants(content) as variant (variant.testVariationId)}
-    <RenderContent
+    <ContentComponent
       content={variant}
       showContent={false}
       classNameProp={undefined}
@@ -94,7 +96,7 @@
   {/each}
 {/if}
 
-<RenderContent
+<ContentComponent
   {...{}}
   content={shouldRenderVariants
     ? content

package/src/components/{render-content-variants/render-content-variants.types.ts → content-variants/content-variants.types.ts}

@@ -1,15 +1,13 @@
-import type {
-  BuilderRenderContext,
-  RegisteredComponent,
-} from '../../context/types';
-import type { ApiVersion } from '../../types/api-version';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-
-export interface RenderContentVariantsProps {
+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 ContentVariantsProps {
   content?: Nullable<BuilderContent>;
   model?: string;
-  data?: { [key: string]: any };
+  data?: {
+    [key: string]: any;
+  };
   context?: BuilderRenderContext;
   apiKey: string;
   apiVersion?: ApiVersion;
@@ -19,4 +17,4 @@ export interface RenderContentVariantsProps {
   /** @deprecated use `enrich` instead **/
   includeRefs?: boolean;
   enrich?: boolean;
-}
+}

package/src/components/{render-content-variants → content-variants}/helpers.ts

@@ -1,19 +1,16 @@
-import { TARGET } from '../../constants/target';
-import { isBrowser } from '../../functions/is-browser';
-import type { Nullable } from '../../helpers/nullable';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Target } from '../../types/targets';
-
-export const getVariants = (content: Nullable<BuilderContent>) =>
-  Object.values(content?.variations || {}).map((variant) => ({
-    ...variant,
-    testVariationId: variant.id,
-    id: content?.id,
-  }));
-
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../../functions/is-browser.js';
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Target } from '../../types/targets.js';
+export const getVariants = (content: Nullable<BuilderContent>) => Object.values(content?.variations || {}).map(variant => ({
+  ...variant,
+  testVariationId: variant.id,
+  id: content?.id
+}));
 export const checkShouldRunVariants = ({
   canTrack,
-  content,
+  content
 }: {
   canTrack: Nullable<boolean>;
   content: Nullable<BuilderContent>;
@@ -24,7 +21,6 @@ export const checkShouldRunVariants = ({
    * We cannot SSR in React-Native.
    */
   if (TARGET === 'reactNative') return false;
-
   if (!hasVariants) return false;
   if (!canTrack) return false;
 
@@ -36,12 +32,9 @@ export const checkShouldRunVariants = ({
    * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
    */
   if (TARGET === 'vue2' || TARGET === 'vue3') return true;
-
   if (isBrowser()) return false;
-
   return true;
 };
-
 type VariantData = {
   id: string;
   testRatio?: number;
@@ -51,11 +44,7 @@ type VariantData = {
  * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
  * Make sure to write multi-line comments only.
  */
-function bldrAbTest(
-  contentId: string,
-  variants: VariantData[],
-  isHydrationTarget: boolean
-) {
+function bldrAbTest(contentId: string, variants: VariantData[], isHydrationTarget: boolean) {
   function getAndSetVariantId(): string {
     function setCookie(name: string, value: string, days?: number) {
       let expires = '';
@@ -64,13 +53,7 @@ function bldrAbTest(
         date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
         expires = '; expires=' + date.toUTCString();
       }
-      document.cookie =
-        name +
-        '=' +
-        (value || '') +
-        expires +
-        '; path=/' +
-        '; Secure; SameSite=None';
+      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
     }
     function getCookie(name: string) {
       const nameEQ = name + '=';
@@ -78,14 +61,13 @@ function bldrAbTest(
       for (let i = 0; i < ca.length; i++) {
         let c = ca[i];
         while (c.charAt(0) === ' ') c = c.substring(1, c.length);
-        if (c.indexOf(nameEQ) === 0)
-          return c.substring(nameEQ.length, c.length);
+        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
       }
       return null;
     }
     const cookieName = `builder.tests.${contentId}`;
     const variantInCookie = getCookie(cookieName);
-    const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+    const availableIDs = variants.map(vr => vr.id).concat(contentId);
     /**
      * cookie already exists
      */
@@ -112,14 +94,10 @@ function bldrAbTest(
      * no variant found, assign default content
      */
     setCookie(cookieName, contentId);
-
     return contentId;
   }
-
   const winningVariantId = getAndSetVariantId();
-
-  const styleEl = document.currentScript
-    ?.previousElementSibling as HTMLStyleElement;
+  const styleEl = (document.currentScript?.previousElementSibling as HTMLStyleElement);
 
   /**
    * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
@@ -130,15 +108,12 @@ function bldrAbTest(
     thisScriptEl?.remove();
   } else {
     /* update styles to hide all variants except the winning variant */
-    const newStyleStr = variants
-      .concat({ id: contentId })
-      .filter((variant) => variant.id !== winningVariantId)
-      .map((value) => {
-        return `.variant-${value.id} {  display: none; }
+    const newStyleStr = variants.concat({
+      id: contentId
+    }).filter(variant => variant.id !== winningVariantId).map(value => {
+      return `.variant-${value.id} {  display: none; }
         `;
-      })
-      .join('');
-
+    }).join('');
     styleEl.innerHTML = newStyleStr;
   }
 }
@@ -147,15 +122,10 @@ function bldrAbTest(
  * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
  * Make sure to write multi-line comments only.
  */
-function bldrCntntScrpt(
-  variantContentId: string,
-  defaultContentId: string,
-  isHydrationTarget: boolean
-) {
+function bldrCntntScrpt(variantContentId: string, defaultContentId: string, isHydrationTarget: boolean) {
   if (!navigator.cookieEnabled) {
     return;
   }
-
   function getCookie(name: string) {
     const nameEQ = name + '=';
     const ca = document.cookie.split(';');
@@ -168,11 +138,8 @@ function bldrCntntScrpt(
   }
   const cookieName = `builder.tests.${defaultContentId}`;
   const variantId = getCookie(cookieName);
-
   const parentDiv = document.currentScript?.parentElement;
-
   const variantIsDefaultContent = variantContentId === defaultContentId;
-
   if (variantId === variantContentId) {
     if (variantIsDefaultContent) {
       /** the default content is already visible, no need to do anything */
@@ -203,13 +170,9 @@ function bldrCntntScrpt(
      */
     return;
   }
-
   return;
 }
-
-const getIsHydrationTarget = (target: Target) =>
-  target === 'react' || target === 'reactNative';
-
+const getIsHydrationTarget = (target: Target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 
 /**
@@ -220,34 +183,25 @@ const isHydrationTarget = getIsHydrationTarget(TARGET);
  */
 const AB_TEST_FN_NAME = 'builderIoAbTest';
 const CONTENT_FN_NAME = 'builderIoRenderContent';
-
 export const getScriptString = () => {
   const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
   const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
-
   return `
   window.${AB_TEST_FN_NAME} = ${fnStr}
   window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
-
-export const getVariantsScriptString = (
-  variants: VariantData[],
-  contentId: string
-) => {
+export const getVariantsScriptString = (variants: VariantData[], contentId: string) => {
   return `
-  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(
-    variants
-  )}, ${isHydrationTarget})`;
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
 };
-
 export const getRenderContentScriptString = ({
   contentId,
-  variationId,
+  variationId
 }: {
   variationId: string;
   contentId: string;
 }) => {
   return `
   window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
-};
+}

package/src/constants/builder-registered-components.ts

@@ -26,17 +26,37 @@ import { componentInfo as customCodeInfo } from '../blocks/custom-code/component
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
  */
-export const getDefaultRegisteredComponents: () => RegisteredComponent[] =
-  () => [
-    { component: Button, ...buttonComponentInfo },
-    { component: Columns, ...columnsComponentInfo },
-    { component: customCode, ...customCodeInfo },
-    { component: embed, ...embedComponentInfo },
-    { component: Fragment, ...fragmentComponentInfo },
-    { component: Image, ...imageComponentInfo },
-    { component: Img, ...imgComponentInfo },
-    { component: Section, ...sectionComponentInfo },
-    { component: Symbol, ...symbolComponentInfo },
-    { component: Text, ...textComponentInfo },
-    { component: Video, ...videoComponentInfo },
-  ];
+export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () => [{
+  component: Button,
+  ...buttonComponentInfo
+}, {
+  component: Columns,
+  ...columnsComponentInfo
+}, {
+  component: customCode,
+  ...customCodeInfo
+}, {
+  component: embed,
+  ...embedComponentInfo
+}, {
+  component: Fragment,
+  ...fragmentComponentInfo
+}, {
+  component: Image,
+  ...imageComponentInfo
+}, {
+  component: Img,
+  ...imgComponentInfo
+}, {
+  component: Section,
+  ...sectionComponentInfo
+}, {
+  component: Symbol,
+  ...symbolComponentInfo
+}, {
+  component: Text,
+  ...textComponentInfo
+}, {
+  component: Video,
+  ...videoComponentInfo
+}]

package/src/constants/device-sizes.ts

@@ -1,65 +1,59 @@
-import { fastClone } from '../functions/fast-clone';
+import { fastClone } from '../functions/fast-clone.js';
 export type SizeName = 'large' | 'medium' | 'small';
-
 interface Size {
   min: number;
   default: number;
   max: number;
 }
-
 const SIZES: Record<SizeName, Size> = {
   small: {
     min: 320,
     default: 321,
-    max: 640,
+    max: 640
   },
   medium: {
     min: 641,
     default: 642,
-    max: 991,
+    max: 991
   },
   large: {
     min: 990,
     default: 991,
-    max: 1200,
-  },
+    max: 1200
+  }
 };
-
-export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) =>
-  `@media (max-width: ${sizeValues[size].max}px)`;
-
+export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 interface Breakpoints {
   small?: number;
   medium?: number;
 }
-
-export const getSizesForBreakpoints = ({ small, medium }: Breakpoints) => {
+export const getSizesForBreakpoints = ({
+  small,
+  medium
+}: Breakpoints) => {
   const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
 
   if (!small || !medium) {
     return newSizes;
   }
-
   const smallMin = Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
-    default: smallMin + 1,
+    default: smallMin + 1
   };
-
   const mediumMin = newSizes.small.max + 1;
   newSizes.medium = {
     max: medium,
     min: mediumMin,
-    default: mediumMin + 1,
+    default: mediumMin + 1
   };
-
   const largeMin = newSizes.medium.max + 1;
   newSizes.large = {
-    max: 2000, // TODO: decide upper limit
+    max: 2000,
+    // TODO: decide upper limit
     min: largeMin,
-    default: largeMin + 1,
+    default: largeMin + 1
   };
-
   return newSizes;
-};
+}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.5"
+export const SDK_VERSION = "0.5.0"

package/src/constants/target.ts

@@ -1,2 +1,4 @@
+type Target = import('../types/targets').Target;
+
 /** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
-export const TARGET = 'svelte';
+export const TARGET = 'svelte' as Target;

package/src/context/builder.context.ts

@@ -10,7 +10,7 @@ export default {
     rootState: {},
     apiKey: null,
     apiVersion: undefined,
-    registeredComponents: {},
+    componentInfos: {},
     inheritedStyles: {},
   }),
   key,