feat(nuxt): remove wrapper from client only components

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

@@ -19,18 +19,19 @@ export default defineComponent({
 })
 
 export function createClientOnly (component) {
+  const { setup } = component
   return defineComponent({
-    name: 'ClientOnlyWrapper',
-    inheritAttrs: false,
-    setup (_props, { attrs, slots }) {
+    ...component,
+    setup (props, ctx) {
       const mounted = ref(false)
       onMounted(() => { mounted.value = true })
-      return () => {
-        if (mounted.value) {
-          return h(component, attrs, slots)
-        }
-        return h('div', { class: attrs.class, style: attrs.style })
-      }
+
+      return Promise.resolve(setup?.(props, ctx) || {})
+        .then((setupState) => {
+          const render = setupState && typeof setupState === 'function' ? res : component.render
+          return (ctx, cache, props, _, data, options) =>
+            mounted.value ? h(render(ctx, cache, props, setupState, data, options)) : h('div', ctx.$attrs)
+        })
     }
   })
 }

test/basic.test.ts

@@ -44,6 +44,9 @@ describe('pages', () => {
     expect(html).toContain('Composable | template: auto imported from ~/components/template.ts')
     // should import components
     expect(html).toContain('This is a custom component with a named export.')
+    // should apply attributes to client-only components
+    expect(html).toContain('<div style="color:red;" class="client-only"></div>')
+    // should register global components automatically
     expect(html).toContain('global component registered automatically')
     expect(html).toContain('global component via suffix')
 

test/fixtures/basic/components/ClientWrapped.client.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+function exposedFunc () {
+  console.log('ok')
+}
+
+defineExpose({ exposedFunc })
+
+await new Promise(resolve => setTimeout(resolve, 300))
+
+onMounted(() => { console.log('mounted') })
+</script>
+
+<template>
+  <div>
+    client-only component
+  </div>
+</template>

test/fixtures/basic/pages/index.vue

@@ -16,6 +16,7 @@
     <CustomComponent />
     <component :is="`test${'-'.toString()}global`" />
     <component :is="`with${'-'.toString()}suffix`" />
+    <ClientWrapped ref="clientRef" style="color: red;" class="client-only" />
   </div>
 </template>
 
@@ -26,4 +27,9 @@ const config = useRuntimeConfig()
 
 const foo = useFoo()
 const bar = useBar()
+const clientRef = ref()
+
+onMounted(() => {
+  clientRef.value.exposedFunc()
+})
 </script>