mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 06:05:11 +00:00
fix(nuxt): add basic typings for <ClientOnly>
This commit is contained in:
parent
e8e01bac13
commit
f1ded44e80
@ -1,4 +1,5 @@
|
|||||||
import { createElementBlock, createElementVNode, defineComponent, h, mergeProps, onMounted, ref } from 'vue'
|
import { createElementBlock, createElementVNode, defineComponent, h, mergeProps, onMounted, ref } from 'vue'
|
||||||
|
import type { ComponentOptions } from 'vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'ClientOnly',
|
name: 'ClientOnly',
|
||||||
@ -8,7 +9,7 @@ export default defineComponent({
|
|||||||
setup (_, { slots, attrs }) {
|
setup (_, { slots, attrs }) {
|
||||||
const mounted = ref(false)
|
const mounted = ref(false)
|
||||||
onMounted(() => { mounted.value = true })
|
onMounted(() => { mounted.value = true })
|
||||||
return (props) => {
|
return (props: any) => {
|
||||||
if (mounted.value) { return slots.default?.() }
|
if (mounted.value) { return slots.default?.() }
|
||||||
const slot = slots.fallback || slots.placeholder
|
const slot = slots.fallback || slots.placeholder
|
||||||
if (slot) { return slot() }
|
if (slot) { return slot() }
|
||||||
@ -21,7 +22,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
const cache = new WeakMap()
|
const cache = new WeakMap()
|
||||||
|
|
||||||
export function createClientOnly (component) {
|
export function createClientOnly<T extends ComponentOptions> (component: T) {
|
||||||
if (cache.has(component)) {
|
if (cache.has(component)) {
|
||||||
return cache.get(component)
|
return cache.get(component)
|
||||||
}
|
}
|
||||||
@ -30,9 +31,9 @@ export function createClientOnly (component) {
|
|||||||
|
|
||||||
if (clone.render) {
|
if (clone.render) {
|
||||||
// override the component render (non script setup component)
|
// override the component render (non script setup component)
|
||||||
clone.render = (ctx, ...args) => {
|
clone.render = (ctx: any, ...args: any[]) => {
|
||||||
if (ctx.mounted$) {
|
if (ctx.mounted$) {
|
||||||
const res = component.render(ctx, ...args)
|
const res = component.render!(ctx, ...args)
|
||||||
return (res.children === null || typeof res.children === 'string')
|
return (res.children === null || typeof res.children === 'string')
|
||||||
? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
|
? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
|
||||||
: h(res)
|
: h(res)
|
||||||
@ -56,7 +57,7 @@ export function createClientOnly (component) {
|
|||||||
.then((setupState) => {
|
.then((setupState) => {
|
||||||
return typeof setupState !== 'function'
|
return typeof setupState !== 'function'
|
||||||
? { ...setupState, mounted$ }
|
? { ...setupState, mounted$ }
|
||||||
: (...args) => {
|
: (...args: any[]) => {
|
||||||
if (mounted$.value) {
|
if (mounted$.value) {
|
||||||
const res = setupState(...args)
|
const res = setupState(...args)
|
||||||
return (res.children === null || typeof res.children === 'string')
|
return (res.children === null || typeof res.children === 'string')
|
Loading…
Reference in New Issue
Block a user