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

missing class attributes on wrapper functions #50

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

simllll
Copy link

@simllll simllll commented May 1, 2020

this happens only when using the wrapper functions for hydration and not by using a tag.

e.g. you have a
<CustomComponentA class="xyz" />

and CustomComponentA has
<div class="blub"></div> as template.

Currently only "xyz" is applied while the component is not hydrated, with this regular class merging is happening and the final result class is "xyz blub".

I've added a test for this scenario.

Without the patch following scenarios happen:

  1. SSR (correct):
    image

  2. before hydration (wrong, this also causes some flickering):
    image

  3. after hydration (correct again):
    image

with this patch missing classes (missing in vnode, but are available in $el) are applied to the loading component.
@maoberlehner please let me know what you think of this issue.

thanks
simon

@simllll simllll changed the title test: add test for missing classes [WIP] missing class and style attributes on wrapper functions May 1, 2020
@simllll simllll changed the title [WIP] missing class and style attributes on wrapper functions missing class attributes on wrapper functions May 1, 2020
@simllll simllll force-pushed the fix/merging-attributes branch from 88cbe38 to a553672 Compare May 1, 2020 19:32
@maoberlehner
Copy link
Owner

That's strange. Never realised that it behaves like that. But this seems to me like a bug in the server side rendering.
Not sure if this should be fixed in here. But also I don't fully understand it yet. Maybe I will take some time to think it thru.
But stopped working on this project because I expect this to be obsolete with Vue 3 (hopefully).

@patrickxchong
Copy link

@maoberlehner can you share your thoughts on why you think this component will be obsolete with Vue 3? I'm deciding whether I should aggressively optimize my Nuxt.js app with this component or hold off on that. I can't seem to find any info on lazy hydration being planned for Vue 3.

@maoberlehner
Copy link
Owner

@patrickxchong
Copy link

Very cool, thank you! 👍

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.

3 participants