Skip to content

Commit 61fcc80

Browse files
AndaristAndarist
authored
Remove React.forwardRef (#3287)
* Remove `React.forwardRef` * fix some things * skip ref-based tests * remoe redundant ref in type level tests
1 parent 55ef071 commit 61fcc80

File tree

13 files changed

+93
-114
lines changed

13 files changed

+93
-114
lines changed

‎.changeset/twelve-gifts-do.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@emotion/primitives-core': major
3+
'@emotion/styled': major
4+
'@emotion/react': major
5+
---
6+
7+
Refs are no longer internally forwarded using `React.forwardRef`.

‎packages/jest/test/printer.test.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ describe('jest-emotion with dom elements', () => {
3838
expect(output).toMatchSnapshot()
3939
})
4040

41-
test('replaces class names and inserts styles into DOM element snapshots', () => {
41+
test.skip('replaces class names and inserts styles into DOM element snapshots', () => {
4242
const divRef = React.createRef()
4343
render(
4444
<div css={divStyle} ref={divRef}>
@@ -81,7 +81,7 @@ describe('jest-emotion with DOM elements disabled', () => {
8181
expect(output).toMatchSnapshot()
8282
})
8383

84-
test('does not replace class names or insert styles into DOM element snapshots', () => {
84+
test.skip('does not replace class names or insert styles into DOM element snapshots', () => {
8585
const divRef = React.createRef()
8686
render(
8787
<div css={divStyle} ref={divRef}>
@@ -97,7 +97,7 @@ describe('jest-emotion with DOM elements disabled', () => {
9797
})
9898
})
9999

100-
test('allows to opt-out from styles printing', () => {
100+
test.skip('allows to opt-out from styles printing', () => {
101101
const emotionPlugin = createSerializer({ includeStyles: false })
102102

103103
const divStyle = css`

‎packages/primitives-core/src/styled.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function createStyled(
5050
}
5151

5252
// do we really want to use the same infra as the web since it only really uses theming?
53-
let Styled = React.forwardRef<unknown, StyledProps>((props, ref) => {
53+
let Styled: React.FC<StyledProps> = props => {
5454
const finalTag =
5555
(shouldUseAs && (props.as as React.ElementType)) || component
5656

@@ -78,12 +78,9 @@ export function createStyled(
7878
}
7979
}
8080
newProps.style = [css.apply(mergedProps, styles), props.style]
81-
if (ref) {
82-
newProps.ref = ref
83-
}
8481

8582
return React.createElement(finalTag, newProps)
86-
})
83+
}
8784

8885
Styled.displayName = `emotion(${getDisplayName(component)})`
8986

‎packages/primitives/test/emotion-primitives.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ describe('Emotion primitives', () => {
122122
expect(tree).toMatchSnapshot()
123123
})
124124

125-
test('ref', () => {
125+
test.skip('ref', () => {
126126
const StyledText = styled.Text`
127127
color: hotpink;
128128
`

‎packages/react/__tests__/ref.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { render, cleanup } from '@testing-library/react'
55

66
afterEach(cleanup)
77

8-
test('ref works', () => {
8+
test.skip('ref works', () => {
99
let ref = React.createRef()
1010
let { getByTestId } = render(
1111
<div data-testid="test" css={{ color: 'hotpink' }} ref={ref} />

‎packages/react/__tests__/with-theme.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,9 @@ test(`withTheme(Comp) hoists non-react static class properties`, () => {
3434
)
3535
})
3636

37-
test('should forward the ref', () => {
38-
class SomeComponent extends React.Component {
39-
render() {
40-
return this.props.theme.color
41-
}
37+
test.skip('should forward the ref', () => {
38+
function SomeComponent(props) {
39+
return <div ref={props.ref}>{props.theme.color}</div>
4240
}
4341

4442
const ComponentWithTheme = withTheme(SomeComponent)
@@ -48,5 +46,5 @@ test('should forward the ref', () => {
4846
<ComponentWithTheme ref={ref} />
4947
</ThemeProvider>
5048
)
51-
expect(ref.current).toBeInstanceOf(SomeComponent)
49+
expect(ref.current).toBeInstanceOf(HTMLDivElement)
5250
})

‎packages/react/src/context.tsx

+7-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { useContext, forwardRef } from 'react'
2+
import { useContext } from 'react'
33
import createCache, { EmotionCache } from '@emotion/cache'
44
import isDevelopment from '#is-development'
55
import isBrowser from '#is-browser'
@@ -27,23 +27,14 @@ export let __unsafe_useEmotionCache = function useEmotionCache() {
2727
return useContext(EmotionCacheContext)
2828
}
2929

30-
let withEmotionCache = function withEmotionCache<Props, RefType = any>(
31-
func: (
32-
props: React.PropsWithoutRef<Props>,
33-
context: EmotionCache,
34-
ref?: React.ForwardedRef<RefType>
35-
) => React.ReactNode
36-
):
37-
| React.FC<React.PropsWithoutRef<Props> & React.RefAttributes<RefType>>
38-
| React.ForwardRefExoticComponent<
39-
React.PropsWithoutRef<Props> & React.RefAttributes<RefType>
40-
> {
41-
return forwardRef<RefType, Props>((props, ref) => {
30+
let withEmotionCache = function withEmotionCache<Props>(
31+
func: (props: Props, context: EmotionCache) => React.ReactNode
32+
): React.FC<Props> {
33+
return props => {
4234
// the cache will never be null in the browser
4335
let cache = useContext(EmotionCacheContext)!
44-
45-
return func(props, cache, ref)
46-
})
36+
return func(props, cache)
37+
}
4738
}
4839

4940
if (!isBrowser) {

‎packages/react/src/emotion-element.tsx

+59-67
Original file line numberDiff line numberDiff line change
@@ -109,82 +109,74 @@ const Insertion = ({
109109
return null
110110
}
111111

112-
let Emotion = /* #__PURE__ */ withEmotionCache<EmotionProps>(
113-
(props, cache, ref) => {
114-
let cssProp = props.css as EmotionProps['css']
115-
116-
// so that using `css` from `emotion` and passing the result to the css prop works
117-
// not passing the registered cache to serializeStyles because it would
118-
// make certain babel optimisations not possible
119-
if (
120-
typeof cssProp === 'string' &&
121-
cache.registered[cssProp] !== undefined
122-
) {
123-
cssProp = cache.registered[cssProp]
124-
}
112+
let Emotion = /* #__PURE__ */ withEmotionCache<EmotionProps>((props, cache) => {
113+
let cssProp = props.css as EmotionProps['css']
114+
115+
// so that using `css` from `emotion` and passing the result to the css prop works
116+
// not passing the registered cache to serializeStyles because it would
117+
// make certain babel optimisations not possible
118+
if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
119+
cssProp = cache.registered[cssProp]
120+
}
125121

126-
let WrappedComponent = props[
127-
typePropName
128-
] as EmotionProps[typeof typePropName]
129-
let registeredStyles = [cssProp]
130-
let className = ''
131-
132-
if (typeof props.className === 'string') {
133-
className = getRegisteredStyles(
134-
cache.registered,
135-
registeredStyles,
136-
props.className
137-
)
138-
} else if (props.className != null) {
139-
className = `${props.className} `
140-
}
122+
let WrappedComponent = props[
123+
typePropName
124+
] as EmotionProps[typeof typePropName]
125+
let registeredStyles = [cssProp]
126+
let className = ''
141127

142-
let serialized = serializeStyles(
128+
if (typeof props.className === 'string') {
129+
className = getRegisteredStyles(
130+
cache.registered,
143131
registeredStyles,
144-
undefined,
145-
React.useContext(ThemeContext)
132+
props.className
146133
)
134+
} else if (props.className != null) {
135+
className = `${props.className} `
136+
}
147137

148-
if (isDevelopment && serialized.name.indexOf('-') === -1) {
149-
let labelFromStack = props[labelPropName]
150-
if (labelFromStack) {
151-
serialized = serializeStyles([
152-
serialized,
153-
'label:' + labelFromStack + ';'
154-
])
155-
}
156-
}
138+
let serialized = serializeStyles(
139+
registeredStyles,
140+
undefined,
141+
React.useContext(ThemeContext)
142+
)
157143

158-
className += `${cache.key}-${serialized.name}`
159-
160-
const newProps: Record<string, unknown> = {}
161-
for (let key in props) {
162-
if (
163-
hasOwn.call(props, key) &&
164-
key !== 'css' &&
165-
key !== typePropName &&
166-
(!isDevelopment || key !== labelPropName)
167-
) {
168-
newProps[key] = props[key]
169-
}
170-
}
171-
newProps.className = className
172-
if (ref) {
173-
newProps.ref = ref
144+
if (isDevelopment && serialized.name.indexOf('-') === -1) {
145+
let labelFromStack = props[labelPropName]
146+
if (labelFromStack) {
147+
serialized = serializeStyles([
148+
serialized,
149+
'label:' + labelFromStack + ';'
150+
])
174151
}
152+
}
175153

176-
return (
177-
<>
178-
<Insertion
179-
cache={cache}
180-
serialized={serialized}
181-
isStringTag={typeof WrappedComponent === 'string'}
182-
/>
183-
<WrappedComponent {...newProps} />
184-
</>
185-
)
154+
className += `${cache.key}-${serialized.name}`
155+
156+
const newProps: Record<string, unknown> = {}
157+
for (let key in props) {
158+
if (
159+
hasOwn.call(props, key) &&
160+
key !== 'css' &&
161+
key !== typePropName &&
162+
(!isDevelopment || key !== labelPropName)
163+
) {
164+
newProps[key] = props[key]
165+
}
186166
}
187-
)
167+
newProps.className = className
168+
169+
return (
170+
<>
171+
<Insertion
172+
cache={cache}
173+
serialized={serialized}
174+
isStringTag={typeof WrappedComponent === 'string'}
175+
/>
176+
<WrappedComponent {...newProps} />
177+
</>
178+
)
179+
})
188180

189181
if (isDevelopment) {
190182
Emotion.displayName = 'EmotionCssPropInternal'

‎packages/react/src/theming.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -85,19 +85,16 @@ export function withTheme<
8585
C extends React.ComponentType<React.ComponentProps<C>>
8686
>(
8787
Component: C
88-
): React.ForwardRefExoticComponent<
88+
): React.FC<
8989
DistributiveOmit<React.ComponentProps<C>, 'theme'> & { theme?: Theme }
90-
>
91-
export function withTheme(
92-
Component: React.ComponentType<any>
93-
): React.ForwardRefExoticComponent<any> {
90+
> {
9491
const componentName = Component.displayName || Component.name || 'Component'
9592

96-
let WithTheme = React.forwardRef(function render(props, ref) {
93+
let WithTheme: React.FC<any> = function render(props) {
9794
let theme = React.useContext(ThemeContext)
9895

99-
return <Component theme={theme} ref={ref} {...props} />
100-
})
96+
return <Component theme={theme} {...props} />
97+
}
10198

10299
WithTheme.displayName = `WithTheme(${componentName})`
103100

‎packages/react/types/tests.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const ComponentWithCache = withEmotionCache((_props: {}, cache) => {
3737
/>
3838
)
3939
})
40-
;<ComponentWithCache ref={() => {}} />
40+
;<ComponentWithCache />
4141
;<div css={{}}>
4242
<h1
4343
css={css`

‎packages/styled/__tests__/styled-dom.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { render, cleanup } from '@testing-library/react'
44

55
afterEach(cleanup)
66

7-
test('ref', () => {
7+
test.skip('ref', () => {
88
const H1 = styled.h1`
99
font-size: 12px;
1010
`

‎packages/styled/src/base.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const createStyled = (tag: ElementType, options?: StyledOptions) => {
120120
}
121121

122122
const Styled: ElementType = withEmotionCache(
123-
(props: Record<string, unknown>, cache, ref) => {
123+
(props: Record<string, unknown>, cache) => {
124124
const FinalTag =
125125
(shouldUseAs && (props.as as React.ElementType)) || baseTag
126126

@@ -170,9 +170,6 @@ const createStyled = (tag: ElementType, options?: StyledOptions) => {
170170
}
171171
}
172172
newProps.className = className
173-
if (ref) {
174-
newProps.ref = ref
175-
}
176173

177174
return (
178175
<>

‎packages/styled/test/index.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ describe('styled', () => {
225225
expect(tree).toMatchSnapshot()
226226
})
227227

228-
test('ref', () => {
228+
test.skip('ref', () => {
229229
const H1 = styled.h1`
230230
font-size: 12px;
231231
`

0 commit comments

Comments
 (0)