@builder.io/react 5.0.2-15 → 5.0.2-17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/builder-react-lite.cjs.js +1 -1
- package/dist/builder-react-lite.esm.js +1 -1
- package/dist/builder-react.browser.js +2 -2
- package/dist/builder-react.browser.js.map +1 -1
- package/dist/builder-react.cjs.js +1 -1
- package/dist/builder-react.cjs.js.map +1 -1
- package/dist/builder-react.es5.js +1 -1
- package/dist/builder-react.es5.js.map +1 -1
- package/dist/builder-react.unpkg.js +2 -2
- package/dist/builder-react.unpkg.js.map +1 -1
- package/dist/lib/package.json +1 -1
- package/dist/lib/src/blocks/PersonalizationContainer.js +16 -20
- package/dist/lib/src/blocks/PersonalizationContainer.js.map +1 -1
- package/package.json +2 -2
- package/src/blocks/PersonalizationContainer.tsx +23 -32
package/dist/lib/package.json
CHANGED
|
@@ -20,7 +20,6 @@ var sdk_1 = require("@builder.io/sdk");
|
|
|
20
20
|
var react_2 = require("react");
|
|
21
21
|
var builder_blocks_component_1 = require("../components/builder-blocks.component");
|
|
22
22
|
var filter_with_custom_targeting_1 = require("../functions/filter-with-custom-targeting");
|
|
23
|
-
var attributesCookie = 'builder.attributes';
|
|
24
23
|
function PersonalizationContainer(props) {
|
|
25
24
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
26
25
|
var isBeingHydrated = Boolean(sdk_1.Builder.isBrowser && ((_a = window.__hydrated) === null || _a === void 0 ? void 0 : _a[(_b = props.builderBlock) === null || _b === void 0 ? void 0 : _b.id]));
|
|
@@ -29,7 +28,6 @@ function PersonalizationContainer(props) {
|
|
|
29
28
|
(0, react_2.useEffect)(function () {
|
|
30
29
|
setIsClient(true);
|
|
31
30
|
var subscriber = sdk_1.builder.userAttributesChanged.subscribe(function () {
|
|
32
|
-
sdk_1.builder.setCookie(attributesCookie, JSON.stringify(sdk_1.builder.getUserAttributes()));
|
|
33
31
|
setUpdate(update + 1);
|
|
34
32
|
});
|
|
35
33
|
return function () {
|
|
@@ -38,19 +36,18 @@ function PersonalizationContainer(props) {
|
|
|
38
36
|
}, []);
|
|
39
37
|
if (sdk_1.Builder.isServer) {
|
|
40
38
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
41
|
-
react_1.default.createElement("
|
|
42
|
-
|
|
39
|
+
react_1.default.createElement("div", __assign({}, props.attributes, {
|
|
40
|
+
// same as the client side styles for hydration matching
|
|
41
|
+
style: __assign({ opacity: 1, transition: 'opacity 0.2s ease-in-out' }, (_c = props.attributes) === null || _c === void 0 ? void 0 : _c.style), className: "builder-personalization-container ".concat(props.attributes.className) }), (_d = props.variants) === null || _d === void 0 ? void 0 :
|
|
42
|
+
_d.map(function (variant, index) {
|
|
43
43
|
var _a, _b;
|
|
44
44
|
return (react_1.default.createElement("template", { key: index, "data-variant-id": ((_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.id) + index },
|
|
45
45
|
react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: variant.blocks, parentElementId: (_b = props.builderBlock) === null || _b === void 0 ? void 0 : _b.id, dataPath: "component.options.variants.".concat(index, ".blocks"), child: true })));
|
|
46
46
|
}),
|
|
47
|
-
react_1.default.createElement("script", { id: "variants-script-".concat((
|
|
48
|
-
__html: getPersonalizationScript(props.variants, (
|
|
47
|
+
react_1.default.createElement("script", { id: "variants-script-".concat((_e = props.builderBlock) === null || _e === void 0 ? void 0 : _e.id), dangerouslySetInnerHTML: {
|
|
48
|
+
__html: getPersonalizationScript(props.variants, (_f = props.builderBlock) === null || _f === void 0 ? void 0 : _f.id),
|
|
49
49
|
} }),
|
|
50
|
-
react_1.default.createElement(
|
|
51
|
-
// same as the client side styles for hydration matching
|
|
52
|
-
style: __assign({ opacity: 1, transition: 'opacity 0.2s ease-in-out' }, (_f = props.attributes) === null || _f === void 0 ? void 0 : _f.style), className: "builder-personalization-container ".concat(props.attributes.className) }),
|
|
53
|
-
react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_g = props.builderBlock) === null || _g === void 0 ? void 0 : _g.children, parentElementId: (_h = props.builderBlock) === null || _h === void 0 ? void 0 : _h.id, dataPath: "this.children", child: true }))),
|
|
50
|
+
react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_g = props.builderBlock) === null || _g === void 0 ? void 0 : _g.children, parentElementId: (_h = props.builderBlock) === null || _h === void 0 ? void 0 : _h.id, dataPath: "this.children", child: true })),
|
|
54
51
|
react_1.default.createElement("script", { dangerouslySetInnerHTML: {
|
|
55
52
|
__html: "\n window.__hydrated = window.__hydrated || {};\n window.__hydrated['".concat((_j = props.builderBlock) === null || _j === void 0 ? void 0 : _j.id, "'] = true;\n ").replace(/\s+/g, ' '),
|
|
56
53
|
} })));
|
|
@@ -59,15 +56,14 @@ function PersonalizationContainer(props) {
|
|
|
59
56
|
return (0, filter_with_custom_targeting_1.filterWithCustomTargeting)(sdk_1.builder.getUserAttributes(), variant.query, variant.startDate, variant.endDate);
|
|
60
57
|
});
|
|
61
58
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
62
|
-
react_1.default.createElement("
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_s = filteredVariants[0]) === null || _s === void 0 ? void 0 : _s.blocks, parentElementId: (_t = props.builderBlock) === null || _t === void 0 ? void 0 : _t.id, dataPath: "component.options.variants.".concat((_u = props.variants) === null || _u === void 0 ? void 0 : _u.indexOf(filteredVariants[0]), ".blocks"), child: true })))),
|
|
59
|
+
react_1.default.createElement("div", __assign({}, props.attributes, { style: __assign({ opacity: isClient ? 1 : 0, transition: 'opacity 0.2s ease-in-out' }, (_k = props.attributes) === null || _k === void 0 ? void 0 : _k.style), className: "builder-personalization-container ".concat(props.attributes.className, " ").concat(isClient ? '' : 'builder-personalization-container-loading') }), sdk_1.Builder.isEditing &&
|
|
60
|
+
typeof props.previewingIndex === 'number' &&
|
|
61
|
+
props.previewingIndex < (((_l = props.variants) === null || _l === void 0 ? void 0 : _l.length) || 0) ? (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_o = (_m = props.variants) === null || _m === void 0 ? void 0 : _m[props.previewingIndex]) === null || _o === void 0 ? void 0 : _o.blocks, parentElementId: (_p = props.builderBlock) === null || _p === void 0 ? void 0 : _p.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
|
|
62
|
+
(sdk_1.Builder.isEditing && typeof props.previewingIndex !== 'number') ||
|
|
63
|
+
!isClient ||
|
|
64
|
+
!filteredVariants.length ? (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_q = props.builderBlock) === null || _q === void 0 ? void 0 : _q.children, parentElementId: (_r = props.builderBlock) === null || _r === void 0 ? void 0 : _r.id, dataPath: "this.children", child: true })) : (
|
|
65
|
+
// Show the variant matching the current user attributes
|
|
66
|
+
react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { blocks: (_s = filteredVariants[0]) === null || _s === void 0 ? void 0 : _s.blocks, parentElementId: (_t = props.builderBlock) === null || _t === void 0 ? void 0 : _t.id, dataPath: "component.options.variants.".concat((_u = props.variants) === null || _u === void 0 ? void 0 : _u.indexOf(filteredVariants[0]), ".blocks"), child: true }))),
|
|
71
67
|
react_1.default.createElement("script", { dangerouslySetInnerHTML: {
|
|
72
68
|
__html: "\n window.__hydrated = window.__hydrated || {};\n window.__hydrated['".concat((_v = props.builderBlock) === null || _v === void 0 ? void 0 : _v.id, "'] = true;\n ").replace(/\s+/g, ' '),
|
|
73
69
|
} })));
|
|
@@ -114,6 +110,6 @@ sdk_1.Builder.registerComponent(PersonalizationContainer, {
|
|
|
114
110
|
],
|
|
115
111
|
});
|
|
116
112
|
function getPersonalizationScript(variants, blockId) {
|
|
117
|
-
return "\n (function() {\n function getCookie(name) {\n var nameEQ = name + \"=\";\n var ca = document.cookie.split(';');\n for(var i=0;i < ca.length;i++) {\n var c = ca[i];\n while (c.charAt(0)==' ') c = c.substring(1,c.length);\n if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);\n }\n return null;\n }\n function removeVariants() {\n variants.forEach(function (template, index) {\n document.querySelector('template[data-variant-id=\"' + \"".concat(blockId, "\" + index + '\"]').remove();\n });\n document.getElementById('variants-script-").concat(blockId, "').remove();\n }\n\n var attributes = JSON.parse(getCookie(\"").concat(
|
|
113
|
+
return "\n (function() {\n function getCookie(name) {\n var nameEQ = name + \"=\";\n var ca = document.cookie.split(';');\n for(var i=0;i < ca.length;i++) {\n var c = ca[i];\n while (c.charAt(0)==' ') c = c.substring(1,c.length);\n if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);\n }\n return null;\n }\n function removeVariants() {\n variants.forEach(function (template, index) {\n document.querySelector('template[data-variant-id=\"' + \"".concat(blockId, "\" + index + '\"]').remove();\n });\n document.getElementById('variants-script-").concat(blockId, "').remove();\n }\n\n var attributes = JSON.parse(getCookie(\"").concat(sdk_1.Builder.attributesCookieName, "\") || \"{}\");\n var variants = ").concat(JSON.stringify(variants === null || variants === void 0 ? void 0 : variants.map(function (v) { return ({ query: v.query, startDate: v.startDate, endDate: v.endDate }); })), ";\n var winningVariantIndex = variants.findIndex(function(variant) {\n return filterWithCustomTargeting(\n attributes,\n variant.query,\n variant.startDate,\n variant.endDate\n );\n });\n var isDebug = location.href.includes('builder.debug=true');\n if (isDebug) {\n console.debug('PersonalizationContainer', {\n attributes: attributes,\n variants: variants,\n winningVariantIndex: winningVariantIndex,\n });\n }\n if (winningVariantIndex !== -1) {\n var winningVariant = document.querySelector('template[data-variant-id=\"' + \"").concat(blockId, "\" + winningVariantIndex + '\"]');\n if (winningVariant) {\n var parentNode = winningVariant.parentNode;\n var newParent = parentNode.cloneNode(false);\n newParent.appendChild(winningVariant.content.firstChild);\n parentNode.parentNode.replaceChild(newParent, parentNode);\n if (isDebug) {\n console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);\n }\n }\n } else if (variants.length > 0) {\n removeVariants();\n }\n ").concat(filter_with_custom_targeting_1.filterWithCustomTargetingScript, "\n })();\n ").replace(/\s+/g, ' ');
|
|
118
114
|
}
|
|
119
115
|
//# sourceMappingURL=PersonalizationContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PersonalizationContainer.js","sourceRoot":"","sources":["../../../../src/blocks/PersonalizationContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,uCAAmE;AACnE,+BAA4C;AAC5C,mFAAuE;AACvE,0FAImD;
|
|
1
|
+
{"version":3,"file":"PersonalizationContainer.js","sourceRoot":"","sources":["../../../../src/blocks/PersonalizationContainer.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@builder.io/react",
|
|
3
|
-
"version": "5.0.2-
|
|
3
|
+
"version": "5.0.2-17",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"main": "dist/builder-react.cjs.js",
|
|
@@ -107,5 +107,5 @@
|
|
|
107
107
|
"installConfig": {
|
|
108
108
|
"hoistingLimits": "workspaces"
|
|
109
109
|
},
|
|
110
|
-
"stableVersion": "5.0.2-
|
|
110
|
+
"stableVersion": "5.0.2-16"
|
|
111
111
|
}
|
|
@@ -8,8 +8,6 @@ import {
|
|
|
8
8
|
Query,
|
|
9
9
|
} from '../functions/filter-with-custom-targeting';
|
|
10
10
|
|
|
11
|
-
const attributesCookie = 'builder.attributes';
|
|
12
|
-
|
|
13
11
|
export type PersonalizationContainerProps = {
|
|
14
12
|
children: React.ReactNode;
|
|
15
13
|
previewingIndex: number | null;
|
|
@@ -35,7 +33,6 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
|
|
|
35
33
|
useEffect(() => {
|
|
36
34
|
setIsClient(true);
|
|
37
35
|
const subscriber = builder.userAttributesChanged.subscribe(() => {
|
|
38
|
-
builder.setCookie(attributesCookie, JSON.stringify(builder.getUserAttributes()));
|
|
39
36
|
setUpdate(update + 1);
|
|
40
37
|
});
|
|
41
38
|
return () => {
|
|
@@ -46,23 +43,6 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
|
|
|
46
43
|
if (Builder.isServer) {
|
|
47
44
|
return (
|
|
48
45
|
<React.Fragment>
|
|
49
|
-
<section>
|
|
50
|
-
{props.variants?.map((variant, index) => (
|
|
51
|
-
<template key={index} data-variant-id={props.builderBlock?.id! + index}>
|
|
52
|
-
<BuilderBlocks
|
|
53
|
-
blocks={variant.blocks}
|
|
54
|
-
parentElementId={props.builderBlock?.id}
|
|
55
|
-
dataPath={`component.options.variants.${index}.blocks`}
|
|
56
|
-
child
|
|
57
|
-
/>
|
|
58
|
-
</template>
|
|
59
|
-
))}
|
|
60
|
-
<script
|
|
61
|
-
id={`variants-script-${props.builderBlock?.id}`}
|
|
62
|
-
dangerouslySetInnerHTML={{
|
|
63
|
-
__html: getPersonalizationScript(props.variants, props.builderBlock?.id),
|
|
64
|
-
}}
|
|
65
|
-
/>
|
|
66
46
|
<div
|
|
67
47
|
{...props.attributes}
|
|
68
48
|
// same as the client side styles for hydration matching
|
|
@@ -73,6 +53,22 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
|
|
|
73
53
|
}}
|
|
74
54
|
className={`builder-personalization-container ${props.attributes.className}`}
|
|
75
55
|
>
|
|
56
|
+
{props.variants?.map((variant, index) => (
|
|
57
|
+
<template key={index} data-variant-id={props.builderBlock?.id! + index}>
|
|
58
|
+
<BuilderBlocks
|
|
59
|
+
blocks={variant.blocks}
|
|
60
|
+
parentElementId={props.builderBlock?.id}
|
|
61
|
+
dataPath={`component.options.variants.${index}.blocks`}
|
|
62
|
+
child
|
|
63
|
+
/>
|
|
64
|
+
</template>
|
|
65
|
+
))}
|
|
66
|
+
<script
|
|
67
|
+
id={`variants-script-${props.builderBlock?.id}`}
|
|
68
|
+
dangerouslySetInnerHTML={{
|
|
69
|
+
__html: getPersonalizationScript(props.variants, props.builderBlock?.id),
|
|
70
|
+
}}
|
|
71
|
+
/>
|
|
76
72
|
<BuilderBlocks
|
|
77
73
|
blocks={props.builderBlock?.children}
|
|
78
74
|
parentElementId={props.builderBlock?.id}
|
|
@@ -80,8 +76,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
|
|
|
80
76
|
child
|
|
81
77
|
/>
|
|
82
78
|
</div>
|
|
83
|
-
|
|
84
|
-
<script
|
|
79
|
+
<script
|
|
85
80
|
dangerouslySetInnerHTML={{
|
|
86
81
|
__html: `
|
|
87
82
|
window.__hydrated = window.__hydrated || {};
|
|
@@ -89,7 +84,6 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
|
|
|
89
84
|
`.replace(/\s+/g, ' '),
|
|
90
85
|
}}
|
|
91
86
|
/>
|
|
92
|
-
|
|
93
87
|
</React.Fragment>
|
|
94
88
|
);
|
|
95
89
|
}
|
|
@@ -105,7 +99,6 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
|
|
|
105
99
|
|
|
106
100
|
return (
|
|
107
101
|
<React.Fragment>
|
|
108
|
-
<section>
|
|
109
102
|
<div
|
|
110
103
|
{...props.attributes}
|
|
111
104
|
style={{
|
|
@@ -149,16 +142,14 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
|
|
|
149
142
|
/>
|
|
150
143
|
)}
|
|
151
144
|
</div>
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
__html: `
|
|
145
|
+
<script
|
|
146
|
+
dangerouslySetInnerHTML={{
|
|
147
|
+
__html: `
|
|
156
148
|
window.__hydrated = window.__hydrated || {};
|
|
157
149
|
window.__hydrated['${props.builderBlock?.id}'] = true;
|
|
158
150
|
`.replace(/\s+/g, ' '),
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
151
|
+
}}
|
|
152
|
+
/>
|
|
162
153
|
</React.Fragment>
|
|
163
154
|
);
|
|
164
155
|
}
|
|
@@ -228,7 +219,7 @@ function getPersonalizationScript(
|
|
|
228
219
|
document.getElementById('variants-script-${blockId}').remove();
|
|
229
220
|
}
|
|
230
221
|
|
|
231
|
-
var attributes = JSON.parse(getCookie("${
|
|
222
|
+
var attributes = JSON.parse(getCookie("${Builder.attributesCookieName}") || "{}");
|
|
232
223
|
var variants = ${JSON.stringify(variants?.map(v => ({ query: v.query, startDate: v.startDate, endDate: v.endDate })))};
|
|
233
224
|
var winningVariantIndex = variants.findIndex(function(variant) {
|
|
234
225
|
return filterWithCustomTargeting(
|