@builder.io/sdk-svelte 4.0.8 → 4.0.10

package/src/blocks/personalization-container/helpers.ts

@@ -2,8 +2,13 @@ import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
 import type { BuilderBlock } from '../../types/builder-block';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT } from './helpers/inlined-fns';
+import type { Target } from '../../types/targets';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 import type { PersonalizationContainerProps } from './personalization-container.types';
+export const DEFAULT_INDEX = 'default';
+const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
+const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
+const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
 export type UserAttributes = {
   date?: string | Date;
   urlPath?: string;
@@ -16,12 +21,33 @@ export type Query = {
   operator: QueryOperator;
   value: QueryValue;
 };
+type BlocksToRenderReturnType = {
+  blocks: BuilderBlock[];
+  path: string;
+  index: number | typeof DEFAULT_INDEX;
+};
+
+/**
+ * SDKs that support Variant Containers
+ */
+export const SDKS_SUPPORTING_PERSONALIZATION = (['react', 'vue', 'svelte', 'qwik'] as Target[]);
+
+/**
+ * After hydration, we reset the tree
+ * These SDKs handle Personalization Container in a special way:
+ * - first, the inlined script will help us add `display: none`, `aria-hidden: true` and `hidden: true` to the non-winning variants
+ * - then, on mount / when the component is hydrated - we reset the tree with only the winning variant and deleting the entire tree
+ *
+ * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
+ * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
+ */
+export const SDKS_REQUIRING_RESET_APPROACH = (['vue', 'svelte', 'qwik'] as Target[]);
 export function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean) {
   const hasVariants = variants && variants.length > 0;
   if (TARGET === 'reactNative') return false;
   if (!hasVariants) return false;
   if (!canTrack) return false;
-  if (TARGET === 'vue' || TARGET === 'svelte') return true;
+  if (SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) return true;
   if (isBrowser()) return false;
   return true;
 }
@@ -37,22 +63,23 @@ export function getBlocksToRender({
   isHydrated: boolean;
   filteredVariants: PersonalizationContainerProps['variants'];
   fallbackBlocks?: BuilderBlock[];
-}): {
-  blocks: BuilderBlock[];
-  path: string | undefined;
-} {
-  const fallback = {
+}): BlocksToRenderReturnType {
+  const fallback: BlocksToRenderReturnType = {
     blocks: fallbackBlocks ?? [],
-    path: 'this.children'
+    path: 'this.children',
+    index: DEFAULT_INDEX
   };
   if (isHydrated && isEditing()) {
     // If editing a specific variant
     if (typeof previewingIndex === 'number' && previewingIndex < (variants?.length ?? 0)) {
-      const variant = variants![previewingIndex];
-      return {
-        blocks: variant.blocks,
-        path: `component.options.variants.${previewingIndex}.blocks`
-      };
+      const variant = variants?.[previewingIndex];
+      if (variant) {
+        return {
+          blocks: variant.blocks,
+          path: `variants.${previewingIndex}.blocks`,
+          index: previewingIndex
+        };
+      }
     }
     // Otherwise we're editing the default variant
     return fallback;
@@ -61,24 +88,33 @@ export function getBlocksToRender({
   // If we're on the browser, check if there's a winning variant
   if (isBrowser()) {
     const winningVariant = filteredVariants?.[0];
-    if (winningVariant) {
-      return {
-        blocks: winningVariant.blocks,
-        path: `component.options.variants.${variants?.indexOf(winningVariant)}.blocks`
-      };
+    if (winningVariant && variants) {
+      const variantIndex = variants.indexOf(winningVariant);
+      if (variantIndex !== -1) {
+        return {
+          blocks: winningVariant.blocks,
+          path: `variants.${variantIndex}.blocks`,
+          index: variantIndex
+        };
+      }
     }
   }
 
   // If no winning variant or we are on the server, return the default variant
   return fallback;
 }
-export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+export const getInitPersonalizationVariantsFnsScriptString = () => {
   return `
-  (function() {
-    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
-    ${PERSONALIZATION_SCRIPT}
-    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ''})
-  })();
+  window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+  window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT}
   `;
 };
+const isHydrationTarget = TARGET === 'react';
+export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
+export const getUpdateVisibilityStylesScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
 export { filterWithCustomTargeting } from './helpers/inlined-fns'

package/src/blocks/personalization-container/personalization-container.svelte

@@ -4,26 +4,43 @@
   import Blocks from "../../components/blocks/blocks.svelte";
   import InlinedScript from "../../components/inlined-script.svelte";
   import InlinedStyles from "../../components/inlined-styles.svelte";
+  import { TARGET } from "../../constants/target";
+  import { getClassPropName } from "../../functions/get-class-prop-name";
   import { isEditing } from "../../functions/is-editing";
   import { isPreviewing } from "../../functions/is-previewing";
   import { getDefaultCanTrack } from "../../helpers/canTrack";
   import { userAttributesService } from "../../helpers/user-attributes";
+  import { filterAttrs } from "../helpers";
   import {
     checkShouldRenderVariants,
+    DEFAULT_INDEX,
     filterWithCustomTargeting,
     getBlocksToRender,
     getPersonalizationScript,
+    getUpdateVisibilityStylesScript,
+    SDKS_REQUIRING_RESET_APPROACH,
   } from "./helpers";
   import type { PersonalizationContainerProps } from "./personalization-container.types";
+  import { setAttrs } from "../helpers";
 
   export let builderContext: PersonalizationContainerProps["builderContext"];
   export let variants: PersonalizationContainerProps["variants"] = undefined;
   export let builderBlock: PersonalizationContainerProps["builderBlock"];
-  export let previewingIndex: PersonalizationContainerProps["previewingIndex"] =
-    undefined;
   export let attributes: PersonalizationContainerProps["attributes"] =
     undefined;
+  export let previewingIndex: PersonalizationContainerProps["previewingIndex"] =
+    undefined;
+  export let builderComponents: PersonalizationContainerProps["builderComponents"];
 
+  $: attrs = () => {
+    return {
+      ...filterAttrs(attributes, "on:", false),
+      ...filterAttrs(attributes, "on:", true),
+      [getClassPropName()]: `builder-personalization-container ${
+        attributes[getClassPropName()] || ""
+      }`,
+    };
+  };
   $: filteredVariants = () => {
     return (variants || []).filter((variant) => {
       return filterWithCustomTargeting(
@@ -45,7 +62,7 @@
     return getBlocksToRender({
       variants: variants,
       fallbackBlocks: builderBlock?.children,
-      isHydrated: isHydrated,
+      isHydrated: shouldResetVariants,
       filteredVariants: filteredVariants(),
       previewingIndex: previewingIndex,
     });
@@ -54,7 +71,7 @@
     return (variants || [])
       .map(
         (_, index) =>
-          `[data-variant-id="${builderBlock?.id}-${index}"] { display: none; } `
+          `div[data-variant-id="${builderBlock?.id}-${index}"] { display: none !important; } `
       )
       .join("");
   };
@@ -67,18 +84,26 @@
     builderBlock?.id || "none",
     $builderContext?.rootState?.locale as string | undefined
   );
+  let updateVisibilityStylesScript = getUpdateVisibilityStylesScript(
+    variants,
+    builderBlock?.id || "none",
+    $builderContext?.rootState?.locale as string | undefined
+  );
   let unsubscribers = [];
   let shouldRenderVariants = checkShouldRenderVariants(
     variants,
     getDefaultCanTrack($builderContext?.canTrack)
   );
-  let isHydrated = false;
+  let shouldResetVariants = false;
 
   onMount(() => {
-    isHydrated = true;
+    shouldResetVariants = true;
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs) => {
         userAttributes = attrs;
+      },
+      {
+        fireImmediately: TARGET === "qwik",
       }
     );
     if (!(isEditing() || isPreviewing())) {
@@ -87,7 +112,7 @@
         rootRef.dispatchEvent(
           new CustomEvent("builder.variantLoaded", {
             detail: {
-              variant: variant || "default",
+              variant: variant || DEFAULT_INDEX,
               content: $builderContext?.content,
             },
             bubbles: true,
@@ -99,7 +124,7 @@
               rootRef.dispatchEvent(
                 new CustomEvent("builder.variantDisplayed", {
                   detail: {
-                    variant: variant || "default",
+                    variant: variant || DEFAULT_INDEX,
                     content: $builderContext?.content,
                   },
                   bubbles: true,
@@ -119,37 +144,72 @@
   });
 </script>
 
-<div
-  bind:this={rootRef}
-  {...attributes}
-  class={`builder-personalization-container ${attributes?.className || ""}`}
->
-  {#if shouldRenderVariants}
-    {#each variants as variant, index (index)}
-      <svelte:element
-        this={"template"}
-        data-variant-id={`${builderBlock?.id}-${index}`}
-        ><Blocks
+<div bind:this={rootRef} {...attrs()}>
+  {#if shouldResetVariants && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)}
+    <Blocks
+      blocks={blocksToRender().blocks}
+      parent={builderBlock?.id}
+      path={blocksToRender().path}
+      context={builderContext}
+      registeredComponents={builderComponents}
+      BlocksWrapperProps={{
+        ...$builderContext?.BlocksWrapperProps,
+        "data-variant-id": `${builderBlock?.id}-${blocksToRender().index}`,
+      }}
+    />
+  {/if}
+  {#if (!shouldResetVariants && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) || !SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)}
+    {#if shouldRenderVariants}
+      <InlinedStyles
+        nonce={$builderContext?.nonce || ""}
+        styles={hideVariantsStyleString()}
+        id={`variants-styles-${builderBlock?.id}`}
+      />
+      <InlinedScript
+        nonce={$builderContext?.nonce || ""}
+        scriptStr={updateVisibilityStylesScript}
+        id={`variants-visibility-script-${builderBlock?.id}`}
+      />
+
+      {#each variants as variant, index (`${builderBlock?.id}-${index}`)}
+        <Blocks
+          BlocksWrapperProps={{
+            ...$builderContext?.BlocksWrapperProps,
+            "aria-hidden": true,
+            hidden: true,
+            "data-variant-id": `${builderBlock?.id}-${index}`,
+          }}
           blocks={variant.blocks}
           parent={builderBlock?.id}
           path={`component.options.variants.${index}.blocks`}
-        /></svelte:element
-      >
-    {/each}
-
-    <InlinedStyles
-      nonce={$builderContext?.nonce || ""}
-      styles={hideVariantsStyleString()}
-      id={`variants-styles-${builderBlock?.id}`}
-    />
-    <InlinedScript
-      nonce={$builderContext?.nonce || ""}
-      {scriptStr}
-      id={`variants-script-${builderBlock?.id}`}
-    />
-  {/if}<Blocks
-    blocks={blocksToRender().blocks}
-    parent={builderBlock?.id}
-    path={blocksToRender().path}
-  />
+          context={builderContext}
+          registeredComponents={builderComponents}
+          ><InlinedScript
+            nonce={$builderContext?.nonce || ""}
+            {scriptStr}
+            id={`variants-script-${builderBlock?.id}-${index}`}
+          /></Blocks
+        >
+      {/each}
+    {/if}
+    <Blocks
+      blocks={blocksToRender().blocks}
+      parent={builderBlock?.id}
+      path={blocksToRender().path}
+      context={builderContext}
+      registeredComponents={builderComponents}
+      BlocksWrapperProps={{
+        ...$builderContext?.BlocksWrapperProps,
+        "data-variant-id": `${builderBlock?.id}-${blocksToRender().index}`,
+      }}
+    >
+      {#if shouldRenderVariants}
+        <InlinedScript
+          nonce={$builderContext?.nonce || ""}
+          {scriptStr}
+          id={`variants-script-${builderBlock?.id}-${DEFAULT_INDEX}`}
+        />
+      {/if}</Blocks
+    >
+  {/if}
 </div>

package/src/blocks/personalization-container/personalization-container.types.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
-import type { BuilderDataProps } from '../../types/builder-props';
+import type { BuilderComponentsProp, BuilderDataProps } from '../../types/builder-props';
 import type { Query } from './helpers';
 export type PersonalizationContainerProps = {
   children?: any;
@@ -11,4 +11,4 @@ export type PersonalizationContainerProps = {
     startDate?: string;
     endDate?: string;
   }>;
-} & BuilderDataProps
+} & BuilderDataProps & BuilderComponentsProp

package/src/components/blocks/blocks-wrapper.svelte

@@ -9,7 +9,19 @@
      */
     BlocksWrapper: any;
     /**
-     * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+     * Props to be applied to the wrapping element of blocks. Can be set in two ways:
+     * 1. Globally via `<Content blocksWrapperProps={{...}}/>` - applies to all blocks wrappers in the Content
+     * 2. Locally via `<Blocks BlocksWrapperProps={{...}}/>` - applies only to this specific blocks instance and overrides global props
+     *
+     * For merging both global and local props, spread the context props before adding your own:
+     * ```
+     * <Blocks
+     *   BlocksWrapperProps={{
+     *     ...builderContext.BlocksWrapperProps,
+     *     'data-test-id': 'my-test-id'
+     *   }}
+     * />
+     * ```
      */
     BlocksWrapperProps: any;
     children?: any;

package/src/components/blocks/blocks.svelte

@@ -11,8 +11,10 @@
   export let parent: BlocksProps["parent"];
   export let path: BlocksProps["path"];
   export let styleProp: BlocksProps["styleProp"];
-  export let className: BlocksProps["className"] = undefined;
+  export let BlocksWrapperProps: BlocksProps["BlocksWrapperProps"];
   export let context: BlocksProps["context"] = undefined;
+  export let className: BlocksProps["className"] = undefined;
+
   export let linkComponent: BlocksProps["linkComponent"] = undefined;
   export let registeredComponents: BlocksProps["registeredComponents"] =
     undefined;
@@ -26,11 +28,12 @@
   {parent}
   {path}
   {styleProp}
+  BlocksWrapperProps={BlocksWrapperProps ||
+    $context?.BlocksWrapperProps ||
+    $builderContext?.BlocksWrapperProps}
   classNameProp={className}
   BlocksWrapper={$context?.BlocksWrapper || $builderContext?.BlocksWrapper}
-  BlocksWrapperProps={$context?.BlocksWrapperProps ||
-    $builderContext?.BlocksWrapperProps}
->
+  ><slot />
   {#if blocks}
     {#each blocks as block (block.id)}
       <Block

package/src/components/blocks/blocks.types.ts

@@ -1,7 +1,7 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'classNameProp'>> & {
   context?: Writable<BuilderContextInterface>;
   registeredComponents?: RegisteredComponents;
   linkComponent?: any;

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

@@ -10,6 +10,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
+  import {
+    SDKS_SUPPORTING_PERSONALIZATION,
+    getInitPersonalizationVariantsFnsScriptString,
+  } from "../../blocks/personalization-container/helpers";
   import { TARGET } from "../../constants/target";
   import { handleABTestingSync } from "../../helpers/ab-tests";
   import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -94,6 +98,14 @@
     scriptStr={getInitVariantsFnsScriptString()}
     nonce={nonce || ""}
   />
+
+  {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
+    <InlinedScript
+      id="builderio-init-personalization-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+    />
+  {/if}
 {/if}
 
 {#if shouldRenderVariants}

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

@@ -9,6 +9,7 @@ import { default as Fragment } from '../blocks/fragment/index';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info';
 import { default as Image } from '../blocks/image/index';
 import { componentInfo as personalizationContainerComponentInfo } from '../blocks/personalization-container/component-info';
+import { SDKS_SUPPORTING_PERSONALIZATION } from '../blocks/personalization-container/helpers';
 import { default as PersonalizationContainer } from '../blocks/personalization-container/index';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info';
 import { default as Section } from '../blocks/section/index';
@@ -52,7 +53,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Text,
   ...textComponentInfo
-}, ...(TARGET === 'react' ? [{
+}, ...(SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
   component: PersonalizationContainer,
   ...personalizationContainerComponentInfo
 }] : []), ...(TARGET === 'rsc' ? [] : [{

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.8"
+export const SDK_VERSION = "4.0.10"

package/src/helpers/no-serialize-wrapper.ts

@@ -0,0 +1,3 @@
+export function noSerializeWrapper(fn: () => void) {
+  return fn;
+}

package/src/helpers/user-attributes.ts

@@ -1,5 +1,7 @@
+import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
+import { noSerializeWrapper } from './no-serialize-wrapper';
 export interface UserAttributes {
   [key: string]: any;
 }
@@ -32,18 +34,34 @@ export function createUserAttributesService() {
         canTrack
       }) || '{}');
     },
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void) {
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, {
+      fireImmediately
+    }: {
+      fireImmediately?: boolean;
+    } = {}) {
       subscribers.add(callback);
-      return () => {
+      if (fireImmediately) {
+        callback(this.getUserAttributes());
+      }
+      return noSerializeWrapper(function () {
         subscribers.delete(callback);
-      };
+      });
     },
     setCanTrack(value: boolean) {
       canTrack = value;
     }
   };
 }
-export const userAttributesService = createUserAttributesService();
+let _userAttributesService: ReturnType<typeof createUserAttributesService>;
+if (isBrowser() && TARGET === 'qwik') {
+  if (!(window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__) {
+    (window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__ = createUserAttributesService();
+  }
+  _userAttributesService = (window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__;
+} else {
+  _userAttributesService = createUserAttributesService();
+}
+export const userAttributesService = _userAttributesService;
 export const setClientUserAttributes = (attributes: UserAttributes) => {
   userAttributesService.setUserAttributes(attributes);
 }