fix: proxy array #70

Author: TtTRz

src/behavior.ts

@@ -85,18 +85,17 @@ export const behavior = Behavior({
               const val = updateMethod(
                 dataTracer.create(this.data, relatedPathValuesOnDef)
               );
-
               const pathValues = relatedPathValuesOnDef.map(({ path }) => ({
                 path,
                 value: dataPath.getDataOnPath(this.data, path),
               }));
-
               // here we can do small setDatas
               // because observer handlers will force grouping small setDatas together
               this.setData({
                 [targetField]: dataTracer.unwrap(val),
               });
-              computedWatchInfo._triggerFromComputedAttached[targetField] = true;
+              computedWatchInfo._triggerFromComputedAttached[targetField] =
+                true;
               computedWatchInfo.computedRelatedPathValues[targetField] =
                 pathValues;
 
@@ -123,8 +122,12 @@ export const behavior = Behavior({
                 this.setData({
                   [targetField]: dataTracer.unwrap(val),
                 });
+                const pathValues = relatedPathValues.map(({ path }) => ({
+                  path,
+                  value: dataPath.getDataOnPath(this.data, path),
+                }));
                 computedWatchInfo.computedRelatedPathValues[targetField] =
-                  relatedPathValues;
+                  pathValues;
                 return true;
               };
               computedWatchInfo.computedUpdaters.push(
@@ -155,7 +158,6 @@ export const behavior = Behavior({
     }
 
     if (watchDef) {
-
       Object.keys(watchDef).forEach((watchPath) => {
         const paths = dataPath.parseMultiDataPaths(watchPath);
         observersItems.push({
@@ -166,14 +168,25 @@ export const behavior = Behavior({
               this._computedWatchInfo[computedWatchDefId];
             if (!computedWatchInfo) return;
             // (issue #58) ignore watch func when trigger by computed attached
-            if (Object.keys(computedWatchInfo._triggerFromComputedAttached).length) {
-              const pathsMap: Record<string, boolean> = {}
-              paths.forEach((path) => pathsMap[path.path[0]] = true);
-              for (let computedVal in computedWatchInfo._triggerFromComputedAttached) {
-                if (computedWatchInfo._triggerFromComputedAttached.hasOwnProperty(computedVal)) {
-                  if (pathsMap[computedVal] && computedWatchInfo._triggerFromComputedAttached[computedVal]) {
-                    computedWatchInfo._triggerFromComputedAttached[computedVal] = false;
-                    return
+            if (
+              Object.keys(computedWatchInfo._triggerFromComputedAttached).length
+            ) {
+              const pathsMap: Record<string, boolean> = {};
+              paths.forEach((path) => (pathsMap[path.path[0]] = true));
+              for (const computedVal in computedWatchInfo._triggerFromComputedAttached) {
+                if (
+                  computedWatchInfo._triggerFromComputedAttached.hasOwnProperty(
+                    computedVal
+                  )
+                ) {
+                  if (
+                    pathsMap[computedVal] &&
+                    computedWatchInfo._triggerFromComputedAttached[computedVal]
+                  ) {
+                    computedWatchInfo._triggerFromComputedAttached[
+                      computedVal
+                    ] = false;
+                    return;
                   }
                 }
               }

src/data-tracer.ts

@@ -4,11 +4,11 @@ const ProxyPolyfill = ProxyPolyfillBuilder();
 const wrapData = (data, relatedPathValues, basePath) => {
   if (typeof data !== "object" || data === null) return data;
   const handler = {
-    get(_obj, key) {
-      if (key === "__rawObject__") return data;
+    get(obj, key) {
+      if (key === "__rawObject__") return obj;
       let keyWrapper = null;
       const keyPath = basePath.concat(key);
-      const value = data[key];
+      const value = obj[key];
       relatedPathValues.push({
         path: keyPath,
         value,
@@ -17,14 +17,10 @@ const wrapData = (data, relatedPathValues, basePath) => {
       return keyWrapper;
     },
   };
-  // for test
-  // const Proxy = undefined;
-
   let propDef;
   try {
     propDef = new Proxy(data, handler);
   } catch (e) {
-    // console.log("[miniprogram-computed]: use Proxy Polyfill");
     propDef = new ProxyPolyfill(data, handler);
   }
   return propDef;
@@ -35,6 +31,10 @@ export function create(data, relatedPathValues) {
 }
 
 export function unwrap(wrapped) {
+  // @ts-ignore
+  if (Array.isArray(wrapped) && typeof wrapped.__rawObject__ !== "object") {
+    return wrapped.map((i) => unwrap(i));
+  }
   if (
     typeof wrapped !== "object" ||
     wrapped === null ||

test/index.spec.ts

@@ -786,7 +786,7 @@ describe("computed behavior", () => {
       },
       computed: {
         d(data) {
-          return 10
+          return 10;
         },
         c(data) {
           return data.b * 2;
@@ -823,6 +823,52 @@ describe("computed behavior", () => {
     expect(_.match(component.dom!, "<wx-view>40</wx-view>")).toBe(true);
     expect(cTriggerCount).toBe(1);
     expect(dTriggerCount).toBe(0);
+  });
+
+  test("computed derivations", () => {
+    let aTriggerCount = 0;
+    let bTriggerCount = 0;
+    const componentId = _.load({
+      template: "<view></view>",
+      behaviors: [computedBehavior],
+      data: {
+        root: [
+          {
+            values: [1, 2, 3],
+          },
+        ],
+      },
+      computed: {
+        computedWithRoot(data) {
+          aTriggerCount++;
+          const res = data.root.map((v) => v);
+          return res;
+        },
+        computedWithDerivations(data) {
+          bTriggerCount++;
+          const res = data.computedWithRoot[0].values;
+          return res;
+        },
+      },
+    });
+
+    const component = _.render(componentId);
+    component.triggerLifeTime("attached");
+    expect(aTriggerCount).toBe(1);
+    expect(bTriggerCount).toBe(1);
 
-  })
+    component.data.root[0].values.push(1);
+    component.setData({
+      "root[0].values": component.data.root[0].values,
+    });
+    expect(aTriggerCount).toBe(1);
+    expect(bTriggerCount).toBe(2);
+
+    component.data.root.push(2);
+    component.setData({
+      root: component.data.root,
+    });
+    expect(aTriggerCount).toBe(2);
+    expect(bTriggerCount).toBe(3);
+  });
 });