@builder.io/react 5.0.2-2 → 5.0.2-20

package/src/blocks/PersonalizationContainer.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { Builder, builder, BuilderElement } from '@builder.io/sdk';
 import { useEffect, useState } from 'react';
 import { BuilderBlocks } from '../components/builder-blocks.component';
-
-type UserAttributes = any;
-type Query = any;
+import {
+  filterWithCustomTargeting,
+  filterWithCustomTargetingScript,
+  Query,
+} from '../functions/filter-with-custom-targeting';
 
 export type PersonalizationContainerProps = {
   children: React.ReactNode;
@@ -21,15 +23,15 @@ export type PersonalizationContainerProps = {
   attributes: any;
 };
 
-function PersonalizationContainer(props: PersonalizationContainerProps) {
-  const [isClient, setIsClient] = useState(false);
+export function PersonalizationContainer(props: PersonalizationContainerProps) {
+  const isBeingHydrated = Boolean(
+    Builder.isBrowser && (window as any).__hydrated?.[props.builderBlock?.id!]
+  );
+  const [isClient, setIsClient] = useState(isBeingHydrated);
   const [update, setUpdate] = useState(0);
 
   useEffect(() => {
     setIsClient(true);
-  }, []);
-
-  useEffect(() => {
     const subscriber = builder.userAttributesChanged.subscribe(() => {
       setUpdate(update + 1);
     });
@@ -38,6 +40,54 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     };
   }, []);
 
+  if (Builder.isServer) {
+    return (
+      <React.Fragment>
+        <div
+          {...props.attributes}
+          // same as the client side styles for hydration matching
+          style={{
+            opacity: 1,
+            transition: 'opacity 0.2s ease-in-out',
+            ...props.attributes?.style,
+          }}
+          className={`builder-personalization-container ${props.attributes.className}`}
+        >
+          {props.variants?.map((variant, index) => (
+            <template key={index} data-variant-id={props.builderBlock?.id! + index}>
+              <BuilderBlocks
+                blocks={variant.blocks}
+                parentElementId={props.builderBlock?.id}
+                dataPath={`component.options.variants.${index}.blocks`}
+                child
+              />
+            </template>
+          ))}
+          <script
+            id={`variants-script-${props.builderBlock?.id}`}
+            dangerouslySetInnerHTML={{
+              __html: getPersonalizationScript(props.variants, props.builderBlock?.id),
+            }}
+          />
+          <BuilderBlocks
+            blocks={props.builderBlock?.children}
+            parentElementId={props.builderBlock?.id}
+            dataPath="this.children"
+            child
+          />
+        </div>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+         window.__hydrated = window.__hydrated || {};
+         window.__hydrated['${props.builderBlock?.id}'] = true;
+        `.replace(/\s+/g, ' '),
+          }}
+        />
+      </React.Fragment>
+    );
+  }
+
   const filteredVariants = (props.variants || []).filter(variant => {
     return filterWithCustomTargeting(
       builder.getUserAttributes(),
@@ -48,154 +98,62 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
   });
 
   return (
-    <div
-      style={{
-        opacity: isClient ? 1 : 0,
-        transition: 'opacity 0.2s ease-in-out',
-        ...props.attributes,
-      }}
-      {...props.attributes}
-      className={`builder-personalization-container ${
-        props.attributes.className
-      } ${isClient ? '' : 'builder-personalization-container-loading'}`}
-    >
-      {/* If editing a specific varient */}
-      {Builder.isEditing &&
-      typeof props.previewingIndex === 'number' &&
-      props.previewingIndex < (props.variants?.length || 0) ? (
-        <BuilderBlocks
-          blocks={props.variants?.[props.previewingIndex]?.blocks}
-          parentElementId={props.builderBlock?.id}
-          dataPath={`component.options.variants.${props.previewingIndex}.blocks`}
-          child
-        />
-      ) : // If editing the default or we're on the server and there are no matching variants show the default
-      (Builder.isEditing && typeof props.previewingIndex !== 'number') ||
-        !isClient ||
-        !filteredVariants.length ? (
-        <BuilderBlocks
-          blocks={props.builderBlock?.children}
-          parentElementId={props.builderBlock?.id}
-          dataPath="this.children"
-          child
-        />
-      ) : (
-        // Show the variant matching the current user attributes
-        <BuilderBlocks
-          blocks={filteredVariants[0]?.blocks}
-          parentElementId={props.builderBlock?.id}
-          dataPath={`component.options.variants.${props.variants?.indexOf(
-            filteredVariants[0]
-          )}.blocks`}
-          child
-        />
-      )}
-    </div>
+    <React.Fragment>
+      <div
+        {...props.attributes}
+        style={{
+          opacity: isClient ? 1 : 0,
+          transition: 'opacity 0.2s ease-in-out',
+          ...props.attributes?.style,
+        }}
+        className={`builder-personalization-container ${
+          props.attributes.className
+        } ${isClient ? '' : 'builder-personalization-container-loading'}`}
+      >
+        {/* If editing a specific varient */}
+        {Builder.isEditing &&
+        typeof props.previewingIndex === 'number' &&
+        props.previewingIndex < (props.variants?.length || 0) ? (
+          <BuilderBlocks
+            blocks={props.variants?.[props.previewingIndex]?.blocks}
+            parentElementId={props.builderBlock?.id}
+            dataPath={`component.options.variants.${props.previewingIndex}.blocks`}
+            child
+          />
+        ) : // If editing the default or we're on the server and there are no matching variants show the default
+        (Builder.isEditing && typeof props.previewingIndex !== 'number') ||
+          !isClient ||
+          !filteredVariants.length ? (
+          <BuilderBlocks
+            blocks={props.builderBlock?.children}
+            parentElementId={props.builderBlock?.id}
+            dataPath="this.children"
+            child
+          />
+        ) : (
+          // Show the variant matching the current user attributes
+          <BuilderBlocks
+            blocks={filteredVariants[0]?.blocks}
+            parentElementId={props.builderBlock?.id}
+            dataPath={`component.options.variants.${props.variants?.indexOf(
+              filteredVariants[0]
+            )}.blocks`}
+            child
+          />
+        )}
+      </div>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+         window.__hydrated = window.__hydrated || {};
+         window.__hydrated['${props.builderBlock?.id}'] = true;
+        `.replace(/\s+/g, ' '),
+        }}
+      />
+    </React.Fragment>
   );
 }
 
-export default PersonalizationContainer;
-
-export function filterWithCustomTargeting(
-  userAttributes: UserAttributes,
-  query: Query[],
-  startDate?: string,
-  endDate?: string
-) {
-  const item = {
-    query,
-    startDate,
-    endDate,
-  };
-
-  const now = (userAttributes.date && new Date(userAttributes.date)) || new Date();
-
-  if (item.startDate && new Date(item.startDate) > now) {
-    return false;
-  } else if (item.endDate && new Date(item.endDate) < now) {
-    return false;
-  }
-
-  if (!item.query || !item.query.length) {
-    return true;
-  }
-
-  return item.query.every((filter: Query) => {
-    if (
-      filter &&
-      filter.property === 'urlPath' &&
-      filter.value &&
-      typeof filter.value === 'string' &&
-      filter.value !== '/' &&
-      filter.value.endsWith('/')
-    ) {
-      filter.value = filter.value.slice(0, -1);
-    }
-    return objectMatchesQuery(userAttributes, filter);
-  });
-
-  function isNumber(val: unknown) {
-    return typeof val === 'number';
-  }
-
-  function isString(val: unknown) {
-    return typeof val === 'string';
-  }
-
-  function objectMatchesQuery(userattr: UserAttributes, query: Query): boolean {
-    const result = (() => {
-      const property = query.property;
-      const operator = query.operator;
-      const testValue = query.value;
-
-      // Check is query property is present in userAttributes. Proceed only if it is present.
-      if (!(property && operator)) {
-        return true;
-      }
-
-      if (Array.isArray(testValue)) {
-        if (operator === 'isNot') {
-          return testValue.every(val =>
-            objectMatchesQuery(userattr, { property, operator, value: val })
-          );
-        }
-        return !!testValue.find(val =>
-          objectMatchesQuery(userattr, { property, operator, value: val })
-        );
-      }
-      const value = userattr[property];
-
-      if (Array.isArray(value)) {
-        return value.includes(testValue);
-      }
-
-      switch (operator) {
-        case 'is':
-          return value === testValue;
-        case 'isNot':
-          return value !== testValue;
-        case 'contains':
-          return (isString(value) || Array.isArray(value)) && value.includes(testValue);
-        case 'startsWith':
-          return isString(value) && value.startsWith(testValue);
-        case 'endsWith':
-          return isString(value) && value.endsWith(testValue);
-        case 'greaterThan':
-          return isNumber(value) && isNumber(testValue) && value > testValue;
-        case 'lessThan':
-          return isNumber(value) && isNumber(testValue) && value < testValue;
-        case 'greaterThanOrEqualTo':
-          return isNumber(value) && isNumber(testValue) && value >= testValue;
-        case 'lessThanOrEqualTo':
-          return isNumber(value) && isNumber(testValue) && value <= testValue;
-      }
-      return false;
-    })();
-
-    return result;
-  }
-}
-
 Builder.registerComponent(PersonalizationContainer, {
   name: 'PersonalizationContainer',
   noWrap: true,
@@ -214,7 +172,8 @@ Builder.registerComponent(PersonalizationContainer, {
           type: 'text',
         },
         {
-          name: 'variants',
+          name: 'query',
+          friendlyName: 'Targeting rules',
           type: 'BuilderQuery',
           defaultValue: [],
         },
@@ -236,3 +195,63 @@ Builder.registerComponent(PersonalizationContainer, {
     },
   ],
 });
+
+function getPersonalizationScript(
+  variants: PersonalizationContainerProps['variants'],
+  blockId?: string
+) {
+  return `
+      (function() {
+        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) {
+            document.querySelector('template[data-variant-id="' + "${blockId}" + index + '"]').remove();
+          });
+          document.getElementById('variants-script-${blockId}').remove();
+        }
+
+        var attributes = JSON.parse(getCookie("${Builder.attributesCookieName}") || "{}");
+        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 + '"]');
+          if (winningVariant) {
+            var parentNode = winningVariant.parentNode;
+            var newParent = parentNode.cloneNode(false);
+            newParent.appendChild(winningVariant.content.firstChild);
+            parentNode.parentNode.replaceChild(newParent, parentNode);
+            if (isDebug) {
+              console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);
+            }
+          }
+        } else if (variants.length > 0) {
+          removeVariants();
+        }
+        ${filterWithCustomTargetingScript}
+      })();
+    `.replace(/\s+/g, ' ');
+}

package/src/builder-react.ts

@@ -51,6 +51,7 @@ export { FormSelect } from './blocks/forms/Select'; // advanced?
 export { TextArea } from './blocks/forms/TextArea';
 export { Img } from './blocks/raw/Img';
 export { RawText } from './blocks/raw/RawText';
+export { PersonalizationContainer } from './blocks/PersonalizationContainer';
 
 export { stringToFunction } from './functions/string-to-function';
 export { useIsPreviewing } from './hooks/useIsPreviewing';

package/src/functions/filter-with-custom-targeting.ts

@@ -0,0 +1,129 @@
+type UserAttributes = {
+  date?: string | Date;
+  urlPath?: string;
+  [key: string]: any; // Allow any other properties
+};
+
+// Query type
+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;
+};
+
+// minified version of the function need to be added to the script
+export const filterWithCustomTargetingScript = `function filterWithCustomTargeting(e,t,n,r){var i={query:t,startDate:n,endDate:r},o=e.date&&new Date(e.date)||new Date;return!(i.startDate&&new Date(i.startDate)>o)&&(!(i.endDate&&new Date(i.endDate)<o)&&(!i.query||!i.query.length||i.query.every((function(t){return objectMatchesQuery(e,t)}))))}function isString(e){return"string"==typeof e}function isNumber(e){return"number"==typeof e}function objectMatchesQuery(e,t){return function(){var n=t.property,r=t.operator,i=t.value;if(t&&"urlPath"===t.property&&t.value&&"string"==typeof t.value&&"/"!==t.value&&t.value.endsWith("/")&&(i=t.value.slice(0,-1)),!n||!r)return!0;if(Array.isArray(i))return"isNot"===r?i.every((function(t){return objectMatchesQuery(e,{property:n,operator:r,value:t})})):!!i.find((function(t){return objectMatchesQuery(e,{property:n,operator:r,value:t})}));var o=e[n];if(Array.isArray(o))return o.includes(i);switch(r){case"is":return o===i;case"isNot":return o!==i;case"contains":return(isString(o)||Array.isArray(o))&&o.includes(String(i));case"startsWith":return isString(o)&&o.startsWith(String(i));case"endsWith":return isString(o)&&o.endsWith(String(i));case"greaterThan":return isNumber(o)&&isNumber(i)&&o>i;case"lessThan":return isNumber(o)&&isNumber(i)&&o<i;case"greaterThanOrEqualTo":return isNumber(o)&&isNumber(i)&&o>=i;case"lessThanOrEqualTo":return isNumber(o)&&isNumber(i)&&o<=i}return!1}()}`;
+
+export function filterWithCustomTargeting(
+  userAttributes: UserAttributes,
+  query: Query[],
+  startDate?: string,
+  endDate?: string
+) {
+  const item = {
+    query,
+    startDate,
+    endDate,
+  };
+
+  const now = (userAttributes.date && new Date(userAttributes.date)) || new Date();
+
+  if (item.startDate && new Date(item.startDate) > now) {
+    return false;
+  } else if (item.endDate && new Date(item.endDate) < now) {
+    return false;
+  }
+
+  if (!item.query || !item.query.length) {
+    return true;
+  }
+
+  return item.query.every((filter: Query) => {
+    return objectMatchesQuery(userAttributes, filter);
+  });
+}
+
+function isString(val: unknown): val is string {
+  return typeof val === 'string';
+}
+
+function isNumber(val: unknown): val is number {
+  return typeof val === 'number';
+}
+
+function objectMatchesQuery(userattr: UserAttributes, query: Query): boolean {
+  const result = (() => {
+    const property = query.property;
+    const operator = query.operator;
+    let testValue = query.value;
+
+    if (
+      query &&
+      query.property === 'urlPath' &&
+      query.value &&
+      typeof query.value === 'string' &&
+      query.value !== '/' &&
+      query.value.endsWith('/')
+    ) {
+      testValue = query.value.slice(0, -1);
+    }
+
+    // Check is query property is present in userAttributes. Proceed only if it is present.
+    if (!(property && operator)) {
+      return true;
+    }
+
+    if (Array.isArray(testValue)) {
+      if (operator === 'isNot') {
+        return testValue.every(val =>
+          objectMatchesQuery(userattr, { property, operator, value: val })
+        );
+      }
+      return !!testValue.find(val =>
+        objectMatchesQuery(userattr, { property, operator, value: val })
+      );
+    }
+    const value = userattr[property];
+
+    if (Array.isArray(value)) {
+      return value.includes(testValue);
+    }
+
+    switch (operator) {
+      case 'is':
+        return value === testValue;
+      case 'isNot':
+        return value !== testValue;
+      case 'contains':
+        return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
+      case 'startsWith':
+        return isString(value) && value.startsWith(String(testValue));
+      case 'endsWith':
+        return isString(value) && value.endsWith(String(testValue));
+      case 'greaterThan':
+        return isNumber(value) && isNumber(testValue) && value > testValue;
+      case 'lessThan':
+        return isNumber(value) && isNumber(testValue) && value < testValue;
+      case 'greaterThanOrEqualTo':
+        return isNumber(value) && isNumber(testValue) && value >= testValue;
+      case 'lessThanOrEqualTo':
+        return isNumber(value) && isNumber(testValue) && value <= testValue;
+    }
+    return false;
+  })();
+
+  return result;
+}