PropsOf<C> TypeScript utilities - Support defaultProps (#1405)

* PropsOf<C> TypeScript utilities - Support defaultProps by delegating to new JSX and React types. * changeset * Regenerated yarn.lock without internal urls * Align versions of @types/react across project by upgrading @emotion/core and root package versions.
emotion-js · Jun 20, 2019 · c673e20 · c673e20
1 parent 4ae8894
commit c673e20
Show file tree

Hide file tree

Showing 17 changed files with 148 additions and 68 deletions.
diff --git a/.changeset/tasty-hornets-taste/changes.json b/.changeset/tasty-hornets-taste/changes.json
@@ -0,0 +1,7 @@
+{
+  "releases": [
+    { "name": "emotion-theming", "type": "patch" },
+    { "name": "@emotion/styled-base", "type": "patch" }
+  ],
+  "dependents": []
+}
diff --git a/.changeset/tasty-hornets-taste/changes.md b/.changeset/tasty-hornets-taste/changes.md
@@ -0,0 +1 @@
+PropsOf<C> TypeScript utilities - Support defaultProps by delegating to new JSX and React types.
diff --git a/package.json b/package.json
@@ -173,7 +173,7 @@
     "@changesets/get-github-info": "^0.1.2",
     "@types/jest": "^23.0.2",
     "@types/node": "^10.11.4",
-    "@types/react": "16.3.18",
+    "@types/react": "^16.8.20",
     "babel-check-duplicated-nodes": "^1.0.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -27,19 +27,19 @@
     "test:typescript": "dtslint types"
   },
   "dependencies": {
+    "@babel/runtime": "^7.4.3",
     "@emotion/cache": "^10.0.9",
     "@emotion/css": "^10.0.9",
     "@emotion/serialize": "^0.11.6",
     "@emotion/sheet": "0.9.2",
-    "@emotion/utils": "0.11.1",
-    "@babel/runtime": "^7.4.3"
+    "@emotion/utils": "0.11.1"
   },
   "peerDependencies": {
     "react": ">=16.3.0"
   },
   "devDependencies": {
     "@emotion/styled": "^10.0.10",
-    "@types/react": "16.3.18",
+    "@types/react": "^16.8.20",
     "dtslint": "^0.3.0",
     "emotion": "^10.0.9",
     "emotion-server": "^10.0.9",

diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
@@ -45,9 +45,7 @@ export interface GlobalProps<Theme> {
  * @desc
  * JSX generic are supported only after TS@2.9
  */
-export function Global<Theme = any>(
-  props: GlobalProps<Theme>
-): ReactElement<any>
+export function Global<Theme = any>(props: GlobalProps<Theme>): ReactElement
 
 export function keyframes(
   template: TemplateStringsArray,
@@ -79,7 +77,7 @@ export interface ClassNamesProps<Theme> {
  */
 export function ClassNames<Theme = any>(
   props: ClassNamesProps<Theme>
-): ReactElement<any>
+): ReactElement
 
 declare module 'react' {
   interface DOMAttributes<T> {

diff --git a/packages/core/types/tslint.json b/packages/core/types/tslint.json
@@ -1,25 +1,22 @@
 {
-    "extends": "dtslint/dtslint.json",
-    "rules": {
-        "array-type": [
-            true,
-            "generic"
-        ],
-        "import-spacing": false,
-        "semicolon": false,
-        "whitespace": [
-            true,
-            "check-branch",
-            "check-decl",
-            "check-operator",
-            "check-module",
-            "check-rest-spread",
-            "check-type",
-            "check-typecast",
-            "check-type-operator",
-            "check-preblock"
-        ],
-
-        "no-unnecessary-generics": false
-    }
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "array-type": [true, "generic"],
+    "import-spacing": false,
+    "semicolon": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-module",
+      "check-rest-spread",
+      "check-type",
+      "check-typecast",
+      "check-type-operator",
+      "check-preblock"
+    ],
+    "no-null-undefined-union": false,
+    "no-unnecessary-generics": false
+  }
 }
diff --git a/packages/emotion-theming/package.json b/packages/emotion-theming/package.json
@@ -34,17 +34,17 @@
   "devDependencies": {
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.10",
-    "@types/react": "16.3.18",
+    "@types/react": "^16.8.20",
     "dtslint": "^0.3.0"
   },
   "dependencies": {
+    "@babel/runtime": "^7.4.3",
     "@emotion/weak-memoize": "0.2.2",
-    "hoist-non-react-statics": "^3.3.0",
-    "@babel/runtime": "^7.4.3"
+    "hoist-non-react-statics": "^3.3.0"
   },
   "peerDependencies": {
-    "react": ">=16.3.0",
-    "@emotion/core": "^10.0.0"
+    "@emotion/core": "^10.0.0",
+    "react": ">=16.3.0"
   },
   "umd:main": "dist/emotion-theming.umd.min.js",
   "browser": {

diff --git a/packages/emotion-theming/types/helper.d.ts b/packages/emotion-theming/types/helper.d.ts
@@ -1,14 +1,8 @@
 import * as React from 'react'
 
-export type PropsOf<C extends React.ComponentType<any>> = C extends React.SFC<
-  infer P
->
-  ? P & React.Attributes
-  : C extends React.ComponentClass<infer P>
-    ? (C extends new (...args: Array<any>) => infer I
-        ? P & React.ClassAttributes<I>
-        : never)
-    : never
+export type PropsOf<
+  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>
 
 export type Omit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never
 export type AddOptionalTo<T, U> = Omit<T, U> &

diff --git a/packages/emotion-theming/types/index.d.ts b/packages/emotion-theming/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 2.8
+// TypeScript Version: 3.1
 
 import * as React from 'react'
 
@@ -12,7 +12,7 @@ export interface ThemeProviderProps<Theme> {
 
 export function ThemeProvider<Theme>(
   props: ThemeProviderProps<Theme>
-): React.ReactElement<any>
+): React.ReactElement
 
 /**
  * @todo Add more constraint to C so that
@@ -23,7 +23,7 @@ export function withTheme<C extends React.ComponentType<any>>(
 ): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>
 
 export interface EmotionTheming<Theme> {
-  ThemeProvider(props: ThemeProviderProps<Theme>): React.ReactElement<any>
+  ThemeProvider(props: ThemeProviderProps<Theme>): React.ReactElement
   withTheme<C extends React.ComponentType<any>>(
     component: C
   ): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>

diff --git a/packages/emotion-theming/types/tests.tsx b/packages/emotion-theming/types/tests.tsx
@@ -29,6 +29,23 @@ const ThemedComp = withTheme(CompC)
 ;<ThemedComp prop />
 ;<ThemedComp prop theme={theme} />
 
+const CompSFCWithDefault = ({ prop }: Props) => (prop ? <span /> : <div />)
+CompSFCWithDefault.defaultProps = { prop: false }
+class CompCWithDefault extends React.Component<Props> {
+  static defaultProps = { prop: false }
+  render() {
+    return this.props.prop ? <span /> : <div />
+  }
+}
+
+const ThemedSFCWithDefault = withTheme(CompSFCWithDefault)
+;<ThemedSFCWithDefault />
+;<ThemedSFCWithDefault theme={theme} />
+
+const ThemedCompWithDefault = withTheme(CompCWithDefault)
+;<ThemedCompWithDefault />
+;<ThemedCompWithDefault theme={theme} />
+
 const {
   ThemeProvider: TypedThemeProvider,
   withTheme: typedWithTheme

diff --git a/packages/emotion-theming/types/tslint.json b/packages/emotion-theming/types/tslint.json
@@ -15,7 +15,7 @@
             "check-type-operator",
             "check-preblock"
         ],
-
+        "no-null-undefined-union": false,
         "no-unnecessary-generics": false
     }
 }
diff --git a/packages/styled-base/package.json b/packages/styled-base/package.json
@@ -21,7 +21,7 @@
     "@emotion/utils": "0.11.1"
   },
   "devDependencies": {
-    "@types/react": "16.3.18",
+    "@types/react": "^16.8.20",
     "dtslint": "^0.3.0"
   },
   "peerDependencies": {
@@ -40,4 +40,4 @@
   "preconstruct": {
     "umdName": "emotionStyledBase"
   }
-}
+}
diff --git a/packages/styled-base/types/helper.d.ts b/packages/styled-base/types/helper.d.ts
@@ -4,14 +4,8 @@ import * as React from 'react'
  * @desc Utility type for getting props type of React component.
  */
 export type PropsOf<
-  Tag extends React.ComponentType<any>
-> = Tag extends React.SFC<infer Props>
-  ? Props & React.Attributes
-  : Tag extends React.ComponentClass<infer Props>
-    ? (Tag extends new (...args: Array<any>) => infer Instance
-        ? Props & React.ClassAttributes<Instance>
-        : never)
-    : never
+  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>
 
 export type Omit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never
 export type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>
diff --git a/packages/styled-base/types/index.d.ts b/packages/styled-base/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 2.8
+// TypeScript Version: 3.1
 
 /**
  * @desc

diff --git a/packages/styled-base/types/tests.tsx b/packages/styled-base/types/tests.tsx
@@ -272,3 +272,27 @@ declare const ref3_2: (element: HTMLDivElement | null) => void
   ;<Readable kind="magazine" author="Hejlsberg" /> // $ExpectError
   ;<StyledReadable kind="magazine" author="Hejlsberg" /> // $ExpectError
 }
+
+interface Props {
+  prop: boolean
+}
+class ClassWithDefaultProps extends React.Component<Props> {
+  static defaultProps = { prop: false }
+  render() {
+    return this.props.prop ? <Button0 /> : <Button1 />
+  }
+}
+const StyledClassWithDefaultProps = styled(ClassWithDefaultProps)`
+  background-color: red;
+`
+const classInstance = <StyledClassWithDefaultProps />
+
+const FCWithDefaultProps = ({ prop }: Props) =>
+  prop ? <Button0 /> : <Button1 />
+FCWithDefaultProps.defaultProps = {
+  prop: false
+}
+const StyledFCWithDefaultProps = styled(FCWithDefaultProps)`
+  background-color: red;
+`
+const fcInstance = <StyledFCWithDefaultProps />
diff --git a/packages/styled-base/types/tslint.json b/packages/styled-base/types/tslint.json
@@ -18,7 +18,7 @@
             "check-type-operator",
             "check-preblock"
         ],
-
+        "no-null-undefined-union": false,
         "no-unnecessary-generics": false
     }
 }