@builder.io/sdk-react-native 0.0.1-4 → 0.0.1-40

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 (83) hide show
  1. package/package.json +6 -4
  2. package/src/blocks/button.js +73 -24
  3. package/src/blocks/button.lite.tsx +10 -14
  4. package/src/blocks/columns.js +258 -40
  5. package/src/blocks/columns.lite.tsx +7 -13
  6. package/src/blocks/custom-code.js +76 -47
  7. package/src/blocks/custom-code.lite.tsx +12 -12
  8. package/src/blocks/embed.js +69 -47
  9. package/src/blocks/embed.lite.tsx +11 -11
  10. package/src/blocks/form.js +491 -198
  11. package/src/blocks/form.lite.tsx +52 -56
  12. package/src/blocks/fragment.js +21 -0
  13. package/src/blocks/fragment.lite.tsx +10 -0
  14. package/src/blocks/image.js +89 -83
  15. package/src/blocks/image.lite.tsx +47 -14
  16. package/src/blocks/img.js +51 -28
  17. package/src/blocks/img.lite.tsx +6 -7
  18. package/src/blocks/input.js +100 -28
  19. package/src/blocks/input.lite.tsx +4 -7
  20. package/src/blocks/raw-text.js +16 -12
  21. package/src/blocks/raw-text.lite.tsx +2 -3
  22. package/src/blocks/section.js +71 -23
  23. package/src/blocks/section.lite.tsx +4 -5
  24. package/src/blocks/select.js +78 -27
  25. package/src/blocks/select.lite.tsx +8 -9
  26. package/src/blocks/submit-button.js +47 -21
  27. package/src/blocks/submit-button.lite.tsx +3 -4
  28. package/src/blocks/symbol.js +18 -16
  29. package/src/blocks/symbol.lite.tsx +5 -5
  30. package/src/blocks/text.js +85 -16
  31. package/src/blocks/text.lite.tsx +3 -4
  32. package/src/blocks/textarea.js +60 -24
  33. package/src/blocks/textarea.lite.tsx +2 -3
  34. package/src/blocks/video.js +97 -46
  35. package/src/blocks/video.lite.tsx +5 -6
  36. package/src/components/block-styles.js +5 -0
  37. package/src/components/block-styles.lite.tsx +6 -0
  38. package/src/components/error-boundary.js +27 -0
  39. package/src/components/error-boundary.lite.tsx +6 -0
  40. package/src/components/render-block.js +123 -38
  41. package/src/components/render-block.lite.tsx +70 -33
  42. package/src/components/render-blocks.js +61 -35
  43. package/src/components/render-blocks.lite.tsx +17 -14
  44. package/src/components/render-content.js +185 -36
  45. package/src/components/render-content.lite.tsx +144 -32
  46. package/src/constants/device-sizes.js +8 -11
  47. package/src/context/builder.context.js +2 -4
  48. package/src/functions/evaluate.js +18 -9
  49. package/src/functions/event-handler-name.js +6 -0
  50. package/src/functions/get-block-actions.js +13 -13
  51. package/src/functions/get-block-component-options.js +27 -4
  52. package/src/functions/get-block-properties.js +24 -16
  53. package/src/functions/get-block-styles.js +56 -9
  54. package/src/functions/get-block-tag.js +2 -4
  55. package/src/functions/get-content.js +72 -25
  56. package/src/functions/get-content.test.js +58 -0
  57. package/src/functions/get-fetch.js +11 -0
  58. package/src/functions/get-global-this.js +17 -0
  59. package/src/functions/get-processed-block.js +19 -13
  60. package/src/functions/get-processed-block.test.js +18 -14
  61. package/src/functions/get-target.js +3 -5
  62. package/src/functions/if-target.js +1 -3
  63. package/src/functions/is-browser.js +7 -5
  64. package/src/functions/is-editing.js +5 -5
  65. package/src/functions/is-iframe.js +2 -4
  66. package/src/functions/is-previewing.js +13 -0
  67. package/src/functions/is-react-native.js +2 -4
  68. package/src/functions/macro-eval.js +2 -5
  69. package/src/functions/on-change.js +4 -7
  70. package/src/functions/on-change.test.js +10 -10
  71. package/src/functions/previewing-model-name.js +10 -0
  72. package/src/functions/register-component.js +39 -27
  73. package/src/functions/register.js +28 -0
  74. package/src/functions/set-editor-settings.js +14 -0
  75. package/src/functions/set.js +14 -5
  76. package/src/functions/set.test.js +14 -14
  77. package/src/functions/track.js +6 -8
  78. package/src/functions/transform-block.js +40 -0
  79. package/src/index.js +18 -16
  80. package/src/scripts/init-editing.js +67 -29
  81. package/src/types/deep-partial.js +1 -0
  82. package/index.js +0 -11
  83. package/src/package.json +0 -18
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import { isPreviewing } from './is-previewing';
3
+ function previewingModelName() {
4
+ if (!isPreviewing()) {
5
+ return null;
6
+ }
7
+ const url = new URL(location.href);
8
+ return url.searchParams.get('builder.preview');
9
+ }
10
+ export { previewingModelName };
@@ -5,49 +5,61 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
5
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
7
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __defNormalProp = (obj, key, value) =>
9
+ key in obj
10
+ ? __defProp(obj, key, {
11
+ enumerable: true,
12
+ configurable: true,
13
+ writable: true,
14
+ value,
15
+ })
16
+ : (obj[key] = value);
9
17
  var __spreadValues = (a, b) => {
10
18
  for (var prop in b || (b = {}))
11
- if (__hasOwnProp.call(b, prop))
12
- __defNormalProp(a, prop, b[prop]);
19
+ if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
13
20
  if (__getOwnPropSymbols)
14
21
  for (var prop of __getOwnPropSymbols(b)) {
15
- if (__propIsEnum.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
22
+ if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
17
23
  }
18
24
  return a;
19
25
  };
20
26
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
- import { isBrowser } from "./is-browser";
27
+ import { isBrowser } from './is-browser';
22
28
  const components = {};
23
29
  function registerComponent(component, info) {
24
30
  var _a;
25
31
  components[info.name] = { component, info };
26
32
  if (isBrowser()) {
27
33
  const sendInfo = prepareComponentInfoToSend(info);
28
- (_a = window.parent) == null ? void 0 : _a.postMessage({
29
- type: "builder.registerComponent",
30
- data: sendInfo
31
- }, "*");
34
+ (_a = window.parent) == null
35
+ ? void 0
36
+ : _a.postMessage(
37
+ {
38
+ type: 'builder.registerComponent',
39
+ data: sendInfo,
40
+ },
41
+ '*'
42
+ );
32
43
  }
44
+ return component;
33
45
  }
34
46
  function prepareComponentInfoToSend(info) {
35
- return __spreadValues(__spreadValues({}, info), info.inputs && {
36
- inputs: info.inputs.map((input) => {
37
- const keysToConvertFnToString = ["onChange", "showIf"];
38
- for (const key of keysToConvertFnToString) {
39
- if (input[key] && typeof input[key] === "function") {
40
- const fn = input[key];
41
- input = __spreadProps(__spreadValues({}, input), {
42
- [key]: `return (${fn.toString()}).apply(this, arguments)`
43
- });
47
+ return __spreadValues(
48
+ __spreadValues({}, info),
49
+ info.inputs && {
50
+ inputs: info.inputs.map((input) => {
51
+ const keysToConvertFnToString = ['onChange', 'showIf'];
52
+ for (const key of keysToConvertFnToString) {
53
+ if (input[key] && typeof input[key] === 'function') {
54
+ const fn = input[key];
55
+ input = __spreadProps(__spreadValues({}, input), {
56
+ [key]: `return (${fn.toString()}).apply(this, arguments)`,
57
+ });
58
+ }
44
59
  }
45
- }
46
- return input;
47
- })
48
- });
60
+ return input;
61
+ }),
62
+ }
63
+ );
49
64
  }
50
- export {
51
- components,
52
- registerComponent
53
- };
65
+ export { components, registerComponent };
@@ -0,0 +1,28 @@
1
+ import * as React from 'react';
2
+ import { isBrowser } from './is-browser';
3
+ const registry = {};
4
+ function register(type, info) {
5
+ let typeList = registry[type];
6
+ if (!typeList) {
7
+ typeList = registry[type] = [];
8
+ }
9
+ typeList.push(info);
10
+ if (isBrowser()) {
11
+ const message = {
12
+ type: 'builder.register',
13
+ data: {
14
+ type,
15
+ info,
16
+ },
17
+ };
18
+ try {
19
+ parent.postMessage(message, '*');
20
+ if (parent !== window) {
21
+ window.postMessage(message, '*');
22
+ }
23
+ } catch (err) {
24
+ console.debug('Could not postmessage', err);
25
+ }
26
+ }
27
+ }
28
+ export { register };
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { isBrowser } from './is-browser';
3
+ const settings = {};
4
+ function setEditorSettings(newSettings) {
5
+ if (isBrowser()) {
6
+ Object.assign(settings, newSettings);
7
+ const message = {
8
+ type: 'builder.settingsChange',
9
+ data: settings,
10
+ };
11
+ parent.postMessage(message, '*');
12
+ }
13
+ }
14
+ export { setEditorSettings };
@@ -3,10 +3,19 @@ const set = (obj, _path, value) => {
3
3
  if (Object(obj) !== obj) {
4
4
  return obj;
5
5
  }
6
- const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
7
- path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
6
+ const path = Array.isArray(_path)
7
+ ? _path
8
+ : _path.toString().match(/[^.[\]]+/g);
9
+ path
10
+ .slice(0, -1)
11
+ .reduce(
12
+ (a, c, i) =>
13
+ Object(a[c]) === a[c]
14
+ ? a[c]
15
+ : (a[c] =
16
+ Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}),
17
+ obj
18
+ )[path[path.length - 1]] = value;
8
19
  return obj;
9
20
  };
10
- export {
11
- set
12
- };
21
+ export { set };
@@ -1,18 +1,18 @@
1
1
  import * as React from 'react';
2
- import { expect, test } from "@jest/globals";
3
- import { set } from "./set";
4
- test("can shallow set a property", () => {
5
- const obj = { foo: "bar" };
6
- set(obj, "foo", "baz");
7
- expect(obj.foo).toBe("baz");
2
+ import { expect, test } from '@jest/globals';
3
+ import { set } from './set';
4
+ test('can shallow set a property', () => {
5
+ const obj = { foo: 'bar' };
6
+ set(obj, 'foo', 'baz');
7
+ expect(obj.foo).toBe('baz');
8
8
  });
9
- test("can deeply set a property", () => {
10
- const obj = { foo: "bar" };
11
- set(obj, "foo.bar", "baz");
12
- expect(obj.foo.bar).toBe("baz");
9
+ test('can deeply set a property', () => {
10
+ const obj = { foo: 'bar' };
11
+ set(obj, 'foo.bar', 'baz');
12
+ expect(obj.foo.bar).toBe('baz');
13
13
  });
14
- test("can deeply create arrays", () => {
15
- const obj = { foo: "bar" };
16
- set(obj, "foo.bar.0", "hi");
17
- expect(obj.foo.bar).toEqual(["hi"]);
14
+ test('can deeply create arrays', () => {
15
+ const obj = { foo: 'bar' };
16
+ set(obj, 'foo.bar.0', 'hi');
17
+ expect(obj.foo.bar).toEqual(['hi']);
18
18
  });
@@ -1,19 +1,17 @@
1
1
  import * as React from 'react';
2
- import { isBrowser } from "./is-browser";
3
- import { isReactNative } from "./is-react-native";
2
+ import { isBrowser } from './is-browser';
3
+ import { isReactNative } from './is-react-native';
4
4
  function track(event, properties) {
5
5
  if (!isBrowser() || isReactNative()) {
6
6
  return;
7
7
  }
8
8
  return fetch(`https://builder.io/api/v1/track`, {
9
- method: "POST",
9
+ method: 'POST',
10
10
  body: JSON.stringify({ events: [{ type: event, data: properties }] }),
11
11
  headers: {
12
- "content-type": "application/json"
12
+ 'content-type': 'application/json',
13
13
  },
14
- mode: "cors"
14
+ mode: 'cors',
15
15
  });
16
16
  }
17
- export {
18
- track
19
- };
17
+ export { track };
@@ -0,0 +1,40 @@
1
+ import * as React from 'react';
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
+ var __defNormalProp = (obj, key, value) =>
9
+ key in obj
10
+ ? __defProp(obj, key, {
11
+ enumerable: true,
12
+ configurable: true,
13
+ writable: true,
14
+ value,
15
+ })
16
+ : (obj[key] = value);
17
+ var __spreadValues = (a, b) => {
18
+ for (var prop in b || (b = {}))
19
+ if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
20
+ if (__getOwnPropSymbols)
21
+ for (var prop of __getOwnPropSymbols(b)) {
22
+ if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
23
+ }
24
+ return a;
25
+ };
26
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
27
+ function transformBlock(block) {
28
+ if (block.id.startsWith('builder-pixel-')) {
29
+ return __spreadProps(__spreadValues({}, block), {
30
+ component: {
31
+ name: 'Image',
32
+ options: {
33
+ image: block.properties.src,
34
+ },
35
+ },
36
+ });
37
+ }
38
+ return block;
39
+ }
40
+ export { transformBlock };
package/src/index.js CHANGED
@@ -1,24 +1,26 @@
1
1
  import * as React from 'react';
2
- import { isEditing } from "./functions/is-editing";
2
+ import { isEditing } from './functions/is-editing';
3
3
  if (isEditing()) {
4
- import("./scripts/init-editing");
4
+ import('./scripts/init-editing');
5
5
  }
6
- import { default as default2 } from "./blocks/columns";
7
- import { default as default3 } from "./blocks/image";
8
- import { default as default4 } from "./blocks/text";
9
- import { default as default5 } from "./blocks/video";
10
- import { default as default6 } from "./blocks/symbol";
11
- import { default as default7 } from "./blocks/button";
12
- import { default as default8 } from "./blocks/section";
13
- import { default as default9 } from "./components/render-content";
14
- export * from "./functions/register-component";
6
+ import { default as default2 } from './blocks/columns';
7
+ import { default as default3 } from './blocks/image';
8
+ import { default as default4 } from './blocks/text';
9
+ import { default as default5 } from './blocks/symbol';
10
+ import { default as default6 } from './blocks/section';
11
+ import { default as default7 } from './blocks/fragment';
12
+ import { default as default8 } from './components/render-content';
13
+ export * from './functions/is-editing';
14
+ export * from './functions/register-component';
15
+ export * from './functions/register';
16
+ export * from './functions/set-editor-settings';
17
+ export * from './functions/get-content';
15
18
  export {
16
- default7 as Button,
17
19
  default2 as Columns,
20
+ default7 as Fragment,
18
21
  default3 as Image,
19
- default9 as RenderContent,
20
- default8 as Section,
21
- default6 as Symbol,
22
+ default8 as RenderContent,
23
+ default6 as Section,
24
+ default5 as Symbol,
22
25
  default4 as Text,
23
- default5 as Video
24
26
  };
@@ -1,22 +1,43 @@
1
1
  import * as React from 'react';
2
2
  var _a;
3
- import { getTarget } from "../functions/get-target";
4
- import { isBrowser } from "../functions/is-browser";
3
+ import { isBrowser } from '../functions/is-browser';
4
+ import { register } from '../functions/register';
5
+ register('insertMenu', {
6
+ name: '_default',
7
+ default: true,
8
+ items: [
9
+ { name: 'Box' },
10
+ { name: 'Text' },
11
+ { name: 'Image' },
12
+ { name: 'Columns' },
13
+ ...(true
14
+ ? []
15
+ : [
16
+ { name: 'Core:Section' },
17
+ { name: 'Core:Button' },
18
+ { name: 'Embed' },
19
+ { name: 'Custom Code' },
20
+ ]),
21
+ ],
22
+ });
5
23
  if (isBrowser()) {
6
- (_a = window.parent) == null ? void 0 : _a.postMessage({
7
- type: "builder.sdkInfo",
8
- data: {
9
- target: getTarget(),
10
- type: process.env.SDK_TYPE,
11
- version: process.env.SDK_VERSION,
12
- supportsPatchUpdates: false
13
- }
14
- }, "*");
15
- window.addEventListener("message", ({ data }) => {
24
+ (_a = window.parent) == null
25
+ ? void 0
26
+ : _a.postMessage(
27
+ {
28
+ type: 'builder.sdkInfo',
29
+ data: {
30
+ target: 'reactNative',
31
+ supportsPatchUpdates: false,
32
+ },
33
+ },
34
+ '*'
35
+ );
36
+ window.addEventListener('message', ({ data }) => {
16
37
  var _a2, _b;
17
38
  if (data) {
18
39
  switch (data.type) {
19
- case "builder.evaluate": {
40
+ case 'builder.evaluate': {
20
41
  const text = data.data.text;
21
42
  const args = data.data.arguments || [];
22
43
  const id = data.data.id;
@@ -29,24 +50,41 @@ if (isBrowser()) {
29
50
  error = err;
30
51
  }
31
52
  if (error) {
32
- (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
33
- type: "builder.evaluateError",
34
- data: { id, error: error.message }
35
- }, "*");
53
+ (_a2 = window.parent) == null
54
+ ? void 0
55
+ : _a2.postMessage(
56
+ {
57
+ type: 'builder.evaluateError',
58
+ data: { id, error: error.message },
59
+ },
60
+ '*'
61
+ );
36
62
  } else {
37
- if (result && typeof result.then === "function") {
38
- result.then((finalResult) => {
39
- var _a3;
40
- (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
41
- type: "builder.evaluateResult",
42
- data: { id, result: finalResult }
43
- }, "*");
44
- }).catch(console.error);
63
+ if (result && typeof result.then === 'function') {
64
+ result
65
+ .then((finalResult) => {
66
+ var _a3;
67
+ (_a3 = window.parent) == null
68
+ ? void 0
69
+ : _a3.postMessage(
70
+ {
71
+ type: 'builder.evaluateResult',
72
+ data: { id, result: finalResult },
73
+ },
74
+ '*'
75
+ );
76
+ })
77
+ .catch(console.error);
45
78
  } else {
46
- (_b = window.parent) == null ? void 0 : _b.postMessage({
47
- type: "builder.evaluateResult",
48
- data: { result, id }
49
- }, "*");
79
+ (_b = window.parent) == null
80
+ ? void 0
81
+ : _b.postMessage(
82
+ {
83
+ type: 'builder.evaluateResult',
84
+ data: { result, id },
85
+ },
86
+ '*'
87
+ );
50
88
  }
51
89
  }
52
90
  break;
@@ -0,0 +1 @@
1
+ import * as React from 'react';
package/index.js DELETED
@@ -1,11 +0,0 @@
1
- import { isEditing } from './src/functions/is-editing';
2
-
3
- if (isEditing()) {
4
- import('./src/scripts/init-editing');
5
- }
6
-
7
- // TODO: lazy option
8
- export { default as Columns } from './src/blocks/columns';
9
- export { default as Image } from './src/blocks/image';
10
- export { default as Text } from './src/blocks/text';
11
- export { default as RenderContent } from './src/components/render-content';
package/src/package.json DELETED
@@ -1,18 +0,0 @@
1
- {
2
- "name": "@builder.io/sdk-react-native",
3
- "description": "Builder.io SDK for React Native",
4
- "version": "0.0.1-1",
5
- "main": "src/index.js",
6
- "scripts": {
7
- "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
8
- },
9
- "dependencies": {
10
- "react-native-render-html": "^5.1.1"
11
- },
12
- "peerDependencies": {
13
- "react-native": "^0.64.2"
14
- },
15
- "devDependencies": {
16
- "react-native": "^0.64.2"
17
- }
18
- }