refactor: adjust internal vnode types + more dts tests

packages/runtime-core/src/apiOptions.ts

@@ -83,7 +83,7 @@ export type ComponentOptionsWithoutProps<
   M extends MethodOptions = {}
 > = ComponentOptionsBase<Props, RawBindings, D, C, M> & {
   props?: undefined
-} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M>>
+} & ThisType<ComponentPublicInstance<{}, RawBindings, D, C, M, Props>>
 
 export type ComponentOptionsWithArrayProps<
   PropNames extends string = string,
@@ -459,7 +459,7 @@ function createWatcher(
   ctx: ComponentPublicInstance,
   key: string
 ) {
-  const getter = () => ctx[key]
+  const getter = () => (ctx as Data)[key]
   if (isString(raw)) {
     const handler = renderContext[raw]
     if (isFunction(handler)) {

packages/runtime-core/src/apiWatch.ts

@@ -19,7 +19,8 @@ import { recordEffect } from './apiReactivity'
 import {
   currentInstance,
   ComponentInternalInstance,
-  currentSuspense
+  currentSuspense,
+  Data
 } from './component'
 import {
   ErrorCodes,
@@ -219,7 +220,7 @@ export function instanceWatch(
   cb: Function,
   options?: WatchOptions
 ): StopHandle {
-  const ctx = this.renderProxy!
+  const ctx = this.renderProxy as Data
   const getter = isString(source) ? () => ctx[source] : source.bind(ctx)
   const stop = watch(getter, cb.bind(ctx), options)
   onBeforeUnmount(stop, this)

packages/runtime-core/src/component.ts

@@ -25,7 +25,7 @@ import {
   makeMap,
   isPromise
 } from '@vue/shared'
-import { SuspenseBoundary } from './rendererSuspense'
+import { SuspenseBoundary } from './components/Suspense'
 import {
   CompilerError,
   CompilerOptions,

packages/runtime-core/src/componentProxy.ts

@@ -26,7 +26,6 @@ export type ComponentPublicInstance<
   M extends MethodOptions = {},
   PublicProps = P
 > = {
-  [key: string]: any
   $data: D
   $props: PublicProps
   $attrs: Data

packages/runtime-core/src/components/KeepAlive.ts

@@ -13,7 +13,7 @@ import { onBeforeUnmount, injectHook, onUnmounted } from '../apiLifecycle'
 import { isString, isArray } from '@vue/shared'
 import { watch } from '../apiWatch'
 import { ShapeFlags } from '../shapeFlags'
-import { SuspenseBoundary } from '../rendererSuspense'
+import { SuspenseBoundary } from './Suspense'
 import {
   RendererInternals,
   queuePostRenderEffect,
@@ -39,7 +39,7 @@ export interface KeepAliveSink {
   deactivate: (vnode: VNode) => void
 }
 
-export const KeepAlive = {
+const KeepAliveImpl = {
   name: `KeepAlive`,
 
   // Marker for special handling inside the renderer. We are not using a ===
@@ -201,13 +201,20 @@ export const KeepAlive = {
 }
 
 if (__DEV__) {
-  ;(KeepAlive as any).props = {
+  ;(KeepAliveImpl as any).props = {
     include: [String, RegExp, Array],
     exclude: [String, RegExp, Array],
     max: [String, Number]
   }
 }
 
+// export the public type for h/tsx inference
+export const KeepAlive = (KeepAliveImpl as any) as {
+  new (): {
+    $props: KeepAliveProps
+  }
+}
+
 function getName(comp: Component): string | void {
   return (comp as FunctionalComponent).displayName || comp.name
 }
@@ -268,7 +275,7 @@ function registerKeepAliveHook(
   if (target) {
     let current = target.parent
     while (current && current.parent) {
-      if (current.parent.type === KeepAlive) {
+      if (current.parent.type === KeepAliveImpl) {
         injectToKeepAliveRoot(wrappedHook, type, target, current)
       }
       current = current.parent

packages/runtime-core/src/components/Suspense.ts

@@ -1,15 +1,27 @@
-import { VNode, normalizeVNode, VNodeChild } from './vnode'
-import { ShapeFlags } from './shapeFlags'
+import { VNode, normalizeVNode, VNodeChild } from '../vnode'
+import { ShapeFlags } from '../shapeFlags'
 import { isFunction, isArray } from '@vue/shared'
-import { ComponentInternalInstance, handleSetupResult } from './component'
-import { Slots } from './componentSlots'
-import { RendererInternals } from './renderer'
-import { queuePostFlushCb, queueJob } from './scheduler'
-import { updateHOCHostEl } from './componentRenderUtils'
-import { handleError, ErrorCodes } from './errorHandling'
-import { pushWarningContext, popWarningContext } from './warning'
+import { ComponentInternalInstance, handleSetupResult } from '../component'
+import { Slots } from '../componentSlots'
+import { RendererInternals } from '../renderer'
+import { queuePostFlushCb, queueJob } from '../scheduler'
+import { updateHOCHostEl } from '../componentRenderUtils'
+import { handleError, ErrorCodes } from '../errorHandling'
+import { pushWarningContext, popWarningContext } from '../warning'
 
-export const Suspense = {
+export interface SuspenseProps {
+  onResolve?: () => void
+  onRecede?: () => void
+}
+
+// Suspense exposes a component-like API, and is treated like a component
+// in the compiler, but internally it's a special built-in type that hooks
+// directly into the renderer.
+export const SuspenseImpl = {
+  // In order to make Suspense tree-shakable, we need to avoid importing it
+  // directly in the renderer. The renderer checks for the __isSuspense flag
+  // on a vnode's type and calls the `process` method, passing in renderer
+  // internals.
   __isSuspense: true,
   process(
     n1: VNode | null,
@@ -49,6 +61,14 @@ export const Suspense = {
   }
 }
 
+// Force-casted public typing for h and TSX props inference
+export const Suspense = ((__FEATURE_SUSPENSE__
+  ? SuspenseImpl
+  : null) as any) as {
+  __isSuspense: true
+  new (): { $props: SuspenseProps }
+}
+
 function mountSuspense(
   n2: VNode,
   container: object,

packages/runtime-core/src/h.ts

@@ -5,9 +5,9 @@ import {
   VNodeChildren,
   Fragment,
   Portal,
-  isVNode,
-  Suspense
+  isVNode
 } from './vnode'
+import { Suspense, SuspenseProps } from './components/Suspense'
 import { isObject, isArray } from '@vue/shared'
 import { RawSlots } from './componentSlots'
 import { FunctionalComponent } from './component'
@@ -67,6 +67,9 @@ type RawChildren =
 
 // fake constructor type returned from `createComponent`
 interface Constructor<P = any> {
+  __isFragment?: never
+  __isPortal?: never
+  __isSuspense?: never
   new (): { $props: P }
 }
 
@@ -100,12 +103,7 @@ export function h(
 export function h(type: typeof Suspense, children?: RawChildren): VNode
 export function h(
   type: typeof Suspense,
-  props?:
-    | (RawProps & {
-        onResolve?: () => void
-        onRecede?: () => void
-      })
-    | null,
+  props?: (RawProps & SuspenseProps) | null,
   children?: RawChildren | RawSlots
 ): VNode
 

packages/runtime-core/src/index.ts

@@ -1,5 +1,6 @@
 // Public API ------------------------------------------------------------------
 
+export const version = __VERSION__
 export * from './apiReactivity'
 export * from './apiWatch'
 export * from './apiLifecycle'
@@ -23,9 +24,10 @@ export {
   createBlock
 } from './vnode'
 // VNode type symbols
-export { Text, Comment, Fragment, Portal, Suspense } from './vnode'
+export { Text, Comment, Fragment, Portal } from './vnode'
 // Internal Components
-export { KeepAlive } from './components/KeepAlive'
+export { Suspense, SuspenseProps } from './components/Suspense'
+export { KeepAlive, KeepAliveProps } from './components/KeepAlive'
 // VNode flags
 export { PublicShapeFlags as ShapeFlags } from './shapeFlags'
 import { PublicPatchFlags } from '@vue/shared'
@@ -111,6 +113,4 @@ export {
   FunctionDirective,
   DirectiveArguments
 } from './directives'
-export { SuspenseBoundary } from './rendererSuspense'
-
-export const version = __VERSION__
+export { SuspenseBoundary } from './components/Suspense'

packages/runtime-core/src/renderer.ts

@@ -47,9 +47,9 @@ import { ComponentPublicInstance } from './componentProxy'
 import { App, createAppAPI } from './apiApp'
 import {
   SuspenseBoundary,
-  Suspense,
-  queueEffectWithSuspense
-} from './rendererSuspense'
+  queueEffectWithSuspense,
+  SuspenseImpl
+} from './components/Suspense'
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import { KeepAliveSink } from './components/KeepAlive'
 
@@ -265,7 +265,7 @@ export function createRenderer<
             optimized
           )
         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
-          ;(type as typeof Suspense).process(
+          ;(type as typeof SuspenseImpl).process(
             n1,
             n2,
             container,

packages/runtime-core/src/vnode.ts

@@ -16,31 +16,25 @@ import { RawSlots } from './componentSlots'
 import { ShapeFlags } from './shapeFlags'
 import { isReactive, Ref } from '@vue/reactivity'
 import { AppContext } from './apiApp'
-import { SuspenseBoundary } from './rendererSuspense'
+import { SuspenseBoundary } from './components/Suspense'
 import { DirectiveBinding } from './directives'
-import { Suspense as SuspenseImpl } from './rendererSuspense'
+import { SuspenseImpl } from './components/Suspense'
 
 export const Fragment = (Symbol(__DEV__ ? 'Fragment' : undefined) as any) as {
-  // type differentiator for h()
   __isFragment: true
+  new (): {
+    $props: VNodeProps
+  }
 }
 export const Portal = (Symbol(__DEV__ ? 'Portal' : undefined) as any) as {
-  // type differentiator for h()
   __isPortal: true
+  new (): {
+    $props: VNodeProps & { target: string | object }
+  }
 }
 export const Text = Symbol(__DEV__ ? 'Text' : undefined)
 export const Comment = Symbol(__DEV__ ? 'Comment' : undefined)
 
-// Export Suspense with casting to avoid circular type dependency between
-// `suspense.ts` and `createRenderer.ts` in exported types.
-// A circular type dependency causes tsc to generate d.ts with dynmaic import()
-// calls using realtive paths, which works for separate d.ts files, but will
-// fail after d.ts rollup with API Extractor.
-const Suspense = ((__FEATURE_SUSPENSE__ ? SuspenseImpl : null) as any) as {
-  __isSuspense: true
-}
-export { Suspense }
-
 export type VNodeTypes =
   | string
   | Component
@@ -48,12 +42,12 @@ export type VNodeTypes =
   | typeof Portal
   | typeof Text
   | typeof Comment
-  | typeof Suspense
+  | typeof SuspenseImpl
 
 export interface VNodeProps {
   [key: string]: any
   key?: string | number
-  ref?: string | Ref | ((ref: object) => void)
+  ref?: string | Ref | ((ref: object | null) => void)
 }
 
 type VNodeChildAtom<HostNode, HostElement> =

packages/runtime-core/src/warning.ts

@@ -116,7 +116,7 @@ const classify = (str: string): string =>
   str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '')
 
 function formatComponentName(vnode: ComponentVNode, file?: string): string {
-  const Component = vnode.type
+  const Component = vnode.type as Component
   let name = isFunction(Component)
     ? Component.displayName || Component.name
     : Component.name