@builder.io/react 8.0.6-0 → 8.0.6-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/package.json +1 -1
  2. package/src/components/builder-block.component.tsx +1 -0
  3. package/src/constants/device-sizes.constant.ts +22 -15
  4. package/dist/builder-react-lite.cjs.js +0 -2
  5. package/dist/builder-react-lite.cjs.js.map +0 -1
  6. package/dist/builder-react-lite.esm.js +0 -2
  7. package/dist/builder-react-lite.esm.js.map +0 -1
  8. package/dist/builder-react.browser.js +0 -11
  9. package/dist/builder-react.browser.js.map +0 -1
  10. package/dist/builder-react.cjs.js +0 -2
  11. package/dist/builder-react.cjs.js.map +0 -1
  12. package/dist/builder-react.es5.js +0 -2
  13. package/dist/builder-react.es5.js.map +0 -1
  14. package/dist/builder-react.unpkg.js +0 -11
  15. package/dist/builder-react.unpkg.js.map +0 -1
  16. package/dist/lib/lib/on-change.js +0 -228
  17. package/dist/lib/lib/on-change.js.map +0 -1
  18. package/dist/lib/package.json +0 -109
  19. package/dist/lib/rollup.config.js +0 -131
  20. package/dist/lib/rollup.config.js.map +0 -1
  21. package/dist/lib/src/blocks/Button.js +0 -86
  22. package/dist/lib/src/blocks/Button.js.map +0 -1
  23. package/dist/lib/src/blocks/Columns.js +0 -243
  24. package/dist/lib/src/blocks/Columns.js.map +0 -1
  25. package/dist/lib/src/blocks/CustomCode.js +0 -227
  26. package/dist/lib/src/blocks/CustomCode.js.map +0 -1
  27. package/dist/lib/src/blocks/Embed.js +0 -114
  28. package/dist/lib/src/blocks/Embed.js.map +0 -1
  29. package/dist/lib/src/blocks/Fragment.js +0 -45
  30. package/dist/lib/src/blocks/Fragment.js.map +0 -1
  31. package/dist/lib/src/blocks/Image.js +0 -532
  32. package/dist/lib/src/blocks/Image.js.map +0 -1
  33. package/dist/lib/src/blocks/Mutation.js +0 -93
  34. package/dist/lib/src/blocks/Mutation.js.map +0 -1
  35. package/dist/lib/src/blocks/PersonalizationContainer.js +0 -174
  36. package/dist/lib/src/blocks/PersonalizationContainer.js.map +0 -1
  37. package/dist/lib/src/blocks/Router.js +0 -354
  38. package/dist/lib/src/blocks/Router.js.map +0 -1
  39. package/dist/lib/src/blocks/Section.js +0 -150
  40. package/dist/lib/src/blocks/Section.js.map +0 -1
  41. package/dist/lib/src/blocks/Slot.js +0 -41
  42. package/dist/lib/src/blocks/Slot.js.map +0 -1
  43. package/dist/lib/src/blocks/StateProvider.js +0 -61
  44. package/dist/lib/src/blocks/StateProvider.js.map +0 -1
  45. package/dist/lib/src/blocks/Symbol.js +0 -192
  46. package/dist/lib/src/blocks/Symbol.js.map +0 -1
  47. package/dist/lib/src/blocks/Text.js +0 -132
  48. package/dist/lib/src/blocks/Text.js.map +0 -1
  49. package/dist/lib/src/blocks/Video.js +0 -261
  50. package/dist/lib/src/blocks/Video.js.map +0 -1
  51. package/dist/lib/src/blocks/forms/Button.js +0 -74
  52. package/dist/lib/src/blocks/forms/Button.js.map +0 -1
  53. package/dist/lib/src/blocks/forms/Form.js +0 -590
  54. package/dist/lib/src/blocks/forms/Form.js.map +0 -1
  55. package/dist/lib/src/blocks/forms/Input.js +0 -133
  56. package/dist/lib/src/blocks/forms/Input.js.map +0 -1
  57. package/dist/lib/src/blocks/forms/Label.js +0 -81
  58. package/dist/lib/src/blocks/forms/Label.js.map +0 -1
  59. package/dist/lib/src/blocks/forms/Select.js +0 -104
  60. package/dist/lib/src/blocks/forms/Select.js.map +0 -1
  61. package/dist/lib/src/blocks/forms/TextArea.js +0 -89
  62. package/dist/lib/src/blocks/forms/TextArea.js.map +0 -1
  63. package/dist/lib/src/blocks/raw/Img.js +0 -66
  64. package/dist/lib/src/blocks/raw/Img.js.map +0 -1
  65. package/dist/lib/src/blocks/raw/RawText.js +0 -47
  66. package/dist/lib/src/blocks/raw/RawText.js.map +0 -1
  67. package/dist/lib/src/builder-react-lite.js +0 -31
  68. package/dist/lib/src/builder-react-lite.js.map +0 -1
  69. package/dist/lib/src/builder-react.js +0 -106
  70. package/dist/lib/src/builder-react.js.map +0 -1
  71. package/dist/lib/src/components/Link.js +0 -35
  72. package/dist/lib/src/components/Link.js.map +0 -1
  73. package/dist/lib/src/components/builder-block.component.js +0 -555
  74. package/dist/lib/src/components/builder-block.component.js.map +0 -1
  75. package/dist/lib/src/components/builder-blocks.component.js +0 -167
  76. package/dist/lib/src/components/builder-blocks.component.js.map +0 -1
  77. package/dist/lib/src/components/builder-component.component.js +0 -1126
  78. package/dist/lib/src/components/builder-component.component.js.map +0 -1
  79. package/dist/lib/src/components/builder-content.component.js +0 -321
  80. package/dist/lib/src/components/builder-content.component.js.map +0 -1
  81. package/dist/lib/src/components/insert-spacer.component.js +0 -106
  82. package/dist/lib/src/components/insert-spacer.component.js.map +0 -1
  83. package/dist/lib/src/components/no-wrap.js +0 -7
  84. package/dist/lib/src/components/no-wrap.js.map +0 -1
  85. package/dist/lib/src/components/variants-provider.component.js +0 -108
  86. package/dist/lib/src/components/variants-provider.component.js.map +0 -1
  87. package/dist/lib/src/constants/device-sizes.constant.js +0 -86
  88. package/dist/lib/src/constants/device-sizes.constant.js.map +0 -1
  89. package/dist/lib/src/constants/file-types.constant.js +0 -72
  90. package/dist/lib/src/constants/file-types.constant.js.map +0 -1
  91. package/dist/lib/src/decorators/builder-block.decorator.js +0 -10
  92. package/dist/lib/src/decorators/builder-block.decorator.js.map +0 -1
  93. package/dist/lib/src/functions/apply-patch-with-mutation.js +0 -80
  94. package/dist/lib/src/functions/apply-patch-with-mutation.js.map +0 -1
  95. package/dist/lib/src/functions/apply-patch-with-mutation.test.js +0 -54
  96. package/dist/lib/src/functions/apply-patch-with-mutation.test.js.map +0 -1
  97. package/dist/lib/src/functions/block-to-html-string.js +0 -21
  98. package/dist/lib/src/functions/block-to-html-string.js.map +0 -1
  99. package/dist/lib/src/functions/debonce-next-tick.js +0 -43
  100. package/dist/lib/src/functions/debonce-next-tick.js.map +0 -1
  101. package/dist/lib/src/functions/extract-localized-values.js +0 -35
  102. package/dist/lib/src/functions/extract-localized-values.js.map +0 -1
  103. package/dist/lib/src/functions/filter-with-custom-targeting.js +0 -88
  104. package/dist/lib/src/functions/filter-with-custom-targeting.js.map +0 -1
  105. package/dist/lib/src/functions/get-builder-pixel.js +0 -27
  106. package/dist/lib/src/functions/get-builder-pixel.js.map +0 -1
  107. package/dist/lib/src/functions/get.js +0 -12
  108. package/dist/lib/src/functions/get.js.map +0 -1
  109. package/dist/lib/src/functions/is-debug.js +0 -8
  110. package/dist/lib/src/functions/is-debug.js.map +0 -1
  111. package/dist/lib/src/functions/no-wrap.js +0 -60
  112. package/dist/lib/src/functions/no-wrap.js.map +0 -1
  113. package/dist/lib/src/functions/safe-dynamic-require.js +0 -51
  114. package/dist/lib/src/functions/safe-dynamic-require.js.map +0 -1
  115. package/dist/lib/src/functions/set.js +0 -21
  116. package/dist/lib/src/functions/set.js.map +0 -1
  117. package/dist/lib/src/functions/should-force-browser-runtime-in-node.js +0 -22
  118. package/dist/lib/src/functions/should-force-browser-runtime-in-node.js.map +0 -1
  119. package/dist/lib/src/functions/string-to-function.js +0 -166
  120. package/dist/lib/src/functions/string-to-function.js.map +0 -1
  121. package/dist/lib/src/functions/throttle.js +0 -42
  122. package/dist/lib/src/functions/throttle.js.map +0 -1
  123. package/dist/lib/src/functions/traverse.js +0 -72
  124. package/dist/lib/src/functions/traverse.js.map +0 -1
  125. package/dist/lib/src/functions/try-eval.js +0 -75
  126. package/dist/lib/src/functions/try-eval.js.map +0 -1
  127. package/dist/lib/src/functions/update-metadata.js +0 -42
  128. package/dist/lib/src/functions/update-metadata.js.map +0 -1
  129. package/dist/lib/src/functions/utils.js +0 -20
  130. package/dist/lib/src/functions/utils.js.map +0 -1
  131. package/dist/lib/src/functions/with-builder.js +0 -10
  132. package/dist/lib/src/functions/with-builder.js.map +0 -1
  133. package/dist/lib/src/functions/with-children.js +0 -77
  134. package/dist/lib/src/functions/with-children.js.map +0 -1
  135. package/dist/lib/src/hooks/useIsPreviewing.js +0 -16
  136. package/dist/lib/src/hooks/useIsPreviewing.js.map +0 -1
  137. package/dist/lib/src/scripts/init-editing.js +0 -18
  138. package/dist/lib/src/scripts/init-editing.js.map +0 -1
  139. package/dist/lib/src/sdk-version.js +0 -5
  140. package/dist/lib/src/sdk-version.js.map +0 -1
  141. package/dist/lib/src/store/builder-async-requests.js +0 -19
  142. package/dist/lib/src/store/builder-async-requests.js.map +0 -1
  143. package/dist/lib/src/store/builder-meta.js +0 -13
  144. package/dist/lib/src/store/builder-meta.js.map +0 -1
  145. package/dist/lib/src/store/builder-store.js +0 -15
  146. package/dist/lib/src/store/builder-store.js.map +0 -1
  147. package/dist/lib/src/to-error.js +0 -22
  148. package/dist/lib/src/to-error.js.map +0 -1
  149. package/dist/lib/test/basic.test.js +0 -212
  150. package/dist/lib/test/basic.test.js.map +0 -1
  151. package/dist/lib/test/functions/render-block.js +0 -24
  152. package/dist/lib/test/functions/render-block.js.map +0 -1
  153. package/dist/lib/test/image.test.js +0 -107
  154. package/dist/lib/test/image.test.js.map +0 -1
  155. package/dist/lib/test/setupTests.js +0 -8
  156. package/dist/lib/test/setupTests.js.map +0 -1
  157. package/dist/types/lib/on-change.d.ts +0 -8
  158. package/dist/types/rollup.config.d.ts +0 -44
  159. package/dist/types/src/blocks/Button.d.ts +0 -7
  160. package/dist/types/src/blocks/Columns.d.ts +0 -1
  161. package/dist/types/src/blocks/CustomCode.d.ts +0 -1
  162. package/dist/types/src/blocks/Embed.d.ts +0 -1
  163. package/dist/types/src/blocks/Fragment.d.ts +0 -5
  164. package/dist/types/src/blocks/Image.d.ts +0 -6
  165. package/dist/types/src/blocks/Mutation.d.ts +0 -8
  166. package/dist/types/src/blocks/PersonalizationContainer.d.ts +0 -19
  167. package/dist/types/src/blocks/Router.d.ts +0 -32
  168. package/dist/types/src/blocks/Section.d.ts +0 -1
  169. package/dist/types/src/blocks/Slot.d.ts +0 -5
  170. package/dist/types/src/blocks/StateProvider.d.ts +0 -1
  171. package/dist/types/src/blocks/Symbol.d.ts +0 -19
  172. package/dist/types/src/blocks/Text.d.ts +0 -6
  173. package/dist/types/src/blocks/Video.d.ts +0 -1
  174. package/dist/types/src/blocks/forms/Button.d.ts +0 -5
  175. package/dist/types/src/blocks/forms/Form.d.ts +0 -24
  176. package/dist/types/src/blocks/forms/Input.d.ts +0 -10
  177. package/dist/types/src/blocks/forms/Label.d.ts +0 -8
  178. package/dist/types/src/blocks/forms/Select.d.ts +0 -12
  179. package/dist/types/src/blocks/forms/TextArea.d.ts +0 -9
  180. package/dist/types/src/blocks/raw/Img.d.ts +0 -7
  181. package/dist/types/src/blocks/raw/RawText.d.ts +0 -8
  182. package/dist/types/src/builder-react-lite.d.ts +0 -17
  183. package/dist/types/src/builder-react.d.ts +0 -45
  184. package/dist/types/src/components/Link.d.ts +0 -9
  185. package/dist/types/src/components/builder-block.component.d.ts +0 -50
  186. package/dist/types/src/components/builder-blocks.component.d.ts +0 -29
  187. package/dist/types/src/components/builder-component.component.d.ts +0 -324
  188. package/dist/types/src/components/builder-content.component.d.ts +0 -271
  189. package/dist/types/src/components/insert-spacer.component.d.ts +0 -13
  190. package/dist/types/src/components/no-wrap.d.ts +0 -2
  191. package/dist/types/src/components/variants-provider.component.d.ts +0 -8
  192. package/dist/types/src/constants/device-sizes.constant.d.ts +0 -57
  193. package/dist/types/src/constants/file-types.constant.d.ts +0 -2
  194. package/dist/types/src/decorators/builder-block.decorator.d.ts +0 -5
  195. package/dist/types/src/functions/apply-patch-with-mutation.d.ts +0 -5
  196. package/dist/types/src/functions/apply-patch-with-mutation.test.d.ts +0 -1
  197. package/dist/types/src/functions/block-to-html-string.d.ts +0 -3
  198. package/dist/types/src/functions/debonce-next-tick.d.ts +0 -2
  199. package/dist/types/src/functions/extract-localized-values.d.ts +0 -2
  200. package/dist/types/src/functions/filter-with-custom-targeting.d.ts +0 -15
  201. package/dist/types/src/functions/get-builder-pixel.d.ts +0 -2
  202. package/dist/types/src/functions/get.d.ts +0 -1
  203. package/dist/types/src/functions/is-debug.d.ts +0 -1
  204. package/dist/types/src/functions/no-wrap.d.ts +0 -33
  205. package/dist/types/src/functions/safe-dynamic-require.d.ts +0 -3
  206. package/dist/types/src/functions/set.d.ts +0 -1
  207. package/dist/types/src/functions/should-force-browser-runtime-in-node.d.ts +0 -1
  208. package/dist/types/src/functions/string-to-function.d.ts +0 -7
  209. package/dist/types/src/functions/throttle.d.ts +0 -1
  210. package/dist/types/src/functions/traverse.d.ts +0 -34
  211. package/dist/types/src/functions/try-eval.d.ts +0 -1
  212. package/dist/types/src/functions/update-metadata.d.ts +0 -17
  213. package/dist/types/src/functions/utils.d.ts +0 -2
  214. package/dist/types/src/functions/with-builder.d.ts +0 -2
  215. package/dist/types/src/functions/with-children.d.ts +0 -29
  216. package/dist/types/src/hooks/useIsPreviewing.d.ts +0 -1
  217. package/dist/types/src/scripts/init-editing.d.ts +0 -1
  218. package/dist/types/src/sdk-version.d.ts +0 -1
  219. package/dist/types/src/store/builder-async-requests.d.ts +0 -13
  220. package/dist/types/src/store/builder-meta.d.ts +0 -6
  221. package/dist/types/src/store/builder-store.d.ts +0 -10
  222. package/dist/types/src/to-error.d.ts +0 -13
  223. package/dist/types/test/basic.test.d.ts +0 -4
  224. package/dist/types/test/functions/render-block.d.ts +0 -3
  225. package/dist/types/test/image.test.d.ts +0 -1
  226. package/dist/types/test/setupTests.d.ts +0 -0
@@ -1,1126 +0,0 @@
1
- "use strict";
2
- 'use client';
3
- var __extends = (this && this.__extends) || (function () {
4
- var extendStatics = function (d, b) {
5
- extendStatics = Object.setPrototypeOf ||
6
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
7
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
8
- return extendStatics(d, b);
9
- };
10
- return function (d, b) {
11
- if (typeof b !== "function" && b !== null)
12
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
13
- extendStatics(d, b);
14
- function __() { this.constructor = d; }
15
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
16
- };
17
- })();
18
- var __assign = (this && this.__assign) || function () {
19
- __assign = Object.assign || function(t) {
20
- for (var s, i = 1, n = arguments.length; i < n; i++) {
21
- s = arguments[i];
22
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
23
- t[p] = s[p];
24
- }
25
- return t;
26
- };
27
- return __assign.apply(this, arguments);
28
- };
29
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
30
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
31
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
32
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
33
- return c > 3 && r && Object.defineProperty(target, key, r), r;
34
- };
35
- var __metadata = (this && this.__metadata) || function (k, v) {
36
- if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
37
- };
38
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
39
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
40
- return new (P || (P = Promise))(function (resolve, reject) {
41
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
42
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
43
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
44
- step((generator = generator.apply(thisArg, _arguments || [])).next());
45
- });
46
- };
47
- var __generator = (this && this.__generator) || function (thisArg, body) {
48
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
49
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
50
- function verb(n) { return function (v) { return step([n, v]); }; }
51
- function step(op) {
52
- if (f) throw new TypeError("Generator is already executing.");
53
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
54
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
55
- if (y = 0, t) op = [op[0] & 2, t.value];
56
- switch (op[0]) {
57
- case 0: case 1: t = op; break;
58
- case 4: _.label++; return { value: op[1], done: false };
59
- case 5: _.label++; y = op[1]; op = [0]; continue;
60
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
61
- default:
62
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
63
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
64
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
65
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
66
- if (t[2]) _.ops.pop();
67
- _.trys.pop(); continue;
68
- }
69
- op = body.call(thisArg, _);
70
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
71
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
72
- }
73
- };
74
- var __rest = (this && this.__rest) || function (s, e) {
75
- var t = {};
76
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
77
- t[p] = s[p];
78
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
79
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
80
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
81
- t[p[i]] = s[p[i]];
82
- }
83
- return t;
84
- };
85
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
86
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
87
- if (ar || !(i in from)) {
88
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
89
- ar[i] = from[i];
90
- }
91
- }
92
- return to.concat(ar || Array.prototype.slice.call(from));
93
- };
94
- var __importDefault = (this && this.__importDefault) || function (mod) {
95
- return (mod && mod.__esModule) ? mod : { "default": mod };
96
- };
97
- Object.defineProperty(exports, "__esModule", { value: true });
98
- exports.BuilderComponent = exports.onChange = void 0;
99
- var react_1 = __importDefault(require("react"));
100
- var react_dom_1 = __importDefault(require("react-dom"));
101
- var core_1 = require("@emotion/core");
102
- var builder_content_component_1 = require("./builder-content.component");
103
- var builder_blocks_component_1 = require("./builder-blocks.component");
104
- var sdk_1 = require("@builder.io/sdk");
105
- var builder_store_1 = require("../store/builder-store");
106
- var hash_sum_1 = __importDefault(require("hash-sum"));
107
- var on_change_1 = __importDefault(require("../../lib/on-change"));
108
- exports.onChange = on_change_1.default;
109
- var device_sizes_constant_1 = require("../constants/device-sizes.constant");
110
- var builder_async_requests_1 = require("../store/builder-async-requests");
111
- var debonce_next_tick_1 = require("../functions/debonce-next-tick");
112
- var throttle_1 = require("../functions/throttle");
113
- var builder_meta_1 = require("../store/builder-meta");
114
- var try_eval_1 = require("../functions/try-eval");
115
- var to_error_1 = require("../to-error");
116
- var get_builder_pixel_1 = require("../functions/get-builder-pixel");
117
- var is_debug_1 = require("../functions/is-debug");
118
- function pick(obj) {
119
- var keys = [];
120
- for (var _i = 1; _i < arguments.length; _i++) {
121
- keys[_i - 1] = arguments[_i];
122
- }
123
- var ret = {};
124
- keys.forEach(function (key) {
125
- ret[key] = obj[key];
126
- });
127
- return ret;
128
- }
129
- function omit(obj) {
130
- var keys = [];
131
- for (var _i = 1; _i < arguments.length; _i++) {
132
- keys[_i - 1] = arguments[_i];
133
- }
134
- var ret = __assign({}, obj);
135
- keys.forEach(function (key) {
136
- delete ret[key];
137
- });
138
- return ret;
139
- }
140
- var instancesMap = new Map();
141
- var wrapComponent = function (info) {
142
- return function (props) {
143
- var _a;
144
- // TODO: convention for all of this, like builderTagProps={{ style: {} foo: 'bar' }}
145
- var Tag = props.builderTag || 'div';
146
- var inputNames = ['children'].concat(((_a = info.inputs) === null || _a === void 0 ? void 0 : _a.map(function (item) { return item.name; })) || []);
147
- var baseProps = omit.apply(void 0, __spreadArray(__spreadArray([props], inputNames, false), ['attributes'], false));
148
- var inputProps = props; // pick(props, ...inputNames);
149
- if (info.noWrap) {
150
- return react_1.default.createElement(info.class, __assign({ attributes: baseProps }, inputProps));
151
- }
152
- return (react_1.default.createElement(Tag, __assign({}, baseProps),
153
- react_1.default.createElement(info.class, __assign({}, inputProps))));
154
- };
155
- };
156
- var size = function (thing) { return Object.keys(thing).length; };
157
- function debounce(func, wait, immediate) {
158
- if (immediate === void 0) { immediate = false; }
159
- var timeout;
160
- return function () {
161
- var context = this;
162
- var args = arguments;
163
- clearTimeout(timeout);
164
- timeout = setTimeout(function () {
165
- timeout = null;
166
- if (!immediate)
167
- func.apply(context, args);
168
- }, wait);
169
- if (immediate && !timeout)
170
- func.apply(context, args);
171
- };
172
- }
173
- var fontsLoaded = new Set();
174
- var fetch;
175
- if (globalThis.fetch)
176
- fetch = globalThis.fetch;
177
- fetch !== null && fetch !== void 0 ? fetch : (fetch = require('node-fetch'));
178
- var sizeMap = {
179
- desktop: 'large',
180
- tablet: 'medium',
181
- mobile: 'small',
182
- xsmall: 'xsmall',
183
- };
184
- var fetchCache = {};
185
- function searchToObject(location) {
186
- var pairs = (location.search || '').substring(1).split('&');
187
- var obj = {};
188
- for (var i in pairs) {
189
- if (!(pairs[i] && typeof pairs[i] === 'string')) {
190
- continue;
191
- }
192
- var pair = pairs[i].split('=');
193
- obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
194
- }
195
- return obj;
196
- }
197
- /**
198
- * Responsible for rendering Builder content of type: 'page' or 'section' to
199
- * react components. It will attempt to fetch content from the API based on
200
- * defined user attributes (URL path, device type, and any custom targeting you set using `builder.setUserAttributes`) unless a `BuilderContent`
201
- * object is provided to `props.content`
202
- *
203
- * Use it to mount content in desired location, enable editing in place when
204
- * previewed in the editor.
205
- *
206
- * Supports server-side-rendering when passed the content json as
207
- * `props.content`.
208
- */
209
- var BuilderComponent = /** @class */ (function (_super) {
210
- __extends(BuilderComponent, _super);
211
- function BuilderComponent(props) {
212
- var _this = this;
213
- var _a, _b;
214
- _this = _super.call(this, props) || this;
215
- _this.subscriptions = new sdk_1.Subscription();
216
- // TODO: don't trigger initial one?
217
- _this.onStateChange = new sdk_1.BehaviorSubject(null);
218
- _this.asServer = sdk_1.Builder.isServer;
219
- _this.contentRef = null;
220
- _this.styleRef = null;
221
- _this.rootState = sdk_1.Builder.isServer ? {} : (0, on_change_1.default)({}, function () { return _this.updateState(); });
222
- _this.lastJsCode = '';
223
- _this.lastHttpRequests = {};
224
- _this.httpSubscriptionPerKey = {};
225
- _this.firstLoad = true;
226
- _this.ref = null;
227
- _this.messageListener = function (event) {
228
- var _a;
229
- var isTrusted = sdk_1.Builder.isTrustedHostForEvent(event);
230
- if (!isTrusted)
231
- return;
232
- var info = event.data;
233
- switch (info.type) {
234
- case 'builder.configureSdk': {
235
- var data = info.data;
236
- if (!data.contentId || data.contentId !== ((_a = _this.useContent) === null || _a === void 0 ? void 0 : _a.id)) {
237
- return;
238
- }
239
- _this.sizes = (0, device_sizes_constant_1.getSizesForBreakpoints)(data.breakpoints || {});
240
- _this.setState({
241
- state: Object.assign(_this.rootState, {
242
- deviceSize: _this.deviceSizeState,
243
- // TODO: will user attributes be ready here?
244
- device: _this.device,
245
- }),
246
- updates: ((_this.state && _this.state.updates) || 0) + 1,
247
- breakpoints: data.breakpoints,
248
- });
249
- break;
250
- }
251
- case 'builder.updateSpacer': {
252
- var data_1 = info.data;
253
- var currentSpacer = _this.rootState._spacer;
254
- _this.updateState(function (state) {
255
- state._spacer = data_1;
256
- });
257
- break;
258
- }
259
- case 'builder.resetState': {
260
- var _b = info.data, state = _b.state, model = _b.model;
261
- if (model === _this.name) {
262
- for (var key in _this.rootState) {
263
- // TODO: support nested functions (somehow)
264
- if (typeof _this.rootState[key] !== 'function') {
265
- delete _this.rootState[key];
266
- }
267
- }
268
- Object.assign(_this.rootState, state);
269
- _this.setState(__assign(__assign({}, _this.state), { state: _this.rootState, updates: ((_this.state && _this.state.updates) || 0) + 1 }));
270
- }
271
- break;
272
- }
273
- case 'builder.resetSymbolState': {
274
- var _c = info.data.state, state = _c.state, model = _c.model, id = _c.id;
275
- if (_this.props.builderBlock && _this.props.builderBlock === id) {
276
- for (var key in _this.rootState) {
277
- delete _this.rootState[key];
278
- }
279
- Object.assign(_this.rootState, state);
280
- _this.setState(__assign(__assign({}, _this.state), { state: _this.rootState, updates: ((_this.state && _this.state.updates) || 0) + 1 }));
281
- }
282
- break;
283
- }
284
- }
285
- };
286
- _this.resizeFn = function () {
287
- var deviceSize = _this.deviceSizeState;
288
- if (deviceSize !== _this.state.state.deviceSize) {
289
- _this.setState(__assign(__assign({}, _this.state), { updates: ((_this.state && _this.state.updates) || 0) + 1, state: Object.assign(_this.rootState, __assign(__assign({}, _this.state.state), { deviceSize: deviceSize })) }));
290
- }
291
- };
292
- _this.resizeListener = sdk_1.Builder.isEditing ? (0, throttle_1.throttle)(_this.resizeFn, 200) : debounce(_this.resizeFn, 400);
293
- _this.mounted = false;
294
- _this.updateState = function (fn) {
295
- var state = _this.rootState;
296
- if (fn) {
297
- fn(state);
298
- }
299
- if (_this.mounted) {
300
- _this.setState({
301
- update: _this.updateState,
302
- state: state,
303
- updates: ((_this.state && _this.state.updates) || 0) + 1,
304
- });
305
- }
306
- else {
307
- _this.state = __assign(__assign({}, _this.state), { update: _this.updateState, state: state, updates: ((_this.state && _this.state.updates) || 0) + 1 });
308
- }
309
- _this.notifyStateChange();
310
- };
311
- _this.onContentLoaded = function (data, content) {
312
- if (_this.name === 'page' && sdk_1.Builder.isBrowser) {
313
- if (data) {
314
- var title = data.title, pageTitle = data.pageTitle, description = data.description, pageDescription = data.pageDescription;
315
- if (title || pageTitle) {
316
- document.title = title || pageTitle;
317
- }
318
- if (description || pageDescription) {
319
- var descriptionTag = document.querySelector('meta[name="description"]');
320
- if (!descriptionTag) {
321
- descriptionTag = document.createElement('meta');
322
- descriptionTag.setAttribute('name', 'description');
323
- document.head.appendChild(descriptionTag);
324
- }
325
- descriptionTag.setAttribute('content', description || pageDescription);
326
- }
327
- }
328
- }
329
- if (sdk_1.Builder.isEditing) {
330
- _this.notifyStateChange();
331
- }
332
- if (_this.props.contentLoaded) {
333
- _this.props.contentLoaded(data, content);
334
- }
335
- if (data && data.inputs && Array.isArray(data.inputs) && data.inputs.length) {
336
- if (!data.state) {
337
- data.state = {};
338
- }
339
- data.inputs.forEach(function (input) {
340
- if (input) {
341
- if (input.name &&
342
- input.defaultValue !== undefined &&
343
- data.state[input.name] === undefined) {
344
- data.state[input.name] = input.defaultValue;
345
- }
346
- }
347
- });
348
- }
349
- if (data && data.state) {
350
- var newState = __assign(__assign({}, _this.state), { updates: ((_this.state && _this.state.updates) || 0) + 1, state: Object.assign(_this.rootState, __assign(__assign(__assign(__assign(__assign({}, _this.state.state), { location: _this.locationState, device: _this.device }), data.state), _this.externalState), { deviceSize: _this.deviceSizeState })) });
351
- if (_this.mounted) {
352
- _this.setState(newState);
353
- }
354
- else {
355
- _this.state = newState;
356
- }
357
- }
358
- // TODO: also throttle on edits maybe
359
- if (data && data.jsCode && !_this.options.codegen) {
360
- // Don't rerun js code when editing and not changed
361
- var skip = false;
362
- if (sdk_1.Builder.isEditing) {
363
- if (_this.lastJsCode === data.jsCode) {
364
- skip = true;
365
- }
366
- else {
367
- _this.lastJsCode = data.jsCode;
368
- }
369
- }
370
- if (!skip) {
371
- var state = _this.state.state;
372
- // TODO: real editing method
373
- try {
374
- var result = new Function('data', 'ref', 'state', 'update', 'element', 'Builder', 'builder', 'context', data.jsCode)(data, _this, state, _this.state.update, _this.ref, sdk_1.Builder, sdk_1.builder, _this.state.context);
375
- // TODO: allow exports = { } syntax?
376
- // TODO: do something with reuslt like view - methods, computed, actions, properties, template, etc etc
377
- }
378
- catch (err) {
379
- var error = (0, to_error_1.toError)(err);
380
- if (sdk_1.Builder.isBrowser) {
381
- console.warn('Builder custom code error:', error.message, 'in', data.jsCode, error.stack);
382
- }
383
- else {
384
- if ((0, is_debug_1.isDebug)()) {
385
- console.debug('Builder custom code error:', error.message, 'in', data.jsCode, error.stack);
386
- }
387
- // Add to req.options.errors to return to client
388
- }
389
- }
390
- }
391
- }
392
- if (data && data.httpRequests /* || data.builderData @DEPRECATED */ && !_this.props.noAsync) {
393
- // Don't rerun http requests when editing and not changed
394
- // No longer needed?
395
- var skip = false;
396
- if (!skip) {
397
- var _loop_1 = function (key) {
398
- var url = data.httpRequests[key];
399
- if (url && (!_this.data[key] || sdk_1.Builder.isEditing)) {
400
- if (sdk_1.Builder.isBrowser) {
401
- var finalUrl_1 = _this.evalExpression(url);
402
- if (sdk_1.Builder.isEditing && _this.lastHttpRequests[key] === finalUrl_1) {
403
- return "continue";
404
- }
405
- _this.lastHttpRequests[key] = finalUrl_1;
406
- var builderModelRe = /builder\.io\/api\/v2\/([^\/\?]+)/i;
407
- var builderModelMatch = url.match(builderModelRe);
408
- var model = builderModelMatch && builderModelMatch[1];
409
- _this.handleRequest(key, finalUrl_1);
410
- var currentSubscription = _this.httpSubscriptionPerKey[key];
411
- if (currentSubscription) {
412
- currentSubscription.unsubscribe();
413
- }
414
- // TODO: fix this
415
- var newSubscription = (_this.httpSubscriptionPerKey[key] =
416
- _this.onStateChange.subscribe(function () {
417
- var newUrl = _this.evalExpression(url);
418
- if (newUrl !== finalUrl_1) {
419
- _this.handleRequest(key, newUrl);
420
- _this.lastHttpRequests[key] = newUrl;
421
- }
422
- }));
423
- _this.subscriptions.add(newSubscription);
424
- }
425
- else {
426
- _this.handleRequest(key, _this.evalExpression(url));
427
- }
428
- }
429
- };
430
- // TODO: another structure for this
431
- for (var key in data.httpRequests) {
432
- _loop_1(key);
433
- }
434
- }
435
- }
436
- };
437
- var _content = _this.inlinedContent;
438
- if (_content && _content.content) {
439
- _content = _content.content;
440
- }
441
- _this.sizes = (0, device_sizes_constant_1.getSizesForBreakpoints)(((_a = _content === null || _content === void 0 ? void 0 : _content.meta) === null || _a === void 0 ? void 0 : _a.breakpoints) || {});
442
- // TODO: pass this all the way down - symbols, etc
443
- // this.asServer = Boolean(props.hydrate && Builder.isBrowser)
444
- var contentData = (_b = _this.inlinedContent) === null || _b === void 0 ? void 0 : _b.data;
445
- if (contentData && Array.isArray(contentData.inputs) && contentData.inputs.length > 0) {
446
- if (!contentData.state) {
447
- contentData.state = {};
448
- }
449
- // set default values of content inputs on state
450
- contentData.inputs.forEach(function (input) {
451
- if (input) {
452
- if (input.name &&
453
- input.defaultValue !== undefined &&
454
- contentData.state[input.name] === undefined) {
455
- contentData.state[input.name] = input.defaultValue;
456
- }
457
- }
458
- });
459
- }
460
- _this.state = {
461
- // TODO: should change if this prop changes
462
- context: __assign(__assign({}, props.context), { apiKey: _this.props.apiKey || sdk_1.builder.apiKey }),
463
- state: Object.assign(_this.rootState, __assign(__assign(__assign(__assign({}, (_this.inlinedContent && _this.inlinedContent.data && _this.inlinedContent.data.state)), { isBrowser: sdk_1.Builder.isBrowser, isServer: !sdk_1.Builder.isBrowser, _hydrate: props.hydrate, location: _this.locationState, deviceSize: _this.deviceSizeState,
464
- // TODO: will user attributes be ready here?
465
- device: _this.device }), _this.getHtmlData()), props.data)),
466
- updates: 0,
467
- key: 0,
468
- update: _this.updateState,
469
- };
470
- var key = _this.props.apiKey;
471
- if (key && key !== _this.builder.apiKey && !instancesMap.has(key)) {
472
- // We create a builder instance for each api key to support loading of symbols from other spaces
473
- var instance = new sdk_1.Builder(key, undefined, undefined, true);
474
- instancesMap.set(key, instance);
475
- }
476
- if (_this.inlinedContent) {
477
- // Sometimes with graphql we get the content as `content.content`
478
- var content = _this.inlinedContent.content || _this.inlinedContent;
479
- _this.onContentLoaded(content === null || content === void 0 ? void 0 : content.data, (0, builder_content_component_1.getContentWithInfo)(content));
480
- }
481
- _this.registerCustomComponents();
482
- return _this;
483
- }
484
- Object.defineProperty(BuilderComponent.prototype, "options", {
485
- get: function () {
486
- // TODO: for perf cache this
487
- return __assign(__assign({}, BuilderComponent.defaults), this.props);
488
- },
489
- enumerable: false,
490
- configurable: true
491
- });
492
- Object.defineProperty(BuilderComponent.prototype, "name", {
493
- get: function () {
494
- return this.props.model || this.props.modelName || this.props.name; // || this.props.model
495
- },
496
- enumerable: false,
497
- configurable: true
498
- });
499
- Object.defineProperty(BuilderComponent.prototype, "element", {
500
- get: function () {
501
- return this.ref;
502
- },
503
- enumerable: false,
504
- configurable: true
505
- });
506
- Object.defineProperty(BuilderComponent.prototype, "inlinedContent", {
507
- get: function () {
508
- if (this.isPreviewing && !this.props.inlineContent) {
509
- return undefined;
510
- }
511
- return this.props.content;
512
- },
513
- enumerable: false,
514
- configurable: true
515
- });
516
- Object.defineProperty(BuilderComponent.prototype, "builder", {
517
- get: function () {
518
- var instance = this.props.apiKey && instancesMap.get(this.props.apiKey);
519
- return instance || this.props.builder || sdk_1.builder;
520
- },
521
- enumerable: false,
522
- configurable: true
523
- });
524
- BuilderComponent.prototype.getHtmlData = function () {
525
- var id = (this.inlinedContent && this.inlinedContent.id) || this.props.entry;
526
- var script = id &&
527
- sdk_1.Builder.isBrowser &&
528
- document.querySelector("script[data-builder-json=\"".concat(id, "\"],script[data-builder-state=\"").concat(id, "\"]"));
529
- if (script) {
530
- try {
531
- var json = JSON.parse(script.innerText);
532
- return json;
533
- }
534
- catch (err) {
535
- console.warn('Could not parse Builder.io HTML data transfer', err, script.innerText);
536
- }
537
- }
538
- return {};
539
- };
540
- Object.defineProperty(BuilderComponent.prototype, "device", {
541
- // TODO: pass down with context
542
- get: function () {
543
- return this.builder.getUserAttributes().device || 'desktop';
544
- },
545
- enumerable: false,
546
- configurable: true
547
- });
548
- Object.defineProperty(BuilderComponent.prototype, "locationState", {
549
- get: function () {
550
- return __assign(__assign({}, pick(this.location, 'pathname', 'hostname', 'search', 'host')), { path: (this.location.pathname && this.location.pathname.split('/').slice(1)) || '', query: searchToObject(this.location) });
551
- },
552
- enumerable: false,
553
- configurable: true
554
- });
555
- Object.defineProperty(BuilderComponent.prototype, "deviceSizeState", {
556
- // TODO: trigger state change on screen size change
557
- get: function () {
558
- // TODO: use context to pass this down on server
559
- return sdk_1.Builder.isBrowser
560
- ? this.sizes.getSizeForWidth(window.innerWidth)
561
- : sizeMap[this.device] || 'large';
562
- },
563
- enumerable: false,
564
- configurable: true
565
- });
566
- BuilderComponent.renderInto = function (elementOrSelector, props, hydrate, fresh) {
567
- if (props === void 0) { props = {}; }
568
- if (hydrate === void 0) { hydrate = true; }
569
- if (fresh === void 0) { fresh = false; }
570
- console.debug('BuilderPage.renderInto', elementOrSelector, props, hydrate, this);
571
- if (!elementOrSelector) {
572
- return;
573
- }
574
- var element = null;
575
- if (typeof elementOrSelector === 'string') {
576
- element = document.querySelector(elementOrSelector);
577
- }
578
- else {
579
- if (elementOrSelector instanceof Element) {
580
- element = elementOrSelector;
581
- }
582
- }
583
- if (!element) {
584
- return;
585
- }
586
- var exists = element.classList.contains('builder-hydrated');
587
- if (exists && !fresh) {
588
- console.debug('Tried to hydrate multiple times');
589
- return;
590
- }
591
- element.classList.add('builder-hydrated');
592
- var shouldHydrate = hydrate && element.innerHTML.includes('builder-block');
593
- if (!element.classList.contains('builder-component')) {
594
- // TODO: maybe remove any builder-api-styles...
595
- var apiStyles_1 = element.querySelector('.builder-api-styles') ||
596
- (element.previousElementSibling &&
597
- element.previousElementSibling.matches('.builder-api-styles')
598
- ? element.previousElementSibling
599
- : null);
600
- var keepStyles_1 = '';
601
- if (apiStyles_1) {
602
- var html = apiStyles_1.innerHTML;
603
- html.replace(/\/\*start:([^\*]+?)\*\/([\s\S]*?)\/\*end:([^\*]+?)\*\//g, function (match, id, content) {
604
- var el = null;
605
- try {
606
- el = document.querySelector("[data-emotion-css=\"".concat(id, "\"]"));
607
- }
608
- catch (err) {
609
- console.warn(err);
610
- }
611
- if (el) {
612
- el.innerHTML = content;
613
- }
614
- else if (!sdk_1.Builder.isEditing) {
615
- keepStyles_1 += match;
616
- }
617
- return match;
618
- });
619
- // NextTick? or longer timeout?
620
- sdk_1.Builder.nextTick(function () {
621
- apiStyles_1.innerHTML = keepStyles_1;
622
- });
623
- }
624
- var useElement = element.querySelector('.builder-component');
625
- if (useElement) {
626
- element = useElement;
627
- }
628
- else {
629
- shouldHydrate = false;
630
- }
631
- }
632
- if (location.search.includes('builder.debug=true')) {
633
- console.debug('hydrate', shouldHydrate, element);
634
- }
635
- var useEl = element;
636
- if (!exists) {
637
- var div = document.createElement('div');
638
- element.insertAdjacentElement('beforebegin', div);
639
- div.appendChild(element);
640
- useEl = div;
641
- }
642
- if (sdk_1.Builder.isEditing || (sdk_1.Builder.isBrowser && location.search.includes('builder.preview='))) {
643
- shouldHydrate = false;
644
- }
645
- if (shouldHydrate && element) {
646
- // TODO: maybe hydrate again. Maybe...
647
- var val_1 = react_dom_1.default.render(react_1.default.createElement(BuilderComponent, __assign({}, props)), useEl, useEl.builderRootRef);
648
- useEl.builderRootRef = val_1;
649
- return val_1;
650
- }
651
- var val = react_dom_1.default.render(react_1.default.createElement(BuilderComponent, __assign({}, props)), useEl, useEl.builderRootRef);
652
- useEl.builderRootRef = val;
653
- return val;
654
- };
655
- BuilderComponent.prototype.registerCustomComponents = function () {
656
- if (this.props.customComponents) {
657
- for (var _i = 0, _a = this.props.customComponents; _i < _a.length; _i++) {
658
- var customComponent = _a[_i];
659
- if (customComponent) {
660
- var component = customComponent.component, registration = __rest(customComponent, ["component"]);
661
- sdk_1.Builder.registerComponent(component, registration);
662
- }
663
- }
664
- }
665
- };
666
- BuilderComponent.prototype.componentDidMount = function () {
667
- var _this = this;
668
- var _a;
669
- this.mounted = true;
670
- if (this.asServer) {
671
- this.asServer = false;
672
- this.updateState(function (state) {
673
- state.isBrowser = true;
674
- state.isServer = false;
675
- });
676
- }
677
- if (sdk_1.Builder.isIframe) {
678
- (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'builder.sdkInjected', data: { modelName: this.name } }, '*');
679
- }
680
- if (sdk_1.Builder.isBrowser) {
681
- // TODO: remove event on unload
682
- window.addEventListener('resize', this.resizeListener);
683
- if (sdk_1.Builder.isEditing) {
684
- window.addEventListener('message', this.messageListener);
685
- }
686
- if (sdk_1.Builder.isEditing || sdk_1.Builder.isPreviewing) {
687
- sdk_1.Builder.nextTick(function () {
688
- _this.firstLoad = false;
689
- _this.reload();
690
- });
691
- }
692
- setTimeout(function () {
693
- window.dispatchEvent(new CustomEvent('builder:component:load', {
694
- detail: {
695
- ref: _this,
696
- },
697
- }));
698
- });
699
- }
700
- };
701
- Object.defineProperty(BuilderComponent.prototype, "isPreviewing", {
702
- get: function () {
703
- return ((sdk_1.Builder.isServer || (sdk_1.Builder.isBrowser && sdk_1.Builder.isPreviewing && !this.firstLoad)) &&
704
- (sdk_1.builder.previewingModel === this.name || sdk_1.builder.previewingModel === 'BUILDER_STUDIO'));
705
- },
706
- enumerable: false,
707
- configurable: true
708
- });
709
- BuilderComponent.prototype.notifyStateChange = function () {
710
- if (sdk_1.Builder.isServer) {
711
- return;
712
- }
713
- if (!(this && this.state)) {
714
- return;
715
- }
716
- var nextState = this.state.state;
717
- // TODO: only run the below once per tick...
718
- if (this.props.onStateChange) {
719
- this.props.onStateChange(nextState);
720
- }
721
- if (sdk_1.Builder.isBrowser) {
722
- window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
723
- detail: {
724
- state: nextState,
725
- ref: this,
726
- },
727
- }));
728
- }
729
- this.onStateChange.next(nextState);
730
- };
731
- BuilderComponent.prototype.processStateFromApi = function (state) {
732
- return state; // mapValues(state, value => tryEval(value, this.data, this._errors))
733
- };
734
- Object.defineProperty(BuilderComponent.prototype, "location", {
735
- get: function () {
736
- return this.props.location || (sdk_1.Builder.isBrowser ? location : {});
737
- },
738
- enumerable: false,
739
- configurable: true
740
- });
741
- BuilderComponent.prototype.getCssFromFont = function (font, data) {
742
- // TODO: compute what font sizes are used and only load those.......
743
- var family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
744
- var name = family.split(',')[0];
745
- var url = font.fileUrl ? font.fileUrl : font.files && font.files.regular;
746
- var str = '';
747
- if (url && family && name) {
748
- str += "\n@font-face {\n font-family: \"".concat(family, "\";\n src: local(\"").concat(name, "\"), url('").concat(url, "') format('woff2');\n font-display: fallback;\n font-weight: 400;\n}\n ").trim();
749
- }
750
- if (font.files) {
751
- for (var weight in font.files) {
752
- var isNumber = String(Number(weight)) === weight;
753
- if (!isNumber) {
754
- continue;
755
- }
756
- // TODO: maybe limit number loaded
757
- var weightUrl = font.files[weight];
758
- if (weightUrl && weightUrl !== url) {
759
- str += "\n@font-face {\n font-family: \"".concat(family, "\";\n src: url('").concat(weightUrl, "') format('woff2');\n font-display: fallback;\n font-weight: ").concat(weight, ";\n}\n ").trim();
760
- }
761
- }
762
- }
763
- return str;
764
- };
765
- BuilderComponent.prototype.componentWillUnmount = function () {
766
- this.unsubscribe();
767
- if (sdk_1.Builder.isBrowser) {
768
- window.removeEventListener('resize', this.resizeListener);
769
- window.removeEventListener('message', this.messageListener);
770
- }
771
- };
772
- BuilderComponent.prototype.getFontCss = function (data) {
773
- var _this = this;
774
- if (!this.builder.allowCustomFonts) {
775
- return '';
776
- }
777
- // TODO: separate internal data from external
778
- return (((data === null || data === void 0 ? void 0 : data.customFonts) &&
779
- data.customFonts.length &&
780
- data.customFonts.map(function (font) { return _this.getCssFromFont(font, data); }).join(' ')) ||
781
- '');
782
- };
783
- BuilderComponent.prototype.ensureFontsLoaded = function (data) {
784
- if (this.builder.allowCustomFonts && (data === null || data === void 0 ? void 0 : data.customFonts) && Array.isArray(data.customFonts)) {
785
- for (var _i = 0, _a = data.customFonts; _i < _a.length; _i++) {
786
- var font = _a[_i];
787
- var url = font.fileUrl ? font.fileUrl : font.files && font.files.regular;
788
- if (!fontsLoaded.has(url)) {
789
- var html = this.getCssFromFont(font, data);
790
- fontsLoaded.add(url);
791
- if (!html) {
792
- continue;
793
- }
794
- var style = document.createElement('style');
795
- style.className = 'builder-custom-font';
796
- style.setAttribute('data-builder-custom-font', url);
797
- style.innerHTML = html;
798
- document.head.appendChild(style);
799
- }
800
- }
801
- }
802
- };
803
- BuilderComponent.prototype.getCss = function (data) {
804
- var _a;
805
- var contentId = (_a = this.useContent) === null || _a === void 0 ? void 0 : _a.id;
806
- var cssCode = (data === null || data === void 0 ? void 0 : data.cssCode) || '';
807
- if (contentId) {
808
- // Allow using `&` in custom CSS code like @emotion
809
- // E.g. `& .foobar { ... }` to scope CSS
810
- // TODO: handle if '&' is within a string like `content: "&"`
811
- cssCode = cssCode.replace(/&/g, ".builder-component-".concat(contentId));
812
- }
813
- return cssCode + this.getFontCss(data);
814
- };
815
- Object.defineProperty(BuilderComponent.prototype, "data", {
816
- get: function () {
817
- var _a;
818
- var data = __assign(__assign(__assign({}, (this.inlinedContent && ((_a = this.inlinedContent.data) === null || _a === void 0 ? void 0 : _a.state))), this.externalState), this.state.state);
819
- Object.assign(this.rootState, data);
820
- return data;
821
- },
822
- enumerable: false,
823
- configurable: true
824
- });
825
- BuilderComponent.prototype.componentDidUpdate = function (prevProps) {
826
- var _this = this;
827
- // TODO: shallow diff
828
- if (this.props.data && prevProps.data !== this.props.data) {
829
- this.state.update(function (state) {
830
- Object.assign(state, _this.externalState);
831
- });
832
- }
833
- if (this.props.customComponents && this.props.customComponents !== prevProps.customComponents) {
834
- this.registerCustomComponents();
835
- }
836
- if (sdk_1.Builder.isEditing) {
837
- if (this.inlinedContent && prevProps.content !== this.inlinedContent) {
838
- this.onContentLoaded(this.inlinedContent.data, this.inlinedContent);
839
- }
840
- }
841
- };
842
- // FIXME: workaround to issue with CSS extraction and then hydration
843
- // (might be preact only)
844
- BuilderComponent.prototype.checkStyles = function (data) {
845
- if (this.styleRef) {
846
- var css_1 = this.getCss(data);
847
- if (this.styleRef.innerHTML !== css_1) {
848
- this.styleRef.innerHTML = css_1;
849
- }
850
- }
851
- };
852
- BuilderComponent.prototype.reload = function () {
853
- this.setState({
854
- key: this.state.key + 1,
855
- });
856
- };
857
- Object.defineProperty(BuilderComponent.prototype, "content", {
858
- get: function () {
859
- var content = this.inlinedContent;
860
- if (content && content.content) {
861
- // GraphQL workaround
862
- content = __assign(__assign({}, content), { data: content.content });
863
- }
864
- return content;
865
- },
866
- enumerable: false,
867
- configurable: true
868
- });
869
- Object.defineProperty(BuilderComponent.prototype, "externalState", {
870
- get: function () {
871
- return __assign(__assign({}, this.props.data), (this.props.locale ? { locale: this.props.locale } : {}));
872
- },
873
- enumerable: false,
874
- configurable: true
875
- });
876
- Object.defineProperty(BuilderComponent.prototype, "useContent", {
877
- get: function () {
878
- return this.content || this.state.context.builderContent;
879
- },
880
- enumerable: false,
881
- configurable: true
882
- });
883
- BuilderComponent.prototype.render = function () {
884
- var _this = this;
885
- var _a;
886
- var content = this.content;
887
- var dataString = sdk_1.Builder.isBrowser &&
888
- this.externalState &&
889
- size(this.externalState) &&
890
- (0, hash_sum_1.default)(this.externalState);
891
- var key = sdk_1.Builder.isEditing ? this.name : this.props.entry;
892
- if (key && !sdk_1.Builder.isEditing && dataString && dataString.length < 300) {
893
- key += ':' + dataString;
894
- }
895
- var WrapComponent = this.props.dataOnly ? react_1.default.Fragment : 'div';
896
- var contentId = (_a = this.useContent) === null || _a === void 0 ? void 0 : _a.id;
897
- return (
898
- // TODO: data attributes for model, id, etc?
899
- react_1.default.createElement(WrapComponent, { onClick: function (event) {
900
- // Prevent propagation from the root content component when editing to prevent issues
901
- // like client side routing triggering when links are clicked, unless this behavior is
902
- // disabled with the stopClickPropagationWhenEditing prop
903
- if (sdk_1.Builder.isEditing &&
904
- !_this.props.isChild &&
905
- !_this.props.stopClickPropagationWhenEditing) {
906
- event.stopPropagation();
907
- }
908
- }, className: "builder-component ".concat(contentId ? "builder-component-".concat(contentId) : ''), "data-name": this.name, "data-source": "Rendered by Builder.io", key: this.state.key, ref: function (ref) { return (_this.ref = ref); } },
909
- react_1.default.createElement(builder_meta_1.BuilderMetaContext.Consumer, null, function (value) { return (react_1.default.createElement(builder_meta_1.BuilderMetaContext.Provider, { value: typeof _this.props.ampMode === 'boolean'
910
- ? __assign(__assign({}, value), { ampMode: _this.props.ampMode }) : value },
911
- react_1.default.createElement(builder_async_requests_1.BuilderAsyncRequestsContext.Consumer, null, function (value) {
912
- var _a;
913
- _this._asyncRequests = value && value.requests;
914
- _this._errors = value && value.errors;
915
- _this._logs = value && value.logs;
916
- return (react_1.default.createElement(builder_content_component_1.BuilderContent, { isStatic: _this.props.isStatic || sdk_1.Builder.isStatic, key: ((_a = _this.inlinedContent) === null || _a === void 0 ? void 0 : _a.id) ||
917
- ('content' in _this.props && !_this.isPreviewing
918
- ? 'null-content-prop'
919
- : 'no-content-prop'), builder: _this.builder, ref: function (ref) { return (_this.contentRef = ref); },
920
- // TODO: pass entry in
921
- contentLoaded: function (data, content) { return _this.onContentLoaded(data, content); }, options: __assign(__assign(__assign(__assign(__assign(__assign({ key: key, entry: _this.props.entry }, (content && { initialContent: [content] })), (!content &&
922
- 'content' in _this.props &&
923
- !_this.isPreviewing && { initialContent: [] })), (_this.props.url && { url: _this.props.url })), _this.props.options), (_this.props.locale ? { locale: _this.props.locale } : {})), (_this.options.codegen && {
924
- format: 'react',
925
- })), inline: _this.props.inlineContent || (!_this.isPreviewing && 'content' in _this.props), contentError: _this.props.contentError, modelName: _this.name || 'page' }, function (data, loading, fullData) {
926
- var _a;
927
- if (_this.props.dataOnly) {
928
- return null;
929
- }
930
- if (fullData && fullData.id) {
931
- if (_this.state.breakpoints) {
932
- fullData.meta = fullData.meta || {};
933
- fullData.meta.breakpoints = _this.state.breakpoints;
934
- }
935
- _this.state.context.builderContent = fullData;
936
- }
937
- if (sdk_1.Builder.isBrowser) {
938
- sdk_1.Builder.nextTick(function () {
939
- _this.checkStyles(data);
940
- });
941
- }
942
- var codegen = _this.options.codegen;
943
- if (codegen && !_this.Component && (data === null || data === void 0 ? void 0 : data.blocksJs)) {
944
- var builderComponentNames = Array.from(new Set(sdk_1.Builder.components.map(function (item) { return item.name; })));
945
- var reversedcomponents_1 = sdk_1.Builder.components.slice().reverse();
946
- var builderComponents = builderComponentNames.map(function (name) {
947
- return reversedcomponents_1.find(function (item) { return item.class && item.name === name; });
948
- });
949
- var useBuilderState = function (initialState) {
950
- var _a = react_1.default.useState(0), setTick = _a[1];
951
- var state = react_1.default.useState(function () {
952
- return (0, on_change_1.default)(initialState, function () {
953
- setTick(function (tick) { return tick + 1; });
954
- });
955
- })[0];
956
- return state;
957
- };
958
- var mappedComponentNames = builderComponentNames.map(function (name) {
959
- return (name || '').replace(/[^\w]+/gi, '');
960
- });
961
- var finalizedComponents = builderComponents.map(function (info) {
962
- return wrapComponent(info);
963
- });
964
- _this.Component = new (Function.bind.apply(Function, __spreadArray(__spreadArray([void 0, 'jsx',
965
- '_css',
966
- 'Builder',
967
- 'builder',
968
- 'React',
969
- 'useBuilderState'], mappedComponentNames, false), [data.blocksJs], false)))().apply(void 0, __spreadArray([core_1.jsx,
970
- core_1.css,
971
- sdk_1.Builder,
972
- sdk_1.builder,
973
- react_1.default,
974
- useBuilderState], finalizedComponents, false));
975
- }
976
- var blocks = (data === null || data === void 0 ? void 0 : data.blocks) || [];
977
- var hasPixel = blocks.find(function (block) { var _a; return (_a = block.id) === null || _a === void 0 ? void 0 : _a.startsWith('builder-pixel'); });
978
- if (data && !hasPixel && blocks.length > 0) {
979
- blocks.push((0, get_builder_pixel_1.getBuilderPixel)(sdk_1.builder.apiKey));
980
- }
981
- // TODO: loading option - maybe that is what the children is or component prop
982
- // TODO: get rid of all these wrapper divs
983
- return data ? (react_1.default.createElement("div", __assign({ "data-builder-component": _this.name, "data-builder-content-id": fullData.id }, (_this.isPreviewing
984
- ? {
985
- 'data-builder-variation-id': fullData.testVariationId || fullData.variationId || fullData.id,
986
- }
987
- : {})),
988
- !codegen && _this.getCss(data) && (react_1.default.createElement("style", { ref: function (ref) { return (_this.styleRef = ref); }, className: "builder-custom-styles", dangerouslySetInnerHTML: {
989
- __html: _this.getCss(data),
990
- } })),
991
- react_1.default.createElement(builder_store_1.BuilderStoreContext.Provider, { value: __assign(__assign({}, _this.state), { rootState: _this.rootState, state: _this.data, content: fullData, renderLink: _this.props.renderLink }) }, codegen && _this.Component ? (react_1.default.createElement(_this.Component, { data: _this.data, context: _this.state.context })) : (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { key: String(!!((_a = data === null || data === void 0 ? void 0 : data.blocks) === null || _a === void 0 ? void 0 : _a.length)), emailMode: _this.props.emailMode, fieldName: "blocks", blocks: blocks }))))) : loading ? (react_1.default.createElement("div", { "data-builder-component": _this.name, className: "builder-loading" }, _this.props.children)) : (react_1.default.createElement("div", { "data-builder-component": _this.name, className: "builder-no-content" }));
992
- }));
993
- }))); })));
994
- };
995
- BuilderComponent.prototype.evalExpression = function (expression) {
996
- var _this = this;
997
- var data = this.data;
998
- return String(expression).replace(/{{([^}]+)}}/g, function (match, group) {
999
- return (0, try_eval_1.tryEval)(group, data, _this._errors);
1000
- });
1001
- };
1002
- BuilderComponent.prototype.handleRequest = function (propertyName, url) {
1003
- return __awaiter(this, void 0, void 0, function () {
1004
- var request, existing, promise_1, promise;
1005
- var _this = this;
1006
- return __generator(this, function (_a) {
1007
- // TODO: Builder.isEditing = just checks if iframe and parent page is this.builder.io or localhost:1234
1008
- if (sdk_1.Builder.isIframe && fetchCache[url]) {
1009
- this.updateState(function (ctx) {
1010
- ctx[propertyName] = fetchCache[url];
1011
- });
1012
- return [2 /*return*/, fetchCache[url]];
1013
- }
1014
- request = function () { return __awaiter(_this, void 0, void 0, function () {
1015
- var requestStart, json, result, err_1, error;
1016
- return __generator(this, function (_a) {
1017
- switch (_a.label) {
1018
- case 0:
1019
- requestStart = Date.now();
1020
- if (!sdk_1.Builder.isBrowser) {
1021
- console.time('Fetch ' + url);
1022
- }
1023
- _a.label = 1;
1024
- case 1:
1025
- _a.trys.push([1, 4, 5, 6]);
1026
- return [4 /*yield*/, fetch(url)];
1027
- case 2:
1028
- result = _a.sent();
1029
- return [4 /*yield*/, result.json()];
1030
- case 3:
1031
- json = _a.sent();
1032
- return [3 /*break*/, 6];
1033
- case 4:
1034
- err_1 = _a.sent();
1035
- error = (0, to_error_1.toError)(err_1);
1036
- if (this._errors) {
1037
- this._errors.push(error);
1038
- }
1039
- if (this._logs) {
1040
- this._logs.push("Fetch to ".concat(url, " errored in ").concat(Date.now() - requestStart, "ms"));
1041
- }
1042
- return [2 /*return*/];
1043
- case 5:
1044
- if (!sdk_1.Builder.isBrowser) {
1045
- console.timeEnd('Fetch ' + url);
1046
- if (this._logs) {
1047
- this._logs.push("Fetched ".concat(url, " in ").concat(Date.now() - requestStart, "ms"));
1048
- }
1049
- }
1050
- return [7 /*endfinally*/];
1051
- case 6:
1052
- if (json) {
1053
- if (sdk_1.Builder.isIframe) {
1054
- fetchCache[url] = json;
1055
- }
1056
- // TODO: debounce next tick all of these when there are a bunch
1057
- this.updateState(function (ctx) {
1058
- ctx[propertyName] = json;
1059
- });
1060
- }
1061
- return [2 /*return*/, json];
1062
- }
1063
- });
1064
- }); };
1065
- existing = this._asyncRequests &&
1066
- this._asyncRequests.find(function (req) { return (0, builder_async_requests_1.isRequestInfo)(req) && req.url === url; });
1067
- if (existing) {
1068
- promise_1 = existing.promise;
1069
- promise_1.then(function (json) {
1070
- if (json) {
1071
- _this.updateState(function (ctx) {
1072
- ctx[propertyName] = json;
1073
- });
1074
- }
1075
- });
1076
- return [2 /*return*/, promise_1];
1077
- }
1078
- promise = request();
1079
- sdk_1.Builder.nextTick(function () {
1080
- if (_this._asyncRequests) {
1081
- _this._asyncRequests.push(promise);
1082
- }
1083
- });
1084
- return [2 /*return*/, promise];
1085
- });
1086
- });
1087
- };
1088
- BuilderComponent.prototype.unsubscribe = function () {
1089
- if (this.subscriptions) {
1090
- this.subscriptions.unsubscribe();
1091
- this.subscriptions = new sdk_1.Subscription();
1092
- }
1093
- };
1094
- BuilderComponent.prototype.handleBuilderRequest = function (propertyName, optionsString) {
1095
- var _this = this;
1096
- var options = (0, try_eval_1.tryEval)(optionsString, this.data, this._errors);
1097
- // TODO: this will screw up for multiple bits of data
1098
- if (this.subscriptions) {
1099
- this.unsubscribe();
1100
- }
1101
- // TODO: don't unsubscribe and resubscribe every time data changes, will make a TON of requests if that's the case when editing...
1102
- // I guess will be cached then
1103
- if (options) {
1104
- // TODO: unsubscribe on destroy
1105
- this.subscriptions.add(this.builder.queueGetContent(options.model, options).subscribe(function (matches) {
1106
- if (matches) {
1107
- _this.updateState(function (ctx) {
1108
- ctx[propertyName] = matches;
1109
- });
1110
- }
1111
- }));
1112
- }
1113
- };
1114
- BuilderComponent.defaults = {
1115
- codegen: Boolean(sdk_1.Builder.isBrowser && location.href.includes('builder.codegen=true')),
1116
- };
1117
- __decorate([
1118
- debonce_next_tick_1.debounceNextTick,
1119
- __metadata("design:type", Function),
1120
- __metadata("design:paramtypes", []),
1121
- __metadata("design:returntype", void 0)
1122
- ], BuilderComponent.prototype, "notifyStateChange", null);
1123
- return BuilderComponent;
1124
- }(react_1.default.Component));
1125
- exports.BuilderComponent = BuilderComponent;
1126
- //# sourceMappingURL=builder-component.component.js.map