search

prashantpalikhe / nuxt-ssr-lit

SSR support for Lit elements in Nuxt3
Other
42 stars 7 forks source link

fix: hydration mis-match when properties aren't rendered in the HTML #35

Open steveworkman opened 1 year ago

steveworkman commented 1 year ago

Fixes #34. Also tidies up the types in the LitServerWrapper.ts file.

To do:

steveworkman commented 1 year ago

With the great suggestions above I think we're a few steps closer - however, we still get the hydration issue described in #34

steveworkman commented 1 year ago

When combined with the latest Lit fixes, and https://github.com/vuejs/core/pull/7300 - this works properly in dev mode. The key was that Nuxt does not set the compiler options in runtime, so the plugin has to do this itself.

This appears to work fine in dev mode, though built production mode doesn't quite work as expected. I will continue to investigate this

steveworkman commented 1 year ago

I've added an extra check as there was a __DEV__ check in an if statement that made it only work in dev. All sorted now and this works in production builds too

prashantpalikhe commented 1 year ago

@steveworkman Do we need to update this PR against the main? The LitWrapperClient e.g. looks significantly different. Do we need all the changes for that component in this PR?

steveworkman commented 1 year ago

@steveworkman Do we need to update this PR against the main? The LitWrapperClient e.g. looks significantly different. Do we need all the changes for that component in this PR?

I've merged in main and checked it and it should all be fine. I tried to add in some more TS checks to the code as it was giving errors in my IDE.

One thing to note is that this version won't hydrate correctly without https://github.com/vuejs/core/pull/7300 - so maybe we should hold onto this for a little bit longer?

prashantpalikhe commented 1 year ago

Yeah, let's wait till that PR to Vue core gets merged.