@builder.io/sdk-react-native 0.0.6-1 → 0.0.6-3
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/package.json +4 -1
- package/src/blocks/button/button.js +34 -0
- package/src/blocks/button/component-info.js +41 -0
- package/src/blocks/columns/columns.js +62 -0
- package/src/blocks/columns/component-info.js +242 -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 +44 -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 +224 -0
- package/src/blocks/fragment/component-info.js +11 -0
- package/src/blocks/fragment/fragment.js +8 -0
- package/src/blocks/image/component-info.js +151 -0
- package/src/blocks/image/image.helpers.js +48 -0
- package/src/blocks/image/image.js +41 -0
- package/src/blocks/img/component-info.js +20 -0
- package/src/blocks/img/img.js +36 -0
- package/src/blocks/input/component-info.js +74 -0
- package/src/blocks/input/input.js +36 -0
- package/src/blocks/raw-text/component-info.js +16 -0
- package/src/blocks/raw-text/raw-text.js +10 -0
- package/src/blocks/section/component-info.js +49 -0
- package/src/blocks/section/section.js +31 -0
- package/src/blocks/select/component-info.js +59 -0
- package/src/blocks/select/select.js +36 -0
- package/src/blocks/submit-button/component-info.js +28 -0
- package/src/blocks/submit-button/submit-button.js +29 -0
- package/src/blocks/symbol/component-info.js +43 -0
- package/src/blocks/symbol/symbol.js +65 -0
- package/src/blocks/text/component-info.js +24 -0
- package/src/blocks/text/text.js +65 -0
- package/src/blocks/textarea/component-info.js +47 -0
- package/src/blocks/textarea/textarea.js +32 -0
- package/src/blocks/util.js +7 -0
- package/src/blocks/video/component-info.js +106 -0
- package/src/blocks/video/video.js +52 -0
- package/src/components/render-block/block-styles.js +37 -0
- package/src/components/render-block/render-block.helpers.js +23 -0
- package/src/components/render-block/render-block.js +171 -0
- package/src/components/render-block/render-component.js +36 -0
- package/src/components/render-block/render-repeated-block.js +30 -0
- package/src/components/render-block/types.js +0 -0
- package/src/components/render-blocks.js +63 -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 +262 -0
- package/src/components/render-inlined-styles.js +18 -0
- package/src/constants/builder-registered-components.js +42 -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/context/types.js +0 -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 +41 -0
- package/src/functions/get-block-styles.js +44 -0
- package/src/functions/get-block-tag.js +7 -0
- package/src/functions/get-builder-search-params/fn.test.js +13 -0
- package/src/functions/get-builder-search-params/index.js +37 -0
- package/src/functions/get-content/ab-testing.js +98 -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 +57 -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/mark-mutable.js +10 -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 +61 -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 +117 -0
- package/src/functions/transform-block.js +37 -0
- package/src/helpers/ab-tests.js +16 -0
- package/src/helpers/cookie.js +72 -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 +49 -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 +18 -0
- package/src/index-helpers/top-of-file.js +1 -0
- package/src/index.js +10 -0
- package/src/scripts/init-editing.js +79 -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
- package/CHANGELOG.md +0 -42
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import RenderInlinedStyles from "../../render-inlined-styles.js";
|
|
3
|
+
function RenderContentStyles(props) {
|
|
4
|
+
function getCssFromFont(font) {
|
|
5
|
+
var _a, _b;
|
|
6
|
+
const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
|
|
7
|
+
const name = family.split(",")[0];
|
|
8
|
+
const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
|
|
9
|
+
let str = "";
|
|
10
|
+
if (url && family && name) {
|
|
11
|
+
str += `
|
|
12
|
+
@font-face {
|
|
13
|
+
font-family: "${family}";
|
|
14
|
+
src: local("${name}"), url('${url}') format('woff2');
|
|
15
|
+
font-display: fallback;
|
|
16
|
+
font-weight: 400;
|
|
17
|
+
}
|
|
18
|
+
`.trim();
|
|
19
|
+
}
|
|
20
|
+
if (font.files) {
|
|
21
|
+
for (const weight in font.files) {
|
|
22
|
+
const isNumber = String(Number(weight)) === weight;
|
|
23
|
+
if (!isNumber) {
|
|
24
|
+
continue;
|
|
25
|
+
}
|
|
26
|
+
const weightUrl = font.files[weight];
|
|
27
|
+
if (weightUrl && weightUrl !== url) {
|
|
28
|
+
str += `
|
|
29
|
+
@font-face {
|
|
30
|
+
font-family: "${family}";
|
|
31
|
+
src: url('${weightUrl}') format('woff2');
|
|
32
|
+
font-display: fallback;
|
|
33
|
+
font-weight: ${weight};
|
|
34
|
+
}
|
|
35
|
+
`.trim();
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return str;
|
|
40
|
+
}
|
|
41
|
+
function getFontCss({ customFonts }) {
|
|
42
|
+
var _a;
|
|
43
|
+
return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
|
|
44
|
+
}
|
|
45
|
+
function injectedStyles() {
|
|
46
|
+
return `
|
|
47
|
+
${props.cssCode || ""}
|
|
48
|
+
${getFontCss({
|
|
49
|
+
customFonts: props.customFonts
|
|
50
|
+
})}`;
|
|
51
|
+
}
|
|
52
|
+
return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
|
|
53
|
+
styles: injectedStyles()
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
export {
|
|
57
|
+
RenderContentStyles as default
|
|
58
|
+
};
|
|
@@ -0,0 +1,262 @@
|
|
|
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
|
+
import * as React from "react";
|
|
21
|
+
import { View } from "react-native";
|
|
22
|
+
import { useState, useRef, useEffect } from "react";
|
|
23
|
+
import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
|
|
24
|
+
import { TARGET } from "../../constants/target.js";
|
|
25
|
+
import BuilderContext from "../../context/builder.context.js";
|
|
26
|
+
import { evaluate } from "../../functions/evaluate.js";
|
|
27
|
+
import { getContent } from "../../functions/get-content/index.js";
|
|
28
|
+
import { getFetch } from "../../functions/get-fetch.js";
|
|
29
|
+
import { isBrowser } from "../../functions/is-browser.js";
|
|
30
|
+
import { isEditing } from "../../functions/is-editing.js";
|
|
31
|
+
import { isPreviewing } from "../../functions/is-previewing.js";
|
|
32
|
+
import {
|
|
33
|
+
components,
|
|
34
|
+
createRegisterComponentMessage
|
|
35
|
+
} from "../../functions/register-component.js";
|
|
36
|
+
import { track } from "../../functions/track.js";
|
|
37
|
+
import RenderBlocks from "../render-blocks.js";
|
|
38
|
+
import RenderContentStyles from "./components/render-styles.js";
|
|
39
|
+
import {
|
|
40
|
+
registerInsertMenu,
|
|
41
|
+
setupBrowserForEditing
|
|
42
|
+
} from "../../scripts/init-editing.js";
|
|
43
|
+
import { markMutable } from "../../functions/mark-mutable.js";
|
|
44
|
+
function RenderContent(props) {
|
|
45
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
46
|
+
const elementRef = useRef(null);
|
|
47
|
+
const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
|
|
48
|
+
function useContent() {
|
|
49
|
+
var _a2;
|
|
50
|
+
if (!props.content && !overrideContent) {
|
|
51
|
+
return void 0;
|
|
52
|
+
}
|
|
53
|
+
const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
|
|
54
|
+
data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data)
|
|
55
|
+
});
|
|
56
|
+
return mergedContent;
|
|
57
|
+
}
|
|
58
|
+
const [overrideContent, setOverrideContent] = useState(() => null);
|
|
59
|
+
const [update, setUpdate] = useState(() => 0);
|
|
60
|
+
function canTrackToUse() {
|
|
61
|
+
return props.canTrack || true;
|
|
62
|
+
}
|
|
63
|
+
const [overrideState, setOverrideState] = useState(() => ({}));
|
|
64
|
+
function contentState() {
|
|
65
|
+
var _a2, _b2;
|
|
66
|
+
return __spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), overrideState);
|
|
67
|
+
}
|
|
68
|
+
function contextContext() {
|
|
69
|
+
return props.context || {};
|
|
70
|
+
}
|
|
71
|
+
function allRegisteredComponents() {
|
|
72
|
+
const allComponentsArray = [
|
|
73
|
+
...getDefaultRegisteredComponents(),
|
|
74
|
+
...components,
|
|
75
|
+
...props.customComponents || []
|
|
76
|
+
];
|
|
77
|
+
const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), { [curr.name]: curr }), {});
|
|
78
|
+
return allComponents;
|
|
79
|
+
}
|
|
80
|
+
function processMessage(event) {
|
|
81
|
+
const { data } = event;
|
|
82
|
+
if (data) {
|
|
83
|
+
switch (data.type) {
|
|
84
|
+
case "builder.contentUpdate": {
|
|
85
|
+
const messageContent = data.data;
|
|
86
|
+
const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
|
|
87
|
+
const contentData = messageContent.data;
|
|
88
|
+
if (key === props.model) {
|
|
89
|
+
setOverrideContent(contentData);
|
|
90
|
+
setForceReRenderCount(forceReRenderCount + 1);
|
|
91
|
+
}
|
|
92
|
+
break;
|
|
93
|
+
}
|
|
94
|
+
case "builder.patchUpdates": {
|
|
95
|
+
break;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
function evaluateJsCode() {
|
|
101
|
+
var _a2, _b2;
|
|
102
|
+
const jsCode = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.jsCode;
|
|
103
|
+
if (jsCode) {
|
|
104
|
+
evaluate({
|
|
105
|
+
code: jsCode,
|
|
106
|
+
context: contextContext(),
|
|
107
|
+
state: contentState()
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
function httpReqsData() {
|
|
112
|
+
return {};
|
|
113
|
+
}
|
|
114
|
+
function onClick(_event) {
|
|
115
|
+
var _a2;
|
|
116
|
+
if (useContent()) {
|
|
117
|
+
track({
|
|
118
|
+
type: "click",
|
|
119
|
+
canTrack: canTrackToUse(),
|
|
120
|
+
contentId: (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id,
|
|
121
|
+
orgId: props.apiKey
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
function evalExpression(expression) {
|
|
126
|
+
return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
|
|
127
|
+
code: group,
|
|
128
|
+
context: contextContext(),
|
|
129
|
+
state: contentState()
|
|
130
|
+
}));
|
|
131
|
+
}
|
|
132
|
+
function handleRequest({ url, key }) {
|
|
133
|
+
getFetch().then((fetch) => fetch(url)).then((response) => response.json()).then((json) => {
|
|
134
|
+
const newOverrideState = __spreadProps(__spreadValues({}, overrideState), { [key]: json });
|
|
135
|
+
setOverrideState(newOverrideState);
|
|
136
|
+
}).catch((err) => {
|
|
137
|
+
console.log("error fetching dynamic data", url, err);
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
function runHttpRequests() {
|
|
141
|
+
var _a2, _b2, _c2;
|
|
142
|
+
const requests = (_c2 = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests) != null ? _c2 : {};
|
|
143
|
+
Object.entries(requests).forEach(([key, url]) => {
|
|
144
|
+
if (url && (!httpReqsData()[key] || isEditing())) {
|
|
145
|
+
const evaluatedUrl = evalExpression(url);
|
|
146
|
+
handleRequest({
|
|
147
|
+
url: evaluatedUrl,
|
|
148
|
+
key
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
function emitStateUpdate() {
|
|
154
|
+
if (isEditing()) {
|
|
155
|
+
window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
|
|
156
|
+
detail: {
|
|
157
|
+
state: contentState(),
|
|
158
|
+
ref: {
|
|
159
|
+
name: props.model
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}));
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
function shouldRenderContentStyles() {
|
|
166
|
+
var _a2, _b2, _c2, _d2, _e2;
|
|
167
|
+
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");
|
|
168
|
+
}
|
|
169
|
+
useEffect(() => {
|
|
170
|
+
var _a2;
|
|
171
|
+
if (isBrowser()) {
|
|
172
|
+
if (isEditing()) {
|
|
173
|
+
setForceReRenderCount(forceReRenderCount + 1);
|
|
174
|
+
registerInsertMenu();
|
|
175
|
+
setupBrowserForEditing();
|
|
176
|
+
Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
|
|
177
|
+
var _a3;
|
|
178
|
+
const message = createRegisterComponentMessage(registeredComponent);
|
|
179
|
+
(_a3 = window.parent) == null ? void 0 : _a3.postMessage(message, "*");
|
|
180
|
+
});
|
|
181
|
+
window.addEventListener("message", processMessage);
|
|
182
|
+
window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
|
|
183
|
+
}
|
|
184
|
+
if (useContent()) {
|
|
185
|
+
track({
|
|
186
|
+
type: "impression",
|
|
187
|
+
canTrack: canTrackToUse(),
|
|
188
|
+
contentId: (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id,
|
|
189
|
+
orgId: props.apiKey
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
if (isPreviewing()) {
|
|
193
|
+
const searchParams = new URL(location.href).searchParams;
|
|
194
|
+
if (props.model && searchParams.get("builder.preview") === props.model) {
|
|
195
|
+
const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
|
|
196
|
+
if (previewApiKey) {
|
|
197
|
+
getContent({
|
|
198
|
+
model: props.model,
|
|
199
|
+
apiKey: previewApiKey
|
|
200
|
+
}).then((content) => {
|
|
201
|
+
if (content) {
|
|
202
|
+
setOverrideContent(content);
|
|
203
|
+
}
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
evaluateJsCode();
|
|
209
|
+
runHttpRequests();
|
|
210
|
+
emitStateUpdate();
|
|
211
|
+
}
|
|
212
|
+
}, []);
|
|
213
|
+
useEffect(() => {
|
|
214
|
+
evaluateJsCode();
|
|
215
|
+
}, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode]);
|
|
216
|
+
useEffect(() => {
|
|
217
|
+
runHttpRequests();
|
|
218
|
+
}, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
|
|
219
|
+
useEffect(() => {
|
|
220
|
+
emitStateUpdate();
|
|
221
|
+
}, [contentState()]);
|
|
222
|
+
useEffect(() => {
|
|
223
|
+
return () => {
|
|
224
|
+
if (isBrowser()) {
|
|
225
|
+
window.removeEventListener("message", processMessage);
|
|
226
|
+
window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
}, []);
|
|
230
|
+
return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
|
|
231
|
+
value: {
|
|
232
|
+
get content() {
|
|
233
|
+
return useContent();
|
|
234
|
+
},
|
|
235
|
+
get state() {
|
|
236
|
+
return contentState();
|
|
237
|
+
},
|
|
238
|
+
get context() {
|
|
239
|
+
return contextContext();
|
|
240
|
+
},
|
|
241
|
+
get apiKey() {
|
|
242
|
+
return props.apiKey;
|
|
243
|
+
},
|
|
244
|
+
get registeredComponents() {
|
|
245
|
+
return allRegisteredComponents();
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
|
|
249
|
+
ref: elementRef,
|
|
250
|
+
onClick: (event) => onClick(event),
|
|
251
|
+
"builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id
|
|
252
|
+
}, shouldRenderContentStyles() ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
|
|
253
|
+
cssCode: (_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.cssCode,
|
|
254
|
+
customFonts: (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.customFonts
|
|
255
|
+
}) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
|
|
256
|
+
blocks: markMutable((_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks),
|
|
257
|
+
key: forceReRenderCount
|
|
258
|
+
}))) : null);
|
|
259
|
+
}
|
|
260
|
+
export {
|
|
261
|
+
RenderContent as default
|
|
262
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, Text } from "react-native";
|
|
3
|
+
import { TARGET } from "../constants/target.js";
|
|
4
|
+
function RenderInlinedStyles(props) {
|
|
5
|
+
function injectedStyleScript() {
|
|
6
|
+
return `<${tagName()}>${props.styles}</${tagName()}>`;
|
|
7
|
+
}
|
|
8
|
+
function tagName() {
|
|
9
|
+
return "style";
|
|
10
|
+
}
|
|
11
|
+
const TagNameRef = tagName();
|
|
12
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
|
|
13
|
+
dangerouslySetInnerHTML: { __html: injectedStyleScript() }
|
|
14
|
+
})) : /* @__PURE__ */ React.createElement(TagNameRef, null, /* @__PURE__ */ React.createElement(Text, null, props.styles)));
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
RenderInlinedStyles as default
|
|
18
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
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
|
+
const getDefaultRegisteredComponents = () => [
|
|
32
|
+
__spreadValues({ component: Columns }, columnsComponentInfo),
|
|
33
|
+
__spreadValues({ component: Image }, imageComponentInfo),
|
|
34
|
+
__spreadValues({ component: Text }, textComponentInfo),
|
|
35
|
+
__spreadValues({ component: Symbol }, symbolComponentInfo),
|
|
36
|
+
__spreadValues({ component: Button }, buttonComponentInfo),
|
|
37
|
+
__spreadValues({ component: Section }, sectionComponentInfo),
|
|
38
|
+
__spreadValues({ component: Fragment }, fragmentComponentInfo)
|
|
39
|
+
];
|
|
40
|
+
export {
|
|
41
|
+
getDefaultRegisteredComponents
|
|
42
|
+
};
|
|
@@ -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
|
+
};
|
|
File without changes
|
|
@@ -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: \n While Evaluating: \n ", useCode, "\n", e.message || 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,41 @@
|
|
|
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
|
+
import { isEditing } from "./is-editing";
|
|
21
|
+
import { findDOMNode } from "react-dom";
|
|
22
|
+
function getBlockProperties(block) {
|
|
23
|
+
return __spreadProps(__spreadValues({}, block.properties), {
|
|
24
|
+
ref: (ref) => {
|
|
25
|
+
if (isEditing()) {
|
|
26
|
+
const el = findDOMNode(ref);
|
|
27
|
+
if (el) {
|
|
28
|
+
el.setAttribute("builder-id", block.id);
|
|
29
|
+
el.classList.add(block.id);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
dataSet: {
|
|
34
|
+
"builder-id": block.id,
|
|
35
|
+
class: [block.id, "builder-block", block.class].filter(Boolean).join(" ")
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
export {
|
|
40
|
+
getBlockProperties
|
|
41
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
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 { TARGET } from "../constants/target.js";
|
|
19
|
+
import { convertStyleObject } from "./convert-style-object.js";
|
|
20
|
+
import { sanitizeBlockStyles } from "./sanitize-styles.js";
|
|
21
|
+
const getStyleForTarget = (styles) => {
|
|
22
|
+
switch (TARGET) {
|
|
23
|
+
case "reactNative": {
|
|
24
|
+
return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? convertStyleObject(styles.medium) : {}), styles.small ? convertStyleObject(styles.small) : {});
|
|
25
|
+
}
|
|
26
|
+
default:
|
|
27
|
+
return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? {
|
|
28
|
+
[getMaxWidthQueryForSize("medium")]: convertStyleObject(styles.medium)
|
|
29
|
+
} : {}), styles.small ? {
|
|
30
|
+
[getMaxWidthQueryForSize("small")]: convertStyleObject(styles.small)
|
|
31
|
+
} : {});
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
function getBlockStyles(block) {
|
|
35
|
+
if (!block.responsiveStyles) {
|
|
36
|
+
return {};
|
|
37
|
+
}
|
|
38
|
+
const styles = getStyleForTarget(block.responsiveStyles);
|
|
39
|
+
const newStyles = sanitizeBlockStyles(styles);
|
|
40
|
+
return newStyles;
|
|
41
|
+
}
|
|
42
|
+
export {
|
|
43
|
+
getBlockStyles
|
|
44
|
+
};
|
|
@@ -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
|
+
});
|