Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

feat(nuxt): remove wrapper from client only components #6165

Merged
merged 23 commits into from
Aug 2, 2022
Merged
Changes from 4 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
c7dea42
fix(nuxt): make client only redefine the component instead of wrappin…
huang-julien Jul 26, 2022
25580cb
fix(nuxt): use ctx instead of state to avoid vue Error
huang-julien Jul 26, 2022
f77d169
refactor(nuxt): remove unused import
huang-julien Jul 26, 2022
e5b668f
fix(nuxt): wrap the render with h()
huang-julien Jul 26, 2022
7bb336c
Merge remote-tracking branch 'origin/main' into fix/create-client-onl…
danielroe Jul 27, 2022
a4b7150
refactor: use collision-resistant name and pass all attrs
danielroe Jul 27, 2022
9975293
test: add client-only component to fixture using ref + expose
danielroe Jul 27, 2022
d3fbb3c
fix: register callback before calling setup
danielroe Jul 27, 2022
0f87fd3
fix: refactor wholly into setup function
danielroe Jul 27, 2022
fb8798c
Merge branch 'main' into fix/create-client-only-wrapper
danielroe Jul 27, 2022
c963ba8
fix(nuxt): pass setup result to component render
huang-julien Jul 27, 2022
1a904b1
Update packages/nuxt/src/app/components/client-only.mjs
danielroe Jul 27, 2022
b08a875
fix(nuxt): conditionnal render on build-dev for client-only.mjs
Jul 28, 2022
8df797a
fix(nuxt): use render() and return setup result only in dev
huang-julien Jul 28, 2022
fea482e
fix(nuxt): keep original component structure for createClientOnly()
huang-julien Jul 28, 2022
294c077
fix(nuxt): fix inheritAttrs and handle template in createClientOnly
Jul 29, 2022
0431072
fix(nuxt): fix attrs inheritance
Jul 29, 2022
cacf259
Merge remote-tracking branch 'origin/main' into fix/create-client-onl…
danielroe Jul 29, 2022
860c716
refactor: pass other render args as is without naming
pi0 Aug 2, 2022
0bf46dd
use ctx to read prop
pi0 Aug 2, 2022
986bc42
refactor: rename state to __mounted__
pi0 Aug 2, 2022
3ff8bbb
Merge branch 'main' into fix/create-client-only-wrapper
pi0 Aug 2, 2022
4d400c7
revert state name
pi0 Aug 2, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions packages/nuxt/src/app/components/client-only.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,22 @@ export default defineComponent({
})

export function createClientOnly (component) {
return defineComponent({
name: 'ClientOnlyWrapper',
inheritAttrs: false,
setup (_props, { attrs, slots }) {
const { setup } = component
return {
...component,
setup (props, ctx) {
const res = setup?.(props, ctx) || {}

const mounted = ref(false)
onMounted(() => { mounted.value = true })
danielroe marked this conversation as resolved.
Show resolved Hide resolved
return () => {
if (mounted.value) {
return h(component, attrs, slots)
}
return h('div', { class: attrs.class, style: attrs.style })
}

return Promise.resolve(res)
.then(() => ({ ...res, mounted }))
},
render (ctx, cache, props, state, data, options) {
return ctx.mounted
? h(component.render(ctx, cache, props, state, data, options))
: h('div', { class: ctx.$attrs?.class, style: ctx.$attrs?.style })
}
})
}
}