types: make createBlock work with Suspense/Teleport

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,

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

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<string, any> | 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),

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<Props, RawBindings>(
@@ -428,3 +432,10 @@ describe('class', () => {
 
   expectType<number>(props.foo)
 })
+
+describe('createBlock & createVNode', () => {
+  createBlock(Teleport)
+  createBlock(Suspense)
+  createVNode(Teleport)
+  createVNode(Suspense)
+})