Fix & upgrade benchmarks (#2544)

* Upgrade benchmarks to Parcel 2 And fix various runtime errors when running the benchmark application * Fix benchmark run script * Update d3-scale-chromatic in benchmarks project * Fix ssr-benchmark - Upgrade to ES modules - Fix trying to create an Emotion cache without a key - Fix trying to read directly from a React context object * Update some React Native-related snapshots This was presumably caused by updating react-native-web from 0.13 to 0.17. * Fix benchmark script in root package.json
emotion-js · Nov 14, 2021 · 3c902cf · 3c902cf
1 parent 9e82a99
commit 3c902cf
Show file tree

Hide file tree

Showing 17 changed files with 2,539 additions and 865 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ public/
 !playgrounds/cra/public
 .env
 .vscode
+.parcel-cache/
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
  "test:watch": "jest --watch",
  "size": "bundlesize",
  "lint": "eslint . --fix",
- "benchmark": "cd scripts/benchmarks && yarn benchmark",
+ "benchmark": "cd scripts/benchmarks && yarn build && yarn run-benchmark",
  "start:site": "cd site && yarn start:site",
  "build:site": "cd site && yarn build:site",
  "flow": "flow",
@@ -205,7 +205,6 @@
  "babel-plugin-codegen": "^3.0.0",
  "babel-plugin-fix-dce-for-classes-with-statics": "^0.1.0",
  "babel-plugin-jsx-pragmatic": "^1.0.2",
- "babel-plugin-react-native-web": "^0.9.6",
  "babel-plugin-transform-define": "^1.3.0",
  "benchmark": "^2.1.4",
  "bolt-check": "^0.3.0",
@@ -247,7 +246,6 @@
  "opencollective": "^1.0.3",
  "polished": "^1.2.1",
  "prettier": "^2.3.0",
- "puppeteer": "^1.6.0",
  "raf": "^3.4.0",
  "react": "16.14.0",
  "react-art": "^16.5.2",
@@ -256,7 +254,6 @@
  "react-icons": "^2.2.7",
  "react-live": "1.10.0",
  "react-native": "^0.63.2",
- "react-native-web": "0.13.12",
  "react-primitives": "^0.8.1",
  "react-router-dom": "^4.2.2",
  "react-scripts": "1.1.5",

diff --git a/packages/native/test/__snapshots__/native-styled.test.js.snap b/packages/native/test/__snapshots__/native-styled.test.js.snap
@@ -5,7 +5,7 @@ exports[`Emotion native styled primitive should work with \`withComponent\` 1`]
  decor="hotpink"
  style={
  Array [
- 77,
+ 92,
  undefined,
  ]
  }
@@ -19,7 +19,7 @@ exports[`Emotion native styled should pass props in withComponent 1`] = `
  color="green"
  style={
  Array [
- 81,
+ 96,
  undefined,
  ]
  }
@@ -31,7 +31,7 @@ exports[`Emotion native styled should pass props in withComponent 2`] = `
  color="hotpink"
  style={
  Array [
- 82,
+ 97,
  undefined,
  ]
  }
@@ -49,7 +49,7 @@ exports[`Emotion native styled should render <Image /> 1`] = `
  }
  style={
  Array [
- 83,
+ 98,
  undefined,
  ]
  }
@@ -60,7 +60,7 @@ exports[`Emotion native styled should render primitive with style prop 1`] = `
 <Text
  style={
  Array [
- 77,
+ 92,
  Object {
  "padding": 10,
  },
@@ -76,7 +76,7 @@ exports[`Emotion native styled should render styles correctly from all nested st
  backgroundColor="blue"
  style={
  Array [
- 86,
+ 101,
  undefined,
  ]
  }
@@ -90,7 +90,7 @@ exports[`Emotion native styled should render the primitive on changing the props
  decor="hotpink"
  style={
  Array [
- 76,
+ 91,
  undefined,
  ]
  }
@@ -104,7 +104,7 @@ exports[`Emotion native styled should render the primitive when styles applied u
  back="red"
  style={
  Array [
- 74,
+ 89,
  Object {
  "fontSize": 40,
  },
@@ -119,7 +119,7 @@ exports[`Emotion native styled should style any other component 1`] = `
 <Text
  style={
  Array [
- 77,
+ 92,
  undefined,
  ]
  }
@@ -132,8 +132,8 @@ exports[`Emotion native styled should work with StyleSheet.create API 1`] = `
 <Text
  style={
  Array [
- 79,
- 78,
+ 94,
+ 93,
  ]
  }
 >
@@ -145,7 +145,7 @@ exports[`Emotion native styled should work with theming from @emotion/react 1`]
 <Text
  style={
  Array [
- 75,
+ 90,
  undefined,
  ]
  }

diff --git a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
@@ -4,7 +4,6 @@ exports[`Emotion primitives custom shouldForwardProp works 1`] = `
 <div
  className="css-text-901oao r-color-185hjl9"
  dir="auto"
- onClick={[Function]}
 >
  Emotion
 </div>
@@ -14,7 +13,6 @@ exports[`Emotion primitives primitive should work with \`withComponent\` 1`] = `
 <div
  className="css-text-901oao r-color-185hjl9"
  dir="auto"
- onClick={[Function]}
 >
  Mike
 </div>
@@ -30,7 +28,6 @@ exports[`Emotion primitives should pass props in withComponent 2`] = `
 <div
  className="css-text-901oao r-backgroundColor-173gl9r"
  dir="auto"
- onClick={[Function]}
 />
 `;
 
@@ -56,6 +53,7 @@ exports[`Emotion primitives should render <Image /> 1`] = `
 >
  <div
  className="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+ suppressHydrationWarning={true}
  />
 </div>
 `;
@@ -64,7 +62,6 @@ exports[`Emotion primitives should render primitive with style prop 1`] = `
 <div
  className="css-text-901oao r-color-185hjl9"
  dir="auto"
- onClick={[Function]}
  style={
  Object {
  "paddingBottom": "10px",
@@ -82,7 +79,6 @@ exports[`Emotion primitives should render the primitive on changing the props 1`
 <div
  className="css-text-901oao r-color-185hjl9 r-paddingBottom-k8qxaj r-paddingLeft-b5h31w r-paddingRight-1ah4tor r-paddingTop-1knelpx"
  dir="auto"
- onClick={[Function]}
 >
  Emotion Primitives
 </div>
@@ -92,7 +88,6 @@ exports[`Emotion primitives should render the primitive when styles applied usin
 <div
  className="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
  dir="auto"
- onClick={[Function]}
  style={
  Object {
  "fontSize": "40px",
@@ -107,7 +102,6 @@ exports[`Emotion primitives should style any other component 1`] = `
 <div
  className="css-text-901oao r-color-185hjl9"
  dir="auto"
- onClick={[Function]}
 >
  Hello World
 </div>
@@ -129,7 +123,6 @@ exports[`Emotion primitives should work with StyleSheet.create API 1`] = `
 <div
  className="css-text-901oao r-color-howw7u r-fontSize-10x49cs"
  dir="auto"
- onClick={[Function]}
 >
  Emotion Primitives
 </div>
@@ -139,7 +132,6 @@ exports[`Emotion primitives should work with theming from @emotion/react 1`] = `
 <div
  className="css-text-901oao r-color-1hxtt4r"
  dir="auto"
- onClick={[Function]}
 >
  Hello World
 </div>

diff --git a/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap b/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap
@@ -4,7 +4,6 @@ exports[`should render the primitive when styles applied using object style nota
 <div
  className="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
  dir="auto"
- onClick={[Function]}
  style={
  Object {
  "fontSize": "40px",

diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json
@@ -11,14 +11,14 @@
  "dependencies": {
  "@babel/core": "^7.13.10",
  "@emotion/babel-plugin": "^11.0.0",
- "babel-plugin-react-native-web": "^0.9.6",
- "d3-scale-chromatic": "^1.3.0",
- "http-server": "^0.11.1",
- "parcel": "^1.10.3",
- "puppeteer": "^1.6.0",
+ "babel-plugin-react-native-web": "^0.17.5",
+ "d3-scale-chromatic": "^3.0.0",
+ "http-server": "^14.0.0",
+ "parcel": "^2.0.1",
+ "puppeteer": "^11.0.0",
  "react": "16.14.0",
  "react-dom": "16.14.0",
- "react-native-web": "0.13.12",
+ "react-native-web": "0.17.5",
  "stats-analysis": "^2.0.0"
  },
  "alias": {

diff --git a/scripts/benchmarks/run.js b/scripts/benchmarks/run.js
@@ -4,7 +4,7 @@ const path = require('path')
 const puppeteer = require('puppeteer')
 const { createServer } = require('http-server')
 
-let libraries = ['emotion-css-func', 'emotion-css-prop']
+let libraries = ['emotion-css-func', 'emotion-css-prop', 'emotion-styled']
 let tests = ['Mount deep tree', 'Mount wide tree', 'Update dynamic styles']
 let tracing = process.argv.some(arg => arg.includes('tracing'))
 
@@ -24,6 +24,7 @@ if (tracing) {
  resolve()
  })
  })
+
  console.log('\nStarting headless browser...')
  const browser = await puppeteer.launch()
 

diff --git a/scripts/benchmarks/src/app/Button.js b/scripts/benchmarks/src/app/Button.js
@@ -1,6 +1,6 @@
 import { StyleSheet, TouchableHighlight, Text } from 'react-native'
 import React, { Component } from 'react'
-import { bool, func, string } from 'prop-types'
+import { bool, func, string, any } from 'prop-types'
 
 export default class Button extends Component<*> {
  static displayName = '@app/Button'
@@ -10,9 +10,9 @@ export default class Button extends Component<*> {
  color: string,
  disabled: bool,
  onPress: func.isRequired,
- style: TouchableHighlight.propTypes.style,
+ style: any,
  testID: string,
- textStyle: Text.propTypes.style,
+ textStyle: any,
  title: string.isRequired
  }
 

diff --git a/scripts/benchmarks/src/app/Icons.js b/scripts/benchmarks/src/app/Icons.js
@@ -1,5 +1,10 @@
 import React, { Fragment } from 'react'
-import { createElement, StyleSheet, Text } from 'react-native'
+import {
+ unstable_createElement as createElement,
+ StyleSheet,
+ Text
+} from 'react-native'
+import { any } from 'prop-types'
 
 const styles = StyleSheet.create({
  root: {
@@ -26,7 +31,7 @@ const createIcon = children => {
  children
  )
  Icon.propTypes = {
- style: Text.propTypes.style
+ style: any
  }
  return Icon
 }

diff --git a/scripts/benchmarks/src/impl.js b/scripts/benchmarks/src/impl.js
@@ -1,10 +1,15 @@
 // @flow
 import * as React from 'react'
 
-// $FlowFixMe
-let impls = require('./implementations/*/index.js')
-
-console.log(impls)
+import * as EmotionCssFunc from './implementations/emotion-css-func'
+import * as EmotionCssProp from './implementations/emotion-css-prop'
+import * as EmotionStyled from './implementations/emotion-styled'
+
+const impls = {
+ 'emotion-css-func': EmotionCssFunc,
+ 'emotion-css-prop': EmotionCssProp,
+ 'emotion-styled': EmotionStyled
+}
 
 type ComponentsType = {
  Box: React.ElementType,

diff --git a/scripts/benchmarks/src/index.html b/scripts/benchmarks/src/index.html
@@ -21,6 +21,6 @@
 
  <body>
  <div class="root"></div>
- <script src="./index.js"></script>
+ <script src="./index.js" type="module"></script>
  </body>
 </html>
diff --git a/scripts/benchmarks/src/index.js b/scripts/benchmarks/src/index.js
@@ -1,13 +1,12 @@
 // @flow
 import App from './app/App'
-import impl from './impl'
+import implementations from './impl'
 import Tree from './cases/Tree'
 import SierpinskiTriangle from './cases/SierpinskiTriangle'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-const implementations = impl
 const packageNames = Object.keys(implementations)
 
 const createTestBlock = fn => {

diff --git a/scripts/ssr-benchmarks/basic.js b/scripts/ssr-benchmarks/basic.js
@@ -1,8 +1,7 @@
-process.env.NODE_ENV = 'production'
-let React = require('react')
-let { jsx, css } = require('@emotion/react')
-let { renderToString } = require('react-dom/server')
-let { createTriangle } = require('./triangle')
+import React from 'react'
+import { jsx, css } from '@emotion/react'
+import ReactDOMServer from 'react-dom/server.js'
+import { createTriangle } from './triangle.js'
 
 let i = 500
 
@@ -29,5 +28,7 @@ let CssPropTriangle = createTriangle(({ x, y, size, color, ...props }) => {
 })
 
 while (i--) {
- renderToString(React.createElement(CssPropTriangle, { s: 100, x: 0, y: 0 }))
+ ReactDOMServer.renderToString(
+ React.createElement(CssPropTriangle, { s: 100, x: 0, y: 0 })
+ )
 }