feat(nuxt): remove wrapper from client only components

[huang-julien]

🔗 Linked issue

resolvenuxt/nuxt#14310

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Before, the createClientOnly returned a new component wrapping the component with ".client" in its name. So when we were setting a ref on <HelloWorld ref="helloworld" /> the ref assigned was on the <ClientOnly /> component but not on <HelloWorld />.

- App
- ClientOnly (has the ref)
- HelloWorld.client

This PR make createClientOnly() modifying the component instead of wrapping it. The setup hook return an additionnal mounted ref() . It also override the render() function to conditionally render the component if mounted value is set to true

- App
- HelloWorld.client (has the ref)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	4d400c7
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62e931287218c50009d5a6ae

[huang-julien]

@danielroe it should be good now, i've tested on a component with a <script setup> and on a component with a normal <script>.

<template>
<div>
hellow world
<button@click="add">
{{ count }}
</button>
</div>
</template>
<script setup lang="ts">const count =ref(0)const add = () =>count.value++defineExpose({ add, count })</script>

<template>
<div>
hellow world
<button@click="add">
{{ count }}
</button>
</div>
</template>
<script lang="ts">exportdefault { setup () {const count =ref(0)const add = () =>count.value++return {count, add } }}</script>

[danielroe]

This is a nice fix ❤️

I've made a couple of minor changes - feel free to check and let me know if you agree.

[huang-julien]

@danielroe only the setup state was missing, which was the "res". That mean we don't even have to use a collision-resistant name

[danielroe]

Would you take a look at stateful use, and test on both build + dev mode? It's not quite there yet, and I wonder if we may have to migrate back to using a render function in some cases.

Modify the example component ClientWrapped.client.vue to:

<script setup lang="ts">function exposedFunc () {console.log('ok')}const state =ref('component')defineExpose({ exposedFunc })awaitnewPromise(resolve=>setTimeout(resolve, 300))onMounted(() => { console.log('mounted') })</script>
<template>
<div>
<!-- this can be commented in/out to trigger different compile approaches -->
client-only {{ state }}
</div>
</template>

See SFC playground.

[huang-julien]

i could fix the build-dev issue, i set this PR to draft to do more testing. There might be some refactor that can be done on the fix. I think moving render() in to the setup() at d3fbb3c is still a better idea 😃

[huang-julien]

yes, it needs a fix. I've finally understood when does the component have the render function. Only <script setup> SFC are compiled into setup only component. So we need to keep the render function if the the original component have one

[huang-julien]

checks

• modify the component to conditionally render if mounted
• keep the context/props/setup intact
• keep original component structure (name, render?, setup)
• make component ref accessible
• attrs inheritance before/after mount

done on

• SFC script setup
• SFC script
• .ts/js component (with runtime compiler)
• developement
• build

[danielroe]

Currently if users pass class/style attributes the following error is shown:

Extraneous non-props attributes (style, class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

Would you explain more about the oldChildren null issue you unearthed?

[huang-julien]

Currently if users pass class/style attributes the following error is shown:

Extraneous non-props attributes (style, class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

Would you explain more about the oldChildren null issue you unearthed?

This was happening only in build, not sure why but at the setup render function, in some components, if we don't wrap the component render here with a Fragment, the component is not being re-rendered when mounted. And in some cases there's a oldChildren is null error triggered by vue in build and dev. I'll try to reproduce it.

[danielroe]

I'm sure you're looking into it, but just to clarify - we're currently getting attrs applied before mount, but not afterwards.

[huang-julien]

here is the reproduction

[huang-julien]

I'm sure you're looking into it, but just to clarify - we're currently getting attrs applied before mount, but not afterwards.

yes, just fixed. Sorry for taking so much of your time for a simple PR 🙏 😢

[danielroe]

This is great - looks good in my testing! Not a simple PR by any means. Well done.

[huang-julien]

Currently if users pass class/style attributes the following error is shown:

Extraneous non-props attributes (style, class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

Would you explain more about the oldChildren null issue you unearthed?

This was happening only in build, not sure why but at the setup render function, in some components, if we don't wrap the component render here with a Fragment, the component is not being re-rendered when mounted. And in some cases there's a oldChildren is null error triggered by vue in build and dev. I'll try to reproduce it.

This is likely a Vue issue stackblitz, so using Fragment seems to be good to avoid this

[pi0]

Thanks for working on this!

[ffxsam]

Thank you for this! @huang-julien@danielroe@pi0