Improve TypeSafety (#16)

* Improve type-safety by using generics * Update TypeScript version and migrate from eslint-plugin-shopify to @shopify/eslint-plugin * Update gitignore for Jetbrains IDE folder * Remove Omit helper No longer necessary since TS includes this out of the box * Improve TypeSafety of useRestyle hook This ensures that the output props from useRestyle are actually typed properly instead of casting them to `any` * Cleanup / improve typings of useRestyle and RestyleFunction * Improve typings for restyleFunctions and createRestyleFunction to have typesafe return values and prop names * Improve typings of createRestyleComponent to include generics, allowing the restyleFunctions param to be typesafe * Improve typesafety of createVariant Enforces correct values for property, themeKey and the return type * Fix type safety of themeKey * Fix createVariant types to work when no property is defined * Fix README typo * Improve typesafety of createVariant using overloads 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.
Shopify · Jul 16, 2020 · 19ec0a8 · 19ec0a8
1 parent 2a59dcc
commit 19ec0a8
Show file tree

Hide file tree

Showing 18 changed files with 1,025 additions and 651 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -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",
@@ -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"
     ]
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,6 @@ npm-debug.log
 .jest
 
 dist
+
+# IDE
+.idea
diff --git a/README.md b/README.md
@@ -435,7 +435,7 @@ const variant = createVariant<Theme>({themeKey: 'cardVariants', defaults: {
   margin: {
     phone: 's',
     tablet: 'm',
-  }
+  },
   backgroundColor: 'cardRegularBackground',
 }})
 

diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/composeRestyleFunctions.ts b/src/composeRestyleFunctions.ts
@@ -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;
@@ -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})};
     }, {});

diff --git a/src/createBox.ts b/src/createBox.ts
@@ -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,
@@ -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);
 };
 

diff --git a/src/createRestyleComponent.tsx b/src/createRestyleComponent.tsx
@@ -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 = (

diff --git a/src/createRestyleFunction.ts b/src/createRestyleFunction.ts
@@ -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,
@@ -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,
@@ -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}']`);
 
@@ -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,
+  K extends keyof Theme | undefined = undefined
+>({
   property,
   transform,
-  styleProperty = property,
+  styleProperty = property.toString(),
   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,

diff --git a/src/createText.ts b/src/createText.ts
@@ -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,
@@ -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);
 };
 

diff --git a/src/createVariant.ts b/src/createVariant.ts
@@ -1,25 +1,43 @@
-import {
-  BaseTheme,
-  Dimensions,
-  RestyleFunctionContainer,
-  ResponsiveValue,
-} from './types';
+import {BaseTheme, ResponsiveValue, RestyleFunctionContainer} 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',
+// With Custom Prop Name
+function createVariant<
+  Theme extends BaseTheme,
+  K extends keyof Theme = keyof Theme,
+  P extends keyof any = keyof any
+>(params: {
+  property: P;
+  themeKey: K;
+  defaults?: AllProps<Theme>;
+}): RestyleFunctionContainer<VariantProps<Theme, K, P>, Theme, P, K>;
+// Without Custom Prop Name
+function createVariant<
+  Theme extends BaseTheme,
+  K extends keyof Theme = keyof Theme
+>(params: {
+  themeKey: K;
+  defaults?: AllProps<Theme>;
+}): RestyleFunctionContainer<VariantProps<Theme, K>, Theme, 'variant', K>;
+function createVariant<
+  Theme extends BaseTheme,
+  K extends keyof Theme,
+  P extends keyof any,
+  TProps extends VariantProps<Theme, K, P>
+>({
+  property = 'variant' as P,
   themeKey,
   defaults = {},
 }: {
-  property?: string;
-  themeKey: string;
+  property?: P;
+  themeKey: K;
   defaults?: AllProps<Theme>;
-}): RestyleFunctionContainer => {
-  const styleFunction = createRestyleFunction({
+}): RestyleFunctionContainer<TProps, Theme, P, K> {
+  const styleFunction = createRestyleFunction<Theme, TProps, P, K>({
     property,
     styleProperty: 'expandedProps',
     themeKey,
@@ -28,10 +46,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(
@@ -43,12 +58,12 @@ 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;
diff --git a/src/hooks/useDimensions.ts b/src/hooks/useDimensions.ts
@@ -1,5 +1,6 @@
 import {useState, useEffect} from 'react';
 import {Dimensions} from 'react-native';
+
 import {Dimensions as DimensionsType} from '../types';
 
 const useDimensions = () => {