@builder.io/react 2.0.4-0 → 2.0.4-11

package/dist/lib/src/functions/apply-patch-with-mutation.test.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var apply_patch_with_mutation_1 = require("./apply-patch-with-mutation");
+describe('applyPatchWithMinimalMutationChain', function () {
+    test('Basic shallow update', function () {
+        var obj = {
+            foo: 'bar',
+        };
+        var patch = {
+            op: 'replace',
+            path: '/foo',
+            value: '60px',
+        };
+        var applied = (0, apply_patch_with_mutation_1.applyPatchWithMinimalMutationChain)(obj, patch);
+        expect(applied.foo).toBe('60px');
+        expect(applied).not.toBe(obj);
+    });
+    test('Deep object updates', function () {
+        var obj = {
+            foo: {
+                bar: true,
+            },
+            baz: {},
+        };
+        var patch = {
+            op: 'replace',
+            path: '/foo/bar',
+            value: '60px',
+        };
+        var applied = (0, apply_patch_with_mutation_1.applyPatchWithMinimalMutationChain)(obj, patch);
+        expect(applied.foo.bar).toBe('60px');
+        expect(applied).not.toBe(obj);
+        expect(applied.foo).not.toBe(obj.foo);
+        expect(applied.baz).toBe(obj.baz);
+    });
+    test('Deep array updates', function () {
+        var obj = {
+            foo: [{ bar: true }],
+            baz: {},
+        };
+        var patch = {
+            op: 'replace',
+            path: '/foo/0/bar',
+            value: '60px',
+        };
+        var applied = (0, apply_patch_with_mutation_1.applyPatchWithMinimalMutationChain)(obj, patch);
+        expect(applied.foo[0].bar).toBe('60px');
+        expect(applied).not.toBe(obj);
+        expect(applied.foo).not.toBe(obj.foo);
+        expect(applied.foo[0]).not.toBe(obj.foo[0]);
+        expect(applied.baz).toBe(obj.baz);
+    });
+});
+//# sourceMappingURL=apply-patch-with-mutation.test.js.map

package/dist/lib/src/functions/apply-patch-with-mutation.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-patch-with-mutation.test.js","sourceRoot":"","sources":["../../../../src/functions/apply-patch-with-mutation.test.ts"],"names":[],"mappings":";;AAAA,yEAAiF;AAEjF,QAAQ,CAAC,oCAAoC,EAAE;IAC7C,IAAI,CAAC,sBAAsB,EAAE;QAC3B,IAAM,GAAG,GAAG;YACV,GAAG,EAAE,KAAK;SACX,CAAC;QACF,IAAM,KAAK,GAAG;YACZ,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;SACL,CAAC;QACX,IAAM,OAAO,GAAG,IAAA,8DAAkC,EAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC/D,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qBAAqB,EAAE;QAC1B,IAAM,GAAG,GAAG;YACV,GAAG,EAAE;gBACH,GAAG,EAAE,IAAI;aACV;YACD,GAAG,EAAE,EAAE;SACR,CAAC;QACF,IAAM,KAAK,GAAG;YACZ,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,MAAM;SACL,CAAC;QACX,IAAM,OAAO,GAAG,IAAA,8DAAkC,EAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC/D,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACrC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,EAAE;QACzB,IAAM,GAAG,GAAG;YACV,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;YACpB,GAAG,EAAE,EAAE;SACR,CAAC;QACF,IAAM,KAAK,GAAG;YACZ,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,MAAM;SACL,CAAC;QAEX,IAAM,OAAO,GAAG,IAAA,8DAAkC,EAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC/D,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACxC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5C,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/lib/src/scripts/init-editing.js

@@ -7,7 +7,7 @@ if (typeof window !== 'undefined') {
         type: 'builder.isReactSdk',
         data: {
             value: true,
-            supportsPatchUpdates: 'v3',
+            supportsPatchUpdates: 'v4',
             priorVersion: package_json_1.version,
         },
     }, '*');

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BuilderElement } from '@builder.io/sdk';
 declare type MutationProps = {
     selector: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type DropzoneProps = {
     name: string;
 };

package/dist/types/src/blocks/raw/RawText.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BuilderElement } from '@builder.io/sdk';
 export interface RawTextProps {
     attributes?: any;

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

@@ -181,6 +181,10 @@ export interface BuilderComponentProps {
      * navigation to other pages unintended
      */
     stopClickPropagationWhenEditing?: boolean;
+    /**
+     * Locale code, should match one of the locales in your spaces locale, wll auto resolve the localized inputs to the localized value
+     */
+    locale?: string;
 }
 export interface BuilderComponentState {
     state: any;
@@ -247,6 +251,7 @@ export declare class BuilderComponent extends React.Component<BuilderComponentPr
         url?: string | undefined;
         isChild?: boolean | undefined;
         stopClickPropagationWhenEditing?: boolean | undefined;
+        locale?: string | undefined;
         children?: React.ReactNode;
     };
     get name(): string | undefined;
@@ -295,6 +300,7 @@ export declare class BuilderComponent extends React.Component<BuilderComponentPr
     checkStyles(data: any): void;
     reload(): void;
     get content(): Content | undefined;
+    get externalState(): any;
     get useContent(): any;
     render(): JSX.Element;
     evalExpression(expression: string): string;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "2.0.4-0",
+  "version": "2.0.4-11",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",
@@ -75,6 +75,7 @@
     "@types/rollup-plugin-commonjs": "^9.2.0",
     "@types/rollup-plugin-json": "^3.0.3",
     "@types/rollup-plugin-node-resolve": "^4.1.0",
+    "@types/traverse": "^0.6.32",
     "colors": "^1.1.2",
     "commitizen": "^4.2.4",
     "coveralls": "^3.0.0",
@@ -123,10 +124,11 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@builder.io/sdk": "^1.1.27",
+    "@builder.io/sdk": "^1.1.28-2",
     "@emotion/core": "^10.0.17",
     "hash-sum": "^2.0.0",
     "preact": "^10.1.0",
+    "traverse": "^0.6.6",
     "vm2": "^3.9.10"
   },
   "gitHead": "4d96fbc32864698afbb355ab991c6d90be991951"

package/src/blocks/Section.tsx

@@ -40,18 +40,23 @@ class SectionComponent extends React.Component<SectionProps, { inView?: boolean
       if (typeof IntersectionObserver === 'undefined' || !this.ref) {
         this.setState({ inView: true });
       } else {
-        const observer = new IntersectionObserver((entries, observer) => {
-          entries.forEach(entry => {
-            if (entry.intersectionRatio > 0) {
-              this.setState({
-                inView: true,
-              });
-              if (this.ref) {
-                observer.unobserve(this.ref);
+        const observer = new IntersectionObserver(
+          (entries, observer) => {
+            entries.forEach(entry => {
+              if (entry.intersectionRatio > 0) {
+                this.setState({
+                  inView: true,
+                });
+                if (this.ref) {
+                  observer.unobserve(this.ref);
+                }
               }
-            }
-          });
-        });
+            });
+          },
+          {
+            rootMargin: '10px',
+          }
+        );
 
         observer.observe(this.ref);
 

package/src/blocks/Symbol.tsx

@@ -121,6 +121,7 @@ class SymbolComponent extends React.Component<SymbolProps> {
                 this.placeholder
               ) : (
                 <BuilderComponent
+                  {...(state.state?.locale && { locale: state.state.locale })}
                   isChild
                   ref={(ref: any) => (this.ref = ref)}
                   context={{ ...state.context, symbolId: this.props.builderBlock?.id }}

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

@@ -18,8 +18,8 @@ const camelCaseToKebabCase = (str?: string) =>
 const kebabCaseToCamelCase = (str = '') =>
   str.replace(/-([a-z])/g, match => match[1].toUpperCase());
 
+
 const Device = { desktop: 0, tablet: 1, mobile: 2 };
-const blocksMap: Record<string, BuilderElement> = {};
 
 const voidElements = new Set([
   'area',
@@ -136,7 +136,7 @@ export class BuilderBlock extends React.Component<
   }
 
   get block() {
-    return blocksMap[this.props.block.id!] || this.props.block;
+    return this.props.block;
   }
 
   get emotionCss() {
@@ -249,17 +249,11 @@ export class BuilderBlock extends React.Component<
         }
 
         if (location.href.includes('builder.debug=true')) {
-          this.eval('debugger');
+          eval('debugger');
         }
-        let newBlock = { ...this.block };
         for (const patch of patches) {
-          // TODO: soehow mark this.block as a new object,
-          // e.g. access it's parent hm. maybe do the listning mutations
-          // on hte parent element not the child (or rather
-          // send the message to the parent)
-          applyPatchWithMinimalMutationChain(newBlock, patch);
+          applyPatchWithMinimalMutationChain(this.props.block, patch, true);
         }
-        blocksMap[this.props.block.id!] = newBlock;
         this.setState({ updates: this.state.updates + 1 });
 
         break;
@@ -460,9 +454,9 @@ export class BuilderBlock extends React.Component<
     }
 
     const innerComponentProperties = (options.component || options.options) && {
-      ...options.options,
-      ...(options.component.options || options.component.data),
-    };
+        ...options.options,
+        ...(options.component.options || options.component.data),
+      };
 
     const isVoid = voidElements.has(TagName);
 

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

@@ -108,14 +108,16 @@ export class BuilderBlocks extends React.Component<BuilderBlocksProps, BuilderBl
         // TODO: only fi in iframe?
         builder-path={Builder.isIframe ? this.path : undefined}
         builder-parent-id={this.parentId}
-        css={{
-          ...(!this.props.emailMode && {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-          }),
-          ...this.props.style,
-        } as any}
+        css={
+          {
+            ...(!this.props.emailMode && {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'stretch',
+            }),
+            ...this.props.style,
+          } as any
+        }
         onClick={() => {
           if (this.noBlocks) {
             this.onClickEmptyBlocks();

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

@@ -98,7 +98,6 @@ const sizeMap = {
   mobile: 'small',
 };
 
-
 const fetchCache: { [key: string]: any } = {};
 
 export interface BuilderComponentProps {
@@ -277,6 +276,11 @@ export interface BuilderComponentProps {
    * navigation to other pages unintended
    */
   stopClickPropagationWhenEditing?: boolean;
+
+  /**
+   * Locale code, should match one of the locales in your spaces locale, wll auto resolve the localized inputs to the localized value
+   */
+  locale?: string;
 }
 
 export interface BuilderComponentState {
@@ -841,7 +845,7 @@ export class BuilderComponent extends React.Component<
   get data() {
     const data = {
       ...(this.inlinedContent && this.inlinedContent.data?.state),
-      ...this.props.data,
+      ...this.externalState,
       ...this.state.state,
     };
     Object.assign(this.rootState, data);
@@ -852,7 +856,7 @@ export class BuilderComponent extends React.Component<
     // TODO: shallow diff
     if (this.props.data && prevProps.data !== this.props.data) {
       this.state.update((state: any) => {
-        Object.assign(state, this.props.data);
+        Object.assign(state, this.externalState);
       });
     }
 
@@ -892,6 +896,13 @@ export class BuilderComponent extends React.Component<
     return content;
   }
 
+  get externalState() {
+    return {
+      ...this.props.data,
+      ...(this.props.locale ? { locale: this.props.locale } : {}),
+    };
+  }
+
   get useContent() {
     return this.content || this.state.context.builderContent;
   }
@@ -900,7 +911,10 @@ export class BuilderComponent extends React.Component<
     const content = this.content;
 
     const dataString =
-      Builder.isBrowser && this.props.data && size(this.props.data) && hash(this.props.data);
+      Builder.isBrowser &&
+      this.externalState &&
+      size(this.externalState) &&
+      hash(this.externalState);
     let key = Builder.isEditing ? this.name : this.props.entry;
     if (key && !Builder.isEditing && dataString && dataString.length < 300) {
       key += ':' + dataString;
@@ -971,6 +985,7 @@ export class BuilderComponent extends React.Component<
                           !this.isPreviewing && { initialContent: [] }),
                         ...(this.props.url && { url: this.props.url }),
                         ...this.props.options,
+                        ...(this.props.locale ? { locale: this.props.locale } : {}),
                         ...(this.options.codegen && {
                           format: 'react',
                         }),
@@ -1272,7 +1287,7 @@ export class BuilderComponent extends React.Component<
           deviceSize: this.deviceSizeState,
           device: this.device,
           ...data.state,
-          ...this.props.data,
+          ...this.externalState,
         }),
       };
       if (this.mounted) {
@@ -1358,22 +1373,22 @@ export class BuilderComponent extends React.Component<
               const builderModelRe = /builder\.io\/api\/v2\/([^\/\?]+)/i;
               const builderModelMatch = url.match(builderModelRe);
               const model = builderModelMatch && builderModelMatch[1];
-                this.handleRequest(key, finalUrl);
-                const currentSubscription = this.httpSubscriptionPerKey[key];
-                if (currentSubscription) {
-                  currentSubscription.unsubscribe();
-                }
-
-                // TODO: fix this
-                const newSubscription = (this.httpSubscriptionPerKey[key] =
-                  this.onStateChange.subscribe(() => {
-                    const newUrl = this.evalExpression(url);
-                    if (newUrl !== finalUrl) {
-                      this.handleRequest(key, newUrl);
-                      this.lastHttpRequests[key] = newUrl;
-                    }
-                  }));
-                this.subscriptions.add(newSubscription);
+              this.handleRequest(key, finalUrl);
+              const currentSubscription = this.httpSubscriptionPerKey[key];
+              if (currentSubscription) {
+                currentSubscription.unsubscribe();
+              }
+
+              // TODO: fix this
+              const newSubscription = (this.httpSubscriptionPerKey[key] =
+                this.onStateChange.subscribe(() => {
+                  const newUrl = this.evalExpression(url);
+                  if (newUrl !== finalUrl) {
+                    this.handleRequest(key, newUrl);
+                    this.lastHttpRequests[key] = newUrl;
+                  }
+                }));
+              this.subscriptions.add(newSubscription);
             } else {
               this.handleRequest(key, this.evalExpression(url));
             }

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

@@ -140,18 +140,17 @@ export class BuilderContent<ContentType extends object = any> extends React.Comp
         if (location.href.includes('builder.debug=true')) {
           eval('debugger');
         }
-        let newData;
+        let newData = this.state.data as any;
         for (const patch of patches) {
-          newData = applyPatchWithMinimalMutationChain(this.state.data, patch, false);
+          newData = applyPatchWithMinimalMutationChain(newData, patch, false);
         }
         this.setState({
           updates: this.state.updates + 1,
           data: newData,
         });
         if (this.props.contentLoaded) {
-          this.props.contentLoaded(newData, this.state.data);
+          this.props.contentLoaded(newData.data, newData);
         }
-
         break;
       }
     }

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

@@ -0,0 +1,55 @@
+import { applyPatchWithMinimalMutationChain } from './apply-patch-with-mutation';
+
+describe('applyPatchWithMinimalMutationChain', () => {
+  test('Basic shallow update', () => {
+    const obj = {
+      foo: 'bar',
+    };
+    const patch = {
+      op: 'replace',
+      path: '/foo',
+      value: '60px',
+    } as const;
+    const applied = applyPatchWithMinimalMutationChain(obj, patch);
+    expect(applied.foo).toBe('60px');
+    expect(applied).not.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 = applyPatchWithMinimalMutationChain(obj, patch);
+    expect(applied.foo.bar).toBe('60px');
+    expect(applied).not.toBe(obj);
+    expect(applied.foo).not.toBe(obj.foo);
+    expect(applied.baz).toBe(obj.baz);
+  });
+
+  test('Deep array updates', () => {
+    const obj = {
+      foo: [{ bar: true }],
+      baz: {},
+    };
+    const patch = {
+      op: 'replace',
+      path: '/foo/0/bar',
+      value: '60px',
+    } as const;
+
+    const applied = applyPatchWithMinimalMutationChain(obj, patch);
+    expect(applied.foo[0].bar).toBe('60px');
+    expect(applied).not.toBe(obj);
+    expect(applied.foo).not.toBe(obj.foo);
+    expect(applied.foo[0]).not.toBe(obj.foo[0]);
+    expect(applied.baz).toBe(obj.baz);
+  });
+});

package/src/functions/apply-patch-with-mutation.ts

@@ -1,8 +1,8 @@
-export const applyPatchWithMinimalMutationChain = (
-  obj: any,
+export const applyPatchWithMinimalMutationChain = <T extends object>(
+  obj: T,
   patch: { path: string; op: 'add' | 'remove' | 'replace'; value: any },
-  preserveRoot = true
-) => {
+  preserveRoot = false
+): T => {
   if (Object(obj) !== obj) {
     return obj;
   }
@@ -13,7 +13,7 @@ export const applyPatchWithMinimalMutationChain = (
   }
 
   const newObj = preserveRoot ? obj : { ...obj };
-  let objPart = newObj;
+  let objPart = newObj as any;
   for (let i = 0; i < pathArr.length; i++) {
     const isLast = i === pathArr.length - 1;
     const property = pathArr[i];

package/src/scripts/init-editing.ts

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