core icon indicating copy to clipboard operation
core copied to clipboard
verified publisher icon vuejs

feat(types): enhanced defineComponent inference

Open johnsoncodehk opened this issue 10 months ago • 27 comments

This PR is all about improving the implementations of defineComponent type inference. It's not a complete rewrite because we can't aggressively rewrite or remove existing types/interfaces to maintain backward compatibility (if we have plans for Vue 4 we can revisit that.)

Improvements / Changes

  • TS completion in component options is 40% faster
  • The "this" type in data and props options is more accurate
  • New DefineComponent2 type passes the structured component options type parameter as is, which streamlined .d.ts output on tsc emit: props types are now printed as is to .d.ts, same types are no longer serialized to multiple parameters in DefineComponent (reduce about 35% code in naive-ui .d.ts)
  • Tsc performance improved by about 8% in elk repo
  • Prop options (type, required, default, validator) can now navigate to TS definitions
  • emits: {} is now correctly handled as an empty event set
  • Simplified mixins, extends options inference (no longer using ComponentOptionsMixin intermediate type)
  • Simplify h function overloads (remove dependency on helper types such as DefineComponent, ConcreteComponent, etc.)

johnsoncodehk avatar Feb 24 '25 08:02 johnsoncodehk

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 85.2 kB 29.9 kB 26.4 kB
runtime-dom.global.prod.js 108 kB 40.5 kB 36.5 kB
vue.global.prod.js 166 kB 60.5 kB 53.9 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.2 kB 18.8 kB 17.2 kB
createApp 57.2 kB 22 kB 20.1 kB
createApp + vaporInteropPlugin 95.9 kB 35.4 kB 32 kB
createVaporApp 40.9 kB 15.2 kB 13.8 kB
createSSRApp 61.6 kB 23.8 kB 21.7 kB
defineCustomElement 63.3 kB 23.8 kB 21.7 kB
overall 71.9 kB 27.2 kB 24.8 kB

github-actions[bot] avatar Feb 24 '25 08:02 github-actions[bot]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12935
@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12935
@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12935
@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12935
@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@12935
@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12935
@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12935
@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12935
@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@12935
@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12935
@vue/shared

npm i https://pkg.pr.new/@vue/shared@12935
vue

npm i https://pkg.pr.new/vue@12935
@vue/compat

npm i https://pkg.pr.new/@vue/compat@12935

commit: db503fc

pkg-pr-new[bot] avatar Feb 24 '25 08:02 pkg-pr-new[bot]

/ecosystem-ci run

johnsoncodehk avatar Feb 26 '25 04:02 johnsoncodehk

/ecosystem-ci run

johnsoncodehk avatar Feb 26 '25 06:02 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :x: failure :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
pinia :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
test-utils :x: failure :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :x: failure :white_check_mark: success
vue-macros :x: failure :x: failure
vuetify :x: failure :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success

vue-bot avatar Feb 26 '25 06:02 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Feb 26 '25 07:02 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :x: failure :white_check_mark: success
nuxt :x: failure :white_check_mark: success
pinia :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
test-utils :x: failure :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :x: failure :white_check_mark: success
vue-macros :x: failure :x: failure
vuetify :x: failure :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success

vue-bot avatar Feb 26 '25 07:02 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Feb 26 '25 08:02 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :x: failure :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
pinia :x: failure :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
test-utils :x: failure :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :x: failure :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :x: failure :white_check_mark: success
vue-macros :x: failure :x: failure
vuetify :x: failure :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success

vue-bot avatar Feb 26 '25 08:02 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Feb 26 '25 09:02 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :x: failure :white_check_mark: success
nuxt :x: failure :white_check_mark: success
pinia :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :x: failure :white_check_mark: success
vue-macros :x: failure :x: failure
vuetify :x: failure :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success

vue-bot avatar Feb 26 '25 10:02 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Mar 09 '25 15:03 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :x: failure :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
pinia :x: failure :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
radix-vue :x: failure :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :x: failure :white_check_mark: success
vue-macros :x: failure :white_check_mark: success
vuetify :x: failure :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success

vue-bot avatar Mar 09 '25 15:03 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Mar 09 '25 17:03 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :x: failure :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
pinia :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :x: failure :white_check_mark: success
vue-macros :x: failure :white_check_mark: success
vuetify :x: failure :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success

vue-bot avatar Mar 09 '25 17:03 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Mar 09 '25 20:03 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :white_check_mark: success :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
pinia :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :x: failure :white_check_mark: success
vue-macros :white_check_mark: success :white_check_mark: success
vuetify :x: failure :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success

vue-bot avatar Mar 09 '25 20:03 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Mar 12 '25 14:03 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
language-tools :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
pinia :x: failure :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vue-i18n :white_check_mark: success :white_check_mark: success
vuetify :x: failure :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
vue-macros :white_check_mark: success :white_check_mark: success

vue-bot avatar Mar 12 '25 14:03 vue-bot

📝 Ran ecosystem CI: Open

suite result latest scheduled
pinia :x: failure :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
vuetify :x: failure :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
language-tools :x: failure :white_check_mark: success
vue-i18n :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
vue-macros :white_check_mark: success :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success

vue-bot avatar Mar 12 '25 14:03 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Mar 12 '25 22:03 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
nuxt :white_check_mark: success :white_check_mark: success
language-tools :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
pinia :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success
vuetify :x: failure :white_check_mark: success
vue-i18n :white_check_mark: success :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vue-macros :white_check_mark: success :white_check_mark: success

vue-bot avatar Mar 12 '25 22:03 vue-bot

/ecosystem-ci run

johnsoncodehk avatar Mar 31 '25 10:03 johnsoncodehk

📝 Ran ecosystem CI: Open

suite result latest scheduled
pinia :white_check_mark: success :white_check_mark: success
router :white_check_mark: success :white_check_mark: success
primevue :white_check_mark: success :white_check_mark: success
nuxt :white_check_mark: success :white_check_mark: success
quasar :white_check_mark: success :white_check_mark: success
language-tools :white_check_mark: success :white_check_mark: success
vite-plugin-vue :white_check_mark: success :white_check_mark: success
vue-simple-compiler :white_check_mark: success :white_check_mark: success
vitepress :white_check_mark: success :white_check_mark: success
test-utils :white_check_mark: success :white_check_mark: success
vue-i18n :white_check_mark: success :white_check_mark: success
vueuse :white_check_mark: success :white_check_mark: success
vue-macros :white_check_mark: success :white_check_mark: success
vant :white_check_mark: success :white_check_mark: success
vuetify :white_check_mark: success :white_check_mark: success
radix-vue :white_check_mark: success :white_check_mark: success

vue-bot avatar Mar 31 '25 10:03 vue-bot

[!IMPORTANT]

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Jul 15 '25 06:07 coderabbitai[bot]

Sorry to bother but will this be added to 3.6? Asking in case it's lost down the PRs list as it isn't added to https://github.com/orgs/vuejs/projects/4/views/1

GeoffreyParrier avatar Nov 06 '25 13:11 GeoffreyParrier

Minimal repro of the latest ci error.

KazariEX avatar Dec 06 '25 12:12 KazariEX