fix(dockview-vue): mount panels via Teleport so keep-alive lifecycle works (#1369)#1380
Open
mathuo wants to merge 1 commit into
Open
fix(dockview-vue): mount panels via Teleport so keep-alive lifecycle works (#1369)#1380mathuo wants to merge 1 commit into
mathuo wants to merge 1 commit into
Conversation
…works (#1369) Panel components were mounted as detached `render()` roots, so they sat outside the Vue component tree. Anything that walks the tree therefore never reached them — most visibly `<keep-alive>`'s `onActivated` / `onDeactivated` hooks (#1369), but also `provide`/`inject`. Mount components through `<Teleport>` instead: a shared, reactive `VueRendererRegistry` collects the components and a `<DockviewPortals>` child of each host teleports them into dockview's DOM. The components stay logical descendants of the host (so tree-walking features work) while dockview keeps full control of physical DOM placement. The renderers gain an optional `registry` argument — with it they use the teleport path, without it they fall back to the unchanged `mountVueComponent` render root. Public exports are untouched, so this is backwards compatible. Covers dockview, splitview, gridview and paneview. Verified: panels render, `onActivated`/`onDeactivated` fire across keep-alive toggles, `provide`/`inject` resolves, tab switching (`onlyWhenVisible`) preserves instances, and param updates flow through. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #1369 — wrapping
<dockview-vue>in<keep-alive>stopped panel components'onActivated/onDeactivatedhooks from firing.Root cause: panels were mounted as detached
render()roots, placing them outside the Vue component tree. KeepAlive only fires activation hooks for components in its own subtree, so it could never reach the panels. The same disconnect also brokeprovide/inject(previously patched with a one-timeappContext.providessnapshot copy).Fix: mount components through
<Teleport>. A shared reactiveVueRendererRegistrycollects the components and a<DockviewPortals>child of each host teleports them into dockview's DOM. Components stay logical descendants of the host (tree-walking features work) while dockview keeps full control of physical DOM placement — including across popout windows.Compatibility — why this is a minor, not a major
The renderers gain an optional
registryargument: with it they use the teleport path; without it they fall back to the unchangedmountVueComponentrender root.mountVueComponent,VuePart, and the renderer classes keep backwards-compatible signatures and exports. No public API change.Covers all four families: dockview, splitview, gridview, paneview.
Behavioural notes (for release notes)
onActivated/onDeactivatednow fire for panels under<keep-alive>.provide/injectnow resolves via live component-tree ancestry (was a one-time snapshot).dockview-react) rather than synchronous oninit. Code reading panel DOM synchronously afterapi.addPanel()shouldawait nextTick().Tests
dockview-vuesuite: 121 passing (was 110). New coverage:onActivated/onDeactivatedacross keep-alive toggles — all four familiesprovide/injectreaches a teleported panelonlyWhenVisibledetach/reattach) preserves panel instances (no remount/unmount)Verified:
nx build:types(vue-tsc),nx lint(0 errors),nx build,nx test.Not covered
e2e/harness, which lives on the v8 line, not onmaster. To be added when this is forward-ported to v8.🤖 Generated with Claude Code