Use React 19

emotion-js · Dec 10, 2024 · 00ffa44 · 00ffa44
1 parent 3225ece
commit 00ffa44
Show file tree

Hide file tree

Showing 26 changed files with 145 additions and 296 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -41,16 +41,6 @@ jobs:
       - name: Check Types
         run: yarn tsc:all
 
-  test_react18:
-    name: Test React 18
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/ci-setup
-
-      - name: Run Tests with React 18
-        run: yarn test:react18:ci
-
   test_prod:
     name: Test Prod
     runs-on: ubuntu-latest

diff --git a/jest-react18.config.js b/jest-react18.config.js
diff --git a/package.json b/package.json
@@ -9,10 +9,8 @@
     "test:size": "npm-run-all build size",
     "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
     "test": "jest",
-    "test:react18": "jest -c jest-react18.config.js",
     "test:typescript": "yarn workspaces foreach --verbose --exclude emotion-monorepo run test:typescript",
     "test:ci": "jest --coverage --no-cache --ci --runInBand",
-    "test:react18:ci": "yarn test:react18 --coverage --no-cache --ci --runInBand",
     "test:dist": "yarn build && jest -c jest.dist.js --no-cache --ci --runInBand",
     "test:prod": "jest -c jest.prod.js --no-cache --ci --runInBand",
     "lint:check": "eslint .",
@@ -188,7 +186,7 @@
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.1",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
     "babel-check-duplicated-nodes": "^1.0.0",
@@ -229,14 +227,11 @@
     "polished": "^1.2.1",
     "prettier": "^3.3.2",
     "raf": "^3.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-native": "^0.63.2",
     "react-primitives": "^0.8.1",
-    "react-test-renderer": "16.8.6",
-    "react18": "npm:[email protected]",
-    "react18-dom": "npm:[email protected]",
-    "react18-test-renderer": "npm:[email protected]",
+    "react-test-renderer": "19.0.0",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
     "typescript": "^5.4.5",

diff --git a/packages/jest/package.json b/packages/jest/package.json
@@ -81,8 +81,8 @@
     "@types/jest": "^29.5.12",
     "enzyme-to-json": "^3.6.1",
     "pretty-format": "^22.4.3",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "typescript": "^5.4.5"
   },
   "author": "Kye Hohenberger",

diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
@@ -38,7 +38,7 @@ describe('jest-emotion with dom elements', () => {
     expect(output).toMatchSnapshot()
   })
 
-  test.skip('replaces class names and inserts styles into DOM element snapshots', () => {
+  test('replaces class names and inserts styles into DOM element snapshots', () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -81,7 +81,7 @@ describe('jest-emotion with DOM elements disabled', () => {
     expect(output).toMatchSnapshot()
   })
 
-  test.skip('does not replace class names or insert styles into DOM element snapshots', () => {
+  test('does not replace class names or insert styles into DOM element snapshots', () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -97,7 +97,7 @@ describe('jest-emotion with DOM elements disabled', () => {
   })
 })
 
-test.skip('allows to opt-out from styles printing', () => {
+test('allows to opt-out from styles printing', () => {
   const emotionPlugin = createSerializer({ includeStyles: false })
 
   const divStyle = css`

diff --git a/packages/native/package.json b/packages/native/package.json
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
     "@types/react-native": "^0.63.2",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "react-native": "^0.63.2",
     "typescript": "^5.4.5"
   },

diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json
@@ -15,12 +15,12 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0-rc.0",
-    "react": ">=16.8.0"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@emotion/react": "11.14.0",
     "@types/css-to-react-native": "^3.0.0",
-    "react": "16.14.0"
+    "react": "19.0.0"
   },
   "homepage": "https://emotion.sh",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/primitives-core",

diff --git a/packages/primitives/package.json b/packages/primitives/package.json
@@ -14,13 +14,13 @@
     "@emotion/primitives-core": "^11.13.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
+    "react": "^19.0.0",
     "react-primitives": "^0.8.1"
   },
   "devDependencies": {
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "react-primitives": "^0.8.1"
   },
   "homepage": "https://emotion.sh",

diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.js
@@ -122,7 +122,7 @@ describe('Emotion primitives', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  test.skip('ref', () => {
+  test('ref', () => {
     const StyledText = styled.Text`
       color: hotpink;
     `

diff --git a/packages/react/__tests__/ref.js b/packages/react/__tests__/ref.js
@@ -5,7 +5,7 @@ import { render, cleanup } from '@testing-library/react'
 
 afterEach(cleanup)
 
-test.skip('ref works', () => {
+test('ref works', () => {
   let ref = React.createRef()
   let { getByTestId } = render(
     <div data-testid="test" css={{ color: 'hotpink' }} ref={ref} />

diff --git a/packages/react/__tests__/with-theme.js b/packages/react/__tests__/with-theme.js
@@ -20,7 +20,7 @@ test('withTheme works', () => {
   ).toMatchSnapshot()
 })
 
-test.skip('should forward the ref', () => {
+test('should forward the ref', () => {
   function SomeComponent(props) {
     return <div ref={props.ref}>{props.theme.color}</div>
   }

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -215,7 +215,7 @@
     "@emotion/weak-memoize": "^0.4.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": "^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -229,7 +229,7 @@
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.14.0",
     "html-tag-names": "^1.1.2",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "svg-tag-names": "^1.1.1",
     "typescript": "^5.4.5"
   },

diff --git a/packages/react/src/jsx-namespace.ts b/packages/react/src/jsx-namespace.ts
@@ -1,106 +1,32 @@
-import 'react'
+import React from 'react'
 import { Interpolation } from '@emotion/serialize'
 import { Theme } from './theming'
 
-type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
-  ? true
-  : false
-
 type WithConditionalCSSProp<P> = 'className' extends keyof P
   ? string extends P['className' & keyof P]
     ? { css?: Interpolation<Theme> }
     : {}
   : {}
 
-// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
-
-// the IsPreReact19 and @ts-ignore comments are to allow @emotion/react to support three different cases of types
-// - pre-React 18.something which didn't have `React.JSX`
-// - React 18.something with `React.JSX`
-// - React 19 with `React.JSX` and no global `JSX`
-// we support both pre-React 19 cases by using the global `JSX` and with the React 19 types, we use `React.JSX`
-// to make this work, we need @ts-ignore comments to ignore references that are invalid
-// though note that the error types resulting from ignoring the errors will never be used
-// since the pre vs post React 19 conditional will pick the one that won't error
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElement = true extends IsPreReact19 ? JSX.Element : React.JSX.Element
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementClass = true extends IsPreReact19 ? JSX.ElementClass : React.JSX.ElementClass
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementAttributesProperty = true extends IsPreReact19 ? JSX.ElementAttributesProperty : React.JSX.ElementAttributesProperty
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementChildrenAttribute = true extends IsPreReact19 ? JSX.ElementChildrenAttribute : React.JSX.ElementChildrenAttribute
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19 ? JSX.LibraryManagedAttributes<C, P> : React.JSX.LibraryManagedAttributes<C, P>
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXIntrinsicAttributes = true extends IsPreReact19 ? JSX.IntrinsicAttributes : React.JSX.IntrinsicAttributes
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19 ? JSX.IntrinsicClassAttributes<T> : React.JSX.IntrinsicClassAttributes<T>
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements
-
-// based on the code from @types/[email protected]
-// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementType = true extends IsPreReact19 ? string | React.JSXElementConstructor<any> : React.JSX.ElementType
-
-export namespace ReactJSX {
-  export type ElementType = ReactJSXElementType
-  export interface Element extends ReactJSXElement {}
-  export interface ElementClass extends ReactJSXElementClass {}
-  export interface ElementAttributesProperty
-    extends ReactJSXElementAttributesProperty {}
-  export interface ElementChildrenAttribute
-    extends ReactJSXElementChildrenAttribute {}
-
-  export type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<
-    C,
-    P
-  >
-
-  export interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
-  export interface IntrinsicClassAttributes<T>
-    extends ReactJSXIntrinsicClassAttributes<T> {}
-
-  export type IntrinsicElements = ReactJSXIntrinsicElements
-}
-
 export namespace EmotionJSX {
-  export type ElementType = ReactJSXElementType
-  export interface Element extends ReactJSXElement {}
-  export interface ElementClass extends ReactJSXElementClass {}
+  export type ElementType = React.JSX.ElementType
+  export interface Element extends React.JSX.Element {}
+  export interface ElementClass extends React.JSX.ElementClass {}
   export interface ElementAttributesProperty
-    extends ReactJSXElementAttributesProperty {}
+    extends React.JSX.ElementAttributesProperty {}
   export interface ElementChildrenAttribute
-    extends ReactJSXElementChildrenAttribute {}
+    extends React.JSX.ElementChildrenAttribute {}
 
   export type LibraryManagedAttributes<C, P> = P extends unknown
-    ? WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>
+    ? WithConditionalCSSProp<P> & React.JSX.LibraryManagedAttributes<C, P>
     : never
 
-  export interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  export interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
   export interface IntrinsicClassAttributes<T>
-    extends ReactJSXIntrinsicClassAttributes<T> {}
+    extends React.JSX.IntrinsicClassAttributes<T> {}
 
   export type IntrinsicElements = {
-    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+    [K in keyof React.JSX.IntrinsicElements]: React.JSX.IntrinsicElements[K] & {
       css?: Interpolation<Theme>
     }
   }

diff --git a/packages/styled/__tests__/styled-dom.js b/packages/styled/__tests__/styled-dom.js
@@ -4,7 +4,7 @@ import { render, cleanup } from '@testing-library/react'
 
 afterEach(cleanup)
 
-test.skip('ref', () => {
+test('ref', () => {
   const H1 = styled.h1`
     font-size: 12px;
   `

diff --git a/packages/styled/package.json b/packages/styled/package.json
@@ -20,7 +20,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0-rc.0",
-    "react": ">=16.8.0"
+    "react": "^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -32,7 +32,7 @@
     "@emotion/react": "11.14.0",
     "@types/hoist-non-react-statics": "^3.3.5",
     "hoist-non-react-statics": "^3.3.1",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "typescript": "^5.4.5"
   },
   "publishConfig": {

diff --git a/packages/styled/src/index.ts b/packages/styled/src/index.ts
@@ -1,6 +1,6 @@
+import React from 'react'
 import { Theme } from '@emotion/react'
 import styled from './base'
-import { ReactJSXIntrinsicElements } from './jsx-namespace'
 import { tags } from './tags'
 import {
   CreateStyledComponent,
@@ -21,12 +21,12 @@ export type {
 } from './types'
 
 export type StyledTags = {
-  [Tag in keyof ReactJSXIntrinsicElements]: CreateStyledComponent<
+  [Tag in keyof React.JSX.IntrinsicElements]: CreateStyledComponent<
     {
       theme?: Theme
       as?: React.ElementType
     },
-    ReactJSXIntrinsicElements[Tag]
+    React.JSX.IntrinsicElements[Tag]
   >
 }
 

diff --git a/packages/styled/src/jsx-namespace.ts b/packages/styled/src/jsx-namespace.ts