@builder.io/sdk-react 0.0.3 → 0.0.4
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 +2 -1
- package/packages/_rsc/src/blocks/image/image.js +20 -14
- package/packages/_rsc/src/components/render-block/render-block.js +9 -6
- package/packages/_rsc/src/components/render-content/render-content.js +3 -1
- package/packages/_rsc/src/functions/get-block-actions-handler.js +8 -9
- package/packages/_rsc/src/functions/get-block-actions.js +2 -2
- package/packages/_rsc/src/functions/get-builder-search-params/index.js +2 -1
- package/packages/_rsc/src/functions/get-content/index.js +4 -3
- package/packages/_rsc/src/functions/track.js +4 -0
- package/packages/_rsc/src/scripts/init-editing.js +10 -4
- package/src/blocks/image/image.jsx +36 -14
- package/src/components/render-block/render-block.jsx +9 -6
- package/src/components/render-content/render-content.jsx +13 -4
- package/src/functions/evaluate.js +4 -3
- package/src/functions/get-block-actions-handler.js +8 -9
- package/src/functions/get-block-actions.js +2 -2
- package/src/functions/get-builder-search-params/index.js +2 -1
- package/src/functions/get-content/index.js +4 -3
- package/src/functions/track.js +4 -0
- package/src/scripts/init-editing.js +10 -4
- package/packages/_rsc/src/functions/mark-mutable.js +0 -10
- package/src/functions/mark-mutable.js +0 -10
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@builder.io/sdk-react",
|
|
3
3
|
"description": "Builder.io SDK for React",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.4",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"exports": {
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
"scripts": {
|
|
18
|
+
"build": "echo 'no need to build react SDK'",
|
|
18
19
|
"release:patch": "npm version patch --no-git-tag-version && npm publish --access public",
|
|
19
20
|
"release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
|
|
20
21
|
},
|
|
@@ -44,6 +44,17 @@ function Image(props) {
|
|
|
44
44
|
} else {
|
|
45
45
|
return "";
|
|
46
46
|
}
|
|
47
|
+
},
|
|
48
|
+
get aspectRatioCss() {
|
|
49
|
+
const aspectRatioStyles = {
|
|
50
|
+
position: "absolute",
|
|
51
|
+
height: "100%",
|
|
52
|
+
width: "100%",
|
|
53
|
+
left: "0px",
|
|
54
|
+
top: "0px"
|
|
55
|
+
};
|
|
56
|
+
const out = props.aspectRatio ? aspectRatioStyles : void 0;
|
|
57
|
+
return out;
|
|
47
58
|
}
|
|
48
59
|
};
|
|
49
60
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("picture", null, state.webpSrcSet ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
|
|
@@ -53,34 +64,29 @@ function Image(props) {
|
|
|
53
64
|
loading: "lazy",
|
|
54
65
|
alt: props.altText,
|
|
55
66
|
role: props.altText ? "presentation" : void 0,
|
|
56
|
-
style: {
|
|
57
|
-
objectPosition: props.
|
|
67
|
+
style: __spreadValues({
|
|
68
|
+
objectPosition: props.backgroundPosition || "center",
|
|
58
69
|
objectFit: props.backgroundSize || "cover"
|
|
59
|
-
},
|
|
60
|
-
className: "builder-image" + (props.className ? " " + props.className : "") + " img-
|
|
70
|
+
}, state.aspectRatioCss),
|
|
71
|
+
className: "builder-image" + (props.className ? " " + props.className : "") + " img-03c4fd62",
|
|
61
72
|
src: props.image,
|
|
62
73
|
srcSet: state.srcSetToUse,
|
|
63
74
|
sizes: props.sizes
|
|
64
75
|
}), /* @__PURE__ */ React.createElement("source", {
|
|
65
76
|
srcSet: state.srcSetToUse
|
|
66
77
|
})), props.aspectRatio && !(((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && props.fitContent) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
67
|
-
className: "builder-image-sizer div-
|
|
78
|
+
className: "builder-image-sizer div-03c4fd62",
|
|
68
79
|
style: {
|
|
69
80
|
paddingTop: props.aspectRatio * 100 + "%"
|
|
70
81
|
}
|
|
71
82
|
})) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent && props.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
72
|
-
className: "div-
|
|
73
|
-
}, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-
|
|
83
|
+
className: "div-03c4fd62-2"
|
|
84
|
+
}, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-03c4fd62 {
|
|
74
85
|
opacity: 1;
|
|
75
|
-
transition: opacity 0.2s ease-in-out;
|
|
76
|
-
position: absolute;
|
|
77
|
-
height: 100%;
|
|
78
|
-
width: 100%;
|
|
79
|
-
top: 0px;
|
|
80
|
-
left: 0px; }.div-af05e244 {
|
|
86
|
+
transition: opacity 0.2s ease-in-out; }.div-03c4fd62 {
|
|
81
87
|
width: 100%;
|
|
82
88
|
pointer-events: none;
|
|
83
|
-
font-size: 0; }.div-
|
|
89
|
+
font-size: 0; }.div-03c4fd62-2 {
|
|
84
90
|
display: flex;
|
|
85
91
|
flex-direction: column;
|
|
86
92
|
align-items: stretch;
|
|
@@ -80,12 +80,15 @@ function RenderBlock(props) {
|
|
|
80
80
|
shouldEvaluateBindings: true
|
|
81
81
|
});
|
|
82
82
|
},
|
|
83
|
-
get
|
|
84
|
-
return
|
|
83
|
+
get actions() {
|
|
84
|
+
return getBlockActions({
|
|
85
85
|
block: state.useBlock,
|
|
86
86
|
state: props.context.state,
|
|
87
87
|
context: props.context.context
|
|
88
|
-
})
|
|
88
|
+
});
|
|
89
|
+
},
|
|
90
|
+
get attributes() {
|
|
91
|
+
return __spreadValues(__spreadValues({}, getBlockProperties(state.useBlock)), TARGET === "reactNative" ? {
|
|
89
92
|
style: getReactNativeBlockStyles({
|
|
90
93
|
block: state.useBlock,
|
|
91
94
|
context: props.context
|
|
@@ -102,7 +105,7 @@ function RenderBlock(props) {
|
|
|
102
105
|
blockChildren: state.useChildren,
|
|
103
106
|
componentRef: (_a2 = state.component) == null ? void 0 : _a2.component,
|
|
104
107
|
componentOptions: __spreadValues(__spreadValues({}, getBlockComponentOptions(state.useBlock)), state.shouldWrap ? {} : {
|
|
105
|
-
attributes: state.attributes
|
|
108
|
+
attributes: __spreadValues(__spreadValues({}, state.attributes), state.actions)
|
|
106
109
|
}),
|
|
107
110
|
context: state.childrenContext
|
|
108
111
|
};
|
|
@@ -177,12 +180,12 @@ function RenderBlock(props) {
|
|
|
177
180
|
};
|
|
178
181
|
const RenderComponentTagRef = state.renderComponentTag;
|
|
179
182
|
const TagRef = state.tag;
|
|
180
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, state.shouldWrap ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(state.tag) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues({}, state.attributes))) : null, !isEmptyHtmlElement(state.tag) && state.repeatItemData ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = state.repeatItemData) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
|
|
183
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, state.shouldWrap ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(state.tag) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues(__spreadValues({}, state.attributes), state.actions))) : null, !isEmptyHtmlElement(state.tag) && state.repeatItemData ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = state.repeatItemData) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
|
|
181
184
|
key: index,
|
|
182
185
|
repeatContext: data.context,
|
|
183
186
|
block: data.block,
|
|
184
187
|
_context
|
|
185
|
-
}))) : null, !isEmptyHtmlElement(state.tag) && !state.repeatItemData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues({}, state.attributes), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadProps(__spreadValues({}, state.renderComponentProps), {
|
|
188
|
+
}))) : null, !isEmptyHtmlElement(state.tag) && !state.repeatItemData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues(__spreadValues({}, state.attributes), state.actions), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadProps(__spreadValues({}, state.renderComponentProps), {
|
|
186
189
|
_context
|
|
187
190
|
})), (_b = state.childrenWithoutParentComponent) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
|
|
188
191
|
key: "render-block-" + child.id,
|
|
@@ -52,7 +52,9 @@ function RenderContent(props) {
|
|
|
52
52
|
overrideState: {},
|
|
53
53
|
get contentState() {
|
|
54
54
|
var _a2, _b2;
|
|
55
|
-
return __spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data),
|
|
55
|
+
return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), props.locale ? {
|
|
56
|
+
locale: props.locale
|
|
57
|
+
} : {}), state.overrideState);
|
|
56
58
|
},
|
|
57
59
|
get contextContext() {
|
|
58
60
|
return props.context || {};
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { evaluate } from "./evaluate.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
2
|
+
const createEventHandler = (value, options) => (event) => evaluate({
|
|
3
|
+
code: value,
|
|
4
|
+
context: options.context,
|
|
5
|
+
state: options.state,
|
|
6
|
+
event,
|
|
7
|
+
isExpression: false
|
|
8
|
+
});
|
|
10
9
|
export {
|
|
11
|
-
|
|
10
|
+
createEventHandler
|
|
12
11
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getEventHandlerName } from "./event-handler-name.js";
|
|
2
|
-
import {
|
|
2
|
+
import { createEventHandler } from "./get-block-actions-handler.js";
|
|
3
3
|
function getBlockActions(options) {
|
|
4
4
|
var _a;
|
|
5
5
|
const obj = {};
|
|
@@ -9,7 +9,7 @@ function getBlockActions(options) {
|
|
|
9
9
|
continue;
|
|
10
10
|
}
|
|
11
11
|
const value = optionActions[key];
|
|
12
|
-
obj[getEventHandlerName(key)] =
|
|
12
|
+
obj[getEventHandlerName(key)] = createEventHandler(value, options);
|
|
13
13
|
}
|
|
14
14
|
return obj;
|
|
15
15
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { isBrowser } from "../is-browser.js";
|
|
2
2
|
const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
|
|
3
|
+
const BUILDER_OPTIONS_PREFIX = "options.";
|
|
3
4
|
const convertSearchParamsToQueryObject = (searchParams) => {
|
|
4
5
|
const options = {};
|
|
5
6
|
searchParams.forEach((value, key) => {
|
|
@@ -15,7 +16,7 @@ const getBuilderSearchParams = (_options) => {
|
|
|
15
16
|
const newOptions = {};
|
|
16
17
|
Object.keys(options).forEach((key) => {
|
|
17
18
|
if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
|
|
18
|
-
const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "");
|
|
19
|
+
const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
|
|
19
20
|
newOptions[trimmedKey] = options[key];
|
|
20
21
|
}
|
|
21
22
|
});
|
|
@@ -57,12 +57,13 @@ const generateContentUrl = (options) => {
|
|
|
57
57
|
noTraverse = false,
|
|
58
58
|
model,
|
|
59
59
|
apiKey,
|
|
60
|
-
includeRefs = true
|
|
60
|
+
includeRefs = true,
|
|
61
|
+
locale
|
|
61
62
|
} = options;
|
|
62
63
|
if (!apiKey) {
|
|
63
64
|
throw new Error("Missing API key");
|
|
64
65
|
}
|
|
65
|
-
const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
|
|
66
|
+
const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
|
|
66
67
|
const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
|
|
67
68
|
const flattened = flatten(queryOptions);
|
|
68
69
|
for (const key in flattened) {
|
|
@@ -85,7 +86,7 @@ function getAllContent(options) {
|
|
|
85
86
|
const fetch = yield getFetch();
|
|
86
87
|
const content = yield fetch(url.href).then((res) => res.json());
|
|
87
88
|
const canTrack = options.canTrack !== false;
|
|
88
|
-
if (canTrack) {
|
|
89
|
+
if (canTrack && Array.isArray(content.results)) {
|
|
89
90
|
for (const item of content.results) {
|
|
90
91
|
yield handleABTesting({ item, canTrack });
|
|
91
92
|
}
|
|
@@ -90,6 +90,10 @@ const createEvent = (_a) => __async(void 0, null, function* () {
|
|
|
90
90
|
});
|
|
91
91
|
function _track(eventProps) {
|
|
92
92
|
return __async(this, null, function* () {
|
|
93
|
+
if (!eventProps.apiKey) {
|
|
94
|
+
console.error("[Builder.io]: Missing API key for track call. Please provide your API key.");
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
93
97
|
if (!eventProps.canTrack) {
|
|
94
98
|
return;
|
|
95
99
|
}
|
|
@@ -20,8 +20,8 @@ const registerInsertMenu = () => {
|
|
|
20
20
|
});
|
|
21
21
|
};
|
|
22
22
|
let isSetupForEditing = false;
|
|
23
|
-
const setupBrowserForEditing = () => {
|
|
24
|
-
var _a;
|
|
23
|
+
const setupBrowserForEditing = (options = {}) => {
|
|
24
|
+
var _a, _b;
|
|
25
25
|
if (isSetupForEditing) {
|
|
26
26
|
return;
|
|
27
27
|
}
|
|
@@ -36,8 +36,14 @@ const setupBrowserForEditing = () => {
|
|
|
36
36
|
supportsCustomBreakpoints: true
|
|
37
37
|
}
|
|
38
38
|
}, "*");
|
|
39
|
+
(_b = window.parent) == null ? void 0 : _b.postMessage({
|
|
40
|
+
type: "builder.updateContent",
|
|
41
|
+
data: {
|
|
42
|
+
options
|
|
43
|
+
}
|
|
44
|
+
}, "*");
|
|
39
45
|
window.addEventListener("message", ({ data }) => {
|
|
40
|
-
var _a2,
|
|
46
|
+
var _a2, _b2;
|
|
41
47
|
if (!(data == null ? void 0 : data.type)) {
|
|
42
48
|
return;
|
|
43
49
|
}
|
|
@@ -69,7 +75,7 @@ const setupBrowserForEditing = () => {
|
|
|
69
75
|
}, "*");
|
|
70
76
|
}).catch(console.error);
|
|
71
77
|
} else {
|
|
72
|
-
(
|
|
78
|
+
(_b2 = window.parent) == null ? void 0 : _b2.postMessage({
|
|
73
79
|
type: "builder.evaluateResult",
|
|
74
80
|
data: { result, id }
|
|
75
81
|
}, "*");
|
|
@@ -1,3 +1,19 @@
|
|
|
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
|
+
};
|
|
1
17
|
import * as React from "react";
|
|
2
18
|
import { getSrcSet } from "./image.helpers.js";
|
|
3
19
|
function Image(props) {
|
|
@@ -27,6 +43,17 @@ function Image(props) {
|
|
|
27
43
|
return "";
|
|
28
44
|
}
|
|
29
45
|
}
|
|
46
|
+
function aspectRatioCss() {
|
|
47
|
+
const aspectRatioStyles = {
|
|
48
|
+
position: "absolute",
|
|
49
|
+
height: "100%",
|
|
50
|
+
width: "100%",
|
|
51
|
+
left: "0px",
|
|
52
|
+
top: "0px"
|
|
53
|
+
};
|
|
54
|
+
const out = props.aspectRatio ? aspectRatioStyles : void 0;
|
|
55
|
+
return out;
|
|
56
|
+
}
|
|
30
57
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("picture", null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
|
|
31
58
|
type: "image/webp",
|
|
32
59
|
srcSet: webpSrcSet()
|
|
@@ -34,34 +61,29 @@ function Image(props) {
|
|
|
34
61
|
loading: "lazy",
|
|
35
62
|
alt: props.altText,
|
|
36
63
|
role: props.altText ? "presentation" : void 0,
|
|
37
|
-
style: {
|
|
38
|
-
objectPosition: props.
|
|
64
|
+
style: __spreadValues({
|
|
65
|
+
objectPosition: props.backgroundPosition || "center",
|
|
39
66
|
objectFit: props.backgroundSize || "cover"
|
|
40
|
-
},
|
|
41
|
-
className: "builder-image" + (props.className ? " " + props.className : "") + " img-
|
|
67
|
+
}, aspectRatioCss()),
|
|
68
|
+
className: "builder-image" + (props.className ? " " + props.className : "") + " img-35d6dc22",
|
|
42
69
|
src: props.image,
|
|
43
70
|
srcSet: srcSetToUse(),
|
|
44
71
|
sizes: props.sizes
|
|
45
72
|
}), /* @__PURE__ */ React.createElement("source", {
|
|
46
73
|
srcSet: srcSetToUse()
|
|
47
74
|
})), props.aspectRatio && !(((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && props.fitContent) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
48
|
-
className: "builder-image-sizer div-
|
|
75
|
+
className: "builder-image-sizer div-35d6dc22",
|
|
49
76
|
style: {
|
|
50
77
|
paddingTop: props.aspectRatio * 100 + "%"
|
|
51
78
|
}
|
|
52
79
|
})) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent && props.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
53
|
-
className: "div-
|
|
54
|
-
}, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-
|
|
80
|
+
className: "div-35d6dc22-2"
|
|
81
|
+
}, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-35d6dc22 {
|
|
55
82
|
opacity: 1;
|
|
56
|
-
transition: opacity 0.2s ease-in-out;
|
|
57
|
-
position: absolute;
|
|
58
|
-
height: 100%;
|
|
59
|
-
width: 100%;
|
|
60
|
-
top: 0px;
|
|
61
|
-
left: 0px; }.div-6cfc0cdc {
|
|
83
|
+
transition: opacity 0.2s ease-in-out; }.div-35d6dc22 {
|
|
62
84
|
width: 100%;
|
|
63
85
|
pointer-events: none;
|
|
64
|
-
font-size: 0; }.div-
|
|
86
|
+
font-size: 0; }.div-35d6dc22-2 {
|
|
65
87
|
display: flex;
|
|
66
88
|
flex-direction: column;
|
|
67
89
|
align-items: stretch;
|
|
@@ -79,12 +79,15 @@ function RenderBlock(props) {
|
|
|
79
79
|
shouldEvaluateBindings: true
|
|
80
80
|
});
|
|
81
81
|
}
|
|
82
|
-
function
|
|
83
|
-
return
|
|
82
|
+
function actions() {
|
|
83
|
+
return getBlockActions({
|
|
84
84
|
block: useBlock(),
|
|
85
85
|
state: props.context.state,
|
|
86
86
|
context: props.context.context
|
|
87
|
-
})
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function attributes() {
|
|
90
|
+
return __spreadValues(__spreadValues({}, getBlockProperties(useBlock())), TARGET === "reactNative" ? {
|
|
88
91
|
style: getReactNativeBlockStyles({
|
|
89
92
|
block: useBlock(),
|
|
90
93
|
context: props.context
|
|
@@ -101,7 +104,7 @@ function RenderBlock(props) {
|
|
|
101
104
|
blockChildren: useChildren(),
|
|
102
105
|
componentRef: (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component,
|
|
103
106
|
componentOptions: __spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
|
|
104
|
-
attributes: attributes()
|
|
107
|
+
attributes: __spreadValues(__spreadValues({}, attributes()), actions())
|
|
105
108
|
}),
|
|
106
109
|
context: childrenContext()
|
|
107
110
|
};
|
|
@@ -175,11 +178,11 @@ function RenderBlock(props) {
|
|
|
175
178
|
const [componentInfo, setComponentInfo] = useState(() => null);
|
|
176
179
|
const RenderComponentTagRef = renderComponentTag();
|
|
177
180
|
const TagRef = tag();
|
|
178
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(tag()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues({}, attributes()))) : null, !isEmptyHtmlElement(tag()) && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
|
|
181
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(tag()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues(__spreadValues({}, attributes()), actions()))) : null, !isEmptyHtmlElement(tag()) && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
|
|
179
182
|
key: index,
|
|
180
183
|
repeatContext: data.context,
|
|
181
184
|
block: data.block
|
|
182
|
-
}))) : null, !isEmptyHtmlElement(tag()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues({}, attributes()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
|
|
185
|
+
}))) : null, !isEmptyHtmlElement(tag()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues(__spreadValues({}, attributes()), actions()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
|
|
183
186
|
key: "render-block-" + child.id,
|
|
184
187
|
block: child,
|
|
185
188
|
context: childrenContext()
|
|
@@ -21,7 +21,6 @@ import * as React from "react";
|
|
|
21
21
|
import { useState, useRef, useEffect } from "react";
|
|
22
22
|
import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
|
|
23
23
|
import { TARGET } from "../../constants/target.js";
|
|
24
|
-
import BuilderContext from "../../context/builder.context.js";
|
|
25
24
|
import { evaluate } from "../../functions/evaluate.js";
|
|
26
25
|
import { getContent } from "../../functions/get-content/index.js";
|
|
27
26
|
import { getFetch } from "../../functions/get-fetch.js";
|
|
@@ -35,6 +34,7 @@ import {
|
|
|
35
34
|
import { _track } from "../../functions/track.js";
|
|
36
35
|
import RenderBlocks from "../render-blocks.jsx";
|
|
37
36
|
import RenderContentStyles from "./components/render-styles.jsx";
|
|
37
|
+
import BuilderContext from "../../context/builder.context.js";
|
|
38
38
|
import {
|
|
39
39
|
registerInsertMenu,
|
|
40
40
|
setupBrowserForEditing
|
|
@@ -61,7 +61,9 @@ function RenderContent(props) {
|
|
|
61
61
|
const [overrideState, setOverrideState] = useState(() => ({}));
|
|
62
62
|
function contentState() {
|
|
63
63
|
var _a2, _b2;
|
|
64
|
-
return __spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data),
|
|
64
|
+
return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), props.locale ? {
|
|
65
|
+
locale: props.locale
|
|
66
|
+
} : {}), overrideState);
|
|
65
67
|
}
|
|
66
68
|
function contextContext() {
|
|
67
69
|
return props.context || {};
|
|
@@ -173,11 +175,18 @@ function RenderContent(props) {
|
|
|
173
175
|
}
|
|
174
176
|
useEffect(() => {
|
|
175
177
|
var _a2, _b2;
|
|
178
|
+
if (!props.apiKey) {
|
|
179
|
+
console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
|
|
180
|
+
}
|
|
176
181
|
if (isBrowser()) {
|
|
177
182
|
if (isEditing()) {
|
|
178
183
|
setForceReRenderCount(forceReRenderCount + 1);
|
|
179
184
|
registerInsertMenu();
|
|
180
|
-
setupBrowserForEditing(
|
|
185
|
+
setupBrowserForEditing(__spreadValues(__spreadValues({}, props.locale ? {
|
|
186
|
+
locale: props.locale
|
|
187
|
+
} : {}), props.includeRefs ? {
|
|
188
|
+
includeRefs: props.includeRefs
|
|
189
|
+
} : {}));
|
|
181
190
|
Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
|
|
182
191
|
var _a3;
|
|
183
192
|
const message = createRegisterComponentMessage(registeredComponent);
|
|
@@ -220,7 +229,7 @@ function RenderContent(props) {
|
|
|
220
229
|
}, []);
|
|
221
230
|
useEffect(() => {
|
|
222
231
|
evaluateJsCode();
|
|
223
|
-
}, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode]);
|
|
232
|
+
}, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode, contentState()]);
|
|
224
233
|
useEffect(() => {
|
|
225
234
|
runHttpRequests();
|
|
226
235
|
}, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
|
|
@@ -4,7 +4,8 @@ function evaluate({
|
|
|
4
4
|
code,
|
|
5
5
|
context,
|
|
6
6
|
state,
|
|
7
|
-
event
|
|
7
|
+
event,
|
|
8
|
+
isExpression = true
|
|
8
9
|
}) {
|
|
9
10
|
if (code === "") {
|
|
10
11
|
console.warn("Skipping evaluation of empty code block.");
|
|
@@ -15,12 +16,12 @@ function evaluate({
|
|
|
15
16
|
isBrowser: isBrowser(),
|
|
16
17
|
isServer: !isBrowser()
|
|
17
18
|
};
|
|
18
|
-
const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
|
|
19
|
+
const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
|
|
19
20
|
const useCode = useReturn ? `return (${code});` : code;
|
|
20
21
|
try {
|
|
21
22
|
return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
|
|
22
23
|
} catch (e) {
|
|
23
|
-
console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e
|
|
24
|
+
console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
27
|
export {
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { evaluate } from "./evaluate.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
2
|
+
const createEventHandler = (value, options) => (event) => evaluate({
|
|
3
|
+
code: value,
|
|
4
|
+
context: options.context,
|
|
5
|
+
state: options.state,
|
|
6
|
+
event,
|
|
7
|
+
isExpression: false
|
|
8
|
+
});
|
|
10
9
|
export {
|
|
11
|
-
|
|
10
|
+
createEventHandler
|
|
12
11
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getEventHandlerName } from "./event-handler-name.js";
|
|
2
|
-
import {
|
|
2
|
+
import { createEventHandler } from "./get-block-actions-handler.js";
|
|
3
3
|
function getBlockActions(options) {
|
|
4
4
|
var _a;
|
|
5
5
|
const obj = {};
|
|
@@ -9,7 +9,7 @@ function getBlockActions(options) {
|
|
|
9
9
|
continue;
|
|
10
10
|
}
|
|
11
11
|
const value = optionActions[key];
|
|
12
|
-
obj[getEventHandlerName(key)] =
|
|
12
|
+
obj[getEventHandlerName(key)] = createEventHandler(value, options);
|
|
13
13
|
}
|
|
14
14
|
return obj;
|
|
15
15
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { isBrowser } from "../is-browser.js";
|
|
2
2
|
const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
|
|
3
|
+
const BUILDER_OPTIONS_PREFIX = "options.";
|
|
3
4
|
const convertSearchParamsToQueryObject = (searchParams) => {
|
|
4
5
|
const options = {};
|
|
5
6
|
searchParams.forEach((value, key) => {
|
|
@@ -15,7 +16,7 @@ const getBuilderSearchParams = (_options) => {
|
|
|
15
16
|
const newOptions = {};
|
|
16
17
|
Object.keys(options).forEach((key) => {
|
|
17
18
|
if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
|
|
18
|
-
const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "");
|
|
19
|
+
const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
|
|
19
20
|
newOptions[trimmedKey] = options[key];
|
|
20
21
|
}
|
|
21
22
|
});
|
|
@@ -57,12 +57,13 @@ const generateContentUrl = (options) => {
|
|
|
57
57
|
noTraverse = false,
|
|
58
58
|
model,
|
|
59
59
|
apiKey,
|
|
60
|
-
includeRefs = true
|
|
60
|
+
includeRefs = true,
|
|
61
|
+
locale
|
|
61
62
|
} = options;
|
|
62
63
|
if (!apiKey) {
|
|
63
64
|
throw new Error("Missing API key");
|
|
64
65
|
}
|
|
65
|
-
const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
|
|
66
|
+
const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
|
|
66
67
|
const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
|
|
67
68
|
const flattened = flatten(queryOptions);
|
|
68
69
|
for (const key in flattened) {
|
|
@@ -85,7 +86,7 @@ function getAllContent(options) {
|
|
|
85
86
|
const fetch = yield getFetch();
|
|
86
87
|
const content = yield fetch(url.href).then((res) => res.json());
|
|
87
88
|
const canTrack = options.canTrack !== false;
|
|
88
|
-
if (canTrack) {
|
|
89
|
+
if (canTrack && Array.isArray(content.results)) {
|
|
89
90
|
for (const item of content.results) {
|
|
90
91
|
yield handleABTesting({ item, canTrack });
|
|
91
92
|
}
|
package/src/functions/track.js
CHANGED
|
@@ -90,6 +90,10 @@ const createEvent = (_a) => __async(void 0, null, function* () {
|
|
|
90
90
|
});
|
|
91
91
|
function _track(eventProps) {
|
|
92
92
|
return __async(this, null, function* () {
|
|
93
|
+
if (!eventProps.apiKey) {
|
|
94
|
+
console.error("[Builder.io]: Missing API key for track call. Please provide your API key.");
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
93
97
|
if (!eventProps.canTrack) {
|
|
94
98
|
return;
|
|
95
99
|
}
|
|
@@ -20,8 +20,8 @@ const registerInsertMenu = () => {
|
|
|
20
20
|
});
|
|
21
21
|
};
|
|
22
22
|
let isSetupForEditing = false;
|
|
23
|
-
const setupBrowserForEditing = () => {
|
|
24
|
-
var _a;
|
|
23
|
+
const setupBrowserForEditing = (options = {}) => {
|
|
24
|
+
var _a, _b;
|
|
25
25
|
if (isSetupForEditing) {
|
|
26
26
|
return;
|
|
27
27
|
}
|
|
@@ -36,8 +36,14 @@ const setupBrowserForEditing = () => {
|
|
|
36
36
|
supportsCustomBreakpoints: true
|
|
37
37
|
}
|
|
38
38
|
}, "*");
|
|
39
|
+
(_b = window.parent) == null ? void 0 : _b.postMessage({
|
|
40
|
+
type: "builder.updateContent",
|
|
41
|
+
data: {
|
|
42
|
+
options
|
|
43
|
+
}
|
|
44
|
+
}, "*");
|
|
39
45
|
window.addEventListener("message", ({ data }) => {
|
|
40
|
-
var _a2,
|
|
46
|
+
var _a2, _b2;
|
|
41
47
|
if (!(data == null ? void 0 : data.type)) {
|
|
42
48
|
return;
|
|
43
49
|
}
|
|
@@ -69,7 +75,7 @@ const setupBrowserForEditing = () => {
|
|
|
69
75
|
}, "*");
|
|
70
76
|
}).catch(console.error);
|
|
71
77
|
} else {
|
|
72
|
-
(
|
|
78
|
+
(_b2 = window.parent) == null ? void 0 : _b2.postMessage({
|
|
73
79
|
type: "builder.evaluateResult",
|
|
74
80
|
data: { result, id }
|
|
75
81
|
}, "*");
|