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:

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

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

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

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

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?

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

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

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