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

fix(compiler-ssr): fix SSR issue when dynamic and static class used #2354

Merged
merged 4 commits into from
Oct 13, 2020

Conversation

mathieutu
Copy link
Contributor

@mathieutu mathieutu commented Oct 11, 2020

Hi,

First PR on Vue3, and first time looking at the SSR process!
This one kept me busy few hours, to understand how all of that that runs (hurray for the debugger!).

As you can see in the Template explorer, there is an issue with the ssr compiler.

In the case of a dynamic class attribute first, we end up with:

// input
<div :class="'dynamic'" class="child"></div>

// render function
<div${
    _ssrRenderClass(['dynamic', "child"])
  }" class="child"></div>

// output
<divdynamic child" class="child"></div>

Instead of, if we invert the order:

// input
<div class="child" :class="'dynamic'"></div>

// render function
<div class="${
    _ssrRenderClass(['dynamic', "child"])
  }"></div>

// output
<div class="dynamic child"></div>

(Actually, it happens only if there is a parent, but I've omitted it in the example, for simplicity)

This comes from the removeStaticBinding function in compiler-ssr/src/transforms/ssrTransformElement.ts which is supposed to remove the static binding, but which in fact removes only the first one found.

This PR adds some tests to reproduce the bug and fixes the issue.

Thanks for your work!

Matt'

@mathieutu mathieutu changed the title Fixes/server renderer class [BUG] Fix SSR issue when dynamic and static class used. Oct 11, 2020
@mathieutu
Copy link
Contributor Author

mathieutu commented Oct 11, 2020

The failing tests are about suspense and seem to be totally out of the scope of this PR.

@mathieutu mathieutu changed the title [BUG] Fix SSR issue when dynamic and static class used. fix(compiler-ssr): fix SSR issue when dynamic and static class used Oct 11, 2020
@yyx990803 yyx990803 merged commit 8539c0b into vuejs:master Oct 13, 2020
@yyx990803
Copy link
Member

Great job hunting this down!

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

Successfully merging this pull request may close these issues.

2 participants