@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.
Files changed (141) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/src/blocks/BaseText.jsx +1 -1
  4. package/src/blocks/button/button.jsx +5 -3
  5. package/src/blocks/button/component-info.js +16 -22
  6. package/src/blocks/columns/columns.jsx +12 -21
  7. package/src/blocks/columns/component-info.js +203 -226
  8. package/src/blocks/custom-code/component-info.js +19 -25
  9. package/src/blocks/embed/component-info.js +31 -37
  10. package/src/blocks/embed/helpers.js +3 -9
  11. package/src/blocks/form/component-info.js +174 -212
  12. package/src/blocks/form/form.jsx +1 -268
  13. package/src/blocks/fragment/component-info.js +1 -3
  14. package/src/blocks/helpers.js +27 -0
  15. package/src/blocks/image/component-info.js +105 -133
  16. package/src/blocks/image/image.helpers.js +3 -5
  17. package/src/blocks/img/component-info.js +8 -12
  18. package/src/blocks/img/img.jsx +2 -0
  19. package/src/blocks/input/component-info.js +29 -57
  20. package/src/blocks/input/input.jsx +2 -0
  21. package/src/blocks/raw-text/component-info.js +7 -11
  22. package/src/blocks/raw-text/raw-text.jsx +2 -2
  23. package/src/blocks/section/component-info.js +24 -31
  24. package/src/blocks/section/section.jsx +3 -0
  25. package/src/blocks/select/component-info.js +34 -48
  26. package/src/blocks/select/select.jsx +2 -0
  27. package/src/blocks/submit-button/component-info.js +6 -10
  28. package/src/blocks/submit-button/submit-button.jsx +3 -1
  29. package/src/blocks/symbol/component-info.js +30 -37
  30. package/src/blocks/symbol/symbol.helpers.js +60 -0
  31. package/src/blocks/symbol/symbol.jsx +31 -68
  32. package/src/blocks/text/component-info.js +10 -13
  33. package/src/blocks/text/text.jsx +1 -1
  34. package/src/blocks/textarea/component-info.js +22 -30
  35. package/src/blocks/textarea/textarea.jsx +3 -0
  36. package/src/blocks/video/component-info.js +74 -96
  37. package/src/blocks/video/video.jsx +1 -0
  38. package/src/components/{render-block/render-block.helpers.js → block/block.helpers.js} +26 -44
  39. package/src/components/{render-block/render-block.jsx → block/block.jsx} +65 -80
  40. package/src/components/{render-block → block/components}/block-styles.jsx +16 -16
  41. package/src/components/block/components/block-wrapper.jsx +50 -0
  42. package/src/components/block/components/component-ref/component-ref.helpers.js +41 -0
  43. package/src/components/block/components/component-ref/component-ref.jsx +58 -0
  44. package/src/components/block/components/interactive-element.jsx +30 -0
  45. package/src/components/block/components/repeated-block.jsx +20 -0
  46. package/src/components/blocks/blocks-wrapper.jsx +66 -0
  47. package/src/components/blocks/blocks.jsx +57 -0
  48. package/src/components/{render-content/render-content.jsx → content/components/enable-editor.jsx} +86 -175
  49. package/src/components/{render-content/components/render-styles.helpers.js → content/components/styles.helpers.js} +6 -7
  50. package/src/components/{render-content/components/render-styles.jsx → content/components/styles.jsx} +4 -4
  51. package/src/components/{render-content/render-content.helpers.js → content/content.helpers.js} +15 -15
  52. package/src/components/content/content.jsx +136 -0
  53. package/src/components/content/index.js +2 -0
  54. package/src/components/content/wrap-component-ref.js +2 -0
  55. package/src/components/{render-content-variants/render-content-variants.jsx → content-variants/content-variants.jsx} +19 -22
  56. package/src/components/{render-content-variants → content-variants}/helpers.js +28 -40
  57. package/src/constants/builder-registered-components.js +34 -25
  58. package/src/constants/device-sizes.js +6 -6
  59. package/src/constants/sdk-version.js +1 -1
  60. package/src/context/builder.context.js +1 -1
  61. package/src/context/components.context.js +5 -0
  62. package/src/functions/apply-patch-with-mutation.js +66 -0
  63. package/src/functions/camel-to-kebab-case.js +2 -4
  64. package/src/functions/evaluate/acorn.js +1595 -0
  65. package/src/functions/{evaluate.js → evaluate/evaluate.js} +36 -10
  66. package/src/functions/evaluate/index.js +2 -0
  67. package/src/functions/evaluate/interpreter.js +2801 -0
  68. package/src/functions/evaluate/non-node-runtime.js +92 -0
  69. package/src/functions/evaluate/types.js +0 -0
  70. package/src/functions/event-handler-name.js +2 -4
  71. package/src/functions/extract-text-styles.js +4 -12
  72. package/src/functions/fast-clone.js +2 -4
  73. package/src/functions/get-block-actions-handler.js +3 -5
  74. package/src/functions/get-block-actions.js +15 -4
  75. package/src/functions/get-block-component-options.js +11 -12
  76. package/src/functions/get-block-properties.js +29 -19
  77. package/src/functions/get-builder-search-params/index.js +5 -10
  78. package/src/functions/get-content/generate-content-url.js +17 -19
  79. package/src/functions/get-content/index.js +43 -29
  80. package/src/functions/get-fetch.js +1 -3
  81. package/src/functions/get-global-this.js +1 -3
  82. package/src/functions/get-processed-block.js +12 -13
  83. package/src/functions/get-react-native-block-styles.js +11 -12
  84. package/src/functions/if-target.js +1 -3
  85. package/src/functions/is-browser.js +1 -3
  86. package/src/functions/is-editing.js +1 -3
  87. package/src/functions/is-iframe.js +1 -3
  88. package/src/functions/is-non-node-server.js +9 -0
  89. package/src/functions/is-previewing.js +1 -3
  90. package/src/functions/on-change.js +1 -4
  91. package/src/functions/register-component.js +34 -42
  92. package/src/functions/register.js +1 -3
  93. package/src/functions/sanitize-react-native-block-styles.js +22 -17
  94. package/src/functions/set-editor-settings.js +1 -3
  95. package/src/functions/set.js +1 -3
  96. package/src/functions/track/helpers.js +3 -5
  97. package/src/functions/track/index.js +45 -43
  98. package/src/functions/track/interaction.js +11 -7
  99. package/src/functions/transform-block-properties.js +1 -3
  100. package/src/functions/transform-block.js +1 -3
  101. package/src/helpers/ab-tests.js +45 -28
  102. package/src/helpers/canTrack.js +3 -5
  103. package/src/helpers/cookie.js +15 -24
  104. package/src/helpers/css.js +3 -7
  105. package/src/helpers/flatten.js +15 -18
  106. package/src/helpers/localStorage.js +1 -4
  107. package/src/helpers/logger.js +1 -3
  108. package/src/helpers/nullable.js +2 -4
  109. package/src/helpers/preview-lru-cache/get.js +8 -0
  110. package/src/helpers/preview-lru-cache/helpers.js +10 -0
  111. package/src/helpers/preview-lru-cache/init.js +10 -0
  112. package/src/helpers/preview-lru-cache/set.js +35 -0
  113. package/src/helpers/preview-lru-cache/types.js +0 -0
  114. package/src/helpers/sessionId.js +14 -11
  115. package/src/helpers/time.js +1 -3
  116. package/src/helpers/url.js +2 -4
  117. package/src/helpers/uuid.js +4 -6
  118. package/src/helpers/visitorId.js +8 -7
  119. package/src/index-helpers/blocks-exports.js +3 -14
  120. package/src/index-helpers/top-of-file.js +1 -3
  121. package/src/index.js +2 -17
  122. package/src/scripts/init-editing.js +62 -48
  123. package/src/types/api-version.js +1 -3
  124. package/src/types/builder-props.js +0 -0
  125. package/src/blocks/util.js +0 -8
  126. package/src/components/render-block/render-component.jsx +0 -40
  127. package/src/components/render-block/render-repeated-block.jsx +0 -16
  128. package/src/components/render-blocks.jsx +0 -100
  129. package/src/components/render-content/builder-editing.jsx +0 -5
  130. package/src/components/render-content/index.js +0 -4
  131. package/src/components/render-content/wrap-component-ref.js +0 -4
  132. package/src/functions/evaluate.test.js +0 -17
  133. package/src/functions/get-builder-search-params/fn.test.js +0 -13
  134. package/src/functions/get-content/generate-content-url.test.js +0 -97
  135. package/src/functions/get-processed-block.test.js +0 -34
  136. package/src/functions/on-change.test.js +0 -19
  137. package/src/functions/set.test.js +0 -16
  138. package/src/helpers/url.test.js +0 -21
  139. /package/src/components/{render-block → block}/types.js +0 -0
  140. /package/src/components/{render-content/render-content.types.js → content/content.types.js} +0 -0
  141. /package/src/components/{render-content-variants/render-content-variants.types.js → content-variants/content-variants.types.js} +0 -0
@@ -1,136 +1,57 @@
1
1
  import { Show, onMount, on, createEffect, createSignal } from "solid-js";
2
2
 
3
- import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
4
- import { evaluate } from "../../functions/evaluate.js";
5
- import { getContent } from "../../functions/get-content/index.js";
6
- import { fetch } from "../../functions/get-fetch.js";
7
- import { isBrowser } from "../../functions/is-browser.js";
8
- import { isEditing } from "../../functions/is-editing.js";
9
- import { isPreviewing } from "../../functions/is-previewing.js";
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 "../../scripts/init-editing.js";
22
- import { checkIsDefined } from "../../helpers/nullable.js";
23
- import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
24
- import {
25
- getContentInitialValue,
26
- getContextStateInitialValue,
27
- } from "./render-content.helpers.js";
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 [httpReqsData, setHttpReqsData] = createSignal({});
26
+ const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
46
27
 
47
- const [clicked, setClicked] = createSignal(false);
28
+ const [lastUpdated, setLastUpdated] = createSignal(0);
48
29
 
49
- const [scriptStr, setScriptStr] = createSignal(
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 [builderContextSignal, setBuilderContextSignal] = createSignal({
59
- content: getContentInitialValue({
60
- content: props.content,
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
- setBuilderContextSignal((PREVIOUS_VALUE) => ({
98
- ...PREVIOUS_VALUE,
99
- content: {
100
- ...builderContextSignal().content,
101
- ...newContent,
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
- function setBreakpoints(breakpoints) {
118
- setBuilderContextSignal((PREVIOUS_VALUE) => ({
119
- ...PREVIOUS_VALUE,
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
- rootState: newRootState,
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 (!contentId || contentId !== builderContextSignal().content?.id) {
65
+ if (
66
+ !contentId ||
67
+ contentId !== props.builderContextSignal.content?.id
68
+ ) {
145
69
  return;
146
70
  }
147
71
  if (breakpoints) {
148
- setBreakpoints(breakpoints);
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().content?.data?.jsCode;
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().rootState,
185
- rootSetState: contentSetState,
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().content) {
192
- const variationId = builderContextSignal().content?.testVariationId;
193
- const contentId = builderContextSignal().content?.id;
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().rootState,
216
- rootSetState: contentSetState,
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().rootState,
150
+ ...props.builderContextSignal.rootState,
227
151
  [key]: json,
228
152
  };
229
- contentSetState(newState);
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 = builderContextSignal().content?.data?.httpRequests ?? {};
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().rootState,
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().registeredComponents).forEach(
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().content) {
306
- const variationId = builderContextSignal().content?.testVariationId;
307
- const contentId = builderContextSignal().content?.id;
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().content?.data?.jsCode,
372
- builderContextSignal().rootState,
299
+ props.builderContextSignal.content?.data?.jsCode,
300
+ props.builderContextSignal.rootState,
373
301
  ],
374
- onUpdateFn_1
302
+ onUpdateFn_2
375
303
  )
376
304
  );
377
305
 
378
- function onUpdateFn_2() {
306
+ function onUpdateFn_3() {
379
307
  runHttpRequests();
380
308
  }
381
309
  createEffect(
382
- on(() => [builderContextSignal().content?.data?.httpRequests], onUpdateFn_2)
310
+ on(
311
+ () => [props.builderContextSignal.content?.data?.httpRequests],
312
+ onUpdateFn_3
313
+ )
383
314
  );
384
315
 
385
- function onUpdateFn_3() {
316
+ function onUpdateFn_4() {
386
317
  emitStateUpdate();
387
318
  }
388
- createEffect(on(() => [builderContextSignal().rootState], onUpdateFn_3));
319
+ createEffect(on(() => [props.builderContextSignal.rootState], onUpdateFn_4));
389
320
 
390
321
  return (
391
- <builderContext.Provider value={builderContextSignal()}>
392
- <Show when={builderContextSignal().content}>
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().content?.id}
329
+ builder-content-id={props.builderContextSignal.content?.id}
398
330
  builder-model={props.model}
399
- {...(TARGET === "reactNative"
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
- <Show when={props.isSsrAbTest}>
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 RenderContent;
346
+ export default EnableEditor;
@@ -1,4 +1,4 @@
1
- const getCssFromFont = (font) => {
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 = ({ customFonts }) => {
38
+ const getFontCss = ({
39
+ customFonts
40
+ }) => {
39
41
  var _a;
40
- return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
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 }
@@ -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 "./render-styles.helpers";
5
- import { getFontCss } from "./render-styles.helpers";
4
+ import { getCss } from "./styles.helpers.js";
5
+ import { getFontCss } from "./styles.helpers.js";
6
6
 
7
- function RenderContentStyles(props) {
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 RenderContentStyles;
36
+ export default ContentStyles;
@@ -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, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
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
- 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
- }
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((input) => {
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 ? { 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;
@@ -0,0 +1,2 @@
1
+ import { default as default2 } from "./content";
2
+ export { default2 as default }
@@ -0,0 +1,2 @@
1
+ const wrapComponentRef = component => component;
2
+ export { wrapComponentRef }