1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
const Benchmark = require('benchmark');
const react = require('react');const { renderToString: render } = require('react-dom/server');
const goober = require('../dist/goober.cjs');goober.setup(react.createElement);
const styled = require('styled-components').default;const styledVersion = require('styled-components/package.json').version;const emotion = require('@emotion/styled').default;const emotionVersion = require('@emotion/styled/package.json').version;
const inner = (props) => ({    opacity: props.counter > 0.5 ? 1 : 0,    '@media (min-width: 1px)': {        rule: 'all'    },    '&:hover': {        another: 1,        display: 'space'    }});const tagged = `    opacity: ${(props) => (props.counter > 0.5 ? 1 : 0)};
    @media (min-width: 1px) {        rule: all;    }
    &:hover {        another: 1;        display: space;    }`;const def = () => inner;const arr = () => (props) => [    {        opacity: 0,        '@media (min-width: 1px)': {            rule: 'all'        },        '&:hover': {            another: 1,            display: 'space'        }    },    props.counter > 0.5 && { opacity: 1 }];
function renderComponent(Foo) {    render(react.createElement(Foo, { counter: Math.random() }));}
function createSuite(name, arg) {    const suite = new Benchmark.Suite(name);    suite        .add('goober', () => {            renderComponent(goober.styled('div')(arg()));        })        .add(`styled-components@${styledVersion}`, () => {            renderComponent(styled.div(arg()));        })        .add(`emotion@${emotionVersion}`, () => {            renderComponent(emotion.div(arg()));        })        .on('start', function (e) {            console.log('\nStarting:', e.currentTarget.name);        })        .on('error', (e) => console.log(e))        .on('cycle', function (event) {            console.log('▸', String(event.target));        })        .on('complete', function () {            const fastest = this.filter('fastest').map('name')[0];            console.log('\nFastest is: ' + fastest);        })        .run();}
createSuite('styled:object', () => def());createSuite('styled:tagged', () => tagged);createSuite('styled:array', () => arr());