-
-
Notifications
You must be signed in to change notification settings - Fork 8.1k
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(runtime-core): #7203 - adds support for custom element hydration #7300
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
isCustomElement
compiler 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 theisCustomElement
function.This is required for hydration to function correctly in prashantpalikhe/nuxt-ssr-lit#34