Convert @emotion/react's source code to TypeScript (#3281)

* Convert `@emotion/react`'s source code to TypeScript

* add changeset

* limit `package.json['files']`

* fixed type issue

* try `esModuleInterop`

* add required cast

* use `resolveJsonModule` too

* fixed extra things

* fixed a silly mistake

* one extra thing

* fixed type error

* try building before running dtslint

* fixed import

* try to bump tested TS versions

* add extra ts-ignore

* make sure the ts-ignore is above the problematic line

* rewrite tests to stop relying on implementation detail

* fixed type error

* corrext tests

* fixed entrypoints types

Author: Andarist

.changeset/rotten-baboons-knock.md

@@ -0,0 +1,5 @@
+---
+'@emotion/react': minor
+---
+
+Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.

.github/workflows/main.yml

@@ -88,5 +88,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/ci-setup
 
+      - name: build
+        run: yarn build
+
       - name: dtslint
         run: yarn test:typescript

package.json

@@ -188,7 +188,7 @@
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",
-    "@types/react": "18.2.6",
+    "@types/react": "18.3.12",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
     "babel-check-duplicated-nodes": "^1.0.0",

packages/cache/types/index.d.ts

@@ -1 +1 @@
-export * from '../src'
+export * from '..'

packages/css/test/no-babel/index.test.js

@@ -7,7 +7,6 @@ import styled from '@emotion/styled'
 let consoleError = console.error
 
 afterEach(() => {
-  // $FlowFixMe
   console.error = consoleError
 })
 
@@ -146,7 +145,6 @@ describe('css', () => {
     })
 
     const spy = jest.fn()
-    // $FlowFixMe
     console.error = spy
 
     expect(() =>

packages/css/test/sheet.dom.test.js

@@ -3,7 +3,6 @@ import { sheet } from '@emotion/css'
 const consoleError = console.error
 
 afterEach(() => {
-  // $FlowFixMe
   console.error = consoleError
 })
 
@@ -38,7 +37,6 @@ describe('sheet', () => {
   test('throws', () => {
     sheet.speedy(true)
     const spy = jest.fn()
-    // $FlowFixMe
     console.error = spy
     sheet.insert('.asdfasdf4###112121211{')
     expect(spy.mock.calls.length).toBe(1)

packages/native/types/index.d.ts

@@ -1,5 +1,5 @@
 // Definitions by: Pat Sissons <https://github.com/patsissons>
-// TypeScript Version: 3.4
+// TypeScript Version: 4.1
 
 import * as RN from 'react-native'
 import { Theme } from '@emotion/react'

packages/native/types/tsconfig.json

@@ -5,6 +5,8 @@
     "jsx": "react",
     "lib": ["es6", "dom"],
     "module": "commonjs",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
     "noEmit": true,
     "strict": true,
     "target": "es5",

packages/primitives-core/src/styled.ts

@@ -51,7 +51,8 @@ export function createStyled(
 
       // do we really want to use the same infra as the web since it only really uses theming?
       let Styled = React.forwardRef<unknown, StyledProps>((props, ref) => {
-        const finalTag = (shouldUseAs && props.as) || component
+        const finalTag =
+          (shouldUseAs && (props.as as React.ElementType)) || component
 
         let mergedProps = props
         if (props.theme == null) {

packages/react/__tests__/element.js

@@ -1,14 +1,11 @@
-// @flow
 /** @jsx jsx */
 import { render } from '@testing-library/react'
 import { jsx, css, CacheProvider, ThemeProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 
-// $FlowFixMe
 console.error = jest.fn()
 
 beforeEach(() => {
-  // $FlowFixMe
   document.head.innerHTML = ''
   jest.clearAllMocks()
 })
@@ -18,7 +15,6 @@ describe('EmotionElement', () => {
     const theme = { color: 'blue' }
     const cache = createCache({ key: 'context' })
 
-    // $FlowFixMe
     const Comp = ({ flag }) => (
       <ThemeProvider theme={theme}>
         <CacheProvider value={cache}>