@builder.io/sdk-svelte 0.4.4 → 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/content/content.types.ts

@@ -0,0 +1,23 @@
+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;
+      };
+    };
+  };
+}

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/content-variants/content-variants.svelte

@@ -0,0 +1,120 @@
+<script context="module" lang="ts">
+  type VariantsProviderProps = ContentVariantsProps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  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";
+  import type { ContentVariantsProps } from "./content-variants.types.js";
+
+  export let canTrack: VariantsProviderProps["canTrack"];
+  export let content: VariantsProviderProps["content"];
+  export let __isNestedRender: VariantsProviderProps["__isNestedRender"];
+  export let model: VariantsProviderProps["model"];
+  export let data: VariantsProviderProps["data"];
+  export let context: VariantsProviderProps["context"];
+  export let apiKey: VariantsProviderProps["apiKey"];
+  export let apiVersion: VariantsProviderProps["apiVersion"];
+  export let customComponents: VariantsProviderProps["customComponents"];
+  export let locale: VariantsProviderProps["locale"];
+  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,
+  });
+
+  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={shouldRenderVariants
+    ? content
+    : handleABTestingSync({
+        item: content,
+        canTrack: getDefaultCanTrack(canTrack),
+      })}
+  classNameProp={`variant-${content?.id}`}
+  showContent={true}
+  {model}
+  {data}
+  {context}
+  {apiKey}
+  {apiVersion}
+  {customComponents}
+  {canTrack}
+  {locale}
+  {includeRefs}
+  {enrich}
+  isSsrAbTest={shouldRenderVariants}
+/>

package/src/components/content-variants/content-variants.types.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 ContentVariantsProps {
+  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/src/components/{render-content-variants → content-variants}/helpers.ts

@@ -1,36 +1,40 @@
-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 || {});
-
+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>;
 }) => {
   const hasVariants = getVariants(content).length > 0;
 
-  if (!hasVariants) {
-    return false;
-  }
-
-  if (!canTrack) {
-    return false;
-  }
-
-  if (isBrowser()) {
-    return false;
-  }
+  /**
+   * We cannot SSR in React-Native.
+   */
+  if (TARGET === 'reactNative') return false;
+  if (!hasVariants) return false;
+  if (!canTrack) return false;
 
+  /**
+   * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+   * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
+   * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
+   *
+   * 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;
@@ -40,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 = '';
@@ -53,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 + '=';
@@ -67,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
      */
@@ -101,37 +94,26 @@ function bldrAbTest(
      * no variant found, assign default content
      */
     setCookie(cookieName, contentId);
-
     return contentId;
   }
-
   const winningVariantId = getAndSetVariantId();
-
-  const styleEl = document.getElementById(
-    `variants-styles-${contentId}`
-  ) 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.
    */
   if (isHydrationTarget) {
     styleEl.remove();
-    const thisScriptEl = document.getElementById(
-      `variants-script-${contentId}`
-    );
+    const thisScriptEl = document.currentScript;
     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('');
-
-    /* TO-DO: check if this actually updates the style */
+    }).join('');
     styleEl.innerHTML = newStyleStr;
   }
 }
@@ -140,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(';');
@@ -161,14 +138,8 @@ function bldrCntntScrpt(
   }
   const cookieName = `builder.tests.${defaultContentId}`;
   const variantId = getCookie(cookieName);
-
-  /** get parent div by searching on `builder-content-id` attr */
-  const parentDiv = document.querySelector(
-    `[builder-content-id="${variantContentId}"]`
-  );
-
+  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 */
@@ -199,16 +170,9 @@ function bldrCntntScrpt(
      */
     return;
   }
-
   return;
 }
-
-const getIsHydrationTarget = (target: Target) =>
-  target === 'react' ||
-  target === 'reactNative' ||
-  target === 'vue3' ||
-  target === 'vue2';
-
+const getIsHydrationTarget = (target: Target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 
 /**
@@ -217,32 +181,27 @@ const isHydrationTarget = getIsHydrationTarget(TARGET);
  *
  * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
  */
-const AB_TEST_FN_NAME = 'bldrAbTest';
-const CONTENT_FN_NAME = 'bldrCntntScrpt';
-
-export const getVariantsScriptString = (
-  variants: VariantData[],
-  contentId: string
-) => {
+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 `
-  const ${AB_TEST_FN_NAME} = ${fnStr}
-  const ${CONTENT_FN_NAME} = ${fnStr2}
-  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(
-    variants
-  )}, ${isHydrationTarget})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
-
+export const getVariantsScriptString = (variants: VariantData[], contentId: string) => {
+  return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
 export const getRenderContentScriptString = ({
-  parentContentId,
   contentId,
+  variationId
 }: {
+  variationId: string;
   contentId: string;
-  parentContentId: string;
 }) => {
   return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
-};
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
+}

package/src/components/inlined-script.svelte

@@ -0,0 +1,13 @@
+<script context="module" lang="ts">
+  interface Props {
+    scriptStr: string;
+    id?: string;
+  }
+</script>
+
+<script lang="ts">
+  export let scriptStr: Props["scriptStr"];
+  export let id: Props["id"];
+</script>
+
+<svelte:element this={"script"} {id}>{@html scriptStr}</svelte:element>

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
+}]