@builder.io/sdk-react 0.0.1-0
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/README.md +19 -0
- package/package.json +15 -0
- package/src/blocks/button/button.js +38 -0
- package/src/blocks/button/component-info.js +41 -0
- package/src/blocks/columns/columns.js +110 -0
- package/src/blocks/columns/component-info.js +241 -0
- package/src/blocks/custom-code/component-info.js +31 -0
- package/src/blocks/custom-code/custom-code.js +50 -0
- package/src/blocks/embed/component-info.js +43 -0
- package/src/blocks/embed/embed.js +43 -0
- package/src/blocks/embed/helpers.js +9 -0
- package/src/blocks/form/component-info.js +262 -0
- package/src/blocks/form/form.js +225 -0
- package/src/blocks/fragment/component-info.js +11 -0
- package/src/blocks/fragment/fragment.js +7 -0
- package/src/blocks/image/component-info.js +150 -0
- package/src/blocks/image/image.helpers.js +48 -0
- package/src/blocks/image/image.js +90 -0
- package/src/blocks/img/component-info.js +20 -0
- package/src/blocks/img/img.js +35 -0
- package/src/blocks/input/component-info.js +74 -0
- package/src/blocks/input/input.js +35 -0
- package/src/blocks/raw-text/component-info.js +16 -0
- package/src/blocks/raw-text/raw-text.js +11 -0
- package/src/blocks/section/component-info.js +49 -0
- package/src/blocks/section/section.js +30 -0
- package/src/blocks/select/component-info.js +59 -0
- package/src/blocks/select/select.js +35 -0
- package/src/blocks/submit-button/component-info.js +28 -0
- package/src/blocks/submit-button/submit-button.js +28 -0
- package/src/blocks/symbol/component-info.js +43 -0
- package/src/blocks/symbol/symbol.js +69 -0
- package/src/blocks/text/component-info.js +24 -0
- package/src/blocks/text/text.js +10 -0
- package/src/blocks/textarea/component-info.js +47 -0
- package/src/blocks/textarea/textarea.js +31 -0
- package/src/blocks/video/component-info.js +106 -0
- package/src/blocks/video/video.js +51 -0
- package/src/components/render-block/block-styles.js +40 -0
- package/src/components/render-block/render-block.helpers.js +23 -0
- package/src/components/render-block/render-block.js +169 -0
- package/src/components/render-block/render-component.js +33 -0
- package/src/components/render-block/render-repeated-block.js +29 -0
- package/src/components/render-block/types.js +0 -0
- package/src/components/render-blocks.js +62 -0
- package/src/components/render-content/components/render-styles.js +58 -0
- package/src/components/render-content/index.js +4 -0
- package/src/components/render-content/render-content.js +265 -0
- package/src/components/render-inlined-styles.js +17 -0
- package/src/constants/builder-registered-components.js +48 -0
- package/src/constants/device-sizes.js +21 -0
- package/src/constants/target.js +4 -0
- package/src/context/builder.context.js +11 -0
- package/src/functions/camel-to-kebab-case.js +4 -0
- package/src/functions/convert-style-object.js +6 -0
- package/src/functions/evaluate.js +28 -0
- package/src/functions/event-handler-name.js +7 -0
- package/src/functions/get-block-actions.js +23 -0
- package/src/functions/get-block-component-options.js +28 -0
- package/src/functions/get-block-properties.js +29 -0
- package/src/functions/get-block-styles.js +34 -0
- package/src/functions/get-block-tag.js +6 -0
- package/src/functions/get-builder-search-params/fn.test.js +13 -0
- package/src/functions/get-builder-search-params/index.js +33 -0
- package/src/functions/get-content/ab-testing.js +38 -0
- package/src/functions/get-content/fn.test.js +31 -0
- package/src/functions/get-content/index.js +96 -0
- package/src/functions/get-content/types.js +0 -0
- package/src/functions/get-fetch.js +34 -0
- package/src/functions/get-global-this.js +18 -0
- package/src/functions/get-processed-block.js +53 -0
- package/src/functions/get-processed-block.test.js +32 -0
- package/src/functions/if-target.js +15 -0
- package/src/functions/is-browser.js +6 -0
- package/src/functions/is-editing.js +7 -0
- package/src/functions/is-iframe.js +7 -0
- package/src/functions/is-previewing.js +14 -0
- package/src/functions/on-change.js +27 -0
- package/src/functions/on-change.test.js +19 -0
- package/src/functions/register-component.js +72 -0
- package/src/functions/register.js +29 -0
- package/src/functions/sanitize-styles.js +5 -0
- package/src/functions/set-editor-settings.js +15 -0
- package/src/functions/set.js +11 -0
- package/src/functions/set.test.js +16 -0
- package/src/functions/track.js +91 -0
- package/src/functions/transform-block.js +6 -0
- package/src/helpers/cookie.js +59 -0
- package/src/helpers/css.js +12 -0
- package/src/helpers/flatten.js +34 -0
- package/src/helpers/localStorage.js +34 -0
- package/src/helpers/nullable.js +4 -0
- package/src/helpers/sessionId.js +26 -0
- package/src/helpers/time.js +5 -0
- package/src/helpers/url.js +10 -0
- package/src/helpers/url.test.js +15 -0
- package/src/helpers/uuid.js +13 -0
- package/src/helpers/visitorId.js +33 -0
- package/src/index-helpers/blocks-exports.js +22 -0
- package/src/index-helpers/top-of-file.js +4 -0
- package/src/index.js +10 -0
- package/src/scripts/init-editing.js +80 -0
- package/src/types/builder-block.js +0 -0
- package/src/types/builder-content.js +0 -0
- package/src/types/can-track.js +0 -0
- package/src/types/components.js +0 -0
- package/src/types/deep-partial.js +0 -0
- package/src/types/element.js +0 -0
- package/src/types/targets.js +0 -0
- package/src/types/typescript.js +0 -0
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __async = (__this, __arguments, generator) => {
|
|
21
|
+
return new Promise((resolve, reject) => {
|
|
22
|
+
var fulfilled = (value) => {
|
|
23
|
+
try {
|
|
24
|
+
step(generator.next(value));
|
|
25
|
+
} catch (e) {
|
|
26
|
+
reject(e);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
var rejected = (value) => {
|
|
30
|
+
try {
|
|
31
|
+
step(generator.throw(value));
|
|
32
|
+
} catch (e) {
|
|
33
|
+
reject(e);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
37
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
import * as React from "react";
|
|
41
|
+
import { useState, useEffect } from "react";
|
|
42
|
+
import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
|
|
43
|
+
import { TARGET } from "../../constants/target.js";
|
|
44
|
+
import BuilderContext from "../../context/builder.context";
|
|
45
|
+
import { evaluate } from "../../functions/evaluate.js";
|
|
46
|
+
import { getContent } from "../../functions/get-content/index.js";
|
|
47
|
+
import { getFetch } from "../../functions/get-fetch.js";
|
|
48
|
+
import { isBrowser } from "../../functions/is-browser.js";
|
|
49
|
+
import { isEditing } from "../../functions/is-editing.js";
|
|
50
|
+
import { isPreviewing } from "../../functions/is-previewing.js";
|
|
51
|
+
import {
|
|
52
|
+
components,
|
|
53
|
+
createRegisterComponentMessage
|
|
54
|
+
} from "../../functions/register-component.js";
|
|
55
|
+
import { track } from "../../functions/track.js";
|
|
56
|
+
import RenderBlocks from "../render-blocks.js";
|
|
57
|
+
import RenderContentStyles from "./components/render-styles.js";
|
|
58
|
+
function RenderContent(props) {
|
|
59
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
60
|
+
function useContent() {
|
|
61
|
+
var _a2;
|
|
62
|
+
const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
|
|
63
|
+
data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data)
|
|
64
|
+
});
|
|
65
|
+
return mergedContent;
|
|
66
|
+
}
|
|
67
|
+
const [overrideContent, setOverrideContent] = useState(() => null);
|
|
68
|
+
const [update, setUpdate] = useState(() => 0);
|
|
69
|
+
function canTrackToUse() {
|
|
70
|
+
return props.canTrack || true;
|
|
71
|
+
}
|
|
72
|
+
const [overrideState, setOverrideState] = useState(() => ({}));
|
|
73
|
+
function contentState() {
|
|
74
|
+
var _a2, _b2;
|
|
75
|
+
return __spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), overrideState);
|
|
76
|
+
}
|
|
77
|
+
function contextContext() {
|
|
78
|
+
return props.context || {};
|
|
79
|
+
}
|
|
80
|
+
function allRegisteredComponents() {
|
|
81
|
+
const allComponentsArray = [
|
|
82
|
+
...getDefaultRegisteredComponents(),
|
|
83
|
+
...components,
|
|
84
|
+
...props.customComponents || []
|
|
85
|
+
];
|
|
86
|
+
const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), { [curr.name]: curr }), {});
|
|
87
|
+
return allComponents;
|
|
88
|
+
}
|
|
89
|
+
function processMessage(event) {
|
|
90
|
+
const { data } = event;
|
|
91
|
+
if (data) {
|
|
92
|
+
switch (data.type) {
|
|
93
|
+
case "builder.contentUpdate": {
|
|
94
|
+
const messageContent = data.data;
|
|
95
|
+
const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
|
|
96
|
+
const contentData = messageContent.data;
|
|
97
|
+
if (key === props.model) {
|
|
98
|
+
setOverrideContent(contentData);
|
|
99
|
+
}
|
|
100
|
+
break;
|
|
101
|
+
}
|
|
102
|
+
case "builder.patchUpdates": {
|
|
103
|
+
break;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
function evaluateJsCode() {
|
|
109
|
+
var _a2, _b2;
|
|
110
|
+
const jsCode = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.jsCode;
|
|
111
|
+
if (jsCode) {
|
|
112
|
+
evaluate({
|
|
113
|
+
code: jsCode,
|
|
114
|
+
context: contextContext(),
|
|
115
|
+
state: contentState()
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
function httpReqsData() {
|
|
120
|
+
return {};
|
|
121
|
+
}
|
|
122
|
+
function onClick(_event) {
|
|
123
|
+
if (useContent()) {
|
|
124
|
+
track({
|
|
125
|
+
type: "click",
|
|
126
|
+
canTrack: canTrackToUse(),
|
|
127
|
+
contentId: useContent().id,
|
|
128
|
+
orgId: props.apiKey
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
function evalExpression(expression) {
|
|
133
|
+
return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
|
|
134
|
+
code: group,
|
|
135
|
+
context: contextContext(),
|
|
136
|
+
state: contentState()
|
|
137
|
+
}));
|
|
138
|
+
}
|
|
139
|
+
function handleRequest({ url, key }) {
|
|
140
|
+
const fetchAndSetState = () => __async(this, null, function* () {
|
|
141
|
+
const fetch = yield getFetch();
|
|
142
|
+
const response = yield fetch(url);
|
|
143
|
+
const json = yield response.json();
|
|
144
|
+
const newOverrideState = __spreadProps(__spreadValues({}, overrideState), { [key]: json });
|
|
145
|
+
setOverrideState(newOverrideState);
|
|
146
|
+
});
|
|
147
|
+
fetchAndSetState();
|
|
148
|
+
}
|
|
149
|
+
function runHttpRequests() {
|
|
150
|
+
var _a2, _b2, _c2;
|
|
151
|
+
const requests = (_c2 = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests) != null ? _c2 : {};
|
|
152
|
+
Object.entries(requests).forEach(([key, url]) => {
|
|
153
|
+
if (url && (!httpReqsData()[key] || isEditing())) {
|
|
154
|
+
const evaluatedUrl = evalExpression(url);
|
|
155
|
+
handleRequest({
|
|
156
|
+
url: evaluatedUrl,
|
|
157
|
+
key
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
function emitStateUpdate() {
|
|
163
|
+
if (isEditing()) {
|
|
164
|
+
window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
|
|
165
|
+
detail: {
|
|
166
|
+
state: contentState(),
|
|
167
|
+
ref: {
|
|
168
|
+
name: props.model
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}));
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
function shouldRenderContentStyles() {
|
|
175
|
+
var _a2, _b2, _c2, _d2, _e2;
|
|
176
|
+
return Boolean((((_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.cssCode) || ((_e2 = (_d2 = (_c2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _c2.data) == null ? void 0 : _d2.customFonts) == null ? void 0 : _e2.length)) && TARGET !== "reactNative");
|
|
177
|
+
}
|
|
178
|
+
useEffect(() => {
|
|
179
|
+
if (isBrowser()) {
|
|
180
|
+
if (isEditing()) {
|
|
181
|
+
Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
|
|
182
|
+
var _a2;
|
|
183
|
+
const message = createRegisterComponentMessage(registeredComponent);
|
|
184
|
+
(_a2 = window.parent) == null ? void 0 : _a2.postMessage(message, "*");
|
|
185
|
+
});
|
|
186
|
+
window.addEventListener("message", processMessage);
|
|
187
|
+
window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
|
|
188
|
+
}
|
|
189
|
+
if (useContent()) {
|
|
190
|
+
track({
|
|
191
|
+
type: "impression",
|
|
192
|
+
canTrack: canTrackToUse(),
|
|
193
|
+
contentId: useContent().id,
|
|
194
|
+
orgId: props.apiKey
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
if (isPreviewing()) {
|
|
198
|
+
const searchParams = new URL(location.href).searchParams;
|
|
199
|
+
if (props.model && searchParams.get("builder.preview") === props.model) {
|
|
200
|
+
const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
|
|
201
|
+
if (previewApiKey) {
|
|
202
|
+
getContent({
|
|
203
|
+
model: props.model,
|
|
204
|
+
apiKey: previewApiKey
|
|
205
|
+
}).then((content) => {
|
|
206
|
+
if (content) {
|
|
207
|
+
setOverrideContent(content);
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
evaluateJsCode();
|
|
214
|
+
runHttpRequests();
|
|
215
|
+
emitStateUpdate();
|
|
216
|
+
}
|
|
217
|
+
}, []);
|
|
218
|
+
useEffect(() => {
|
|
219
|
+
evaluateJsCode();
|
|
220
|
+
}, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode]);
|
|
221
|
+
useEffect(() => {
|
|
222
|
+
runHttpRequests();
|
|
223
|
+
}, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
|
|
224
|
+
useEffect(() => {
|
|
225
|
+
emitStateUpdate();
|
|
226
|
+
}, [contentState()]);
|
|
227
|
+
useEffect(() => {
|
|
228
|
+
return () => {
|
|
229
|
+
if (isBrowser()) {
|
|
230
|
+
window.removeEventListener("message", processMessage);
|
|
231
|
+
window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
}, []);
|
|
235
|
+
return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
|
|
236
|
+
value: {
|
|
237
|
+
get content() {
|
|
238
|
+
return useContent();
|
|
239
|
+
},
|
|
240
|
+
get state() {
|
|
241
|
+
return contentState();
|
|
242
|
+
},
|
|
243
|
+
get context() {
|
|
244
|
+
return contextContext();
|
|
245
|
+
},
|
|
246
|
+
get apiKey() {
|
|
247
|
+
return props.apiKey;
|
|
248
|
+
},
|
|
249
|
+
get registeredComponents() {
|
|
250
|
+
return allRegisteredComponents();
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
}, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
254
|
+
onClick: (event) => onClick(event),
|
|
255
|
+
"builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id
|
|
256
|
+
}, shouldRenderContentStyles() ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
|
|
257
|
+
cssCode: (_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.cssCode,
|
|
258
|
+
customFonts: (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.customFonts
|
|
259
|
+
}) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
|
|
260
|
+
blocks: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks
|
|
261
|
+
}))) : null);
|
|
262
|
+
}
|
|
263
|
+
export {
|
|
264
|
+
RenderContent as default
|
|
265
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { TARGET } from "../constants/target.js";
|
|
3
|
+
function RenderInlinedStyles(props) {
|
|
4
|
+
function injectedStyleScript() {
|
|
5
|
+
return `<${tagName()}>${props.styles}</${tagName()}>`;
|
|
6
|
+
}
|
|
7
|
+
function tagName() {
|
|
8
|
+
return "style";
|
|
9
|
+
}
|
|
10
|
+
const TagNameRef = tagName();
|
|
11
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
12
|
+
dangerouslySetInnerHTML: { __html: injectedStyleScript() }
|
|
13
|
+
})) : /* @__PURE__ */ React.createElement(TagNameRef, null, props.styles));
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
RenderInlinedStyles as default
|
|
17
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
import { default as Button } from "../blocks/button/button.js";
|
|
18
|
+
import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
|
|
19
|
+
import { default as Columns } from "../blocks/columns/columns.js";
|
|
20
|
+
import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
|
|
21
|
+
import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
|
|
22
|
+
import { default as Fragment } from "../blocks/fragment/fragment.js";
|
|
23
|
+
import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
|
|
24
|
+
import { default as Image } from "../blocks/image/image.js";
|
|
25
|
+
import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
|
|
26
|
+
import { default as Section } from "../blocks/section/section.js";
|
|
27
|
+
import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
|
|
28
|
+
import { default as Symbol } from "../blocks/symbol/symbol.js";
|
|
29
|
+
import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
|
|
30
|
+
import { default as Text } from "../blocks/text/text.js";
|
|
31
|
+
import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
|
|
32
|
+
import { default as Video } from "../blocks/video/video.js";
|
|
33
|
+
import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
|
|
34
|
+
import { default as embed } from "../blocks/embed/embed.js";
|
|
35
|
+
const getDefaultRegisteredComponents = () => [
|
|
36
|
+
__spreadValues({ component: Columns }, columnsComponentInfo),
|
|
37
|
+
__spreadValues({ component: Image }, imageComponentInfo),
|
|
38
|
+
__spreadValues({ component: Text }, textComponentInfo),
|
|
39
|
+
__spreadValues({ component: Video }, videoComponentInfo),
|
|
40
|
+
__spreadValues({ component: Symbol }, symbolComponentInfo),
|
|
41
|
+
__spreadValues({ component: Button }, buttonComponentInfo),
|
|
42
|
+
__spreadValues({ component: Section }, sectionComponentInfo),
|
|
43
|
+
__spreadValues({ component: Fragment }, fragmentComponentInfo),
|
|
44
|
+
__spreadValues({ component: embed }, embedComponentInfo)
|
|
45
|
+
];
|
|
46
|
+
export {
|
|
47
|
+
getDefaultRegisteredComponents
|
|
48
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const SIZES = {
|
|
2
|
+
small: {
|
|
3
|
+
min: 320,
|
|
4
|
+
default: 321,
|
|
5
|
+
max: 640
|
|
6
|
+
},
|
|
7
|
+
medium: {
|
|
8
|
+
min: 641,
|
|
9
|
+
default: 642,
|
|
10
|
+
max: 991
|
|
11
|
+
},
|
|
12
|
+
large: {
|
|
13
|
+
min: 990,
|
|
14
|
+
default: 991,
|
|
15
|
+
max: 1200
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
|
|
19
|
+
export {
|
|
20
|
+
getMaxWidthQueryForSize
|
|
21
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { isBrowser } from "./is-browser.js";
|
|
2
|
+
import { isEditing } from "./is-editing.js";
|
|
3
|
+
function evaluate({
|
|
4
|
+
code,
|
|
5
|
+
context,
|
|
6
|
+
state,
|
|
7
|
+
event
|
|
8
|
+
}) {
|
|
9
|
+
if (code === "") {
|
|
10
|
+
console.warn("Skipping evaluation of empty code block.");
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
const builder = {
|
|
14
|
+
isEditing: isEditing(),
|
|
15
|
+
isBrowser: isBrowser(),
|
|
16
|
+
isServer: !isBrowser()
|
|
17
|
+
};
|
|
18
|
+
const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
|
|
19
|
+
const useCode = useReturn ? `return (${code});` : code;
|
|
20
|
+
try {
|
|
21
|
+
return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
|
|
22
|
+
} catch (e) {
|
|
23
|
+
console.warn("Builder custom code error: ", e);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
evaluate
|
|
28
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { evaluate } from "./evaluate.js";
|
|
2
|
+
import { getEventHandlerName } from "./event-handler-name.js";
|
|
3
|
+
function getBlockActions(options) {
|
|
4
|
+
var _a;
|
|
5
|
+
const obj = {};
|
|
6
|
+
const optionActions = (_a = options.block.actions) != null ? _a : {};
|
|
7
|
+
for (const key in optionActions) {
|
|
8
|
+
if (!optionActions.hasOwnProperty(key)) {
|
|
9
|
+
continue;
|
|
10
|
+
}
|
|
11
|
+
const value = optionActions[key];
|
|
12
|
+
obj[getEventHandlerName(key)] = (event) => evaluate({
|
|
13
|
+
code: value,
|
|
14
|
+
context: options.context,
|
|
15
|
+
state: options.state,
|
|
16
|
+
event
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
return obj;
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
getBlockActions
|
|
23
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
function getBlockComponentOptions(block) {
|
|
21
|
+
var _a;
|
|
22
|
+
return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
|
|
23
|
+
builderBlock: block
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
getBlockComponentOptions
|
|
28
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
function getBlockProperties(block) {
|
|
21
|
+
var _a;
|
|
22
|
+
return __spreadProps(__spreadValues({}, block.properties), {
|
|
23
|
+
"builder-id": block.id,
|
|
24
|
+
class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
getBlockProperties
|
|
29
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
|
|
18
|
+
import { convertStyleObject } from "./convert-style-object.js";
|
|
19
|
+
import { sanitizeBlockStyles } from "./sanitize-styles.js";
|
|
20
|
+
function getBlockStyles(block) {
|
|
21
|
+
var _a, _b, _c, _d, _e;
|
|
22
|
+
const styles = __spreadValues(__spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large)), block.styles);
|
|
23
|
+
if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
|
|
24
|
+
styles[getMaxWidthQueryForSize("medium")] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
|
|
25
|
+
}
|
|
26
|
+
if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
|
|
27
|
+
styles[getMaxWidthQueryForSize("small")] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
|
|
28
|
+
}
|
|
29
|
+
sanitizeBlockStyles(styles);
|
|
30
|
+
return styles;
|
|
31
|
+
}
|
|
32
|
+
export {
|
|
33
|
+
getBlockStyles
|
|
34
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
|
|
2
|
+
const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
|
|
3
|
+
const url = new URL(`localhost:3000/about-us?${querystring}`);
|
|
4
|
+
describe("Get Builder SearchParams", () => {
|
|
5
|
+
test("correctly converts URLSearchParams to object", () => {
|
|
6
|
+
const output = convertSearchParamsToQueryObject(url.searchParams);
|
|
7
|
+
expect(output).toMatchSnapshot();
|
|
8
|
+
});
|
|
9
|
+
test("correctly extracts all builder params from a query object", () => {
|
|
10
|
+
const output = getBuilderSearchParams(convertSearchParamsToQueryObject(url.searchParams));
|
|
11
|
+
expect(output).toMatchSnapshot();
|
|
12
|
+
});
|
|
13
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { isBrowser } from "../is-browser";
|
|
2
|
+
const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
|
|
3
|
+
const convertSearchParamsToQueryObject = (searchParams) => {
|
|
4
|
+
const options = {};
|
|
5
|
+
searchParams.forEach((value, key) => {
|
|
6
|
+
options[key] = value;
|
|
7
|
+
});
|
|
8
|
+
return options;
|
|
9
|
+
};
|
|
10
|
+
const getBuilderSearchParams = (options) => {
|
|
11
|
+
const newOptions = {};
|
|
12
|
+
Object.keys(options).forEach((key) => {
|
|
13
|
+
if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
|
|
14
|
+
const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "");
|
|
15
|
+
newOptions[trimmedKey] = options[key];
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
return newOptions;
|
|
19
|
+
};
|
|
20
|
+
const getBuilderSearchParamsFromWindow = () => {
|
|
21
|
+
if (!isBrowser()) {
|
|
22
|
+
return {};
|
|
23
|
+
}
|
|
24
|
+
const searchParams = new URLSearchParams(window.location.search);
|
|
25
|
+
return getBuilderSearchParams(convertSearchParamsToQueryObject(searchParams));
|
|
26
|
+
};
|
|
27
|
+
const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
|
|
28
|
+
export {
|
|
29
|
+
convertSearchParamsToQueryObject,
|
|
30
|
+
getBuilderSearchParams,
|
|
31
|
+
getBuilderSearchParamsFromWindow,
|
|
32
|
+
normalizeSearchParams
|
|
33
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const handleABTesting = (item, testGroups) => {
|
|
2
|
+
if (item.variations && Object.keys(item.variations).length) {
|
|
3
|
+
const testGroup = item.id ? testGroups[item.id] : void 0;
|
|
4
|
+
const variationValue = testGroup ? item.variations[testGroup] : void 0;
|
|
5
|
+
if (testGroup && variationValue) {
|
|
6
|
+
item.data = variationValue.data;
|
|
7
|
+
item.testVariationId = variationValue.id;
|
|
8
|
+
item.testVariationName = variationValue.name;
|
|
9
|
+
} else {
|
|
10
|
+
let n = 0;
|
|
11
|
+
const random = Math.random();
|
|
12
|
+
let set = false;
|
|
13
|
+
for (const id in item.variations) {
|
|
14
|
+
const variation = item.variations[id];
|
|
15
|
+
const testRatio = variation.testRatio;
|
|
16
|
+
n += testRatio;
|
|
17
|
+
if (random < n) {
|
|
18
|
+
const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
|
|
19
|
+
set = true;
|
|
20
|
+
Object.assign(item, {
|
|
21
|
+
data: variation.data,
|
|
22
|
+
testVariationId: variation.id,
|
|
23
|
+
testVariationName: variationName
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
if (!set) {
|
|
28
|
+
Object.assign(item, {
|
|
29
|
+
testVariationId: item.id,
|
|
30
|
+
testVariationName: "Default"
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
export {
|
|
37
|
+
handleABTesting
|
|
38
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { generateContentUrl } from ".";
|
|
2
|
+
const testKey = "YJIGb4i01jvw0SRdL5Bt";
|
|
3
|
+
const testModel = "page";
|
|
4
|
+
const testId = "c1b81bab59704599b997574eb0736def";
|
|
5
|
+
const options = {
|
|
6
|
+
cachebust: "true",
|
|
7
|
+
noCache: "true",
|
|
8
|
+
"overrides.037948e52eaf4743afed464f02c70da4": "037948e52eaf4743afed464f02c70da4",
|
|
9
|
+
"overrides.page": "037948e52eaf4743afed464f02c70da4",
|
|
10
|
+
"overrides.page:/": "037948e52eaf4743afed464f02c70da4",
|
|
11
|
+
preview: "page"
|
|
12
|
+
};
|
|
13
|
+
describe("Generate Content URL", () => {
|
|
14
|
+
test("generates the proper value for a simple query", () => {
|
|
15
|
+
const output = generateContentUrl({
|
|
16
|
+
apiKey: testKey,
|
|
17
|
+
model: testModel,
|
|
18
|
+
query: { id: testId }
|
|
19
|
+
});
|
|
20
|
+
expect(output).toMatchSnapshot();
|
|
21
|
+
});
|
|
22
|
+
test("Handles overrides correctly", () => {
|
|
23
|
+
const output = generateContentUrl({
|
|
24
|
+
apiKey: testKey,
|
|
25
|
+
model: testModel,
|
|
26
|
+
query: { id: testId },
|
|
27
|
+
options
|
|
28
|
+
});
|
|
29
|
+
expect(output).toMatchSnapshot();
|
|
30
|
+
});
|
|
31
|
+
});
|