fix(vanilla, react): use experimental_use and some refactors (#545)

* feat: use experimental_use

* fix and refactor defaultUse

* wip: disable experimental_use

* Revert "wip: disable experimental_use"

This reverts commit 10b8b6b.

* small refactor

* simplify types

* fallback use outside render

* revert to react@latest

* Revert "revert to react@latest"

This reverts commit 5eaa309.

* Revert "fallback use outside render"

This reverts commit 35ca1ea.

* use use recursively

* wip: avoid affectedToPathList

* use custom affectedToPathList

* revert to react@latest

* refactor

* further refactor

* update types/react and remove ts-ignore

* refactor with promise convension and better typing with awaited

* refactor a bit

package.json

@@ -6,7 +6,7 @@
   "main": "./index.js",
   "types": "./index.d.ts",
   "typesVersions": {
-    "<4.0": {
+    "<4.5": {
       "esm/*": [
         "ts3.4/*"
       ],
@@ -73,7 +73,7 @@
     "test:coverage:watch": "jest --watch",
     "copy": "shx cp -r dist/src/* dist/esm && shx mv dist/src/* dist && shx rm -rf dist/{src,tests} && downlevel-dts dist dist/ts3.4 && shx cp package.json readme.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined; this.jest=undefined;\"",
     "patch-macro-vite": "shx cp dist/esm/macro/vite.d.ts dist/macro/ && shx mkdir dist/ts3.4/macro && shx cp dist/ts3.4/esm/macro/vite.d.ts dist/ts3.4/macro/",
-    "patch-ts3.4": "shx sed -i 's/^declare type Snapshot<T> =/declare type Snapshot<T> = T extends AnyFunction ? T : T extends AsRef ? T : T extends Promise<infer V> ? Snapshot2<V> : { readonly [K in keyof T]: Snapshot2<T[K]> }; type Snapshot2<T> = T extends AnyFunction ? T : T extends AsRef ? T : T extends Promise<infer V> ? V : { readonly [K in keyof T]: T[K] };declare type _Snapshot<T> =/' 'dist/ts3.4/**/*.d.ts'"
+    "patch-ts3.4": "node -e \"require('shelljs').find('dist/ts3.4/**/*.d.ts').forEach(f=>require('fs').appendFileSync(f,'declare type Awaited<T> = T extends Promise<infer V> ? V : T;'))\"; shx sed -i 's/^declare type Snapshot<T> =/declare type Snapshot<T> = T extends AnyFunction ? T : T extends AsRef ? T : T extends Promise<any> ? Awaited<T> : { readonly [K in keyof T]: Snapshot2<T[K]> }; type Snapshot2<T> = T extends AnyFunction ? T : T extends AsRef ? T : T extends Promise<any> ? Awaited<T> : { readonly [K in keyof T]: T[K] };declare type _Snapshot<T> =/' 'dist/ts3.4/**/*.d.ts'"
   },
   "engines": {
     "node": ">=12.7.0"

src/react.ts

@@ -1,7 +1,17 @@
-import { useCallback, useDebugValue, useEffect, useMemo, useRef } from 'react'
+/// <reference types="react/experimental" />
+
+import {
+  experimental_use as use,
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
 import {
-  affectedToPathList,
+  // affectedToPathList,
   createProxy as createProxyToCompare,
+  getUntracked,
   isChanged,
 } from 'proxy-compare'
 // import { useSyncExternalStore } from 'use-sync-external-store/shim'
@@ -14,6 +24,38 @@ import type { INTERNAL_Snapshot as Snapshot } from './vanilla'
 
 const { useSyncExternalStore } = useSyncExternalStoreExports
 
+// customized version of affectedToPathList
+// we need to avoid invoking getters
+const affectedToPathList = (
+  obj: unknown,
+  affected: WeakMap<object, unknown>
+) => {
+  const list: (string | symbol)[][] = []
+  const seen = new WeakSet()
+  const walk = (x: unknown, path?: (string | symbol)[]) => {
+    if (seen.has(x as object)) {
+      // for object with cycles
+      return
+    }
+    let used: Set<string | symbol> | undefined
+    if (typeof x === 'object' && x !== null) {
+      seen.add(x)
+      used = affected.get(getUntracked(x) || x) as any
+    }
+    if (used) {
+      used.forEach((key) => {
+        if ('value' in (Object.getOwnPropertyDescriptor(x, key) || {})) {
+          walk((x as any)[key], path ? [...path, key] : [key])
+        }
+      })
+    } else if (path) {
+      list.push(path)
+    }
+  }
+  walk(obj)
+  return list
+}
+
 const useAffectedDebugValue = (
   state: object,
   affected: WeakMap<object, unknown>
@@ -119,7 +161,7 @@ export function useSnapshot<T extends object>(
       [proxyObject, notifyInSync]
     ),
     () => {
-      const nextSnapshot = snapshot(proxyObject)
+      const nextSnapshot = snapshot(proxyObject, use)
       try {
         if (
           !inRender &&
@@ -140,7 +182,7 @@ export function useSnapshot<T extends object>(
       }
       return nextSnapshot
     },
-    () => snapshot(proxyObject)
+    () => snapshot(proxyObject, use)
   )
   inRender = false
   const currAffected = new WeakMap()