feat(teleport): use moveBefore to preserve node state when possible#14345
Open
edison1105 wants to merge 10 commits intominorfrom
Open
feat(teleport): use moveBefore to preserve node state when possible#14345edison1105 wants to merge 10 commits intominorfrom
edison1105 wants to merge 10 commits intominorfrom
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThis PR implements state preservation for DOM nodes during Teleport operations by introducing a Changes
Sequence Diagram(s)sequenceDiagram
participant VueComponent as Vue Component
participant Teleport as Teleport
participant Renderer as Renderer
participant DOM as DOM
rect rgba(100, 200, 255, 0.5)
note over VueComponent,DOM: First Mount
VueComponent->>Teleport: mount(target)
Teleport->>Renderer: insert(video, target)
Renderer->>DOM: insertBefore(video)
note right of Teleport: isMounted = true
end
rect rgba(200, 150, 255, 0.5)
note over VueComponent,DOM: Subsequent Move (preserveState=true)
VueComponent->>Teleport: mount(newTarget)
Teleport->>Renderer: move(video, newTarget, null, true)
Renderer->>DOM: moveBefore(video, null)
note right of DOM: Video state preserved
end
rect rgba(255, 200, 100, 0.5)
note over VueComponent,DOM: Fallback (moveBefore unavailable)
Teleport->>Renderer: move(video, oldTarget, null, true)
Renderer->>DOM: insertBefore(video)
note right of DOM: State preserved via insertBefore
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/compiler-vapor
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/runtime-vapor
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
edison1105
changed the title
edison1105
changed the title
edison1105
changed the title
edison1105
changed the title
❌ Deploy Preview for vue-sfc-playground failed. Why did it fail? →
|
❌ Deploy Preview for vue-sfc-playground failed. Why did it fail? →
|
Member
Author
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@packages/runtime-vapor/src/components/Teleport.ts`:
- Line 63: The Teleport fragment's isMounted flag is set true after first mount
but not reset in remove(), causing subsequent re-adds to call move() instead of
insert(); update the Teleport/TeleportFragment remove() method to set
this.isMounted = false when the fragment is removed so the next mount path uses
insert() (also apply the same reset to the analogous remove() implementation
around the 253-280 region).
- Around line 161-179: The move() call in Teleport.ts is passing undefined for
the moveType which defaults to MoveType.LEAVE and triggers leave transitions;
change the call in the isMounted branch to pass MoveType.REORDER instead of
undefined to prevent unintended leave behavior (i.e., replace the third-to-last
undefined argument with MoveType.REORDER), and add an import for MoveType from
'@vue/runtime-dom'; you can find this near the existing move/insert usage and
where applyTransitionHooks() is called.
In `@packages/vue/__tests__/e2e/teleport.spec.ts`:
- Around line 1-7: The test file imports beforeAll but uses afterAll without
importing it; update the import from 'vitest' to include afterAll (i.e., add
afterAll to the named imports alongside beforeAll) so the afterAll hook used
later in this file is explicitly imported rather than relying on globals.
🧹 Nitpick comments (2)
packages-private/vapor-e2e-test/teleport/index.html (1)
1-2: Missing DOCTYPE declaration.HTML files should include a
<!DOCTYPE html>declaration for proper standards-mode rendering. While this may work for e2e tests, it's good practice to include it for consistency with browser behavior.Suggested fix
+<!DOCTYPE html> <script type="module" src="./main.ts"></script> <div id="app"></div>packages-private/vapor-e2e-test/__tests__/teleport.spec.ts (1)
13-20: Consider dynamic port allocation to avoid conflicts in parallel test runs.The hardcoded port
8197could cause test failures if multiple test suites run in parallel or if the port is already in use. Consider using port0to let the OS assign an available port, then retrieve the actual port from the server.♻️ Suggested improvement
describe('vapor teleport', () => { let server: any - const port = '8197' + let port: number beforeAll(() => { - server = connect() + const app = connect() .use(sirv(path.resolve(import.meta.dirname, '../dist'))) - .listen(port) + server = app.listen(0) + port = (server.address() as any).port process.on('SIGTERM', () => server && server.close()) })
Member
Author
|
/ecosystem-ci run |
Contributor
|
📝 Ran ecosystem CI: Open
|
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
2 participants
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 by CodeRabbit
Bug Fixes
Tests
✏️ Tip: You can customize this high-level summary in your review settings.