Make object revocable

Author: exoRift

package.json

@@ -1,8 +1,21 @@
 {
   "name": "react-exo-hooks",
+  "version": "1.0.0",
   "module": "index.ts",
   "main": "dist/index.js",
+  "description": "A collection of useful hooks for data structures and logic, designed for efficiency",
   "keywords": ["react", "hooks", "usearray", "use-array", "useobject", "use-object", "usemap", "use-map", "useunsaved", "use-unsaved", "useset", "use-set", "usepromise", "use-promise", "debounce"],
+  "files": [
+    "dist/"
+  ],
+  "author": {
+    "name": "exoRift",
+    "url": "https://github.com/exoRift"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/exoRift/react-exo-hooks.git"
+  },
   "scripts": {
     "build": "[ -d dist ] && rm -r dist; tsc --project tsconfig.build.json",
     "lint": "eslint ."

src/hooks/use-object.ts

@@ -1,19 +1,27 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 /**
- * Create an object state value that auto updates on mutation
- * @note Effects and memos that use this object should also listen for its signal: `+INSTANCE`
- * @param initial The initial object
- * @returns       [object, setObject, forceUpdate]
+ * Proxy an object recursively
+ * @param object    The object
+ * @param setSignal The signal dispatch fn
+ * @returns         The proxied object
  */
-export function useObject<T extends object> (initial: T): [object: T, setObject: React.Dispatch<React.SetStateAction<T>>, forceUpdate: () => void] {
-  const [signal, setSignal] = useState(0)
-  const [object, setObject] = useState(initial)
+function proxyObject<T extends object> (object: T, setSignal: React.Dispatch<React.SetStateAction<number>>): [proxy: T, revoke: () => void] {
+  const revocables: Array<() => void> = []
 
-  const proxy = useMemo(() => new Proxy(object, {
+  const proxy = Proxy.revocable(object, {
     set (target, prop, newValue) {
       if (prop !== 'valueOf' && target[prop as keyof typeof target] !== newValue) setSignal((prior) => prior + 1)
-      target[prop as keyof typeof target] = newValue
+      const isPlain = (
+        typeof object === 'object' &&
+        (object as any) !== null &&
+        Object.getPrototypeOf(object) === Object.prototype
+      )
+      if (isPlain) {
+        const [subproxy, subrevoke] = proxyObject(newValue, setSignal)
+        target[prop as keyof typeof target] = subproxy
+        revocables.push(subrevoke)
+      } else target[prop as keyof typeof target] = newValue
       return true
     },
 
@@ -22,12 +30,38 @@ export function useObject<T extends object> (initial: T): [object: T, setObject:
       delete target[prop as keyof typeof target]
       return true
     }
-  }), [object])
+  })
+
+  function revoke (): void {
+    proxy.revoke()
+    for (const subrevoke of revocables) subrevoke()
+  }
+
+  return [proxy.proxy, revoke]
+}
+
+/**
+ * Create an object state value that auto updates on mutation \
+ * This hook is recursive into simple object properties. Class instances will remain unaffected
+ * @note Effects and memos that use this object should also listen for its signal: `+INSTANCE`
+ * @warn You should revoke the proxy if you're done with render and don't want unforseen complications. Auto-revokes on and `setObject`
+ * @param initial The initial object
+ * @returns       [object, setObject, forceUpdate, revoke]
+ */
+export function useObject<T extends object> (initial: T): [object: T, setObject: React.Dispatch<React.SetStateAction<T>>, forceUpdate: () => void, revoke: () => void] {
+  const [signal, setSignal] = useState(0)
+  const [object, setObject] = useState(initial)
+
+  const [proxy, revoke] = useMemo(() => proxyObject(object, setSignal), [object])
 
   const forceUpdate = useCallback(() => {
     setSignal((prior) => prior + 1)
   }, [])
 
+  useEffect(() => {
+    return () => revoke()
+  }, [revoke])
+
   proxy.valueOf = () => signal
-  return [proxy, setObject, forceUpdate]
+  return [proxy, setObject, forceUpdate, revoke]
 }