types(runtime-dom): type for class property

[basil-gor]

Sometimes it's so sad that HTMLAttributes['class'] type is an any.
Developers have to "reinvent the wheel" or blindly hope that it will be added someday.

This is the day :)

I think it would be useful to add normal type and remove any.
I also added new tests for normalizeClass, some of them related to #7869.

[yyx990803]

Can you also add type-related test cases here? https://github.com/vuejs/core/blob/main/packages/dts-test/tsx.test-d.tsx

[basil-gor]

Can you also add type-related test cases here? https://github.com/vuejs/core/blob/main/packages/dts-test/tsx.test-d.tsx

Sure. Done ✅

[yyx990803]

Technically the Record value can be any truthy/falsy value.

[basil-gor]

If I understand correctly, you want me to extend the possible accepted values in the Record type to also accept truthy/falsy types for maximum backward compatibility with older versions of Vue?

For example:

type Truthy = true | string | number | {} | any[];
type Falsy = false | 0 | -0 | 0n | '' | null | undefined | NaN;

and result record type will be:

Record<string, Truthy | Falsy>

[yyx990803]

Not really, what I mean is the value should technically allow any since any value in JS is either truthy or falsy.

[basil-gor]

Yeah. I understand what you mean.
So, then there are two possible solutions:

1. Try to formalize it something like this:

type Falsy = false | 0 | -0 | 0n | '' | null | undefined | typeof NaN;
type Truthy<T> = T extends Falsy ? never : T;

export type ClassValue =
  | undefined
  | string
  | Record<string, Falsy | Truthy<unknown>>
  | Array<ClassValue>

2. Just set the unknown type (or any at the very least):

export type ClassValue =
  | undefined
  | string
  | Record<string, unknown>
  | Array<ClassValue>

I think the second option will be easier and more priority, right?

[basil-gor]

@yyx990803 I'm sorry to bother you, but could you please rerewiew the changes? It's been two months since the last activity here. Thanks!

[vercel]

Someone is attempting to deploy a commit to the vuejs Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	86.4 kB	32.9 kB	29.7 kB
vue.global.prod.js	132 kB	49.6 kB	44.5 kB

Usages

Name	Size	Gzip	Brotli
createApp	48 kB	18.9 kB	17.2 kB
createSSRApp	51.2 kB	20.2 kB	18.4 kB
defineCustomElement	50.4 kB	19.7 kB	17.9 kB
overall	61.3 kB	23.7 kB	21.6 kB

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
sfc-playground	⬜️ Ignored (Inspect)	Visit Preview	Oct 3, 2023 6:21am

[haoqunjiang]

This PR breaks vuetify:
https://github.com/vuejs/ecosystem-ci/actions/runs/6825593730/job/18563759390

[basil-gor]

What should I do now? 🙃
Go to the vuetify and fix the falls, and only then this PR will be merged again? What about backward compatibility?
So, what do you recommend me to do?

[yyx990803]

I don't think we can land this change, honestly. Vuetify is just one of the examples of how downstream projects can be affected - there could be many more cases (e.g. in private production projects) that use similar types. We can't just go out there and help them fix it.

In a way, v-bind:class is designed to handle any possible value type, so the value of adding type checks here is somewhat limited. IMO it might not be justify the breakage.