feat(runtime-core): onEffectCleanup API

[LittleSound]

Summary

Introduced new onEffectCleanup() API and getCurrentEffect() API for runtime-core, its function is basically the same as onCleanup in Watch API, but it supports encapsulating cleanup logic into reusable functions, and multiple cleanup functions can be registered at the same time.

The onEffectCleanup API has already been implemented in Vapor. Here are corresponding Issue and PR links:
Issue / PR

Basic example

This is one of the assumed function in another TypeScript file:

export function queryAsyncData(api, id) {
  const { response, cancel } = doAsyncWork(api, id)
  // `cancel` will be called if this function get called in Watch API and the effect source changed
  // so that previous pending request will be cancelled
  // if not yet completed
  if (getCurrentEffect()) {
    onEffectCleanup(cancel)
  }
  return response
}

And this is one of the Vue SFC file:

<script setup>
watchEffect(async () => {
  data1.value = await queryAsyncData('api1', id.value)
  data2.value = await queryAsyncData('api2', id.value)
})

// When getting called outside of the scope of Watch API,
// since there is no active effect scope,
// therefore the cleanup callback for cancel will not be registered
async function pull() {
  data3.value = await queryAsyncData('api3', id.value)
}
pull()
</script>

Additionally, provide support for watch

watch(id, async (newId, oldId) => {
  data1.value = await queryAsyncData('api1', newId)
  data2.value = await queryAsyncData('api2', newId)
})

Example in Vapor Mode

Here's a brief explanation of how it works using an example with @[eventName]="handler", where on function is provided by runtime-vapor at runtime:

// in component setup or vapor render
watchEffect(() => {
  on(el1, eventName.value, handler)
  on(el2, eventName.value, handler)
})

// in runtime-vapor pkg
function on(el, event, handler) {
  el.addEventListener(event, handler)
  if (getCurrentEffect()) {
    onEffectCleanup(() => {
      el.removeEventListener(event, handler)
    })
  }
}

With onEffectCleanup, functions like on can accommodate both use cases in watch and setup.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.4 kB (+247 B)	34.5 kB (+110 B)	31.1 kB (+113 B)
vue.global.prod.js	147 kB (+247 B)	53.7 kB (+99 B)	48 kB (+150 B)

Usages

Name	Size	Gzip	Brotli
createApp	50.6 kB (+224 B)	19.8 kB (+96 B)	18 kB (+76 B)
createSSRApp	53.9 kB (+224 B)	21.1 kB (+93 B)	19.2 kB (+78 B)
defineCustomElement	52.8 kB (+224 B)	20.5 kB (+98 B)	18.7 kB (+74 B)
overall	64.3 kB (+224 B)	24.9 kB (+93 B)	22.5 kB (+75 B)

[sxzz]

Thanks to @LittleSound. Evan implemented this via 2cc5615