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

.gitignore

@@ -12,3 +12,4 @@ public/
 !playgrounds/cra/public
 .env
 .vscode
+.parcel-cache/

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",

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,
     ]
   }

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>

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",

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": {

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()
 

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
   }
 

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
 }

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,

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>

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 => {

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 })
+  )
 }