Skip to content

Commit 3c902cf

Browse files
srmagurasrmagura
authored
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
1 parent 9e82a99 commit 3c902cf

File tree

17 files changed

+2539
-865
lines changed

17 files changed

+2539
-865
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ public/
1212
!playgrounds/cra/public
1313
.env
1414
.vscode
15+
.parcel-cache/

‎package.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"test:watch": "jest --watch",
1616
"size": "bundlesize",
1717
"lint": "eslint . --fix",
18-
"benchmark": "cd scripts/benchmarks && yarn benchmark",
18+
"benchmark": "cd scripts/benchmarks && yarn build && yarn run-benchmark",
1919
"start:site": "cd site && yarn start:site",
2020
"build:site": "cd site && yarn build:site",
2121
"flow": "flow",
@@ -205,7 +205,6 @@
205205
"babel-plugin-codegen": "^3.0.0",
206206
"babel-plugin-fix-dce-for-classes-with-statics": "^0.1.0",
207207
"babel-plugin-jsx-pragmatic": "^1.0.2",
208-
"babel-plugin-react-native-web": "^0.9.6",
209208
"babel-plugin-transform-define": "^1.3.0",
210209
"benchmark": "^2.1.4",
211210
"bolt-check": "^0.3.0",
@@ -247,7 +246,6 @@
247246
"opencollective": "^1.0.3",
248247
"polished": "^1.2.1",
249248
"prettier": "^2.3.0",
250-
"puppeteer": "^1.6.0",
251249
"raf": "^3.4.0",
252250
"react": "16.14.0",
253251
"react-art": "^16.5.2",
@@ -256,7 +254,6 @@
256254
"react-icons": "^2.2.7",
257255
"react-live": "1.10.0",
258256
"react-native": "^0.63.2",
259-
"react-native-web": "0.13.12",
260257
"react-primitives": "^0.8.1",
261258
"react-router-dom": "^4.2.2",
262259
"react-scripts": "1.1.5",

‎packages/native/test/__snapshots__/native-styled.test.js.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`Emotion native styled primitive should work with \`withComponent\` 1`]
55
decor="hotpink"
66
style={
77
Array [
8-
77,
8+
92,
99
undefined,
1010
]
1111
}
@@ -19,7 +19,7 @@ exports[`Emotion native styled should pass props in withComponent 1`] = `
1919
color="green"
2020
style={
2121
Array [
22-
81,
22+
96,
2323
undefined,
2424
]
2525
}
@@ -31,7 +31,7 @@ exports[`Emotion native styled should pass props in withComponent 2`] = `
3131
color="hotpink"
3232
style={
3333
Array [
34-
82,
34+
97,
3535
undefined,
3636
]
3737
}
@@ -49,7 +49,7 @@ exports[`Emotion native styled should render <Image /> 1`] = `
4949
}
5050
style={
5151
Array [
52-
83,
52+
98,
5353
undefined,
5454
]
5555
}
@@ -60,7 +60,7 @@ exports[`Emotion native styled should render primitive with style prop 1`] = `
6060
<Text
6161
style={
6262
Array [
63-
77,
63+
92,
6464
Object {
6565
"padding": 10,
6666
},
@@ -76,7 +76,7 @@ exports[`Emotion native styled should render styles correctly from all nested st
7676
backgroundColor="blue"
7777
style={
7878
Array [
79-
86,
79+
101,
8080
undefined,
8181
]
8282
}
@@ -90,7 +90,7 @@ exports[`Emotion native styled should render the primitive on changing the props
9090
decor="hotpink"
9191
style={
9292
Array [
93-
76,
93+
91,
9494
undefined,
9595
]
9696
}
@@ -104,7 +104,7 @@ exports[`Emotion native styled should render the primitive when styles applied u
104104
back="red"
105105
style={
106106
Array [
107-
74,
107+
89,
108108
Object {
109109
"fontSize": 40,
110110
},
@@ -119,7 +119,7 @@ exports[`Emotion native styled should style any other component 1`] = `
119119
<Text
120120
style={
121121
Array [
122-
77,
122+
92,
123123
undefined,
124124
]
125125
}
@@ -132,8 +132,8 @@ exports[`Emotion native styled should work with StyleSheet.create API 1`] = `
132132
<Text
133133
style={
134134
Array [
135-
79,
136-
78,
135+
94,
136+
93,
137137
]
138138
}
139139
>
@@ -145,7 +145,7 @@ exports[`Emotion native styled should work with theming from @emotion/react 1`]
145145
<Text
146146
style={
147147
Array [
148-
75,
148+
90,
149149
undefined,
150150
]
151151
}

‎packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ exports[`Emotion primitives custom shouldForwardProp works 1`] = `
44
<div
55
className="css-text-901oao r-color-185hjl9"
66
dir="auto"
7-
onClick={[Function]}
87
>
98
Emotion
109
</div>
@@ -14,7 +13,6 @@ exports[`Emotion primitives primitive should work with \`withComponent\` 1`] = `
1413
<div
1514
className="css-text-901oao r-color-185hjl9"
1615
dir="auto"
17-
onClick={[Function]}
1816
>
1917
Mike
2018
</div>
@@ -30,7 +28,6 @@ exports[`Emotion primitives should pass props in withComponent 2`] = `
3028
<div
3129
className="css-text-901oao r-backgroundColor-173gl9r"
3230
dir="auto"
33-
onClick={[Function]}
3431
/>
3532
`;
3633

@@ -56,6 +53,7 @@ exports[`Emotion primitives should render <Image /> 1`] = `
5653
>
5754
<div
5855
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"
56+
suppressHydrationWarning={true}
5957
/>
6058
</div>
6159
`;
@@ -64,7 +62,6 @@ exports[`Emotion primitives should render primitive with style prop 1`] = `
6462
<div
6563
className="css-text-901oao r-color-185hjl9"
6664
dir="auto"
67-
onClick={[Function]}
6865
style={
6966
Object {
7067
"paddingBottom": "10px",
@@ -82,7 +79,6 @@ exports[`Emotion primitives should render the primitive on changing the props 1`
8279
<div
8380
className="css-text-901oao r-color-185hjl9 r-paddingBottom-k8qxaj r-paddingLeft-b5h31w r-paddingRight-1ah4tor r-paddingTop-1knelpx"
8481
dir="auto"
85-
onClick={[Function]}
8682
>
8783
Emotion Primitives
8884
</div>
@@ -92,7 +88,6 @@ exports[`Emotion primitives should render the primitive when styles applied usin
9288
<div
9389
className="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
9490
dir="auto"
95-
onClick={[Function]}
9691
style={
9792
Object {
9893
"fontSize": "40px",
@@ -107,7 +102,6 @@ exports[`Emotion primitives should style any other component 1`] = `
107102
<div
108103
className="css-text-901oao r-color-185hjl9"
109104
dir="auto"
110-
onClick={[Function]}
111105
>
112106
Hello World
113107
</div>
@@ -129,7 +123,6 @@ exports[`Emotion primitives should work with StyleSheet.create API 1`] = `
129123
<div
130124
className="css-text-901oao r-color-howw7u r-fontSize-10x49cs"
131125
dir="auto"
132-
onClick={[Function]}
133126
>
134127
Emotion Primitives
135128
</div>
@@ -139,7 +132,6 @@ exports[`Emotion primitives should work with theming from @emotion/react 1`] = `
139132
<div
140133
className="css-text-901oao r-color-1hxtt4r"
141134
dir="auto"
142-
onClick={[Function]}
143135
>
144136
Hello World
145137
</div>

‎packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ exports[`should render the primitive when styles applied using object style nota
44
<div
55
className="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
66
dir="auto"
7-
onClick={[Function]}
87
style={
98
Object {
109
"fontSize": "40px",

‎scripts/benchmarks/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111
"dependencies": {
1212
"@babel/core": "^7.13.10",
1313
"@emotion/babel-plugin": "^11.0.0",
14-
"babel-plugin-react-native-web": "^0.9.6",
15-
"d3-scale-chromatic": "^1.3.0",
16-
"http-server": "^0.11.1",
17-
"parcel": "^1.10.3",
18-
"puppeteer": "^1.6.0",
14+
"babel-plugin-react-native-web": "^0.17.5",
15+
"d3-scale-chromatic": "^3.0.0",
16+
"http-server": "^14.0.0",
17+
"parcel": "^2.0.1",
18+
"puppeteer": "^11.0.0",
1919
"react": "16.14.0",
2020
"react-dom": "16.14.0",
21-
"react-native-web": "0.13.12",
21+
"react-native-web": "0.17.5",
2222
"stats-analysis": "^2.0.0"
2323
},
2424
"alias": {

‎scripts/benchmarks/run.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const path = require('path')
44
const puppeteer = require('puppeteer')
55
const { createServer } = require('http-server')
66

7-
let libraries = ['emotion-css-func', 'emotion-css-prop']
7+
let libraries = ['emotion-css-func', 'emotion-css-prop', 'emotion-styled']
88
let tests = ['Mount deep tree', 'Mount wide tree', 'Update dynamic styles']
99
let tracing = process.argv.some(arg => arg.includes('tracing'))
1010

@@ -24,6 +24,7 @@ if (tracing) {
2424
resolve()
2525
})
2626
})
27+
2728
console.log('\nStarting headless browser...')
2829
const browser = await puppeteer.launch()
2930

‎scripts/benchmarks/src/app/Button.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { StyleSheet, TouchableHighlight, Text } from 'react-native'
22
import React, { Component } from 'react'
3-
import { bool, func, string } from 'prop-types'
3+
import { bool, func, string, any } from 'prop-types'
44

55
export default class Button extends Component<*> {
66
static displayName = '@app/Button'
@@ -10,9 +10,9 @@ export default class Button extends Component<*> {
1010
color: string,
1111
disabled: bool,
1212
onPress: func.isRequired,
13-
style: TouchableHighlight.propTypes.style,
13+
style: any,
1414
testID: string,
15-
textStyle: Text.propTypes.style,
15+
textStyle: any,
1616
title: string.isRequired
1717
}
1818

‎scripts/benchmarks/src/app/Icons.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import React, { Fragment } from 'react'
2-
import { createElement, StyleSheet, Text } from 'react-native'
2+
import {
3+
unstable_createElement as createElement,
4+
StyleSheet,
5+
Text
6+
} from 'react-native'
7+
import { any } from 'prop-types'
38

49
const styles = StyleSheet.create({
510
root: {
@@ -26,7 +31,7 @@ const createIcon = children => {
2631
children
2732
)
2833
Icon.propTypes = {
29-
style: Text.propTypes.style
34+
style: any
3035
}
3136
return Icon
3237
}

‎scripts/benchmarks/src/impl.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
// @flow
22
import * as React from 'react'
33

4-
// $FlowFixMe
5-
let impls = require('./implementations/*/index.js')
6-
7-
console.log(impls)
4+
import * as EmotionCssFunc from './implementations/emotion-css-func'
5+
import * as EmotionCssProp from './implementations/emotion-css-prop'
6+
import * as EmotionStyled from './implementations/emotion-styled'
7+
8+
const impls = {
9+
'emotion-css-func': EmotionCssFunc,
10+
'emotion-css-prop': EmotionCssProp,
11+
'emotion-styled': EmotionStyled
12+
}
813

914
type ComponentsType = {
1015
Box: React.ElementType,

‎scripts/benchmarks/src/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@
2121

2222
<body>
2323
<div class="root"></div>
24-
<script src="./index.js"></script>
24+
<script src="./index.js" type="module"></script>
2525
</body>
2626
</html>

‎scripts/benchmarks/src/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
// @flow
22
import App from './app/App'
3-
import impl from './impl'
3+
import implementations from './impl'
44
import Tree from './cases/Tree'
55
import SierpinskiTriangle from './cases/SierpinskiTriangle'
66

77
import React from 'react'
88
import ReactDOM from 'react-dom'
99

10-
const implementations = impl
1110
const packageNames = Object.keys(implementations)
1211

1312
const createTestBlock = fn => {

‎scripts/ssr-benchmarks/basic.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
process.env.NODE_ENV = 'production'
2-
let React = require('react')
3-
let { jsx, css } = require('@emotion/react')
4-
let { renderToString } = require('react-dom/server')
5-
let { createTriangle } = require('./triangle')
1+
import React from 'react'
2+
import { jsx, css } from '@emotion/react'
3+
import ReactDOMServer from 'react-dom/server.js'
4+
import { createTriangle } from './triangle.js'
65

76
let i = 500
87

@@ -29,5 +28,7 @@ let CssPropTriangle = createTriangle(({ x, y, size, color, ...props }) => {
2928
})
3029

3130
while (i--) {
32-
renderToString(React.createElement(CssPropTriangle, { s: 100, x: 0, y: 0 }))
31+
ReactDOMServer.renderToString(
32+
React.createElement(CssPropTriangle, { s: 100, x: 0, y: 0 })
33+
)
3334
}

0 commit comments

Comments
 (0)