@builder.io/react 2.0.3 → 2.0.4-2

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

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

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

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

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

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.3",
+  "version": "2.0.4-2",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",

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

@@ -19,7 +19,6 @@ 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 +135,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 +248,15 @@ 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;

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

@@ -115,7 +115,7 @@ export class BuilderBlocks extends React.Component<BuilderBlocksProps, BuilderBl
             alignItems: 'stretch',
           }),
           ...this.props.style,
-        }}
+        } as any}
         onClick={() => {
           if (this.noBlocks) {
             this.onClickEmptyBlocks();

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

@@ -98,30 +98,6 @@ const sizeMap = {
   mobile: 'small',
 };
 
-function decorator(fn: Function) {
-  return function argReceiver(...fnArgs: any[]) {
-    // Check if the decorator is being called without arguments (ex `@foo methodName() {}`)
-    if (fnArgs.length === 3) {
-      const [target, key, descriptor] = fnArgs;
-      if (descriptor && (descriptor.value || descriptor.get)) {
-        fnArgs = [];
-        return descriptorChecker(target, key, descriptor);
-      }
-    }
-
-    return descriptorChecker;
-
-    // descriptorChecker determines whether a method or getter is being decorated
-    // and replaces the appropriate key with the decorated function.
-    function descriptorChecker(target: any, key: any, descriptor: any) {
-      const descriptorKey = descriptor.value ? 'value' : 'get';
-      return {
-        ...descriptor,
-        [descriptorKey]: fn(descriptor[descriptorKey], ...fnArgs),
-      };
-    }
-  };
-}
 
 const fetchCache: { [key: string]: any } = {};
 
@@ -1264,7 +1240,6 @@ export class BuilderComponent extends React.Component<
       this.notifyStateChange();
     }
 
-    // Unsubscribe all? TODO: maybe don't continuous fire when editing.....
     if (this.props.contentLoaded) {
       this.props.contentLoaded(data, content);
     }
@@ -1274,12 +1249,6 @@ export class BuilderComponent extends React.Component<
         data.state = {};
       }
 
-      // Maybe...
-      // if (data.context) {
-      //   Object.assign(this.state.context, data.context)
-      // }
-      // TODO: may not want this... or make sure anything overriden
-      // explitily sets to null
       data.inputs.forEach((input: any) => {
         if (input) {
           if (
@@ -1380,8 +1349,6 @@ export class BuilderComponent extends React.Component<
         for (const key in data.httpRequests) {
           const url: string | undefined = data.httpRequests[key];
           if (url && (!this.data[key] || Builder.isEditing)) {
-            // TODO: if Builder.isEditing and url patches https://builder.io/api/v2/content/{editingModel}
-            // Then use this.builder.get().subscribe(...)
             if (Builder.isBrowser) {
               const finalUrl = this.evalExpression(url);
               if (Builder.isEditing && this.lastHttpRequests[key] === finalUrl) {
@@ -1391,17 +1358,6 @@ export class BuilderComponent extends React.Component<
               const builderModelRe = /builder\.io\/api\/v2\/([^\/\?]+)/i;
               const builderModelMatch = url.match(builderModelRe);
               const model = builderModelMatch && builderModelMatch[1];
-              if (false && Builder.isEditing && model && this.builder.editingModel === model) {
-                this.handleRequest(key, finalUrl);
-                // TODO: fix this
-                // this.subscriptions.add(
-                //   this.builder.get(model).subscribe(data => {
-                //     this.state.update((state: any) => {
-                //       state[key] = data
-                //     })
-                //   })
-                // )
-              } else {
                 this.handleRequest(key, finalUrl);
                 const currentSubscription = this.httpSubscriptionPerKey[key];
                 if (currentSubscription) {
@@ -1418,20 +1374,11 @@ export class BuilderComponent extends React.Component<
                     }
                   }));
                 this.subscriptions.add(newSubscription);
-              }
             } else {
               this.handleRequest(key, this.evalExpression(url));
             }
           }
         }
-
-        // @DEPRECATED
-        // for (const key in data.builderData) {
-        //   const url = data.builderData[key]
-        //   if (url && !this.data[key]) {
-        //     this.handleBuilderRequest(key, this.evalExpression(url))
-        //   }
-        // }
       }
     }
   };

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

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