Added support for Array<string | number | boolean | null | undefined | Record<string, boolean>>
in classList
#308
+88
−11
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I saw that there was a somewhat similar PR #88, however this PR differs from it by not trying to support nested objects inside an array.
Edit: I added support for one level of nested objects into the array. I updated the description to reflect that.
I purposely didn't want to change too much since I wanted this change to be small and incremental. Perhaps in the future, if I see that nested objects inside an array is indeed a nice API I might volunteer to add it.
This PR is only additive, and doesn't change any existing behavior.
The specific implementation in this PR is very short and doesn't change the existing logic at all for the existing syntax for objects. However it adds one more loop for
classList
Arrays in order to convert them into an object, which is then treated the same as it does before this PR. If you don't like this approach I can offer an alternative.I opened a discussion about this here with some examples:
solidjs/solid#2036
I also added tests with all relevant examples.
You can play with and test the implementation here (open the console):
https://stackblitz.com/edit/typescript-jbx9jn
General logic overview
classList
now supports two types of arguments:Record<string, boolean>
(Same as before)Array<string | number | boolean | null | undefined | Record<string, boolean>>
Objects are not allowed to have Arrays or nested objects, only booleans.
Arrays can have objects with booleans, but not arrays, nor objects with objects.
This keeps implementation and logic easy to reason about.
When
classList
is called with an array, it will convert the array into an object while skipping all false values except0
.This has the side effect of leaving
true
as an object key, but that is also what happens in VueJS, so I consider that OK.Edit: Now if the array contains objects, it will "flatten" them in the order they were passed. The behavior is like the spread operator.
Changes are then handled as if it was a regular object, so it essentially works exactly like passing an object with all values set to
true
.Examples
Strings
Booleans
Undefined
Null
Numbers
Objects in the array