@builder.io/react 2.0.7 → 2.0.8-0

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

@@ -1,6 +1,6 @@
 export declare type Size = 'large' | 'medium' | 'small' | 'xsmall';
 export declare const sizeNames: Size[];
-export declare const sizes: {
+declare const sizes: {
     xsmall: {
         min: number;
         default: number;
@@ -24,3 +24,33 @@ export declare const sizes: {
     getWidthForSize(size: Size): number;
     getSizeForWidth(width: number): Size;
 };
+export declare type Sizes = typeof sizes;
+interface Breakpoints {
+    small?: number;
+    medium?: number;
+}
+export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => {
+    xsmall: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    small: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    medium: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    large: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    getWidthForSize(size: Size): number;
+    getSizeForWidth(width: number): Size;
+};
+export {};

package/dist/types/src/functions/apply-patch.d.ts

@@ -0,0 +1,5 @@
+export declare const applyPatch: <T extends object>(obj: T, patch: {
+    path: string;
+    op: 'add' | 'remove' | 'replace';
+    value: any;
+}) => T;

package/dist/types/src/functions/apply-patch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/functions/utils.d.ts

@@ -0,0 +1 @@
+export declare const fastClone: <T extends object>(obj: T) => T;

package/jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
     'ts-jest': {
       tsConfig: 'tsconfig.json',
       diagnostics: false,
+      useESM: true,
     },
   },
   testEnvironment: 'node',
@@ -20,4 +21,8 @@ module.exports = {
     },
   },
   collectCoverage: true,
+  moduleNameMapper: {
+    '(.+)\\.js': '$1',
+  },
+  extensionsToTreatAsEsm: ['.ts'],
 };

package/package.json

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

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

@@ -3,7 +3,7 @@
 import { Builder, builder, BuilderElement, Component } from '@builder.io/sdk';
 import { ClassNames, jsx } from '@emotion/core';
 import React from 'react';
-import { Size, sizeNames, sizes } from '../constants/device-sizes.constant';
+import { getSizesForBreakpoints, Size, sizeNames } from '../constants/device-sizes.constant';
 import { set } from '../functions/set';
 import { api, stringToFunction } from '../functions/string-to-function';
 import { BuilderAsyncRequestsContext, RequestOrPromise } from '../store/builder-async-requests';
@@ -11,6 +11,8 @@ import { BuilderStoreContext } from '../store/builder-store';
 import { applyPatchWithMinimalMutationChain } from '../functions/apply-patch-with-mutation';
 import { blockToHtmlString } from '../functions/block-to-html-string';
 import { Link } from './Link';
+import { fastClone } from '../functions/utils';
+import { applyPatch } from '../functions/apply-patch';
 
 const camelCaseToKebabCase = (str?: string) =>
   str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
@@ -62,9 +64,6 @@ const cssCase = (property: string) => {
   return str;
 };
 
-// TODO: pull from builer internal utils
-const fastClone = (obj: object) => JSON.parse(JSON.stringify(obj));
-
 // TODO: share these types in shared
 type ElementType = any;
 
@@ -166,7 +165,10 @@ export class BuilderBlock extends React.Component<
             );
           }
         } else {
-          styles[`@media only screen and (max-width: ${sizes[size].max}px)`] = {
+          const sizesPerBreakpoints = getSizesForBreakpoints(
+            this.privateState.context.builderContent?.meta?.breakpoints || {}
+          );
+          styles[`@media only screen and (max-width: ${sizesPerBreakpoints[size].max}px)`] = {
             '&.builder-block': self.responsiveStyles[size],
           };
         }
@@ -251,7 +253,7 @@ export class BuilderBlock extends React.Component<
           eval('debugger');
         }
         for (const patch of patches) {
-          applyPatchWithMinimalMutationChain(this.props.block, patch, true);
+          applyPatch(this.props.block, patch);
         }
         this.setState({ updates: this.state.updates + 1 });
 
@@ -635,7 +637,13 @@ export class BuilderBlock extends React.Component<
 
     if (block.repeat && block.repeat.collection) {
       const collectionPath = block.repeat.collection;
-      const collectionName = last((collectionPath || '').trim().split('(')[0].trim().split('.'));
+      const collectionName = last(
+        (collectionPath || '')
+          .trim()
+          .split('(')[0]
+          .trim()
+          .split('.')
+      );
       const itemName = block.repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
       const array = this.stringToFunction(collectionPath)(
         state.state,

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

@@ -18,7 +18,7 @@ import onChange from '../../lib/on-change';
 
 export { onChange };
 
-import { sizes } from '../constants/device-sizes.constant';
+import { getSizesForBreakpoints, Sizes } from '../constants/device-sizes.constant';
 import {
   BuilderAsyncRequestsContext,
   RequestOrPromise,
@@ -361,6 +361,7 @@ export class BuilderComponent extends React.Component<
   private _asyncRequests?: RequestOrPromise[];
   private _errors?: Error[];
   private _logs?: string[];
+  private sizes: Sizes;
 
   get element() {
     return this.ref;
@@ -376,6 +377,13 @@ export class BuilderComponent extends React.Component<
   constructor(props: BuilderComponentProps) {
     super(props);
 
+    let _content: any = this.inlinedContent;
+    if (_content && _content.content) {
+      _content = _content.content;
+    }
+
+    this.sizes = getSizesForBreakpoints(_content?.meta?.breakpoints || {});
+
     // TODO: pass this all the way down - symbols, etc
     // this.asServer = Boolean(props.hydrate && Builder.isBrowser)
 
@@ -461,7 +469,7 @@ export class BuilderComponent extends React.Component<
   get deviceSizeState() {
     // TODO: use context to pass this down on server
     return Builder.isBrowser
-      ? sizes.getSizeForWidth(window.innerWidth)
+      ? this.sizes.getSizeForWidth(window.innerWidth)
       : sizeMap[this.device] || 'large';
   }
 

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

@@ -1,8 +1,10 @@
+import { fastClone } from '../functions/utils';
+
 export type Size = 'large' | 'medium' | 'small' | 'xsmall';
 export const sizeNames: Size[] = ['xsmall', 'small', 'medium', 'large'];
 
 // TODO: put in @builder.io/core
-export const sizes = {
+const sizes = {
   xsmall: {
     min: 0,
     default: 0,
@@ -36,3 +38,43 @@ export const sizes = {
     return 'large';
   },
 };
+export type Sizes = typeof sizes;
+
+interface Breakpoints {
+  small?: number;
+  medium?: number;
+}
+
+export const getSizesForBreakpoints = ({ small, medium }: Breakpoints) => {
+  const newSizes = {
+    ...sizes, // Note: this helps get the function from sizes
+    ...fastClone(sizes), // Note: this helps to get a deep clone of fields like small, medium etc
+  };
+
+  if (!small || !medium) {
+    return newSizes;
+  }
+
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1,
+  };
+
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1,
+  };
+
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2000, // TODO: decide upper limit
+    min: largeMin,
+    default: largeMin + 1,
+  };
+
+  return newSizes;
+};

package/src/functions/apply-patch.test.ts

@@ -0,0 +1,90 @@
+import { applyPatch } from './apply-patch.js';
+
+describe('applyPatch', () => {
+  test('Basic shallow update', () => {
+    const obj = {
+      foo: 'bar',
+    };
+    const patch = {
+      op: 'replace',
+      path: '/foo',
+      value: '60px',
+    } as const;
+    const applied = applyPatch(obj, patch);
+    expect(applied.foo).toBe('60px');
+    expect(applied).toBe(obj);
+  });
+
+  test('Deep object updates', () => {
+    const obj = {
+      foo: {
+        bar: true,
+      },
+      baz: {},
+    };
+    const patch = {
+      op: 'replace',
+      path: '/foo/bar',
+      value: '60px',
+    } as const;
+    const applied = applyPatch(obj, patch);
+    expect(applied.foo.bar).toBe('60px');
+    expect(applied).toBe(obj);
+    expect(applied.foo).toBe(obj.foo);
+    expect(applied.baz).toBe(obj.baz);
+
+    applyPatch(obj, {
+      op: 'add',
+      path: 'foo/baz',
+      value: 'hi',
+    });
+    expect((applied.foo as any).baz).toBe('hi');
+
+    applyPatch(obj, {
+      op: 'remove',
+      path: 'foo/baz',
+      value: undefined,
+    });
+    expect((applied.foo as any).baz).toBe(undefined);
+  });
+
+  test('Deep array updates', () => {
+    const obj = {
+      foo: [{ bar: true }],
+      baz: {},
+    };
+    const patch = {
+      op: 'replace',
+      path: '/foo/0/bar',
+      value: '60px',
+    } as const;
+
+    const applied = applyPatch(obj, patch);
+    expect(applied.foo[0].bar).toBe('60px');
+    expect(applied).toBe(obj);
+    expect(applied.foo).toBe(obj.foo);
+    expect(applied.foo[0]).toBe(obj.foo[0]);
+    expect(applied.baz).toBe(obj.baz);
+
+    const patch2 = {
+      op: 'add',
+      path: '/foo/0',
+      value: '60px',
+    } as const;
+    const obj2 = {
+      foo: [{ bar: true }],
+      baz: {},
+    };
+    applyPatch(obj2, patch2);
+    expect(obj2.foo[0]).toBe('60px');
+    expect(obj2.foo[1]).toMatchObject({ bar: true });
+
+    applyPatch(obj2, {
+      op: 'remove',
+      path: '/foo/0',
+      value: undefined,
+    });
+    expect(obj2.foo[0]).toMatchObject({ bar: true });
+    expect(obj2.foo.length).toBe(1);
+  });
+});

package/src/functions/apply-patch.ts

@@ -0,0 +1,37 @@
+import { get } from './get.js';
+import { set } from './set.js';
+
+export const applyPatch = <T extends object>(
+  obj: T,
+  patch: { path: string; op: 'add' | 'remove' | 'replace'; value: any }
+): T => {
+  const pathArr: string[] = patch.path.split('/');
+
+  // If starts with slash
+  if (pathArr[0] === '') {
+    pathArr.shift();
+  }
+  if (patch.op === 'replace') {
+    set(obj, pathArr, patch.value);
+    return obj;
+  }
+
+  const lastChunk = get(obj, pathArr.slice(0, -1).join('.'));
+  if (patch.op === 'add') {
+    const newKey = pathArr.slice(-1)[0];
+    if (Array.isArray(lastChunk)) {
+      lastChunk.splice(Number(newKey), 0, patch.value);
+    } else {
+      lastChunk[newKey] = patch.value;
+    }
+  } else if (patch.op === 'remove') {
+    const key = pathArr.slice(-1)[0];
+    if (Array.isArray(lastChunk)) {
+      lastChunk.splice(Number(key), 1);
+    } else {
+      delete lastChunk[key];
+    }
+  }
+
+  return obj;
+};

package/src/functions/try-eval.tsx

@@ -36,7 +36,7 @@ export const tryEval = (str?: string, data: any = {}, errors?: Error[]): any =>
         }`
       );
     }
-  } catch (error) {
+  } catch (error: any) {
     if (Builder.isBrowser) {
       console.warn('Could not compile javascript', error);
     } else {

package/src/functions/utils.ts

@@ -0,0 +1,2 @@
+// TODO: pull from builder internal utils
+export const fastClone = <T extends object>(obj: T): T => JSON.parse(JSON.stringify(obj));

package/src/scripts/init-editing.ts

@@ -6,7 +6,8 @@ if (typeof window !== 'undefined') {
       type: 'builder.isReactSdk',
       data: {
         value: true,
-        supportsPatchUpdates: 'v4',
+        supportsPatchUpdates: 'v5',
+        supportsCustomBreakpoints: true,
         priorVersion: version,
       },
     },