WIP: variant container for gen2 SDKs

packages/react/src/blocks/PersonalizationContainer.tsx

@@ -156,7 +156,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
         }}
         className={`builder-personalization-container ${
           props.attributes.className
-        } ${isClient ? '' : 'builder-personalization-container-loading'}`}
+        }${isClient ? '' : ' builder-personalization-container-loading'}`}
       >
         {/* If editing a specific varient */}
         {Builder.isEditing &&

packages/sdks-tests/src/e2e-tests/personalization-container.spec.ts

@@ -1,6 +1,6 @@
 import type { Browser } from '@playwright/test';
 import { expect } from '@playwright/test';
-import { excludeGen2, test } from '../helpers/index.js';
+import { test } from '../helpers/index.js';
 const SELECTOR = 'div[builder-content-id]';
 
 const createContextWithCookies = async ({
@@ -35,7 +35,6 @@
     page: _page,
     baseURL,
     browser,
-    sdk,
     packageName,
   }: Pick<
     Parameters<Parameters<typeof test>[2]>[0],
@@ -47,7 +46,6 @@
   test.skip(packageName === 'gen1-next14-pages');
   // gen1-remix started failing on this test for an unknown reason.
   test.skip(packageName === 'gen1-remix');
-  test.skip(excludeGen2(sdk));
 
   if (!baseURL) throw new Error('Missing baseURL');
 
@@ -97,9 +95,9 @@
 
         await page.goto('/personalization-container');
 
         await expect(page.getByText(TEXTS.DEFAULT_CONTENT).locator('visible=true')).toBeVisible();
         await expect(page.getByText(TEXTS.NON_PERSONALIZED).locator('visible=true')).toBeVisible();
         await expect(page.locator(SELECTOR, { hasText: TEXTS.EXPERIMENT_A })).toBeHidden();
         await expect(page.locator(SELECTOR, { hasText: TEXTS.EXPERIMENT_B })).toBeHidden();
       });
 
@@ -126,9 +124,9 @@
 
         await page.goto('/personalization-container');
 
         await expect(page.getByText(TEXTS.EXPERIMENT_A).locator('visible=true')).toBeVisible();
         await expect(page.getByText(TEXTS.NON_PERSONALIZED).locator('visible=true')).toBeVisible();
         await expect(page.locator(SELECTOR, { hasText: TEXTS.EXPERIMENT_B })).toBeHidden();
         await expect(page.locator(SELECTOR, { hasText: TEXTS.DEFAULT_CONTENT })).toBeHidden();
       });
 
@@ -155,9 +153,9 @@
 
         await page.goto('/personalization-container');
 
         await expect(page.getByText(TEXTS.EXPERIMENT_B).locator('visible=true')).toBeVisible();
         await expect(page.getByText(TEXTS.NON_PERSONALIZED).locator('visible=true')).toBeVisible();
         await expect(page.locator(SELECTOR, { hasText: TEXTS.EXPERIMENT_A })).toBeHidden();
         await expect(page.locator(SELECTOR, { hasText: TEXTS.DEFAULT_CONTENT })).toBeHidden();
       });
     }

packages/sdks/src/blocks/personalization-container/component-info.ts

@@ -0,0 +1,47 @@
+import type { ComponentInfo } from '../../types/components.js';
+
+export const componentInfo: ComponentInfo = {
+  name: 'PersonalizationContainer',
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true,
+  },
+  noWrap: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a',
+  canHaveChildren: true,
+  inputs: [
+    {
+      name: 'variants',
+      defaultValue: [],
+      behavior: 'personalizationVariantList',
+      type: 'list',
+      subFields: [
+        {
+          name: 'name',
+          type: 'text',
+        },
+        {
+          name: 'query',
+          friendlyName: 'Targeting rules',
+          type: 'BuilderQuery',
+          defaultValue: [],
+        },
+        {
+          name: 'startDate',
+          type: 'date',
+        },
+        {
+          name: 'endDate',
+          type: 'date',
+        },
+        {
+          name: 'blocks',
+          type: 'uiBlocks',
+          hideFromUI: true,
+          defaultValue: [],
+        },
+      ],
+    },
+  ],
+};

packages/sdks/src/blocks/personalization-container/helpers.ts

@@ -0,0 +1,100 @@
+import { TARGET } from '../../constants/target.js';
+import { filterWithCustomTargetingScript } from '../../functions/filter-with-custom-targeting.js';
+import { isBrowser } from '../../functions/is-browser.js';
+import { USER_ATTRIBUTES_COOKIE_NAME } from '../../helpers/user-attributes.js';
+import type { PersonalizationContainerProps } from './personalization-container.types.js';
+
+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 getPersonalizationScript(
+  variants: PersonalizationContainerProps['variants'],
+  blockId: string,
+  locale?: string
+) {
+  return `
+      (function() {
+         if (!navigator.cookieEnabled) {
+            return;
+          } 
+
+        function getCookie(name) {
+          var nameEQ = name + "=";
+          var ca = document.cookie.split(';');
+          for(var i=0;i < ca.length;i++) {
+              var 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);
+          }
+          return null;
+        }
+        function removeVariants() {
+          variants.forEach(function (template, index) {
+            console.log("removing variant", "${blockId}-" + index);
+            document.querySelector('template[data-variant-id="' + "${blockId}-" + index + '"]').remove();
+          });
+          console.log("removing variants script");
+          document.querySelector('script[data-id="variants-script-${blockId}"]').remove();
+          document.querySelector('style[data-id="variants-styles-${blockId}"]').remove();
+        }
+
+        var attributes = JSON.parse(getCookie("${USER_ATTRIBUTES_COOKIE_NAME}") || "{}");
+        ${locale ? `attributes.locale = "${locale}";` : ''}
+        var variants = ${JSON.stringify(
+          variants?.map((v) => ({
+            query: v.query,
+            startDate: v.startDate,
+            endDate: v.endDate,
+          }))
+        )};
+        var winningVariantIndex = variants.findIndex(function(variant) {
+          return filterWithCustomTargeting(
+            attributes,
+            variant.query,
+            variant.startDate,
+            variant.endDate
+          );
+        });
+        var isDebug = location.href.includes('builder.debug=true');
+        if (isDebug) {
+          console.debug('PersonalizationContainer', {
+            attributes: attributes,
+            variants: variants,
+            winningVariantIndex: winningVariantIndex,
+            });
+        }
+        if (winningVariantIndex !== -1) {
+          var winningVariant = document.querySelector('template[data-variant-id="' + "${blockId}-" + winningVariantIndex + '"]');
+          console.log("winningVariant", winningVariant);
+          if (winningVariant) {
+            var parentNode = winningVariant.parentNode;
+            var newParent = parentNode.cloneNode(false);
+            newParent.appendChild(winningVariant.content.firstChild);
+            newParent.appendChild(winningVariant.content.lastChild);
+            parentNode.parentNode.replaceChild(newParent, parentNode);
+            if (isDebug) {
+              console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);
+            }
+          }
+        } else if (variants.length > 0) {
+          removeVariants();
+        }
+        ${filterWithCustomTargetingScript}
+      })();
+    `.replace(/\s+/g, ' ');
+}

packages/sdks/src/blocks/personalization-container/index.ts

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

packages/sdks/src/blocks/personalization-container/personalization-container.lite.tsx

@@ -0,0 +1,143 @@
+import {
+  For,
+  Fragment,
+  onMount,
+  Show,
+  useMetadata,
+  useStore,
+} from '@builder.io/mitosis';
+import Blocks from '../../components/blocks/blocks.lite.jsx';
+import InlinedScript from '../../components/inlined-script.lite.jsx';
+import InlinedStyles from '../../components/inlined-styles.lite.jsx';
+import { filterWithCustomTargeting } from '../../functions/filter-with-custom-targeting.js';
+import { isEditing } from '../../functions/is-editing.js';
+import { getDefaultCanTrack } from '../../helpers/canTrack.js';
+import { userAttributesSubscriber } from '../../helpers/user-attributes.js';
+import {
+  checkShouldRenderVariants,
+  getPersonalizationScript,
+} from './helpers.js';
+import type { PersonalizationContainerProps } from './personalization-container.types.js';
+
+useMetadata({
+  rsc: {
+    componentType: 'client',
+  },
+});
+
+export default function PersonalizationContainer(
+  props: PersonalizationContainerProps
+) {
+  const state = useStore({
+    scriptStr: getPersonalizationScript(
+      props.variants,
+      props.builderBlock?.id || 'none',
+      props.builderContext.value?.rootState?.locale as string | undefined
+    ),
+    shouldRenderVariants: checkShouldRenderVariants(
+      props.variants,
+      getDefaultCanTrack(props.builderContext.value?.canTrack)
+    ),
+    isHydrated: false,
+    get filteredVariants() {
+      return (props.variants || []).filter((variant) => {
+        return filterWithCustomTargeting(
+          {
+            ...(props.builderContext.value?.rootState?.locale
+              ? { locale: props.builderContext.value?.rootState?.locale }
+              : {}),
+            ...(userAttributesSubscriber.getUserAttributes() as any),
+          },
+          variant.query,
+          variant.startDate,
+          variant.endDate
+        );
+      });
+    },
+    get winningVariant() {
+      return state.filteredVariants[0];
+    },
+    get hideVariantsStyleString() {
+      return (props.variants || [])
+        .map(
+          (_, index) =>
+            `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `
+        )
+        .join('');
+    },
+  });
+
+  onMount(() => {
+    state.isHydrated = true;
+  });
+
+  return (
+    <Fragment>
+      <div
+        {...props.attributes}
+        class={`builder-personalization-container ${props.attributes?.class || ''}`}
+      >
+        <Show when={state.shouldRenderVariants}>
+          <For each={props.variants}>
+            {(variant, index) => (
+              <template
+                key={index}
+                data-variant-id={`${props.builderBlock?.id}-${index}`}
+              >
+                <Blocks
+                  blocks={variant.blocks}
+                  parent={props.builderBlock?.id}
+                  path={`component.options.variants.${index}.blocks`}
+                />
+              </template>
+            )}
+          </For>
+          <InlinedStyles
+            nonce={props.builderContext.value?.nonce || ''}
+            styles={state.hideVariantsStyleString}
+            id={`variants-styles-${props.builderBlock?.id}`}
+          />
+          <InlinedScript
+            nonce={props.builderContext.value?.nonce || ''}
+            scriptStr={state.scriptStr}
+            id={`variants-script-${props.builderBlock?.id}`}
+          />
+        </Show>
+        <Show
+          when={
+            state.isHydrated &&
+            isEditing() &&
+            typeof props.previewingIndex === 'number' &&
+            props.previewingIndex < (props.variants?.length || 0) &&
+            !state.filteredVariants.length
+          }
+          else={
+            <Show
+              when={state.winningVariant}
+              else={
+                <Blocks
+                  blocks={props.builderBlock?.children}
+                  parent={props.builderBlock?.id}
+                />
+              }
+            >
+              <Blocks
+                blocks={state.winningVariant?.blocks}
+                parent={props.builderBlock?.id}
+                path={`component.options.variants.${props.variants?.indexOf(
+                  state.winningVariant
+                )}.blocks`}
+              />
+            </Show>
+          }
+        >
+          <Blocks
+            blocks={props.variants?.[Number(props.previewingIndex)]?.blocks}
+            parent={props.builderBlock?.id}
+            path={`component.options.variants.${props.previewingIndex}.blocks`}
+          />
+        </Show>
+      </div>
+    </Fragment>
+  );
+}

packages/sdks/src/blocks/personalization-container/personalization-container.types.ts

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

packages/sdks/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.js';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
 import { default as Image } from '../blocks/image/index.js';
+import { componentInfo as personalizationContainerComponentInfo } from '../blocks/personalization-container/component-info.js';
+import { default as PersonalizationContainer } from '../blocks/personalization-container/index.js';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/index.js';
 import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
@@ -36,6 +38,10 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] =
     { component: Slot, ...slotComponentInfo },
     { component: Symbol, ...symbolComponentInfo },
     { component: Text, ...textComponentInfo },
+    {
+      component: PersonalizationContainer,
+      ...personalizationContainerComponentInfo,
+    },
     ...(TARGET === 'rsc'
       ? []
       : [