Skip to content

Commit 3055efd

Browse files
antongolubsrmaguraAndarist
authored
Type changes around StyledOptions/FilteringStyledOptions and shouldForwardProp (#2333)
* chore(style): let StyledOptions generic argument be optional * chore(native): let StyledOptions generic argument be optional * test(types): add tests for StyledOptions iface * feat(types): add keys assertion for StyledOptions generic * fix(styled): add StyledOptions type to CreateStyledComponent call signature fixes #2333 (comment) * test(styled): check type StyledOpts for composite component * test(styled): revert erroneous changes * test(styled): clarify StyledOptsBroken test case * test: refactor `styledOptions` generics tests * test: add more tests for StyledOptions * test: linting * test: tweak ups * feat: expose FilteringStyledOptions * fix: expost `FilteringStyledOptions` from native, tweak up some tests, add some comments * chore: use consistent default props type for both StyledOptions and FilteringStyledOptions * chore: snap #3 * styled.shouldForwardProp: require prop to be a string * Add PropertyKey->string changesets * Remove redundant `compilerOptions` * make `shouldForwardProp` always contravariant * Type fixes * Tweak `FilteringStyledOptions` and `StyledOptions` interfaces * Change `Props` constraint * Tweak type-level tests around `shouldForwardProp` * add changesets Co-authored-by: Sam Magura <srmagura@gmail.com> Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
1 parent f5c80c8 commit 3055efd

File tree

11 files changed

+166
-19
lines changed

11 files changed

+166
-19
lines changed

‎.changeset/good-cars-roll.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@emotion/native': patch
3+
'@emotion/styled': patch
4+
---
5+
6+
pr: #2759
7+
author: @srmagura
8+
author: @Andarist
9+
10+
Change the argument of the `shouldForwardProp` option of `styled` from `PropertyKey` to `string` in the TypeScript definitions.

‎.changeset/purple-ladybugs-think.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@emotion/is-prop-valid': patch
3+
---
4+
5+
pr: #2759
6+
author: @srmagura
7+
8+
Change the type of the argument to `isPropValid` from `PropertyKey` to `string` in the TypeScript definitions.

‎.changeset/tall-flies-smoke.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@emotion/native': patch
3+
'@emotion/styled': patch
4+
---
5+
6+
author: @Andarist
7+
8+
`shouldForwardProp` has been changed from being a bivariant method to a contravariant function - it improves the type-safety for those that type this option.

‎.changeset/thirty-boats-hang.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@emotion/native': patch
3+
'@emotion/styled': patch
4+
---
5+
6+
`FilteringStyledOptions` and `StyledOptions` types no longer require a type argument for the `Props` generic.

‎packages/is-prop-valid/types/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
22
// TypeScript Version: 2.1
33

4-
declare function isPropValid(string: PropertyKey): boolean
4+
declare function isPropValid(prop: string): boolean
55
export default isPropValid

‎packages/native/types/base.d.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@ export type Interpolation<
6060

6161
/** Same as StyledOptions but shouldForwardProp must be a type guard */
6262
export interface FilteringStyledOptions<
63-
Props,
64-
ForwardedProps extends keyof Props = keyof Props
63+
Props = Record<string, any>,
64+
ForwardedProps extends keyof Props & string = keyof Props & string
6565
> {
66-
shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
66+
shouldForwardProp?: (propName: string) => propName is ForwardedProps
6767
}
6868

69-
export interface StyledOptions<Props> {
70-
shouldForwardProp?(propName: PropertyKey): boolean
69+
export interface StyledOptions<Props = Record<string, any>> {
70+
shouldForwardProp?: (propName: string) => boolean
7171
}
7272

7373
/**
@@ -146,7 +146,8 @@ export interface CreateStyledComponent<
146146
export interface CreateStyled {
147147
<
148148
C extends React.ComponentClass<React.ComponentProps<C>>,
149-
ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
149+
ForwardedProps extends keyof React.ComponentProps<C> &
150+
string = keyof React.ComponentProps<C> & string
150151
>(
151152
component: C,
152153
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -175,7 +176,8 @@ export interface CreateStyled {
175176

176177
<
177178
C extends React.ComponentType<React.ComponentProps<C>>,
178-
ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
179+
ForwardedProps extends keyof React.ComponentProps<C> &
180+
string = keyof React.ComponentProps<C> & string
179181
>(
180182
component: C,
181183
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>

‎packages/native/types/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export {
1818
ArrayInterpolation,
1919
CreateStyledComponent,
2020
CSSInterpolation,
21+
FilteringStyledOptions,
2122
FunctionInterpolation,
2223
Interpolation,
2324
InterpolationPrimitive,

‎packages/native/types/tests.tsx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import {
77
TextStyle,
88
View
99
} from 'react-native'
10-
import styled, { css, ReactNativeStyle } from '@emotion/native'
10+
import styled, {
11+
css,
12+
ReactNativeStyle,
13+
StyledOptions,
14+
FilteringStyledOptions
15+
} from '@emotion/native'
1116

1217
declare module '@emotion/react' {
1318
// tslint:disable-next-line: strict-export-declare-modifiers
@@ -166,3 +171,22 @@ export const ImageFullWidthContained = styled.Image`
166171
;<Container1 ref={containerRef1} />
167172
;<Container2 ref={containerRef2} />
168173
}
174+
175+
{
176+
// Props forwarding through StyledOptions and FilteringStyledOptions
177+
178+
styled(View, { shouldForwardProp: (prop: string) => true })({})
179+
// $ExpectError
180+
styled(View, { shouldForwardProp: (prop: 'testID') => true })({})
181+
182+
styled(View, {
183+
shouldForwardProp: (prop: string): prop is 'testID' => true
184+
})({})
185+
styled(View, {
186+
// $ExpectError
187+
shouldForwardProp: (prop: 'testID'): prop is 'testID' => true
188+
})({})
189+
190+
// $ExpectError
191+
styled(View, { shouldForwardProp: (prop: 'foo') => true })({})
192+
}

‎packages/styled/types/base.d.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import * as React from 'react'
55
import { ComponentSelector, Interpolation } from '@emotion/serialize'
6-
import { PropsOf, DistributiveOmit, Theme } from '@emotion/react'
6+
import { PropsOf, Theme } from '@emotion/react'
77

88
export {
99
ArrayInterpolation,
@@ -15,17 +15,17 @@ export { ComponentSelector, Interpolation }
1515

1616
/** Same as StyledOptions but shouldForwardProp must be a type guard */
1717
export interface FilteringStyledOptions<
18-
Props,
19-
ForwardedProps extends keyof Props = keyof Props
18+
Props = Record<string, any>,
19+
ForwardedProps extends keyof Props & string = keyof Props & string
2020
> {
2121
label?: string
22-
shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
22+
shouldForwardProp?: (propName: string) => propName is ForwardedProps
2323
target?: string
2424
}
2525

26-
export interface StyledOptions<Props> {
26+
export interface StyledOptions<Props = Record<string, any>> {
2727
label?: string
28-
shouldForwardProp?(propName: PropertyKey): boolean
28+
shouldForwardProp?: (propName: string) => boolean
2929
target?: string
3030
}
3131

@@ -118,7 +118,8 @@ export interface CreateStyledComponent<
118118
export interface CreateStyled {
119119
<
120120
C extends React.ComponentClass<React.ComponentProps<C>>,
121-
ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
121+
ForwardedProps extends keyof React.ComponentProps<C> &
122+
string = keyof React.ComponentProps<C> & string
122123
>(
123124
component: C,
124125
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -147,7 +148,8 @@ export interface CreateStyled {
147148

148149
<
149150
C extends React.ComponentType<React.ComponentProps<C>>,
150-
ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
151+
ForwardedProps extends keyof React.ComponentProps<C> &
152+
string = keyof React.ComponentProps<C> & string
151153
>(
152154
component: C,
153155
options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -168,7 +170,8 @@ export interface CreateStyled {
168170

169171
<
170172
Tag extends keyof JSX.IntrinsicElements,
171-
ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag]
173+
ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
174+
string = keyof JSX.IntrinsicElements[Tag] & string
172175
>(
173176
tag: Tag,
174177
options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>

‎packages/styled/types/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export {
1212
Interpolation,
1313
StyledComponent,
1414
StyledOptions,
15+
FilteringStyledOptions,
1516
CreateStyledComponent
1617
} from './base'
1718

0 commit comments

Comments
 (0)