feat: ref api (#62)

* feat: ref api

* fix: ref

* update readme

* fix readme

Author: dai-shi

readme.md

@@ -1,6 +1,6 @@
-<img src="logo.svg">
+<img src="logo.svg" alt="valtio">
+<br />
 <br />
-<br/>
 
 <code>npm i valtio</code> makes proxy-state simple
 
@@ -107,6 +107,20 @@ You can subscribe a component to state without causing render, just stick the su
 function Foo() {
   const ref = useRef(state.obj)
   useEffect(() => subscribe(state.obj, () => ref.current = state.obj), [state.obj])
+  // ...
+```
+
+##### Avoid state properties to be wrapped with proxies
+
+See https://github.com/pmndrs/valtio/pull/62 for more information.
+
+```js
+import { proxy, ref } from 'valtio'
+
+const state = proxy({
+  count: 0,
+  dom: ref(document.body),
+})
 ```
 
 ##### Dev tools

src/index.ts

@@ -14,7 +14,14 @@ import {
 } from 'proxy-compare'
 
 import { createMutableSource, useMutableSource } from './useMutableSource'
-import { proxy, getVersion, subscribe, snapshot, NonPromise } from './vanilla'
+import {
+  proxy,
+  getVersion,
+  subscribe,
+  snapshot,
+  ref,
+  NonPromise,
+} from './vanilla'
 
 const isSSR =
   typeof window === 'undefined' ||
@@ -110,4 +117,4 @@ const useProxy = <T extends object>(p: T, options?: Options): NonPromise<T> => {
   return createDeepProxy(currSnapshot, affected, proxyCache)
 }
 
-export { proxy, subscribe, snapshot, useProxy }
+export { proxy, subscribe, snapshot, ref, useProxy }

src/vanilla.ts

@@ -6,6 +6,12 @@ const SNAPSHOT = Symbol()
 const PROMISE_RESULT = Symbol()
 const PROMISE_ERROR = Symbol()
 
+const refSet = new WeakSet()
+export const ref = (o: object) => {
+  refSet.add(o)
+  return o
+}
+
 const isSupportedObject = (x: unknown): x is object =>
   typeof x === 'object' &&
   x !== null &&
@@ -72,7 +78,7 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
         snapshotCache.set(receiver, { version, snapshot })
         Reflect.ownKeys(target).forEach((key) => {
           const value = target[key]
-          if (!isSupportedObject(value)) {
+          if (refSet.has(value) || !isSupportedObject(value)) {
             snapshot[key] = value
           } else if (value instanceof Promise) {
             if (PROMISE_RESULT in (value as any)) {
@@ -103,8 +109,7 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
     },
     deleteProperty(target, prop) {
       const prevValue = target[prop]
-      const childListeners =
-        isSupportedObject(prevValue) && (prevValue as any)[LISTENERS]
+      const childListeners = prevValue && (prevValue as any)[LISTENERS]
       if (childListeners) {
         childListeners.delete(notifyUpdate)
       }
@@ -119,12 +124,11 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
       if (Object.is(prevValue, value)) {
         return true
       }
-      const childListeners =
-        isSupportedObject(prevValue) && (prevValue as any)[LISTENERS]
+      const childListeners = prevValue && (prevValue as any)[LISTENERS]
       if (childListeners) {
         childListeners.delete(notifyUpdate)
       }
-      if (!isSupportedObject(value)) {
+      if (refSet.has(value) || !isSupportedObject(value)) {
         target[prop] = value
       } else if (value instanceof Promise) {
         target[prop] = value