Add watch to valtio/utils

[lxsmnsyc]

Resolves #149

[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 bab8b5b:

Sandbox	Source
React	Configuration
React Typescript	Configuration

[dai-shi]

Great work. Overall it looks good.
I hadn't thought about nested watches. Would you like to add tests that depend currentCleanups?

[lxsmnsyc]

I hadn't thought about nested watches. Would you like to add tests that depend currentCleanups?

I have added a test for this, however it isn't that verbose 😅

[dai-shi]

Thanks for the improvement. I'm still not sure the recursive use case, but it's fine for now.

[lxsmnsyc]

I could probably remove it as the nested watch and the cleanup use-cases are already covered, no?

[dai-shi]

That looks okay.

My (non-blocking) comment is about the use case of nested watch.

const stop = watch((get) => {
  // do something
  watch((get) => {
    // do something else
    return cleanup1
  })
  return cleanup2
})

When do you need something like this?

[lxsmnsyc]

There may be a use-case wherein inside a watch there's a localized proxy object, in which you can watch it from the inside.

watch(() => {
  const localProxy = proxy({ count: 0 });
  
  watch((get) => {
    console.log(get(localProxy).count);
  });
});

Another use-case is if you want to compose cleanups. Adding cleanups through the cleanup return may be inconvenient. There's also the compositional watch so if ever you wanted to partially track individual proxies while sharing the same watch scope, this may be convenient.

watch(() => {
  const signal = new AbortSignal();
  
  watch(() => () => {
    signal.abort();
  });
  
  // Do other stuffs
});

Also, there's nothing that's going to stop users from doing nested watch calls, so adding an auto-cleanup may be convenient.

[dai-shi]

Thanks for the clarification.

Also, there's nothing that's going to stop users from doing nested watch calls, so adding an auto-cleanup may be convenient.

Again, I'm fine with your proposal. But, if I were to design it, I would require users to do manual cleanup instead of the auto-cleanup.

const stop = watch(() => {
  const signal = new AbortSignal();
  
  const innerStop = watch(() => () => {
    signal.abort();
  });
  
  // Do other stuffs

  return () => {
    // Do other cleanups

    innerStop();
  };
});

I think it's just a design choice.

I prefer manual one, because you never know if you are in watch or not.

const fn = () => {
  watch(() => {
    return cleanup
  }
}

// expecting this usage
const stop = watch(() => {
  fn()
})

// but someone else could use it directly
fn()

[dai-shi]

I was trying to resolve conflicts, but github warns me about the branch. I guess it should be fine, but I'd leave it (= resolving conflicts) to you.

[dai-shi]

Let me merge this and cut a release.