Skip to content

Conversation

@rzzf
Copy link
Contributor

@rzzf rzzf commented Dec 22, 2025

The code is sourced from DefinitelyTyped

Summary by CodeRabbit

  • New Features
    • Enhanced TypeScript support for input element autocomplete attributes with comprehensive type definitions, providing better IDE autocomplete suggestions and improved type safety for form fields including billing, shipping, contact, and credential-related input types.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link

coderabbitai bot commented Dec 22, 2025

Walkthrough

This change adds comprehensive TypeScript type definitions for HTML autofill attributes in the runtime-dom package. It introduces union and template literal types for various autofill categories (address kinds, contact fields, credential fields, and common field names), along with helper types for optional prefix/postfix tokens. The InputHTMLAttributes.autocomplete property is updated to use the new InputAutoCompleteAttribute type for stricter type safety.

Changes

Cohort / File(s) Change Summary
Autofill Type System
packages/runtime-dom/src/jsx.ts
Added 11 new exported type definitions for autofill support (AutoFillAddressKind, AutoFillBase, AutoFillContactField, AutoFillContactKind, AutoFillCredentialField, AutoFillNormalField, OptionalPrefixToken, OptionalPostfixToken, AutoFillField, AutoFillSection, AutoFill); Added InputAutoCompleteAttribute union type combining AutoFill and open string; Updated InputHTMLAttributes.autocomplete property type from string | undefined to InputAutoCompleteAttribute | undefined

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • Verify all type definitions align with HTML5 autofill/autocomplete specifications
  • Validate the composition logic of template literal types (AutoFillField, AutoFill) to ensure optional tokens combine correctly
  • Confirm InputAutoCompleteAttribute is properly exported and correctly assigned to the autocomplete property

Suggested labels

scope: types, ready to merge

Poem

🐰 Types cascade like carrots in a row,
Autofill fields now cleanly glow,
Template literals dance with grace,
InputHTML finds its proper place!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change—improving the autocomplete type in JSX by adding comprehensive typing support for the autocomplete attribute.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

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

@github-actions
Copy link

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 103 kB 39.1 kB 35.2 kB
vue.global.prod.js 161 kB 59.1 kB 52.6 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 47 kB 18.4 kB 16.8 kB
createApp 55.2 kB 21.4 kB 19.6 kB
createSSRApp 59.4 kB 23.2 kB 21.1 kB
defineCustomElement 60.7 kB 23.1 kB 21.1 kB
overall 69.5 kB 26.7 kB 24.3 kB

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 22, 2025

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14237
npm i https://pkg.pr.new/@vue/compiler-core@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14237
npm i https://pkg.pr.new/@vue/compiler-dom@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14237
npm i https://pkg.pr.new/@vue/compiler-sfc@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14237
npm i https://pkg.pr.new/@vue/compiler-ssr@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14237
npm i https://pkg.pr.new/@vue/reactivity@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14237
npm i https://pkg.pr.new/@vue/runtime-core@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14237
npm i https://pkg.pr.new/@vue/runtime-dom@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14237
npm i https://pkg.pr.new/@vue/server-renderer@14237
yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14237
npm i https://pkg.pr.new/@vue/shared@14237
yarn add https://pkg.pr.new/@vue/[email protected]

vue

pnpm add https://pkg.pr.new/vue@14237
npm i https://pkg.pr.new/vue@14237
yarn add https://pkg.pr.new/[email protected]

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14237
npm i https://pkg.pr.new/@vue/compat@14237
yarn add https://pkg.pr.new/@vue/[email protected]

commit: 6b96296

@edison1105 edison1105 added scope: types 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. labels Dec 23, 2025
@edison1105
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Dec 23, 2025

📝 Ran ecosystem CI: Open

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

@edison1105 edison1105 added the ready to merge The PR is ready to be merged. label Dec 23, 2025
Comment on lines +564 to +623
export type AutoFillAddressKind = 'billing' | 'shipping'
export type AutoFillBase = '' | 'off' | 'on'
export type AutoFillContactField =
| 'email'
| 'tel'
| 'tel-area-code'
| 'tel-country-code'
| 'tel-extension'
| 'tel-local'
| 'tel-local-prefix'
| 'tel-local-suffix'
| 'tel-national'
export type AutoFillContactKind = 'home' | 'mobile' | 'work'
export type AutoFillCredentialField = 'webauthn'
export type AutoFillNormalField =
| 'additional-name'
| 'address-level1'
| 'address-level2'
| 'address-level3'
| 'address-level4'
| 'address-line1'
| 'address-line2'
| 'address-line3'
| 'bday-day'
| 'bday-month'
| 'bday-year'
| 'cc-csc'
| 'cc-exp'
| 'cc-exp-month'
| 'cc-exp-year'
| 'cc-family-name'
| 'cc-given-name'
| 'cc-name'
| 'cc-number'
| 'cc-type'
| 'country'
| 'country-name'
| 'current-password'
| 'family-name'
| 'given-name'
| 'honorific-prefix'
| 'honorific-suffix'
| 'name'
| 'new-password'
| 'one-time-code'
| 'organization'
| 'postal-code'
| 'street-address'
| 'transaction-amount'
| 'transaction-currency'
| 'username'
export type OptionalPrefixToken<T extends string> = `${T} ` | ''
export type OptionalPostfixToken<T extends string> = ` ${T}` | ''
export type AutoFillField =
| AutoFillNormalField
| `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`
export type AutoFillSection = `section-${string}`
export type AutoFill =
| AutoFillBase
| `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`
Copy link
Member

@KazariEX KazariEX Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think these types should be exported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ready to merge The PR is ready to be merged. scope: types

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants