fix(nuxt): pass params to client-only slot

[huang-julien]

🔗 Linked issue

resolve nuxt/nuxt#14563

❓ 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

nuxt/nuxt#14563 Boom.client component compilation: SFC playground (See SSR part line 33)

In #6165 the params of the setupState (when it is a function) were ignored.

framework/packages/nuxt/src/app/components/client-only.mjs

Lines 47 to 50 in 2ec2d9b

	: () => {
	return mounted$.value
	// use Fragment to avoid oldChildren is null issue
	? h(Fragment, null, [h(setupState(props, ctx), ctx.attrs)])

This PR make the setupState render function reproduce the same behavior when overriding the render option of the component here:

framework/packages/nuxt/src/app/components/client-only.mjs

Lines 23 to 29 in 2ec2d9b

	if (_render) {
	// override the component render (non script setup component)
	component.render = (ctx, ...args) => {
	return ctx.mounted$
	? h(Fragment, null, [h(_render(ctx, ...args), ctx.$attrs ?? ctx._.attrs)])
	: h('div', ctx.$attrs ?? ctx._.attrs)
	}

You can test this here https://github.com/huang-julien/nuxt-3/tree/test/client-slot-fix

📝 Checklist

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

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	d39fc4e
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62fba45f87e58e00092717f7
😎 Deploy Preview	https://deploy-preview-6584--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]

You are quick!

[huang-julien]

@danielroe thank you! 👍

[pi0]

Thanks for the quick fix! I'm wondering if we could add a test page to basic fixture to ensure this behavior keeps working.

[huang-julien]

Thanks for the quick fix! I'm wondering if we could add a test page to basic fixture to ensure this behavior keeps working.

yes i think so, i can do it if you want (monday). I'm not sure about this but does nuxt test utils compile the SFCs to simulate a behavior in prod ?

2 different SFC needs to be tested:

• SFC with a setup script (attrs, props ...)
• SFC without setup script exporting an object (attrs, props ...)

[pi0]

does nuxt test utils compile the SFCs to simulate a behavior in prod ?

Yes. test fixture is being compiled and built before running tests. We can have a dedicated page for test suite.

[huang-julien]

@pi0 I might have an issue with the tests. The ClientOnlySetupScript.client.vue component in test/fixtures/basic has a different behavior in tests compared to the built env. The attributes are not being rendered to the html. I could'nt reproduce this issue by building the playground. Even if there's no more errors, the HTML rendered and sent by the server is different in build/prod vs test.

[pi0]

Thanks <3