@builder.io/sdk-svelte 3.0.5 → 3.0.6

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

@@ -0,0 +1,84 @@
+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 { PersonalizationContainerProps } from './personalization-container.types';
+export type UserAttributes = {
+  date?: string | Date;
+  urlPath?: string;
+  [key: string]: any;
+};
+type QueryOperator = 'is' | 'isNot' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqualTo' | 'lessThanOrEqualTo';
+type QueryValue = string | number | boolean | Array<string | number | boolean>;
+export type Query = {
+  property: string;
+  operator: QueryOperator;
+  value: QueryValue;
+};
+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 (isBrowser()) return false;
+  return true;
+}
+export function getBlocksToRender({
+  variants,
+  previewingIndex,
+  isHydrated,
+  filteredVariants,
+  fallbackBlocks
+}: {
+  variants: PersonalizationContainerProps['variants'];
+  previewingIndex?: number | null;
+  isHydrated: boolean;
+  filteredVariants: PersonalizationContainerProps['variants'];
+  fallbackBlocks?: BuilderBlock[];
+}): {
+  blocks: BuilderBlock[];
+  path: string | undefined;
+} {
+  const fallback = {
+    blocks: fallbackBlocks ?? [],
+    path: 'this.children'
+  };
+  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`
+      };
+    }
+    // Otherwise we're editing the default variant
+    return fallback;
+  }
+
+  // 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 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) => {
+  return `
+  (function() {
+    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+    ${PERSONALIZATION_SCRIPT}
+    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ''})
+  })();
+  `;
+};
+export { filterWithCustomTargeting } from './helpers/inlined-fns'

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

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

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

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+
+  import Blocks from "../../components/blocks/blocks.svelte";
+  import InlinedScript from "../../components/inlined-script.svelte";
+  import InlinedStyles from "../../components/inlined-styles.svelte";
+  import { isEditing } from "../../functions/is-editing";
+  import { isPreviewing } from "../../functions/is-previewing";
+  import { getDefaultCanTrack } from "../../helpers/canTrack";
+  import { userAttributesService } from "../../helpers/user-attributes";
+  import {
+    checkShouldRenderVariants,
+    filterWithCustomTargeting,
+    getBlocksToRender,
+    getPersonalizationScript,
+  } from "./helpers";
+  import type { PersonalizationContainerProps } from "./personalization-container.types";
+
+  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;
+
+  $: filteredVariants = () => {
+    return (variants || []).filter((variant) => {
+      return filterWithCustomTargeting(
+        {
+          ...($builderContext?.rootState?.locale
+            ? {
+                locale: $builderContext?.rootState?.locale,
+              }
+            : {}),
+          ...(userAttributes as any),
+        },
+        variant.query,
+        variant.startDate,
+        variant.endDate
+      );
+    });
+  };
+  $: blocksToRender = () => {
+    return getBlocksToRender({
+      variants: variants,
+      fallbackBlocks: builderBlock?.children,
+      isHydrated: isHydrated,
+      filteredVariants: filteredVariants(),
+      previewingIndex: previewingIndex,
+    });
+  };
+  $: hideVariantsStyleString = () => {
+    return (variants || [])
+      .map(
+        (_, index) =>
+          `[data-variant-id="${builderBlock?.id}-${index}"] { display: none; } `
+      )
+      .join("");
+  };
+
+  let rootRef;
+
+  let userAttributes = userAttributesService.getUserAttributes();
+  let scriptStr = getPersonalizationScript(
+    variants,
+    builderBlock?.id || "none",
+    $builderContext?.rootState?.locale as string | undefined
+  );
+  let unsubscribers = [];
+  let shouldRenderVariants = checkShouldRenderVariants(
+    variants,
+    getDefaultCanTrack($builderContext?.canTrack)
+  );
+  let isHydrated = false;
+
+  onMount(() => {
+    isHydrated = true;
+    const unsub = userAttributesService.subscribeOnUserAttributesChange(
+      (attrs) => {
+        userAttributes = attrs;
+      }
+    );
+    if (!(isEditing() || isPreviewing())) {
+      const variant = filteredVariants()[0];
+      if (rootRef) {
+        rootRef.dispatchEvent(
+          new CustomEvent("builder.variantLoaded", {
+            detail: {
+              variant: variant || "default",
+              content: $builderContext?.content,
+            },
+            bubbles: true,
+          })
+        );
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && rootRef) {
+              rootRef.dispatchEvent(
+                new CustomEvent("builder.variantDisplayed", {
+                  detail: {
+                    variant: variant || "default",
+                    content: $builderContext?.content,
+                  },
+                  bubbles: true,
+                })
+              );
+            }
+          });
+        });
+        observer.observe(rootRef);
+      }
+    }
+    unsubscribers.push(unsub);
+  });
+
+  onDestroy(() => {
+    unsubscribers.forEach((unsub) => unsub());
+  });
+</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
+          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}
+  />
+</div>

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

@@ -0,0 +1,14 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderDataProps } from '../../types/builder-props';
+import type { Query } from './helpers';
+export type PersonalizationContainerProps = {
+  children?: any;
+  attributes?: any;
+  previewingIndex?: number | null;
+  variants?: Array<{
+    blocks: BuilderBlock[];
+    query: Query[];
+    startDate?: string;
+    endDate?: string;
+  }>;
+} & BuilderDataProps

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

@@ -79,8 +79,13 @@
     if (!path) {
       return undefined;
     }
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return path.startsWith(pathPrefix) ? path : `${pathPrefix}${path || ""}`;
+    return path.startsWith(thisPrefix)
+      ? path.replace(thisPrefix, "")
+      : path.startsWith(pathPrefix)
+      ? path
+      : `${pathPrefix}${path || ""}`;
   };
 
   let blocksWrapperRef;

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

@@ -8,6 +8,8 @@ import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/compo
 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 { 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';
 import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info';
@@ -50,7 +52,10 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Text,
   ...textComponentInfo
-}, ...(TARGET === 'rsc' ? [] : [{
+}, ...(TARGET === 'react' ? [{
+  component: PersonalizationContainer,
+  ...personalizationContainerComponentInfo
+}] : []), ...(TARGET === 'rsc' ? [] : [{
   component: Tabs,
   ...tabsComponentInfo
 }, {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.5"
+export const SDK_VERSION = "3.0.6"

package/src/helpers/canTrack.ts

@@ -1,2 +1,7 @@
 import { checkIsDefined } from './nullable';
-export const getDefaultCanTrack = (canTrack?: boolean) => checkIsDefined(canTrack) ? canTrack : true
+import { userAttributesService } from './user-attributes';
+export const getDefaultCanTrack = (canTrack?: boolean) => {
+  const result = checkIsDefined(canTrack) ? canTrack : true;
+  userAttributesService.setCanTrack(result);
+  return result;
+}

package/src/helpers/user-attributes.ts

@@ -0,0 +1,49 @@
+import { isBrowser } from '../functions/is-browser';
+import { getCookieSync, setCookie } from './cookie';
+export interface UserAttributes {
+  [key: string]: any;
+}
+export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
+export function createUserAttributesService() {
+  let canTrack = true;
+  const subscribers = new Set<(attrs: UserAttributes) => void>();
+  return {
+    setUserAttributes(newAttrs: UserAttributes) {
+      if (!isBrowser()) {
+        return;
+      }
+      const userAttributes: UserAttributes = {
+        ...this.getUserAttributes(),
+        ...newAttrs
+      };
+      setCookie({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        value: JSON.stringify(userAttributes),
+        canTrack
+      });
+      subscribers.forEach(callback => callback(userAttributes));
+    },
+    getUserAttributes() {
+      if (!isBrowser()) {
+        return {};
+      }
+      return JSON.parse(getCookieSync({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        canTrack
+      }) || '{}');
+    },
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+    setCanTrack(value: boolean) {
+      canTrack = value;
+    }
+  };
+}
+export const userAttributesService = createUserAttributesService();
+export const setClientUserAttributes = (attributes: UserAttributes) => {
+  userAttributesService.setUserAttributes(attributes);
+}

package/src/index-helpers/blocks-exports.ts

@@ -12,4 +12,5 @@ export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context
  */
-export { BuilderContext } from '../context/index'
+export { BuilderContext } from '../context/index';
+export { setClientUserAttributes } from '../helpers/user-attributes'

package/src/scripts/init-editing.ts

@@ -47,7 +47,8 @@ export const setupBrowserForEditing = (options: {
         // Supports builder-model="..." attribute which is needed to
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
+        supportsCustomBreakpoints: true,
+        blockLevelPersonalization: true
       }
     }, '*');
     window.parent?.postMessage({

package/src/types/input.ts

@@ -125,6 +125,7 @@ export interface Input {
    * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
    */
   model?: string;
+  behavior?: string;
   valueType?: {
     type?: string;
   };