@builder.io/sdk-react-native 0.1.3 → 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 (39) hide show
  1. package/dist/blocks/columns/columns.js +4 -4
  2. package/dist/blocks/form/form.js +6 -6
  3. package/dist/blocks/symbol/symbol.js +2 -2
  4. package/dist/components/render-block/block-styles.js +2 -2
  5. package/dist/components/render-block/render-block.js +25 -7
  6. package/dist/components/render-block/render-component.js +4 -4
  7. package/dist/components/render-block/render-repeated-block.js +3 -2
  8. package/dist/components/render-blocks.js +4 -4
  9. package/dist/components/render-content/components/render-styles.helpers.js +55 -0
  10. package/dist/components/render-content/components/render-styles.js +14 -58
  11. package/dist/components/render-content/index.js +2 -2
  12. package/dist/components/render-content/render-content.helpers.js +42 -0
  13. package/dist/components/render-content/render-content.js +72 -73
  14. package/dist/components/render-content/render-content.types.js +1 -0
  15. package/dist/components/render-inlined-styles.js +2 -2
  16. package/dist/constants/builder-registered-components.js +14 -14
  17. package/dist/context/builder.context.js +2 -0
  18. package/dist/index-helpers/blocks-exports.js +16 -16
  19. package/dist/types/input.js +1 -0
  20. package/package.json +1 -1
  21. package/src/blocks/columns/columns.jsx +2 -2
  22. package/src/blocks/form/form.jsx +2 -2
  23. package/src/blocks/symbol/symbol.jsx +1 -1
  24. package/src/components/render-block/block-styles.jsx +1 -1
  25. package/src/components/render-block/render-block.jsx +25 -4
  26. package/src/components/render-block/render-component.jsx +2 -2
  27. package/src/components/render-block/render-repeated-block.jsx +2 -1
  28. package/src/components/render-blocks.jsx +2 -2
  29. package/src/components/render-content/components/render-styles.helpers.js +57 -0
  30. package/src/components/render-content/components/render-styles.jsx +14 -57
  31. package/src/components/render-content/index.js +1 -1
  32. package/src/components/render-content/render-content.helpers.js +48 -0
  33. package/src/components/render-content/render-content.jsx +78 -69
  34. package/src/components/render-content/render-content.types.js +0 -0
  35. package/src/components/render-inlined-styles.jsx +2 -2
  36. package/src/constants/builder-registered-components.js +7 -7
  37. package/src/context/builder.context.js +2 -0
  38. package/src/index-helpers/blocks-exports.js +8 -8
  39. package/src/types/input.js +0 -0
package/dist/components/render-content/render-content.js CHANGED
@@ -39,57 +39,57 @@ const is_editing_js_1 = require("../../functions/is-editing.js");
39
39
  const is_previewing_js_1 = require("../../functions/is-previewing.js");
40
40
  const register_component_js_1 = require("../../functions/register-component.js");
41
41
  const index_js_2 = require("../../functions/track/index.js");
42
- const render_blocks_js_1 = __importDefault(require("../render-blocks.js"));
43
- const render_styles_js_1 = __importDefault(require("./components/render-styles.js"));
42
+ const render_blocks_1 = __importDefault(require("../render-blocks"));
43
+ const render_styles_1 = __importDefault(require("./components/render-styles"));
44
44
  const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
45
45
  const init_editing_js_1 = require("../../scripts/init-editing.js");
46
46
  const nullable_js_1 = require("../../helpers/nullable.js");
47
47
  const interaction_js_1 = require("../../functions/track/interaction.js");
48
+ const render_content_helpers_js_1 = require("./render-content.helpers.js");
48
49
  function RenderContent(props) {
49
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
50
+ var _a, _b, _c, _d, _e;
50
51
  const elementRef = (0, react_1.useRef)(null);
51
52
  const [forceReRenderCount, setForceReRenderCount] = (0, react_1.useState)(() => 0);
52
53
  const [overrideContent, setOverrideContent] = (0, react_1.useState)(() => null);
53
- function useContent() {
54
- var _a, _b, _c, _d, _e;
55
- if (!props.content && !overrideContent) {
56
- return undefined;
57
- }
58
- return {
59
- ...props.content,
60
- ...overrideContent,
54
+ const [useContent, setUseContent] = (0, react_1.useState)(() => (0, render_content_helpers_js_1.getContentInitialValue)({
55
+ content: props.content,
56
+ data: props.data,
57
+ }));
58
+ function mergeNewContent(newContent) {
59
+ var _a, _b;
60
+ setUseContent({
61
+ ...useContent,
62
+ ...newContent,
61
63
  data: {
62
- ...(_a = props.content) === null || _a === void 0 ? void 0 : _a.data,
63
- ...props.data,
64
- ...overrideContent === null || overrideContent === void 0 ? void 0 : overrideContent.data,
64
+ ...useContent === null || useContent === void 0 ? void 0 : useContent.data,
65
+ ...newContent === null || newContent === void 0 ? void 0 : newContent.data,
65
66
  },
66
67
  meta: {
67
- ...(_b = props.content) === null || _b === void 0 ? void 0 : _b.meta,
68
- ...overrideContent === null || overrideContent === void 0 ? void 0 : overrideContent.meta,
69
- breakpoints: useBreakpoints ||
70
- ((_c = overrideContent === null || overrideContent === void 0 ? void 0 : overrideContent.meta) === null || _c === void 0 ? void 0 : _c.breakpoints) ||
71
- ((_e = (_d = props.content) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.breakpoints),
68
+ ...useContent === null || useContent === void 0 ? void 0 : useContent.meta,
69
+ ...newContent === null || newContent === void 0 ? void 0 : newContent.meta,
70
+ breakpoints: ((_a = newContent === null || newContent === void 0 ? void 0 : newContent.meta) === null || _a === void 0 ? void 0 : _a.breakpoints) || ((_b = useContent === null || useContent === void 0 ? void 0 : useContent.meta) === null || _b === void 0 ? void 0 : _b.breakpoints),
72
71
  },
73
- };
72
+ });
73
+ }
74
+ function setBreakpoints(breakpoints) {
75
+ setUseContent({
76
+ ...useContent,
77
+ meta: {
78
+ ...useContent === null || useContent === void 0 ? void 0 : useContent.meta,
79
+ breakpoints,
80
+ },
81
+ });
74
82
  }
75
83
  const [update, setUpdate] = (0, react_1.useState)(() => 0);
76
- const [useBreakpoints, setUseBreakpoints] = (0, react_1.useState)(() => null);
77
84
  const [canTrackToUse, setCanTrackToUse] = (0, react_1.useState)(() => (0, nullable_js_1.checkIsDefined)(props.canTrack) ? props.canTrack : true);
78
- const [overrideState, setOverrideState] = (0, react_1.useState)(() => ({}));
79
- function contentState() {
80
- var _a, _b;
81
- return {
82
- ...(_b = (_a = props.content) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.state,
83
- ...props.data,
84
- ...(props.locale
85
- ? {
86
- locale: props.locale,
87
- }
88
- : {}),
89
- ...overrideState,
90
- };
85
+ const [contentState, setContentState] = (0, react_1.useState)(() => (0, render_content_helpers_js_1.getContextStateInitialValue)({
86
+ content: props.content,
87
+ data: props.data,
88
+ locale: props.locale,
89
+ }));
90
+ function setContextState(newState) {
91
+ setContentState(newState);
91
92
  }
92
- const [contextContext, setContextContext] = (0, react_1.useState)(() => props.context || {});
93
93
  const [allRegisteredComponents, setAllRegisteredComponents] = (0, react_1.useState)(() => [
94
94
  ...(0, builder_registered_components_js_1.getDefaultRegisteredComponents)(),
95
95
  // While this `components` object is deprecated, we must maintain support for it.
@@ -104,17 +104,18 @@ function RenderContent(props) {
104
104
  [curr.name]: curr,
105
105
  }), {}));
106
106
  function processMessage(event) {
107
- var _a;
108
107
  const { data } = event;
109
108
  if (data) {
110
109
  switch (data.type) {
111
110
  case "builder.configureSdk": {
112
111
  const messageContent = data.data;
113
112
  const { breakpoints, contentId } = messageContent;
114
- if (!contentId || contentId !== ((_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.id)) {
113
+ if (!contentId || contentId !== (useContent === null || useContent === void 0 ? void 0 : useContent.id)) {
115
114
  return;
116
115
  }
117
- setUseBreakpoints(breakpoints);
116
+ if (breakpoints) {
117
+ setBreakpoints(breakpoints);
118
+ }
118
119
  setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
119
120
  break;
120
121
  }
@@ -126,7 +127,7 @@ function RenderContent(props) {
126
127
  messageContent.modelName;
127
128
  const contentData = messageContent.data;
128
129
  if (key === props.model) {
129
- setOverrideContent(contentData);
130
+ mergeNewContent(contentData);
130
131
  setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
131
132
  }
132
133
  break;
@@ -139,24 +140,23 @@ function RenderContent(props) {
139
140
  }
140
141
  }
141
142
  function evaluateJsCode() {
142
- var _a, _b;
143
+ var _a;
143
144
  // run any dynamic JS code attached to content
144
- const jsCode = (_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.jsCode;
145
+ const jsCode = (_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.jsCode;
145
146
  if (jsCode) {
146
147
  (0, evaluate_js_1.evaluate)({
147
148
  code: jsCode,
148
- context: contextContext,
149
- state: contentState(),
149
+ context: props.context || {},
150
+ state: contentState,
150
151
  });
151
152
  }
152
153
  }
153
154
  const [httpReqsData, setHttpReqsData] = (0, react_1.useState)(() => ({}));
154
155
  const [clicked, setClicked] = (0, react_1.useState)(() => false);
155
156
  function onClick(event) {
156
- var _a, _b;
157
- if (useContent()) {
158
- const variationId = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.testVariationId;
159
- const contentId = (_b = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _b === void 0 ? void 0 : _b.id;
157
+ if (useContent) {
158
+ const variationId = useContent === null || useContent === void 0 ? void 0 : useContent.testVariationId;
159
+ const contentId = useContent === null || useContent === void 0 ? void 0 : useContent.id;
160
160
  (0, index_js_2._track)({
161
161
  type: "click",
162
162
  canTrack: canTrackToUse,
@@ -174,27 +174,27 @@ function RenderContent(props) {
174
174
  function evalExpression(expression) {
175
175
  return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_js_1.evaluate)({
176
176
  code: group,
177
- context: contextContext,
178
- state: contentState(),
177
+ context: props.context || {},
178
+ state: contentState,
179
179
  }));
180
180
  }
181
181
  function handleRequest({ url, key }) {
182
182
  (0, get_fetch_js_1.fetch)(url)
183
183
  .then((response) => response.json())
184
184
  .then((json) => {
185
- const newOverrideState = {
186
- ...overrideState,
185
+ const newState = {
186
+ ...contentState,
187
187
  [key]: json,
188
188
  };
189
- setOverrideState(newOverrideState);
189
+ setContextState(newState);
190
190
  })
191
191
  .catch((err) => {
192
192
  console.log("error fetching dynamic data", url, err);
193
193
  });
194
194
  }
195
195
  function runHttpRequests() {
196
- var _a, _b, _c;
197
- const requests = (_c = (_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.httpRequests) !== null && _c !== void 0 ? _c : {};
196
+ var _a, _b;
197
+ const requests = (_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.httpRequests) !== null && _b !== void 0 ? _b : {};
198
198
  Object.entries(requests).forEach(([key, url]) => {
199
199
  if (url && (!httpReqsData[key] || (0, is_editing_js_1.isEditing)())) {
200
200
  const evaluatedUrl = evalExpression(url);
@@ -209,7 +209,7 @@ function RenderContent(props) {
209
209
  if ((0, is_editing_js_1.isEditing)()) {
210
210
  window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
211
211
  detail: {
212
- state: contentState(),
212
+ state: contentState,
213
213
  ref: {
214
214
  name: props.model,
215
215
  },
@@ -218,13 +218,11 @@ function RenderContent(props) {
218
218
  }
219
219
  }
220
220
  function shouldRenderContentStyles() {
221
- var _a, _b, _c, _d, _e;
222
- return Boolean((((_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.cssCode) ||
223
- ((_e = (_d = (_c = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.customFonts) === null || _e === void 0 ? void 0 : _e.length)) &&
221
+ var _a, _b, _c;
222
+ return Boolean((((_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.cssCode) || ((_c = (_b = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _b === void 0 ? void 0 : _b.customFonts) === null || _c === void 0 ? void 0 : _c.length)) &&
224
223
  target_js_1.TARGET !== "reactNative");
225
224
  }
226
225
  (0, react_1.useEffect)(() => {
227
- var _a, _b;
228
226
  if (!props.apiKey) {
229
227
  console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
230
228
  }
@@ -252,9 +250,9 @@ function RenderContent(props) {
252
250
  window.addEventListener("message", processMessage);
253
251
  window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
254
252
  }
255
- if (useContent()) {
256
- const variationId = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.testVariationId;
257
- const contentId = (_b = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _b === void 0 ? void 0 : _b.id;
253
+ if (useContent) {
254
+ const variationId = useContent === null || useContent === void 0 ? void 0 : useContent.testVariationId;
255
+ const contentId = useContent === null || useContent === void 0 ? void 0 : useContent.id;
258
256
  (0, index_js_2._track)({
259
257
  type: "impression",
260
258
  canTrack: canTrackToUse,
@@ -284,7 +282,7 @@ function RenderContent(props) {
284
282
  apiKey: props.apiKey,
285
283
  }).then((content) => {
286
284
  if (content) {
287
- setOverrideContent(content);
285
+ mergeNewContent(content);
288
286
  }
289
287
  });
290
288
  }
@@ -296,13 +294,13 @@ function RenderContent(props) {
296
294
  }, []);
297
295
  (0, react_1.useEffect)(() => {
298
296
  evaluateJsCode();
299
- }, [(_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.jsCode, contentState()]);
297
+ }, [(_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.jsCode, contentState]);
300
298
  (0, react_1.useEffect)(() => {
301
299
  runHttpRequests();
302
- }, [(_d = (_c = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.httpRequests]);
300
+ }, [(_b = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _b === void 0 ? void 0 : _b.httpRequests]);
303
301
  (0, react_1.useEffect)(() => {
304
302
  emitStateUpdate();
305
- }, [contentState()]);
303
+ }, [contentState]);
306
304
  (0, react_1.useEffect)(() => {
307
305
  return () => {
308
306
  if ((0, is_browser_js_1.isBrowser)()) {
@@ -312,14 +310,15 @@ function RenderContent(props) {
312
310
  };
313
311
  }, []);
314
312
  return (React.createElement(builder_context_js_1.default.Provider, { value: {
315
- content: useContent(),
316
- state: contentState(),
317
- context: contextContext,
313
+ content: useContent,
314
+ state: contentState,
315
+ setState: setContextState,
316
+ context: props.context || {},
318
317
  apiKey: props.apiKey,
319
318
  registeredComponents: allRegisteredComponents,
320
- } }, useContent() ? (React.createElement(React.Fragment, null,
321
- React.createElement(react_native_1.View, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": (_e = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _e === void 0 ? void 0 : _e.id, "builder-model": props.model },
322
- shouldRenderContentStyles() ? (React.createElement(render_styles_js_1.default, { cssCode: (_g = (_f = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.cssCode, customFonts: (_j = (_h = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.customFonts })) : null,
323
- React.createElement(render_blocks_js_1.default, { blocks: (_l = (_k = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.blocks, key: forceReRenderCount })))) : null));
319
+ } }, useContent ? (React.createElement(React.Fragment, null,
320
+ React.createElement(react_native_1.View, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },
321
+ shouldRenderContentStyles() ? (React.createElement(render_styles_1.default, { contentId: useContent === null || useContent === void 0 ? void 0 : useContent.id, cssCode: (_c = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _c === void 0 ? void 0 : _c.cssCode, customFonts: (_d = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _d === void 0 ? void 0 : _d.customFonts })) : null,
322
+ React.createElement(render_blocks_1.default, { blocks: (_e = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _e === void 0 ? void 0 : _e.blocks, key: forceReRenderCount })))) : null));
324
323
  }
325
324
  exports.default = RenderContent;
package/dist/components/render-content/render-content.types.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/dist/components/render-inlined-styles.js CHANGED
@@ -35,8 +35,8 @@ function RenderInlinedStyles(props) {
35
35
  // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
36
36
  return "sty" + "le";
37
37
  }
38
- return (React.createElement(React.Fragment, null, target_js_1.TARGET === "svelte" ? (React.createElement(React.Fragment, null,
39
- React.createElement(react_native_1.View, { dangerouslySetInnerHTML: { __html: injectedStyleScript() } }))) : (React.createElement(react_native_1.View, null,
38
+ return (React.createElement(React.Fragment, null, target_js_1.TARGET === "svelte" || target_js_1.TARGET === "qwik" ? (React.createElement(React.Fragment, null,
39
+ React.createElement(react_native_1.View, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(react_native_1.View, null,
40
40
  React.createElement(react_native_1.Text, null, props.styles)))));
41
41
  }
42
42
  exports.default = RenderInlinedStyles;
package/dist/constants/builder-registered-components.js CHANGED
@@ -20,27 +20,27 @@ var __spreadValues = (a, b) => {
20
20
  }
21
21
  return a;
22
22
  };
23
- const button_js_1 = __importDefault(require("../blocks/button/button.js"));
23
+ const button_1 = __importDefault(require("../blocks/button/button"));
24
24
  const component_info_1 = require("../blocks/button/component-info");
25
- const columns_js_1 = __importDefault(require("../blocks/columns/columns.js"));
25
+ const columns_1 = __importDefault(require("../blocks/columns/columns"));
26
26
  const component_info_2 = require("../blocks/columns/component-info");
27
27
  const component_info_3 = require("../blocks/fragment/component-info");
28
- const fragment_js_1 = __importDefault(require("../blocks/fragment/fragment.js"));
28
+ const fragment_1 = __importDefault(require("../blocks/fragment/fragment"));
29
29
  const component_info_4 = require("../blocks/image/component-info");
30
- const image_js_1 = __importDefault(require("../blocks/image/image.js"));
30
+ const image_1 = __importDefault(require("../blocks/image/image"));
31
31
  const component_info_5 = require("../blocks/section/component-info");
32
- const section_js_1 = __importDefault(require("../blocks/section/section.js"));
32
+ const section_1 = __importDefault(require("../blocks/section/section"));
33
33
  const component_info_6 = require("../blocks/symbol/component-info");
34
- const symbol_js_1 = __importDefault(require("../blocks/symbol/symbol.js"));
34
+ const symbol_1 = __importDefault(require("../blocks/symbol/symbol"));
35
35
  const component_info_7 = require("../blocks/text/component-info");
36
- const text_js_1 = __importDefault(require("../blocks/text/text.js"));
36
+ const text_1 = __importDefault(require("../blocks/text/text"));
37
37
  const getDefaultRegisteredComponents = () => [
38
- __spreadValues({ component: columns_js_1.default }, component_info_2.componentInfo),
39
- __spreadValues({ component: image_js_1.default }, component_info_4.componentInfo),
40
- __spreadValues({ component: text_js_1.default }, component_info_7.componentInfo),
41
- __spreadValues({ component: symbol_js_1.default }, component_info_6.componentInfo),
42
- __spreadValues({ component: button_js_1.default }, component_info_1.componentInfo),
43
- __spreadValues({ component: section_js_1.default }, component_info_5.componentInfo),
44
- __spreadValues({ component: fragment_js_1.default }, component_info_3.componentInfo)
38
+ __spreadValues({ component: columns_1.default }, component_info_2.componentInfo),
39
+ __spreadValues({ component: image_1.default }, component_info_4.componentInfo),
40
+ __spreadValues({ component: text_1.default }, component_info_7.componentInfo),
41
+ __spreadValues({ component: symbol_1.default }, component_info_6.componentInfo),
42
+ __spreadValues({ component: button_1.default }, component_info_1.componentInfo),
43
+ __spreadValues({ component: section_1.default }, component_info_5.componentInfo),
44
+ __spreadValues({ component: fragment_1.default }, component_info_3.componentInfo)
45
45
  ];
46
46
  exports.getDefaultRegisteredComponents = getDefaultRegisteredComponents;
package/dist/context/builder.context.js CHANGED
@@ -6,6 +6,8 @@ var stdin_default = (0, react_1.createContext)({
6
6
  content: null,
7
7
  context: {},
8
8
  state: {},
9
+ setState() {
10
+ },
9
11
  apiKey: null,
10
12
  registeredComponents: {},
11
13
  inheritedStyles: {}
package/dist/index-helpers/blocks-exports.js CHANGED
@@ -4,19 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Text = exports.Symbol = exports.Section = exports.RenderContent = exports.Image = exports.Fragment = exports.Columns = exports.Button = void 0;
7
- const columns_js_1 = __importDefault(require("../blocks/columns/columns.js"));
8
- Object.defineProperty(exports, "Columns", { enumerable: true, get: function () { return columns_js_1.default; } });
9
- const image_js_1 = __importDefault(require("../blocks/image/image.js"));
10
- Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return image_js_1.default; } });
11
- const text_js_1 = __importDefault(require("../blocks/text/text.js"));
12
- Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_js_1.default; } });
13
- const symbol_js_1 = __importDefault(require("../blocks/symbol/symbol.js"));
14
- Object.defineProperty(exports, "Symbol", { enumerable: true, get: function () { return symbol_js_1.default; } });
15
- const button_js_1 = __importDefault(require("../blocks/button/button.js"));
16
- Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_js_1.default; } });
17
- const section_js_1 = __importDefault(require("../blocks/section/section.js"));
18
- Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return section_js_1.default; } });
19
- const fragment_js_1 = __importDefault(require("../blocks/fragment/fragment.js"));
20
- Object.defineProperty(exports, "Fragment", { enumerable: true, get: function () { return fragment_js_1.default; } });
21
- const render_content_js_1 = __importDefault(require("../components/render-content/render-content.js"));
22
- Object.defineProperty(exports, "RenderContent", { enumerable: true, get: function () { return render_content_js_1.default; } });
7
+ const columns_1 = __importDefault(require("../blocks/columns/columns"));
8
+ Object.defineProperty(exports, "Columns", { enumerable: true, get: function () { return columns_1.default; } });
9
+ const image_1 = __importDefault(require("../blocks/image/image"));
10
+ Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return image_1.default; } });
11
+ const text_1 = __importDefault(require("../blocks/text/text"));
12
+ Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_1.default; } });
13
+ const symbol_1 = __importDefault(require("../blocks/symbol/symbol"));
14
+ Object.defineProperty(exports, "Symbol", { enumerable: true, get: function () { return symbol_1.default; } });
15
+ const button_1 = __importDefault(require("../blocks/button/button"));
16
+ Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.default; } });
17
+ const section_1 = __importDefault(require("../blocks/section/section"));
18
+ Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return section_1.default; } });
19
+ const fragment_1 = __importDefault(require("../blocks/fragment/fragment"));
20
+ Object.defineProperty(exports, "Fragment", { enumerable: true, get: function () { return fragment_1.default; } });
21
+ const render_content_1 = __importDefault(require("../components/render-content/render-content"));
22
+ Object.defineProperty(exports, "RenderContent", { enumerable: true, get: function () { return render_content_1.default; } });
package/dist/types/input.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@builder.io/sdk-react-native",
3
3
  "description": "Builder.io SDK for React Native",
4
- "version": "0.1.3",
4
+ "version": "0.1.5",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/src/blocks/columns/columns.jsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { View, StyleSheet, Image, Text } from "react-native";
3
- import RenderBlocks from "../../components/render-blocks.js";
3
+ import RenderBlocks from "../../components/render-blocks";
4
4
  import { getSizesForBreakpoints } from "../../constants/device-sizes";
5
- import RenderInlinedStyles from "../../components/render-inlined-styles.js";
5
+ import RenderInlinedStyles from "../../components/render-inlined-styles";
6
6
  import { TARGET } from "../../constants/target.js";
7
7
  import { convertStyleMapToCSS } from "../../helpers/css";
8
8
 
package/src/blocks/form/form.jsx CHANGED
@@ -2,8 +2,8 @@ import BaseText from "../BaseText";
2
2
  import * as React from "react";
3
3
  import { View, StyleSheet, Image, Text } from "react-native";
4
4
  import { useState, useContext, useRef } from "react";
5
- import RenderBlock from "../../components/render-block/render-block.js";
6
- import BuilderBlocks from "../../components/render-blocks.js";
5
+ import RenderBlock from "../../components/render-block/render-block";
6
+ import BuilderBlocks from "../../components/render-blocks";
7
7
  import { isEditing } from "../../functions/is-editing.js";
8
8
 
9
9
  export default function FormComponent(props) {
package/src/blocks/symbol/symbol.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { View, StyleSheet, Image, Text } from "react-native";
3
3
  import { useState, useContext, useEffect } from "react";
4
- import RenderContent from "../../components/render-content/render-content.js";
4
+ import RenderContent from "../../components/render-content/render-content";
5
5
  import BuilderContext from "../../context/builder.context.js";
6
6
  import { getContent } from "../../functions/get-content/index.js";
7
7
  import { TARGET } from "../../constants/target";
package/src/components/render-block/block-styles.jsx CHANGED
@@ -7,7 +7,7 @@ import {
7
7
  import { TARGET } from "../../constants/target.js";
8
8
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
9
9
  import { createCssClass } from "../../helpers/css.js";
10
- import RenderInlinedStyles from "../render-inlined-styles.js";
10
+ import RenderInlinedStyles from "../render-inlined-styles";
11
11
 
12
12
  export default function BlockStyles(props) {
13
13
  function useBlock() {
package/src/components/render-block/render-block.jsx CHANGED
@@ -6,16 +6,16 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
6
6
  import { getBlockProperties } from "../../functions/get-block-properties.js";
7
7
  import { getBlockTag } from "../../functions/get-block-tag.js";
8
8
  import { getProcessedBlock } from "../../functions/get-processed-block.js";
9
- import BlockStyles from "./block-styles.js";
9
+ import BlockStyles from "./block-styles";
10
10
  import {
11
11
  getComponent,
12
12
  getRepeatItemData,
13
13
  isEmptyHtmlElement,
14
14
  } from "./render-block.helpers.js";
15
- import RenderRepeatedBlock from "./render-repeated-block.js";
15
+ import RenderRepeatedBlock from "./render-repeated-block";
16
16
  import { TARGET } from "../../constants/target.js";
17
17
  import { extractTextStyles } from "../../functions/extract-text-styles.js";
18
- import RenderComponent from "./render-component.js";
18
+ import RenderComponent from "./render-component";
19
19
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
20
20
 
21
21
  export default function RenderBlock(props) {
@@ -41,10 +41,30 @@ export default function RenderBlock(props) {
41
41
  });
42
42
  }
43
43
 
44
+ function proxyState() {
45
+ if (typeof Proxy === "undefined") {
46
+ console.error(
47
+ "no Proxy available in this environment, cannot proxy state."
48
+ );
49
+ return props.context.state;
50
+ }
51
+ const useState = new Proxy(props.context.state, {
52
+ set: (obj, prop, value) => {
53
+ // set the value on the state object, so that the event handler instantly gets the update.
54
+ obj[prop] = value;
55
+
56
+ // set the value in the context, so that the rest of the app gets the update.
57
+ props.context.setState?.(obj);
58
+ return true;
59
+ },
60
+ });
61
+ return useState;
62
+ }
63
+
44
64
  function actions() {
45
65
  return getBlockActions({
46
66
  block: useBlock(),
47
- state: props.context.state,
67
+ state: proxyState(),
48
68
  context: props.context.context,
49
69
  });
50
70
  }
@@ -126,6 +146,7 @@ export default function RenderBlock(props) {
126
146
  state: props.context.state,
127
147
  content: props.context.content,
128
148
  context: props.context.context,
149
+ setState: props.context.setState,
129
150
  registeredComponents: props.context.registeredComponents,
130
151
  inheritedStyles: getInheritedTextStyles(),
131
152
  };
package/src/components/render-block/render-component.jsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { View, StyleSheet, Image, Text } from "react-native";
3
3
  import { useContext } from "react";
4
- import BlockStyles from "./block-styles.js";
5
- import RenderBlock from "./render-block.js";
4
+ import BlockStyles from "./block-styles";
5
+ import RenderBlock from "./render-block";
6
6
  import BuilderContext from "../../context/builder.context.js";
7
7
 
8
8
  export default function RenderComponent(props) {
package/src/components/render-block/render-repeated-block.jsx CHANGED
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { View, StyleSheet, Image, Text } from "react-native";
3
3
  import { useContext } from "react";
4
4
  import BuilderContext from "../../context/builder.context.js";
5
- import RenderBlock from "./render-block.js";
5
+ import RenderBlock from "./render-block";
6
6
 
7
7
  export default function RenderRepeatedBlock(props) {
8
8
  return (
@@ -10,6 +10,7 @@ export default function RenderRepeatedBlock(props) {
10
10
  value={{
11
11
  content: props.repeatContext.content,
12
12
  state: props.repeatContext.state,
13
+ setState: props.repeatContext.setState,
13
14
  context: props.repeatContext.context,
14
15
  apiKey: props.repeatContext.apiKey,
15
16
  registeredComponents: props.repeatContext.registeredComponents,
package/src/components/render-blocks.jsx CHANGED
@@ -3,8 +3,8 @@ import { View, StyleSheet, Image, Text } from "react-native";
3
3
  import { useContext } from "react";
4
4
  import BuilderContext from "../context/builder.context.js";
5
5
  import { isEditing } from "../functions/is-editing.js";
6
- import BlockStyles from "./render-block/block-styles.js";
7
- import RenderBlock from "./render-block/render-block.js";
6
+ import BlockStyles from "./render-block/block-styles";
7
+ import RenderBlock from "./render-block/render-block";
8
8
 
9
9
  export default function RenderBlocks(props) {
10
10
  function className() {
package/src/components/render-content/components/render-styles.helpers.js ADDED
@@ -0,0 +1,57 @@
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 = ({
43
+ cssCode,
44
+ contentId
45
+ }) => {
46
+ if (!cssCode) {
47
+ return "";
48
+ }
49
+ if (!contentId) {
50
+ return cssCode;
51
+ }
52
+ return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
53
+ };
54
+ export {
55
+ getCss,
56
+ getFontCss
57
+ };