From 69b7a2dcc2e68921dd9ff200ce9aaabc3da4c1f2 Mon Sep 17 00:00:00 2001 From: HcySunYang Date: Thu, 7 Jan 2021 21:38:29 +0800 Subject: [PATCH] types: make createBlock work with Suspense/Teleport --- .../runtime-core/src/components/Suspense.ts | 10 ++++--- .../runtime-core/src/components/Teleport.ts | 5 ++-- packages/runtime-core/src/vnode.ts | 27 +++++++++++++------ test-dts/component.test-d.ts | 13 ++++++++- 4 files changed, 40 insertions(+), 15 deletions(-) diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts index 7510d78710a..bcfa4805286 100644 --- a/packages/runtime-core/src/components/Suspense.ts +++ b/packages/runtime-core/src/components/Suspense.ts @@ -82,14 +82,16 @@ export const SuspenseImpl = { create: createSuspenseBoundary } -// Force-casted public typing for h and TSX props inference -export const Suspense = ((__FEATURE_SUSPENSE__ - ? SuspenseImpl - : null) as any) as { +export type SuspenseComponentType = { __isSuspense: true new (): { $props: VNodeProps & SuspenseProps } } +// Force-casted public typing for h and TSX props inference +export const Suspense = ((__FEATURE_SUSPENSE__ + ? SuspenseImpl + : null) as any) as SuspenseComponentType + function mountSuspense( vnode: VNode, container: RendererElement, diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index 5bbe899e4c8..c23b0fd43b4 100644 --- a/packages/runtime-core/src/components/Teleport.ts +++ b/packages/runtime-core/src/components/Teleport.ts @@ -369,8 +369,9 @@ function hydrateTeleport( return vnode.anchor && nextSibling(vnode.anchor as Node) } -// Force-casted public typing for h and TSX props inference -export const Teleport = (TeleportImpl as any) as { +export type TeleportComponentType = { __isTeleport: true new (): { $props: VNodeProps & TeleportProps } } +// Force-casted public typing for h and TSX props inference +export const Teleport = (TeleportImpl as any) as TeleportComponentType diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index e46c9842619..b47099df527 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -27,16 +27,18 @@ import { SuspenseImpl, isSuspense, SuspenseBoundary, - normalizeSuspenseChildren + normalizeSuspenseChildren, + SuspenseComponentType } from './components/Suspense' import { DirectiveBinding } from './directives' import { TransitionHooks } from './components/BaseTransition' import { warn } from './warning' -import { TeleportImpl, isTeleport } from './components/Teleport' import { - currentRenderingInstance, - currentScopeId -} from './componentRenderContext' + TeleportImpl, + isTeleport, + TeleportComponentType +} from './components/Teleport' +import { currentRenderingInstance, currentScopeId } from './componentRenderContext' import { RendererNode, RendererElement } from './renderer' import { NULL_DYNAMIC_COMPONENT } from './helpers/resolveAssets' import { hmrDirtyComponents } from './hmr' @@ -241,7 +243,11 @@ export function setBlockTracking(value: number) { * @private */ export function createBlock( - type: VNodeTypes | ClassComponent, + type: + | VNodeTypes + | ClassComponent + | TeleportComponentType + | SuspenseComponentType, props?: Record | null, children?: any, patchFlag?: number, @@ -328,7 +334,12 @@ export const createVNode = (__DEV__ : _createVNode) as typeof _createVNode function _createVNode( - type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT, + type: + | VNodeTypes + | ClassComponent + | TeleportComponentType + | SuspenseComponentType + | typeof NULL_DYNAMIC_COMPONENT, props: (Data & VNodeProps) | null = null, children: unknown = null, patchFlag: number = 0, @@ -406,7 +417,7 @@ function _createVNode( const vnode: VNode = { __v_isVNode: true, [ReactiveFlags.SKIP]: true, - type, + type: type as VNodeTypes, props, key: props && normalizeKey(props), ref: props && normalizeRef(props), diff --git a/test-dts/component.test-d.ts b/test-dts/component.test-d.ts index 06368e37778..959539de0dc 100644 --- a/test-dts/component.test-d.ts +++ b/test-dts/component.test-d.ts @@ -9,7 +9,11 @@ import { expectType, ShallowUnwrapRef, FunctionalComponent, - ComponentPublicInstance + ComponentPublicInstance, + createBlock, + createVNode, + Teleport, + Suspense } from './index' declare function extractComponentOptions( @@ -428,3 +432,10 @@ describe('class', () => { expectType(props.foo) }) + +describe('createBlock & createVNode', () => { + createBlock(Teleport) + createBlock(Suspense) + createVNode(Teleport) + createVNode(Suspense) +})