BREAKING: automatically determine partial theme type (#32)

Author: satya164

src/createThemeProvider.js

@@ -4,20 +4,16 @@ import * as React from 'react';
 
 import type { Context } from 'create-react-context';
 
-type ThemeProviderProps<T> = {
-  children?: any,
-  theme: T,
-};
-
-export type ThemeProviderType<T> = React.ComponentType<ThemeProviderProps<T>>;
+export type ThemeProviderType<T> = React.ComponentType<{
+  children: React.Node,
+  theme?: T,
+}>;
 
 function createThemeProvider<T>(
   defaultTheme: T,
   ThemeContext: Context<T>
 ): ThemeProviderType<T> {
-  return class ThemeProvider extends React.PureComponent<
-    ThemeProviderProps<T>
-  > {
+  return class ThemeProvider extends React.Component<*> {
     static defaultProps = {
       theme: defaultTheme,
     };

src/createTheming.js

@@ -6,21 +6,21 @@ import createWithTheme from './createWithTheme';
 import type { WithThemeType } from './createWithTheme';
 import type { ThemeProviderType } from './createThemeProvider';
 
-export type ThemingType<T, S> = {
+export type ThemingType<T> = {
   ThemeProvider: ThemeProviderType<T>,
-  withTheme: WithThemeType<T, S>,
+  withTheme: WithThemeType<T>,
 };
 
-export default function createTheming<T, S>(
+export default function createTheming<T: Object>(
   defaultTheme: T
-): ThemingType<T, S> {
+): ThemingType<T> {
   const ThemeContext: Context<T> = createReactContext(defaultTheme);
 
   const ThemeProvider: ThemeProviderType<T> = createThemeProvider(
     defaultTheme,
     ThemeContext
   );
-  const withTheme: WithThemeType<T, S> = createWithTheme(
+  const withTheme: WithThemeType<T> = createWithTheme(
     ThemeProvider,
     ThemeContext
   );

src/createWithTheme.js

@@ -10,17 +10,21 @@ import { copyRefs } from './utils';
 
 import type { ThemeProviderType } from './createThemeProvider';
 
+type $DeepShape<O: Object> = $Shape<
+  $ObjMap<O, (<V: Object>(V) => $DeepShape<V>) & (<V>(V) => V)>
+>;
+
 const isClassComponent = (Component: any) =>
   Boolean(Component.prototype && Component.prototype.isReactComponent);
 
-export type WithThemeType<T, S> = <P, C: React.ComponentType<P>>(
+export type WithThemeType<T> = <P, C: React.ComponentType<P>>(
   Comp: C
 ) => C &
   React.ComponentType<
-    $Diff<React.ElementConfig<C>, { theme: T }> & { theme?: S }
+    $Diff<React.ElementConfig<C>, { theme: T }> & { theme?: $DeepShape<T> }
   >;
 
-const createWithTheme = <T, S>(
+const createWithTheme = <T: Object, S: $DeepShape<T>>(
   ThemeProvider: ThemeProviderType<T>,
   ThemeContext: Context<T>
 ) =>
@@ -47,7 +51,6 @@ const createWithTheme = <T, S>(
       _root: any;
 
       render() {
-        const { forwardedRef, ...rest } = this.props;
         return (
           <ThemeContext.Consumer>
             {theme => {
@@ -59,15 +62,15 @@ const createWithTheme = <T, S>(
                 // It's needed to support use cases which need access to the underlying node
                 element = (
                   <Comp
-                    {...rest}
+                    {...this.props}
                     ref={c => {
                       this._root = c;
                     }}
                     theme={merged}
                   />
                 );
               } else {
-                element = <Comp {...rest} theme={merged} />;
+                element = <Comp {...this.props} theme={merged} />;
               }
 
               if (merged !== this.props.theme) {
@@ -82,24 +85,23 @@ const createWithTheme = <T, S>(
       }
     }
 
-    let ComponentWithMethods = ThemedComponent;
     if (isClassComponent(Comp)) {
       // getWrappedInstance is exposed by some HOCs like react-redux's connect
       // Use it to get the ref to the underlying element
       // Also expose it to access the underlying element after wrapping
       // $FlowFixMe
-      ComponentWithMethods.prototype.getWrappedInstance = function getWrappedInstance() {
-        return this._root.getWrappedInstance
+      ThemedComponent.prototype.getWrappedInstance = function getWrappedInstance() {
+        return this._root && this._root.getWrappedInstance
           ? this._root.getWrappedInstance()
           : this._root;
       };
 
-      ComponentWithMethods = copyRefs(ComponentWithMethods, Comp);
+      ThemedComponent = copyRefs(ThemedComponent, Comp);
     }
 
-    hoistNonReactStatics(ComponentWithMethods, Comp);
+    hoistNonReactStatics(ThemedComponent, Comp);
 
-    return (ComponentWithMethods: any);
+    return (ThemedComponent: any);
   };
 
 export default createWithTheme;

typings/__tests__/index.test.tsx

@@ -1,19 +1,15 @@
 import * as React from "react";
 import { createTheming } from "../..";
 
-export type Theme = {
+type Theme = {
   primaryColor: string;
   accentColor: string;
   backgroundColor: string;
   textColor: string;
   secondaryColor: string;
 };
 
-export type PartialTheme = {
-  primaryColor?: string;
-};
-
-export const themes: { [key: string]: Theme } = {
+const themes: { [key: string]: Theme } = {
   default: {
     primaryColor: "#FFA72A",
     accentColor: "#458622",
@@ -30,7 +26,7 @@ export const themes: { [key: string]: Theme } = {
   }
 };
 
-const { ThemeProvider, withTheme } = createTheming<Theme, PartialTheme>(
+const { ThemeProvider, withTheme } = createTheming<Theme>(
   themes.default
 );
 

typings/index.d.ts

@@ -1,26 +1,22 @@
 // Type definitions for @callstack/react-theme-provider 1.0.2
 // TypeScript version 3.0.3
 
-import * as React from "react";
+import * as React from 'react';
 
-type Without<T, K> = Pick<T, Exclude<keyof T, K>>;
+type $Without<T, K> = Pick<T, Exclude<keyof T, K>>;
+type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
 
-export type ThemeProviderType<Theme> = React.ComponentType<{ theme: Theme }>;
-
-export type ThemingType<Theme, PartialTheme> = {
-  ThemeProvider: ThemeProviderType<Theme>;
+export type ThemingType<Theme> = {
+  ThemeProvider: React.ComponentType<{ theme?: Theme }>;
   withTheme: <Props extends { theme: Theme }>(
     Comp: React.ComponentType<Props>
-  ) => React.ComponentType<Without<Props, "theme"> & { theme?: PartialTheme }>;
+  ) => React.ComponentType<
+    $Without<Props, 'theme'> & { theme?: $DeepPartial<Theme> }
+  >;
 };
 
 // Library exports
-export const ThemeProvider: ThemeProviderType<{}>;
-
-export const withTheme: <Props extends { theme: {} }>(
-  Comp: React.ComponentType<Props>
-) => React.ComponentType<Without<Props, "theme">>;
+export const ThemeProvider: ThemingType<object>['ThemeProvider'];
+export const withTheme: ThemingType<object>['withTheme'];
 
-export const createTheming: <Theme, PartialTheme>(
-  defaultTheme: Theme
-) => ThemingType<Theme, PartialTheme>;
+export const createTheming: <Theme>(defaultTheme: Theme) => ThemingType<Theme>;