From 0e3d7ab38b021521061006cf445c5b99aebb5b17 Mon Sep 17 00:00:00 2001
From: Junyoung Clare Jang <jjc9310@gmail.com>
Date: Wed, 20 Jun 2018 13:15:55 -0400
Subject: [PATCH] Add ComponentType overloading

---
 .../create-emotion-styled/types/react.d.ts    |  6 ++---
 packages/create-emotion-styled/types/test.tsx | 24 +++++++++++++++++++
 packages/preact-emotion/types/preact.d.ts     |  6 ++---
 packages/preact-emotion/types/test.tsx        | 24 +++++++++++++++++++
 4 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/packages/create-emotion-styled/types/react.d.ts b/packages/create-emotion-styled/types/react.d.ts
index 066283e43..706169fec 100644
--- a/packages/create-emotion-styled/types/react.d.ts
+++ b/packages/create-emotion-styled/types/react.d.ts
@@ -1,7 +1,7 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.3
 
-import { ComponentClass, Ref, SFC } from 'react';
+import { ComponentType, ComponentClass, Ref, SFC } from 'react';
 import { ClassInterpolation } from 'create-emotion';
 
 import {
@@ -24,7 +24,7 @@ export interface StyledComponentMethods<Props extends object, InnerProps extends
   ): StyledStatelessComponent<Props, IP, Theme>;
 
   withComponent<IP extends object>(
-    component: ComponentClass<IP>,
+    component: ComponentClass<IP> | ComponentType<IP>,
     options?: StyledOptions,
   ): StyledOtherComponent<Props, IP, Theme>;
 }
@@ -68,7 +68,7 @@ export interface CreateStyledFunction<Theme extends object> {
   ): CreateStyledStatelessComponent<IP, Theme>;
 
   <IP extends object>(
-    component: ComponentClass<IP>,
+    component: ComponentClass<IP> | ComponentType<IP>,
     options?: StyledOptions,
   ): CreateStyledOtherComponent<IP, Theme>;
 }
diff --git a/packages/create-emotion-styled/types/test.tsx b/packages/create-emotion-styled/types/test.tsx
index ec8a9c076..4ea5a8388 100644
--- a/packages/create-emotion-styled/types/test.tsx
+++ b/packages/create-emotion-styled/types/test.tsx
@@ -198,3 +198,27 @@ const CSSPropComp = createStyled.div();
   color: blue;
   `}
 />;
+
+interface TestComponentTypeProps {
+  value: number;
+}
+
+declare const TestComponentType: React.ComponentType<TestComponentTypeProps>;
+
+const StyledComponentType0 = createStyled(TestComponentType)({
+  color: 'red',
+});
+
+const StyledComponentType1 = createStyled(TestComponentType)`
+  color: red;
+`;
+
+const ComposingCompType = createStyled.div`
+  ${StyledComponentType1} {
+    background-color: green;
+  }
+`;
+
+<StyledComponentType0 value={5} />;
+<StyledComponentType1 value={4} />;
+<ComposingCompType />;
diff --git a/packages/preact-emotion/types/preact.d.ts b/packages/preact-emotion/types/preact.d.ts
index 2eae8f236..79be471d3 100644
--- a/packages/preact-emotion/types/preact.d.ts
+++ b/packages/preact-emotion/types/preact.d.ts
@@ -1,7 +1,7 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.6
 
-import { ComponentConstructor, FunctionalComponent, Ref } from 'preact';
+import { ComponentConstructor, ComponentFactory, FunctionalComponent, Ref } from 'preact';
 import { ClassInterpolation } from 'create-emotion';
 import {
   Interpolation,
@@ -23,7 +23,7 @@ export interface StyledComponentMethods<Props extends object, InnerProps extends
   ): StyledStatelessComponent<Props, IP, Theme>;
 
   withComponent<IP extends object>(
-    component: ComponentConstructor<IP>,
+    component: ComponentConstructor<IP> | ComponentFactory<IP>,
     options?: StyledOptions,
   ): StyledOtherComponent<Props, IP, Theme>;
 }
@@ -67,7 +67,7 @@ export interface CreateStyledFunction<Theme extends object> {
   ): CreateStyledStatelessComponent<IP, Theme>;
 
   <IP extends object>(
-    component: ComponentConstructor<IP>,
+    component: ComponentConstructor<IP> | ComponentFactory<IP>,
     options?: StyledOptions,
   ): CreateStyledOtherComponent<IP, Theme>;
 }
diff --git a/packages/preact-emotion/types/test.tsx b/packages/preact-emotion/types/test.tsx
index 389f6ab15..3d7659779 100644
--- a/packages/preact-emotion/types/test.tsx
+++ b/packages/preact-emotion/types/test.tsx
@@ -188,3 +188,27 @@ const Parent = styled.div`
     color: blue;
   }
 `;
+
+interface TestComponentFactoryProps {
+  value: number;
+}
+
+declare const TestComponentFactory: Preact.ComponentFactory<TestComponentFactoryProps>;
+
+const StyledComponentFactory0 = styled(TestComponentFactory)({
+  color: 'red',
+});
+
+const StyledComponentFactory1 = styled(TestComponentFactory)`
+  color: red;
+`;
+
+const ComposingCompFactory = styled.div`
+  ${StyledComponentFactory1} {
+    background-color: green;
+  }
+`;
+
+<StyledComponentFactory0 value={5} />;
+<StyledComponentFactory1 value={4} />;
+<ComposingCompFactory />;