feat: ref api

[dai-shi]

close #61

Summary

ref will mark an object so that it won't be wrapped by proxies when used as a (nested) property.

Usage

import { proxy, ref } from 'valtio'

const state = proxy({
  obj: {},
  body: ref(document.body), // this is not tracked
})

Caveat 1

This ref is for tracking mutations only.

For render optimization (= useProxy(state) use case), objects could wrapped by proxies if they are plain objects, but that would only happen on demand, so it shouldn't be a problem. It doesn't influence the state object either.

Fixed in #65

Caveat 2

const state = proxy(ref(obj)) // this is not supported, it's nonsense

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fc5cd6a:

Sandbox	Source
React	Configuration
React Typescript	Configuration

[dai-shi]

@drcmda Would you be able to try this build and see if it works as expected?

[drcmda]

@dai-shi works! :-D blocks inner mutation, but ref equality still holds.

[dai-shi]

@drcmda
Great to hear that. Would you help me adding this feature in readme.md? Any suggestion?

[dai-shi]

Published: https://www.npmjs.com/package/valtio/v/0.6.0

[StarpTech]

This feature is very helpful. Without bypassing the EventEmitter the code won't work when subscribing to an event.

import { proxy, ref } from 'valtio';

export const state = proxy({
  isConnecting: false,
  signals: ref(new EventEmitter()),
  connection: null
});

The following code will results in:

Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'Notification'

import { proxy, ref } from 'valtio';

export const state = proxy({
  isConnecting: false,
  signals: new EventEmitter(),
  connection: null
});

// anywhere
const { connection, signals } = useSnapshot(state);
useEffect(() => {
 signals.on('Notification', fn);
 return () => {
   return signals.off('Notification', fn);
 };
}, [signals)

@dai-shi is it intentional or a bug?

[dai-shi]

@StarpTech You might want to try using state.signals instead inside useEffect. If it doesn't work, ref() would be unavoidable.

[StarpTech]

It doesn't work. I'm wondering why it happened at all. It feels like a bug. See GoogleChrome/proxy-polyfill#20 (comment)

[StarpTech]

Removing ref() will result in an infinite loop (frozen page).