feat: proxyStore

Author: divdavem

src/index.ts

@@ -49,6 +49,7 @@ export { batch } from './internal/batch';
 export { equal } from './internal/equal';
 export { symbolObservable } from './internal/exposeRawStores';
 export { untrack } from './internal/untrack';
+export { proxyStore } from './internal/proxy';
 export type * from './types';
 
 /**

src/internal/proxy.ts

@@ -0,0 +1,220 @@
+import { batch } from './batch';
+import { RawStoreComputed } from './storeComputed';
+import { RawStoreWritable } from './storeWritable';
+import { activeConsumer } from './untrack';
+
+const returnFalse = () => false;
+const arrayEquals = <T>(a: T[], b: T[]) => {
+  const aLength = a.length;
+  if (aLength !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < aLength; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const objectProto = Object.prototype;
+const arrayProto = Array.prototype;
+
+class TansuArrayStore extends Array {}
+class TansuObjectStore {}
+
+const wrapInBatch = <T, U extends any[], V>(originalFn: (this: T, ...args: U) => V) =>
+  function (this: T, ...args: U) {
+    return batch(() => originalFn.call(this, ...args));
+  };
+
+const tansuArrayProto = TansuArrayStore.prototype;
+for (const fnName of ['fill', 'pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift']) {
+  const fn = (arrayProto as any)[fnName];
+  if (typeof fn === 'function') {
+    (tansuArrayProto as any)[fnName] = wrapInBatch(fn);
+  }
+}
+
+const createProxyStore = <T extends object>(initialValue: T): T => {
+  const isArray = Array.isArray(initialValue);
+  const constructor: any = isArray ? TansuArrayStore : TansuObjectStore;
+  const proto = constructor.prototype;
+  const proxyTarget = new constructor();
+  const proxyTarget$ = new RawStoreWritable(proxyTarget);
+  proxyTarget$.equalFn = returnFalse;
+  const keysInfo: Record<string | symbol, KeyInfo<any>> = Object.create(null);
+  let length: RawStoreComputed<number> | undefined;
+  let ownKeys: RawStoreComputed<(string | symbol)[]> | undefined;
+
+  class KeyInfo<U> {
+    private store: RawStoreWritable<U | undefined>;
+    private existsStore?: RawStoreWritable<boolean>;
+    constructor(
+      private key: string | symbol,
+      initialValue?: U,
+      private existsValue = false
+    ) {
+      this.store = new RawStoreWritable(initialValue);
+      this.store.equalFn = Object.is;
+    }
+
+    get = () => this.store.get();
+    set = (value: U | undefined) =>
+      batch(() => {
+        value = proxyStore(value);
+        proxyTarget[this.key] = value;
+        if (!this.existsValue) {
+          proxyTarget$.set(proxyTarget);
+          this.existsStore?.set(true);
+          this.existsValue = true;
+        }
+        this.store.set(value);
+      });
+
+    exists() {
+      let existsStore = this.existsStore;
+      if (!existsStore) {
+        existsStore = new RawStoreWritable(this.existsValue);
+        this.existsStore = existsStore;
+      }
+      return existsStore.get();
+    }
+
+    remove() {
+      if (this.existsValue) {
+        batch(() => {
+          delete proxyTarget[this.key];
+          proxyTarget$.set(proxyTarget);
+          this.store.set(undefined);
+          this.existsValue = false;
+          this.existsStore?.set(false);
+        });
+      }
+    }
+  }
+
+  for (const key of Reflect.ownKeys(initialValue)) {
+    if (isArray && key === 'length') {
+      proxyTarget.length = initialValue.length;
+      continue;
+    }
+    const value = proxyStore((initialValue as any)[key]);
+    proxyTarget[key] = value;
+    keysInfo[key] = new KeyInfo(key, value, true);
+  }
+  const getKeyInfo = (key: any) => {
+    let keyInfo = keysInfo[key];
+    if (!keyInfo) {
+      keyInfo = new KeyInfo(key);
+      keysInfo[key] = keyInfo;
+    }
+    return keyInfo;
+  };
+  return new Proxy(proxyTarget as T, {
+    get(target, key) {
+      if (!activeConsumer) {
+        // quick path
+        return proxyTarget[key];
+      }
+      if (isArray && key === 'length') {
+        if (!length) {
+          length = new RawStoreComputed(() => proxyTarget$.get().length);
+        }
+        return length.get();
+      }
+      return getKeyInfo(key).get() ?? proto[key];
+    },
+    set(target, key, value) {
+      if (isArray && key === 'length') {
+        batch(() => {
+          const prevLength = proxyTarget.length;
+          proxyTarget.length = value;
+          const newLength = proxyTarget.length;
+          if (newLength !== prevLength) {
+            proxyTarget$.set(proxyTarget);
+          }
+          for (let i = newLength; i < prevLength; i++) {
+            keysInfo[i]?.remove();
+          }
+        });
+        return true;
+      }
+      getKeyInfo(key).set(value);
+      return true;
+    },
+    deleteProperty(target, key) {
+      if (isArray && key === 'length') {
+        return false;
+      }
+      keysInfo[key]?.remove();
+      return true;
+    },
+    has(target, key) {
+      if (!activeConsumer) {
+        // quick path
+        return key in proxyTarget;
+      }
+      return getKeyInfo(key).exists() || key in proto;
+    },
+    ownKeys() {
+      if (!ownKeys) {
+        ownKeys = new RawStoreComputed(() => Reflect.ownKeys(proxyTarget$.get()));
+        ownKeys.equalFn = arrayEquals;
+      }
+      return [...ownKeys.get()];
+    },
+    getOwnPropertyDescriptor(target, key) {
+      if (!activeConsumer || (isArray && key === 'length')) {
+        return Reflect.getOwnPropertyDescriptor(proxyTarget, key);
+      }
+      const keyInfo = getKeyInfo(key);
+      if (!keyInfo.exists()) {
+        return undefined;
+      }
+      return {
+        configurable: true,
+        enumerable: true,
+        get: keyInfo.get,
+        set: keyInfo.set,
+      };
+    },
+    // unsupported features:
+    preventExtensions() {
+      return false;
+    },
+    defineProperty() {
+      return false;
+    },
+    setPrototypeOf() {
+      return false;
+    },
+  });
+};
+
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy|Proxy} object
+ * which recursively implements each of its properties as a Tansu store.
+ *
+ * @example
+ * ```ts
+ * const myStore = proxyStore({ a: 1, b: 2 });
+ * const aTimesB = computed(() => myStore.a * myStore.b);
+ * aTimesB.subscribe((value) => console.log(value)); // logs: 2
+ * myStore.a = 2; // logs: 4
+ * myStore.b = 3; // logs: 6
+ * ```
+ *
+ * @param initialValue - The initial value of the object. It is copied and wrapped in Tansu stores.
+ * @returns The proxy store object.
+ */
+export const proxyStore = <T>(initialValue: T): T => {
+  if (typeof initialValue !== 'object' || initialValue == null) {
+    return initialValue;
+  }
+  const proto = Object.getPrototypeOf(initialValue);
+  if (proto === objectProto || proto === arrayProto) {
+    return createProxyStore(initialValue);
+  }
+  return initialValue;
+};