Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve TypeSafety #16

Merged
merged 13 commits into from
Jul 16, 2020
Merged

Improve TypeSafety #16

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d67f459
Improve type-safety by using generics
META-DREAMER Jun 26, 2020
3bb338d
Update TypeScript version and migrate from eslint-plugin-shopify to @…
META-DREAMER Jun 26, 2020
f901f00
Update gitignore for Jetbrains IDE folder
META-DREAMER Jun 26, 2020
1ddc915
Remove Omit helper
META-DREAMER Jul 1, 2020
382fbdd
Improve TypeSafety of useRestyle hook
META-DREAMER Jul 1, 2020
d3af8bc
Cleanup / improve typings of useRestyle and RestyleFunction
META-DREAMER Jul 1, 2020
c09dd1b
Improve typings for restyleFunctions and createRestyleFunction to hav…
META-DREAMER Jul 1, 2020
436a67e
Improve typings of createRestyleComponent to include generics, allowi…
META-DREAMER Jul 1, 2020
730deb8
Improve typesafety of createVariant
META-DREAMER Jul 1, 2020
c72487d
Fix type safety of themeKey
META-DREAMER Jul 14, 2020
4a48eaa
Fix createVariant types to work when no property is defined
META-DREAMER Jul 14, 2020
5da7874
Fix README typo
META-DREAMER Jul 16, 2020
eb862e3
Improve typesafety of createVariant using overloads
META-DREAMER Jul 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"extends": [
"plugin:shopify/typescript",
"plugin:shopify/react",
"plugin:shopify/jest",
"plugin:shopify/prettier"
"plugin:@shopify/typescript",
"plugin:@shopify/react",
"plugin:@shopify/jest",
"plugin:@shopify/prettier"
],
"parserOptions": {
"project": "tsconfig.json"
"project": "tsconfig.eslint.json"
},
"rules": {
"import/extensions": "off",
Expand All @@ -20,12 +20,9 @@
"func-style": "off",
"react/display-name": "off",
"id-length": "off",
"shopify/restrict-full-import": ["error", "lodash"],
"shopify/jest/no-vague-titles": [
"@shopify/restrict-full-import": [
"error",
{
"allow": ["all"]
}
"lodash"
]
}
}
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,6 @@ npm-debug.log
.jest

dist

# IDE
.idea
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,21 @@
},
"dependencies": {},
"devDependencies": {
"@shopify/eslint-plugin": "^37.0.0",
"@types/jest": "^24.0.18",
"@types/react": "^16.9.2",
"@types/react-native": "^0.60.10",
"@types/react-test-renderer": "^16.9.0",
"babel-jest": "^24.9.0",
"eslint": "^5.16.0",
"eslint-plugin-shopify": "^30.0.1",
"eslint": "^6.0.0",
"husky": "^4.2.3",
"jest": "^24.9.0",
"prettier": "^1.18.2",
"react": "^16.9.0",
"react-native": "0.60.5",
"react-test-renderer": "^16.9.0",
"ts-jest": "^24.0.2",
"typescript": "~3.2.1"
"typescript": "~3.7.5"
},
"peerDependencies": {
"react": "^16.8.0",
Expand Down
30 changes: 21 additions & 9 deletions src/composeRestyleFunctions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
import {RestyleFunctionContainer, BaseTheme, Dimensions} from './types';
import {
RestyleFunctionContainer,
BaseTheme,
Dimensions,
RNStyle,
} from './types';
import {AllProps} from './restyleFunctions';

const composeRestyleFunctions = (
restyleFunctions: (RestyleFunctionContainer | RestyleFunctionContainer[])[],
const composeRestyleFunctions = <
Theme extends BaseTheme,
TProps extends AllProps<Theme>
>(
restyleFunctions: (
| RestyleFunctionContainer<TProps, Theme>
| RestyleFunctionContainer<TProps, Theme>[])[],
) => {
const flattenedRestyleFunctions = restyleFunctions.reduce(
(acc: RestyleFunctionContainer[], item) => {
(acc: RestyleFunctionContainer<TProps, Theme>[], item) => {
return acc.concat(item);
},
[],
) as RestyleFunctionContainer[];
);

const properties = flattenedRestyleFunctions.map(styleFunc => {
return styleFunc.property;
Expand All @@ -22,16 +33,17 @@ const composeRestyleFunctions = (
return styleFunc.func;
});

const buildStyle = (
props: {[key: string]: any},
// TInputProps is a superset of TProps since TProps are only the Restyle Props
const buildStyle = <TInputProps extends TProps>(
props: TInputProps,
{
theme,
dimensions,
}: {
theme: BaseTheme;
theme: Theme;
dimensions: Dimensions;
},
) => {
): RNStyle => {
return funcs.reduce((acc, func) => {
return {...acc, ...func(props, {theme, dimensions})};
}, {});
Expand Down
8 changes: 5 additions & 3 deletions src/createBox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import {View} from 'react-native';
import createRestyleComponent from './createRestyleComponent';
import {BaseTheme, Omit} from './types';

import createRestyleComponent from './createRestyleComponent';
import {BaseTheme} from './types';
import {
backgroundColor,
opacity,
Expand Down Expand Up @@ -48,7 +49,8 @@ const createBox = <
BaseComponent: React.ComponentType<any> = View,
) => {
return createRestyleComponent<
BoxProps<Theme> & Omit<Props, keyof BoxProps<Theme>>
BoxProps<Theme> & Omit<Props, keyof BoxProps<Theme>>,
Theme
>(boxRestyleFunctions, BaseComponent);
};

Expand Down
12 changes: 9 additions & 3 deletions src/createRestyleComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React from 'react';
import {View} from 'react-native';
import {RestyleFunctionContainer} from './types';

import {BaseTheme, RestyleFunctionContainer} from './types';
import useRestyle from './hooks/useRestyle';

const createRestyleComponent = <Props extends {}>(
restyleFunctions: (RestyleFunctionContainer | RestyleFunctionContainer[])[],
const createRestyleComponent = <
Props extends Record<string, unknown>,
Theme extends BaseTheme = BaseTheme
>(
restyleFunctions: (
| RestyleFunctionContainer<Props, Theme>
| RestyleFunctionContainer<Props, Theme>[])[],
BaseComponent: React.ComponentType<any> = View,
) => {
const RestyleComponent = (
Expand Down
54 changes: 32 additions & 22 deletions src/createRestyleFunction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import {
RestyleFunctionContainer,
} from './types';

type StyleTransformFunction = (params: {
value: any;
theme: BaseTheme;
themeKey?: string;
}) => any;
type StyleTransformFunction<
Theme extends BaseTheme,
K extends keyof Theme | undefined
> = (params: {value: any; theme: Theme; themeKey?: K}) => any;

const getValueForScreenSize = ({
responsiveValue,
Expand Down Expand Up @@ -41,20 +40,29 @@ const isResponsiveObjectValue = <Theme extends BaseTheme>(
}, true);
};

const getValue = <Theme extends BaseTheme>(
propValue: ResponsiveValue<string | number, Theme>,
type PropValue = string | number | undefined | null;

function isThemeKey<Theme extends BaseTheme>(
theme: Theme,
K: keyof Theme | undefined,
): K is keyof Theme {
return theme[K as keyof Theme];
}

const getValue = <Theme extends BaseTheme, K extends keyof Theme | undefined>(
propValue: ResponsiveValue<PropValue, Theme>,
{
theme,
transform,
dimensions,
themeKey,
}: {
theme: Theme;
transform?: StyleTransformFunction;
transform?: StyleTransformFunction<Theme, K>;
dimensions: Dimensions;
themeKey?: string;
themeKey?: K;
},
) => {
): PropValue => {
const val = isResponsiveObjectValue(propValue, theme)
? getValueForScreenSize({
responsiveValue: propValue,
Expand All @@ -63,7 +71,7 @@ const getValue = <Theme extends BaseTheme>(
})
: propValue;
if (transform) return transform({value: val, theme, themeKey});
if (themeKey && theme[themeKey]) {
if (isThemeKey(theme, themeKey)) {
if (val && theme[themeKey][val] === undefined)
throw new Error(`Value '${val}' does not exist in theme['${themeKey}']`);

Expand All @@ -73,26 +81,28 @@ const getValue = <Theme extends BaseTheme>(
return val;
};

const createRestyleFunction = ({
const createRestyleFunction = <
Theme extends BaseTheme = BaseTheme,
TProps extends Record<string, unknown> = Record<string, unknown>,
P extends keyof TProps = keyof TProps,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah right, got it

K extends keyof Theme | undefined = undefined
>({
property,
transform,
styleProperty = property,
styleProperty = property.toString(),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

themeKey,
}: {
property: string;
transform?: StyleTransformFunction;
property: P;
transform?: StyleTransformFunction<Theme, K>;
styleProperty?: string;
themeKey?: string;
}): RestyleFunctionContainer => {
themeKey?: K;
}): RestyleFunctionContainer<TProps, Theme, P, K> => {
return {
property,
themeKey,
variant: false,
func: (
props: any,
{theme, dimensions}: {theme: BaseTheme; dimensions: Dimensions},
): {[key: string]: any} => {
const value = getValue(props[property], {
func: (props, {theme, dimensions}) => {
const value = getValue(props[property] as PropValue, {
theme,
dimensions,
themeKey,
Expand Down
7 changes: 5 additions & 2 deletions src/createText.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import {Text} from 'react-native';

import createRestyleComponent from './createRestyleComponent';
import {BaseTheme, Omit} from './types';
import {BaseTheme} from './types';
import {
color,
opacity,
Expand Down Expand Up @@ -42,7 +44,8 @@ const createText = <
BaseComponent: React.ComponentType<any> = Text,
) => {
return createRestyleComponent<
TextProps<Theme> & Omit<Props, keyof TextProps<Theme>>
TextProps<Theme> & Omit<Props, keyof TextProps<Theme>>,
Theme
>(textRestyleFunctions, BaseComponent);
};

Expand Down
35 changes: 16 additions & 19 deletions src/createVariant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import {
BaseTheme,
Dimensions,
RestyleFunctionContainer,
ResponsiveValue,
} from './types';
import {BaseTheme, RestyleFunctionContainer, ResponsiveValue} from './types';
import createRestyleFunction from './createRestyleFunction';
import {all, AllProps} from './restyleFunctions';
import composeRestyleFunctions from './composeRestyleFunctions';

const allRestyleFunctions = composeRestyleFunctions(all);

const createVariant = <Theme extends BaseTheme = BaseTheme>({
property = 'variant',
const createVariant = <
Theme extends BaseTheme,
TProps extends VariantProps<Theme, K, P> = VariantProps<Theme, keyof Theme>,
P extends keyof TProps | 'variant' = 'variant',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
image

This should be able to accept any string.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

K extends keyof Theme = keyof Theme
>({
property = 'variant' as P,
themeKey,
defaults = {},
}: {
property?: string;
themeKey: string;
property?: P;
themeKey: K;
defaults?: AllProps<Theme>;
}): RestyleFunctionContainer => {
const styleFunction = createRestyleFunction({
}): RestyleFunctionContainer<TProps, Theme> => {
const styleFunction = createRestyleFunction<Theme, TProps, P, K>({
property,
styleProperty: 'expandedProps',
themeKey,
Expand All @@ -28,10 +28,7 @@ const createVariant = <Theme extends BaseTheme = BaseTheme>({
property,
themeKey,
variant: true,
func: (
props: any,
{theme, dimensions}: {theme: BaseTheme; dimensions: Dimensions},
) => {
func: (props, {theme, dimensions}) => {
const {expandedProps} = styleFunction.func(props, {theme, dimensions});
if (!expandedProps) return {};
return allRestyleFunctions.buildStyle(
Expand All @@ -47,8 +44,8 @@ const createVariant = <Theme extends BaseTheme = BaseTheme>({

export type VariantProps<
Theme extends BaseTheme,
ThemeKey extends keyof Theme,
Property extends string = 'variant'
> = {[key in Property]?: ResponsiveValue<keyof Theme[ThemeKey], Theme>};
K extends keyof Theme,
Property extends keyof any = 'variant'
> = {[key in Property]?: ResponsiveValue<keyof Theme[K], Theme>};

export default createVariant;
1 change: 1 addition & 0 deletions src/hooks/useDimensions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {useState, useEffect} from 'react';
import {Dimensions} from 'react-native';

import {Dimensions as DimensionsType} from '../types';

const useDimensions = () => {
Expand Down
Loading