@builder.io/react 2.0.4-0 → 2.0.4

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

@@ -98,7 +98,6 @@ const sizeMap = {
   mobile: 'small',
 };
 
-
 const fetchCache: { [key: string]: any } = {};
 
 export interface BuilderComponentProps {
@@ -1358,22 +1357,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,
       },
     },