zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-15 12:07:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update benchmark libraries

Browse Source 
Remove the slow and rarely-used libraries from the suite of implementations.
Update the remaining packages.

Close #1838
This commit is contained in:
Nicolas Gallagher
2020-12-08 12:29:33 -08:00
parent 751f7ec6db
commit e03ac45173
20 changed files with 312 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.flowconfig
View File

@@ -5,6 +5,7 @@
<PROJECT_ROOT>/.*/__tests__/.*
<PROJECT_ROOT>/packages/.*/dist/.*
<PROJECT_ROOT>/packages/docs/.*
.*/node_modules/@emotion/css/*
.*/node_modules/babel-plugin-transform-react-remove-prop-types/*
[include]

15
packages/benchmarks/package.json
View File

@@ -9,17 +9,12 @@
"dependencies": {
"aphrodite": "^2.4.0",
"classnames": "^2.2.6",
"d3-scale-chromatic": "^1.5.0",
"emotion": "^10.0.27",
"fela": "^11.0.2",
"react-fela": "^11.0.2",
"react-jss": "^10.0.4",
"d3-scale-chromatic": "^2.0.0",
"@emotion/css": "^11.0.0",
"react-jss": "^10.5.0",
"react-native-web": "0.14.9",
"reactxp": "^2.0.0",
"styled-components": "^5.0.0",
"styled-jsx": "^3.2.4",
"styletron-engine-atomic": "^1.4.4",
"styletron-react": "^5.2.6"
"styled-components": "^5.2.1",
"styled-jsx": "^3.3.2"
},
"devDependencies": {
"babel-plugin-react-native-web": "0.14.9",

21
packages/benchmarks/src/implementations/emotion/Dot.js
View File

@@ -1,16 +1,19 @@
import React from 'react';
import { css } from 'emotion';
import { css } from '@emotion/css';
const Dot = ({ size, x, y, children, color }) => (
<div
className={css(styles.root, {
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
})}
className={css([
styles.root,
{
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
}
])}
>
{children}
</div>

4
packages/benchmarks/src/implementations/emotion/View.js
View File

@@ -1,10 +1,10 @@
import { css } from 'emotion';
import { css } from '@emotion/css';
import React from 'react';
class View extends React.Component {
render() {
const { style, ...other } = this.props;
return <div {...other} className={css(viewStyle, ...style)} />;
return <div {...other} className={css([viewStyle, ...style])} />;
}
}

46
packages/benchmarks/src/implementations/react-fela/Box.js vendored
View File

@@ -1,46 +0,0 @@
import { createComponent } from 'react-fela';
import View from './View';
const Box = createComponent(
({ color, fixed = false, layout = 'column', outer = false }) => ({
...styles[`color${color}`],
...(fixed && styles.fixed),
...(layout === 'row' && styles.row),
...(outer && styles.outer)
}),
View
);
const styles = {
outer: {
alignSelf: 'flex-start',
padding: '4px'
},
row: {
flexDirection: 'row'
},
color0: {
backgroundColor: '#14171A'
},
color1: {
backgroundColor: '#AAB8C2'
},
color2: {
backgroundColor: '#E6ECF0'
},
color3: {
backgroundColor: '#FFAD1F'
},
color4: {
backgroundColor: '#F45D22'
},
color5: {
backgroundColor: '#E0245E'
},
fixed: {
width: '6px',
height: '6px'
}
};
export default Box;

27
packages/benchmarks/src/implementations/react-fela/Dot.js vendored
View File

@@ -1,27 +0,0 @@
import { createComponent } from 'react-fela';
const Dot = createComponent(
({ size, x, y, children, color }) => ({
...staticStyle,
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
}),
'div'
);
const staticStyle = {
position: 'absolute',
cursor: 'pointer',
width: 0,
height: 0,
borderColor: 'transparent',
borderStyle: 'solid',
borderTopWidth: 0,
transform: 'translate(50%, 50%)'
};
export default Dot;

18
packages/benchmarks/src/implementations/react-fela/Provider.js vendored
View File

@@ -1,18 +0,0 @@
import React from 'react';
import { createRenderer } from 'fela';
import { Provider as FelaProvider } from 'react-fela';
import View from './View';
const renderer = createRenderer();
class Provider extends React.Component {
render() {
return (
<FelaProvider renderer={renderer}>
<View>{this.props.children}</View>
</FelaProvider>
);
}
}
export default Provider;

23
packages/benchmarks/src/implementations/react-fela/View.js vendored
View File

@@ -1,23 +0,0 @@
import { createComponent } from 'react-fela';
const View = createComponent(
() => ({
alignItems: 'stretch',
borderWidth: '0px',
borderStyle: 'solid',
boxSizing: 'border-box',
display: 'flex',
flexBasis: 'auto',
flexDirection: 'column',
flexShrink: '0',
margin: '0px',
padding: '0px',
position: 'relative',
// fix flexbox bugs
minHeight: '0px',
minWidth: '0px'
}),
'div'
);
export default View;

11
packages/benchmarks/src/implementations/react-fela/index.js vendored
View File

@@ -1,11 +0,0 @@
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import View from './View';
export default {
Box,
Dot,
Provider,
View
};

48
packages/benchmarks/src/implementations/reactxp/Box.js
View File

@@ -1,48 +0,0 @@
import React from 'react';
import { Styles, View } from 'reactxp';
const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
<View
{...other}
style={[
styles[`color${color}`],
fixed && styles.fixed,
layout === 'row' && styles.row,
outer && styles.outer
]}
/>
);
const styles = {
outer: Styles.createViewStyle({
alignSelf: 'flex-start',
padding: 4
}),
row: Styles.createViewStyle({
flexDirection: 'row'
}),
color0: Styles.createViewStyle({
backgroundColor: '#14171A'
}),
color1: Styles.createViewStyle({
backgroundColor: '#AAB8C2'
}),
color2: Styles.createViewStyle({
backgroundColor: '#E6ECF0'
}),
color3: Styles.createViewStyle({
backgroundColor: '#FFAD1F'
}),
color4: Styles.createViewStyle({
backgroundColor: '#F45D22'
}),
color5: Styles.createViewStyle({
backgroundColor: '#E0245E'
}),
fixed: Styles.createViewStyle({
width: 6,
height: 6
})
};
export default Box;

34
packages/benchmarks/src/implementations/reactxp/Dot.js
View File

@@ -1,34 +0,0 @@
import React from 'react';
import { Styles, View } from 'reactxp';
const Dot = ({ size, x, y, children, color }) => (
<View
children={children}
style={[
styles.root,
{
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
}
]}
/>
);
const styles = {
root: Styles.createViewStyle({
position: 'absolute',
cursor: 'pointer',
width: 0,
height: 0,
borderColor: 'transparent',
borderStyle: 'solid',
borderTopWidth: 0,
transform: 'translate(50%, 50%)'
})
};
export default Dot;

30
packages/benchmarks/src/implementations/reactxp/Provider.js
View File

@@ -1,30 +0,0 @@
import React from 'react';
import { object } from 'prop-types';
import { View } from 'reactxp';
class Provider extends React.Component {
/* this mock context is necessary for reactxp to work without errors… ¯\_(ツ)_/¯ */
static childContextTypes = {
focusManager: object
};
getChildContext() {
return {
focusManager: {
addFocusableComponent() {},
removeFocusableComponent() {},
restrictFocusWithin() {},
removeFocusRestriction() {},
limitFocusWithin() {},
removeFocusLimitation() {}
}
};
}
render() {
return <View style={{ overflow: 'visible' }}>{this.props.children}</View>;
}
}
export default Provider;

11
packages/benchmarks/src/implementations/reactxp/index.js
View File

@@ -1,11 +0,0 @@
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import { View } from 'reactxp';
export default {
Box,
Dot,
Provider,
View
};

8
packages/benchmarks/src/implementations/styled-components/Dot.js
View File

@@ -1,16 +1,16 @@
import styled from 'styled-components';
import View from './View';
const Dot = styled(View).attrs({
style: props => ({
const Dot = styled(View).attrs(props => ({
style: {
marginLeft: `${props.x}px`,
marginTop: `${props.y}px`,
borderRightWidth: `${props.size / 2}px`,
borderBottomWidth: `${props.size / 2}px`,
borderLeftWidth: `${props.size / 2}px`,
borderBottomColor: `${props.color}`
})
})`
}
}))`
position: absolute;
cursor: pointer;
width: 0;

46
packages/benchmarks/src/implementations/styletron-react/Box.js
View File

@@ -1,46 +0,0 @@
import { withStyle } from 'styletron-react';
import View from './View';
const Box = withStyle(
View,
({ color, fixed = false, layout = 'column', outer = false, ...other }) => ({
...styles[`color${color}`],
...(fixed && styles.fixed),
...(layout === 'row' && styles.row),
...(outer && styles.outer)
})
);
const styles = {
outer: {
alignSelf: 'flex-start',
padding: '4px'
},
row: {
flexDirection: 'row'
},
color0: {
backgroundColor: '#14171A'
},
color1: {
backgroundColor: '#AAB8C2'
},
color2: {
backgroundColor: '#E6ECF0'
},
color3: {
backgroundColor: '#FFAD1F'
},
color4: {
backgroundColor: '#F45D22'
},
color5: {
backgroundColor: '#E0245E'
},
fixed: {
width: '6px',
height: '6px'
}
};
export default Box;

24
packages/benchmarks/src/implementations/styletron-react/Dot.js
View File

@@ -1,24 +0,0 @@
import { styled } from 'styletron-react';
const Dot = styled('div', ({ size, x, y, children, color }) => ({
...staticStyle,
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
}));
const staticStyle = {
position: 'absolute',
cursor: 'pointer',
width: 0,
height: 0,
borderColor: 'transparent',
borderStyle: 'solid',
borderTopWidth: 0,
transform: 'translate(50%, 50%)'
};
export default Dot;

18
packages/benchmarks/src/implementations/styletron-react/Provider.js
View File

@@ -1,18 +0,0 @@
import React from 'react';
import { Client as Styletron } from 'styletron-engine-atomic';
import { Provider as StyletronProvider } from 'styletron-react';
import View from './View';
const styletron = new Styletron();
class Provider extends React.Component {
render() {
return (
<StyletronProvider value={styletron}>
<View>{this.props.children}</View>
</StyletronProvider>
);
}
}
export default Provider;

25
packages/benchmarks/src/implementations/styletron-react/View.js
View File

@@ -1,25 +0,0 @@
import { styled } from 'styletron-react';
const View = styled('div', ({ style }) => ({
...viewStyle,
style
}));
const viewStyle = {
alignItems: 'stretch',
borderWidth: '0px',
borderStyle: 'solid',
boxSizing: 'border-box',
display: 'flex',
flexBasis: 'auto',
flexDirection: 'column',
flexShrink: '0',
margin: '0px',
padding: '0px',
position: 'relative',
// fix flexbox bugs
minHeight: '0px',
minWidth: '0px'
};
export default View;

11
packages/benchmarks/src/implementations/styletron-react/index.js
View File

@@ -1,11 +0,0 @@
import Box from './Box';
import Dot from './Dot';
import Provider from './Provider';
import View from './View';
export default {
Box,
Dot,
Provider,
View
};

637
yarn.lock
View File

File diff suppressed because it is too large Load Diff