Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(runtime-core): onEffectCleanup API #10173

Closed
wants to merge 1 commit into from

Conversation

LittleSound
Copy link
Member

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.

Copy link

github-actions bot commented Jan 21, 2024

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)

yyx990803 added a commit that referenced this pull request Mar 5, 2024
ref #10173

Instead of exposing `getCurrentEffect`, this version accepts a second
argument to suppress the no-active-effect warning.
@sxzz sxzz closed this Mar 5, 2024
@sxzz
Copy link
Member

sxzz commented Mar 5, 2024

Thanks to @LittleSound. Evan implemented this via 2cc5615

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants