fix(runtime-core): #7203 - adds support for custom element hydration #7300
Conversation
❌ Deploy Preview for vuejs-coverage failed.
|
| @@ -327,7 +327,8 @@ export function createHydrationFunctions( | |||
| for (const key in props) { | |||
| if ( | |||
| (forcePatchValue && key.endsWith('value')) || | |||
| (isOn(key) && !isReservedProp(key)) | |||
| (isOn(key) && !isReservedProp(key)) || | |||
| customElements.get(el.localName) // If the element is a custom element, apply vue props during hydration - See #7203 | |||
There was a problem hiding this comment.
You should be able to use the app config function like:
parentComponent.appContext.config.isCustomElement?.(el.localName)That would be more desirable as we don't want to reference any DOM apis in runtime-core.
That check should also be done sooner, outside of the for loop.
This change would then also mean that we would have to append the docs for app.config.isCustomElement and explain that this function is not only useful when using the runtime Compiler, but also when using custom elements in an SSR app.
There was a problem hiding this comment.
In the test app we're working with (nuxt 3) the isCustomElement function is always undefined, so we've not been able to use that function. The other functions in the appContext appear to be there. If you're certain that it should be there, I'll dig into where it goes missing some more
There was a problem hiding this comment.
My apologies, it's:
parentComponent.appContext.config.compilerOptions.isCustomElement?.(el.localName)See https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue
https://vuejs.org/api/application.html#app-config-compileroptions
And of course, that function has to be added by the developer.
|
Yeah, that's not there either! It may be a Nuxt issue that isn't passing
that value through. Will investigate
…On Thu, 22 Dec 2022, 14:17 Thorsten Lünborg, ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In packages/runtime-core/src/hydration.ts
<#7300 (comment)>:
> @@ -327,7 +327,8 @@ export function createHydrationFunctions(
for (const key in props) {
if (
(forcePatchValue && key.endsWith('value')) ||
- (isOn(key) && !isReservedProp(key))
+ (isOn(key) && !isReservedProp(key)) ||
+ customElements.get(el.localName) // If the element is a custom element, apply vue props during hydration - See #7203
My apologies, it's:
parentComponent.appContext.config.compilerOptions.isCustomElement?.(el.localName)
See
https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue
And of course, that function has to be added by the developer.
—
Reply to this email directly, view it on GitHub
<#7300 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHS4WPINZ2474ZVSRYFEOLWORPFVANCNFSM6AAAAAASYAO4SA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
@LinusBorg thanks for the guidance, with help from @danielroe I got nuxt to set the |
…port in compileScript
This is no longer necessary as we no longer recommend type checking generated code
In some cases, the user still needs access to the full props object, in such cases withDefaults() is still needed.
…ineSlots` macro and `slots` option (#7982)
|
Superceeded by #8035 |
Resolves #7203 by checking for the presence of a custom element in the custom element registry and allowing that to be hydrated with vue properties.
Ideally, I'd use the
isCustomElementcompiler option - however, that is not available at runtime. This is the next best thing - however, it could potentially hydrate more components than the user intended if they have not specified all of their custom elements in theisCustomElementfunction.This is required for hydration to function correctly in prashantpalikhe/nuxt-ssr-lit#34