@emotion/styled-base
Advanced tools
Comparing version 11.0.0-next.0 to 11.0.0-next.1
# @emotion/styled-base | ||
## 11.0.0-next.1 | ||
### Major Changes | ||
- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes: | ||
- Reduce build times when using emotion | ||
- In many cases remove the need for manually specifying generic parameters for your emotion components. | ||
If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below. | ||
## Improvements | ||
- useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section. | ||
- Union types as props are better supported and should be inferred properly | ||
- Build times should be reduced significantly in larger projects. | ||
## Breaking changes | ||
- withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)` | ||
**Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section | ||
- `css` function has been restricted to prevent passing of invalid types | ||
- `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example | ||
`styled<typeof MyComponent, ExtraProps>(MyComponent)({})` | ||
to | ||
`styled(MyComponent)<ExtraProps>({})` | ||
- `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example: | ||
`StyledComponent<Props, {}, MyTheme>` | ||
to | ||
`StyledComponent<Props & { theme?: MyTheme }>` | ||
### Patch Changes | ||
- [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687) [#1588](https://github.com/emotion-js/emotion/pull/1588) Thanks [@FezVrasta](https://github.com/FezVrasta)! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety. | ||
- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: | ||
- @emotion/serialize@1.0.0-next.0 | ||
- @emotion/core@11.0.0-next.1 | ||
## 11.0.0-next.0 | ||
@@ -4,0 +47,0 @@ |
{ | ||
"name": "@emotion/styled-base", | ||
"version": "11.0.0-next.0", | ||
"version": "11.0.0-next.1", | ||
"description": "base styled API for emotion", | ||
@@ -20,7 +20,7 @@ "main": "dist/styled-base.cjs.js", | ||
"@emotion/is-prop-valid": "0.8.5", | ||
"@emotion/serialize": "^0.11.14", | ||
"@emotion/serialize": "^1.0.0-next.0", | ||
"@emotion/utils": "0.11.2" | ||
}, | ||
"devDependencies": { | ||
"@emotion/core": "^11.0.0-next.0", | ||
"@emotion/core": "^11.0.0-next.1", | ||
"@types/react": "^16.8.20", | ||
@@ -31,3 +31,3 @@ "dtslint": "^0.3.0", | ||
"peerDependencies": { | ||
"@emotion/core": "^11.0.0-next.0", | ||
"@emotion/core": "^11.0.0-next.1", | ||
"react": ">=16.3.0" | ||
@@ -34,0 +34,0 @@ }, |
@@ -53,3 +53,3 @@ // @flow | ||
return function<P>(): PrivateStyledComponent<P> { | ||
return function<Props>(): PrivateStyledComponent<Props> { | ||
let args = arguments | ||
@@ -82,3 +82,3 @@ let styles = | ||
// $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class | ||
const Styled: PrivateStyledComponent<P> = withEmotionCache( | ||
const Styled: PrivateStyledComponent<Props> = withEmotionCache( | ||
(props, context, ref) => { | ||
@@ -85,0 +85,0 @@ return ( |
// @flow | ||
import * as React from 'react' | ||
import type { ElementType } from 'react' | ||
import type { ElementType, StatelessFunctionalComponent } from 'react' | ||
import isPropValid from '@emotion/is-prop-valid' | ||
@@ -14,3 +13,3 @@ | ||
export type StyledComponent<P> = React.StatelessFunctionalComponent<P> & { | ||
export type StyledComponent<Props> = StatelessFunctionalComponent<Props> & { | ||
defaultProps: any, | ||
@@ -21,7 +20,7 @@ toString: () => string, | ||
nextOptions?: StyledOptions | ||
) => StyledComponent<P> | ||
) => StyledComponent<Props> | ||
} | ||
export type PrivateStyledComponent<P> = StyledComponent<P> & { | ||
__emotion_real: StyledComponent<P>, | ||
export type PrivateStyledComponent<Props> = StyledComponent<Props> & { | ||
__emotion_real: StyledComponent<Props>, | ||
__emotion_base: any, | ||
@@ -36,3 +35,3 @@ __emotion_styles: any, | ||
export const getDefaultShouldForwardProp = (tag: React.ElementType) => | ||
export const getDefaultShouldForwardProp = (tag: ElementType) => | ||
typeof tag === 'string' && | ||
@@ -46,10 +45,13 @@ // 96 is one less than the char code | ||
export type CreateStyledComponent = <P>( | ||
export type CreateStyledComponent = <Props>( | ||
...args: Interpolations | ||
) => StyledComponent<P> | ||
) => StyledComponent<Props> | ||
export type CreateStyled = { | ||
(tag: React.ElementType, options?: StyledOptions): CreateStyledComponent, | ||
<Props>( | ||
tag: ElementType, | ||
options?: StyledOptions | ||
): (...args: Interpolations) => StyledComponent<Props>, | ||
[key: string]: CreateStyledComponent, | ||
bind: () => CreateStyled | ||
} |
@@ -8,5 +8,7 @@ import * as React from 'react' | ||
C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any> | ||
> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>> | ||
> = JSX.LibraryManagedAttributes<C, React.ComponentProps<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>> | ||
// We need to use this version of Omit as it's distributive (Will preserve unions) | ||
export type DistributiveOmit<T, U> = T extends any | ||
? Pick<T, Exclude<keyof T, U>> | ||
: never |
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun> | ||
// TypeScript Version: 3.1 | ||
// TypeScript Version: 3.2 | ||
@@ -15,7 +15,6 @@ /** | ||
import * as React from 'react' | ||
import { ComponentSelector, Interpolation } from '@emotion/serialize' | ||
import * as React from 'react' | ||
import { PropsOf, DistributiveOmit } from './helper' | ||
import { Omit, Overwrapped, PropsOf } from './helper' | ||
export { | ||
@@ -28,10 +27,4 @@ ArrayInterpolation, | ||
export { ComponentSelector, Interpolation } | ||
export { ComponentSelector, Interpolation, PropsOf, DistributiveOmit } | ||
type JSXInEl = JSX.IntrinsicElements | ||
export type WithTheme<P, T> = P extends { theme: infer Theme } | ||
? P & { theme: Exclude<Theme, undefined> } | ||
: P & { theme: T } | ||
export interface StyledOptions { | ||
@@ -43,109 +36,72 @@ label?: string | ||
export interface StyledComponent<InnerProps, StyleProps, Theme extends object> | ||
extends React.SFC<InnerProps & StyleProps & { theme?: Theme }>, | ||
ComponentSelector { | ||
/** | ||
* @desc this method is type-unsafe | ||
*/ | ||
withComponent<NewTag extends keyof JSXInEl>( | ||
tag: NewTag | ||
): StyledComponent<JSXInEl[NewTag], StyleProps, Theme> | ||
withComponent<Tag extends React.ComponentType<any>>( | ||
/** | ||
* @typeparam ComponentProps Props which will be included when withComponent is called | ||
* @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called | ||
*/ | ||
export interface StyledComponent< | ||
ComponentProps extends {}, | ||
SpecificComponentProps extends {} = {} | ||
> extends React.FC<ComponentProps & SpecificComponentProps>, ComponentSelector { | ||
withComponent<C extends React.ComponentType<React.ComponentProps<C>>>( | ||
component: C | ||
): StyledComponent<ComponentProps & PropsOf<C>> | ||
withComponent<Tag extends keyof JSX.IntrinsicElements>( | ||
tag: Tag | ||
): StyledComponent<PropsOf<Tag>, StyleProps, Theme> | ||
): StyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]> | ||
} | ||
type ReactClassPropKeys = keyof React.ClassAttributes<any> | ||
interface CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> { | ||
< | ||
StyleProps extends Omit< | ||
Overwrapped<InnerProps, StyleProps>, | ||
ReactClassPropKeys | ||
> = Omit<InnerProps & ExtraProps, ReactClassPropKeys>, | ||
Theme extends object = object | ||
>( | ||
...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>> | ||
): StyledComponent<InnerProps, StyleProps, Theme> | ||
< | ||
StyleProps extends Omit< | ||
Overwrapped<InnerProps, StyleProps>, | ||
ReactClassPropKeys | ||
> = Omit<InnerProps & ExtraProps, ReactClassPropKeys>, | ||
Theme extends object = object | ||
>( | ||
template: TemplateStringsArray, | ||
...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>> | ||
): StyledComponent<InnerProps, StyleProps, Theme> | ||
} | ||
interface CreateStyledComponentBaseThemed< | ||
InnerProps, | ||
ExtraProps, | ||
StyledInstanceTheme extends object | ||
/** | ||
* @typeparam ComponentProps Props which will be included when withComponent is called | ||
* @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called | ||
* @typeparam StyleProps Params passed to styles but not exposed as React props. These are normally library provided props | ||
*/ | ||
export interface CreateStyledComponent< | ||
ComponentProps extends {}, | ||
SpecificComponentProps extends {} = {}, | ||
StyleProps extends {} = {} | ||
> { | ||
< | ||
StyleProps extends Omit< | ||
Overwrapped<InnerProps, StyleProps>, | ||
ReactClassPropKeys | ||
> = Omit<InnerProps & ExtraProps, ReactClassPropKeys> | ||
>( | ||
...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>> | ||
): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme> | ||
< | ||
StyleProps extends Omit< | ||
Overwrapped<InnerProps, StyleProps>, | ||
ReactClassPropKeys | ||
> = Omit<InnerProps & ExtraProps, ReactClassPropKeys> | ||
>( | ||
/** | ||
* @typeparam AdditionalProps Additional props to add to your styled component | ||
*/ | ||
<AdditionalProps extends {} = {}>( | ||
...styles: Array< | ||
Interpolation< | ||
ComponentProps & SpecificComponentProps & StyleProps & AdditionalProps | ||
> | ||
> | ||
): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps> | ||
/** | ||
* @typeparam AdditionalProps Additional props to add to your styled component | ||
*/ | ||
<AdditionalProps extends {} = {}>( | ||
template: TemplateStringsArray, | ||
...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>> | ||
): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme> | ||
...styles: Array< | ||
Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps> | ||
> | ||
): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps> | ||
} | ||
export type CreateStyledComponentBase< | ||
InnerProps, | ||
ExtraProps, | ||
StyledInstanceTheme extends object | ||
> = | ||
// this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled | ||
object extends StyledInstanceTheme | ||
? CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> | ||
: CreateStyledComponentBaseThemed< | ||
InnerProps, | ||
ExtraProps, | ||
StyledInstanceTheme | ||
> | ||
export type CreateStyledComponentIntrinsic< | ||
Tag extends keyof JSXInEl, | ||
ExtraProps, | ||
Theme extends object | ||
> = CreateStyledComponentBase<JSXInEl[Tag], ExtraProps, Theme> | ||
export type CreateStyledComponentExtrinsic< | ||
Tag extends React.ComponentType<any>, | ||
ExtraProps, | ||
Theme extends object | ||
> = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme> | ||
/** | ||
* @desc | ||
* This function accepts `InnerProps`/`Tag` to infer the type of `tag`, | ||
* and accepts `ExtraProps` for user who use string style | ||
* to be able to declare extra props without using | ||
* `` styled('button')<ExtraProps>`...` ``, which does not supported in | ||
* styled-component VSCode extension. | ||
* If your tool support syntax highlighting for `` styled('button')<ExtraProps>`...` `` | ||
* it could be more efficient. | ||
* This function accepts a React component or tag ('div', 'a' etc). | ||
* | ||
* @example styled(MyComponent)({ width: 100 }) | ||
* @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width }) | ||
* @example styled('div')({ width: 100 }) | ||
* @example styled('div')<Props>(props => ({ width: props.width }) | ||
*/ | ||
export interface CreateStyled<Theme extends object = any> { | ||
<Tag extends React.ComponentType<any>, ExtraProps = {}>( | ||
tag: Tag, | ||
export interface CreateStyled<Theme extends {} = any> { | ||
<C extends React.ComponentType<React.ComponentProps<C>>>( | ||
component: C, | ||
options?: StyledOptions | ||
): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme> | ||
): CreateStyledComponent<PropsOf<C> & { theme?: Theme }, {}, { theme: Theme }> | ||
<Tag extends keyof JSXInEl, ExtraProps = {}>( | ||
<Tag extends keyof JSX.IntrinsicElements>( | ||
tag: Tag, | ||
options?: StyledOptions | ||
): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme> | ||
): CreateStyledComponent< | ||
{ theme?: Theme }, | ||
JSX.IntrinsicElements[Tag], | ||
{ theme: Theme } | ||
> | ||
} | ||
@@ -152,0 +108,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
114038
1450
+ Added@emotion/hash@0.9.2(transitive)
+ Added@emotion/memoize@0.9.0(transitive)
+ Added@emotion/serialize@1.3.0(transitive)
+ Added@emotion/unitless@0.9.0(transitive)
+ Added@emotion/utils@1.4.0(transitive)
+ Addedcsstype@3.1.3(transitive)
- Removed@emotion/hash@0.8.0(transitive)
- Removed@emotion/memoize@0.7.4(transitive)
- Removed@emotion/serialize@0.11.16(transitive)
- Removed@emotion/unitless@0.7.5(transitive)
- Removed@emotion/utils@0.11.3(transitive)
- Removedcsstype@2.6.21(transitive)