@builder.io/react 5.0.1 → 5.0.2-2

package/dist/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@builder.io/react",
-    "version": "5.0.1",
+    "version": "5.0.2-1",
     "description": "",
     "keywords": [],
     "main": "dist/builder-react.cjs.js",

package/dist/lib/src/blocks/PersonalizationContainer.js

@@ -0,0 +1,171 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterWithCustomTargeting = void 0;
+var react_1 = __importDefault(require("react"));
+var sdk_1 = require("@builder.io/sdk");
+var react_2 = require("react");
+var builder_blocks_component_1 = require("../components/builder-blocks.component");
+function PersonalizationContainer(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _k = (0, react_2.useState)(false), isClient = _k[0], setIsClient = _k[1];
+    var _l = (0, react_2.useState)(0), update = _l[0], setUpdate = _l[1];
+    (0, react_2.useEffect)(function () {
+        setIsClient(true);
+    }, []);
+    (0, react_2.useEffect)(function () {
+        var subscriber = sdk_1.builder.userAttributesChanged.subscribe(function () {
+            setUpdate(update + 1);
+        });
+        return function () {
+            subscriber.unsubscribe();
+        };
+    }, []);
+    var filteredVariants = (props.variants || []).filter(function (variant) {
+        return filterWithCustomTargeting(sdk_1.builder.getUserAttributes(), variant.query, variant.startDate, variant.endDate);
+    });
+    return (react_1.default.createElement("div", __assign({ style: __assign({ opacity: isClient ? 1 : 0, transition: 'opacity 0.2s ease-in-out' }, props.attributes) }, props.attributes, { className: "builder-personalization-container ".concat(props.attributes.className, " ").concat(isClient ? '' : 'builder-personalization-container-loading') }), sdk_1.Builder.isEditing &&
+        typeof props.previewingIndex === 'number' &&
+        props.previewingIndex < (((_a = props.variants) === null || _a === void 0 ? void 0 : _a.length) || 0) ? (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_c = (_b = props.variants) === null || _b === void 0 ? void 0 : _b[props.previewingIndex]) === null || _c === void 0 ? void 0 : _c.blocks, parentElementId: (_d = props.builderBlock) === null || _d === void 0 ? void 0 : _d.id, dataPath: "component.options.variants.".concat(props.previewingIndex, ".blocks"), child: true })) : // If editing the default or we're on the server and there are no matching variants show the default
+        (sdk_1.Builder.isEditing && typeof props.previewingIndex !== 'number') ||
+            !isClient ||
+            !filteredVariants.length ? (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_e = props.builderBlock) === null || _e === void 0 ? void 0 : _e.children, parentElementId: (_f = props.builderBlock) === null || _f === void 0 ? void 0 : _f.id, dataPath: "this.children", child: true })) : (
+        // Show the variant matching the current user attributes
+        react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_g = filteredVariants[0]) === null || _g === void 0 ? void 0 : _g.blocks, parentElementId: (_h = props.builderBlock) === null || _h === void 0 ? void 0 : _h.id, dataPath: "component.options.variants.".concat((_j = props.variants) === null || _j === void 0 ? void 0 : _j.indexOf(filteredVariants[0]), ".blocks"), child: true }))));
+}
+exports.default = PersonalizationContainer;
+function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
+    var item = {
+        query: query,
+        startDate: startDate,
+        endDate: endDate,
+    };
+    var 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(function (filter) {
+        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) {
+        return typeof val === 'number';
+    }
+    function isString(val) {
+        return typeof val === 'string';
+    }
+    function objectMatchesQuery(userattr, query) {
+        var result = (function () {
+            var property = query.property;
+            var operator = query.operator;
+            var 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(function (val) {
+                        return objectMatchesQuery(userattr, { property: property, operator: operator, value: val });
+                    });
+                }
+                return !!testValue.find(function (val) {
+                    return objectMatchesQuery(userattr, { property: property, operator: operator, value: val });
+                });
+            }
+            var 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;
+    }
+}
+exports.filterWithCustomTargeting = filterWithCustomTargeting;
+sdk_1.Builder.registerComponent(PersonalizationContainer, {
+    name: 'PersonalizationContainer',
+    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: 'variants',
+                    type: 'BuilderQuery',
+                    defaultValue: [],
+                },
+                {
+                    name: 'startDate',
+                    type: 'date',
+                },
+                {
+                    name: 'endDate',
+                    type: 'date',
+                },
+                {
+                    name: 'blocks',
+                    type: 'UiBlocks',
+                    hideFromUI: true,
+                    defaultValue: [],
+                },
+            ],
+        },
+    ],
+});
+//# sourceMappingURL=PersonalizationContainer.js.map

package/dist/lib/src/blocks/PersonalizationContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonalizationContainer.js","sourceRoot":"","sources":["../../../../src/blocks/PersonalizationContainer.tsx"],"names":[],"mappings":"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"}

package/dist/lib/src/scripts/init-editing.js

@@ -10,6 +10,7 @@ if (typeof window !== 'undefined') {
             supportsPatchUpdates: 'v4',
             supportsCustomBreakpoints: true,
             supportsGlobalSymbols: true,
+            blockLevelPersonalization: true,
             priorVersion: package_json_1.version,
         },
     }, '*');

package/dist/lib/src/scripts/init-editing.js.map

@@ -1 +1 @@
-{"version":3,"file":"init-editing.js","sourceRoot":"","sources":["../../../../src/scripts/init-editing.ts"],"names":[],"mappings":";;;AAAA,mDAA6C;AAE7C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;IACjC,MAAA,MAAM,CAAC,MAAM,0CAAE,WAAW,CACxB;QACE,IAAI,EAAE,oBAAoB;QAC1B,IAAI,EAAE;YACJ,KAAK,EAAE,IAAI;YACX,oBAAoB,EAAE,IAAI;YAC1B,yBAAyB,EAAE,IAAI;YAC/B,qBAAqB,EAAE,IAAI;YAC3B,YAAY,EAAE,sBAAO;SACtB;KACF,EACD,GAAG,CACJ,CAAC;CACH"}
+{"version":3,"file":"init-editing.js","sourceRoot":"","sources":["../../../../src/scripts/init-editing.ts"],"names":[],"mappings":";;;AAAA,mDAA6C;AAE7C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;IACjC,MAAA,MAAM,CAAC,MAAM,0CAAE,WAAW,CACxB;QACE,IAAI,EAAE,oBAAoB;QAC1B,IAAI,EAAE;YACJ,KAAK,EAAE,IAAI;YACX,oBAAoB,EAAE,IAAI;YAC1B,yBAAyB,EAAE,IAAI;YAC/B,qBAAqB,EAAE,IAAI;YAC3B,yBAAyB,EAAE,IAAI;YAC/B,YAAY,EAAE,sBAAO;SACtB;KACF,EACD,GAAG,CACJ,CAAC;CACH"}

package/dist/types/src/blocks/PersonalizationContainer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BuilderElement } from '@builder.io/sdk';
+type UserAttributes = any;
+type Query = any;
+export type PersonalizationContainerProps = {
+    children: React.ReactNode;
+    previewingIndex: number | null;
+    builderBlock?: BuilderElement;
+    variants?: [
+        {
+            query: Query[];
+            startDate?: string;
+            endDate?: string;
+            blocks: BuilderElement[];
+        }
+    ];
+    attributes: any;
+};
+declare function PersonalizationContainer(props: PersonalizationContainerProps): React.JSX.Element;
+export default PersonalizationContainer;
+export declare function filterWithCustomTargeting(userAttributes: UserAttributes, query: Query[], startDate?: string, endDate?: string): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "5.0.1",
+  "version": "5.0.2-2",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",
@@ -98,7 +98,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@builder.io/sdk": "3.0.1",
+    "@builder.io/sdk": "3.0.2-0",
     "@emotion/core": "^10.0.17",
     "hash-sum": "^2.0.0",
     "isolated-vm": "^5.0.0",
@@ -106,5 +106,6 @@
   },
   "installConfig": {
     "hoistingLimits": "workspaces"
-  }
-}
+  },
+  "stableVersion": "5.0.2-1"
+}

package/src/blocks/PersonalizationContainer.tsx

@@ -0,0 +1,238 @@
+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;
+
+export type PersonalizationContainerProps = {
+  children: React.ReactNode;
+  previewingIndex: number | null;
+  builderBlock?: BuilderElement;
+  variants?: [
+    {
+      query: Query[];
+      startDate?: string;
+      endDate?: string;
+      blocks: BuilderElement[];
+    },
+  ];
+  attributes: any;
+};
+
+function PersonalizationContainer(props: PersonalizationContainerProps) {
+  const [isClient, setIsClient] = useState(false);
+  const [update, setUpdate] = useState(0);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    const subscriber = builder.userAttributesChanged.subscribe(() => {
+      setUpdate(update + 1);
+    });
+    return () => {
+      subscriber.unsubscribe();
+    };
+  }, []);
+
+  const filteredVariants = (props.variants || []).filter(variant => {
+    return filterWithCustomTargeting(
+      builder.getUserAttributes(),
+      variant.query,
+      variant.startDate,
+      variant.endDate
+    );
+  });
+
+  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>
+  );
+}
+
+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,
+  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: 'variants',
+          type: 'BuilderQuery',
+          defaultValue: [],
+        },
+        {
+          name: 'startDate',
+          type: 'date',
+        },
+        {
+          name: 'endDate',
+          type: 'date',
+        },
+        {
+          name: 'blocks',
+          type: 'UiBlocks',
+          hideFromUI: true,
+          defaultValue: [],
+        },
+      ],
+    },
+  ],
+});

package/src/scripts/init-editing.ts

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
         supportsPatchUpdates: 'v4',
         supportsCustomBreakpoints: true,
         supportsGlobalSymbols: true,
+        blockLevelPersonalization: true,
         priorVersion: version,
       },
     },

package/.yarnrc.yml

@@ -1 +0,0 @@
-npmPublishAccess: "public"