How to use createArrayInstrumentations method in Playwright Internal

1const RAW = 'raw';
2
3const proxyMap = new Map();
4
5const arrayInstrumentations = createArrayInstrumentations();
6// 重写数组方法
7function createArrayInstrumentations() {
8  const instrumentations = {};
9
10  (['includes', 'indexOf', 'lastIndexOf']).forEach(key => {
11    const originMethod = Array.prototype[key];
12    instrumentations[key] = function(...args) {
13      let res = originMethod.apply(this, args);
14
15      if (res === false) {
16        res = originMethod.apply(this[RAW], args);
17      }
18
19      return res;
20    }
21  });
22
23  // 这些方法会间接读取数据length属性，需屏蔽对length属性的读取，避免收集到依赖
24  (['push', 'pop', 'shift', 'unshift', 'splice']).forEach(key => {
25    const originMethod = Array.prototype[key];
26    instrumentations[key] = function(...args) {
27      pauseTracking();
28      let res = originMethod.apply(this, args);
29      resetTracking();
30      return res;
31    }
32  });
33
34  return instrumentations;
35}
36function createReactive(data, isShallow = false, isReadonly = false) {
37  const existingProxy = proxyMap.get(data);
38  if (existingProxy) {
39    return existingProxy;
40  }
41  const proxy = new Proxy(data, {
42    get(target, key, receiver) {
43      // 读取raw属性时返回代理对象target
44      if (key === RAW) {
45        return target;
46      }
47
48      // 重写数组方法进行代理
49      if (Array.isArray(target) && hasOwn(arrayInstrumentations, key)) {
50        return Reflect.get(arrayInstrumentations, key, receiver);
51      }
52
53      if (!isReadonly) {
54        track(target, key);
55      }
56
57      const res = Reflect.get(target, key, receiver);
58      if (isShallow) {
59        return res;
60      }
61
62      if (typeof res === 'object' && res !== null) {
63        return isReadonly ? readonly(res) : reactive(res);
64      }
65      return res;
66    },
67    set(target, key, newVal, receiver) {
68      if (isReadonly) return isReadonly;
69
70      const oldVal = target[key];
71      
72      const hadKey =  Array.isArray(target) ? Number(key) < target.length : hasOwn(target, key)
73      const type = hadKey ? 'SET' : 'ADD';
74      const res = Reflect.set(target, key, newVal, receiver);
75
76      // 先判断receiver是否为target的代理对象，避免不要的更新
77      if (target === receiver[RAW]) {
78        if (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {
79          trigger(target, key, type, newVal)
80        }
81      }
82      return res;
83    },
84    has(target, key) {
85      track(target, key);
86      return Reflect.has(target, key);
87    },
88    deleteProperty(target, key) {
89      if (isReadonly) return isReadonly;
90
91      const hadKey = hasOwn(target, key);
92      const res = Reflect.defineProperty(target, key);
93
94      if (res && hadKey) {
95        trigger(target, key, 'delete');
96      }
97
98      return res;
99    }
100  });
101  proxyMap.set(data, proxy);
102  return proxy;
103}
104
105function reactive(data) {
106  return createReactive(data);
107}
108
109function shallowReactive(data) {
110  return createReactive(data, true);
111}
112
113function readonly(data) {
114  return createReactive(data, false, true);
115}
116
117function shallowReadonly(data) {
118  return createReactive(data, true, true);
119}

Source: reactive.js

const RAW = 'raw';

const proxyMap = new Map();

const arrayInstrumentations = createArrayInstrumentations();
// 重写数组方法
function createArrayInstrumentations() {
  const instrumentations = {};

  (['includes', 'indexOf', 'lastIndexOf']).forEach(key => {
    const originMethod = Array.prototype[key];
    instrumentations[key] = function(...args) {
      let res = originMethod.apply(this, args);

      if (res === false) {
        res = originMethod.apply(this[RAW], args);
      }

      return res;
    }
  });

  // 这些方法会间接读取数据length属性，需屏蔽对length属性的读取，避免收集到依赖
  (['push', 'pop', 'shift', 'unshift', 'splice']).forEach(key => {
    const originMethod = Array.prototype[key];
    instrumentations[key] = function(...args) {
      pauseTracking();
      let res = originMethod.apply(this, args);
      resetTracking();
      return res;
    }
  });

  return instrumentations;
}
function createReactive(data, isShallow = false, isReadonly = false) {
  const existingProxy = proxyMap.get(data);
  if (existingProxy) {
    return existingProxy;
  }
  const proxy = new Proxy(data, {
    get(target, key, receiver) {
      // 读取raw属性时返回代理对象target
      if (key === RAW) {
        return target;
      }

      // 重写数组方法进行代理
      if (Array.isArray(target) && hasOwn(arrayInstrumentations, key)) {
        return Reflect.get(arrayInstrumentations, key, receiver);
      }

      if (!isReadonly) {
        track(target, key);
      }

      const res = Reflect.get(target, key, receiver);
      if (isShallow) {
        return res;
      }

      if (typeof res === 'object' && res !== null) {
        return isReadonly ? readonly(res) : reactive(res);
      }
      return res;
    },
    set(target, key, newVal, receiver) {
      if (isReadonly) return isReadonly;

      const oldVal = target[key];
      
      const hadKey =  Array.isArray(target) ? Number(key) < target.length : hasOwn(target, key)
      const type = hadKey ? 'SET' : 'ADD';
      const res = Reflect.set(target, key, newVal, receiver);

      // 先判断receiver是否为target的代理对象，避免不要的更新
      if (target === receiver[RAW]) {
        if (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {
          trigger(target, key, type, newVal)
        }
      }
      return res;
    },
    has(target, key) {
      track(target, key);
      return Reflect.has(target, key);
    },
    deleteProperty(target, key) {
      if (isReadonly) return isReadonly;

      const hadKey = hasOwn(target, key);
      const res = Reflect.defineProperty(target, key);

      if (res && hadKey) {
        trigger(target, key, 'delete');
      }

      return res;
    }
  });
  proxyMap.set(data, proxy);
  return proxy;
}

function reactive(data) {
  return createReactive(data);
}

function shallowReactive(data) {
  return createReactive(data, true);
}

function readonly(data) {
  return createReactive(data, false, true);
}

function shallowReadonly(data) {
  return createReactive(data, true, true);
}