Skip to content

feat(core): type the remaining json-render catalog components' props - #493

Merged
antfu merged 1 commit into
vitejs:mainfrom
dvcolomban:feat/json-render-typed-catalog
Jul 29, 2026
Merged

feat(core): type the remaining json-render catalog components' props#493
antfu merged 1 commit into
vitejs:mainfrom
dvcolomban:feat/json-render-typed-catalog

Conversation

@dvcolomban

Copy link
Copy Markdown
Contributor

Summary

Extends the co-located-Props typing pattern (introduced alongside Tabs in #492) to the rest of the base catalog: Badge, Button, CodeBlock, DataTable, Divider, Icon, KeyValueTable, Progress, Switch, Text, TextInput, Tree.

  • Each component gets its own exported *Props interface, co-located in its own file, and switches from the untyped props: ['element', 'emit', ...] array form to registryProps<Type, Props>() — this also lets defineComponent's setup(ctx, ...) infer ctx correctly instead of leaving element.props an untyped Record<string, any>.
  • All twelve *Props types are re-exported from the existing public webcomponents/index.ts barrel, alongside JsonRenderElement, so consumers can opt into JsonRenderElement<'DataTable', DataTableProps> without pulling in @vitejs/devtools-kit.
  • No behavior changes — this only types props the components already read (deliberately skips inert declared-but-dead ones), and DataTableColumn/DataTableProps narrow a couple of previously-manual casts (e.g. DataTable's column mapping) into proper inference.
  • Button keeps its runtime VARIANTS.has(variant) guard unchanged even though variant is now typed as BaseVariant — defensive check stays for specs authored without the types.

Screenshots

No visual/runtime change — this is types only. See pnpm run typecheck in the test plan below.

Test plan

  • pnpm run lint
  • pnpm run typecheck

@pkg-pr-new

pkg-pr-new Bot commented Jul 28, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@493

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@493

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@493

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@493

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@493

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@493

commit: 5ecb47e

@dvcolomban
dvcolomban force-pushed the feat/json-render-typed-catalog branch from 0e16147 to 966e126 Compare July 28, 2026 17:02
Extends the Card/Stack/Tabs pattern to the other 12 registered components
(Text, Badge, Button, Icon, Divider, TextInput, Switch, KeyValueTable,
DataTable, CodeBlock, Progress, Tree): each now co-locates and exports its
own `Props` interface, and uses `registryProps<Type, Props>()` instead of
the untyped `props: ['element', 'emit', ...]` array form, so `defineComponent`
infers `setup`'s `ctx.element.props` as the component's own type. All
`*Props` types are re-exported from the client webcomponents entry
(`@vitejs/devtools/client/webcomponents`, already public) as opt-in strict
types, alongside `Card`/`Stack`/`Tabs` from the sibling PRs — the base
catalog's full typed surface once all land.

Two components lost a redundant runtime cast now that their props are
actually typed: `Badge`'s `colors[variant as keyof typeof colors]` and
`DataTable`'s `col: any`/`row: any` map-callback annotations, both no longer
necessary once `variant`/`columns`/`rows` carry real types end to end.
@dvcolomban
dvcolomban force-pushed the feat/json-render-typed-catalog branch from 966e126 to 5ecb47e Compare July 28, 2026 17:14
@dvcolomban
dvcolomban marked this pull request as ready for review July 28, 2026 17:21
@antfu
antfu merged commit 341bceb into vitejs:main Jul 29, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants