watchers for async functions

[brandon942]

Crazy idea, right? Watchers for async functions, the big gap in the current reactive API.
tldr:

import { watchEffect, watchEffectAsync, reactive, ref } from 'vue'
const state = reactive({ name: 'Bob', age: 30 });

watchEffect(async () => {
  console.log('name:', state.name); // is watched
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log('name + age:', state.name, state.age); // is not watched
});
setTimeout(() => (state.age = 31), 2000); // will not log the new age

[jods4]

That's a can of worms.

First notice that resume() leaves a blind spot in Vue observability.

const dep = ref(0);

// dep is a dependency of this effect
watchEffect(() => {
  return fsync();
});

function fsync() {
  return ref.value;
}

// dep is NOT a dependency of this effect, even though it's read inside fasync()
watchEffectAsync(resume => {
  const result = await fasync();
  resume();
  return result;
});

async function fasync() {
  await somePromise();
  return ref.value;
}

The work-around would be to propagate resume in all layers of async functions, which is not something you'd like to do. Maybe the JS AsyncContext proposal would help here but it isn't gonna land anytime soon.

Then there are specs details to flesh out:

• what dependencies are watched during async execution? the previous ones, the partially collected new ones, or none?
• what happens if dependencies trigger during async execution? should a new parallel execution start immediately? or start after the current one completes? or should that trigger be ignored?
• to help with previous point, should we have a mechanism to abort pending async work (i.e. AbortSignal, e.g. to stop an http request)? this would also be handy when the watchEffect is stopped (e.g. when parent component is unmounted).
• what happens if the promise rejects? is the effect stopped, or does it fallback to watching its previous dependencies?

[brandon942]

implemented it myself. Userland solutions are preferred.