fix(types): allow customRef to have different getter/setter types

[cyphercodes]

Problem

The customRef function only accepted a single type parameter T, which was used for both getter and setter. This prevented use cases where the setter should accept a different type than what the getter returns.

Solution

Updated CustomRefFactory, CustomRefImpl, and customRef to support two type parameters <T, S = T>, matching the Ref<T, S> interface that already supports this.

Changes

• CustomRefFactory → CustomRefFactory<T, S = T>
• CustomRefImpl → CustomRefImpl<T, S = T>
• customRef → customRef<T, S = T>
• Added type test for different getter/setter types

Backward Compatibility

This is fully backward compatible since S defaults to T.

Fixes #14637

Summary by CodeRabbit

• New Features
  • customRef now supports distinct getter and setter types, enabling more precise type control when creating custom references with different input and output type requirements.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes add support for distinct getter and setter types in customRef by introducing a second generic type parameter S to CustomRefFactory. This allows customRef to return a Ref<T, S> where T is the getter type and S is the setter type, aligning with Vue's Ref type system. A type test verifies the new functionality.

Changes

Cohort / File(s)	Summary
Type Test packages-private/dts-test/ref.test-d.ts	Added test block verifying customRef<string, number> correctly types getter as string and restricts setter to number, with type error assertion for incompatible assignments.
Implementation packages/reactivity/src/ref.ts	Updated CustomRefFactory<T, S = T> generic signature and CustomRefImpl to support separate getter (T) and setter (S) types. Modified customRef<T, S = T>() to return Ref<T, S> instead of Ref<T>.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

ready to merge, scope: reactivity, :hammer: p3-minor-bug

Poem

🐰 A custom ref with two types gleams,
Getter and setter fulfill dreams,
String goes in, numbers come out,
Type safety beyond a doubt!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR successfully implements the requirement from issue #14637: customRef now supports two generic type parameters (T, S) to allow distinct getter and setter types, with type tests confirming the functionality.
Out of Scope Changes check	✅ Passed	All changes are directly related to the issue objective: CustomRefFactory and customRef type definitions are updated to support different getter/setter types, and a type test is added to validate the implementation.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Title check	✅ Passed	The title accurately summarizes the main change: enabling customRef to support different getter and setter types, which is the core objective of the PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14639

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

yarn add https://pkg.pr.new/@vue/compiler-core@14639.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14639

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

yarn add https://pkg.pr.new/@vue/compiler-dom@14639.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14639

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@14639.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14639

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@14639.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14639

npm i https://pkg.pr.new/@vue/reactivity@14639

yarn add https://pkg.pr.new/@vue/reactivity@14639.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14639

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

yarn add https://pkg.pr.new/@vue/runtime-core@14639.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14639

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

yarn add https://pkg.pr.new/@vue/runtime-dom@14639.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14639

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

yarn add https://pkg.pr.new/@vue/server-renderer@14639.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14639

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

yarn add https://pkg.pr.new/@vue/shared@14639.tgz

vue

pnpm add https://pkg.pr.new/vue@14639

npm i https://pkg.pr.new/vue@14639

yarn add https://pkg.pr.new/vue@14639.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14639

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

yarn add https://pkg.pr.new/@vue/compat@14639.tgz

commit: ead3206

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	105 kB	39.8 kB	35.8 kB
vue.global.prod.js	164 kB	59.8 kB	53.2 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.3 kB	18.8 kB	17.2 kB
createApp	56.5 kB	21.8 kB	19.9 kB
createSSRApp	60.7 kB	23.6 kB	21.5 kB
defineCustomElement	62.6 kB	23.8 kB	21.7 kB
overall	71 kB	27.2 kB	24.7 kB

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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