diff --git a/.changeset/tame-pets-flash.md b/.changeset/tame-pets-flash.md new file mode 100644 index 000000000..891f9a245 --- /dev/null +++ b/.changeset/tame-pets-flash.md @@ -0,0 +1,5 @@ +--- +'@emotion/react': major +--- + +`withTheme` will no longer automatically hoist non-React statics onto the created component diff --git a/packages/react/__tests__/with-theme.js b/packages/react/__tests__/with-theme.js index cb1258efc..78c494459 100644 --- a/packages/react/__tests__/with-theme.js +++ b/packages/react/__tests__/with-theme.js @@ -20,20 +20,6 @@ test('withTheme works', () => { ).toMatchSnapshot() }) -test(`withTheme(Comp) hoists non-react static class properties`, () => { - class ExampleComponent extends React.Component { - static displayName = 'foo' - static someSpecialStatic = 'bar' - } - - const ComponentWithTheme = withTheme(ExampleComponent) - - expect(ComponentWithTheme.displayName).toBe('WithTheme(foo)') - expect(ComponentWithTheme.someSpecialStatic).toBe( - ExampleComponent.someSpecialStatic - ) -}) - test.skip('should forward the ref', () => { function SomeComponent(props) { return
{props.theme.color}
diff --git a/packages/react/package.json b/packages/react/package.json index 454d198d3..eaa93caaa 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -113,60 +113,6 @@ "import": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs", "default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js" }, - "./_isolated-hnrs": { - "types": { - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js" - }, - "development": { - "edge-light": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.js" - }, - "worker": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.js" - }, - "workerd": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.cjs.js" - }, - "browser": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.development.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.development.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.development.cjs.js" - }, - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.cjs.js" - }, - "edge-light": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.js" - }, - "worker": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.js" - }, - "workerd": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.edge-light.cjs.js" - }, - "browser": { - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.cjs.js" - }, - "module": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js", - "import": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs", - "default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js" - }, "./jsx-dev-runtime": { "types": { "import": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs", @@ -266,8 +212,7 @@ "@emotion/serialize": "^1.3.3", "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0", "@emotion/utils": "^1.4.2", - "@emotion/weak-memoize": "^0.4.0", - "hoist-non-react-statics": "^3.3.1" + "@emotion/weak-memoize": "^0.4.0" }, "peerDependencies": { "react": ">=16.8.0" @@ -283,7 +228,6 @@ "@emotion/css-prettifier": "1.2.0", "@emotion/server": "11.11.0", "@emotion/styled": "11.14.0", - "@types/hoist-non-react-statics": "^3.3.5", "html-tag-names": "^1.1.2", "react": "16.14.0", "svg-tag-names": "^1.1.1", @@ -298,8 +242,7 @@ "entrypoints": [ "./index.ts", "./jsx-runtime.ts", - "./jsx-dev-runtime.ts", - "./_isolated-hnrs.ts" + "./jsx-dev-runtime.ts" ], "umdName": "emotionReact", "exports": { diff --git a/packages/react/src/_isolated-hnrs.ts b/packages/react/src/_isolated-hnrs.ts deleted file mode 100644 index 282af4181..000000000 --- a/packages/react/src/_isolated-hnrs.ts +++ /dev/null @@ -1,15 +0,0 @@ -// this file isolates this package that is not tree-shakeable -// and allows it to be dropped - if it stays unused -// it happens thanks to sideEffects: false in our package.json -import hoistNonReactStatics from 'hoist-non-react-statics' - -// have to wrap it in a proxy function because Rollup is too damn smart -// and if this module doesn't actually contain any logic of its own -// then Rollup just use 'hoist-non-react-statics' directly in other chunks -export default < - T extends React.ComponentType, - S extends React.ComponentType ->( - targetComponent: T, - sourceComponent: S -) => hoistNonReactStatics(targetComponent, sourceComponent) diff --git a/packages/react/src/theming.tsx b/packages/react/src/theming.tsx index 5db91af36..6b65ee3a6 100644 --- a/packages/react/src/theming.tsx +++ b/packages/react/src/theming.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import weakMemoize from '@emotion/weak-memoize' import isDevelopment from '#is-development' -import hoistNonReactStatics from './_isolated-hnrs' import { DistributiveOmit } from './types' // tslint:disable-next-line: no-empty-interface @@ -98,5 +97,5 @@ export function withTheme< WithTheme.displayName = `WithTheme(${componentName})` - return hoistNonReactStatics(WithTheme, Component) + return WithTheme } diff --git a/packages/styled/package.json b/packages/styled/package.json index c79ba24c2..c9686f24e 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -30,6 +30,8 @@ "devDependencies": { "@definitelytyped/dtslint": "0.0.112", "@emotion/react": "11.14.0", + "@types/hoist-non-react-statics": "^3.3.5", + "hoist-non-react-statics": "^3.3.1", "react": "16.14.0", "typescript": "^5.4.5" }, diff --git a/yarn.lock b/yarn.lock index bc8a4f7d6..d5aac4066 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2899,8 +2899,6 @@ __metadata: "@emotion/use-insertion-effect-with-fallbacks": ^1.2.0 "@emotion/utils": ^1.4.2 "@emotion/weak-memoize": ^0.4.0 - "@types/hoist-non-react-statics": ^3.3.5 - hoist-non-react-statics: ^3.3.1 html-tag-names: ^1.1.2 react: 16.14.0 svg-tag-names: ^1.1.1 @@ -2970,6 +2968,8 @@ __metadata: "@emotion/serialize": ^1.3.3 "@emotion/use-insertion-effect-with-fallbacks": ^1.2.0 "@emotion/utils": ^1.4.2 + "@types/hoist-non-react-statics": ^3.3.5 + hoist-non-react-statics: ^3.3.1 react: 16.14.0 typescript: ^5.4.5 peerDependencies: