@builder.io/sdk-solid 0.4.5 → 0.5.1
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/CHANGELOG.md +8 -0
- package/package.json +1 -1
- package/src/blocks/BaseText.jsx +1 -1
- package/src/blocks/button/button.jsx +5 -3
- package/src/blocks/button/component-info.js +16 -22
- package/src/blocks/columns/columns.jsx +12 -21
- package/src/blocks/columns/component-info.js +203 -226
- package/src/blocks/custom-code/component-info.js +19 -25
- package/src/blocks/embed/component-info.js +31 -37
- package/src/blocks/embed/helpers.js +3 -9
- package/src/blocks/form/component-info.js +174 -212
- package/src/blocks/form/form.jsx +1 -268
- package/src/blocks/fragment/component-info.js +1 -3
- package/src/blocks/helpers.js +27 -0
- package/src/blocks/image/component-info.js +105 -133
- package/src/blocks/image/image.helpers.js +3 -5
- package/src/blocks/img/component-info.js +8 -12
- package/src/blocks/img/img.jsx +2 -0
- package/src/blocks/input/component-info.js +29 -57
- package/src/blocks/input/input.jsx +2 -0
- package/src/blocks/raw-text/component-info.js +7 -11
- package/src/blocks/raw-text/raw-text.jsx +2 -2
- package/src/blocks/section/component-info.js +24 -31
- package/src/blocks/section/section.jsx +3 -0
- package/src/blocks/select/component-info.js +34 -48
- package/src/blocks/select/select.jsx +2 -0
- package/src/blocks/submit-button/component-info.js +6 -10
- package/src/blocks/submit-button/submit-button.jsx +3 -1
- package/src/blocks/symbol/component-info.js +30 -37
- package/src/blocks/symbol/symbol.helpers.js +60 -0
- package/src/blocks/symbol/symbol.jsx +31 -68
- package/src/blocks/text/component-info.js +10 -13
- package/src/blocks/text/text.jsx +1 -1
- package/src/blocks/textarea/component-info.js +22 -30
- package/src/blocks/textarea/textarea.jsx +3 -0
- package/src/blocks/video/component-info.js +74 -96
- package/src/blocks/video/video.jsx +1 -0
- package/src/components/{render-block/render-block.helpers.js → block/block.helpers.js} +26 -44
- package/src/components/{render-block/render-block.jsx → block/block.jsx} +65 -80
- package/src/components/{render-block → block/components}/block-styles.jsx +16 -16
- package/src/components/block/components/block-wrapper.jsx +50 -0
- package/src/components/block/components/component-ref/component-ref.helpers.js +41 -0
- package/src/components/block/components/component-ref/component-ref.jsx +58 -0
- package/src/components/block/components/interactive-element.jsx +30 -0
- package/src/components/block/components/repeated-block.jsx +20 -0
- package/src/components/blocks/blocks-wrapper.jsx +66 -0
- package/src/components/blocks/blocks.jsx +57 -0
- package/src/components/{render-content/render-content.jsx → content/components/enable-editor.jsx} +86 -175
- package/src/components/{render-content/components/render-styles.helpers.js → content/components/styles.helpers.js} +6 -7
- package/src/components/{render-content/components/render-styles.jsx → content/components/styles.jsx} +4 -4
- package/src/components/{render-content/render-content.helpers.js → content/content.helpers.js} +15 -15
- package/src/components/content/content.jsx +136 -0
- package/src/components/content/index.js +2 -0
- package/src/components/content/wrap-component-ref.js +2 -0
- package/src/components/{render-content-variants/render-content-variants.jsx → content-variants/content-variants.jsx} +19 -22
- package/src/components/{render-content-variants → content-variants}/helpers.js +28 -40
- package/src/constants/builder-registered-components.js +34 -25
- package/src/constants/device-sizes.js +6 -6
- package/src/constants/sdk-version.js +1 -1
- package/src/context/builder.context.js +1 -1
- package/src/context/components.context.js +5 -0
- package/src/functions/apply-patch-with-mutation.js +66 -0
- package/src/functions/camel-to-kebab-case.js +2 -4
- package/src/functions/evaluate/acorn.js +1595 -0
- package/src/functions/{evaluate.js → evaluate/evaluate.js} +36 -10
- package/src/functions/evaluate/index.js +2 -0
- package/src/functions/evaluate/interpreter.js +2801 -0
- package/src/functions/evaluate/non-node-runtime.js +92 -0
- package/src/functions/evaluate/types.js +0 -0
- package/src/functions/event-handler-name.js +2 -4
- package/src/functions/extract-text-styles.js +4 -12
- package/src/functions/fast-clone.js +2 -4
- package/src/functions/get-block-actions-handler.js +3 -5
- package/src/functions/get-block-actions.js +15 -4
- package/src/functions/get-block-component-options.js +11 -12
- package/src/functions/get-block-properties.js +29 -19
- package/src/functions/get-builder-search-params/index.js +5 -10
- package/src/functions/get-content/generate-content-url.js +17 -19
- package/src/functions/get-content/index.js +43 -29
- package/src/functions/get-fetch.js +1 -3
- package/src/functions/get-global-this.js +1 -3
- package/src/functions/get-processed-block.js +12 -13
- package/src/functions/get-react-native-block-styles.js +11 -12
- package/src/functions/if-target.js +1 -3
- package/src/functions/is-browser.js +1 -3
- package/src/functions/is-editing.js +1 -3
- package/src/functions/is-iframe.js +1 -3
- package/src/functions/is-non-node-server.js +9 -0
- package/src/functions/is-previewing.js +1 -3
- package/src/functions/on-change.js +1 -4
- package/src/functions/register-component.js +34 -42
- package/src/functions/register.js +1 -3
- package/src/functions/sanitize-react-native-block-styles.js +22 -17
- package/src/functions/set-editor-settings.js +1 -3
- package/src/functions/set.js +1 -3
- package/src/functions/track/helpers.js +3 -5
- package/src/functions/track/index.js +45 -43
- package/src/functions/track/interaction.js +11 -7
- package/src/functions/transform-block-properties.js +1 -3
- package/src/functions/transform-block.js +1 -3
- package/src/helpers/ab-tests.js +45 -28
- package/src/helpers/canTrack.js +3 -5
- package/src/helpers/cookie.js +15 -24
- package/src/helpers/css.js +3 -7
- package/src/helpers/flatten.js +15 -18
- package/src/helpers/localStorage.js +1 -4
- package/src/helpers/logger.js +1 -3
- package/src/helpers/nullable.js +2 -4
- package/src/helpers/preview-lru-cache/get.js +8 -0
- package/src/helpers/preview-lru-cache/helpers.js +10 -0
- package/src/helpers/preview-lru-cache/init.js +10 -0
- package/src/helpers/preview-lru-cache/set.js +35 -0
- package/src/helpers/preview-lru-cache/types.js +0 -0
- package/src/helpers/sessionId.js +14 -11
- package/src/helpers/time.js +1 -3
- package/src/helpers/url.js +2 -4
- package/src/helpers/uuid.js +4 -6
- package/src/helpers/visitorId.js +8 -7
- package/src/index-helpers/blocks-exports.js +3 -14
- package/src/index-helpers/top-of-file.js +1 -3
- package/src/index.js +2 -17
- package/src/scripts/init-editing.js +62 -48
- package/src/types/api-version.js +1 -3
- package/src/types/builder-props.js +0 -0
- package/src/blocks/util.js +0 -8
- package/src/components/render-block/render-component.jsx +0 -40
- package/src/components/render-block/render-repeated-block.jsx +0 -16
- package/src/components/render-blocks.jsx +0 -100
- package/src/components/render-content/builder-editing.jsx +0 -5
- package/src/components/render-content/index.js +0 -4
- package/src/components/render-content/wrap-component-ref.js +0 -4
- package/src/functions/evaluate.test.js +0 -17
- package/src/functions/get-builder-search-params/fn.test.js +0 -13
- package/src/functions/get-content/generate-content-url.test.js +0 -97
- package/src/functions/get-processed-block.test.js +0 -34
- package/src/functions/on-change.test.js +0 -19
- package/src/functions/set.test.js +0 -16
- package/src/helpers/url.test.js +0 -21
- /package/src/components/{render-block → block}/types.js +0 -0
- /package/src/components/{render-content/render-content.types.js → content/content.types.js} +0 -0
- /package/src/components/{render-content-variants/render-content-variants.types.js → content-variants/content-variants.types.js} +0 -0
package/src/components/{render-content/render-content.jsx → content/components/enable-editor.jsx}
RENAMED
|
@@ -1,136 +1,57 @@
|
|
|
1
1
|
import { Show, onMount, on, createEffect, createSignal } from "solid-js";
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
components,
|
|
12
|
-
createRegisterComponentMessage,
|
|
13
|
-
} from "../../functions/register-component.js";
|
|
14
|
-
import { _track } from "../../functions/track/index.js";
|
|
15
|
-
import RenderBlocks from "../render-blocks.jsx";
|
|
16
|
-
import RenderContentStyles from "./components/render-styles.jsx";
|
|
17
|
-
import builderContext from "../../context/builder.context.js";
|
|
3
|
+
import { evaluate } from "../../../functions/evaluate";
|
|
4
|
+
import { fetch } from "../../../functions/get-fetch.js";
|
|
5
|
+
import { isBrowser } from "../../../functions/is-browser.js";
|
|
6
|
+
import { isEditing } from "../../../functions/is-editing.js";
|
|
7
|
+
import { createRegisterComponentMessage } from "../../../functions/register-component.js";
|
|
8
|
+
import { _track } from "../../../functions/track/index.js";
|
|
9
|
+
import builderContext from "../../../context/builder.context";
|
|
18
10
|
import {
|
|
19
11
|
registerInsertMenu,
|
|
20
12
|
setupBrowserForEditing,
|
|
21
|
-
} from "
|
|
22
|
-
import { checkIsDefined } from "
|
|
23
|
-
import { getInteractionPropertiesForEvent } from "
|
|
24
|
-
import {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
} from "
|
|
28
|
-
import { TARGET } from "../../constants/target.js";
|
|
29
|
-
import { logger } from "../../helpers/logger.js";
|
|
30
|
-
import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
|
|
31
|
-
import { wrapComponentRef } from "./wrap-component-ref.js";
|
|
32
|
-
import InlinedScript from "../inlined-script";
|
|
33
|
-
|
|
34
|
-
function RenderContent(props) {
|
|
35
|
-
const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
|
|
36
|
-
|
|
37
|
-
const [overrideContent, setOverrideContent] = createSignal(null);
|
|
38
|
-
|
|
39
|
-
const [update, setUpdate] = createSignal(0);
|
|
13
|
+
} from "../../../scripts/init-editing.js";
|
|
14
|
+
import { checkIsDefined } from "../../../helpers/nullable.js";
|
|
15
|
+
import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
|
|
16
|
+
import { logger } from "../../../helpers/logger.js";
|
|
17
|
+
import { getContent } from "../../../functions/get-content/index.js";
|
|
18
|
+
import { isPreviewing } from "../../../functions/is-previewing.js";
|
|
19
|
+
import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
|
|
40
20
|
|
|
21
|
+
function EnableEditor(props) {
|
|
41
22
|
const [canTrackToUse, setCanTrackToUse] = createSignal(
|
|
42
23
|
checkIsDefined(props.canTrack) ? props.canTrack : true
|
|
43
24
|
);
|
|
44
25
|
|
|
45
|
-
const [
|
|
26
|
+
const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
|
|
46
27
|
|
|
47
|
-
const [
|
|
28
|
+
const [lastUpdated, setLastUpdated] = createSignal(0);
|
|
48
29
|
|
|
49
|
-
const [
|
|
50
|
-
getRenderContentScriptString({
|
|
51
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
|
|
52
|
-
variationId: props.content?.testVariationId,
|
|
53
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
|
|
54
|
-
contentId: props.content?.id,
|
|
55
|
-
})
|
|
56
|
-
);
|
|
30
|
+
const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal(false);
|
|
57
31
|
|
|
58
|
-
const [
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
data: props.data,
|
|
62
|
-
}),
|
|
63
|
-
localState: undefined,
|
|
64
|
-
rootState: getContextStateInitialValue({
|
|
65
|
-
content: props.content,
|
|
66
|
-
data: props.data,
|
|
67
|
-
locale: props.locale,
|
|
68
|
-
}),
|
|
69
|
-
rootSetState: contentSetState,
|
|
70
|
-
context: props.context || {},
|
|
71
|
-
apiKey: props.apiKey,
|
|
72
|
-
apiVersion: props.apiVersion,
|
|
73
|
-
registeredComponents: [
|
|
74
|
-
...getDefaultRegisteredComponents(),
|
|
75
|
-
// While this `components` object is deprecated, we must maintain support for it.
|
|
76
|
-
// Since users are able to override our default components, we need to make sure that we do not break such
|
|
77
|
-
// existing usage.
|
|
78
|
-
// This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
|
|
79
|
-
// which is the new standard way of providing custom components, and must therefore take precedence.
|
|
80
|
-
...components,
|
|
81
|
-
...(props.customComponents || []),
|
|
82
|
-
].reduce(
|
|
83
|
-
(acc, { component, ...curr }) => ({
|
|
84
|
-
...acc,
|
|
85
|
-
[curr.name]: {
|
|
86
|
-
component:
|
|
87
|
-
TARGET === "vue3" ? wrapComponentRef(component) : component,
|
|
88
|
-
...curr,
|
|
89
|
-
},
|
|
90
|
-
}),
|
|
91
|
-
{}
|
|
92
|
-
),
|
|
93
|
-
inheritedStyles: {},
|
|
94
|
-
});
|
|
32
|
+
const [httpReqsData, setHttpReqsData] = createSignal({});
|
|
33
|
+
|
|
34
|
+
const [clicked, setClicked] = createSignal(false);
|
|
95
35
|
|
|
96
36
|
function mergeNewContent(newContent) {
|
|
97
|
-
|
|
98
|
-
...
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
...
|
|
102
|
-
data
|
|
103
|
-
...builderContextSignal().content?.data,
|
|
104
|
-
...newContent?.data,
|
|
105
|
-
},
|
|
106
|
-
meta: {
|
|
107
|
-
...builderContextSignal().content?.meta,
|
|
108
|
-
...newContent?.meta,
|
|
109
|
-
breakpoints:
|
|
110
|
-
newContent?.meta?.breakpoints ||
|
|
111
|
-
builderContextSignal().content?.meta?.breakpoints,
|
|
112
|
-
},
|
|
37
|
+
const newContentValue = {
|
|
38
|
+
...props.builderContextSignal.content,
|
|
39
|
+
...newContent,
|
|
40
|
+
data: {
|
|
41
|
+
...props.builderContextSignal.content?.data,
|
|
42
|
+
...newContent?.data,
|
|
113
43
|
},
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
content: {
|
|
121
|
-
...builderContextSignal().content,
|
|
122
|
-
meta: {
|
|
123
|
-
...builderContextSignal().content?.meta,
|
|
124
|
-
breakpoints,
|
|
125
|
-
},
|
|
44
|
+
meta: {
|
|
45
|
+
...props.builderContextSignal.content?.meta,
|
|
46
|
+
...newContent?.meta,
|
|
47
|
+
breakpoints:
|
|
48
|
+
newContent?.meta?.breakpoints ||
|
|
49
|
+
props.builderContextSignal.content?.meta?.breakpoints,
|
|
126
50
|
},
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
function contentSetState(newRootState) {
|
|
131
|
-
setBuilderContextSignal((PREVIOUS_VALUE) => ({
|
|
51
|
+
};
|
|
52
|
+
props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
|
|
132
53
|
...PREVIOUS_VALUE,
|
|
133
|
-
|
|
54
|
+
content: newContentValue,
|
|
134
55
|
}));
|
|
135
56
|
}
|
|
136
57
|
|
|
@@ -141,11 +62,18 @@ function RenderContent(props) {
|
|
|
141
62
|
case "builder.configureSdk": {
|
|
142
63
|
const messageContent = data.data;
|
|
143
64
|
const { breakpoints, contentId } = messageContent;
|
|
144
|
-
if (
|
|
65
|
+
if (
|
|
66
|
+
!contentId ||
|
|
67
|
+
contentId !== props.builderContextSignal.content?.id
|
|
68
|
+
) {
|
|
145
69
|
return;
|
|
146
70
|
}
|
|
147
71
|
if (breakpoints) {
|
|
148
|
-
|
|
72
|
+
mergeNewContent({
|
|
73
|
+
meta: {
|
|
74
|
+
breakpoints,
|
|
75
|
+
},
|
|
76
|
+
});
|
|
149
77
|
}
|
|
150
78
|
setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
|
|
151
79
|
break;
|
|
@@ -165,32 +93,28 @@ function RenderContent(props) {
|
|
|
165
93
|
|
|
166
94
|
break;
|
|
167
95
|
}
|
|
168
|
-
case "builder.patchUpdates": {
|
|
169
|
-
// TODO
|
|
170
|
-
break;
|
|
171
|
-
}
|
|
172
96
|
}
|
|
173
97
|
}
|
|
174
98
|
}
|
|
175
99
|
|
|
176
100
|
function evaluateJsCode() {
|
|
177
101
|
// run any dynamic JS code attached to content
|
|
178
|
-
const jsCode = builderContextSignal
|
|
102
|
+
const jsCode = props.builderContextSignal.content?.data?.jsCode;
|
|
179
103
|
if (jsCode) {
|
|
180
104
|
evaluate({
|
|
181
105
|
code: jsCode,
|
|
182
106
|
context: props.context || {},
|
|
183
107
|
localState: undefined,
|
|
184
|
-
rootState: builderContextSignal
|
|
185
|
-
rootSetState:
|
|
108
|
+
rootState: props.builderContextSignal.rootState,
|
|
109
|
+
rootSetState: props.builderContextSignal.rootSetState,
|
|
186
110
|
});
|
|
187
111
|
}
|
|
188
112
|
}
|
|
189
113
|
|
|
190
114
|
function onClick(event) {
|
|
191
|
-
if (builderContextSignal
|
|
192
|
-
const variationId = builderContextSignal
|
|
193
|
-
const contentId = builderContextSignal
|
|
115
|
+
if (props.builderContextSignal.content) {
|
|
116
|
+
const variationId = props.builderContextSignal.content?.testVariationId;
|
|
117
|
+
const contentId = props.builderContextSignal.content?.id;
|
|
194
118
|
_track({
|
|
195
119
|
type: "click",
|
|
196
120
|
canTrack: canTrackToUse(),
|
|
@@ -212,8 +136,8 @@ function RenderContent(props) {
|
|
|
212
136
|
code: group,
|
|
213
137
|
context: props.context || {},
|
|
214
138
|
localState: undefined,
|
|
215
|
-
rootState: builderContextSignal
|
|
216
|
-
rootSetState:
|
|
139
|
+
rootState: props.builderContextSignal.rootState,
|
|
140
|
+
rootSetState: props.builderContextSignal.rootSetState,
|
|
217
141
|
})
|
|
218
142
|
);
|
|
219
143
|
}
|
|
@@ -223,10 +147,11 @@ function RenderContent(props) {
|
|
|
223
147
|
.then((response) => response.json())
|
|
224
148
|
.then((json) => {
|
|
225
149
|
const newState = {
|
|
226
|
-
...builderContextSignal
|
|
150
|
+
...props.builderContextSignal.rootState,
|
|
227
151
|
[key]: json,
|
|
228
152
|
};
|
|
229
|
-
|
|
153
|
+
props.builderContextSignal.rootSetState?.(newState);
|
|
154
|
+
httpReqsData()[key] = true;
|
|
230
155
|
})
|
|
231
156
|
.catch((err) => {
|
|
232
157
|
console.error("error fetching dynamic data", url, err);
|
|
@@ -234,7 +159,8 @@ function RenderContent(props) {
|
|
|
234
159
|
}
|
|
235
160
|
|
|
236
161
|
function runHttpRequests() {
|
|
237
|
-
const requests =
|
|
162
|
+
const requests =
|
|
163
|
+
props.builderContextSignal.content?.data?.httpRequests ?? {};
|
|
238
164
|
Object.entries(requests).forEach(([key, url]) => {
|
|
239
165
|
if (url && (!httpReqsData()[key] || isEditing())) {
|
|
240
166
|
const evaluatedUrl = evalExpression(url);
|
|
@@ -251,7 +177,7 @@ function RenderContent(props) {
|
|
|
251
177
|
window.dispatchEvent(
|
|
252
178
|
new CustomEvent("builder:component:stateChange", {
|
|
253
179
|
detail: {
|
|
254
|
-
state: builderContextSignal
|
|
180
|
+
state: props.builderContextSignal.rootState,
|
|
255
181
|
ref: {
|
|
256
182
|
name: props.model,
|
|
257
183
|
},
|
|
@@ -272,6 +198,7 @@ function RenderContent(props) {
|
|
|
272
198
|
if (isBrowser()) {
|
|
273
199
|
if (isEditing()) {
|
|
274
200
|
setForceReRenderCount(forceReRenderCount() + 1);
|
|
201
|
+
window.addEventListener("message", processMessage);
|
|
275
202
|
registerInsertMenu();
|
|
276
203
|
setupBrowserForEditing({
|
|
277
204
|
...(props.locale
|
|
@@ -290,21 +217,20 @@ function RenderContent(props) {
|
|
|
290
217
|
}
|
|
291
218
|
: {}),
|
|
292
219
|
});
|
|
293
|
-
Object.values(builderContextSignal
|
|
220
|
+
Object.values(props.builderContextSignal.componentInfos).forEach(
|
|
294
221
|
(registeredComponent) => {
|
|
295
222
|
const message = createRegisterComponentMessage(registeredComponent);
|
|
296
223
|
window.parent?.postMessage(message, "*");
|
|
297
224
|
}
|
|
298
225
|
);
|
|
299
|
-
window.addEventListener("message", processMessage);
|
|
300
226
|
window.addEventListener(
|
|
301
227
|
"builder:component:stateChangeListenerActivated",
|
|
302
228
|
emitStateUpdate
|
|
303
229
|
);
|
|
304
230
|
}
|
|
305
|
-
if (builderContextSignal
|
|
306
|
-
const variationId = builderContextSignal
|
|
307
|
-
const contentId = builderContextSignal
|
|
231
|
+
if (props.builderContextSignal.content) {
|
|
232
|
+
const variationId = props.builderContextSignal.content?.testVariationId;
|
|
233
|
+
const contentId = props.builderContextSignal.content?.id;
|
|
308
234
|
_track({
|
|
309
235
|
type: "impression",
|
|
310
236
|
canTrack: canTrackToUse(),
|
|
@@ -313,7 +239,6 @@ function RenderContent(props) {
|
|
|
313
239
|
variationId: variationId !== contentId ? variationId : undefined,
|
|
314
240
|
});
|
|
315
241
|
}
|
|
316
|
-
|
|
317
242
|
// override normal content in preview mode
|
|
318
243
|
if (isPreviewing()) {
|
|
319
244
|
const searchParams = new URL(location.href).searchParams;
|
|
@@ -341,7 +266,7 @@ function RenderContent(props) {
|
|
|
341
266
|
getContent({
|
|
342
267
|
model: props.model,
|
|
343
268
|
apiKey: props.apiKey,
|
|
344
|
-
apiVersion: props.apiVersion,
|
|
269
|
+
apiVersion: props.builderContextSignal.apiVersion,
|
|
345
270
|
}).then((content) => {
|
|
346
271
|
if (content) {
|
|
347
272
|
mergeNewContent(content);
|
|
@@ -362,49 +287,48 @@ function RenderContent(props) {
|
|
|
362
287
|
}
|
|
363
288
|
createEffect(on(() => [props.content], onUpdateFn_0));
|
|
364
289
|
|
|
365
|
-
function onUpdateFn_1() {
|
|
290
|
+
function onUpdateFn_1() {}
|
|
291
|
+
createEffect(on(() => [shouldSendResetCookie()], onUpdateFn_1));
|
|
292
|
+
|
|
293
|
+
function onUpdateFn_2() {
|
|
366
294
|
evaluateJsCode();
|
|
367
295
|
}
|
|
368
296
|
createEffect(
|
|
369
297
|
on(
|
|
370
298
|
() => [
|
|
371
|
-
builderContextSignal
|
|
372
|
-
builderContextSignal
|
|
299
|
+
props.builderContextSignal.content?.data?.jsCode,
|
|
300
|
+
props.builderContextSignal.rootState,
|
|
373
301
|
],
|
|
374
|
-
|
|
302
|
+
onUpdateFn_2
|
|
375
303
|
)
|
|
376
304
|
);
|
|
377
305
|
|
|
378
|
-
function
|
|
306
|
+
function onUpdateFn_3() {
|
|
379
307
|
runHttpRequests();
|
|
380
308
|
}
|
|
381
309
|
createEffect(
|
|
382
|
-
on(
|
|
310
|
+
on(
|
|
311
|
+
() => [props.builderContextSignal.content?.data?.httpRequests],
|
|
312
|
+
onUpdateFn_3
|
|
313
|
+
)
|
|
383
314
|
);
|
|
384
315
|
|
|
385
|
-
function
|
|
316
|
+
function onUpdateFn_4() {
|
|
386
317
|
emitStateUpdate();
|
|
387
318
|
}
|
|
388
|
-
createEffect(on(() => [builderContextSignal
|
|
319
|
+
createEffect(on(() => [props.builderContextSignal.rootState], onUpdateFn_4));
|
|
389
320
|
|
|
390
321
|
return (
|
|
391
|
-
<builderContext.Provider value={builderContextSignal
|
|
392
|
-
<Show when={builderContextSignal
|
|
322
|
+
<builderContext.Provider value={props.builderContextSignal}>
|
|
323
|
+
<Show when={props.builderContextSignal.content}>
|
|
393
324
|
<div
|
|
394
325
|
class={props.classNameProp}
|
|
326
|
+
key={forceReRenderCount()}
|
|
395
327
|
ref={elementRef}
|
|
396
328
|
onClick={(event) => onClick(event)}
|
|
397
|
-
builder-content-id={builderContextSignal
|
|
329
|
+
builder-content-id={props.builderContextSignal.content?.id}
|
|
398
330
|
builder-model={props.model}
|
|
399
|
-
{...
|
|
400
|
-
? {
|
|
401
|
-
dataSet: {
|
|
402
|
-
// currently, we can't set the actual ID here.
|
|
403
|
-
// we don't need it right now, we just need to identify content divs for testing.
|
|
404
|
-
"builder-content-id": "",
|
|
405
|
-
},
|
|
406
|
-
}
|
|
407
|
-
: {})}
|
|
331
|
+
{...{}}
|
|
408
332
|
{...(props.showContent
|
|
409
333
|
? {}
|
|
410
334
|
: {
|
|
@@ -412,24 +336,11 @@ function RenderContent(props) {
|
|
|
412
336
|
"aria-hidden": true,
|
|
413
337
|
})}
|
|
414
338
|
>
|
|
415
|
-
|
|
416
|
-
<InlinedScript scriptStr={scriptStr()}></InlinedScript>
|
|
417
|
-
</Show>
|
|
418
|
-
<Show when={TARGET !== "reactNative"}>
|
|
419
|
-
<RenderContentStyles
|
|
420
|
-
contentId={builderContextSignal().content?.id}
|
|
421
|
-
cssCode={builderContextSignal().content?.data?.cssCode}
|
|
422
|
-
customFonts={builderContextSignal().content?.data?.customFonts}
|
|
423
|
-
></RenderContentStyles>
|
|
424
|
-
</Show>
|
|
425
|
-
<RenderBlocks
|
|
426
|
-
blocks={builderContextSignal().content?.data?.blocks}
|
|
427
|
-
key={forceReRenderCount()}
|
|
428
|
-
></RenderBlocks>
|
|
339
|
+
{props.children}
|
|
429
340
|
</div>
|
|
430
341
|
</Show>
|
|
431
342
|
</builderContext.Provider>
|
|
432
343
|
);
|
|
433
344
|
}
|
|
434
345
|
|
|
435
|
-
export default
|
|
346
|
+
export default EnableEditor;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const getCssFromFont =
|
|
1
|
+
const getCssFromFont = font => {
|
|
2
2
|
var _a, _b;
|
|
3
3
|
const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
|
|
4
4
|
const name = family.split(",")[0];
|
|
@@ -35,9 +35,11 @@ font-weight: ${weight};
|
|
|
35
35
|
}
|
|
36
36
|
return str;
|
|
37
37
|
};
|
|
38
|
-
const getFontCss = ({
|
|
38
|
+
const getFontCss = ({
|
|
39
|
+
customFonts
|
|
40
|
+
}) => {
|
|
39
41
|
var _a;
|
|
40
|
-
return ((_a = customFonts == null ? void 0 : customFonts.map(
|
|
42
|
+
return ((_a = customFonts == null ? void 0 : customFonts.map(font => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
|
|
41
43
|
};
|
|
42
44
|
const getCss = ({
|
|
43
45
|
cssCode,
|
|
@@ -51,7 +53,4 @@ const getCss = ({
|
|
|
51
53
|
}
|
|
52
54
|
return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
|
|
53
55
|
};
|
|
54
|
-
export {
|
|
55
|
-
getCss,
|
|
56
|
-
getFontCss
|
|
57
|
-
};
|
|
56
|
+
export { getCss, getFontCss }
|
package/src/components/{render-content/components/render-styles.jsx → content/components/styles.jsx}
RENAMED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { createSignal } from "solid-js";
|
|
2
2
|
|
|
3
3
|
import InlinedStyles from "../../inlined-styles.jsx";
|
|
4
|
-
import { getCss } from "./
|
|
5
|
-
import { getFontCss } from "./
|
|
4
|
+
import { getCss } from "./styles.helpers.js";
|
|
5
|
+
import { getFontCss } from "./styles.helpers.js";
|
|
6
6
|
|
|
7
|
-
function
|
|
7
|
+
function ContentStyles(props) {
|
|
8
8
|
const [injectedStyles, setInjectedStyles] = createSignal(
|
|
9
9
|
`
|
|
10
10
|
${getCss({
|
|
@@ -33,4 +33,4 @@ ${getFontCss({
|
|
|
33
33
|
return <InlinedStyles styles={injectedStyles()}></InlinedStyles>;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
export default
|
|
36
|
+
export default ContentStyles;
|
package/src/components/{render-content/render-content.helpers.js → content/content.helpers.js}
RENAMED
|
@@ -4,16 +4,17 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
|
4
4
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
6
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
configurable: true,
|
|
10
|
+
writable: true,
|
|
11
|
+
value
|
|
12
|
+
}) : obj[key] = value;
|
|
8
13
|
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
14
|
+
for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
17
18
|
return a;
|
|
18
19
|
};
|
|
19
20
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
@@ -24,13 +25,15 @@ const getContextStateInitialValue = ({
|
|
|
24
25
|
}) => {
|
|
25
26
|
var _a, _b, _c;
|
|
26
27
|
const defaultValues = {};
|
|
27
|
-
(_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach(
|
|
28
|
+
(_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach(input => {
|
|
28
29
|
var _a2;
|
|
29
30
|
if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
|
|
30
31
|
defaultValues[input.name] = input.defaultValue;
|
|
31
32
|
}
|
|
32
33
|
});
|
|
33
|
-
const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? {
|
|
34
|
+
const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? {
|
|
35
|
+
locale
|
|
36
|
+
} : {});
|
|
34
37
|
return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
|
|
35
38
|
};
|
|
36
39
|
const getContentInitialValue = ({
|
|
@@ -42,7 +45,4 @@ const getContentInitialValue = ({
|
|
|
42
45
|
meta: content == null ? void 0 : content.meta
|
|
43
46
|
});
|
|
44
47
|
};
|
|
45
|
-
export {
|
|
46
|
-
getContentInitialValue,
|
|
47
|
-
getContextStateInitialValue
|
|
48
|
-
};
|
|
48
|
+
export { getContentInitialValue, getContextStateInitialValue }
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { Show, createSignal } from "solid-js";
|
|
2
|
+
|
|
3
|
+
import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
|
|
4
|
+
import {
|
|
5
|
+
components,
|
|
6
|
+
serializeComponentInfo,
|
|
7
|
+
} from "../../functions/register-component.js";
|
|
8
|
+
import Blocks from "../blocks/blocks.jsx";
|
|
9
|
+
import ContentStyles from "./components/styles.jsx";
|
|
10
|
+
import {
|
|
11
|
+
getContentInitialValue,
|
|
12
|
+
getContextStateInitialValue,
|
|
13
|
+
} from "./content.helpers.js";
|
|
14
|
+
import { TARGET } from "../../constants/target.js";
|
|
15
|
+
import { getRenderContentScriptString } from "../content-variants/helpers.js";
|
|
16
|
+
import EnableEditor from "./components/enable-editor.jsx";
|
|
17
|
+
import InlinedScript from "../inlined-script.jsx";
|
|
18
|
+
import { wrapComponentRef } from "./wrap-component-ref.js";
|
|
19
|
+
import ComponentsContext from "../../context/components.context";
|
|
20
|
+
|
|
21
|
+
function ContentComponent(props) {
|
|
22
|
+
const [scriptStr, setScriptStr] = createSignal(
|
|
23
|
+
getRenderContentScriptString({
|
|
24
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
|
|
25
|
+
variationId: props.content?.testVariationId,
|
|
26
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
|
|
27
|
+
contentId: props.content?.id,
|
|
28
|
+
})
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
const [registeredComponents, setRegisteredComponents] = createSignal(
|
|
32
|
+
[
|
|
33
|
+
...getDefaultRegisteredComponents(),
|
|
34
|
+
// While this `components` object is deprecated, we must maintain support for it.
|
|
35
|
+
// Since users are able to override our default components, we need to make sure that we do not break such
|
|
36
|
+
// existing usage.
|
|
37
|
+
// This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
|
|
38
|
+
// which is the new standard way of providing custom components, and must therefore take precedence.
|
|
39
|
+
...components,
|
|
40
|
+
...(props.customComponents || []),
|
|
41
|
+
].reduce(
|
|
42
|
+
(acc, { component, ...info }) => ({
|
|
43
|
+
...acc,
|
|
44
|
+
[info.name]: {
|
|
45
|
+
component: component,
|
|
46
|
+
...serializeComponentInfo(info),
|
|
47
|
+
},
|
|
48
|
+
}),
|
|
49
|
+
{}
|
|
50
|
+
)
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
const [builderContextSignal, setBuilderContextSignal] = createSignal({
|
|
54
|
+
content: getContentInitialValue({
|
|
55
|
+
content: props.content,
|
|
56
|
+
data: props.data,
|
|
57
|
+
}),
|
|
58
|
+
localState: undefined,
|
|
59
|
+
rootState: getContextStateInitialValue({
|
|
60
|
+
content: props.content,
|
|
61
|
+
data: props.data,
|
|
62
|
+
locale: props.locale,
|
|
63
|
+
}),
|
|
64
|
+
rootSetState: contentSetState,
|
|
65
|
+
context: props.context || {},
|
|
66
|
+
apiKey: props.apiKey,
|
|
67
|
+
apiVersion: props.apiVersion,
|
|
68
|
+
componentInfos: [
|
|
69
|
+
...getDefaultRegisteredComponents(),
|
|
70
|
+
// While this `components` object is deprecated, we must maintain support for it.
|
|
71
|
+
// Since users are able to override our default components, we need to make sure that we do not break such
|
|
72
|
+
// existing usage.
|
|
73
|
+
// This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
|
|
74
|
+
// which is the new standard way of providing custom components, and must therefore take precedence.
|
|
75
|
+
...components,
|
|
76
|
+
...(props.customComponents || []),
|
|
77
|
+
].reduce(
|
|
78
|
+
(acc, { component: _, ...info }) => ({
|
|
79
|
+
...acc,
|
|
80
|
+
[info.name]: serializeComponentInfo(info),
|
|
81
|
+
}),
|
|
82
|
+
{}
|
|
83
|
+
),
|
|
84
|
+
inheritedStyles: {},
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
function contentSetState(newRootState) {
|
|
88
|
+
setBuilderContextSignal((PREVIOUS_VALUE) => ({
|
|
89
|
+
...PREVIOUS_VALUE,
|
|
90
|
+
rootState: newRootState,
|
|
91
|
+
}));
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<ComponentsContext.Provider
|
|
96
|
+
value={{
|
|
97
|
+
registeredComponents: registeredComponents(),
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
<EnableEditor
|
|
101
|
+
content={props.content}
|
|
102
|
+
model={props.model}
|
|
103
|
+
context={props.context}
|
|
104
|
+
apiKey={props.apiKey}
|
|
105
|
+
canTrack={props.canTrack}
|
|
106
|
+
locale={props.locale}
|
|
107
|
+
includeRefs={props.includeRefs}
|
|
108
|
+
enrich={props.enrich}
|
|
109
|
+
classNameProp={props.classNameProp}
|
|
110
|
+
showContent={props.showContent}
|
|
111
|
+
builderContextSignal={builderContextSignal()}
|
|
112
|
+
{...{
|
|
113
|
+
setBuilderContextSignal: setBuilderContextSignal,
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
<Show when={props.isSsrAbTest}>
|
|
117
|
+
<InlinedScript scriptStr={scriptStr()}></InlinedScript>
|
|
118
|
+
</Show>
|
|
119
|
+
<Show when={TARGET !== "reactNative"}>
|
|
120
|
+
<ContentStyles
|
|
121
|
+
contentId={builderContextSignal().content?.id}
|
|
122
|
+
cssCode={builderContextSignal().content?.data?.cssCode}
|
|
123
|
+
customFonts={builderContextSignal().content?.data?.customFonts}
|
|
124
|
+
></ContentStyles>
|
|
125
|
+
</Show>
|
|
126
|
+
<Blocks
|
|
127
|
+
blocks={builderContextSignal().content?.data?.blocks}
|
|
128
|
+
context={builderContextSignal()}
|
|
129
|
+
registeredComponents={registeredComponents()}
|
|
130
|
+
></Blocks>
|
|
131
|
+
</EnableEditor>
|
|
132
|
+
</ComponentsContext.Provider>
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export default ContentComponent;
|