refactor(components): [link] use type-based definitions by cjn021 · Pull Request #23411 · element-plus/element-plus

cjn021 · 2026-01-17T11:06:43Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.

Summary by CodeRabbit

Refactor
- Improved Link component type safety and prop handling; introduced an explicit prop interface and default values (href defaults to empty, target defaults to '_self').
Deprecated
- Marked the previous prop builder and the old props type as deprecated in favor of the new public interface.

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

github-actions · 2026-01-17T11:06:52Z

coderabbitai · 2026-01-17T11:06:56Z

📝 Walkthrough

Walkthrough

Introduces a new exported TypeScript interface LinkProps, replaces runtime linkProps usage with typed defineProps<LinkProps>() plus withDefaults, adjusts exported prop-related types (LinkPropsPublic), and adds deprecation notes for the original prop object.

Changes

Cohort / File(s)	Summary
Props declarations & exports `packages/components/link/src/link.ts`	Added exported interface `LinkProps`; switched imports to `import type { Component, ExtractPublicPropTypes, PropType } from 'vue'`; removed exported alias that used `ExtractPropTypes`; added `LinkPropsPublic` and deprecation notes on the original `linkProps`.
Component prop usage `packages/components/link/src/link.vue`	Replaced `defineProps(linkProps)` with `defineProps<LinkProps>()` and `withDefaults()` (defaults: `type`, `underline` undefined; `href: ''`; `target: '_self'`); removed runtime import of `linkProps`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

refactor(components): [affix] use type-based definitions #23400 — similar refactor introducing exported Props interfaces and switching to typed defineProps<T>() with withDefaults.
refactor(components): [input] use type-based definitions #23366 — same pattern: replace ExtractPropTypes-based aliases and runtime prop objects with explicit public prop interfaces and typed defineProps.

Suggested reviewers

rzzf
btea
Dsaquel

Poem

🐇
I hopped through types with nimble feet,
From runtime props to interface neat.
Defaults tucked in a cozy nest,
Deprecated map laid to rest.
Link leaps on — tidy and sweet! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description contains only the submission checklist template with all items unchecked, but no actual description of the changes, objectives, or context for the refactoring work.	Add a detailed description explaining the refactoring purpose, benefits of type-based definitions, and any migration context. Reference any related issues if applicable.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'refactor(components): [link] use type-based definitions' clearly and specifically describes the main change: migrating the Link component to type-based prop definitions instead of runtime-based definitions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

📝 Generate docstrings

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.}

pkg-pr-new · 2026-01-17T11:08:24Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@23411

npm i https://pkg.pr.new/element-plus/element-plus@23411

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: 7f5829e

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/components/link/src/link.vue`:
- Around line 23-35: The change replaced runtime prop validation by switching to
defineProps<LinkProps>() (removing buildProps/linkProps and iconPropType
validators), which loses enum/value/prop-type runtime warnings; to fix, restore
runtime validation by reintroducing buildProps-based prop definitions (or add
explicit runtime checks) for the type and underline enums and the icon prop
before using them—update the component to use the original linkProps/buildProps
or validate inside setup using the same validators so invalid values trigger
runtime warnings while keeping the TypeScript types; reference the symbols
defineProps<LinkProps>(), linkProps/buildProps, iconPropType, and any usage of
type/underline in the component to locate where to add the checks.

🧹 Nitpick comments (1)

packages/components/link/src/link.ts (1)

3-33: Guard against drift between LinkProps and linkProps.

Now that the public interface and the runtime props are defined separately, it’s easy for them to diverge over time. Consider a lightweight compile‑time check or shared source to keep them aligned.

github-actions · 2026-01-17T11:15:58Z

🧪 Playground Preview: https://element-plus.run/?pr=23411
Please comment the example via this playground if needed.

Co-authored-by: rzzf <[email protected]>

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/components/link/src/link.ts`:
- Around line 40-42: The deprecation JSDoc is ambiguous; update the comment near
the deprecated symbol (the JSDoc block currently saying "Removed after 3.0.0")
to a clear statement such as "Deprecated since X.Y.Z; will be removed in 3.0.0.
Use `LinkProps` instead." Do the same for the second JSDoc occurrence (lines
referencing the same deprecated type around the 83-86 area), and ensure the
deprecated tag and replacement (`LinkProps`) are present and consistent.

🧹 Nitpick comments (1)

packages/components/link/src/link.ts (1)

3-38: Reduce drift between LinkProps and linkProps literals.

The literal unions in LinkProps duplicate the values arrays in linkProps, so adding a new type/underline option requires two edits. Consider extracting shared const arrays and deriving both the union types and values from them to keep a single source of truth.

♻️ Suggested refactor

+const linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default'] as const
+const linkUnderlineValues = [true, false, 'always', 'never', 'hover'] as const
+type LinkType = typeof linkTypes[number]
+type LinkUnderline = typeof linkUnderlineValues[number]
+
 export interface LinkProps {
   /**
    * `@description` type
    */
-  type?: 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default'
+  type?: LinkType
   /**
    * `@description` when underlines should appear
    */
-  underline?: boolean | 'always' | 'never' | 'hover'
+  underline?: LinkUnderline
   ...
 }

 export const linkProps = buildProps({
   /**
    * `@description` type
    */
   type: {
     type: String,
-    values: ['primary', 'success', 'warning', 'info', 'danger', 'default'],
+    values: linkTypes,
     default: undefined,
   },
   /**
    * `@description` when underlines should appear
    */
   underline: {
     type: [Boolean, String],
-    values: [true, false, 'always', 'never', 'hover'],
+    values: linkUnderlineValues,
     default: undefined,
   },

The project uses TypeScript 5.5.4, which fully supports as const assertions and indexed-access types, so this refactor is viable.

rzzf

Thank you

github-actions · 2026-01-18T05:44:38Z

@Lensiq Thanks for your contribution! ❤️

refactor(components): link use type-based definitions

f2a1199

pull-request-triage Bot assigned cjn021 Jan 17, 2026

pull-request-triage Bot added the Needs Review label Jan 17, 2026

github-actions Bot added the Contribution::Community label Jan 17, 2026

coderabbitai Bot reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/link/src/link.vue

rzzf requested changes Jan 17, 2026

View reviewed changes

Comment thread packages/components/link/src/link.ts Outdated

rzzf changed the title ~~refactor(components): link use type-based definitions~~ refactor(components): [link] use type-based definitions Jan 17, 2026

Update packages/components/link/src/link.ts

7f5829e

Co-authored-by: rzzf <[email protected]>

coderabbitai Bot reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/link/src/link.ts

rzzf approved these changes Jan 17, 2026

View reviewed changes

rzzf mentioned this pull request Jan 17, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

btea approved these changes Jan 18, 2026

View reviewed changes

btea merged commit 07a2833 into element-plus:dev Jan 18, 2026
20 of 26 checks passed

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

Uh oh!

Conversation

cjn021 commented Jan 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rzzf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cjn021 commented Jan 17, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading

coderabbitai Bot commented Jan 17, 2026 •

edited

Loading

pkg-pr-new Bot commented Jan 17, 2026 •

edited

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading