Skip to content

feat(app): support app level effect scope #8801

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.

Sign up for GitHub

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

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat(app): support app level effect scope #8801

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e5b7951
feat(app): support app level effect scope
Mini-ghost Jul 17, 2023
96a3b32
Update packages/runtime-dom/src/index.ts
Mini-ghost Aug 9, 2023
d2a5fb3
refactor(app): implement in `runtime-core` instead of `runtime-dom`
Mini-ghost Aug 9, 2023
26fbb03
test: test for app-level effect scope
Mini-ghost Aug 9, 2023
6ed7c41
Update packages/runtime-core/src/apiCreateApp.ts
Mini-ghost Aug 10, 2023
d1fccaa
Merge branch 'main' into feat/app-effect-scope
Mini-ghost Dec 11, 2023
ce6dbfa
Merge branch 'main' into feat/app-effect-scope
Mini-ghost Dec 29, 2023
e79ad7d
Merge branch 'main' into feat/app-effect-scope
Mini-ghost Mar 4, 2024
a519233
Merge branch 'main' into feat/app-effect-scope
Mini-ghost May 30, 2024
f8f37d9
Merge branch 'main' into feat/app-effect-scope
Mini-ghost Jun 14, 2024
a7141d4
feat: adding an effectScope to app instance
Mini-ghost Jun 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion packages/runtime-core/__tests__/apiCreateApp.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
Plugin,
ref,
getCurrentInstance,
defineComponent
defineComponent,
onScopeDispose
} from '@vue/runtime-test'

describe('api: createApp', () => {
Expand Down Expand Up @@ -551,6 +552,26 @@ describe('api: createApp', () => {
).not.toHaveBeenWarned()
})

test('should invoke onScopeDispose when the app unmount', () => {
const spy = vi.fn(() => {})
const root = nodeOps.createElement('div')

const app = createApp({
setup() {
return () => h('div')
}
})

app.runWithContext(() => {
onScopeDispose(spy)
})

app.mount(root)
app.unmount()

expect(spy).toHaveBeenCalledTimes(1)
})

// config.compilerOptions is tested in packages/vue since it is only
// supported in the full build.
})
5 changes: 4 additions & 1 deletion packages/runtime-core/src/apiCreateApp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { effectScope } from '@vue/reactivity'
import {
ConcreteComponent,
Data,
Expand Down Expand Up @@ -210,6 +211,7 @@ export function createAppAPI<HostElement>(
rootProps = null
}

const scope = effectScope(true)
const context = createAppContext()
Comment on lines +221 to 222
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes me wonder if the effectScope should be in app context 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@posva In the latest commit (a7141d4), I added scope to the app. Currently, I have handled it as a private property. Should it be made public for user access?


// TODO remove in 3.4
Expand Down Expand Up @@ -370,6 +372,7 @@ export function createAppAPI<HostElement>(

unmount() {
if (isMounted) {
scope.stop()
render(null, app._container)
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
app._instance = null
Expand Down Expand Up @@ -397,7 +400,7 @@ export function createAppAPI<HostElement>(
runWithContext(fn) {
currentApp = app
try {
return fn()
return scope.run(fn) as ReturnType<typeof fn>
} finally {
currentApp = null
}
Expand Down