fix(types): fix ComponentCustomProps augmentation (#9468)

close #8376

packages/dts-built-test/README.md

@@ -0,0 +1,5 @@
+# dts built-package test
+
+This package is private and for testing only. It is used to verify edge cases for external libraries that build their types using Vue core types - e.g. Vuetify as in [#8376](https://github.com/vuejs/core/issues/8376).
+
+When running the `build-dts` task, this package's types are built alongside other packages. Then, during `test-dts-only` it is imported and used in [`packages/dts-test/built.test-d.ts`](https://github.com/vuejs/core/blob/main/packages/dts-test/built.test-d.ts) to verify that the built types work correctly.

packages/dts-built-test/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vue/dts-built-test",
+  "private": true,
+  "types": "dist/dts-built-test.d.ts",
+  "dependencies": {
+    "@vue/shared": "workspace:*",
+    "@vue/reactivity": "workspace:*",
+    "vue": "workspace:*"
+  },
+  "version": "3.3.6"
+}

packages/dts-built-test/src/index.ts

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+const _CustomPropsNotErased = defineComponent({
+  props: {},
+  setup() {}
+})
+
+// #8376
+export const CustomPropsNotErased =
+  _CustomPropsNotErased as typeof _CustomPropsNotErased & {
+    foo: string
+  }

packages/dts-test/built.test-d.ts

@@ -0,0 +1,13 @@
+import { CustomPropsNotErased } from '@vue/dts-built-test'
+import { expectType, describe } from './utils'
+
+declare module 'vue' {
+  interface ComponentCustomProps {
+    custom?: number
+  }
+}
+
+// #8376 - custom props should not be erased
+describe('Custom Props not erased', () => {
+  expectType<number | undefined>(new CustomPropsNotErased().$props.custom)
+})

packages/dts-test/package.json

@@ -2,7 +2,8 @@
   "name": "dts-test",
   "private": true,
   "dependencies": {
-    "vue": "workspace:*"
+    "vue": "workspace:*",
+    "@vue/dts-built-test": "workspace:*"
   },
   "version": "3.3.6"
 }

packages/runtime-core/src/componentPublicInstance.ts

@@ -206,11 +206,9 @@ export type ComponentPublicInstance<
 > = {
   $: ComponentInternalInstance
   $data: D
-  $props: Prettify<
-    MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
-      : P & PublicProps
-  >
+  $props: MakeDefaultsOptional extends true
+    ? Partial<Defaults> & Omit<Prettify<P> & PublicProps, keyof Defaults>
+    : Prettify<P> & PublicProps
   $attrs: Data
   $refs: Data
   $slots: UnwrapSlotsType<S>

pnpm-lock.yaml

@@ -257,8 +257,23 @@ importers:
         specifier: 3.3.6
         version: link:../shared
 
+  packages/dts-built-test:
+    dependencies:
+      '@vue/reactivity':
+        specifier: workspace:*
+        version: link:../reactivity
+      '@vue/shared':
+        specifier: workspace:*
+        version: link:../shared
+      vue:
+        specifier: workspace:*
+        version: link:../vue
+
   packages/dts-test:
     dependencies:
+      '@vue/dts-built-test':
+        specifier: workspace:*
+        version: link:../dts-built-test
       vue:
         specifier: workspace:*
         version: link:../vue