From ed0d7f19ac96fac651046d41d30d252d99ee8e71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 9 Dec 2024 13:05:05 +0100 Subject: [PATCH] Removed `.defaultProps` support --- .changeset/early-badgers-teach.md | 6 +++++ packages/jest/test/react-enzyme.test.js | 10 ++----- packages/react/src/theming.tsx | 4 +-- packages/react/src/types.ts | 10 ------- packages/react/types/tests-theming.tsx | 17 ------------ packages/styled/src/base.tsx | 1 - packages/styled/src/types.ts | 13 +++++----- .../test/__snapshots__/index.test.js.snap | 26 +------------------ packages/styled/test/index.test.js | 26 ------------------- packages/styled/types/tests-base.tsx | 24 ----------------- 10 files changed, 17 insertions(+), 120 deletions(-) create mode 100644 .changeset/early-badgers-teach.md diff --git a/.changeset/early-badgers-teach.md b/.changeset/early-badgers-teach.md new file mode 100644 index 0000000000..4da8da5f9e --- /dev/null +++ b/.changeset/early-badgers-teach.md @@ -0,0 +1,6 @@ +--- +'@emotion/styled': major +'@emotion/react': major +--- + +Removed `.defaultProps` support diff --git a/packages/jest/test/react-enzyme.test.js b/packages/jest/test/react-enzyme.test.js index e91e2e9f83..b17f36b7f8 100644 --- a/packages/jest/test/react-enzyme.test.js +++ b/packages/jest/test/react-enzyme.test.js @@ -241,16 +241,10 @@ const cases = { theming: { render() { const Button = styled.button` - color: ${props => props.theme.main}; - border: 2px solid ${props => props.theme.main}; + color: ${props => props.theme.main ?? 'red'}; + border: 2px solid ${props => props.theme.main ?? 'red'}; ` - Button.defaultProps = { - theme: { - main: 'red' - } - } - const theme = { main: 'blue' } diff --git a/packages/react/src/theming.tsx b/packages/react/src/theming.tsx index dd513d0335..6d84bf36b3 100644 --- a/packages/react/src/theming.tsx +++ b/packages/react/src/theming.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import weakMemoize from '@emotion/weak-memoize' import isDevelopment from '#is-development' import hoistNonReactStatics from './_isolated-hnrs' -import { DistributiveOmit, PropsOf } from './types' +import { DistributiveOmit } from './types' // tslint:disable-next-line: no-empty-interface export interface Theme {} @@ -86,7 +86,7 @@ export function withTheme< >( Component: C ): React.ForwardRefExoticComponent< - DistributiveOmit, 'theme'> & { theme?: Theme } + DistributiveOmit, 'theme'> & { theme?: Theme } > export function withTheme( Component: React.ComponentType diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 592bd3e7f7..db8e5ea140 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -1,13 +1,3 @@ -import { ReactJSX } from './jsx-namespace' - -/** - * @desc Utility type for getting props type of React component. - * It takes `defaultProps` into an account - making props with defaults optional. - */ -export type PropsOf< - C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor -> = ReactJSX.LibraryManagedAttributes> - // We need to use this version of Omit as it's distributive (Will preserve unions) export type DistributiveOmit = T extends any ? Pick> diff --git a/packages/react/types/tests-theming.tsx b/packages/react/types/tests-theming.tsx index 3481deb181..0519d3fd0c 100644 --- a/packages/react/types/tests-theming.tsx +++ b/packages/react/types/tests-theming.tsx @@ -38,27 +38,10 @@ const ThemedComp = withTheme(CompC) ; ; -const CompFCWithDefault = ({ prop }: Props) => (prop ? :
) -CompFCWithDefault.defaultProps = { prop: false } -class CompCWithDefault extends React.Component { - static defaultProps = { prop: false } - render() { - return this.props.prop ? :
- } -} - { const theme: Theme = useTheme() } -const ThemedFCWithDefault = withTheme(CompFCWithDefault) -; -; - -const ThemedCompWithDefault = withTheme(CompCWithDefault) -; -; - { interface Book { kind: 'book' diff --git a/packages/styled/src/base.tsx b/packages/styled/src/base.tsx index 66e49a725d..213a6a3ba1 100644 --- a/packages/styled/src/base.tsx +++ b/packages/styled/src/base.tsx @@ -196,7 +196,6 @@ const createStyled = (tag: ElementType, options?: StyledOptions) => { : baseTag.displayName || baseTag.name || 'Component' })` - Styled.defaultProps = tag.defaultProps Styled.__emotion_real = Styled Styled.__emotion_base = baseTag Styled.__emotion_styles = styles diff --git a/packages/styled/src/types.ts b/packages/styled/src/types.ts index 74ce3dcc81..a78440edde 100644 --- a/packages/styled/src/types.ts +++ b/packages/styled/src/types.ts @@ -31,13 +31,13 @@ export interface StyledComponent< withComponent>>( component: C ): StyledComponent< - ComponentProps & PropsOf, + ComponentProps & React.ComponentProps, {}, { ref?: React.Ref> } > withComponent>>( component: C - ): StyledComponent> + ): StyledComponent> withComponent( tag: Tag ): StyledComponent @@ -113,7 +113,7 @@ export interface CreateStyled { component: C, options: FilteringStyledOptions, ForwardedProps> ): CreateStyledComponent< - Pick, ForwardedProps> & { + Pick, ForwardedProps> & { theme?: Theme }, {}, @@ -126,7 +126,7 @@ export interface CreateStyled { component: C, options?: StyledOptions> ): CreateStyledComponent< - PropsOf & { + React.ComponentProps & { theme?: Theme }, {}, @@ -143,7 +143,7 @@ export interface CreateStyled { component: C, options: FilteringStyledOptions, ForwardedProps> ): CreateStyledComponent< - Pick, ForwardedProps> & { + Pick, ForwardedProps> & { theme?: Theme } > @@ -152,7 +152,7 @@ export interface CreateStyled { component: C, options?: StyledOptions> ): CreateStyledComponent< - PropsOf & { + React.ComponentProps & { theme?: Theme } > @@ -182,7 +182,6 @@ export interface CreateStyled { } export type ElementType = React.ElementType & { - defaultProps?: Partial __emotion_real?: ElementType __emotion_base?: ElementType __emotion_styles?: Interpolation[] diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap index ed1d5bb24a..c83d9c2def 100644 --- a/packages/styled/test/__snapshots__/index.test.js.snap +++ b/packages/styled/test/__snapshots__/index.test.js.snap @@ -200,7 +200,7 @@ exports[`styled nested 1`] = `
- hello + hello

@@ -313,30 +313,6 @@ exports[`styled ref 1`] = `

`; -exports[`styled should forward .defaultProps when reusing __emotion_base 1`] = ` -.emotion-0 { - text-align: center; - color: red; -} - -.emotion-2 { - text-align: center; - color: red; - font-style: italic; -} - -
-

-

-

-`; - exports[`styled throws if undefined is passed as the component 1`] = ` "You are trying to create a styled element with an undefined component. You may have forgotten to import it." diff --git a/packages/styled/test/index.test.js b/packages/styled/test/index.test.js index 9b37633a47..14e596a1bc 100644 --- a/packages/styled/test/index.test.js +++ b/packages/styled/test/index.test.js @@ -326,32 +326,6 @@ describe('styled', () => { expect(tree).toMatchSnapshot() }) - test('should forward .defaultProps when reusing __emotion_base', () => { - const Title = styled('h1')` - text-align: center; - ${props => ({ - color: props.color - })}; - ` - - Title.defaultProps = { - color: 'red' - } - - const Title2 = styled(Title)` - font-style: italic; - ` - - const tree = renderer - .create( -
- - <Title2 /> - </div> - ) - .toJSON() - expect(tree).toMatchSnapshot() - }) test('withComponent will replace tags but keep styling classes', () => { const Title = styled('h1')` color: green; diff --git a/packages/styled/types/tests-base.tsx b/packages/styled/types/tests-base.tsx index 497910a826..f6775c86e2 100644 --- a/packages/styled/types/tests-base.tsx +++ b/packages/styled/types/tests-base.tsx @@ -328,30 +328,6 @@ declare const ref3_2: (element: HTMLDivElement | null) => void ;<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 /> - interface PropsA { title: string }