@builder.io/sdk-react 0.1.4 → 0.1.5

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 (181) hide show
  1. package/dist/react/blocks/button/button.js +2 -2
  2. package/dist/react/blocks/columns/columns.js +4 -4
  3. package/dist/react/blocks/form/form.js +2 -2
  4. package/dist/react/blocks/image/image.js +6 -6
  5. package/dist/react/components/render-block/render-block.js +18 -1
  6. package/dist/react/components/render-block/render-repeated-block.js +1 -0
  7. package/dist/react/components/render-blocks.js +2 -2
  8. package/dist/react/components/render-content/components/render-styles.helpers.js +51 -0
  9. package/dist/react/components/render-content/components/render-styles.js +12 -54
  10. package/dist/react/components/render-content/render-content.helpers.js +38 -0
  11. package/dist/react/components/render-content/render-content.js +65 -62
  12. package/dist/react/components/render-content/render-content.types.js +1 -0
  13. package/dist/react/constants/builder-registered-components.js +7 -7
  14. package/dist/react/context/builder.context.js +2 -0
  15. package/dist/react/index-helpers/blocks-exports.js +10 -10
  16. package/dist/react/types/input.js +1 -0
  17. package/dist/rsc/blocks/button/button.js +2 -2
  18. package/dist/rsc/blocks/columns/columns.js +4 -4
  19. package/dist/rsc/blocks/form/form.js +2 -2
  20. package/dist/rsc/blocks/image/image.js +6 -6
  21. package/dist/rsc/components/render-block/render-block.js +18 -1
  22. package/dist/rsc/components/render-block/render-repeated-block.js +1 -0
  23. package/dist/rsc/components/render-blocks.js +2 -2
  24. package/dist/rsc/components/render-content/builder-editing.js +47 -4
  25. package/dist/rsc/components/render-content/components/render-styles.helpers.js +51 -0
  26. package/dist/rsc/components/render-content/components/render-styles.js +11 -54
  27. package/dist/rsc/components/render-content/render-content.helpers.js +38 -0
  28. package/dist/rsc/components/render-content/render-content.js +43 -38
  29. package/dist/rsc/components/render-content/render-content.types.js +1 -0
  30. package/dist/rsc/constants/builder-registered-components.js +7 -7
  31. package/dist/rsc/context/builder.context.js +2 -0
  32. package/dist/rsc/index-helpers/blocks-exports.js +10 -10
  33. package/dist/rsc/types/input.js +1 -0
  34. package/package.json +1 -1
  35. package/packages/react/src/blocks/button/button.jsx +2 -2
  36. package/packages/react/src/blocks/columns/columns.jsx +4 -4
  37. package/packages/react/src/blocks/form/form.jsx +2 -2
  38. package/packages/react/src/blocks/image/image.jsx +6 -6
  39. package/packages/react/src/components/render-block/render-block.jsx +22 -1
  40. package/packages/react/src/components/render-block/render-repeated-block.jsx +1 -0
  41. package/packages/react/src/components/render-blocks.jsx +2 -2
  42. package/packages/react/src/components/render-content/components/render-styles.helpers.js +57 -0
  43. package/packages/react/src/components/render-content/components/render-styles.jsx +13 -56
  44. package/packages/react/src/components/render-content/render-content.helpers.js +48 -0
  45. package/packages/react/src/components/render-content/render-content.jsx +76 -67
  46. package/packages/{_rsc/src/components/render-block/types.js → react/src/components/render-content/render-content.types.js} +0 -0
  47. package/packages/react/src/constants/builder-registered-components.js +7 -7
  48. package/packages/react/src/context/builder.context.js +2 -0
  49. package/packages/react/src/index-helpers/blocks-exports.js +18 -18
  50. package/packages/{_rsc/src/context/types.js → react/src/types/input.js} +0 -0
  51. package/packages/rsc/src/blocks/button/button.jsx +2 -2
  52. package/packages/rsc/src/blocks/columns/columns.jsx +4 -4
  53. package/packages/rsc/src/blocks/form/form.jsx +2 -2
  54. package/packages/rsc/src/blocks/image/image.jsx +6 -6
  55. package/packages/rsc/src/components/render-block/render-block.jsx +21 -1
  56. package/packages/rsc/src/components/render-block/render-repeated-block.jsx +1 -0
  57. package/packages/rsc/src/components/render-blocks.jsx +2 -2
  58. package/packages/rsc/src/components/render-content/builder-editing.jsx +61 -4
  59. package/packages/rsc/src/components/render-content/components/render-styles.helpers.js +57 -0
  60. package/packages/rsc/src/components/render-content/components/render-styles.jsx +10 -56
  61. package/packages/rsc/src/components/render-content/render-content.helpers.js +48 -0
  62. package/packages/rsc/src/components/render-content/render-content.jsx +46 -37
  63. package/packages/{_rsc/src/functions/get-content/types.js → rsc/src/components/render-content/render-content.types.js} +0 -0
  64. package/packages/rsc/src/constants/builder-registered-components.js +7 -7
  65. package/packages/rsc/src/context/builder.context.js +2 -0
  66. package/packages/rsc/src/index-helpers/blocks-exports.js +18 -18
  67. package/packages/{_rsc/src/types/builder-block.js → rsc/src/types/input.js} +0 -0
  68. package/packages/_rsc/src/blocks/BaseText.jsx +0 -10
  69. package/packages/_rsc/src/blocks/button/button.jsx +0 -29
  70. package/packages/_rsc/src/blocks/button/component-info.js +0 -41
  71. package/packages/_rsc/src/blocks/columns/columns.jsx +0 -172
  72. package/packages/_rsc/src/blocks/columns/component-info.js +0 -242
  73. package/packages/_rsc/src/blocks/custom-code/component-info.js +0 -31
  74. package/packages/_rsc/src/blocks/custom-code/custom-code.jsx +0 -55
  75. package/packages/_rsc/src/blocks/embed/component-info.js +0 -44
  76. package/packages/_rsc/src/blocks/embed/embed.jsx +0 -43
  77. package/packages/_rsc/src/blocks/embed/helpers.js +0 -9
  78. package/packages/_rsc/src/blocks/form/component-info.js +0 -262
  79. package/packages/_rsc/src/blocks/form/form.jsx +0 -259
  80. package/packages/_rsc/src/blocks/fragment/component-info.js +0 -11
  81. package/packages/_rsc/src/blocks/fragment/fragment.jsx +0 -7
  82. package/packages/_rsc/src/blocks/image/component-info.js +0 -151
  83. package/packages/_rsc/src/blocks/image/image.helpers.js +0 -48
  84. package/packages/_rsc/src/blocks/image/image.jsx +0 -124
  85. package/packages/_rsc/src/blocks/img/component-info.js +0 -20
  86. package/packages/_rsc/src/blocks/img/img.jsx +0 -19
  87. package/packages/_rsc/src/blocks/input/component-info.js +0 -74
  88. package/packages/_rsc/src/blocks/input/input.jsx +0 -21
  89. package/packages/_rsc/src/blocks/raw-text/component-info.js +0 -16
  90. package/packages/_rsc/src/blocks/raw-text/raw-text.jsx +0 -12
  91. package/packages/_rsc/src/blocks/section/component-info.js +0 -49
  92. package/packages/_rsc/src/blocks/section/section.jsx +0 -29
  93. package/packages/_rsc/src/blocks/select/component-info.js +0 -59
  94. package/packages/_rsc/src/blocks/select/select.jsx +0 -22
  95. package/packages/_rsc/src/blocks/submit-button/component-info.js +0 -28
  96. package/packages/_rsc/src/blocks/submit-button/submit-button.jsx +0 -11
  97. package/packages/_rsc/src/blocks/symbol/component-info.js +0 -43
  98. package/packages/_rsc/src/blocks/symbol/symbol.jsx +0 -56
  99. package/packages/_rsc/src/blocks/text/component-info.js +0 -24
  100. package/packages/_rsc/src/blocks/text/text.jsx +0 -12
  101. package/packages/_rsc/src/blocks/textarea/component-info.js +0 -47
  102. package/packages/_rsc/src/blocks/textarea/textarea.jsx +0 -15
  103. package/packages/_rsc/src/blocks/util.js +0 -8
  104. package/packages/_rsc/src/blocks/video/component-info.js +0 -106
  105. package/packages/_rsc/src/blocks/video/video.jsx +0 -61
  106. package/packages/_rsc/src/components/render-block/block-styles.jsx +0 -72
  107. package/packages/_rsc/src/components/render-block/render-block.helpers.js +0 -23
  108. package/packages/_rsc/src/components/render-block/render-block.jsx +0 -251
  109. package/packages/_rsc/src/components/render-block/render-component-with-context.jsx +0 -38
  110. package/packages/_rsc/src/components/render-block/render-component.jsx +0 -37
  111. package/packages/_rsc/src/components/render-block/render-repeated-block.jsx +0 -36
  112. package/packages/_rsc/src/components/render-blocks.jsx +0 -90
  113. package/packages/_rsc/src/components/render-content/builder-editing.jsx +0 -7
  114. package/packages/_rsc/src/components/render-content/components/render-styles.jsx +0 -70
  115. package/packages/_rsc/src/components/render-content/index.js +0 -4
  116. package/packages/_rsc/src/components/render-content/render-content.jsx +0 -259
  117. package/packages/_rsc/src/components/render-inlined-styles.jsx +0 -33
  118. package/packages/_rsc/src/constants/builder-registered-components.js +0 -54
  119. package/packages/_rsc/src/constants/device-sizes.js +0 -48
  120. package/packages/_rsc/src/constants/target.js +0 -4
  121. package/packages/_rsc/src/context/builder.context.js +0 -11
  122. package/packages/_rsc/src/functions/camel-to-kebab-case.js +0 -4
  123. package/packages/_rsc/src/functions/evaluate.js +0 -6
  124. package/packages/_rsc/src/functions/event-handler-name.js +0 -7
  125. package/packages/_rsc/src/functions/extract-text-styles.js +0 -22
  126. package/packages/_rsc/src/functions/fast-clone.js +0 -4
  127. package/packages/_rsc/src/functions/get-block-actions-handler.js +0 -11
  128. package/packages/_rsc/src/functions/get-block-actions.js +0 -18
  129. package/packages/_rsc/src/functions/get-block-component-options.js +0 -28
  130. package/packages/_rsc/src/functions/get-block-properties.js +0 -50
  131. package/packages/_rsc/src/functions/get-block-tag.js +0 -6
  132. package/packages/_rsc/src/functions/get-builder-search-params/fn.test.js +0 -13
  133. package/packages/_rsc/src/functions/get-builder-search-params/index.js +0 -38
  134. package/packages/_rsc/src/functions/get-content/ab-testing.js +0 -99
  135. package/packages/_rsc/src/functions/get-content/generate-content-url.js +0 -55
  136. package/packages/_rsc/src/functions/get-content/generate-content-url.test.js +0 -31
  137. package/packages/_rsc/src/functions/get-content/index.js +0 -65
  138. package/packages/_rsc/src/functions/get-fetch.js +0 -14
  139. package/packages/_rsc/src/functions/get-global-this.js +0 -18
  140. package/packages/_rsc/src/functions/get-processed-block.js +0 -59
  141. package/packages/_rsc/src/functions/get-processed-block.test.js +0 -32
  142. package/packages/_rsc/src/functions/get-react-native-block-styles.js +0 -33
  143. package/packages/_rsc/src/functions/if-target.js +0 -15
  144. package/packages/_rsc/src/functions/is-browser.js +0 -6
  145. package/packages/_rsc/src/functions/is-editing.js +0 -7
  146. package/packages/_rsc/src/functions/is-iframe.js +0 -7
  147. package/packages/_rsc/src/functions/is-previewing.js +0 -14
  148. package/packages/_rsc/src/functions/on-change.js +0 -27
  149. package/packages/_rsc/src/functions/on-change.test.js +0 -19
  150. package/packages/_rsc/src/functions/register-component.js +0 -68
  151. package/packages/_rsc/src/functions/register.js +0 -29
  152. package/packages/_rsc/src/functions/sanitize-react-native-block-styles.js +0 -66
  153. package/packages/_rsc/src/functions/set-editor-settings.js +0 -15
  154. package/packages/_rsc/src/functions/set.js +0 -11
  155. package/packages/_rsc/src/functions/set.test.js +0 -16
  156. package/packages/_rsc/src/functions/track.js +0 -124
  157. package/packages/_rsc/src/functions/transform-block-properties.js +0 -6
  158. package/packages/_rsc/src/functions/transform-block.js +0 -6
  159. package/packages/_rsc/src/helpers/ab-tests.js +0 -16
  160. package/packages/_rsc/src/helpers/cookie.js +0 -81
  161. package/packages/_rsc/src/helpers/css.js +0 -34
  162. package/packages/_rsc/src/helpers/flatten.js +0 -34
  163. package/packages/_rsc/src/helpers/localStorage.js +0 -35
  164. package/packages/_rsc/src/helpers/nullable.js +0 -4
  165. package/packages/_rsc/src/helpers/sessionId.js +0 -52
  166. package/packages/_rsc/src/helpers/time.js +0 -5
  167. package/packages/_rsc/src/helpers/url.js +0 -13
  168. package/packages/_rsc/src/helpers/url.test.js +0 -21
  169. package/packages/_rsc/src/helpers/uuid.js +0 -13
  170. package/packages/_rsc/src/helpers/visitorId.js +0 -34
  171. package/packages/_rsc/src/index-helpers/blocks-exports.js +0 -22
  172. package/packages/_rsc/src/index-helpers/top-of-file.js +0 -2
  173. package/packages/_rsc/src/index.js +0 -14
  174. package/packages/_rsc/src/scripts/init-editing.js +0 -93
  175. package/packages/_rsc/src/types/builder-content.js +0 -0
  176. package/packages/_rsc/src/types/can-track.js +0 -0
  177. package/packages/_rsc/src/types/components.js +0 -0
  178. package/packages/_rsc/src/types/deep-partial.js +0 -0
  179. package/packages/_rsc/src/types/element.js +0 -0
  180. package/packages/_rsc/src/types/targets.js +0 -0
  181. package/packages/_rsc/src/types/typescript.js +0 -0
@@ -2,8 +2,8 @@ import * as React from "react";
2
2
  export default function Button(props) {
3
3
  return (React.createElement(React.Fragment, null,
4
4
  props.link ? (React.createElement(React.Fragment, null,
5
- React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-7028b0a4", ...props.attributes }, props.text)),
6
- React.createElement("style", null, `.button-7028b0a4 {
5
+ React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-66d34b93", ...props.attributes }, props.text)),
6
+ React.createElement("style", null, `.button-66d34b93 {
7
7
  all: unset;
8
8
  }`)));
9
9
  }
@@ -105,13 +105,13 @@ export default function Columns(props) {
105
105
  }
106
106
  return (React.createElement(React.Fragment, null,
107
107
  React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
108
- " div-bda7d4e0", style: {
108
+ " div-46a0fd84", style: {
109
109
  ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
110
110
  ...columnsCssVars(),
111
111
  } },
112
112
  TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
113
113
  React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
114
- props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-bda7d4e0-2", style: {
114
+ props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-46a0fd84-2", style: {
115
115
  width: getColumnCssWidth(index),
116
116
  marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
117
117
  ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
@@ -120,10 +120,10 @@ export default function Columns(props) {
120
120
  React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
121
121
  flexGrow: "1",
122
122
  } }))))),
123
- React.createElement("style", null, `.div-bda7d4e0 {
123
+ React.createElement("style", null, `.div-46a0fd84 {
124
124
  display: flex;
125
125
  line-height: normal;
126
- }.div-bda7d4e0-2 {
126
+ }.div-46a0fd84-2 {
127
127
  display: flex;
128
128
  flex-direction: column;
129
129
  align-items: stretch;
@@ -187,7 +187,7 @@ export default function FormComponent(props) {
187
187
  React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage }))) : null,
188
188
  " ",
189
189
  submissionState() === "error" && responseData ? (React.createElement(React.Fragment, null,
190
- React.createElement("pre", { className: "builder-form-error-text pre-4bdc7532" },
190
+ React.createElement("pre", { className: "builder-form-error-text pre-0d1abaf2" },
191
191
  " ",
192
192
  JSON.stringify(responseData, null, 2),
193
193
  " "))) : null,
@@ -196,6 +196,6 @@ export default function FormComponent(props) {
196
196
  React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
197
197
  " "),
198
198
  " ",
199
- React.createElement("style", null, `.pre-4bdc7532 { padding: 10px; color: red; text-align: center; }`),
199
+ React.createElement("style", null, `.pre-0d1abaf2 { padding: 10px; color: red; text-align: center; }`),
200
200
  " "));
201
201
  }
@@ -51,25 +51,25 @@ export default function Image(props) {
51
51
  ...aspectRatioCss(),
52
52
  }, className: "builder-image" +
53
53
  (props.className ? " " + props.className : "") +
54
- " img-72859b6f", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
54
+ " img-54289eda", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
55
55
  props.aspectRatio &&
56
56
  !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
57
- React.createElement("div", { className: "builder-image-sizer div-72859b6f", style: {
57
+ React.createElement("div", { className: "builder-image-sizer div-54289eda", style: {
58
58
  paddingTop:
59
59
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
60
60
  props.aspectRatio * 100 + "%",
61
61
  } }))) : null,
62
62
  props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
63
63
  !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
64
- React.createElement("div", { className: "div-72859b6f-2" }, props.children))) : null),
65
- React.createElement("style", null, `.img-72859b6f {
64
+ React.createElement("div", { className: "div-54289eda-2" }, props.children))) : null),
65
+ React.createElement("style", null, `.img-54289eda {
66
66
  opacity: 1;
67
67
  transition: opacity 0.2s ease-in-out;
68
- }.div-72859b6f {
68
+ }.div-54289eda {
69
69
  width: 100%;
70
70
  pointer-events: none;
71
71
  font-size: 0;
72
- }.div-72859b6f-2 {
72
+ }.div-54289eda-2 {
73
73
  display: flex;
74
74
  flex-direction: column;
75
75
  align-items: stretch;
@@ -30,10 +30,26 @@ export default function RenderBlock(props) {
30
30
  shouldEvaluateBindings: true,
31
31
  });
32
32
  }
33
+ function proxyState() {
34
+ if (typeof Proxy === "undefined") {
35
+ console.error("no Proxy available in this environment, cannot proxy state.");
36
+ return props.context.state;
37
+ }
38
+ const useState = new Proxy(props.context.state, {
39
+ set: (obj, prop, value) => {
40
+ // set the value on the state object, so that the event handler instantly gets the update.
41
+ obj[prop] = value;
42
+ // set the value in the context, so that the rest of the app gets the update.
43
+ props.context.setState?.(obj);
44
+ return true;
45
+ },
46
+ });
47
+ return useState;
48
+ }
33
49
  function actions() {
34
50
  return getBlockActions({
35
51
  block: useBlock(),
36
- state: props.context.state,
52
+ state: proxyState(),
37
53
  context: props.context.context,
38
54
  });
39
55
  }
@@ -105,6 +121,7 @@ export default function RenderBlock(props) {
105
121
  state: props.context.state,
106
122
  content: props.context.content,
107
123
  context: props.context.context,
124
+ setState: props.context.setState,
108
125
  registeredComponents: props.context.registeredComponents,
109
126
  inheritedStyles: getInheritedTextStyles(),
110
127
  };
@@ -6,6 +6,7 @@ export default function RenderRepeatedBlock(props) {
6
6
  return (React.createElement(BuilderContext.Provider, { value: {
7
7
  content: props.repeatContext.content,
8
8
  state: props.repeatContext.state,
9
+ setState: props.repeatContext.setState,
9
10
  context: props.repeatContext.context,
10
11
  apiKey: props.repeatContext.apiKey,
11
12
  registeredComponents: props.repeatContext.registeredComponents,
@@ -32,12 +32,12 @@ export default function RenderBlocks(props) {
32
32
  }
33
33
  const builderContext = useContext(BuilderContext);
34
34
  return (React.createElement(React.Fragment, null,
35
- React.createElement("div", { className: className() + " div-05727d92", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
35
+ React.createElement("div", { className: className() + " div-297c34fa", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
36
36
  class: className(),
37
37
  }, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
38
38
  props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
39
39
  props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
40
- React.createElement("style", null, `.div-05727d92 {
40
+ React.createElement("style", null, `.div-297c34fa {
41
41
  display: flex;
42
42
  flex-direction: column;
43
43
  align-items: stretch;
@@ -0,0 +1,51 @@
1
+ const getCssFromFont = (font) => {
2
+ var _a, _b;
3
+ const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
4
+ const name = family.split(",")[0];
5
+ const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
6
+ let str = "";
7
+ if (url && family && name) {
8
+ str += `
9
+ @font-face {
10
+ font-family: "${family}";
11
+ src: local("${name}"), url('${url}') format('woff2');
12
+ font-display: fallback;
13
+ font-weight: 400;
14
+ }
15
+ `.trim();
16
+ }
17
+ if (font.files) {
18
+ for (const weight in font.files) {
19
+ const isNumber = String(Number(weight)) === weight;
20
+ if (!isNumber) {
21
+ continue;
22
+ }
23
+ const weightUrl = font.files[weight];
24
+ if (weightUrl && weightUrl !== url) {
25
+ str += `
26
+ @font-face {
27
+ font-family: "${family}";
28
+ src: url('${weightUrl}') format('woff2');
29
+ font-display: fallback;
30
+ font-weight: ${weight};
31
+ }
32
+ `.trim();
33
+ }
34
+ }
35
+ }
36
+ return str;
37
+ };
38
+ const getFontCss = ({ customFonts }) => {
39
+ var _a;
40
+ return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
41
+ };
42
+ const getCss = ({ cssCode, contentId }) => {
43
+ if (!cssCode) {
44
+ return "";
45
+ }
46
+ if (!contentId) {
47
+ return cssCode;
48
+ }
49
+ return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
50
+ };
51
+ export { getCss, getFontCss };
@@ -1,59 +1,17 @@
1
1
  import * as React from "react";
2
+ import { useState } from "react";
2
3
  import RenderInlinedStyles from "../../render-inlined-styles";
4
+ import { getCss } from "./render-styles.helpers";
5
+ import { getFontCss } from "./render-styles.helpers";
3
6
  export default function RenderContentStyles(props) {
4
- function getCssFromFont(font) {
5
- // TODO: compute what font sizes are used and only load those.......
6
- const family = font.family +
7
- (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
8
- const name = family.split(",")[0];
9
- const url = font.fileUrl ?? font?.files?.regular;
10
- let str = "";
11
- if (url && family && name) {
12
- str += `
13
- @font-face {
14
- font-family: "${family}";
15
- src: local("${name}"), url('${url}') format('woff2');
16
- font-display: fallback;
17
- font-weight: 400;
18
- }
19
- `.trim();
20
- }
21
- if (font.files) {
22
- for (const weight in font.files) {
23
- const isNumber = String(Number(weight)) === weight;
24
- if (!isNumber) {
25
- continue;
26
- }
27
- // TODO: maybe limit number loaded
28
- const weightUrl = font.files[weight];
29
- if (weightUrl && weightUrl !== url) {
30
- str += `
31
- @font-face {
32
- font-family: "${family}";
33
- src: url('${weightUrl}') format('woff2');
34
- font-display: fallback;
35
- font-weight: ${weight};
36
- }
37
- `.trim();
38
- }
39
- }
40
- }
41
- return str;
42
- }
43
- function getFontCss({ customFonts }) {
44
- // TODO: flag for this
45
- // if (!builder.allowCustomFonts) {
46
- // return '';
47
- // }
48
- // TODO: separate internal data from external
49
- return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
50
- }
51
- function injectedStyles() {
52
- return `
53
- ${props.cssCode || ""}
7
+ const [injectedStyles, setInjectedStyles] = useState(() => `
8
+ ${getCss({
9
+ cssCode: props.cssCode,
10
+ contentId: props.contentId,
11
+ })}
54
12
  ${getFontCss({
55
- customFonts: props.customFonts,
56
- })}`;
57
- }
58
- return React.createElement(RenderInlinedStyles, { styles: injectedStyles() });
13
+ customFonts: props.customFonts,
14
+ })}
15
+ `);
16
+ return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
59
17
  }
@@ -0,0 +1,38 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ const getContextStateInitialValue = ({ content, data, locale }) => {
21
+ var _a, _b, _c;
22
+ const defaultValues = {};
23
+ (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
24
+ var _a2;
25
+ 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) {
26
+ defaultValues[input.name] = input.defaultValue;
27
+ }
28
+ });
29
+ const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
30
+ return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
31
+ };
32
+ const getContentInitialValue = ({ content, data }) => {
33
+ return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
34
+ data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
35
+ meta: content == null ? void 0 : content.meta
36
+ });
37
+ };
38
+ export { getContentInitialValue, getContextStateInitialValue };
@@ -16,48 +16,49 @@ import builderContext from "../../context/builder.context.js";
16
16
  import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
17
17
  import { checkIsDefined } from "../../helpers/nullable.js";
18
18
  import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
19
+ import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
19
20
  export default function RenderContent(props) {
20
21
  const elementRef = useRef(null);
21
22
  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
22
23
  const [overrideContent, setOverrideContent] = useState(() => null);
23
- function useContent() {
24
- if (!props.content && !overrideContent) {
25
- return undefined;
26
- }
27
- return {
28
- ...props.content,
29
- ...overrideContent,
24
+ const [useContent, setUseContent] = useState(() => getContentInitialValue({
25
+ content: props.content,
26
+ data: props.data,
27
+ }));
28
+ function mergeNewContent(newContent) {
29
+ setUseContent({
30
+ ...useContent,
31
+ ...newContent,
30
32
  data: {
31
- ...props.content?.data,
32
- ...props.data,
33
- ...overrideContent?.data,
33
+ ...useContent?.data,
34
+ ...newContent?.data,
34
35
  },
35
36
  meta: {
36
- ...props.content?.meta,
37
- ...overrideContent?.meta,
38
- breakpoints: useBreakpoints ||
39
- overrideContent?.meta?.breakpoints ||
40
- props.content?.meta?.breakpoints,
37
+ ...useContent?.meta,
38
+ ...newContent?.meta,
39
+ breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
41
40
  },
42
- };
41
+ });
42
+ }
43
+ function setBreakpoints(breakpoints) {
44
+ setUseContent({
45
+ ...useContent,
46
+ meta: {
47
+ ...useContent?.meta,
48
+ breakpoints,
49
+ },
50
+ });
43
51
  }
44
52
  const [update, setUpdate] = useState(() => 0);
45
- const [useBreakpoints, setUseBreakpoints] = useState(() => null);
46
53
  const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
47
- const [overrideState, setOverrideState] = useState(() => ({}));
48
- function contentState() {
49
- return {
50
- ...props.content?.data?.state,
51
- ...props.data,
52
- ...(props.locale
53
- ? {
54
- locale: props.locale,
55
- }
56
- : {}),
57
- ...overrideState,
58
- };
54
+ const [contentState, setContentState] = useState(() => getContextStateInitialValue({
55
+ content: props.content,
56
+ data: props.data,
57
+ locale: props.locale,
58
+ }));
59
+ function setContextState(newState) {
60
+ setContentState(newState);
59
61
  }
60
- const [contextContext, setContextContext] = useState(() => props.context || {});
61
62
  const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
62
63
  ...getDefaultRegisteredComponents(),
63
64
  // While this `components` object is deprecated, we must maintain support for it.
@@ -78,10 +79,12 @@ export default function RenderContent(props) {
78
79
  case "builder.configureSdk": {
79
80
  const messageContent = data.data;
80
81
  const { breakpoints, contentId } = messageContent;
81
- if (!contentId || contentId !== useContent?.()?.id) {
82
+ if (!contentId || contentId !== useContent?.id) {
82
83
  return;
83
84
  }
84
- setUseBreakpoints(breakpoints);
85
+ if (breakpoints) {
86
+ setBreakpoints(breakpoints);
87
+ }
85
88
  setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
86
89
  break;
87
90
  }
@@ -93,7 +96,7 @@ export default function RenderContent(props) {
93
96
  messageContent.modelName;
94
97
  const contentData = messageContent.data;
95
98
  if (key === props.model) {
96
- setOverrideContent(contentData);
99
+ mergeNewContent(contentData);
97
100
  setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
98
101
  }
99
102
  break;
@@ -107,21 +110,21 @@ export default function RenderContent(props) {
107
110
  }
108
111
  function evaluateJsCode() {
109
112
  // run any dynamic JS code attached to content
110
- const jsCode = useContent?.()?.data?.jsCode;
113
+ const jsCode = useContent?.data?.jsCode;
111
114
  if (jsCode) {
112
115
  evaluate({
113
116
  code: jsCode,
114
- context: contextContext,
115
- state: contentState(),
117
+ context: props.context || {},
118
+ state: contentState,
116
119
  });
117
120
  }
118
121
  }
119
122
  const [httpReqsData, setHttpReqsData] = useState(() => ({}));
120
123
  const [clicked, setClicked] = useState(() => false);
121
124
  function onClick(event) {
122
- if (useContent()) {
123
- const variationId = useContent?.()?.testVariationId;
124
- const contentId = useContent?.()?.id;
125
+ if (useContent) {
126
+ const variationId = useContent?.testVariationId;
127
+ const contentId = useContent?.id;
125
128
  _track({
126
129
  type: "click",
127
130
  canTrack: canTrackToUse,
@@ -139,26 +142,26 @@ export default function RenderContent(props) {
139
142
  function evalExpression(expression) {
140
143
  return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
141
144
  code: group,
142
- context: contextContext,
143
- state: contentState(),
145
+ context: props.context || {},
146
+ state: contentState,
144
147
  }));
145
148
  }
146
149
  function handleRequest({ url, key }) {
147
150
  fetch(url)
148
151
  .then((response) => response.json())
149
152
  .then((json) => {
150
- const newOverrideState = {
151
- ...overrideState,
153
+ const newState = {
154
+ ...contentState,
152
155
  [key]: json,
153
156
  };
154
- setOverrideState(newOverrideState);
157
+ setContextState(newState);
155
158
  })
156
159
  .catch((err) => {
157
160
  console.log("error fetching dynamic data", url, err);
158
161
  });
159
162
  }
160
163
  function runHttpRequests() {
161
- const requests = useContent?.()?.data?.httpRequests ?? {};
164
+ const requests = useContent?.data?.httpRequests ?? {};
162
165
  Object.entries(requests).forEach(([key, url]) => {
163
166
  if (url && (!httpReqsData[key] || isEditing())) {
164
167
  const evaluatedUrl = evalExpression(url);
@@ -173,7 +176,7 @@ export default function RenderContent(props) {
173
176
  if (isEditing()) {
174
177
  window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
175
178
  detail: {
176
- state: contentState(),
179
+ state: contentState,
177
180
  ref: {
178
181
  name: props.model,
179
182
  },
@@ -182,8 +185,7 @@ export default function RenderContent(props) {
182
185
  }
183
186
  }
184
187
  function shouldRenderContentStyles() {
185
- return Boolean((useContent?.()?.data?.cssCode ||
186
- useContent?.()?.data?.customFonts?.length) &&
188
+ return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
187
189
  TARGET !== "reactNative");
188
190
  }
189
191
  useEffect(() => {
@@ -213,9 +215,9 @@ export default function RenderContent(props) {
213
215
  window.addEventListener("message", processMessage);
214
216
  window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
215
217
  }
216
- if (useContent()) {
217
- const variationId = useContent?.()?.testVariationId;
218
- const contentId = useContent?.()?.id;
218
+ if (useContent) {
219
+ const variationId = useContent?.testVariationId;
220
+ const contentId = useContent?.id;
219
221
  _track({
220
222
  type: "impression",
221
223
  canTrack: canTrackToUse,
@@ -245,7 +247,7 @@ export default function RenderContent(props) {
245
247
  apiKey: props.apiKey,
246
248
  }).then((content) => {
247
249
  if (content) {
248
- setOverrideContent(content);
250
+ mergeNewContent(content);
249
251
  }
250
252
  });
251
253
  }
@@ -257,13 +259,13 @@ export default function RenderContent(props) {
257
259
  }, []);
258
260
  useEffect(() => {
259
261
  evaluateJsCode();
260
- }, [useContent?.()?.data?.jsCode, contentState()]);
262
+ }, [useContent?.data?.jsCode, contentState]);
261
263
  useEffect(() => {
262
264
  runHttpRequests();
263
- }, [useContent?.()?.data?.httpRequests]);
265
+ }, [useContent?.data?.httpRequests]);
264
266
  useEffect(() => {
265
267
  emitStateUpdate();
266
- }, [contentState()]);
268
+ }, [contentState]);
267
269
  useEffect(() => {
268
270
  return () => {
269
271
  if (isBrowser()) {
@@ -273,13 +275,14 @@ export default function RenderContent(props) {
273
275
  };
274
276
  }, []);
275
277
  return (React.createElement(builderContext.Provider, { value: {
276
- content: useContent(),
277
- state: contentState(),
278
- context: contextContext,
278
+ content: useContent,
279
+ state: contentState,
280
+ setState: setContextState,
281
+ context: props.context || {},
279
282
  apiKey: props.apiKey,
280
283
  registeredComponents: allRegisteredComponents,
281
- } }, useContent() ? (React.createElement(React.Fragment, null,
282
- React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.()?.id, "builder-model": props.model },
283
- shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { cssCode: useContent?.()?.data?.cssCode, customFonts: useContent?.()?.data?.customFonts })) : null,
284
- React.createElement(RenderBlocks, { blocks: useContent?.()?.data?.blocks, key: forceReRenderCount })))) : null));
284
+ } }, useContent ? (React.createElement(React.Fragment, null,
285
+ React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
286
+ shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts })) : null,
287
+ React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
285
288
  }
@@ -37,16 +37,16 @@ import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.
37
37
  import { default as customCode } from "../blocks/custom-code/custom-code";
38
38
  import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
39
39
  const getDefaultRegisteredComponents = () => [
40
+ __spreadValues({ component: Button }, buttonComponentInfo),
40
41
  __spreadValues({ component: Columns }, columnsComponentInfo),
42
+ __spreadValues({ component: customCode }, customCodeInfo),
43
+ __spreadValues({ component: embed }, embedComponentInfo),
44
+ __spreadValues({ component: Fragment }, fragmentComponentInfo),
41
45
  __spreadValues({ component: Image }, imageComponentInfo),
42
46
  __spreadValues({ component: Img }, imgComponentInfo),
43
- __spreadValues({ component: Text }, textComponentInfo),
44
- __spreadValues({ component: Video }, videoComponentInfo),
45
- __spreadValues({ component: Symbol }, symbolComponentInfo),
46
- __spreadValues({ component: Button }, buttonComponentInfo),
47
47
  __spreadValues({ component: Section }, sectionComponentInfo),
48
- __spreadValues({ component: Fragment }, fragmentComponentInfo),
49
- __spreadValues({ component: embed }, embedComponentInfo),
50
- __spreadValues({ component: customCode }, customCodeInfo)
48
+ __spreadValues({ component: Symbol }, symbolComponentInfo),
49
+ __spreadValues({ component: Text }, textComponentInfo),
50
+ __spreadValues({ component: Video }, videoComponentInfo)
51
51
  ];
52
52
  export { getDefaultRegisteredComponents };
@@ -3,6 +3,8 @@ var stdin_default = createContext({
3
3
  content: null,
4
4
  context: {},
5
5
  state: {},
6
+ setState() {
7
+ },
6
8
  apiKey: null,
7
9
  registeredComponents: {},
8
10
  inheritedStyles: {}
@@ -1,11 +1,11 @@
1
- import { default as default2 } from "../blocks/columns/columns";
2
- import { default as default3 } from "../blocks/image/image";
3
- import { default as default4 } from "../blocks/text/text";
4
- import { default as default5 } from "../blocks/video/video";
5
- import { default as default6 } from "../blocks/symbol/symbol";
6
- import { default as default7 } from "../blocks/button/button";
1
+ import { default as default2 } from "../blocks/button/button";
2
+ import { default as default3 } from "../blocks/columns/columns";
3
+ import { default as default4 } from "../blocks/fragment/fragment";
4
+ import { default as default5 } from "../blocks/image/image";
5
+ import { default as default6 } from "../components/render-blocks";
6
+ import { default as default7 } from "../components/render-content/render-content";
7
7
  import { default as default8 } from "../blocks/section/section";
8
- import { default as default9 } from "../blocks/fragment/fragment";
9
- import { default as default10 } from "../components/render-content/render-content";
10
- import { default as default11 } from "../components/render-blocks";
11
- export { default7 as Button, default2 as Columns, default9 as Fragment, default3 as Image, default11 as RenderBlocks, default10 as RenderContent, default8 as Section, default6 as Symbol, default4 as Text, default5 as Video };
8
+ import { default as default9 } from "../blocks/symbol/symbol";
9
+ import { default as default10 } from "../blocks/text/text";
10
+ import { default as default11 } from "../blocks/video/video";
11
+ export { default2 as Button, default3 as Columns, default4 as Fragment, default5 as Image, default6 as RenderBlocks, default7 as RenderContent, default8 as Section, default9 as Symbol, default10 as Text, default11 as Video };
@@ -0,0 +1 @@
1
+ "use strict";
@@ -3,8 +3,8 @@ export default function Button(props) {
3
3
  const _context = { ...props["_context"] };
4
4
  return (React.createElement(React.Fragment, null,
5
5
  props.link ? (React.createElement(React.Fragment, null,
6
- React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-12870b9c", ...props.attributes }, props.text)),
7
- React.createElement("style", null, `.button-12870b9c {
6
+ React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-b25d5310", ...props.attributes }, props.text)),
7
+ React.createElement("style", null, `.button-b25d5310 {
8
8
  all: unset;
9
9
  }`)));
10
10
  }