From 07353f91b1cb98924d05f80b8d3c8d148468f3e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 16 Dec 2024 00:28:20 +0100 Subject: [PATCH] Fixed benchmarks app (#3297) * Fixed benchmarks app * update snapshot --- babel.config.js | 11 ++++++++++- docs/ssr.mdx | 6 +++--- .../__tests__/__fixtures__/existing-imports.js | 4 ++-- .../__tests__/__snapshots__/index.js.snap | 8 ++++---- playgrounds/cra/src/index.js | 7 +++---- scripts/benchmarks/.babelrc | 12 ------------ scripts/benchmarks/package.json | 3 +++ scripts/benchmarks/src/app/Text.js | 4 ---- .../src/implementations/emotion-css-prop/Box.js | 4 ++-- .../src/implementations/emotion-css-prop/Dot.js | 4 ++-- .../src/implementations/emotion-css-prop/View.js | 4 ++-- scripts/benchmarks/src/index.js | 4 ++-- 12 files changed, 33 insertions(+), 38 deletions(-) delete mode 100644 scripts/benchmarks/.babelrc diff --git a/babel.config.js b/babel.config.js index 5010931b43..93ea2a557c 100644 --- a/babel.config.js +++ b/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 } + ] + ] } ] } diff --git a/docs/ssr.mdx b/docs/ssr.mdx index edfcd27be6..73c0e3c7dc 100644 --- a/docs/ssr.mdx +++ b/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(, root) + hydrateRoot(root, ) } else { - ReactDOM.render(, root) + createRoot(root).render() } ``` diff --git a/packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js b/packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js index ab20426275..c921440643 100644 --- a/packages/babel-plugin-jsx-pragmatic/__tests__/__fixtures__/existing-imports.js +++ b/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(, document.getElementById('root')) +createRoot(document.getElementById('root')).render() diff --git a/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap index 31320834be..aa8ee3ebd5 100644 --- a/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap +++ b/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(, document.getElementById('root')) +createRoot(document.getElementById('root')).render() ↓ ↓ ↓ ↓ ↓ ↓ @@ -18,10 +18,10 @@ ReactDOM.render(, 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(, document.getElementById('root'));" +createRoot(document.getElementById('root')).render();" `; exports[`@emotion/babel-plugin-jsx-pragmatic fragment-only 1`] = ` diff --git a/playgrounds/cra/src/index.js b/playgrounds/cra/src/index.js index 432dac66b0..f9771624b5 100644 --- a/playgrounds/cra/src/index.js +++ b/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( - , - document.getElementById('root') + ) diff --git a/scripts/benchmarks/.babelrc b/scripts/benchmarks/.babelrc deleted file mode 100644 index 4e025bd5bd..0000000000 --- a/scripts/benchmarks/.babelrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "presets": [ - ["@babel/env", { "modules": false, "loose": true }], - "@babel/react" - ], - "plugins": [ - ["@babel/plugin-proposal-class-properties", { "loose": false }], - "babel-plugin-react-native-web", - "@emotion", - "transform-inline-environment-variables" - ] -} diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json index d517fa7359..af16e75bba 100644 --- a/scripts/benchmarks/package.json +++ b/scripts/benchmarks/package.json @@ -22,5 +22,8 @@ }, "alias": { "react-native": "react-native-web" + }, + "@parcel/resolver-default": { + "packageExports": true } } diff --git a/scripts/benchmarks/src/app/Text.js b/scripts/benchmarks/src/app/Text.js index 3579db4357..98bfcbd346 100644 --- a/scripts/benchmarks/src/app/Text.js +++ b/scripts/benchmarks/src/app/Text.js @@ -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 diff --git a/scripts/benchmarks/src/implementations/emotion-css-prop/Box.js b/scripts/benchmarks/src/implementations/emotion-css-prop/Box.js index 7bdf103e39..b1978bdfc1 100644 --- a/scripts/benchmarks/src/implementations/emotion-css-prop/Box.js +++ b/scripts/benchmarks/src/implementations/emotion-css-prop/Box.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, diff --git a/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js b/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js index e525cd1699..c0ee4f9ab0 100644 --- a/scripts/benchmarks/src/implementations/emotion-css-prop/Dot.js +++ b/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 Dot = ({ size, x, y, children, color }) => (
{ return
diff --git a/scripts/benchmarks/src/index.js b/scripts/benchmarks/src/index.js index 36e828fa7a..84dae5ef8c 100644 --- a/scripts/benchmarks/src/index.js +++ b/scripts/benchmarks/src/index.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(, root) +createRoot(root).render()