Add ComponentType overloading (#737)

emotion-js · Jul 6, 2018 · 0c78202 · 0c78202
1 parent 09c84d6
commit 0c78202
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 />;