Improve TypeSafety #16
Conversation
ghost
added
the
| property, | ||
| transform, | ||
| styleProperty = property, | ||
| styleProperty = property.toString(), |
There was a problem hiding this comment.
since objects can have numbered or Symbol properties, but the styleProperty type is a string, we need to convert it to a string if we want to assign it like this by default.
|
Signed the CLA, need to re-run the check |
|
Hi Hammad, thank you so much for taking the time to contribute to this library! I'm currently on vacation until July 13, but I'll see if I can get someone else on the team to go through your PR before that. |
No longer necessary since TS includes this out of the box
This ensures that the output props from useRestyle are actually typed properly instead of casting them to `any`
…e typesafe return values and prop names
…ng the restyleFunctions param to be typesafe
Enforces correct values for property, themeKey and the return type
| const createRestyleFunction = < | ||
| TProps = Record<string, unknown>, | ||
| Theme extends BaseTheme = BaseTheme, | ||
| P extends keyof TProps = keyof TProps, |
There was a problem hiding this comment.
Is there a valid case for when you should be able to override P and K here? If not, I would prefer to just using keyof TProps and keyof Theme inline within the function.
There was a problem hiding this comment.
Its not so much about overriding as it is about having a strongly typed return type so that the exact property and themeKey the user specified is preserved and carried through to anything consuming that restyle function.
@JoelBesada Done. Also updated useRestyle with better typings. Note, I also have more improvements that build on this PR, but would like to get this merged so it doesn't get too big. You can see those PRs here if you're curious: https://github.com/hammadj/restyle/pulls |
src/createVariant.ts
Outdated
| const createVariant = < | ||
| Theme extends BaseTheme, | ||
| TProps extends VariantProps<Theme, K, P> = VariantProps<Theme, keyof Theme>, | ||
| P extends keyof TProps | 'variant' = 'variant', |
There was a problem hiding this comment.
I think the P type is being set too strictly here, I'm not allowed to use anything other than 'variant' as the prop name.
This should be able to accept any string.
There was a problem hiding this comment.
Thanks for the catch, have to make a small fix to allow other prop names, if the Prop types aren't defined, but it would still be good to enforce the type safety if the user does pass in props. Should work like this now:
There was a problem hiding this comment.
@JoelBesada Just pushed some changes giving createVariant some 🔥 type safety and inference. Try it out and let me know how it works. Stress test it with custom properties and PropTypes and themes, etc. It should be able to pick up any incorrect setup no matter how/where it's used. It works best when defined inline with createRestyleComponent/useRestyle, etc, but it still works when its not.
This separates the types for createVariant into two overloads, one for when a custom property is defined and one when its not. The result of this is perfect inference of types when used in createRestyleComponent while not requiring the user to define the generic types if they dont want to.
Right now a lot of type information is lost when passing things between functions, most importantly the type of the users theme which might not have the exact same shape as the BaseTheme. This updates many of the typings to use generics which helps enforce type safety within the restyle codebase as well as for the end users (e.g. ensuring the
themeKeythey pass in is a valid one from their Theme, or thepropertythey pass actually exists on the Props for the component).The TS versions and ESLint config was pretty outdated, it didn't have support for the
Recordtype, so I updated to the newer@shopify/eslint-pluginas well which is compatible with TS v3.7.5.