@builder.io/react 2.0.11-5 → 2.0.12-0

package/dist/lib/test/basic.test.js

@@ -157,7 +157,7 @@ describe('Content changes when new content provided', function () {
     });
 });
 describe('Builder Pixel', function () {
-    it('Should be added automatically if missing in blocksString', function () {
+    it('Should NOT be added if missing in blocksString', function () {
         var renderedBlock = reactTestRenderer.create(React.createElement(builder_react_1.BuilderPage, { model: "page", content: {
                 id: 'id',
                 data: {
@@ -166,7 +166,7 @@ describe('Builder Pixel', function () {
             } }));
         expect(renderedBlock).toMatchSnapshot();
     });
-    it('Should be added automatically if missing in blocks array', function () {
+    it('Should NOT be added if missing in blocks array', function () {
         var renderedBlock = reactTestRenderer.create(React.createElement(builder_react_1.BuilderPage, { model: "page", content: {
                 id: 'id',
                 data: {
@@ -175,7 +175,7 @@ describe('Builder Pixel', function () {
             } }));
         expect(renderedBlock).toMatchSnapshot();
     });
-    it('Should not be added if already present in blocks array', function () {
+    it('Should NOT be added again if already present in blocks array', function () {
         var renderedBlock = reactTestRenderer.create(React.createElement(builder_react_1.BuilderPage, { model: "page", content: {
                 id: 'id',
                 data: {
@@ -184,5 +184,38 @@ describe('Builder Pixel', function () {
             } }));
         expect(renderedBlock).toMatchSnapshot();
     });
+    it('Should be added if pixel is missing and blocks array has other block(s)', function () {
+        var renderedBlock = reactTestRenderer.create(React.createElement(builder_react_1.BuilderPage, { model: "page", content: {
+                id: 'id',
+                data: {
+                    blocks: [
+                        {
+                            '@type': '@builder.io/sdk:Element',
+                            '@version': 2,
+                            id: 'builder-270035a08d734ae88ea177daff3595c0',
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: '<p>some text...</p>',
+                                },
+                            },
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    position: 'relative',
+                                    flexShrink: '0',
+                                    boxSizing: 'border-box',
+                                    marginTop: '20px',
+                                    lineHeight: 'normal',
+                                    height: 'auto',
+                                },
+                            },
+                        },
+                    ],
+                },
+            } }));
+        expect(renderedBlock).toMatchSnapshot();
+    });
 });
 //# sourceMappingURL=basic.test.js.map

package/dist/lib/test/basic.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic.test.js","sourceRoot":"","sources":["../../../test/basic.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"basic.test.js","sourceRoot":"","sources":["../../../test/basic.test.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/blocks/Image.d.ts

@@ -1,5 +1,6 @@
 import { BuilderElement } from '@builder.io/sdk';
+import { Breakpoints } from '../constants/device-sizes.constant';
 export declare function updateQueryParam(uri: string | undefined, key: string, value: string | number | boolean): string;
 export declare function getSrcSet(url: string): string;
-export declare const getSizes: (sizes: string, block: BuilderElement) => string;
+export declare const getSizes: (sizes: string, block: BuilderElement, contentBreakpoints?: Breakpoints) => string;
 export declare const Image: Function;

package/dist/types/src/components/builder-component.component.d.ts

@@ -4,6 +4,7 @@ import { BuilderContent } from './builder-content.component';
 import { Builder, GetContentOptions, Subscription, BehaviorSubject, BuilderElement, BuilderContent as Content } from '@builder.io/sdk';
 import onChange from '../../lib/on-change';
 export { onChange };
+import { Breakpoints } from '../constants/device-sizes.constant';
 import { Url } from 'url';
 export interface BuilderComponentProps {
     /**
@@ -193,6 +194,7 @@ export interface BuilderComponentState {
     updates: number;
     context: any;
     key: number;
+    breakpoints?: Breakpoints;
 }
 /**
  * Responsible for rendering Builder content of type: 'page' or 'section' to
@@ -279,7 +281,6 @@ export declare class BuilderComponent extends React.Component<BuilderComponentPr
     get deviceSizeState(): string;
     messageListener: (event: MessageEvent) => void;
     resizeFn: () => void;
-    resizeListener: (this: any) => any;
     static renderInto(elementOrSelector: string | HTMLElement, props?: BuilderComponentProps, hydrate?: boolean, fresh?: boolean): void;
     mounted: boolean;
     componentDidMount(): void;

package/dist/types/src/constants/device-sizes.constant.d.ts

@@ -25,7 +25,7 @@ declare const sizes: {
     getSizeForWidth(width: number): Size;
 };
 export declare type Sizes = typeof sizes;
-interface Breakpoints {
+export interface Breakpoints {
     small?: number;
     medium?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "2.0.11-5",
+  "version": "2.0.12-0",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",

package/src/blocks/Columns.tsx

@@ -6,6 +6,7 @@ import { BuilderElement } from '@builder.io/sdk';
 import { BuilderBlocks } from '../components/builder-blocks.component';
 import { withBuilder } from '../functions/with-builder';
 import { Link } from '../components/Link';
+import { Breakpoints, getSizesForBreakpoints } from '../constants/device-sizes.constant';
 
 const DEFAULT_ASPECT_RATIO = 0.7004048582995948;
 
@@ -85,6 +86,9 @@ class ColumnsComponent extends React.Component<any> {
 
   render() {
     const { columns, gutterSize } = this;
+    const contentBreakpoints: Breakpoints =
+      this.props.builderState?.context.builderContent?.meta?.breakpoints || {};
+    const breakpointSizes = getSizesForBreakpoints(contentBreakpoints);
 
     return (
       // FIXME: make more elegant
@@ -94,7 +98,11 @@ class ColumnsComponent extends React.Component<any> {
           css={{
             display: 'flex',
             ...(this.props.stackColumnsAt !== 'never' && {
-              [`@media (max-width: ${this.props.stackColumnsAt !== 'tablet' ? 639 : 991}px)`]: {
+              [`@media (max-width: ${
+                this.props.stackColumnsAt !== 'tablet'
+                  ? breakpointSizes.small.max
+                  : breakpointSizes.medium.max
+              }px)`]: {
                 flexDirection: this.props.reverseColumnsWhenStacked ? 'column-reverse' : 'column',
                 alignItems: 'stretch',
               },
@@ -125,7 +133,9 @@ class ColumnsComponent extends React.Component<any> {
                     marginLeft: index === 0 ? 0 : gutterSize,
                     ...(this.props.stackColumnsAt !== 'never' && {
                       [`@media (max-width: ${
-                        this.props.stackColumnsAt !== 'tablet' ? 639 : 991
+                        this.props.stackColumnsAt !== 'tablet'
+                          ? breakpointSizes.small.max
+                          : breakpointSizes.medium.max
                       }px)`]: {
                         width: '100%',
                         marginLeft: 0,

package/src/blocks/Image.tsx

@@ -7,6 +7,7 @@ import { BuilderElement, Builder } from '@builder.io/sdk';
 import { BuilderMetaContext } from '../store/builder-meta';
 import { withBuilder } from '../functions/with-builder';
 import { throttle } from '../functions/throttle';
+import { Breakpoints, getSizesForBreakpoints } from '../constants/device-sizes.constant';
 
 // Taken from (and modified) the shopify theme script repo
 // https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
@@ -92,7 +93,11 @@ export function getSrcSet(url: string): string {
   return url;
 }
 
-export const getSizes = (sizes: string, block: BuilderElement) => {
+export const getSizes = (
+  sizes: string,
+  block: BuilderElement,
+  contentBreakpoints: Breakpoints = {}
+) => {
   let useSizes = '';
 
   if (sizes) {
@@ -117,9 +122,10 @@ export const getSizes = (sizes: string, block: BuilderElement) => {
     let hasSmallOrMediumSize = false;
     const unitRegex = /^\d+/;
 
+    const breakpointSizes = getSizesForBreakpoints(contentBreakpoints);
     if (block.responsiveStyles?.small?.width?.match(unitRegex)) {
       hasSmallOrMediumSize = true;
-      const mediaQuery = '(max-width: 639px)';
+      const mediaQuery = `(max-width: ${breakpointSizes.small.max}px)`;
       const widthAndQuery = `${mediaQuery} ${block.responsiveStyles.small.width.replace(
         '%',
         'vw'
@@ -129,7 +135,7 @@ export const getSizes = (sizes: string, block: BuilderElement) => {
 
     if (block.responsiveStyles?.medium?.width?.match(unitRegex)) {
       hasSmallOrMediumSize = true;
-      const mediaQuery = '(max-width: 991px)';
+      const mediaQuery = `(max-width: ${breakpointSizes.medium.max}px)`;
       const widthAndQuery = `${mediaQuery} ${block.responsiveStyles.medium.width.replace(
         '%',
         'vw'
@@ -267,11 +273,15 @@ class ImageComponent extends React.Component<any, { imageLoaded: boolean; load:
   }
 
   render() {
-    const { aspectRatio, lazy } = this.props;
+    const { aspectRatio, lazy, builderBlock, builderState } = this.props;
     const children = this.props.builderBlock && this.props.builderBlock.children;
 
     let srcset = this.props.srcset;
-    const sizes = getSizes(this.props.sizes, this.props.builderBlock);
+    const sizes = getSizes(
+      this.props.sizes,
+      builderBlock,
+      builderState?.context.builderContent?.meta?.breakpoints || {}
+    );
     const image = this.image;
 
     if (srcset && image && image.includes('builder.io/api/v1/image')) {
@@ -283,7 +293,7 @@ class ImageComponent extends React.Component<any, { imageLoaded: boolean; load:
       srcset = this.getSrcSet();
     }
 
-    const isPixel = this.props.builderBlock?.id.startsWith('builder-pixel-');
+    const isPixel = builderBlock?.id.startsWith('builder-pixel-');
     const { fitContent } = this.props;
 
     return (

package/src/components/builder-block.component.tsx

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-
 import { Builder, builder, BuilderElement, Component } from '@builder.io/sdk';
 import { ClassNames, jsx } from '@emotion/core';
 import React from 'react';

package/src/components/builder-component.component.tsx

@@ -18,7 +18,7 @@ import onChange from '../../lib/on-change';
 
 export { onChange };
 
-import { getSizesForBreakpoints, Sizes } from '../constants/device-sizes.constant';
+import { Breakpoints, getSizesForBreakpoints, Sizes } from '../constants/device-sizes.constant';
 import {
   BuilderAsyncRequestsContext,
   RequestOrPromise,
@@ -291,6 +291,7 @@ export interface BuilderComponentState {
   updates: number;
   context: any;
   key: number;
+  breakpoints?: Breakpoints;
 }
 
 function searchToObject(location: Location | Url) {
@@ -477,6 +478,28 @@ export class BuilderComponent extends React.Component<
   messageListener = (event: MessageEvent) => {
     const info = event.data;
     switch (info.type) {
+      case 'builder.configureSdk': {
+        const data = info.data;
+
+        if (!data.contentId || data.contentId !== this.useContent?.id) {
+          return;
+        }
+
+        this.sizes = getSizesForBreakpoints(data.breakpoints || {});
+
+        this.setState({
+          state: Object.assign(this.rootState, {
+            deviceSize: this.deviceSizeState,
+            // TODO: will user attributes be ready here?
+            device: this.device,
+          }),
+          updates: ((this.state && this.state.updates) || 0) + 1,
+          breakpoints: data.breakpoints,
+        });
+
+        break;
+      }
+
       case 'builder.updateSpacer': {
         const data = info.data;
         const currentSpacer = this.rootState._spacer;
@@ -535,8 +558,6 @@ export class BuilderComponent extends React.Component<
     }
   };
 
-  resizeListener = Builder.isEditing ? throttle(this.resizeFn, 200) : debounce(this.resizeFn, 400);
-
   static renderInto(
     elementOrSelector: string | HTMLElement,
     props: BuilderComponentProps = {},
@@ -669,7 +690,6 @@ export class BuilderComponent extends React.Component<
 
     if (Builder.isBrowser) {
       // TODO: remove event on unload
-      window.addEventListener('resize', this.resizeListener);
       if (Builder.isEditing) {
         window.addEventListener('message', this.messageListener);
       }
@@ -801,7 +821,6 @@ export class BuilderComponent extends React.Component<
   componentWillUnmount() {
     this.unsubscribe();
     if (Builder.isBrowser) {
-      window.removeEventListener('resize', this.resizeListener);
       window.removeEventListener('message', this.messageListener);
     }
   }
@@ -1011,6 +1030,10 @@ export class BuilderComponent extends React.Component<
                           return null;
                         }
                         if (fullData && fullData.id) {
+                          if (this.state.breakpoints) {
+                            fullData.meta = fullData.meta || {};
+                            fullData.meta.breakpoints = this.state.breakpoints;
+                          }
                           this.state.context.builderContent = fullData;
                         }
                         if (Builder.isBrowser) {
@@ -1076,7 +1099,7 @@ export class BuilderComponent extends React.Component<
                           block.id?.startsWith('builder-pixel')
                         );
 
-                        if (data && !hasPixel) {
+                        if (data && !hasPixel && blocks.length > 0) {
                           blocks.push(getBuilderPixel(builder.apiKey!));
                         }
 

package/src/constants/device-sizes.constant.ts

@@ -40,7 +40,7 @@ const sizes = {
 };
 export type Sizes = typeof sizes;
 
-interface Breakpoints {
+export interface Breakpoints {
   small?: number;
   medium?: number;
 }

package/test/__snapshots__/basic.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Builder Pixel Should be added automatically if missing in blocks array 1`] = `
+exports[`Builder Pixel Should NOT be added if missing in blocksString 1`] = `
 <div
   className="builder-component builder-component-id"
   data-name="page"
@@ -21,24 +21,15 @@ exports[`Builder Pixel Should be added automatically if missing in blocks array
       
       <div
         builder-type="blocks"
-        className="builder-blocks css-h47494"
+        className="builder-blocks no-blocks css-h47494"
         onClick={[Function]}
-      >
-        <img
-          aria-hidden="true"
-          builder-id="builder-pixel-4fzzzxjylrx"
-          className="builder-block builder-pixel-4fzzzxjylrx css-1mvsfya"
-          role="presentation"
-          src="https://cdn.builder.io/api/v1/pixel?apiKey=null"
-          style={Object {}}
-        />
-      </div>
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`Builder Pixel Should be added automatically if missing in blocksString 1`] = `
+exports[`Builder Pixel Should NOT be added again if already present in blocks array 1`] = `
 <div
   className="builder-component builder-component-id"
   data-name="page"
@@ -76,7 +67,36 @@ exports[`Builder Pixel Should be added automatically if missing in blocksString
 </div>
 `;
 
-exports[`Builder Pixel Should not be added if already present in blocks array 1`] = `
+exports[`Builder Pixel Should NOT be added if missing in blocks array 1`] = `
+<div
+  className="builder-component builder-component-id"
+  data-name="page"
+  data-source="Rendered by Builder.io"
+  onClick={[Function]}
+>
+  <div
+    builder-content-id="id"
+    builder-model="page"
+    className="builder-content"
+    onClick={[Function]}
+  >
+    <div
+      data-builder-component="page"
+      data-builder-content-id="id"
+      data-builder-variation-id="id"
+    >
+      
+      <div
+        builder-type="blocks"
+        className="builder-blocks no-blocks css-h47494"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Builder Pixel Should be added if pixel is missing and blocks array has other block(s) 1`] = `
 <div
   className="builder-component builder-component-id"
   data-name="page"
@@ -100,6 +120,24 @@ exports[`Builder Pixel Should not be added if already present in blocks array 1`
         className="builder-blocks css-h47494"
         onClick={[Function]}
       >
+        <div
+          builder-id="builder-270035a08d734ae88ea177daff3595c0"
+          className="builder-block builder-270035a08d734ae88ea177daff3595c0 builder-has-component css-hgfgng"
+          style={Object {}}
+        >
+          <span
+            className="builder-text css-1qggkls"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<p>some text...</p>",
+              }
+            }
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            onKeyDown={[Function]}
+          />
+        </div>
         <img
           aria-hidden="true"
           builder-id="builder-pixel-4fzzzxjylrx"

package/test/basic.test.tsx

@@ -184,7 +184,7 @@ describe('Content changes when new content provided', () => {
 });
 
 describe('Builder Pixel', () => {
-  it('Should be added automatically if missing in blocksString', () => {
+  it('Should NOT be added if missing in blocksString', () => {
     const renderedBlock = reactTestRenderer.create(
       <BuilderPage
         model="page"
@@ -199,7 +199,7 @@ describe('Builder Pixel', () => {
     expect(renderedBlock).toMatchSnapshot();
   });
 
-  it('Should be added automatically if missing in blocks array', () => {
+  it('Should NOT be added if missing in blocks array', () => {
     const renderedBlock = reactTestRenderer.create(
       <BuilderPage
         model="page"
@@ -215,7 +215,7 @@ describe('Builder Pixel', () => {
     expect(renderedBlock).toMatchSnapshot();
   });
 
-  it('Should not be added if already present in blocks array', () => {
+  it('Should NOT be added again if already present in blocks array', () => {
     const renderedBlock = reactTestRenderer.create(
       <BuilderPage
         model="page"
@@ -230,4 +230,44 @@ describe('Builder Pixel', () => {
 
     expect(renderedBlock).toMatchSnapshot();
   });
+
+  it('Should be added if pixel is missing and blocks array has other block(s)', () => {
+    const renderedBlock = reactTestRenderer.create(
+      <BuilderPage
+        model="page"
+        content={{
+          id: 'id',
+          data: {
+            blocks: [
+              {
+                '@type': '@builder.io/sdk:Element',
+                '@version': 2,
+                id: 'builder-270035a08d734ae88ea177daff3595c0',
+                component: {
+                  name: 'Text',
+                  options: {
+                    text: '<p>some text...</p>',
+                  },
+                },
+                responsiveStyles: {
+                  large: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    position: 'relative',
+                    flexShrink: '0',
+                    boxSizing: 'border-box',
+                    marginTop: '20px',
+                    lineHeight: 'normal',
+                    height: 'auto',
+                  },
+                },
+              },
+            ],
+          },
+        }}
+      />
+    );
+
+    expect(renderedBlock).toMatchSnapshot();
+  });
 });