From 0c7fd13ea628a2f1b72c6f4150c0dba32da4468e Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Fri, 20 May 2022 17:59:29 +0100
Subject: [PATCH] fix(types): fix typescript error when spreading
 `$props`(#5968)

---
 packages/runtime-core/src/index.ts          |  2 +-
 packages/runtime-core/src/vnode.ts          |  6 +++++-
 packages/runtime-dom/types/jsx.d.ts         |  6 +-----
 test-dts/componentTypeExtensions.test-d.tsx |  1 +
 test-dts/defineComponent.test-d.tsx         | 19 +++++++++++++++++++
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 6e85afe4db5..12a2dee2773 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -86,7 +86,7 @@ export { h } from './h'
 // Advanced render function utilities
 export { createVNode, cloneVNode, mergeProps, isVNode } from './vnode'
 // VNode types
-export { Fragment, Text, Comment, Static } from './vnode'
+export { Fragment, Text, Comment, Static, VNodeRef } from './vnode'
 // Built-in components
 export { Teleport, TeleportProps } from './components/Teleport'
 export { Suspense, SuspenseProps } from './components/Suspense'
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 0a2543a70e7..b2c52ac7e2e 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -43,6 +43,7 @@ import { convertLegacyComponent } from './compat/component'
 import { convertLegacyVModelProps } from './compat/componentVModel'
 import { defineLegacyVNodeProperties } from './compat/renderFn'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
+import { ComponentPublicInstance } from './componentPublicInstance'
 
 export const Fragment = Symbol(__DEV__ ? 'Fragment' : undefined) as any as {
   __isFragment: true
@@ -68,7 +69,10 @@ export type VNodeTypes =
 export type VNodeRef =
   | string
   | Ref
-  | ((ref: object | null, refs: Record<string, any>) => void)
+  | ((
+      ref: Element | ComponentPublicInstance | null,
+      refs: Record<string, any>
+    ) => void)
 
 export type VNodeNormalizedRefAtom = {
   i: ComponentInternalInstance
diff --git a/packages/runtime-dom/types/jsx.d.ts b/packages/runtime-dom/types/jsx.d.ts
index 38a7b5e77fd..6120f77715a 100644
--- a/packages/runtime-dom/types/jsx.d.ts
+++ b/packages/runtime-dom/types/jsx.d.ts
@@ -40,7 +40,6 @@ export interface CSSProperties
    * For examples and more information, visit:
    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    */
-      
   [v: `--${string}`]: string | number | undefined
 }
 
@@ -1311,10 +1310,7 @@ import * as RuntimeCore from '@vue/runtime-core'
 
 type ReservedProps = {
   key?: string | number | symbol
-  ref?:
-    | string
-    | RuntimeCore.Ref
-    | ((ref: Element | RuntimeCore.ComponentPublicInstance | null) => void)
+  ref?: RuntimeCore.VNodeRef
   ref_for?: boolean
   ref_key?: string
 }
diff --git a/test-dts/componentTypeExtensions.test-d.tsx b/test-dts/componentTypeExtensions.test-d.tsx
index 32a72f844e6..3ff5b7addb0 100644
--- a/test-dts/componentTypeExtensions.test-d.tsx
+++ b/test-dts/componentTypeExtensions.test-d.tsx
@@ -44,6 +44,7 @@ export const Custom = defineComponent({
 expectType<JSX.Element>(<Custom baz={1} />)
 expectType<JSX.Element>(<Custom custom={1} baz={1} />)
 expectType<JSX.Element>(<Custom bar="bar" baz={1} />)
+expectType<JSX.Element>(<Custom ref={''} bar="bar" baz={1} />)
 
 // @ts-expect-error
 expectType<JSX.Element>(<Custom />)
diff --git a/test-dts/defineComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx
index 30d25436201..f5941b4341e 100644
--- a/test-dts/defineComponent.test-d.tsx
+++ b/test-dts/defineComponent.test-d.tsx
@@ -1144,6 +1144,25 @@ describe('DefineComponent should infer correct types when assigning to Component
   expectType<Component>(component)
 })
 
+// #5969
+describe('should allow to assign props', () => {
+  const Child = defineComponent({
+    props: {
+      bar: String
+    }
+  })
+
+  const Parent = defineComponent({
+    props: {
+      ...Child.props,
+      foo: String
+    }
+  })
+
+  const child = new Child()
+  expectType<JSX.Element>(<Parent {...child.$props} />)
+})
+
 // check if defineComponent can be exported
 export default {
   // function components