fix(nuxt): remove fragment from createClientOnly

[huang-julien]

🔗 Linked issue

linked to #6165 (comment)
resolves nuxt/nuxt#15014, resolves nuxt/nuxt#15039

❓ 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

Hi 👋 👋 This PR remove the Fragment workaround which prevent using v-show on .client components even if it has a single root node.

There is additionnal changes in the setup part where we return the render function.

Previously in the linked PR, there's was a Oldchildren is null issue if we returned directly the setup result as a render function.
Using the h() function to return the VNode was working only for some components (based on @danielroe 's #6165 (comment)).

However the component fails to render or update its render silently if it only has a root tag with a string and a variable such as :

<template>
  <div>
      I'm a string children {{ count }}. I will be mounted but will still render a simple div
  </div>
</template>

The workaround was to use a Fragment but it leads to nuxt/nuxt#15014 issue .

This is fixed by verifying the result of the render function children which can be string|array|null|object and rendering the component using createElementVNode when res.children is null or a string

📝 Checklist

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

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	0e9ccd3
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6331877876654c0008d564fd
😎 Deploy Preview	https://deploy-preview-7774--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[danielroe]

Thank you! ❤️

This seems like a good fix to me. Is there a way we can add a test for the different kinds of client-only components? Maybe a page in the fixture with a variety of types and we can use createPage to assert that all content is correctly displayed?

[huang-julien]

I think this should now cover most of the issues we can run into.

• Multi root node component (script + script setup) -> Fragment client only components don't respect v-show nuxt#15014
• Single Root with string children component (script + script setup) -> feat(nuxt): remove wrapper from client only components #6165 (comment)
• component with slot defineExpose doesn't work with client-only SFCs nuxt#14310
• apply directive on a component (script + script setup) client only components don't respect v-show nuxt#15014
• single root component with an array of children (script + script setup)
• component mounted but not rendered in HTML (script + script setup) feat(nuxt): remove wrapper from client only components #6165 (comment)
• directive reactivity (change v-show value)
• no state component being rendered

let me know if i missed something :)

[danielroe]

This looks great, and I'm really happy with the test suite - thank you 😊

[huang-julien]

i forgot to set .client on some test components

[huang-julien]

updated #7774 (comment)

• fixed missing .client in test components name.
• Use createElementVNode instead of createElementBlock. Components without any state or script are not rendered using createElementBlock.
• test V show directive reactivity using a ref