fix(components): improve generic types #2499

yassilah · 2024-10-31T00:26:42Z

🔗 Linked issue

Resolves #2260, resolves #2140

This PR is a full refactor of dynamic slots inside components with improved generic types, dynamic slot names, custom properties, arrays of arrays, etc. It includes type tests for all of the components to check the payload of each slot and infer available slot names based on props.

It also replaces the previous DynamicSlots type helper with a new one:

type DynamicSlots<
    Items,  // list of items that may contain a `SlotKey`
    Suffix, // list of suffixes to add to the generated slots (e.g. `leading` or `trailing`)
    StaticKeys, // list of static slot keys to add (e.g. `item` or `content`)
    SlotKey // the key where the slot name of each item should be found
> = ...

type SlotDef = DynamicSlots<[{ slot: 'foo', value: 'cool' }], 'leading' | 'trailing', 'item', 'slot'> 

// {
//    item: { slot: 'foo', value: 'cool' },
//    item-leading: { slot: 'foo', value: 'cool' },
//    item-trailing: { slot: 'foo', value: 'cool' },
//    foo: { slot: 'foo', value: 'cool' },
//    foo-leading: { slot: 'foo', value: 'cool' },
//    foo-trailing: { slot: 'foo', value: 'cool' }
// }

const slots = defineSlots<{ [K in keyof SlotDef]: (params: SlotDef[K]) => any  }>()

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

Resolves nuxt#2488

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <[email protected]>

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Co-authored-by: Benjamin Canac <[email protected]>

pkg-pr-new · 2024-10-31T09:17:29Z

pnpm add https://pkg.pr.new/@nuxt/ui@2499

commit: b308d42

benjamincanac · 2024-10-31T10:57:11Z

Thanks a lot for this! After some tests, I don't have autocomplete on custom slots for NavigationMenu, DropdownMenu, ContextMenu, etc. I think there's also the default slot missing for Accordion.

(I've updated the PR to add the missing item-label slot on NavigationMenu)

benjamincanac · 2024-10-31T11:00:57Z

test/components/Accordion.spec.ts

@@ -55,8 +56,52 @@ describe('Accordion', () => {
    ['with body slot', { props: { ...props, modelValue: '1' }, slots: { body: () => 'Body slot' } }],
    ['with custom slot', { props: { ...props, modelValue: '5' }, slots: { custom: () => 'Custom slot' } }],
    ['with custom body slot', { props: { ...props, modelValue: '5' }, slots: { 'custom-body': () => 'Custom body slot' } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AccordionProps<typeof items[number]>, slots?: Partial<AccordionSlots<typeof items[number]>> }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AccordionProps<typeof items>, slots?: Partial<AccordionSlots<typeof items>> }) => {


Should this change not applied everywhere? 🤔

yassilah · 2024-10-31T11:11:53Z

Hey so i just tried and autocomplete does work but there's one test case I haven't tried which indeed doesn't work: when a slot is set in one item but not in the others, e.g.:

VS

I think I know why, I'll try to fix it

src/runtime/components/Accordion.vue

benjamincanac · 2024-10-31T11:21:05Z

src/runtime/components/Accordion.vue

-  body: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
+export type AccordionSlots<Items> =
+  (DynamicSlots<Items, null, 'trailing' | 'leading' | 'body' | 'content'> extends infer S ? { [K in keyof S]: SlotProps<S[K]> } & Record<string, any> : never) & (DynamicSlots<Items, 'body', null> extends infer S ? { [K in keyof S]: SlotProps<S[K]> } & Record<string, any> : never)


Why is there two definition for body? 🤔

yassilah · 2024-10-31T12:34:27Z

Ok, so actually now I'm wondering if this is really a better DX as to really get the benefits you have to use as const satisfies MyInterface[] or as const satisfies MyInterface[][] and the implementation is a bit tedious. I'm actually suggesting another option that would make things a lot easier and provide a better overall DX I think:

yassilah · 2024-10-31T12:37:03Z

Implementation would look like this and would have an extremely limited impact on the bundle since each function is just an alias. It could be auto-imported by Nuxt and then it'd be super easy to get all type hints and it would of course still be possible to not use these helpers at all

Anyway that's just a suggestion and maybe that's too overkill aha

benjamincanac · 2024-10-31T13:22:27Z

I'm not a fan honestly of this. Do we really need to do as const satisfies ...? Is it required for [][] items only?

I have the right autocompletion for the Accordion without it:

And it works with only one item having the slot field defined.

yassilah · 2024-11-03T14:43:33Z

I'm not a fan honestly of this. Do we really need to do as const satisfies ...? Is it required for [][] items only?

I have the right autocompletion for the Accordion without it:

And it works with only one item having the slot field defined.

With the current PR? and without using any as const? You don't need to use satisfies ... but it is required if you want to get autocomplete while writing your list of items to know what properties AccordionItem can have

benjamincanac · 2024-11-03T14:48:24Z

I thought you were talking about slot name autocomplete.

To know how you can define items, I'd just do const items: NavigationMenuItem[] = [].

Is this PR ready to merge?

yassilah · 2024-11-03T15:20:01Z

Yes I was talking about the slot name autocomplete, how can you have it without specifying that it's a constant? Anyway, I was just going through the PR and actually I think i overly complicated things, let me have another go at it 😅 sorry for the going back and forth

benjamincanac · 2024-11-11T18:31:04Z

@yassilah Should I close this? Do you plan to start over or improve this PR?

benjamincanac and others added 10 commits October 29, 2024 19:41

fix(InputMenu/SelectMenu): fast-deep-equal import

b8a8abd

Resolves nuxt#2488

feat(): dynamic slot names/props pairs for *-menu

e2e046c

feat(): reafctor all dynamic slots components

7bc1792

chore(): remove unnecessary type util

8ecc72a

fix(InputMenu/SelectMenu): fast-deep-equal import

7f204e8

Resolves nuxt#2488

chore(deps): update all non-major dependencies (v3) (nuxt#2454)

37b06f7

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <[email protected]>

chore(deps): lock file maintenance (v3) (nuxt#2474)

f10252e

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

feat(Table): customize header and cell through slots (nuxt#2457)

aa3d7e5

Co-authored-by: Benjamin Canac <[email protected]>

Merge branch 'v3' into dynamic-slots

7c87411

Merge branch 'v3' into dynamic-slots

a0e6215

yassilah changed the title ~~fix(DropdownMenu/ContextMenu/CommandPalette/NavigationMenu/Accordion/Breadcrumb): improve generic types~~ fix(DropdownMenu/ContextMenu/CommandPalette/NavigationMenu/Accordion/Breadcrumb/Tabs): improve generic types Oct 31, 2024

yassilah added 4 commits October 31, 2024 01:33

fix(): missing parenthesis

f3626e2

fix(): don't force CommandPaletteItem

a3b398b

fix(): use group type as first generic for nuxt ui pro

0114ad6

fix: command palette props order

4e1d8d2

benjamincanac changed the title ~~fix(DropdownMenu/ContextMenu/CommandPalette/NavigationMenu/Accordion/Breadcrumb/Tabs): improve generic types~~ fix(components): improve generic types Oct 31, 2024

benjamincanac added 5 commits October 31, 2024 11:34

Merge branch 'v3' into pr/2499

b38512c

up

a2da0b9

test(NavigationMenu): add missing item-label

7171318

test(NavigationMenu): update vue snapshots

9fb49af

Merge branch 'v3' into pr/2499

d255e1c

Merge branch 'v3' into pr/2499

80fda07

benjamincanac reviewed Oct 31, 2024

View reviewed changes

src/runtime/components/Accordion.vue Show resolved Hide resolved

benjamincanac reviewed Oct 31, 2024

View reviewed changes

Merge branch 'v3' into dynamic-slots

cdc51f9

fix(Accordion): add missing default slot

b308d42

benjamincanac added the v3 #1289 label Nov 5, 2024

benjamincanac marked this pull request as draft November 5, 2024 21:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(components): improve generic types #2499

fix(components): improve generic types #2499

yassilah commented Oct 31, 2024 •

edited by benjamincanac

Loading

pkg-pr-new bot commented Oct 31, 2024 •

edited

Loading

benjamincanac commented Oct 31, 2024 •

edited

Loading

benjamincanac Oct 31, 2024

yassilah commented Oct 31, 2024

benjamincanac Oct 31, 2024

yassilah commented Oct 31, 2024

yassilah commented Oct 31, 2024 •

edited

Loading

benjamincanac commented Oct 31, 2024 •

edited

Loading

yassilah commented Nov 3, 2024

benjamincanac commented Nov 3, 2024

yassilah commented Nov 3, 2024

benjamincanac commented Nov 11, 2024

fix(components): improve generic types #2499

Are you sure you want to change the base?

fix(components): improve generic types #2499

Conversation

yassilah commented Oct 31, 2024 • edited by benjamincanac Loading

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

pkg-pr-new bot commented Oct 31, 2024 • edited Loading

benjamincanac commented Oct 31, 2024 • edited Loading

benjamincanac Oct 31, 2024

Choose a reason for hiding this comment

yassilah commented Oct 31, 2024

benjamincanac Oct 31, 2024

Choose a reason for hiding this comment

yassilah commented Oct 31, 2024

yassilah commented Oct 31, 2024 • edited Loading

benjamincanac commented Oct 31, 2024 • edited Loading

yassilah commented Nov 3, 2024

benjamincanac commented Nov 3, 2024

yassilah commented Nov 3, 2024

benjamincanac commented Nov 11, 2024

yassilah commented Oct 31, 2024 •

edited by benjamincanac

Loading

pkg-pr-new bot commented Oct 31, 2024 •

edited

Loading

benjamincanac commented Oct 31, 2024 •

edited

Loading

yassilah commented Oct 31, 2024 •

edited

Loading

benjamincanac commented Oct 31, 2024 •

edited

Loading