Skip to content

feat(ssr): transition appear work with SSR #8859

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

Jump to bottom
Merged
merged 22 commits into from
Oct 24, 2023
Merged

feat(ssr): transition appear work with SSR #8859

merged 22 commits into from
Oct 24, 2023

Conversation

edison1105
Copy link
Member

@edison1105 edison1105 commented Jul 27, 2023 •
edited
Loading

close #6951

Solution:

  • Compile phase: If Transtion with appear, wrap it in template after compilation:
<Transition appear>
  <div>foo</div>
</Transition>
function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  _push(`<template><div${_ssrRenderAttrs(_attrs)}>foo</div></template>`)
}
  • Hydration phase: Replace the template element with an element within the template

see demo

@slavanossar
Copy link

slavanossar commented Oct 13, 2023 •
edited
Loading

@posva Is it possible to get this tagged p4-important to align it with #6951? It's causing downstream issues in Nuxt that breaks enter page transitions on initial load. Thanks!

@edison1105 edison1105 added scope: transition scope: ssr ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. ready for review This PR requires more reviews labels Oct 13, 2023
@github-actions
Copy link

github-actions bot commented Oct 20, 2023 •
edited
Loading

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 86.5 kB (+503 B) 32.9 kB (+171 B) 29.7 kB (+164 B)
vue.global.prod.js 132 kB (+503 B) 49.6 kB (+174 B) 44.5 kB (+167 B)

Usages

Name Size Gzip Brotli
createApp 47.9 kB (+26 B) 18.9 kB (+9 B) 17.3 kB (+56 B)
createSSRApp 51.2 kB (+503 B) 20.2 kB (+185 B) 18.4 kB (+174 B)
defineCustomElement 50.3 kB (+26 B) 19.7 kB (+7 B) 17.9 kB (-36 B)
overall 61.3 kB (+26 B) 23.7 kB (+12 B) 21.6 kB (-29 B)

yyx990803
yyx990803 reviewed Oct 21, 2023
View reviewed changes
@edison1105 edison1105 force-pushed the feature/SSRTransition branch from 8875c26 to d36f2f3 Compare October 22, 2023 10:53
yyx990803
yyx990803 reviewed Oct 24, 2023
View reviewed changes
@yyx990803 yyx990803 merged commit 5ea8a8a into vuejs:main Oct 24, 2023
@yyx990803 yyx990803 mentioned this pull request Nov 6, 2023
Closed
@LinusBorg LinusBorg mentioned this pull request Dec 14, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yyx990803 yyx990803 yyx990803 left review comments

Assignees
No one assigned
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. ready for review This PR requires more reviews scope: ssr scope: transition
Projects
Issue / PR Management
Status: Merged
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Transition appear flag doesn't work in SSR
3 participants
@edison1105 @slavanossar @yyx990803