Fixed benchmarks app (#3297)

* Fixed benchmarks app

* update snapshot

Author: Andarist

babel.config.js

@@ -10,7 +10,7 @@ let isTestFile = filename =>
 module.exports = api => {
   api.cache(true)
   return {
-    presets: ['babel-preset-emotion-dev', '@babel/preset-typescript'],
+    presets: [emotionDevPreset, '@babel/preset-typescript'],
     overrides: [
       {
         test: filename =>
@@ -49,6 +49,15 @@ module.exports = api => {
             { runtime: 'automatic', development: true, useEmotionPlugin: true }
           ]
         ]
+      },
+      {
+        test: filename => filename && filename.includes('scripts/benchmarks'),
+        presets: [
+          [
+            emotionDevPreset,
+            { runtime: 'automatic', development: false, useEmotionPlugin: true }
+          ]
+        ]
       }
     ]
   }

docs/ssr.mdx

@@ -265,16 +265,16 @@ index.js
 ```jsx
 // This has to be run before emotion inserts any styles so it's imported before the App component
 import './disable-speedy'
-import ReactDOM from 'react-dom'
+import { createRoot, hydrateRoot } from 'react-dom/client'
 import App from './App'
 
 const root = document.getElementById('root')
 
 // Check if the root node has any children to detect if the app has been prerendered
 if (root.hasChildNodes()) {
-  ReactDOM.hydrate(<App />, root)
+  hydrateRoot(root, <App />)
 } else {
-  ReactDOM.render(<App />, root)
+  createRoot(root).render(<App />)
 }
 ```
 

packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js

@@ -3,7 +3,7 @@ import 'react-app-polyfill/ie11'
 import 'react-app-polyfill/stable'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+createRoot(document.getElementById('root')).render(<App />)

packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap

@@ -6,10 +6,10 @@ import 'react-app-polyfill/ie11'
 import 'react-app-polyfill/stable'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+createRoot(document.getElementById('root')).render(<App />)
 
 
       ↓ ↓ ↓ ↓ ↓ ↓
@@ -18,10 +18,10 @@ ReactDOM.render(<App />, document.getElementById('root'))
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-ReactDOM.render(<App />, document.getElementById('root'));"
+createRoot(document.getElementById('root')).render(<App />);"
 `;
 
 exports[`@emotion/babel-plugin-jsx-pragmatic fragment-only 1`] = `

playgrounds/cra/src/index.js

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot, hydrateRoot } from 'react-dom/client'
 import App from './App'
 
-ReactDOM.render(
+createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )

scripts/benchmarks/.babelrc

@@ -22,5 +22,8 @@
   },
   "alias": {
     "react-native": "react-native-web"
+  },
+  "@parcel/resolver-default": {
+    "packageExports": true
   }
 }

scripts/benchmarks/package.json

@@ -8,10 +8,6 @@ import { colors } from './theme'
 class AppText extends React.Component {
   static displayName = '@app/Text'
 
-  static contextTypes = {
-    isInAParentText: bool
-  }
-
   render() {
     const { style, ...rest } = this.props
     const { isInAParentText } = this.context

scripts/benchmarks/src/app/Text.js

@@ -1,6 +1,6 @@
-/** @jsx jsx */
+/** @jsxImportSource @emotion/react */
 import { viewStyle } from './View'
-import { css, jsx } from '@emotion/react'
+import { css } from '@emotion/react'
 
 const Box = ({
   color,

scripts/benchmarks/src/implementations/emotion-css-prop/Box.js

@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
 
 const Dot = ({ size, x, y, children, color }) => (
   <div

scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js

@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react'
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react'
 
 const View = ({ style, ...other }) => {
   return <div {...other} css={css(viewStyle, style)} />

scripts/benchmarks/src/implementations/emotion-css-prop/View.js

@@ -4,7 +4,7 @@ import Tree from './cases/Tree'
 import SierpinskiTriangle from './cases/SierpinskiTriangle'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 const packageNames = Object.keys(implementations)
 
@@ -76,4 +76,4 @@ if (!root) {
   throw new Error('could not find root')
 }
 
-ReactDOM.render(<App tests={tests} />, root)
+createRoot(root).render(<App tests={tests} />)