@builder.io/sdk-svelte 0.4.3 → 0.4.5

package/package/components/render-content-variants/render-content-variants.types.d.ts

@@ -0,0 +1,20 @@
+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 {
+    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/package/components/render-content-variants/render-content-variants.types.js

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

package/package/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.3";
+export declare const SDK_VERSION = "0.4.5";

package/package/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.3";
+export const SDK_VERSION = "0.4.5";

package/package/functions/track/index.js

@@ -43,7 +43,7 @@ export async function _track(eventProps) {
     if (!(isBrowser() || TARGET === 'reactNative')) {
         return;
     }
-    return fetch(`https://builder.io/api/v1/track`, {
+    return fetch(`https://cdn.builder.io/api/v1/track`, {
         method: 'POST',
         body: JSON.stringify({
             events: [await createEvent(eventProps)],

package/package/helpers/ab-tests.js

@@ -1,6 +1,7 @@
 import { getCookie, getCookieSync, setCookie } from './cookie.js';
 import { checkIsDefined } from '../helpers/nullable.js';
 import { logger } from './logger.js';
+import { TARGET } from '../constants/target.js';
 const BUILDER_STORE_PREFIX = 'builder.tests';
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
 const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
@@ -59,6 +60,11 @@ const getTestFields = ({ item, testGroupId, }) => {
     }
 };
 export const handleABTestingSync = ({ item, canTrack, }) => {
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
+        return item;
     if (!canTrack) {
         return item;
     }

package/package/types/enforced-partials.d.ts

@@ -0,0 +1,21 @@
+import type { Prettify } from './typescript';
+type OptionalFieldsOnly<T> = {
+    [K in keyof T as T[K] extends Required<T>[K] ? never : K]: T[K];
+};
+type RequiredFieldsOnly<T> = {
+    [K in keyof T as T[K] extends Required<T>[K] ? K : never]: T[K];
+};
+type Enforced<T> = {
+    [K in keyof T]-?: T[K];
+};
+type AndUndefined<T> = {
+    [K in keyof T]: T[K] | undefined;
+};
+/**
+ * Enforce that all optional fields are undefined
+ * @example
+ * type Foo = { a: string, b?: number }
+ * type Bar = EnforcePartials<Foo> // { a: string, b: number | undefined }
+ */
+export type EnforcePartials<From> = Prettify<AndUndefined<Enforced<OptionalFieldsOnly<From>>> & RequiredFieldsOnly<From>>;
+export {};

package/package/types/enforced-partials.js

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

package/package/types/typescript.d.ts

@@ -3,3 +3,6 @@ export type Dictionary<T> = {
     [key: string]: T;
 };
 export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "files": [
     "package",

package/src/blocks/columns/columns.svelte

@@ -24,7 +24,7 @@
   import type { BuilderBlock } from "../../types/builder-block";
   import { getSizesForBreakpoints } from "../../constants/device-sizes";
   import type { SizeName } from "../../constants/device-sizes";
-  import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
+  import InlinedStyles from "../../components/inlined-styles.svelte";
   import { TARGET } from "../../constants/target.js";
   import BuilderContext from "../../context/builder.context.js";
   import type { Dictionary } from "../../types/typescript";
@@ -171,7 +171,7 @@
   }}
 >
   {#if TARGET !== "reactNative"}
-    <RenderInlinedStyles styles={columnsStyles()} />
+    <InlinedStyles styles={columnsStyles()} />
   {/if}
 
   {#each columns as column, index (index)}

package/src/blocks/symbol/symbol.svelte

@@ -21,7 +21,7 @@
 <script lang="ts">
   import { getContext, onMount } from "svelte";
 
-  import RenderContent from "../../components/render-content/render-content.svelte";
+  import RenderContentVariants from "../../components/render-content-variants/render-content-variants.svelte";
   import BuilderContext from "../../context/builder.context.js";
   import { getContent } from "../../functions/get-content/index.js";
   import type { BuilderContent } from "../../types/builder-content.js";
@@ -84,9 +84,11 @@
         model: symbol.model,
         apiKey: $builderContext.apiKey,
         apiVersion: $builderContext.apiVersion,
-        query: {
-          id: symbol.entry,
-        },
+        ...(symbol?.entry && {
+          query: {
+            id: symbol.entry,
+          },
+        }),
       })
         .then((response) => {
           if (response) {
@@ -129,7 +131,8 @@
   class={className}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
-  <RenderContent
+  <RenderContentVariants
+    __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={$builderContext.context}

package/src/blocks/text/text.svelte

@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   export interface TextProps {
-    text: string;
+    text?: string;
   }
 </script>
 
@@ -22,5 +22,5 @@
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text}</span
+  class="builder-text">{@html text?.toString()}</span
 >

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/components/render-block/block-styles.svelte

@@ -16,7 +16,7 @@
   import { createCssClass } from "../../helpers/css.js";
   import { checkIsDefined } from "../../helpers/nullable.js";
   import type { BuilderBlock } from "../../types/builder-block.js";
-  import RenderInlinedStyles from "../render-inlined-styles.svelte";
+  import InlinedStyles from "../inlined-styles.svelte";
 
   export let block: BlockStylesProps["block"];
   export let context: BlockStylesProps["context"];
@@ -85,5 +85,5 @@
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <RenderInlinedStyles styles={css()} />
+  <InlinedStyles styles={css()} />
 {/if}

package/src/components/render-content/components/render-styles.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+  import InlinedStyles from "../../inlined-styles.svelte";
   import type { CustomFont } from "./render-styles.helpers";
   import { getCss } from "./render-styles.helpers";
   import { getFontCss } from "./render-styles.helpers";
@@ -40,4 +40,4 @@ ${getFontCss({
 `.trim();
 </script>
 
-<RenderInlinedStyles styles={injectedStyles} />
+<InlinedStyles styles={injectedStyles} />

package/src/components/render-content/render-content.svelte

@@ -45,6 +45,7 @@
   import { logger } from "../../helpers/logger.js";
   import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
   import { wrapComponentRef } from "./wrap-component-ref.js";
+  import InlinedScript from "../inlined-script.svelte";
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
@@ -80,12 +81,11 @@
   export let context: RenderContentProps["context"];
   export let apiKey: RenderContentProps["apiKey"];
   export let content: RenderContentProps["content"];
-  export let parentContentId: RenderContentProps["parentContentId"];
   export let data: RenderContentProps["data"];
   export let locale: RenderContentProps["locale"];
   export let apiVersion: RenderContentProps["apiVersion"];
   export let customComponents: RenderContentProps["customComponents"];
-  export let hideContent: RenderContentProps["hideContent"];
+  export let showContent: RenderContentProps["showContent"];
   export let classNameProp: RenderContentProps["classNameProp"];
   export let isSsrAbTest: RenderContentProps["isSsrAbTest"];
   export let includeRefs: RenderContentProps["includeRefs"];
@@ -255,9 +255,10 @@
   let httpReqsData = {};
   let clicked = false;
   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!,
-    parentContentId: parentContentId!,
   });
   let builderContextSignal = writable({
     content: getContentInitialValue({
@@ -446,12 +447,12 @@
         : {},
       isNonEvent
     )}
-    {...hideContent
-      ? {
+    {...showContent
+      ? {}
+      : {
           hidden: true,
           "aria-hidden": true,
-        }
-      : {}}
+        }}
     class={classNameProp}
     use:setAttrs={filterAttrs(
       TARGET === "reactNative"
@@ -467,7 +468,7 @@
     )}
   >
     {#if isSsrAbTest}
-      <svelte:element this={"script"}>{@html scriptStr}</svelte:element>
+      <InlinedScript {scriptStr} />
     {/if}
 
     {#if TARGET !== "reactNative"}

package/src/components/render-content/render-content.types.ts

@@ -1,34 +1,19 @@
-import type {
-  BuilderRenderContext,
-  RegisteredComponent,
-  BuilderRenderState,
-} from '../../context/types';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { ApiVersion } from '../../types/api-version';
+import type { BuilderRenderState } from '../../context/types';
+import type { EnforcePartials } from '../../types/enforced-partials';
+import type { RenderContentVariantsProps } from '../render-content-variants/render-content-variants.types';
 
-export interface RenderContentProps {
-  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;
+interface InternalRenderProps {
   /**
    * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
    */
-  classNameProp?: string;
-  hideContent?: boolean;
-  parentContentId?: string;
-  isSsrAbTest?: boolean;
+  classNameProp: string | undefined;
+  showContent: boolean;
+  isSsrAbTest: boolean;
 }
 
+export type RenderContentProps = InternalRenderProps &
+  EnforcePartials<RenderContentVariantsProps>;
+
 export interface BuilderComponentStateChange {
   state: BuilderRenderState;
   ref: {

package/src/components/render-content-variants/helpers.ts

@@ -5,7 +5,11 @@ import type { BuilderContent } from '../../types/builder-content';
 import type { Target } from '../../types/targets';
 
 export const getVariants = (content: Nullable<BuilderContent>) =>
-  Object.values(content?.variations || {});
+  Object.values(content?.variations || {}).map((variant) => ({
+    ...variant,
+    testVariationId: variant.id,
+    id: content?.id,
+  }));
 
 export const checkShouldRunVariants = ({
   canTrack,
@@ -16,17 +20,24 @@ export const checkShouldRunVariants = ({
 }) => {
   const hasVariants = getVariants(content).length > 0;
 
-  if (!hasVariants) {
-    return false;
-  }
+  /**
+   * We cannot SSR in React-Native.
+   */
+  if (TARGET === 'reactNative') return false;
 
-  if (!canTrack) {
-    return false;
-  }
+  if (!hasVariants) return false;
+  if (!canTrack) return false;
 
-  if (isBrowser()) {
-    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;
 };
@@ -107,18 +118,15 @@ function bldrAbTest(
 
   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 */
@@ -131,7 +139,6 @@ function bldrAbTest(
       })
       .join('');
 
-    /* TO-DO: check if this actually updates the style */
     styleEl.innerHTML = newStyleStr;
   }
 }
@@ -162,10 +169,7 @@ 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;
 
@@ -204,10 +208,7 @@ function bldrCntntScrpt(
 }
 
 const getIsHydrationTarget = (target: Target) =>
-  target === 'react' ||
-  target === 'reactNative' ||
-  target === 'vue3' ||
-  target === 'vue2';
+  target === 'react' || target === 'reactNative';
 
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 
@@ -217,32 +218,36 @@ 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';
+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
 ) => {
-  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(
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(
     variants
-  )}, ${isHydrationTarget})
-  `;
+  )}, ${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/render-content-variants/render-content-variants.svelte

@@ -1,83 +1,118 @@
 <script context="module" lang="ts">
-  type VariantsProviderProps = RenderContentProps;
+  type VariantsProviderProps = RenderContentVariantsProps & {
+    /**
+     * 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";
   import RenderContent from "../render-content/render-content.svelte";
-  import type { RenderContentProps } from "../render-content/render-content.types";
   import { getDefaultCanTrack } from "../../helpers/canTrack";
-  import RenderInlinedStyles from "../render-inlined-styles.svelte";
+  import InlinedStyles from "../inlined-styles.svelte";
   import { handleABTestingSync } from "../../helpers/ab-tests";
+  import InlinedScript from "../inlined-script.svelte";
+  import { TARGET } from "../../constants/target";
+  import type { RenderContentVariantsProps } from "./render-content-variants.types";
 
-  export let content: VariantsProviderProps["content"];
   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 model: VariantsProviderProps["model"];
+  export let locale: VariantsProviderProps["locale"];
+  export let includeRefs: VariantsProviderProps["includeRefs"];
+  export let enrich: VariantsProviderProps["enrich"];
 
+  let shouldRenderVariants = checkShouldRunVariants({
+    canTrack: getDefaultCanTrack(canTrack),
+    content: content,
+  });
   let variantScriptStr = getVariantsScriptString(
     getVariants(content).map((value) => ({
-      id: value.id!,
+      id: value.testVariationId!,
       testRatio: value.testRatio,
     })),
     content?.id || ""
   );
-  let shouldRenderVariants = checkShouldRunVariants({
-    canTrack: getDefaultCanTrack(canTrack),
-    content: content,
-  });
   let hideVariantsStyleString = getVariants(content)
-    .map((value) => `.variant-${value.id} { display: none; } `)
+    .map((value) => `.variant-${value.testVariationId} { display: none; } `)
     .join("");
-  let contentToRender = checkShouldRunVariants({
-    canTrack: getDefaultCanTrack(canTrack),
-    content: content,
-  })
-    ? content
-    : handleABTestingSync({
-        item: content,
-        canTrack: getDefaultCanTrack(canTrack),
-      });
+
+  onMount(() => {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+    if (TARGET === "vue2" || TARGET === "vue3") {
+      shouldRenderVariants = false;
+    }
+  });
 </script>
 
+{#if !__isNestedRender && TARGET !== "reactNative"}
+  <InlinedScript scriptStr={getScriptString()} />
+{/if}
+
 {#if shouldRenderVariants}
-  <RenderInlinedStyles
+  <InlinedStyles
     id={`variants-styles-${content?.id}`}
     styles={hideVariantsStyleString}
   />
 
-  <svelte:element this={"script"} id={`variants-script-${content?.id}`}
-    >{@html variantScriptStr}</svelte:element
-  >
+  <InlinedScript scriptStr={variantScriptStr} />
 
-  {#each getVariants(content) as variant (variant.id)}
+  {#each getVariants(content) as variant (variant.testVariationId)}
     <RenderContent
       content={variant}
+      showContent={false}
+      classNameProp={undefined}
+      {model}
+      {data}
+      {context}
       {apiKey}
       {apiVersion}
-      {canTrack}
       {customComponents}
-      hideContent={true}
-      parentContentId={content?.id}
+      {canTrack}
+      {locale}
+      {includeRefs}
+      {enrich}
       isSsrAbTest={shouldRenderVariants}
     />
   {/each}
 {/if}
 
 <RenderContent
+  {...{}}
+  content={shouldRenderVariants
+    ? content
+    : handleABTestingSync({
+        item: content,
+        canTrack: getDefaultCanTrack(canTrack),
+      })}
+  classNameProp={`variant-${content?.id}`}
+  showContent={true}
   {model}
-  content={contentToRender}
+  {data}
+  {context}
   {apiKey}
   {apiVersion}
-  {canTrack}
   {customComponents}
-  classNameProp={`variant-${content?.id}`}
-  parentContentId={content?.id}
+  {canTrack}
+  {locale}
+  {includeRefs}
+  {enrich}
   isSsrAbTest={shouldRenderVariants}
 />

package/src/components/render-content-variants/render-content-variants.types.ts

@@ -0,0 +1,22 @@
+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 {
+  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/constants/sdk-version.ts

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

package/src/functions/track/index.ts

@@ -118,7 +118,7 @@ export async function _track(eventProps: EventProps) {
     return;
   }
 
-  return fetch(`https://builder.io/api/v1/track`, {
+  return fetch(`https://cdn.builder.io/api/v1/track`, {
     method: 'POST',
     body: JSON.stringify({
       events: [await createEvent(eventProps)],