@builder.io/react 2.0.11 → 2.0.12-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 (34) hide show
  1. package/dist/builder-react-lite.cjs.js +1 -1
  2. package/dist/builder-react-lite.cjs.js.map +1 -1
  3. package/dist/builder-react-lite.esm.js +1 -1
  4. package/dist/builder-react-lite.esm.js.map +1 -1
  5. package/dist/builder-react.browser.js +1 -1
  6. package/dist/builder-react.browser.js.map +1 -1
  7. package/dist/builder-react.cjs.js +1 -1
  8. package/dist/builder-react.cjs.js.map +1 -1
  9. package/dist/builder-react.es5.js +1 -1
  10. package/dist/builder-react.es5.js.map +1 -1
  11. package/dist/builder-react.unpkg.js +1 -1
  12. package/dist/builder-react.unpkg.js.map +1 -1
  13. package/dist/lib/package.json +1 -1
  14. package/dist/lib/src/blocks/Columns.js +11 -3
  15. package/dist/lib/src/blocks/Columns.js.map +1 -1
  16. package/dist/lib/src/blocks/Image.js +10 -7
  17. package/dist/lib/src/blocks/Image.js.map +1 -1
  18. package/dist/lib/src/components/builder-block.component.js +1 -1
  19. package/dist/lib/src/components/builder-block.component.js.map +1 -1
  20. package/dist/lib/src/components/builder-component.component.js +26 -4
  21. package/dist/lib/src/components/builder-component.component.js.map +1 -1
  22. package/dist/lib/test/basic.test.js +36 -3
  23. package/dist/lib/test/basic.test.js.map +1 -1
  24. package/dist/types/src/blocks/Image.d.ts +2 -1
  25. package/dist/types/src/components/builder-component.component.d.ts +2 -0
  26. package/dist/types/src/constants/device-sizes.constant.d.ts +1 -1
  27. package/package.json +1 -1
  28. package/src/blocks/Columns.tsx +12 -2
  29. package/src/blocks/Image.tsx +16 -6
  30. package/src/components/builder-block.component.tsx +0 -1
  31. package/src/components/builder-component.component.tsx +31 -3
  32. package/src/constants/device-sizes.constant.ts +1 -1
  33. package/test/__snapshots__/basic.test.tsx.snap +52 -14
  34. package/test/basic.test.tsx +43 -3
@@ -1 +1 @@
1
- {"version":3,"file":"basic.test.js","sourceRoot":"","sources":["../../../test/basic.test.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"basic.test.js","sourceRoot":"","sources":["../../../test/basic.test.tsx"],"names":[],"mappings":"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"}
@@ -1,5 +1,6 @@
1
1
  import { BuilderElement } from '@builder.io/sdk';
2
+ import { Breakpoints } from '../constants/device-sizes.constant';
2
3
  export declare function updateQueryParam(uri: string | undefined, key: string, value: string | number | boolean): string;
3
4
  export declare function getSrcSet(url: string): string;
4
- export declare const getSizes: (sizes: string, block: BuilderElement) => string;
5
+ export declare const getSizes: (sizes: string, block: BuilderElement, contentBreakpoints?: Breakpoints) => string;
5
6
  export declare const Image: Function;
@@ -4,6 +4,7 @@ import { BuilderContent } from './builder-content.component';
4
4
  import { Builder, GetContentOptions, Subscription, BehaviorSubject, BuilderElement, BuilderContent as Content } from '@builder.io/sdk';
5
5
  import onChange from '../../lib/on-change';
6
6
  export { onChange };
7
+ import { Breakpoints } from '../constants/device-sizes.constant';
7
8
  import { Url } from 'url';
8
9
  export interface BuilderComponentProps {
9
10
  /**
@@ -193,6 +194,7 @@ export interface BuilderComponentState {
193
194
  updates: number;
194
195
  context: any;
195
196
  key: number;
197
+ breakpoints?: Breakpoints;
196
198
  }
197
199
  /**
198
200
  * Responsible for rendering Builder content of type: 'page' or 'section' to
@@ -25,7 +25,7 @@ declare const sizes: {
25
25
  getSizeForWidth(width: number): Size;
26
26
  };
27
27
  export declare type Sizes = typeof sizes;
28
- interface Breakpoints {
28
+ export interface Breakpoints {
29
29
  small?: number;
30
30
  medium?: number;
31
31
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@builder.io/react",
3
- "version": "2.0.11",
3
+ "version": "2.0.12-1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "main": "dist/builder-react.cjs.js",
@@ -6,6 +6,7 @@ import { BuilderElement } from '@builder.io/sdk';
6
6
  import { BuilderBlocks } from '../components/builder-blocks.component';
7
7
  import { withBuilder } from '../functions/with-builder';
8
8
  import { Link } from '../components/Link';
9
+ import { Breakpoints, getSizesForBreakpoints } from '../constants/device-sizes.constant';
9
10
 
10
11
  const DEFAULT_ASPECT_RATIO = 0.7004048582995948;
11
12
 
@@ -85,6 +86,9 @@ class ColumnsComponent extends React.Component<any> {
85
86
 
86
87
  render() {
87
88
  const { columns, gutterSize } = this;
89
+ const contentBreakpoints: Breakpoints =
90
+ this.props.builderState?.context.builderContent?.meta?.breakpoints || {};
91
+ const breakpointSizes = getSizesForBreakpoints(contentBreakpoints);
88
92
 
89
93
  return (
90
94
  // FIXME: make more elegant
@@ -94,7 +98,11 @@ class ColumnsComponent extends React.Component<any> {
94
98
  css={{
95
99
  display: 'flex',
96
100
  ...(this.props.stackColumnsAt !== 'never' && {
97
- [`@media (max-width: ${this.props.stackColumnsAt !== 'tablet' ? 639 : 991}px)`]: {
101
+ [`@media (max-width: ${
102
+ this.props.stackColumnsAt !== 'tablet'
103
+ ? breakpointSizes.small.max
104
+ : breakpointSizes.medium.max
105
+ }px)`]: {
98
106
  flexDirection: this.props.reverseColumnsWhenStacked ? 'column-reverse' : 'column',
99
107
  alignItems: 'stretch',
100
108
  },
@@ -125,7 +133,9 @@ class ColumnsComponent extends React.Component<any> {
125
133
  marginLeft: index === 0 ? 0 : gutterSize,
126
134
  ...(this.props.stackColumnsAt !== 'never' && {
127
135
  [`@media (max-width: ${
128
- this.props.stackColumnsAt !== 'tablet' ? 639 : 991
136
+ this.props.stackColumnsAt !== 'tablet'
137
+ ? breakpointSizes.small.max
138
+ : breakpointSizes.medium.max
129
139
  }px)`]: {
130
140
  width: '100%',
131
141
  marginLeft: 0,
@@ -7,6 +7,7 @@ import { BuilderElement, Builder } from '@builder.io/sdk';
7
7
  import { BuilderMetaContext } from '../store/builder-meta';
8
8
  import { withBuilder } from '../functions/with-builder';
9
9
  import { throttle } from '../functions/throttle';
10
+ import { Breakpoints, getSizesForBreakpoints } from '../constants/device-sizes.constant';
10
11
 
11
12
  // Taken from (and modified) the shopify theme script repo
12
13
  // https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
@@ -92,7 +93,11 @@ export function getSrcSet(url: string): string {
92
93
  return url;
93
94
  }
94
95
 
95
- export const getSizes = (sizes: string, block: BuilderElement) => {
96
+ export const getSizes = (
97
+ sizes: string,
98
+ block: BuilderElement,
99
+ contentBreakpoints: Breakpoints = {}
100
+ ) => {
96
101
  let useSizes = '';
97
102
 
98
103
  if (sizes) {
@@ -117,9 +122,10 @@ export const getSizes = (sizes: string, block: BuilderElement) => {
117
122
  let hasSmallOrMediumSize = false;
118
123
  const unitRegex = /^\d+/;
119
124
 
125
+ const breakpointSizes = getSizesForBreakpoints(contentBreakpoints);
120
126
  if (block.responsiveStyles?.small?.width?.match(unitRegex)) {
121
127
  hasSmallOrMediumSize = true;
122
- const mediaQuery = '(max-width: 639px)';
128
+ const mediaQuery = `(max-width: ${breakpointSizes.small.max}px)`;
123
129
  const widthAndQuery = `${mediaQuery} ${block.responsiveStyles.small.width.replace(
124
130
  '%',
125
131
  'vw'
@@ -129,7 +135,7 @@ export const getSizes = (sizes: string, block: BuilderElement) => {
129
135
 
130
136
  if (block.responsiveStyles?.medium?.width?.match(unitRegex)) {
131
137
  hasSmallOrMediumSize = true;
132
- const mediaQuery = '(max-width: 991px)';
138
+ const mediaQuery = `(max-width: ${breakpointSizes.medium.max}px)`;
133
139
  const widthAndQuery = `${mediaQuery} ${block.responsiveStyles.medium.width.replace(
134
140
  '%',
135
141
  'vw'
@@ -267,11 +273,15 @@ class ImageComponent extends React.Component<any, { imageLoaded: boolean; load:
267
273
  }
268
274
 
269
275
  render() {
270
- const { aspectRatio, lazy } = this.props;
276
+ const { aspectRatio, lazy, builderBlock, builderState } = this.props;
271
277
  const children = this.props.builderBlock && this.props.builderBlock.children;
272
278
 
273
279
  let srcset = this.props.srcset;
274
- const sizes = getSizes(this.props.sizes, this.props.builderBlock);
280
+ const sizes = getSizes(
281
+ this.props.sizes,
282
+ builderBlock,
283
+ builderState?.context.builderContent?.meta?.breakpoints || {}
284
+ );
275
285
  const image = this.image;
276
286
 
277
287
  if (srcset && image && image.includes('builder.io/api/v1/image')) {
@@ -283,7 +293,7 @@ class ImageComponent extends React.Component<any, { imageLoaded: boolean; load:
283
293
  srcset = this.getSrcSet();
284
294
  }
285
295
 
286
- const isPixel = this.props.builderBlock?.id.startsWith('builder-pixel-');
296
+ const isPixel = builderBlock?.id.startsWith('builder-pixel-');
287
297
  const { fitContent } = this.props;
288
298
 
289
299
  return (
@@ -1,5 +1,4 @@
1
1
  /** @jsx jsx */
2
-
3
2
  import { Builder, builder, BuilderElement, Component } from '@builder.io/sdk';
4
3
  import { ClassNames, jsx } from '@emotion/core';
5
4
  import React from 'react';
@@ -18,7 +18,7 @@ import onChange from '../../lib/on-change';
18
18
 
19
19
  export { onChange };
20
20
 
21
- import { getSizesForBreakpoints, Sizes } from '../constants/device-sizes.constant';
21
+ import { Breakpoints, getSizesForBreakpoints, Sizes } from '../constants/device-sizes.constant';
22
22
  import {
23
23
  BuilderAsyncRequestsContext,
24
24
  RequestOrPromise,
@@ -291,6 +291,7 @@ export interface BuilderComponentState {
291
291
  updates: number;
292
292
  context: any;
293
293
  key: number;
294
+ breakpoints?: Breakpoints;
294
295
  }
295
296
 
296
297
  function searchToObject(location: Location | Url) {
@@ -477,6 +478,28 @@ export class BuilderComponent extends React.Component<
477
478
  messageListener = (event: MessageEvent) => {
478
479
  const info = event.data;
479
480
  switch (info.type) {
481
+ case 'builder.configureSdk': {
482
+ const data = info.data;
483
+
484
+ if (!data.contentId || data.contentId !== this.useContent?.id) {
485
+ return;
486
+ }
487
+
488
+ this.sizes = getSizesForBreakpoints(data.breakpoints || {});
489
+
490
+ this.setState({
491
+ state: Object.assign(this.rootState, {
492
+ deviceSize: this.deviceSizeState,
493
+ // TODO: will user attributes be ready here?
494
+ device: this.device,
495
+ }),
496
+ updates: ((this.state && this.state.updates) || 0) + 1,
497
+ breakpoints: data.breakpoints,
498
+ });
499
+
500
+ break;
501
+ }
502
+
480
503
  case 'builder.updateSpacer': {
481
504
  const data = info.data;
482
505
  const currentSpacer = this.rootState._spacer;
@@ -1011,6 +1034,10 @@ export class BuilderComponent extends React.Component<
1011
1034
  return null;
1012
1035
  }
1013
1036
  if (fullData && fullData.id) {
1037
+ if (this.state.breakpoints) {
1038
+ fullData.meta = fullData.meta || {};
1039
+ fullData.meta.breakpoints = this.state.breakpoints;
1040
+ }
1014
1041
  this.state.context.builderContent = fullData;
1015
1042
  }
1016
1043
  if (Builder.isBrowser) {
@@ -1076,7 +1103,7 @@ export class BuilderComponent extends React.Component<
1076
1103
  block.id?.startsWith('builder-pixel')
1077
1104
  );
1078
1105
 
1079
- if (data && !hasPixel) {
1106
+ if (data && !hasPixel && blocks.length > 0) {
1080
1107
  blocks.push(getBuilderPixel(builder.apiKey!));
1081
1108
  }
1082
1109
 
@@ -1301,12 +1328,13 @@ export class BuilderComponent extends React.Component<
1301
1328
  ...this.state,
1302
1329
  updates: ((this.state && this.state.updates) || 0) + 1,
1303
1330
  state: Object.assign(this.rootState, {
1331
+ // external state first (data and locale prop) to allow overriding those values in editor (which is in this.state.state)
1332
+ ...this.externalState,
1304
1333
  ...this.state.state,
1305
1334
  location: this.locationState,
1306
1335
  deviceSize: this.deviceSizeState,
1307
1336
  device: this.device,
1308
1337
  ...data.state,
1309
- ...this.externalState,
1310
1338
  }),
1311
1339
  };
1312
1340
  if (this.mounted) {
@@ -40,7 +40,7 @@ const sizes = {
40
40
  };
41
41
  export type Sizes = typeof sizes;
42
42
 
43
- interface Breakpoints {
43
+ export interface Breakpoints {
44
44
  small?: number;
45
45
  medium?: number;
46
46
  }
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Builder Pixel Should be added automatically if missing in blocks array 1`] = `
3
+ exports[`Builder Pixel Should NOT be added if missing in blocksString 1`] = `
4
4
  <div
5
5
  className="builder-component builder-component-id"
6
6
  data-name="page"
@@ -21,24 +21,15 @@ exports[`Builder Pixel Should be added automatically if missing in blocks array
21
21
 
22
22
  <div
23
23
  builder-type="blocks"
24
- className="builder-blocks css-h47494"
24
+ className="builder-blocks no-blocks css-h47494"
25
25
  onClick={[Function]}
26
- >
27
- <img
28
- aria-hidden="true"
29
- builder-id="builder-pixel-4fzzzxjylrx"
30
- className="builder-block builder-pixel-4fzzzxjylrx css-1mvsfya"
31
- role="presentation"
32
- src="https://cdn.builder.io/api/v1/pixel?apiKey=null"
33
- style={Object {}}
34
- />
35
- </div>
26
+ />
36
27
  </div>
37
28
  </div>
38
29
  </div>
39
30
  `;
40
31
 
41
- exports[`Builder Pixel Should be added automatically if missing in blocksString 1`] = `
32
+ exports[`Builder Pixel Should NOT be added again if already present in blocks array 1`] = `
42
33
  <div
43
34
  className="builder-component builder-component-id"
44
35
  data-name="page"
@@ -76,7 +67,36 @@ exports[`Builder Pixel Should be added automatically if missing in blocksString
76
67
  </div>
77
68
  `;
78
69
 
79
- exports[`Builder Pixel Should not be added if already present in blocks array 1`] = `
70
+ exports[`Builder Pixel Should NOT be added if missing in blocks array 1`] = `
71
+ <div
72
+ className="builder-component builder-component-id"
73
+ data-name="page"
74
+ data-source="Rendered by Builder.io"
75
+ onClick={[Function]}
76
+ >
77
+ <div
78
+ builder-content-id="id"
79
+ builder-model="page"
80
+ className="builder-content"
81
+ onClick={[Function]}
82
+ >
83
+ <div
84
+ data-builder-component="page"
85
+ data-builder-content-id="id"
86
+ data-builder-variation-id="id"
87
+ >
88
+
89
+ <div
90
+ builder-type="blocks"
91
+ className="builder-blocks no-blocks css-h47494"
92
+ onClick={[Function]}
93
+ />
94
+ </div>
95
+ </div>
96
+ </div>
97
+ `;
98
+
99
+ exports[`Builder Pixel Should be added if pixel is missing and blocks array has other block(s) 1`] = `
80
100
  <div
81
101
  className="builder-component builder-component-id"
82
102
  data-name="page"
@@ -100,6 +120,24 @@ exports[`Builder Pixel Should not be added if already present in blocks array 1`
100
120
  className="builder-blocks css-h47494"
101
121
  onClick={[Function]}
102
122
  >
123
+ <div
124
+ builder-id="builder-270035a08d734ae88ea177daff3595c0"
125
+ className="builder-block builder-270035a08d734ae88ea177daff3595c0 builder-has-component css-hgfgng"
126
+ style={Object {}}
127
+ >
128
+ <span
129
+ className="builder-text css-1qggkls"
130
+ dangerouslySetInnerHTML={
131
+ Object {
132
+ "__html": "<p>some text...</p>",
133
+ }
134
+ }
135
+ onBlur={[Function]}
136
+ onFocus={[Function]}
137
+ onInput={[Function]}
138
+ onKeyDown={[Function]}
139
+ />
140
+ </div>
103
141
  <img
104
142
  aria-hidden="true"
105
143
  builder-id="builder-pixel-4fzzzxjylrx"
@@ -184,7 +184,7 @@ describe('Content changes when new content provided', () => {
184
184
  });
185
185
 
186
186
  describe('Builder Pixel', () => {
187
- it('Should be added automatically if missing in blocksString', () => {
187
+ it('Should NOT be added if missing in blocksString', () => {
188
188
  const renderedBlock = reactTestRenderer.create(
189
189
  <BuilderPage
190
190
  model="page"
@@ -199,7 +199,7 @@ describe('Builder Pixel', () => {
199
199
  expect(renderedBlock).toMatchSnapshot();
200
200
  });
201
201
 
202
- it('Should be added automatically if missing in blocks array', () => {
202
+ it('Should NOT be added if missing in blocks array', () => {
203
203
  const renderedBlock = reactTestRenderer.create(
204
204
  <BuilderPage
205
205
  model="page"
@@ -215,7 +215,7 @@ describe('Builder Pixel', () => {
215
215
  expect(renderedBlock).toMatchSnapshot();
216
216
  });
217
217
 
218
- it('Should not be added if already present in blocks array', () => {
218
+ it('Should NOT be added again if already present in blocks array', () => {
219
219
  const renderedBlock = reactTestRenderer.create(
220
220
  <BuilderPage
221
221
  model="page"
@@ -230,4 +230,44 @@ describe('Builder Pixel', () => {
230
230
 
231
231
  expect(renderedBlock).toMatchSnapshot();
232
232
  });
233
+
234
+ it('Should be added if pixel is missing and blocks array has other block(s)', () => {
235
+ const renderedBlock = reactTestRenderer.create(
236
+ <BuilderPage
237
+ model="page"
238
+ content={{
239
+ id: 'id',
240
+ data: {
241
+ blocks: [
242
+ {
243
+ '@type': '@builder.io/sdk:Element',
244
+ '@version': 2,
245
+ id: 'builder-270035a08d734ae88ea177daff3595c0',
246
+ component: {
247
+ name: 'Text',
248
+ options: {
249
+ text: '<p>some text...</p>',
250
+ },
251
+ },
252
+ responsiveStyles: {
253
+ large: {
254
+ display: 'flex',
255
+ flexDirection: 'column',
256
+ position: 'relative',
257
+ flexShrink: '0',
258
+ boxSizing: 'border-box',
259
+ marginTop: '20px',
260
+ lineHeight: 'normal',
261
+ height: 'auto',
262
+ },
263
+ },
264
+ },
265
+ ],
266
+ },
267
+ }}
268
+ />
269
+ );
270
+
271
+ expect(renderedBlock).toMatchSnapshot();
272
+ });
233
273
  });