├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── RESULT.md ├── img.gif ├── lerna.json ├── package-lock.json ├── package.json ├── packages ├── benchmarks-utils │ ├── .babelrc │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.js │ ├── webpack.config.js │ └── yarn.lock ├── benchmarks │ ├── aphrodite │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── cxs │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── emotion │ │ ├── css-mode │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ ├── decouple │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ ├── extract-static │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.emotion.css │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ └── simple │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ │ ├── package-lock.json │ │ │ ├── package.json │ │ │ └── yarn.lock │ ├── fela │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── glam │ │ ├── inline-style │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── Table.js.css │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ └── simple │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── Table.js.css │ │ │ ├── index.html │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ ├── glamorous │ │ ├── dynamic-styles │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ └── glamor-css │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ ├── merge-styles │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── package-lock.json │ │ └── package.json │ ├── nano-css │ │ ├── drule │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ └── package.json │ │ ├── dsheet │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ └── package.json │ │ ├── jsx │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ └── package.json │ │ ├── put │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ └── package.json │ │ ├── rule │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ └── package.json │ │ ├── sheet │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ └── package.json │ │ ├── styled-css │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ └── package.json │ │ └── styled │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ │ └── package.json │ ├── radium │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── react-css │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.css │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ └── package.json │ ├── react-inline-styles │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ └── package.json │ ├── react-jss │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── react-native-web │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── react │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ └── package.json │ ├── rockey │ │ ├── rockey-inline │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ ├── rockey-speedy │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ └── rockey │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ ├── styled-components │ │ ├── decouple-cell │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ ├── inline-style │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ └── simple │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ ├── styled-jss │ │ ├── styled-jss-v2 │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ ├── styled-jss │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ ├── w-o-plugins-v2 │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ └── w-o-plugins │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ ├── styled-jsx │ │ ├── dynamic │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ │ ├── Table.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ └── inline-styles │ │ │ ├── .babelrc │ │ │ ├── README.md │ │ │ ├── client │ │ │ ├── Table.js │ │ │ ├── index.html │ │ │ └── index.js │ │ │ ├── package.json │ │ │ └── yarn.lock │ └── styletron │ │ ├── .babelrc │ │ ├── README.md │ │ ├── client │ │ ├── Table.js │ │ ├── index.html │ │ └── index.js │ │ ├── package.json │ │ └── yarn.lock ├── dev-tasks │ ├── package.json │ ├── src │ │ ├── build.js │ │ ├── devServer.js │ │ └── webpack.config.js │ └── yarn.lock └── tests │ ├── index.js │ ├── package.json │ └── yarn.lock └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # testing 5 | /coverage 6 | 7 | # production 8 | build 9 | lib 10 | static 11 | etc 12 | 13 | # misc 14 | .DS_Store 15 | npm-debug.log* 16 | lerna-debug.log* 17 | 18 | # IDE 19 | .idea/* 20 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | language: node_js 3 | node_js: 4 | - "7.9" 5 | 6 | services: 7 | - docker 8 | 9 | before_install: 10 | - docker pull justinribeiro/chrome-headless 11 | - docker run -d --net host justinribeiro/chrome-headless 12 | - curl -o- -L https://yarnpkg.com/install.sh | bash 13 | - export PATH=$HOME/.yarn/bin:$PATH 14 | - docker ps -a 15 | - export BRANCH=$(if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then echo $TRAVIS_BRANCH; else echo $TRAVIS_PULL_REQUEST_BRANCH; fi) 16 | - echo "TRAVIS_BRANCH=$TRAVIS_BRANCH, PR=$PR, BRANCH=$BRANCH" 17 | 18 | install: 19 | - yarn add lerna 20 | - lerna bootstrap --npm-client=yarn 21 | - yarn 22 | 23 | cache: 24 | yarn: true 25 | 26 | script: 27 | - npm run benchmark 28 | 29 | after_success: 30 | - git config user.name "A-gambit" 31 | - git config user.email "a.gambit.gregory@gmail.com" 32 | - git config user.password $GIT_TOKEN 33 | - git remote add upstream "https://$GIT_TOKEN@github.com/A-gambit/CSS-IN-JS-Benchmarks.git" 34 | - git fetch upstream 35 | - git reset upstream/$BRANCH 36 | - git add RESULT.md 37 | - git commit -m 'Travis CI Automaticaly Benchmarks Update [ci skip]' 38 | - git push -q upstream HEAD:$BRANCH 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS in JS Benchmarks 2 | 3 | ## Big Table 4 | 5 | ![gif](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/img.gif) 6 | 7 | Big Table examples, use: 8 | - react + css 9 | - aphrodite 10 | - glamorous 11 | - glam 12 | - fela 13 | - react-jss 14 | - radium 15 | - react-native-web 16 | - rockey 17 | - styled-components 18 | - styled-jsx 19 | - styletron 20 | - etc 21 | 22 | Average results are [here](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md). 23 | 24 | New demos and benchmarks will be soon :) 25 | 26 | ## Contribution 27 | 28 | Here is a little contributing guild: 29 | 30 | - Use `node` version `^7.9` (i.e. use `7.9` or newer, but not as new as `8`) 31 | - Install `lerna` and `yarn` (optional) 32 | - `lerna bootstrap` or `lerna bootstrap --npm-client=yarn` - install deps in packages 33 | - `npm i` 34 | - `lerna run build` - make builds for all packages 35 | 36 | 1. Create an appropriate folder for your CSS in JS new implementation. Use [react](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/tree/master/packages/big-table/react) as example of boilerplate. 37 | 2. Add description for your CSS in JS in package.json. [Example](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/packages/big-table/aphrodite/package.json#L33-L37) 38 | 3. Add your solution for [Table.js](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/packages/big-table/react/client/Table.js) file. 39 | 4. Run benchmarks: `npm run benchmark`. To tun tests for specific packageor - `npm run benchmark -- rockey styled-jss radium` 40 | 41 | 42 | Add your favorite CSS in JS implementation! 43 | Your contributions and suggestions are heartily welcome. =^.^= 44 | -------------------------------------------------------------------------------- /RESULT.md: -------------------------------------------------------------------------------- 1 | ## Results: 2 | *sorted by rerender time* 3 | 4 | Solution | Use CSS | Use Inline-Styles | Mount Time (ms) | Rerender time (ms) 5 | :--- | :--- | :--- | :--- | :--- 6 | [react (without styles)](https://github.com/facebook/react) | - | - | 18.25 | 45.01 7 | [nano-css (using put() interface)](https://github.com/streamich/nano-css/blob/master/docs/put.md) | + | + | 29.6 | 51.15 8 | [react (with inline-styles)](https://github.com/facebook/react) | - | + | 30.5 | 51.42 9 | [nano-css (using rule() interface)](https://github.com/streamich/nano-css/blob/master/docs/rule.md) | + | + | 31.25 | 53.49 10 | [cxs](https://github.com/jxnblk/cxs) | + | + | 34.9 | 54.84 11 | [styled-jsx-inline-styles](https://github.com/zeit/styled-jsx) | + | + | 37.25 | 55.42 12 | [nano-css (using jsx() interface)](https://github.com/streamich/nano-css/blob/master/docs/jsx.md) | + | + | 42.87 | 55.93 13 | [emotion-css-mode](https://github.com/emotion-js/emotion) | + | + | 34.43 | 56.05 14 | [react-css](https://github.com/facebook/react) | + | + | 35.48 | 58.44 15 | [aphrodite](https://github.com/Khan/aphrodite) | + | + | 42.7 | 59.3 16 | [nano-css (using styled() interface)](https://github.com/streamich/nano-css/blob/master/docs/styled.md) | + | + | 44 | 59.79 17 | [nano-css (using drule() interface)](https://github.com/streamich/nano-css/blob/master/docs/drule.md) | + | - | 35.6 | 62.18 18 | [glam-inline-style](https://github.com/threepointone/glam) | + | + | 34.6 | 62.88 19 | [nano-css (using dsheet() interface)](https://github.com/streamich/nano-css/blob/master/docs/dsheet.md) | + | + | 37.7 | 64.43 20 | [styled-jss-w-o-plugins-v2](https://github.com/cssinjs/styled-jss) | + | - | 105.05 | 70.02 21 | [styled-jss-w-o-plugins](https://github.com/cssinjs/styled-jss) | + | - | 100.23 | 71.64 22 | [styled-components-inline-styles](https://github.com/styled-components/styled-components/tree/v2) | + | + | 78.4 | 71.82 23 | [rockey-inline](https://github.com/tuchk4/rockey) | + | + | 81.7 | 73.16 24 | [nano-css (using styled() interface CSS-only)](https://github.com/streamich/nano-css/blob/master/docs/styled.md) | + | - | 65.9 | 74.23 25 | [glam-simple](https://github.com/threepointone/glam) | + | - | 41.33 | 74.63 26 | [styled-jss-v2](https://github.com/cssinjs/styled-jss) | + | - | 135.57 | 78.05 27 | [styled-jss](https://github.com/cssinjs/styled-jss) | + | - | 134.45 | 79.81 28 | [fela](https://github.com/rofrischmann/fela/) | + | - | 55.3 | 81.53 29 | [nano-css (using sheet() interface)](https://github.com/streamich/nano-css/blob/master/docs/sheet.md) | + | + | 32.7 | 82.43 30 | [emotion-simple](https://github.com/emotion-js/emotion) | + | - | 108.75 | 84.71 31 | [emotion-extract-static](https://github.com/emotion-js/emotion) | + | + | 120.85 | 84.82 32 | [emotion-decouple](https://github.com/emotion-js/emotion) | + | - | 107.45 | 85.83 33 | [radium](https://github.com/FormidableLabs/radium) | - | + | 80.8 | 89.52 34 | [styletron](https://github.com/rtsao/styletron) | + | - | 86.43 | 92.42 35 | [merge-styles](https://github.com/OfficeDev/office-ui-fabric-react/packages/merge-styles) | + | - | 85.08 | 96.36 36 | [styled-components](https://github.com/styled-components/styled-components/tree/v2) | + | - | 146.8 | 96.71 37 | [styled-components-decouple-cell](https://github.com/styled-components/styled-components/tree/v2) | + | - | 187.1 | 109.68 38 | [styled-jsx-dynamic](https://github.com/zeit/styled-jsx) | + | - | 149.23 | 115.61 39 | [react-native-web](https://github.com/necolas/react-native-web) | + | + | 167.75 | 122.86 40 | [rockey-speedy](https://github.com/tuchk4/rockey) | + | - | 90.8 | 155.07 41 | [rockey](https://github.com/tuchk4/rockey) | + | - | 171.6 | 218.18 42 | [react-jss](https://github.com/cssinjs/react-jss) | + | - | 161.8 | 256.31 43 | [glamorous](https://github.com/paypal/glamorous) | + | - | 217.15 | 273.26 44 | [glamorous-glamour-css](https://github.com/paypal/glamorous) | + | - | 221.8 | 366.03 45 | -------------------------------------------------------------------------------- /img.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/streamich/CSS-IN-JS-Benchmarks/915521495b3a67de024cf97b6cf070f4e02ad20c/img.gif -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-rc.4", 3 | "packages": [ 4 | "packages/tests", 5 | "packages/benchmarks-utils", 6 | "packages/dev-tasks", 7 | "packages/benchmarks/fela", 8 | "packages/benchmarks/nano-css/put", 9 | "packages/benchmarks/nano-css/rule", 10 | "packages/benchmarks/nano-css/drule", 11 | "packages/benchmarks/nano-css/sheet", 12 | "packages/benchmarks/nano-css/dsheet", 13 | "packages/benchmarks/nano-css/jsx", 14 | "packages/benchmarks/nano-css/styled", 15 | "packages/benchmarks/nano-css/styled-css", 16 | "packages/benchmarks/react-native-web", 17 | "packages/benchmarks/rockey/rockey", 18 | "packages/benchmarks/rockey/rockey-inline", 19 | "packages/benchmarks/rockey/rockey-speedy", 20 | "packages/benchmarks/styled-jss/styled-jss", 21 | "packages/benchmarks/styled-jss/styled-jss-v2", 22 | "packages/benchmarks/styled-jss/w-o-plugins", 23 | "packages/benchmarks/styled-jss/w-o-plugins-v2", 24 | "packages/benchmarks/styled-components/decouple-cell", 25 | "packages/benchmarks/styled-components/inline-style", 26 | "packages/benchmarks/styled-components/simple", 27 | "packages/benchmarks/aphrodite", 28 | "packages/benchmarks/cxs", 29 | "packages/benchmarks/emotion/simple", 30 | "packages/benchmarks/emotion/extract-static", 31 | "packages/benchmarks/emotion/css-mode", 32 | "packages/benchmarks/emotion/decouple", 33 | "packages/benchmarks/glam/inline-style", 34 | "packages/benchmarks/glam/simple", 35 | "packages/benchmarks/glamorous/dynamic-styles", 36 | "packages/benchmarks/glamorous/glamor-css", 37 | "packages/benchmarks/merge-styles", 38 | "packages/benchmarks/radium", 39 | "packages/benchmarks/react", 40 | "packages/benchmarks/react-inline-styles", 41 | "packages/benchmarks/react-css", 42 | "packages/benchmarks/react-jss", 43 | "packages/benchmarks/styled-jsx/inline-styles", 44 | "packages/benchmarks/styled-jsx/dynamic", 45 | "packages/benchmarks/styletron" 46 | ], 47 | "version": "1.0.0" 48 | } 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel": "6.5.2", 4 | "babel-core": "6.22.1", 5 | "babel-eslint": "7.1.1", 6 | "babel-loader": "6.2.10", 7 | "babel-plugin-add-module-exports": "0.1.2", 8 | "babel-plugin-transform-async-to-generator": "6.24.1", 9 | "babel-plugin-transform-class-properties": "6.23.0", 10 | "babel-plugin-transform-regenerator": "6.24.1", 11 | "babel-plugin-transform-runtime": "6.23.0", 12 | "babel-preset-es2015": "6.22.0", 13 | "babel-preset-react": "6.23.0", 14 | "babel-preset-react-hmre": "1.1.1", 15 | "babel-runtime": "6.23.0", 16 | "connect": "3.6.1", 17 | "cross-env": "3.1.4", 18 | "css-loader": "0.28.0", 19 | "file-loader": "0.10.1", 20 | "husky": "0.13.3", 21 | "lerna": "2.0.0-rc.4", 22 | "lighthouse": "1.6.5", 23 | "lint-staged": "3.4.0", 24 | "prettier": "1.2.2", 25 | "react": "^15.5.4", 26 | "react-dom": "^15.5.4", 27 | "serve-static": "1.12.1", 28 | "shelljs": "0.7.7", 29 | "style-loader": "0.16.1", 30 | "webpack": "2.2.1", 31 | "webpack-dev-server": "2.4.1", 32 | "yargs": "6.6.0" 33 | }, 34 | "scripts": { 35 | "benchmark": "node ./packages/tests/", 36 | "format": "find . -name '*.js' | grep -v node_modules | xargs prettier --trailing-comma es5 --single-quote --write", 37 | "precommit": "lint-staged" 38 | }, 39 | "lint-staged": { 40 | "*.js": [ 41 | "prettier --trailing-comma es5 --single-quote --write", 42 | "git add" 43 | ] 44 | }, 45 | "dependencies": { 46 | "babel-plugin-emotion": "^8.0.12" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/benchmarks-utils/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "plugins": [ 7 | "transform-class-properties", 8 | "transform-async-to-generator", 9 | "transform-regenerator", 10 | "transform-runtime" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /packages/benchmarks-utils/README.md: -------------------------------------------------------------------------------- 1 | # Big Table Utils 2 | 3 | ## Available Scripts 4 | 5 | ### `npm run build` 6 | 7 | Builds the app for production to the `build` folder.
8 | It correctly bundles React in production mode and optimizes the build for the best performance.
9 | The build is minified and the filenames include the hashes. 10 | -------------------------------------------------------------------------------- /packages/benchmarks-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "benchmarks-utils", 3 | "version": "1.0.0", 4 | "main": "./lib/index.js", 5 | "scripts": { 6 | "postinstall": "webpack --hide-modules --env build" 7 | }, 8 | "license": "MIT", 9 | "devDependencies": { 10 | "babel": "6.5.2", 11 | "babel-core": "6.22.1", 12 | "babel-eslint": "7.1.1", 13 | "babel-loader": "6.2.10", 14 | "babel-plugin-add-module-exports": "0.1.2", 15 | "babel-plugin-transform-async-to-generator": "6.24.1", 16 | "babel-plugin-transform-class-properties": "6.23.0", 17 | "babel-plugin-transform-regenerator": "6.24.1", 18 | "babel-plugin-transform-runtime": "6.23.0", 19 | "babel-preset-es2015": "6.22.0", 20 | "babel-preset-react": "6.23.0", 21 | "react": "15.4.2", 22 | "webpack": "2.2.1", 23 | "yargs": "6.6.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/benchmarks-utils/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function getTable(max = 30) { 4 | let table = []; 5 | for (let i = 0; i < max; i++) { 6 | table[i] = [1]; 7 | for (let j = 1; j < max; j++) { 8 | const next = table[i][j - 1] - Math.random() * table[i][j - 1] / 10; 9 | table[i].push(next.toFixed(4)); 10 | } 11 | } 12 | return table; 13 | } 14 | 15 | function getUniqueSize(table) { 16 | let set = new Set(); 17 | table.forEach(row => row.forEach(x => set.add(x))); 18 | return set.size; 19 | } 20 | 21 | function toPercent(x) { 22 | return (x * 100).toFixed(2).toString() + '%'; 23 | } 24 | 25 | async function runTestRerender() { 26 | const input = document.querySelector('input'); 27 | for (let i = 0; i < 10; i++) { 28 | await new Promise(resolve => { 29 | performance.mark('startRerender' + i); 30 | input.click(); 31 | 32 | setTimeout(() => { 33 | setTimeout(() => { 34 | performance.mark('endRerender' + i); 35 | performance.measure( 36 | 'measureRerender' + i, 37 | 'startRerender' + i, 38 | 'endRerender' + i 39 | ); 40 | resolve(); 41 | }, 0); 42 | }, 0); 43 | }); 44 | } 45 | } 46 | 47 | function willMount() { 48 | if (document.location.search.includes('test=true')) { 49 | performance.mark('startMount'); 50 | } 51 | } 52 | 53 | function didMount() { 54 | if (!document.location.search.includes('test=true')) { 55 | return; 56 | } 57 | performance.mark('endMount'); 58 | performance.measure('measureMount', 'startMount', 'endMount'); 59 | 60 | if (document.location.search.includes('butch=true')) { 61 | return runTestRerender(); 62 | } 63 | 64 | const input = document.querySelector('input'); 65 | performance.mark('startRerender'); 66 | input.click(); 67 | setTimeout(() => { 68 | performance.mark('endRerender'); 69 | performance.measure('measureRerender', 'startRerender', 'endRerender'); 70 | }, 0); 71 | } 72 | 73 | export default class App extends React.Component { 74 | constructor(props) { 75 | super(props); 76 | this.state = { 77 | table: getTable(), 78 | }; 79 | } 80 | 81 | componentWillMount() { 82 | willMount(); 83 | } 84 | 85 | componentDidMount() { 86 | didMount(); 87 | } 88 | 89 | handleClick = () => { 90 | this.setState({ table: getTable() }); 91 | }; 92 | 93 | render() { 94 | const { table: Table } = this.props; 95 | return ( 96 |
97 |
98 | 99 | {' '} 100 | {getUniqueSize(this.state.table)} unique cells 101 |
102 | 103 | 104 | ); 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /packages/benchmarks-utils/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | const sourcePath = path.join(__dirname, './src'); 5 | const libraryName = 'index'; 6 | 7 | let outputFile = libraryName + '.js'; 8 | 9 | const config = { 10 | entry: __dirname + '/src/index.js', 11 | devtool: 'source-map', 12 | output: { 13 | path: __dirname + '/lib', 14 | filename: outputFile, 15 | library: libraryName, 16 | libraryTarget: 'umd', 17 | umdNamedDefine: true, 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /(\.jsx|\.js)$/, 23 | loader: 'babel-loader', 24 | exclude: /(node_modules|bower_components)/, 25 | }, 26 | ], 27 | }, 28 | }; 29 | 30 | module.exports = config; 31 | -------------------------------------------------------------------------------- /packages/benchmarks/aphrodite/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/aphrodite/README.md: -------------------------------------------------------------------------------- 1 | # Aphrodite Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/aphrodite/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, css } from 'aphrodite'; 3 | 4 | const styles = StyleSheet.create({ 5 | table: { 6 | display: 'table', 7 | marginTop: 10, 8 | }, 9 | row: { 10 | display: 'table-row', 11 | }, 12 | cell: { 13 | display: 'table-cell', 14 | padding: 10, 15 | }, 16 | }); 17 | 18 | const Table = ({ table, toPercent }) => ( 19 |
20 | {table.map((row, i) => ( 21 |
22 | {row.map((x, j) => ( 23 |
28 | {toPercent(x)} 29 |
30 | ))} 31 |
32 | ))} 33 |
34 | ); 35 | 36 | export default Table; 37 | -------------------------------------------------------------------------------- /packages/benchmarks/aphrodite/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Aphrodite 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/aphrodite/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/aphrodite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-aphrodite-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package aphrodite", 7 | "build": "devBuild --package aphrodite" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "aphrodite": "1.2.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "aphrodite", 19 | "useInlineStyles": true, 20 | "useCSS": true, 21 | "link": "https://github.com/Khan/aphrodite" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/aphrodite/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | aphrodite@1.2.0: 6 | version "1.2.0" 7 | resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.0.tgz#c2f30bd1cdf6a550f4a29a0f1cf22ed10e825764" 8 | dependencies: 9 | asap "^2.0.3" 10 | inline-style-prefixer "^3.0.1" 11 | string-hash "^1.1.3" 12 | 13 | asap@^2.0.3: 14 | version "2.0.5" 15 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 16 | 17 | bowser@^1.6.0: 18 | version "1.6.1" 19 | resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.1.tgz#9157e9498f456e937173a2918f3b2161e5353eb3" 20 | 21 | css-in-js-utils@^1.0.3: 22 | version "1.0.3" 23 | resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215" 24 | dependencies: 25 | hyphenate-style-name "^1.0.2" 26 | 27 | hyphenate-style-name@^1.0.2: 28 | version "1.0.2" 29 | resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b" 30 | 31 | inline-style-prefixer@^3.0.1: 32 | version "3.0.2" 33 | resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.2.tgz#989865e0c5de7a946acbea71e16e02741efe0dd7" 34 | dependencies: 35 | bowser "^1.6.0" 36 | css-in-js-utils "^1.0.3" 37 | 38 | string-hash@^1.1.3: 39 | version "1.1.3" 40 | resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" 41 | -------------------------------------------------------------------------------- /packages/benchmarks/cxs/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/cxs/README.md: -------------------------------------------------------------------------------- 1 | # CXS Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. 19 | -------------------------------------------------------------------------------- /packages/benchmarks/cxs/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import cxs from 'cxs'; 3 | 4 | const cxsTable = cxs({ 5 | display: 'table', 6 | marginTop: 10, 7 | }); 8 | 9 | const cxsRow = cxs({ 10 | display: 'table-row', 11 | }); 12 | 13 | const cxsCell = cxs({ 14 | display: 'table-cell', 15 | padding: 10, 16 | }); 17 | 18 | const Table = ({ table, toPercent }) => ( 19 |
20 | {table.map((row, i) => ( 21 |
22 | {row.map((x, j) => ( 23 |
28 | {toPercent(x)} 29 |
30 | ))} 31 |
32 | ))} 33 |
34 | ); 35 | 36 | export default Table; 37 | -------------------------------------------------------------------------------- /packages/benchmarks/cxs/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CXS 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/cxs/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/cxs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-cxs-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package cxs", 7 | "build": "devBuild --package cxs" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "cxs": "3.0.4" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "cxs", 19 | "useInlineStyles": true, 20 | "useCSS": true, 21 | "link": "https://github.com/jxnblk/cxs" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/cxs/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@~2.0.3: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | babel-runtime@^6.18.0: 10 | version "6.23.0" 11 | resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b" 12 | dependencies: 13 | core-js "^2.4.0" 14 | regenerator-runtime "^0.10.0" 15 | 16 | core-js@^1.0.0: 17 | version "1.2.7" 18 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 19 | 20 | core-js@^2.4.0: 21 | version "2.4.1" 22 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e" 23 | 24 | cxs@3.0.4: 25 | version "3.0.4" 26 | resolved "https://registry.yarnpkg.com/cxs/-/cxs-3.0.4.tgz#2e1a1537742931a53dbe3157afbf121da62df797" 27 | dependencies: 28 | glamor "^2.17.14" 29 | 30 | encoding@^0.1.11: 31 | version "0.1.12" 32 | resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" 33 | dependencies: 34 | iconv-lite "~0.4.13" 35 | 36 | fbjs@^0.8.8: 37 | version "0.8.12" 38 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" 39 | dependencies: 40 | core-js "^1.0.0" 41 | isomorphic-fetch "^2.1.1" 42 | loose-envify "^1.0.0" 43 | object-assign "^4.1.0" 44 | promise "^7.1.1" 45 | setimmediate "^1.0.5" 46 | ua-parser-js "^0.7.9" 47 | 48 | glamor@^2.17.14: 49 | version "2.20.24" 50 | resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.24.tgz#a299af2eec687322634ba38e4a0854d8743d2041" 51 | dependencies: 52 | babel-runtime "^6.18.0" 53 | fbjs "^0.8.8" 54 | object-assign "^4.1.0" 55 | 56 | iconv-lite@~0.4.13: 57 | version "0.4.16" 58 | resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.16.tgz#65de3beeb39e2960d67f049f1634ffcbcde9014b" 59 | 60 | is-stream@^1.0.1: 61 | version "1.1.0" 62 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" 63 | 64 | isomorphic-fetch@^2.1.1: 65 | version "2.2.1" 66 | resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" 67 | dependencies: 68 | node-fetch "^1.0.1" 69 | whatwg-fetch ">=0.10.0" 70 | 71 | js-tokens@^3.0.0: 72 | version "3.0.1" 73 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 74 | 75 | loose-envify@^1.0.0: 76 | version "1.3.1" 77 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 78 | dependencies: 79 | js-tokens "^3.0.0" 80 | 81 | node-fetch@^1.0.1: 82 | version "1.6.3" 83 | resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04" 84 | dependencies: 85 | encoding "^0.1.11" 86 | is-stream "^1.0.1" 87 | 88 | object-assign@^4.1.0: 89 | version "4.1.1" 90 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 91 | 92 | promise@^7.1.1: 93 | version "7.1.1" 94 | resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf" 95 | dependencies: 96 | asap "~2.0.3" 97 | 98 | regenerator-runtime@^0.10.0: 99 | version "0.10.5" 100 | resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" 101 | 102 | setimmediate@^1.0.5: 103 | version "1.0.5" 104 | resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" 105 | 106 | ua-parser-js@^0.7.9: 107 | version "0.7.12" 108 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" 109 | 110 | whatwg-fetch@>=0.10.0: 111 | version "2.0.3" 112 | resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" 113 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/css-mode/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | ["emotion"] 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/css-mode/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/emotion/css-mode/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { css } from 'react-emotion'; 3 | 4 | const tableClass = css` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const rowClass = css` 10 | display: table-row; 11 | `; 12 | 13 | const cellClass = css` 14 | display: table-cell; 15 | padding: 10px; 16 | `; 17 | 18 | const Table = ({ table, toPercent }) => ( 19 |
20 | {table.map((row, i) => ( 21 |
22 | {row.map((x, j) => ( 23 |
28 | {toPercent(x)} 29 |
30 | ))} 31 |
32 | ))} 33 |
34 | ); 35 | 36 | export default Table; 37 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/css-mode/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emotion - css-mode 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/css-mode/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/css-mode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-emotion-css-mode-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package emotion/css-mode", 7 | "build": "devBuild --package emotion/css-mode" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "@arr/foreach": "^0.1.0", 13 | "@arr/map": "^0.1.0", 14 | "emotion": "^8.0.12", 15 | "babel-plugin-emotion": "^8.0.12", 16 | "react-emotion": "^8.0.12" 17 | }, 18 | "devDependencies": { 19 | "dev-tasks": "1.0.0" 20 | }, 21 | "benchmarks": { 22 | "name": "emotion-css-mode", 23 | "useInlineStyles": true, 24 | "useCSS": true, 25 | "link": "https://github.com/emotion-js/emotion" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/decouple/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | ["emotion"] 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/decouple/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/emotion/decouple/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { css } from 'react-emotion'; 3 | 4 | const Table = styled('div')` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = styled('div')` 10 | display: table-row; 11 | `; 12 | 13 | const CellDefault = styled('div')` 14 | display: table-cell; 15 | padding: 10px; 16 | `; 17 | 18 | const Cell = styled(CellDefault)` 19 | background: rgba(74, 174, 53, ${props => props.value}); 20 | `; 21 | 22 | export default ({ table, toPercent }) => ( 23 |
24 | {table.map((row, i) => ( 25 | 26 | {row.map((x, j) => ( 27 | {toPercent(x)} 28 | ))} 29 | 30 | ))} 31 |
32 | ); 33 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/decouple/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emotion 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/decouple/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/decouple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-emotion-decouple-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package emotion/decouple", 7 | "build": "devBuild --package emotion/decouple" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "emotion": "^8.0.12", 13 | "babel-plugin-emotion": "^8.0.12", 14 | "react-emotion": "^8.0.12" 15 | }, 16 | "devDependencies": { 17 | "dev-tasks": "1.0.0" 18 | }, 19 | "benchmarks": { 20 | "name": "emotion-decouple", 21 | "useCSS": true, 22 | "link": "https://github.com/emotion-js/emotion" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/extract-static/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | ["emotion", { "extractStatic": true }] 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/extract-static/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/emotion/extract-static/client/Table.emotion.css: -------------------------------------------------------------------------------- 1 | .css-1wvwg7w{display:table;margin-top:10px;} 2 | .css-13immaf{display:table-row;} -------------------------------------------------------------------------------- /packages/benchmarks/emotion/extract-static/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { css } from 'react-emotion'; 3 | 4 | const Table = styled('div')` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = styled('div')` 10 | display: table-row; 11 | `; 12 | 13 | const Cell = styled('div')` 14 | display: table-cell; 15 | padding: 10px; 16 | background: rgba(74, 174, 53, ${({ alpha }) => alpha}) 17 | `; 18 | 19 | export default ({ table, toPercent }) => ( 20 | 21 | {table.map((row, i) => ( 22 | 23 | {row.map((alpha, j) => ( 24 | 25 | {toPercent(alpha)} 26 | 27 | ))} 28 | 29 | ))} 30 |
31 | ); 32 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/extract-static/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emotion - extract-static 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/extract-static/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/extract-static/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-emotion-extract-static-mode-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package emotion/extract-static", 7 | "build": "devBuild --package emotion/extract-static" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "@arr/foreach": "^0.1.0", 12 | "@arr/map": "^0.1.0", 13 | "benchmarks-utils": "1.0.0", 14 | "emotion": "^8.0.12", 15 | "babel-plugin-emotion": "^8.0.12", 16 | "react-emotion": "^8.0.12", 17 | "theming": "^1.0.1" 18 | }, 19 | "devDependencies": { 20 | "dev-tasks": "1.0.0" 21 | }, 22 | "benchmarks": { 23 | "name": "emotion-extract-static", 24 | "useInlineStyles": true, 25 | "useCSS": true, 26 | "link": "https://github.com/emotion-js/emotion" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/simple/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | ["emotion"] 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/simple/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/emotion/simple/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled, { css } from 'react-emotion'; 3 | 4 | const Table = styled('div')` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = styled('div')` 10 | display: table-row; 11 | `; 12 | 13 | const Cell = styled('div')` 14 | display: table-cell; 15 | padding: 10px; 16 | background: rgba(74, 174, 53, ${props => props.value}); 17 | `; 18 | 19 | export default ({ table, toPercent }) => ( 20 | 21 | {table.map((row, i) => ( 22 | 23 | {row.map((x, j) => ( 24 | {toPercent(x)} 25 | ))} 26 | 27 | ))} 28 |
29 | ); 30 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/simple/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | emotion 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/simple/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/emotion/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-emotion-simple-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package emotion/simple", 7 | "build": "devBuild --package emotion/simple" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "emotion": "^8.0.12", 13 | "babel-plugin-emotion": "^8.0.12", 14 | "react-emotion": "^8.0.12" 15 | }, 16 | "devDependencies": { 17 | "dev-tasks": "1.0.0" 18 | }, 19 | "benchmarks": { 20 | "name": "emotion-simple", 21 | "useCSS": true, 22 | "link": "https://github.com/emotion-js/emotion" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/benchmarks/fela/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/fela/README.md: -------------------------------------------------------------------------------- 1 | # Aphrodite Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/fela/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRenderer } from 'fela'; 3 | import { Provider, createComponent } from 'react-fela'; 4 | 5 | const Table = createComponent(props => ({ 6 | display: 'table', 7 | 'margin-top': '10px', 8 | })); 9 | 10 | const Row = createComponent(props => ({ 11 | display: 'table-row', 12 | })); 13 | 14 | const Cell = createComponent(props => ({ 15 | display: 'table-cell', 16 | padding: '10px', 17 | background: `rgba(74, 174, 53, ${props.value})`, 18 | })); 19 | 20 | const renderer = createRenderer(); 21 | const mountNode = document.createElement('style'); 22 | document.head.appendChild(mountNode); 23 | 24 | export default ({ table, toPercent }) => ( 25 | 26 | 27 | {table.map((row, i) => ( 28 | 29 | {row.map((x, j) => ( 30 | {toPercent(x)} 31 | ))} 32 | 33 | ))} 34 |
35 | 36 | ); 37 | -------------------------------------------------------------------------------- /packages/benchmarks/fela/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fela 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/fela/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/fela/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-fela-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package fela", 7 | "build": "devBuild --package fela" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "fela": "4.3.3", 13 | "react-fela": "4.3.3" 14 | }, 15 | "devDependencies": { 16 | "dev-tasks": "1.0.0" 17 | }, 18 | "benchmarks": { 19 | "name": "fela", 20 | "useCSS": true, 21 | "link": "https://github.com/rofrischmann/fela/" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/fela/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@~2.0.3: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | core-js@^1.0.0: 10 | version "1.2.7" 11 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 12 | 13 | css-in-js-utils@^1.0.3: 14 | version "1.0.3" 15 | resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215" 16 | dependencies: 17 | hyphenate-style-name "^1.0.2" 18 | 19 | encoding@^0.1.11: 20 | version "0.1.12" 21 | resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" 22 | dependencies: 23 | iconv-lite "~0.4.13" 24 | 25 | fbjs@^0.8.9: 26 | version "0.8.12" 27 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" 28 | dependencies: 29 | core-js "^1.0.0" 30 | isomorphic-fetch "^2.1.1" 31 | loose-envify "^1.0.0" 32 | object-assign "^4.1.0" 33 | promise "^7.1.1" 34 | setimmediate "^1.0.5" 35 | ua-parser-js "^0.7.9" 36 | 37 | fela@4.3.3: 38 | version "4.3.3" 39 | resolved "https://registry.yarnpkg.com/fela/-/fela-4.3.3.tgz#9cb31a169553d5198f60f447ee30863edd2135f6" 40 | dependencies: 41 | css-in-js-utils "^1.0.3" 42 | 43 | hyphenate-style-name@^1.0.2: 44 | version "1.0.2" 45 | resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b" 46 | 47 | iconv-lite@~0.4.13: 48 | version "0.4.16" 49 | resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.16.tgz#65de3beeb39e2960d67f049f1634ffcbcde9014b" 50 | 51 | invariant@^2.2.1: 52 | version "2.2.2" 53 | resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" 54 | dependencies: 55 | loose-envify "^1.0.0" 56 | 57 | is-stream@^1.0.1: 58 | version "1.1.0" 59 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" 60 | 61 | isomorphic-fetch@^2.1.1: 62 | version "2.2.1" 63 | resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" 64 | dependencies: 65 | node-fetch "^1.0.1" 66 | whatwg-fetch ">=0.10.0" 67 | 68 | js-tokens@^3.0.0: 69 | version "3.0.1" 70 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 71 | 72 | loose-envify@^1.0.0: 73 | version "1.3.1" 74 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 75 | dependencies: 76 | js-tokens "^3.0.0" 77 | 78 | node-fetch@^1.0.1: 79 | version "1.6.3" 80 | resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04" 81 | dependencies: 82 | encoding "^0.1.11" 83 | is-stream "^1.0.1" 84 | 85 | object-assign@^4.1.0: 86 | version "4.1.1" 87 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 88 | 89 | promise@^7.1.1: 90 | version "7.1.1" 91 | resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf" 92 | dependencies: 93 | asap "~2.0.3" 94 | 95 | prop-types@^15.5.8: 96 | version "15.5.8" 97 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" 98 | dependencies: 99 | fbjs "^0.8.9" 100 | 101 | react-broadcast@0.1.2: 102 | version "0.1.2" 103 | resolved "https://registry.yarnpkg.com/react-broadcast/-/react-broadcast-0.1.2.tgz#950de63578a2af399a396067a617af7402182330" 104 | dependencies: 105 | invariant "^2.2.1" 106 | 107 | react-fela@4.3.3: 108 | version "4.3.3" 109 | resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-4.3.3.tgz#7fdd93c2178b4d276b70601d0d7a8cf3c22212a2" 110 | dependencies: 111 | prop-types "^15.5.8" 112 | react-broadcast "0.1.2" 113 | 114 | setimmediate@^1.0.5: 115 | version "1.0.5" 116 | resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" 117 | 118 | ua-parser-js@^0.7.9: 119 | version "0.7.12" 120 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" 121 | 122 | whatwg-fetch@>=0.10.0: 123 | version "2.0.3" 124 | resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" 125 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | "@threepointone/glam/babel" 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import css from '@threepointone/glam'; 3 | 4 | const tableClass = css` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const rowClass = css` 10 | display: table-row; 11 | `; 12 | 13 | const cellClass = css` 14 | display: table-cell; 15 | padding: 10px; 16 | `; 17 | 18 | const Table = ({ table, toPercent }) => ( 19 |
20 | {table.map((row, i) => ( 21 |
22 | {row.map((x, j) => ( 23 |
28 | {toPercent(x)} 29 |
30 | ))} 31 |
32 | ))} 33 |
34 | ); 35 | 36 | export default Table; 37 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/client/Table.js.css: -------------------------------------------------------------------------------- 1 | /* do not edit this file */ 2 | .css-1wvwg7w { display: table; 3 | margin-top: 10px; } 4 | .css-13immaf { display: table-row; } 5 | .css-th8btg { display: table-cell; 6 | padding: 10px; } -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Glam + Inline Styles 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-glam-inlint-style-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package glam/inline-style", 7 | "build": "devBuild --package glam/inline-style" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "@threepointone/glam": "1.0.6" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "glam-inline-style", 19 | "useInlineStyles": true, 20 | "useCSS": true, 21 | "link": "https://github.com/threepointone/glam" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/inline-style/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@threepointone/glam@1.0.6": 6 | version "1.0.6" 7 | resolved "https://registry.yarnpkg.com/@threepointone/glam/-/glam-1.0.6.tgz#0aba87c7f46429c240b2969c4ae51077cd576490" 8 | dependencies: 9 | babylon "^6.17.0" 10 | touch "^1.0.0" 11 | 12 | abbrev@1: 13 | version "1.1.0" 14 | resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f" 15 | 16 | babylon@^6.17.0: 17 | version "6.17.0" 18 | resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.0.tgz#37da948878488b9c4e3c4038893fa3314b3fc932" 19 | 20 | nopt@~1.0.10: 21 | version "1.0.10" 22 | resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" 23 | dependencies: 24 | abbrev "1" 25 | 26 | touch@^1.0.0: 27 | version "1.0.0" 28 | resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de" 29 | dependencies: 30 | nopt "~1.0.10" 31 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | "@threepointone/glam/babel" 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import css from '@threepointone/glam'; 3 | 4 | const tableClass = css` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const rowClass = css` 10 | display: table-row; 11 | `; 12 | 13 | const cellClass = css` 14 | display: table-cell; 15 | padding: 10px; 16 | `; 17 | 18 | const Table = ({ table, toPercent }) => ( 19 |
20 | {table.map((row, i) => ( 21 |
22 | {row.map((x, j) => { 23 | const cellBgClass = css`background: rgba(74, 174, 53, ${x})`; 24 | return ( 25 |
26 | {toPercent(x)} 27 |
28 | ); 29 | })} 30 |
31 | ))} 32 |
33 | ); 34 | 35 | export default Table; 36 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/client/Table.js.css: -------------------------------------------------------------------------------- 1 | /* do not edit this file */ 2 | .css-1wvwg7w { display: table; 3 | margin-top: 10px; } 4 | .css-13immaf { display: table-row; } 5 | .css-th8btg { display: table-cell; 6 | padding: 10px; } 7 | .css-1qbcqul { background: rgba(74, 174, 53, var(--css-1qbcqul-0)) } -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Glam 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-glam-simple-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package glam/simple", 7 | "build": "devBuild --package glam/simple" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "@threepointone/glam": "1.0.6" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "glam-simple", 19 | "useCSS": true, 20 | "link": "https://github.com/threepointone/glam" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/benchmarks/glam/simple/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@threepointone/glam@1.0.6": 6 | version "1.0.6" 7 | resolved "https://registry.yarnpkg.com/@threepointone/glam/-/glam-1.0.6.tgz#0aba87c7f46429c240b2969c4ae51077cd576490" 8 | dependencies: 9 | babylon "^6.17.0" 10 | touch "^1.0.0" 11 | 12 | abbrev@1: 13 | version "1.1.0" 14 | resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f" 15 | 16 | babylon@^6.17.0: 17 | version "6.17.0" 18 | resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.0.tgz#37da948878488b9c4e3c4038893fa3314b3fc932" 19 | 20 | nopt@~1.0.10: 21 | version "1.0.10" 22 | resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" 23 | dependencies: 24 | abbrev "1" 25 | 26 | touch@^1.0.0: 27 | version "1.0.0" 28 | resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de" 29 | dependencies: 30 | nopt "~1.0.10" 31 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/dynamic-styles/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/dynamic-styles/README.md: -------------------------------------------------------------------------------- 1 | # Glamourous Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/dynamic-styles/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import glamorous from 'glamorous'; 3 | 4 | const Table = glamorous.div({ 5 | display: 'table', 6 | marginTop: 10, 7 | }); 8 | 9 | const Row = glamorous.div({ 10 | display: 'table-row', 11 | }); 12 | 13 | const Cell = glamorous.div( 14 | { 15 | display: 'table-cell', 16 | padding: '10px', 17 | }, 18 | props => ({ 19 | background: `rgba(74, 174, 53, ${props.value})`, 20 | }) 21 | ); 22 | 23 | export default ({ table, toPercent }) => ( 24 | 25 | {table.map((row, i) => ( 26 | 27 | {row.map((x, j) => ( 28 | {toPercent(x)} 29 | ))} 30 | 31 | ))} 32 |
33 | ); 34 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/dynamic-styles/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gamorous 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/dynamic-styles/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/dynamic-styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-glamourous-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package glamorous/dynamic-styles", 7 | "build": "devBuild --package glamorous/dynamic-styles" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "glamor": "2.20.24", 13 | "glamorous": "1.0.1" 14 | }, 15 | "devDependencies": { 16 | "dev-tasks": "1.0.0" 17 | }, 18 | "benchmarks": { 19 | "name": "glamorous", 20 | "useCSS": true, 21 | "link": "https://github.com/paypal/glamorous" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/dynamic-styles/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@~2.0.3: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | babel-runtime@^6.18.0: 10 | version "6.23.0" 11 | resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b" 12 | dependencies: 13 | core-js "^2.4.0" 14 | regenerator-runtime "^0.10.0" 15 | 16 | core-js@^1.0.0: 17 | version "1.2.7" 18 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 19 | 20 | core-js@^2.4.0: 21 | version "2.4.1" 22 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e" 23 | 24 | encoding@^0.1.11: 25 | version "0.1.12" 26 | resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" 27 | dependencies: 28 | iconv-lite "~0.4.13" 29 | 30 | fbjs@^0.8.8: 31 | version "0.8.12" 32 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" 33 | dependencies: 34 | core-js "^1.0.0" 35 | isomorphic-fetch "^2.1.1" 36 | loose-envify "^1.0.0" 37 | object-assign "^4.1.0" 38 | promise "^7.1.1" 39 | setimmediate "^1.0.5" 40 | ua-parser-js "^0.7.9" 41 | 42 | glamor@2.20.24: 43 | version "2.20.24" 44 | resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.24.tgz#a299af2eec687322634ba38e4a0854d8743d2041" 45 | dependencies: 46 | babel-runtime "^6.18.0" 47 | fbjs "^0.8.8" 48 | object-assign "^4.1.0" 49 | 50 | glamorous@1.0.1: 51 | version "1.0.1" 52 | resolved "https://registry.yarnpkg.com/glamorous/-/glamorous-1.0.1.tgz#df69bd5de7bd39ba4e57c693bb552b8b09cfd995" 53 | 54 | iconv-lite@~0.4.13: 55 | version "0.4.16" 56 | resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.16.tgz#65de3beeb39e2960d67f049f1634ffcbcde9014b" 57 | 58 | is-stream@^1.0.1: 59 | version "1.1.0" 60 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" 61 | 62 | isomorphic-fetch@^2.1.1: 63 | version "2.2.1" 64 | resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" 65 | dependencies: 66 | node-fetch "^1.0.1" 67 | whatwg-fetch ">=0.10.0" 68 | 69 | js-tokens@^3.0.0: 70 | version "3.0.1" 71 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 72 | 73 | loose-envify@^1.0.0: 74 | version "1.3.1" 75 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 76 | dependencies: 77 | js-tokens "^3.0.0" 78 | 79 | node-fetch@^1.0.1: 80 | version "1.6.3" 81 | resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04" 82 | dependencies: 83 | encoding "^0.1.11" 84 | is-stream "^1.0.1" 85 | 86 | object-assign@^4.1.0: 87 | version "4.1.1" 88 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 89 | 90 | promise@^7.1.1: 91 | version "7.1.1" 92 | resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf" 93 | dependencies: 94 | asap "~2.0.3" 95 | 96 | regenerator-runtime@^0.10.0: 97 | version "0.10.5" 98 | resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" 99 | 100 | setimmediate@^1.0.5: 101 | version "1.0.5" 102 | resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" 103 | 104 | ua-parser-js@^0.7.9: 105 | version "0.7.12" 106 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" 107 | 108 | whatwg-fetch@>=0.10.0: 109 | version "2.0.3" 110 | resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" 111 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/glamor-css/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/glamor-css/README.md: -------------------------------------------------------------------------------- 1 | # Glamourous + Glamour Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/glamor-css/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import glamorous from 'glamorous'; 3 | import { css } from 'glamor'; 4 | 5 | const Table = glamorous.div({ 6 | display: 'table', 7 | marginTop: 10, 8 | }); 9 | 10 | const Row = glamorous.div({ 11 | display: 'table-row', 12 | }); 13 | 14 | const Cell = glamorous.div({ 15 | display: 'table-cell', 16 | padding: '10px', 17 | }); 18 | 19 | export default ({ table, toPercent }) => ( 20 | 21 | {table.map((row, i) => ( 22 | 23 | {row.map((x, j) => { 24 | const style = css({ background: `rgba(74, 174, 53, ${x})` }); 25 | return ( 26 | 27 | {toPercent(x)} 28 | 29 | ); 30 | })} 31 | 32 | ))} 33 |
34 | ); 35 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/glamor-css/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gamorous 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/glamor-css/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/glamor-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-glamour-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package glamorous/glamor-css", 7 | "build": "devBuild --package glamorous/glamor-css" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "glamor": "2.20.24", 13 | "glamorous": "1.0.1" 14 | }, 15 | "devDependencies": { 16 | "dev-tasks": "1.0.0" 17 | }, 18 | "benchmarks": { 19 | "name": "glamorous-glamour-css", 20 | "useCSS": true, 21 | "link": "https://github.com/paypal/glamorous" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/glamorous/glamor-css/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@~2.0.3: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | babel-runtime@^6.18.0: 10 | version "6.23.0" 11 | resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b" 12 | dependencies: 13 | core-js "^2.4.0" 14 | regenerator-runtime "^0.10.0" 15 | 16 | core-js@^1.0.0: 17 | version "1.2.7" 18 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 19 | 20 | core-js@^2.4.0: 21 | version "2.4.1" 22 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e" 23 | 24 | encoding@^0.1.11: 25 | version "0.1.12" 26 | resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" 27 | dependencies: 28 | iconv-lite "~0.4.13" 29 | 30 | fbjs@^0.8.8: 31 | version "0.8.12" 32 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" 33 | dependencies: 34 | core-js "^1.0.0" 35 | isomorphic-fetch "^2.1.1" 36 | loose-envify "^1.0.0" 37 | object-assign "^4.1.0" 38 | promise "^7.1.1" 39 | setimmediate "^1.0.5" 40 | ua-parser-js "^0.7.9" 41 | 42 | glamor@2.20.24: 43 | version "2.20.24" 44 | resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.24.tgz#a299af2eec687322634ba38e4a0854d8743d2041" 45 | dependencies: 46 | babel-runtime "^6.18.0" 47 | fbjs "^0.8.8" 48 | object-assign "^4.1.0" 49 | 50 | glamorous@1.0.1: 51 | version "1.0.1" 52 | resolved "https://registry.yarnpkg.com/glamorous/-/glamorous-1.0.1.tgz#df69bd5de7bd39ba4e57c693bb552b8b09cfd995" 53 | 54 | iconv-lite@~0.4.13: 55 | version "0.4.16" 56 | resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.16.tgz#65de3beeb39e2960d67f049f1634ffcbcde9014b" 57 | 58 | is-stream@^1.0.1: 59 | version "1.1.0" 60 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" 61 | 62 | isomorphic-fetch@^2.1.1: 63 | version "2.2.1" 64 | resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" 65 | dependencies: 66 | node-fetch "^1.0.1" 67 | whatwg-fetch ">=0.10.0" 68 | 69 | js-tokens@^3.0.0: 70 | version "3.0.1" 71 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 72 | 73 | loose-envify@^1.0.0: 74 | version "1.3.1" 75 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 76 | dependencies: 77 | js-tokens "^3.0.0" 78 | 79 | node-fetch@^1.0.1: 80 | version "1.6.3" 81 | resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04" 82 | dependencies: 83 | encoding "^0.1.11" 84 | is-stream "^1.0.1" 85 | 86 | object-assign@^4.1.0: 87 | version "4.1.1" 88 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 89 | 90 | promise@^7.1.1: 91 | version "7.1.1" 92 | resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf" 93 | dependencies: 94 | asap "~2.0.3" 95 | 96 | regenerator-runtime@^0.10.0: 97 | version "0.10.5" 98 | resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" 99 | 100 | setimmediate@^1.0.5: 101 | version "1.0.5" 102 | resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" 103 | 104 | ua-parser-js@^0.7.9: 105 | version "0.7.12" 106 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" 107 | 108 | whatwg-fetch@>=0.10.0: 109 | version "2.0.3" 110 | resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" 111 | -------------------------------------------------------------------------------- /packages/benchmarks/merge-styles/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/merge-styles/README.md: -------------------------------------------------------------------------------- 1 | # merge-styles Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/merge-styles/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mergeStyles } from '@uifabric/merge-styles'; 3 | 4 | const TableClassName = mergeStyles({ 5 | display: 'table', 6 | marginTop: 10, 7 | }); 8 | 9 | const RowClassName = mergeStyles({ 10 | display: 'table-row', 11 | }); 12 | 13 | const CellClassName = mergeStyles({ 14 | display: 'table-cell', 15 | padding: '10px', 16 | }); 17 | 18 | export default ({ table, toPercent }) => ( 19 |
20 | {table.map((row, i) => ( 21 |
22 | {row.map((x, j) => { 23 | const dynamicClassName = mergeStyles({ 24 | background: `rgba(74, 174, 53, ${x})`, 25 | }); 26 | return ( 27 |
31 | {toPercent(x)} 32 |
33 | ); 34 | })} 35 |
36 | ))} 37 |
38 | ); 39 | -------------------------------------------------------------------------------- /packages/benchmarks/merge-styles/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | merge-styles 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/merge-styles/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/merge-styles/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-merge-styles-table", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@uifabric/merge-styles": { 8 | "version": "5.12.2", 9 | "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.12.2.tgz", 10 | "integrity": "sha512-PVUu9IIa6voT5YvZAfd3GJvHZpTyA6m3WCAqSjCvNScGJN1EdQ9YQjfJpC1FWsUNYcXIBQqLl7YiuAE+aCz99A==", 11 | "requires": { 12 | "tslib": "1.9.0" 13 | } 14 | }, 15 | "tslib": { 16 | "version": "1.9.0", 17 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz", 18 | "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==" 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/benchmarks/merge-styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-merge-styles-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package merge-styles", 7 | "build": "devBuild --package merge-styles" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "@uifabric/merge-styles": "5.12.2" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "merge-styles", 19 | "useCSS": true, 20 | "link": "https://github.com/OfficeDev/office-ui-fabric-react/packages/merge-styles" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/drule/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/drule/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/drule/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | import { addon as addonCache } from 'nano-css/addon/cache'; 5 | import { addon as addonDrule } from 'nano-css/addon/drule'; 6 | 7 | const nano = create(); 8 | 9 | addonRule(nano); 10 | addonCache(nano); 11 | addonDrule(nano); 12 | 13 | const { drule } = nano; 14 | 15 | const classNameTable = drule({ 16 | display: 'table', 17 | marginTop: '10px', 18 | }); 19 | 20 | const classNameRow = drule({ 21 | display: 'table-row', 22 | }); 23 | 24 | const classNameCell = drule({ 25 | display: 'table-cell', 26 | padding: '10px', 27 | }); 28 | 29 | const Table = ({ table, toPercent }) => ( 30 |
31 | {table.map((row, i) => ( 32 |
33 | {row.map((x, j) => ( 34 |
40 | {toPercent(x)} 41 |
42 | ))} 43 |
44 | ))} 45 |
46 | ); 47 | 48 | export default Table; 49 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/drule/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using drule() interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/drule/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/drule/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-drule-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/drule", 7 | "build": "devBuild --package nano-css/drule" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using drule() interface)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/drule.md", 20 | "useInlineStyles": false, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/dsheet/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/dsheet/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/dsheet/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | import { addon as addonCache } from 'nano-css/addon/cache'; 5 | import { addon as addonSheet } from 'nano-css/addon/sheet'; 6 | import { addon as addonDsheet } from 'nano-css/addon/dsheet'; 7 | 8 | const nano = create(); 9 | 10 | addonRule(nano); 11 | addonCache(nano); 12 | addonSheet(nano); 13 | addonDsheet(nano); 14 | 15 | const { dsheet } = nano; 16 | 17 | const styles = dsheet( 18 | { 19 | table: { 20 | display: 'table', 21 | marginTop: '10px', 22 | }, 23 | row: { 24 | display: 'table-row', 25 | }, 26 | cell: { 27 | display: 'table-cell', 28 | padding: '10px', 29 | }, 30 | }, 31 | 'Table' 32 | ); 33 | 34 | const Table = ({ table, toPercent }) => ( 35 |
36 | {table.map((row, i) => ( 37 |
38 | {row.map((x, j) => ( 39 |
45 | {toPercent(x)} 46 |
47 | ))} 48 |
49 | ))} 50 |
51 | ); 52 | 53 | export default Table; 54 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/dsheet/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using dsheet() interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/dsheet/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/dsheet/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-dsheet-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/dsheet", 7 | "build": "devBuild --package nano-css/dsheet" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using dsheet() interface)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/dsheet.md", 20 | "useInlineStyles": true, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/jsx/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/jsx/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/jsx/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | import { addon as addonCache } from 'nano-css/addon/cache'; 5 | import { addon as addonJsx } from 'nano-css/addon/jsx'; 6 | 7 | const nano = create({ 8 | h: React.createElement, 9 | }); 10 | 11 | addonRule(nano); 12 | addonCache(nano); 13 | addonJsx(nano); 14 | 15 | const { jsx } = nano; 16 | 17 | const Table_ = jsx('div', { 18 | display: 'table', 19 | marginTop: '10px', 20 | }); 21 | 22 | const Row = jsx('div', { 23 | display: 'table-row', 24 | }); 25 | 26 | const Cell = jsx('div', { 27 | display: 'table-cell', 28 | padding: '10px', 29 | }); 30 | 31 | const Table = ({ table, toPercent }) => ( 32 | 33 | {table.map((row, i) => ( 34 | 35 | {row.map((x, j) => ( 36 | 42 | {toPercent(x)} 43 | 44 | ))} 45 | 46 | ))} 47 | 48 | ); 49 | 50 | export default Table; 51 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/jsx/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using jsx() interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/jsx/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/jsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-jsx-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/jsx", 7 | "build": "devBuild --package nano-css/jsx" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using jsx() interface)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/jsx.md", 20 | "useInlineStyles": true, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/put/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/put/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/put/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | 5 | const nano = create(); 6 | 7 | addonRule(nano); 8 | 9 | const { put } = nano; 10 | 11 | put('.table', { 12 | display: 'table', 13 | marginTop: '10px', 14 | }); 15 | 16 | put('.row', { 17 | display: 'table-row', 18 | }); 19 | 20 | put('.cell', { 21 | display: 'table-cell', 22 | padding: '10px', 23 | }); 24 | 25 | const Table = ({ table, toPercent }) => ( 26 |
27 | {table.map((row, i) => ( 28 |
29 | {row.map((x, j) => ( 30 |
37 | {toPercent(x)} 38 |
39 | ))} 40 |
41 | ))} 42 |
43 | ); 44 | 45 | export default Table; 46 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/put/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using put() interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/put/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/put/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-put-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/put", 7 | "build": "devBuild --package nano-css/put" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using put() interface)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/put.md", 20 | "useInlineStyles": true, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/rule/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/rule/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/rule/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | 5 | const nano = create(); 6 | 7 | addonRule(nano); 8 | 9 | const { rule } = nano; 10 | 11 | const classNameTable = rule({ 12 | display: 'table', 13 | marginTop: '10px', 14 | }); 15 | 16 | const classNameRow = rule({ 17 | display: 'table-row', 18 | }); 19 | 20 | const classNameCell = rule({ 21 | display: 'table-cell', 22 | padding: '10px', 23 | }); 24 | 25 | const Table = ({ table, toPercent }) => ( 26 |
27 | {table.map((row, i) => ( 28 |
29 | {row.map((x, j) => ( 30 |
37 | {toPercent(x)} 38 |
39 | ))} 40 |
41 | ))} 42 |
43 | ); 44 | 45 | export default Table; 46 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/rule/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using rule() interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/rule/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/rule/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-rule-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/rule", 7 | "build": "devBuild --package nano-css/rule" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using rule() interface)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/rule.md", 20 | "useInlineStyles": true, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/sheet/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/sheet/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/sheet/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | import { addon as addonSheet } from 'nano-css/addon/sheet'; 5 | 6 | const nano = create(); 7 | 8 | addonRule(nano); 9 | addonSheet(nano); 10 | 11 | const { sheet } = nano; 12 | 13 | const styles = sheet( 14 | { 15 | table: { 16 | display: 'table', 17 | marginTop: '10px', 18 | }, 19 | row: { 20 | display: 'table-row', 21 | }, 22 | cell: { 23 | display: 'table-cell', 24 | padding: '10px', 25 | }, 26 | }, 27 | 'Table' 28 | ); 29 | 30 | const Table = ({ table, toPercent }) => ( 31 |
32 | {table.map((row, i) => ( 33 |
34 | {row.map((x, j) => ( 35 |
42 | {toPercent(x)} 43 |
44 | ))} 45 |
46 | ))} 47 |
48 | ); 49 | 50 | export default Table; 51 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/sheet/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using sheet() interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/sheet/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/sheet/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-sheet-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/sheet", 7 | "build": "devBuild --package nano-css/sheet" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using sheet() interface)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/sheet.md", 20 | "useInlineStyles": true, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled-css/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled-css/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled-css/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | import { addon as addonCache } from 'nano-css/addon/cache'; 5 | import { addon as addonJsx } from 'nano-css/addon/jsx'; 6 | import { addon as addonStyle } from 'nano-css/addon/style'; 7 | import { addon as addonStyled } from 'nano-css/addon/styled'; 8 | 9 | const nano = create({ 10 | h: React.createElement, 11 | }); 12 | 13 | addonRule(nano); 14 | addonCache(nano); 15 | addonJsx(nano); 16 | addonStyle(nano); 17 | addonStyled(nano); 18 | 19 | const { styled } = nano; 20 | 21 | const Table_ = styled.div({ 22 | display: 'table', 23 | marginTop: '10px', 24 | }); 25 | 26 | const Row = styled.div({ 27 | display: 'table-row', 28 | }); 29 | 30 | const Cell = styled.div( 31 | { 32 | display: 'table-cell', 33 | padding: '10px', 34 | }, 35 | ({ x }) => ({ 36 | backgroundColor: 'rgba(74,174,53,' + x + ')', 37 | }) 38 | ); 39 | 40 | const Table = ({ table, toPercent }) => ( 41 | 42 | {table.map((row, i) => ( 43 | 44 | {row.map((x, j) => ( 45 | 46 | {toPercent(x)} 47 | 48 | ))} 49 | 50 | ))} 51 | 52 | ); 53 | 54 | export default Table; 55 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled-css/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using styled()() CSS-only interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled-css/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-styled-css-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/styled-css", 7 | "build": "devBuild --package nano-css/styled-css" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using styled() interface CSS-only)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/styled.md", 20 | "useInlineStyles": false, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create } from 'nano-css'; 3 | import { addon as addonRule } from 'nano-css/addon/rule'; 4 | import { addon as addonCache } from 'nano-css/addon/cache'; 5 | import { addon as addonJsx } from 'nano-css/addon/jsx'; 6 | import { addon as addonStyle } from 'nano-css/addon/style'; 7 | import { addon as addonStyled } from 'nano-css/addon/styled'; 8 | 9 | const nano = create({ 10 | h: React.createElement, 11 | }); 12 | 13 | addonRule(nano); 14 | addonCache(nano); 15 | addonJsx(nano); 16 | addonStyle(nano); 17 | addonStyled(nano); 18 | 19 | const { styled } = nano; 20 | 21 | const Table_ = styled.div({ 22 | display: 'table', 23 | marginTop: '10px', 24 | }); 25 | 26 | const Row = styled.div({ 27 | display: 'table-row', 28 | }); 29 | 30 | const Cell = styled.div({ 31 | display: 'table-cell', 32 | padding: '10px', 33 | }); 34 | 35 | const Table = ({ table, toPercent }) => ( 36 | 37 | {table.map((row, i) => ( 38 | 39 | {row.map((x, j) => ( 40 | 46 | {toPercent(x)} 47 | 48 | ))} 49 | 50 | ))} 51 | 52 | ); 53 | 54 | export default Table; 55 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | nano-css (using styled()() interface) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/nano-css/styled/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nano-css-styled-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package nano-css/styled", 7 | "build": "devBuild --package nano-css/styled" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "nano-css": "1.13.0" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "nano-css (using styled() interface)", 19 | "link": "https://github.com/streamich/nano-css/blob/master/docs/styled.md", 20 | "useInlineStyles": true, 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/radium/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/radium/README.md: -------------------------------------------------------------------------------- 1 | # Radium Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/radium/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Radium from 'radium'; 3 | 4 | const styles = { 5 | table: { 6 | display: 'table', 7 | marginTop: 10, 8 | }, 9 | row: { 10 | display: 'table-row', 11 | }, 12 | cell: { 13 | display: 'table-cell', 14 | padding: 10, 15 | }, 16 | }; 17 | 18 | const Table = ({ table, toPercent }) => ( 19 |
20 | {table.map((row, i) => ( 21 |
22 | {row.map((x, j) => ( 23 |
27 | {toPercent(x)} 28 |
29 | ))} 30 |
31 | ))} 32 |
33 | ); 34 | 35 | export default Radium(Table); 36 | -------------------------------------------------------------------------------- /packages/benchmarks/radium/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Radium 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/radium/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/radium/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-radium-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package radium", 7 | "build": "devBuild --package radium" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "radium": "0.18.2" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "radium", 19 | "useInlineStyles": true, 20 | "link": "https://github.com/FormidableLabs/radium" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/benchmarks/react-css/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/react-css/README.md: -------------------------------------------------------------------------------- 1 | # React + CSS Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/react-css/client/Table.css: -------------------------------------------------------------------------------- 1 | .table { 2 | display: table; 3 | margin: 10px 10px 10px 0; 4 | } 5 | 6 | .row { 7 | display: table-row; 8 | } 9 | 10 | .cell { 11 | display: table-cell; 12 | padding: 10px; 13 | } 14 | -------------------------------------------------------------------------------- /packages/benchmarks/react-css/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Table.css'; 3 | 4 | const Table = ({ table, toPercent }) => ( 5 |
6 | {table.map((row, i) => ( 7 |
8 | {row.map((x, j) => ( 9 |
14 | {toPercent(x)} 15 |
16 | ))} 17 |
18 | ))} 19 |
20 | ); 21 | 22 | export default Table; 23 | -------------------------------------------------------------------------------- /packages/benchmarks/react-css/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React + CSS 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/react-css/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/react-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-react-css-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package react-css", 7 | "build": "devBuild --package react-css" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0" 12 | }, 13 | "devDependencies": { 14 | "dev-tasks": "1.0.0" 15 | }, 16 | "benchmarks": { 17 | "name": "react-css", 18 | "useInlineStyles": true, 19 | "useCSS": true, 20 | "link": "https://github.com/facebook/react" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/benchmarks/react-inline-styles/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/react-inline-styles/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/react-inline-styles/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const styles = { 4 | table: { 5 | display: 'table', 6 | marginTop: '10px', 7 | }, 8 | row: { 9 | display: 'table-row', 10 | }, 11 | }; 12 | 13 | const Table = ({ table, toPercent }) => ( 14 |
15 | {table.map((row, i) => ( 16 |
17 | {row.map((x, j) => ( 18 |
26 | {toPercent(x)} 27 |
28 | ))} 29 |
30 | ))} 31 |
32 | ); 33 | 34 | export default Table; 35 | -------------------------------------------------------------------------------- /packages/benchmarks/react-inline-styles/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React (with inline styles) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/react-inline-styles/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/react-inline-styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-react-inline-styles-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package react-inline-styles", 7 | "build": "devBuild --package react-inline-styles" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0" 12 | }, 13 | "devDependencies": { 14 | "dev-tasks": "1.0.0" 15 | }, 16 | "benchmarks": { 17 | "name": "react (with inline-styles)", 18 | "link": "https://github.com/facebook/react", 19 | "useInlineStyles": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/benchmarks/react-jss/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/react-jss/README.md: -------------------------------------------------------------------------------- 1 | # React-JSS Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/react-jss/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import injectSheet from 'react-jss'; 3 | 4 | const styles = { 5 | table: { 6 | display: 'table', 7 | marginTop: 10, 8 | }, 9 | row: { 10 | display: 'table-row', 11 | }, 12 | }; 13 | 14 | const stylesCell = { 15 | cell: { 16 | display: 'table-cell', 17 | padding: 10, 18 | background: props => `rgba(74, 174, 53, ${props.value})`, 19 | }, 20 | }; 21 | 22 | const CellComponent = ({ classes, children }) => ( 23 |
{children}
24 | ); 25 | 26 | const Cell = injectSheet(stylesCell)(CellComponent); 27 | 28 | const Table = ({ classes, table, toPercent }) => ( 29 |
30 | {table.map((row, i) => ( 31 |
32 | {row.map((x, j) => ( 33 | {toPercent(x)} 34 | ))} 35 |
36 | ))} 37 |
38 | ); 39 | 40 | export default injectSheet(styles)(Table); 41 | -------------------------------------------------------------------------------- /packages/benchmarks/react-jss/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React-JSS 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/react-jss/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/react-jss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-react-jss-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package react-jss", 7 | "build": "devBuild --package react-jss" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "react-jss": "5.4.1" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "dependencies": { 18 | "babel-runtime": "6.23.0", 19 | "react": "15.4.2", 20 | "react-dom": "15.4.2", 21 | "react-jss": "5.4.1", 22 | "benchmarks-utils": "1.0.0" 23 | }, 24 | "benchmarks": { 25 | "name": "react-jss", 26 | "useCSS": true, 27 | "link": "https://github.com/cssinjs/react-jss" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/benchmarks/react-native-web/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/react-native-web/README.md: -------------------------------------------------------------------------------- 1 | # React Native Web Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/react-native-web/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native-web'; 3 | 4 | const styles = StyleSheet.create({ 5 | table: { 6 | display: 'table', 7 | marginTop: 10, 8 | }, 9 | row: { 10 | display: 'table-row', 11 | }, 12 | cell: { 13 | display: 'table-cell', 14 | padding: 10, 15 | }, 16 | }); 17 | 18 | const Table = ({ table, toPercent }) => ( 19 | 20 | {table.map((row, i) => ( 21 | 22 | {row.map((x, j) => ( 23 | 27 | {toPercent(x)} 28 | 29 | ))} 30 | 31 | ))} 32 | 33 | ); 34 | 35 | export default Table; 36 | -------------------------------------------------------------------------------- /packages/benchmarks/react-native-web/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Native Web 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/react-native-web/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | 5 | import Table from './Table'; 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/react-native-web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-react-native-web-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package c", 7 | "build": "devBuild --package react-native-web" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "react-native-web": "0.1.14", 13 | "react": "^16.1.1", 14 | "react-dom": "^16.1.1" 15 | }, 16 | "devDependencies": { 17 | "dev-tasks": "1.0.0" 18 | }, 19 | "benchmarks": { 20 | "name": "react-native-web", 21 | "useInlineStyles": true, 22 | "useCSS": true, 23 | "link": "https://github.com/necolas/react-native-web" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/benchmarks/react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/react/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/react/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Table = ({ table, toPercent }) => ( 4 |
5 | {table.map((row, i) => ( 6 |
7 | {row.map((x, j) => ( 8 |
9 | {toPercent(x)} 10 |
11 | ))} 12 |
13 | ))} 14 |
15 | ); 16 | 17 | export default Table; 18 | -------------------------------------------------------------------------------- /packages/benchmarks/react/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/react/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-react-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package react", 7 | "build": "devBuild --package react" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0" 12 | }, 13 | "devDependencies": { 14 | "dev-tasks": "1.0.0" 15 | }, 16 | "benchmarks": { 17 | "name": "react (without styles)", 18 | "link": "https://github.com/facebook/react" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-inline/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-inline/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-inline/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'rockey-react/speedy'; 3 | import rockey from 'rockey-react'; 4 | 5 | const Table = rockey.div` 6 | display: table; 7 | margin-top: 10px; 8 | `; 9 | 10 | const Row = rockey.div` 11 | display: table-row; 12 | `; 13 | 14 | const Cell = rockey.div` 15 | display: table-cell; 16 | padding: 10px; 17 | `; 18 | 19 | export default ({ table, toPercent }) => ( 20 | 21 | {table.map((row, i) => ( 22 | 23 | {row.map((x, j) => ( 24 | 29 | {toPercent(x)} 30 | 31 | ))} 32 | 33 | ))} 34 |
35 | ); 36 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-inline/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rockey (speedy) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-inline/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | import './index.html'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-inline/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-rockey-inline-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package rockey/rockey-inline", 7 | "build": "devBuild --package rockey/rockey-inline" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "rockey-react": "=0.0.14" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "rockey-inline", 19 | "useInlineStyles": false, 20 | "useCSS": true, 21 | "useInlineStyles": true, 22 | "link": "https://github.com/tuchk4/rockey" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-inline/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@^2.0.5: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | classnames@^2.2.5: 10 | version "2.2.5" 11 | resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" 12 | 13 | css-vendor@^0.3.8: 14 | version "0.3.8" 15 | resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" 16 | dependencies: 17 | is-in-browser "^1.0.2" 18 | 19 | is-in-browser@^1.0.2: 20 | version "1.1.3" 21 | resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" 22 | 23 | is-react-prop@^0.1.2: 24 | version "0.1.2" 25 | resolved "https://registry.yarnpkg.com/is-react-prop/-/is-react-prop-0.1.2.tgz#b22fbcf6190e91e81939132a110bb94642b56903" 26 | 27 | lodash@^4.17.4: 28 | version "4.17.4" 29 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" 30 | 31 | rockey-css-parse@^0.0.14: 32 | version "0.0.14" 33 | resolved "https://registry.yarnpkg.com/rockey-css-parse/-/rockey-css-parse-0.0.14.tgz#5e927753a17b255d7160fac3df4be061c09c9a9c" 34 | dependencies: 35 | lodash "^4.17.4" 36 | 37 | rockey-react@=0.0.14: 38 | version "0.0.14" 39 | resolved "https://registry.yarnpkg.com/rockey-react/-/rockey-react-0.0.14.tgz#9cd8193735bcb2de9fdbcbd0851a568cad960752" 40 | dependencies: 41 | classnames "^2.2.5" 42 | is-react-prop "^0.1.2" 43 | lodash "^4.17.4" 44 | rockey "^0.0.14" 45 | 46 | rockey@^0.0.14: 47 | version "0.0.14" 48 | resolved "https://registry.yarnpkg.com/rockey/-/rockey-0.0.14.tgz#00e32440d7c763d7b7cf8be2f94fe3f2d2797754" 49 | dependencies: 50 | asap "^2.0.5" 51 | classnames "^2.2.5" 52 | css-vendor "^0.3.8" 53 | lodash "^4.17.4" 54 | rockey-css-parse "^0.0.14" 55 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-speedy/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-speedy/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-speedy/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import rockey from 'rockey-react'; 3 | 4 | const Table = rockey.div` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = rockey.div` 10 | display: table-row; 11 | `; 12 | 13 | const Cell = rockey.div` 14 | display: table-cell; 15 | padding: 10px; 16 | 17 | background: ${({ value }) => `rgba(74, 174, 53, ${value})`} 18 | `; 19 | 20 | export default ({ table, toPercent }) => ( 21 | 22 | {table.map((row, i) => ( 23 | 24 | {row.map((x, j) => ( 25 | {toPercent(x)} 26 | ))} 27 | 28 | ))} 29 |
30 | ); 31 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-speedy/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rockey (speedy) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-speedy/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import 'rockey-react/speedy'; 5 | import Table from './Table'; 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-speedy/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-rockey-speedy-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package rockey/rockey-speedy", 7 | "build": "devBuild --package rockey/rockey-speedy" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "rockey-react": "=0.0.14" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "rockey-speedy", 19 | "useInlineStyles": false, 20 | "useCSS": true, 21 | "link": "https://github.com/tuchk4/rockey" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey-speedy/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@^2.0.5: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | classnames@^2.2.5: 10 | version "2.2.5" 11 | resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" 12 | 13 | css-vendor@^0.3.8: 14 | version "0.3.8" 15 | resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" 16 | dependencies: 17 | is-in-browser "^1.0.2" 18 | 19 | is-in-browser@^1.0.2: 20 | version "1.1.3" 21 | resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" 22 | 23 | is-react-prop@^0.1.2: 24 | version "0.1.2" 25 | resolved "https://registry.yarnpkg.com/is-react-prop/-/is-react-prop-0.1.2.tgz#b22fbcf6190e91e81939132a110bb94642b56903" 26 | 27 | lodash@^4.17.4: 28 | version "4.17.4" 29 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" 30 | 31 | rockey-css-parse@^0.0.14: 32 | version "0.0.14" 33 | resolved "https://registry.yarnpkg.com/rockey-css-parse/-/rockey-css-parse-0.0.14.tgz#5e927753a17b255d7160fac3df4be061c09c9a9c" 34 | dependencies: 35 | lodash "^4.17.4" 36 | 37 | rockey-react@=0.0.14: 38 | version "0.0.14" 39 | resolved "https://registry.yarnpkg.com/rockey-react/-/rockey-react-0.0.14.tgz#9cd8193735bcb2de9fdbcbd0851a568cad960752" 40 | dependencies: 41 | classnames "^2.2.5" 42 | is-react-prop "^0.1.2" 43 | lodash "^4.17.4" 44 | rockey "^0.0.14" 45 | 46 | rockey@^0.0.14: 47 | version "0.0.14" 48 | resolved "https://registry.yarnpkg.com/rockey/-/rockey-0.0.14.tgz#00e32440d7c763d7b7cf8be2f94fe3f2d2797754" 49 | dependencies: 50 | asap "^2.0.5" 51 | classnames "^2.2.5" 52 | css-vendor "^0.3.8" 53 | lodash "^4.17.4" 54 | rockey-css-parse "^0.0.14" 55 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey/README.md: -------------------------------------------------------------------------------- 1 | # React Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import rockey from 'rockey-react'; 3 | 4 | const Table = rockey.div` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = rockey.div` 10 | display: table-row; 11 | `; 12 | 13 | const Cell = rockey.div` 14 | display: table-cell; 15 | padding: 10px; 16 | 17 | background: ${({ value }) => `rgba(74, 174, 53, ${value})`} 18 | `; 19 | 20 | export default ({ table, toPercent }) => ( 21 | 22 | {table.map((row, i) => ( 23 | 24 | {row.map((x, j) => ( 25 | {toPercent(x)} 26 | ))} 27 | 28 | ))} 29 |
30 | ); 31 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rockey 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | 5 | import Table from './Table'; 6 | import './index.html'; 7 | 8 | // test 9 | ReactDOM.render(, document.getElementById('root')); 10 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-rockey-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package rockey/rockey", 7 | "build": "devBuild --package rockey/rockey" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "rockey-react": "=0.0.14" 13 | }, 14 | "devDependencies": { 15 | "dev-tasks": "1.0.0" 16 | }, 17 | "benchmarks": { 18 | "name": "rockey", 19 | "useInlineStyles": false, 20 | "useCSS": true, 21 | "link": "https://github.com/tuchk4/rockey" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/rockey/rockey/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@^2.0.5: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | classnames@^2.2.5: 10 | version "2.2.5" 11 | resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" 12 | 13 | css-vendor@^0.3.8: 14 | version "0.3.8" 15 | resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" 16 | dependencies: 17 | is-in-browser "^1.0.2" 18 | 19 | is-in-browser@^1.0.2: 20 | version "1.1.3" 21 | resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" 22 | 23 | is-react-prop@^0.1.2: 24 | version "0.1.2" 25 | resolved "https://registry.yarnpkg.com/is-react-prop/-/is-react-prop-0.1.2.tgz#b22fbcf6190e91e81939132a110bb94642b56903" 26 | 27 | lodash@^4.17.4: 28 | version "4.17.4" 29 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" 30 | 31 | rockey-css-parse@^0.0.14: 32 | version "0.0.14" 33 | resolved "https://registry.yarnpkg.com/rockey-css-parse/-/rockey-css-parse-0.0.14.tgz#5e927753a17b255d7160fac3df4be061c09c9a9c" 34 | dependencies: 35 | lodash "^4.17.4" 36 | 37 | rockey-react@=0.0.14: 38 | version "0.0.14" 39 | resolved "https://registry.yarnpkg.com/rockey-react/-/rockey-react-0.0.14.tgz#9cd8193735bcb2de9fdbcbd0851a568cad960752" 40 | dependencies: 41 | classnames "^2.2.5" 42 | is-react-prop "^0.1.2" 43 | lodash "^4.17.4" 44 | rockey "^0.0.14" 45 | 46 | rockey@^0.0.14: 47 | version "0.0.14" 48 | resolved "https://registry.yarnpkg.com/rockey/-/rockey-0.0.14.tgz#00e32440d7c763d7b7cf8be2f94fe3f2d2797754" 49 | dependencies: 50 | asap "^2.0.5" 51 | classnames "^2.2.5" 52 | css-vendor "^0.3.8" 53 | lodash "^4.17.4" 54 | rockey-css-parse "^0.0.14" 55 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/decouple-cell/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | "styled-components" 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/decouple-cell/README.md: -------------------------------------------------------------------------------- 1 | # Styled-Components v2 - Decouple Cell Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/decouple-cell/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Table = styled.div` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = styled.div` 10 | display: table-row; 11 | `; 12 | 13 | const CellDefault = styled.div` 14 | display: table-cell; 15 | padding: 10px; 16 | `; 17 | 18 | const Cell = styled(CellDefault)` 19 | background: rgba(74, 174, 53, ${props => props.value}); 20 | `; 21 | 22 | export default ({ table, toPercent }) => ( 23 | 24 | {table.map((row, i) => ( 25 | 26 | {row.map((x, j) => ( 27 | {toPercent(x)} 28 | ))} 29 | 30 | ))} 31 |
32 | ); 33 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/decouple-cell/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled Components (Decouple Cell) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/decouple-cell/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/decouple-cell/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-components-big-table-v2-plugin-decouple-cell", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-components/decouple-cell", 7 | "build": "devBuild --package styled-components/decouple-cell" 8 | }, 9 | "license": "MIT", 10 | "devDependencies": { 11 | "dev-tasks": "1.0.0", 12 | "babel-plugin-styled-components": "1.1.7" 13 | }, 14 | "dependencies": { 15 | "benchmarks-utils": "1.0.0", 16 | "styled-components": "^3.1.6" 17 | }, 18 | "benchmarks": { 19 | "name": "styled-components-decouple-cell", 20 | "link": "https://github.com/styled-components/styled-components/tree/v2", 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/inline-style/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | "styled-components" 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/inline-style/README.md: -------------------------------------------------------------------------------- 1 | # Styled-Components v2 + Inline Style Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/inline-style/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Table = styled.div` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = styled.div` 10 | display: table-row; 11 | `; 12 | 13 | const Cell = styled.div` 14 | display: table-cell; 15 | padding: 10px; 16 | `; 17 | 18 | export default ({ table, toPercent }) => ( 19 | 20 | {table.map((row, i) => ( 21 | 22 | {row.map((x, j) => ( 23 | 28 | {toPercent(x)} 29 | 30 | ))} 31 | 32 | ))} 33 |
34 | ); 35 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/inline-style/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled Components (Inline Style) 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/inline-style/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/inline-style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-components-big-table-v2-plugin-inline-style", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-components/inline-style", 7 | "build": "devBuild --package styled-components/inline-style" 8 | }, 9 | "license": "MIT", 10 | "devDependencies": { 11 | "dev-tasks": "1.0.0", 12 | "babel-plugin-styled-components": "1.1.7" 13 | }, 14 | "dependencies": { 15 | "benchmarks-utils": "1.0.0", 16 | "styled-components": "^3.1.6" 17 | }, 18 | "benchmarks": { 19 | "name": "styled-components-inline-styles", 20 | "link": "https://github.com/styled-components/styled-components/tree/v2", 21 | "useInlineStyles": true, 22 | "useCSS": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/simple/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | "styled-components" 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/simple/README.md: -------------------------------------------------------------------------------- 1 | # Styled-Components v2 Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/simple/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Table = styled.div` 5 | display: table; 6 | margin-top: 10px; 7 | `; 8 | 9 | const Row = styled.div` 10 | display: table-row; 11 | `; 12 | 13 | const Cell = styled.div` 14 | display: table-cell; 15 | padding: 10px; 16 | background: rgba(74, 174, 53, ${props => props.value}); 17 | `; 18 | 19 | export default ({ table, toPercent }) => ( 20 | 21 | {table.map((row, i) => ( 22 | 23 | {row.map((x, j) => ( 24 | {toPercent(x)} 25 | ))} 26 | 27 | ))} 28 |
29 | ); 30 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/simple/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled Components 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/simple/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-components/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-components-big-table-v2-plugin-simple", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-components/simple", 7 | "build": "devBuild --package styled-components/simple" 8 | }, 9 | "license": "MIT", 10 | "devDependencies": { 11 | "dev-tasks": "1.0.0", 12 | "babel-plugin-styled-components": "1.1.7" 13 | }, 14 | "dependencies": { 15 | "benchmarks-utils": "1.0.0", 16 | "styled-components": "^3.1.6" 17 | }, 18 | "benchmarks": { 19 | "name": "styled-components", 20 | "link": "https://github.com/styled-components/styled-components/tree/v2", 21 | "useCSS": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss-v2/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss-v2/README.md: -------------------------------------------------------------------------------- 1 | # Styled-JSS Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. 19 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss-v2/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-jss'; 3 | 4 | const Table = styled('div')({ 5 | display: 'table', 6 | marginTop: 10, 7 | }); 8 | 9 | const Row = styled('div')({ 10 | display: 'table-row', 11 | }); 12 | 13 | const Cell = styled('div')({ 14 | display: 'table-cell', 15 | padding: 10, 16 | background: props => `rgba(74, 174, 53, ${props.value})`, 17 | }); 18 | 19 | const TableComponent = ({ table, toPercent }) => ( 20 | 21 | {table.map((row, i) => ( 22 | 23 | {row.map((x, j) => ( 24 | {toPercent(x)} 25 | ))} 26 | 27 | ))} 28 |
29 | ); 30 | 31 | export default TableComponent; 32 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss-v2/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled-JSS 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss-v2/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss-v2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-jss-v2-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-jss/styled-jss-v2", 7 | "build": "devBuild --package styled-jss/styled-jss-v2" 8 | }, 9 | "license": "MIT", 10 | "devDependencies": { 11 | "dev-tasks": "1.0.0" 12 | }, 13 | "dependencies": { 14 | "benchmarks-utils": "1.0.0", 15 | "styled-jss": "2.1.1" 16 | }, 17 | "benchmarks": { 18 | "name": "styled-jss-v2", 19 | "useCSS": true, 20 | "link": "https://github.com/cssinjs/styled-jss" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss-v2/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | css-vendor@^0.3.8: 6 | version "0.3.8" 7 | resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" 8 | dependencies: 9 | is-in-browser "^1.0.2" 10 | 11 | is-in-browser@^1.0.2, is-in-browser@^1.1.3: 12 | version "1.1.3" 13 | resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" 14 | 15 | is-observable@^0.2.0: 16 | version "0.2.0" 17 | resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-0.2.0.tgz#b361311d83c6e5d726cabf5e250b0237106f5ae2" 18 | dependencies: 19 | symbol-observable "^0.2.2" 20 | 21 | is-react-prop@^1.0.0: 22 | version "1.0.0" 23 | resolved "https://registry.yarnpkg.com/is-react-prop/-/is-react-prop-1.0.0.tgz#b90040b44bde7c03e990c8d3046f87445577ee3f" 24 | 25 | js-tokens@^3.0.0: 26 | version "3.0.2" 27 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" 28 | 29 | jss-camel-case@^6.0.0: 30 | version "6.0.0" 31 | resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.0.0.tgz#7cf8453e395c31fed931d11efbc885edcd61132e" 32 | 33 | jss-compose@^5.0.0: 34 | version "5.0.0" 35 | resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484" 36 | dependencies: 37 | warning "^3.0.0" 38 | 39 | jss-default-unit@^8.0.0: 40 | version "8.0.0" 41 | resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.0.tgz#a308ead4f587ebe17cc845f9870867400de90910" 42 | dependencies: 43 | is-observable "^0.2.0" 44 | 45 | jss-expand@^5.0.0: 46 | version "5.0.0" 47 | resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.0.0.tgz#8eadb782f29ec5f1d285451dd38052d5ac51644a" 48 | dependencies: 49 | is-observable "^0.2.0" 50 | 51 | jss-extend@^6.0.1: 52 | version "6.0.1" 53 | resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.0.1.tgz#e53430bc92a42e50d036883ccfecfbc4e1199147" 54 | dependencies: 55 | is-observable "^0.2.0" 56 | warning "^3.0.0" 57 | 58 | jss-global@^3.0.0: 59 | version "3.0.0" 60 | resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2" 61 | 62 | jss-nested@^6.0.1: 63 | version "6.0.1" 64 | resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca" 65 | dependencies: 66 | warning "^3.0.0" 67 | 68 | jss-preset-default@^4.0.0: 69 | version "4.0.1" 70 | resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.0.1.tgz#822cecb87c27ff91633774422f4c221d61486b65" 71 | dependencies: 72 | jss-camel-case "^6.0.0" 73 | jss-compose "^5.0.0" 74 | jss-default-unit "^8.0.0" 75 | jss-expand "^5.0.0" 76 | jss-extend "^6.0.1" 77 | jss-global "^3.0.0" 78 | jss-nested "^6.0.1" 79 | jss-props-sort "^6.0.0" 80 | jss-template "^1.0.0" 81 | jss-vendor-prefixer "^7.0.0" 82 | 83 | jss-props-sort@^6.0.0: 84 | version "6.0.0" 85 | resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323" 86 | 87 | jss-template@^1.0.0: 88 | version "1.0.0" 89 | resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.0.tgz#4b874608706ddceecacdb5567e254aecb6ea69b3" 90 | dependencies: 91 | warning "^3.0.0" 92 | 93 | jss-vendor-prefixer@^7.0.0: 94 | version "7.0.0" 95 | resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71" 96 | dependencies: 97 | css-vendor "^0.3.8" 98 | 99 | jss@^9.0.0: 100 | version "9.1.0" 101 | resolved "https://registry.yarnpkg.com/jss/-/jss-9.1.0.tgz#601f18478a26ac95a128f919d2e481088e93b28f" 102 | dependencies: 103 | is-in-browser "^1.1.3" 104 | is-observable "^0.2.0" 105 | warning "^3.0.0" 106 | 107 | loose-envify@^1.0.0: 108 | version "1.3.1" 109 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 110 | dependencies: 111 | js-tokens "^3.0.0" 112 | 113 | styled-jss@2.1.1: 114 | version "2.1.1" 115 | resolved "https://registry.yarnpkg.com/styled-jss/-/styled-jss-2.1.1.tgz#fb0a6c78ab9bdf7c2e8a5dc6fc944b4085168e3d" 116 | dependencies: 117 | is-observable "^0.2.0" 118 | is-react-prop "^1.0.0" 119 | jss "^9.0.0" 120 | jss-preset-default "^4.0.0" 121 | 122 | symbol-observable@^0.2.2: 123 | version "0.2.4" 124 | resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40" 125 | 126 | warning@^3.0.0: 127 | version "3.0.0" 128 | resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" 129 | dependencies: 130 | loose-envify "^1.0.0" 131 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss/README.md: -------------------------------------------------------------------------------- 1 | # Styled-JSS Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. 19 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-jss'; 3 | 4 | const Table = styled('div', { 5 | display: 'table', 6 | marginTop: 10, 7 | }); 8 | 9 | const Row = styled('div', { 10 | display: 'table-row', 11 | }); 12 | 13 | const Cell = styled('div', { 14 | display: 'table-cell', 15 | padding: 10, 16 | background: props => `rgba(74, 174, 53, ${props.value})`, 17 | }); 18 | 19 | const TableComponent = ({ table, toPercent }) => ( 20 | 21 | {table.map((row, i) => ( 22 | 23 | {row.map((x, j) => ( 24 | {toPercent(x)} 25 | ))} 26 | 27 | ))} 28 |
29 | ); 30 | 31 | export default TableComponent; 32 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled-JSS 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-jss-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-jss/styled-jss", 7 | "build": "devBuild --package styled-jss/styled-jss" 8 | }, 9 | "license": "MIT", 10 | "devDependencies": { 11 | "dev-tasks": "1.0.0" 12 | }, 13 | "dependencies": { 14 | "benchmarks-utils": "1.0.0", 15 | "styled-jss": "0.6.3" 16 | }, 17 | "benchmarks": { 18 | "name": "styled-jss", 19 | "useCSS": true, 20 | "link": "https://github.com/cssinjs/styled-jss" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/styled-jss/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | css-vendor@^0.3.8: 6 | version "0.3.8" 7 | resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" 8 | dependencies: 9 | is-in-browser "^1.0.2" 10 | 11 | is-in-browser@1.0.2, is-in-browser@^1.0.2: 12 | version "1.0.2" 13 | resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.0.2.tgz#f688bea8f1e5aadc3244ebc870d188cfb9b613cf" 14 | 15 | is-react-prop@^0.1.2: 16 | version "0.1.2" 17 | resolved "https://registry.yarnpkg.com/is-react-prop/-/is-react-prop-0.1.2.tgz#b22fbcf6190e91e81939132a110bb94642b56903" 18 | 19 | js-tokens@^3.0.0: 20 | version "3.0.1" 21 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 22 | 23 | jss-camel-case@^4.0.0: 24 | version "4.0.0" 25 | resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-4.0.0.tgz#39ef2a137aaa1e2f160ab826845305f8efabcfd5" 26 | 27 | jss-compose@^3.0.0: 28 | version "3.0.1" 29 | resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-3.0.1.tgz#0ac07f20baf1d523c211016d383dab08dcfe4186" 30 | dependencies: 31 | warning "^3.0.0" 32 | 33 | jss-default-unit@^6.0.0: 34 | version "6.1.1" 35 | resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-6.1.1.tgz#a9a04887a3860d2a8ceb73ddfbc2ddcf808bacb2" 36 | 37 | jss-expand@^3.0.0: 38 | version "3.0.1" 39 | resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-3.0.1.tgz#90f1b30ad0ab700e666ea54f7186341c50d7feed" 40 | 41 | jss-extend@^4.0.0: 42 | version "4.0.1" 43 | resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-4.0.1.tgz#6b716a1b217ba32715dbcb69940ec67b35c415dc" 44 | dependencies: 45 | warning "^3.0.0" 46 | 47 | jss-global@^1.0.0: 48 | version "1.0.1" 49 | resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-1.0.1.tgz#36731778f6d8649110611f7c178dbcd60fd92b24" 50 | 51 | jss-nested@^4.0.0: 52 | version "4.0.1" 53 | resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-4.0.1.tgz#f50cc206430c8a920ccd54e3b756f7fc72455130" 54 | dependencies: 55 | warning "^3.0.0" 56 | 57 | jss-preset-default@^2.0.0: 58 | version "2.0.0" 59 | resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-2.0.0.tgz#0368d99626b31067e8d04ab3c7cb17ba8354d422" 60 | dependencies: 61 | jss-camel-case "^4.0.0" 62 | jss-compose "^3.0.0" 63 | jss-default-unit "^6.0.0" 64 | jss-expand "^3.0.0" 65 | jss-extend "^4.0.0" 66 | jss-global "^1.0.0" 67 | jss-nested "^4.0.0" 68 | jss-props-sort "^4.0.0" 69 | jss-vendor-prefixer "^5.0.0" 70 | 71 | jss-props-sort@^4.0.0: 72 | version "4.0.0" 73 | resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-4.0.0.tgz#ef4239c6795ca304c18dce9e0395a1789ed9f78a" 74 | 75 | jss-vendor-prefixer@^5.0.0: 76 | version "5.1.0" 77 | resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-5.1.0.tgz#59b73544de81e6b2efd71f6d3b744671826865a2" 78 | dependencies: 79 | css-vendor "^0.3.8" 80 | 81 | jss@^7.1.1: 82 | version "7.1.1" 83 | resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.1.tgz#b04ce8bfa60123a8b423e0edf17af8d008a5e8e5" 84 | dependencies: 85 | is-in-browser "1.0.2" 86 | warning "3.0.0" 87 | 88 | loose-envify@^1.0.0: 89 | version "1.3.1" 90 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 91 | dependencies: 92 | js-tokens "^3.0.0" 93 | 94 | styled-jss@0.6.3: 95 | version "0.6.3" 96 | resolved "https://registry.yarnpkg.com/styled-jss/-/styled-jss-0.6.3.tgz#c31dc46a57832501b111ee91b99a3a198766fcab" 97 | dependencies: 98 | is-react-prop "^0.1.2" 99 | jss "^7.1.1" 100 | jss-preset-default "^2.0.0" 101 | 102 | warning@3.0.0, warning@^3.0.0: 103 | version "3.0.0" 104 | resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" 105 | dependencies: 106 | loose-envify "^1.0.0" 107 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins-v2/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins-v2/README.md: -------------------------------------------------------------------------------- 1 | # Styled-JSS Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. 19 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins-v2/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create as createJss } from 'jss'; 3 | import createStyled from 'styled-jss/createStyled'; 4 | 5 | const jss = createJss(); 6 | 7 | const Styled = createStyled(jss); 8 | const styled = Styled(); 9 | 10 | const Table = styled('div')({ 11 | display: 'table', 12 | marginTop: '10px', 13 | }); 14 | 15 | const Row = styled('div')({ 16 | display: 'table-row', 17 | }); 18 | 19 | const Cell = styled('div')({ 20 | display: 'table-cell', 21 | padding: '10px', 22 | background: props => `rgba(74, 174, 53, ${props.value})`, 23 | }); 24 | 25 | const TableComponent = ({ table, toPercent }) => ( 26 | 27 | {table.map((row, i) => ( 28 | 29 | {row.map((x, j) => ( 30 | {toPercent(x)} 31 | ))} 32 | 33 | ))} 34 |
35 | ); 36 | 37 | export default TableComponent; 38 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins-v2/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled-JSS W/O plugins 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins-v2/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins-v2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-jss-wo-plugins-v2-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-jss/w-o-plugins-v2", 7 | "build": "devBuild --package styled-jss/w-o-plugins-v2" 8 | }, 9 | "license": "MIT", 10 | "devDependencies": { 11 | "dev-tasks": "1.0.0" 12 | }, 13 | "dependencies": { 14 | "benchmarks-utils": "1.0.0", 15 | "styled-jss": "2.1.1", 16 | "jss": "9.1.0" 17 | }, 18 | "benchmarks": { 19 | "name": "styled-jss-w-o-plugins-v2", 20 | "useCSS": true, 21 | "link": "https://github.com/cssinjs/styled-jss" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins/README.md: -------------------------------------------------------------------------------- 1 | # Styled-JSS Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. 19 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { create as createJss } from 'jss'; 3 | import createStyled from 'styled-jss/createStyled'; 4 | 5 | const jss = createJss(); 6 | 7 | const Styled = createStyled(jss); 8 | const styled = Styled(); 9 | 10 | const Table = styled('div', { 11 | display: 'table', 12 | marginTop: '10px', 13 | }); 14 | 15 | const Row = styled('div', { 16 | display: 'table-row', 17 | }); 18 | 19 | const Cell = styled('div', { 20 | display: 'table-cell', 21 | padding: '10px', 22 | background: props => `rgba(74, 174, 53, ${props.value})`, 23 | }); 24 | 25 | const TableComponent = ({ table, toPercent }) => ( 26 | 27 | {table.map((row, i) => ( 28 | 29 | {row.map((x, j) => ( 30 | {toPercent(x)} 31 | ))} 32 | 33 | ))} 34 |
35 | ); 36 | 37 | export default TableComponent; 38 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled-JSS W/O plugins 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-jss-wo-plugins-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-jss/w-o-plugins", 7 | "build": "devBuild --package styled-jss/w-o-plugins" 8 | }, 9 | "license": "MIT", 10 | "devDependencies": { 11 | "dev-tasks": "1.0.0" 12 | }, 13 | "dependencies": { 14 | "benchmarks-utils": "1.0.0", 15 | "styled-jss": "0.6.3", 16 | "jss": "7.1.1" 17 | }, 18 | "benchmarks": { 19 | "name": "styled-jss-w-o-plugins", 20 | "useCSS": true, 21 | "link": "https://github.com/cssinjs/styled-jss" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jss/w-o-plugins/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | css-vendor@^0.3.8: 6 | version "0.3.8" 7 | resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" 8 | dependencies: 9 | is-in-browser "^1.0.2" 10 | 11 | is-in-browser@1.0.2, is-in-browser@^1.0.2: 12 | version "1.0.2" 13 | resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.0.2.tgz#f688bea8f1e5aadc3244ebc870d188cfb9b613cf" 14 | 15 | is-react-prop@^0.1.2: 16 | version "0.1.2" 17 | resolved "https://registry.yarnpkg.com/is-react-prop/-/is-react-prop-0.1.2.tgz#b22fbcf6190e91e81939132a110bb94642b56903" 18 | 19 | js-tokens@^3.0.0: 20 | version "3.0.1" 21 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 22 | 23 | jss-camel-case@^4.0.0: 24 | version "4.0.0" 25 | resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-4.0.0.tgz#39ef2a137aaa1e2f160ab826845305f8efabcfd5" 26 | 27 | jss-compose@^3.0.0: 28 | version "3.0.1" 29 | resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-3.0.1.tgz#0ac07f20baf1d523c211016d383dab08dcfe4186" 30 | dependencies: 31 | warning "^3.0.0" 32 | 33 | jss-default-unit@^6.0.0: 34 | version "6.1.1" 35 | resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-6.1.1.tgz#a9a04887a3860d2a8ceb73ddfbc2ddcf808bacb2" 36 | 37 | jss-expand@^3.0.0: 38 | version "3.0.1" 39 | resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-3.0.1.tgz#90f1b30ad0ab700e666ea54f7186341c50d7feed" 40 | 41 | jss-extend@^4.0.0: 42 | version "4.0.1" 43 | resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-4.0.1.tgz#6b716a1b217ba32715dbcb69940ec67b35c415dc" 44 | dependencies: 45 | warning "^3.0.0" 46 | 47 | jss-global@^1.0.0: 48 | version "1.0.1" 49 | resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-1.0.1.tgz#36731778f6d8649110611f7c178dbcd60fd92b24" 50 | 51 | jss-nested@^4.0.0: 52 | version "4.0.1" 53 | resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-4.0.1.tgz#f50cc206430c8a920ccd54e3b756f7fc72455130" 54 | dependencies: 55 | warning "^3.0.0" 56 | 57 | jss-preset-default@^2.0.0: 58 | version "2.0.0" 59 | resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-2.0.0.tgz#0368d99626b31067e8d04ab3c7cb17ba8354d422" 60 | dependencies: 61 | jss-camel-case "^4.0.0" 62 | jss-compose "^3.0.0" 63 | jss-default-unit "^6.0.0" 64 | jss-expand "^3.0.0" 65 | jss-extend "^4.0.0" 66 | jss-global "^1.0.0" 67 | jss-nested "^4.0.0" 68 | jss-props-sort "^4.0.0" 69 | jss-vendor-prefixer "^5.0.0" 70 | 71 | jss-props-sort@^4.0.0: 72 | version "4.0.0" 73 | resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-4.0.0.tgz#ef4239c6795ca304c18dce9e0395a1789ed9f78a" 74 | 75 | jss-vendor-prefixer@^5.0.0: 76 | version "5.1.0" 77 | resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-5.1.0.tgz#59b73544de81e6b2efd71f6d3b744671826865a2" 78 | dependencies: 79 | css-vendor "^0.3.8" 80 | 81 | jss@7.1.1, jss@^7.1.1: 82 | version "7.1.1" 83 | resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.1.tgz#b04ce8bfa60123a8b423e0edf17af8d008a5e8e5" 84 | dependencies: 85 | is-in-browser "1.0.2" 86 | warning "3.0.0" 87 | 88 | loose-envify@^1.0.0: 89 | version "1.3.1" 90 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 91 | dependencies: 92 | js-tokens "^3.0.0" 93 | 94 | styled-jss@0.6.3: 95 | version "0.6.3" 96 | resolved "https://registry.yarnpkg.com/styled-jss/-/styled-jss-0.6.3.tgz#c31dc46a57832501b111ee91b99a3a198766fcab" 97 | dependencies: 98 | is-react-prop "^0.1.2" 99 | jss "^7.1.1" 100 | jss-preset-default "^2.0.0" 101 | 102 | warning@3.0.0, warning@^3.0.0: 103 | version "3.0.0" 104 | resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" 105 | dependencies: 106 | loose-envify "^1.0.0" 107 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/dynamic/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | ["styled-jsx/babel", { "optimizeForSpeed": true }] 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/dynamic/README.md: -------------------------------------------------------------------------------- 1 | # Styled-JSX Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/dynamic/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Cell = ({ value, children }) => ( 4 |
5 | {children} 6 | 12 | 13 |
14 | ); 15 | 16 | const Table = ({ table, toPercent }) => ( 17 |
18 | {table.map((row, i) => ( 19 |
20 | {row.map((x, j) => ( 21 | 22 | {toPercent(x)} 23 | 24 | ))} 25 |
26 | ))} 27 | 37 |
38 | ); 39 | 40 | export default Table; 41 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/dynamic/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled-JSX 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/dynamic/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/dynamic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-jsx-dynamic-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-jsx/dynamic", 7 | "build": "devBuild --package styled-jsx/dynamic" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "rockey-react": "0.0.11", 13 | "styled-jsx": "^2.0.2" 14 | }, 15 | "devDependencies": { 16 | "dev-tasks": "1.0.0" 17 | }, 18 | "benchmarks": { 19 | "name": "styled-jsx-dynamic", 20 | "useInlineStyles": false, 21 | "useCSS": true, 22 | "link": "https://github.com/zeit/styled-jsx" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/inline-styles/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | ["styled-jsx/babel", { "optimizeForSpeed": true }] 5 | ], 6 | "presets": [ 7 | ["es2015", { "modules": false }], 8 | "react" 9 | ], 10 | "env": { 11 | "development": { 12 | "presets": [ 13 | "react-hmre" 14 | ] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/inline-styles/README.md: -------------------------------------------------------------------------------- 1 | # Styled-JSX Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/inline-styles/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Table = ({ table, toPercent }) => ( 4 |
5 | {table.map((row, i) => ( 6 |
7 | {row.map((x, j) => ( 8 |
13 | {toPercent(x)} 14 |
15 | ))} 16 |
17 | ))} 18 | 33 |
34 | ); 35 | 36 | export default Table; 37 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/inline-styles/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled-JSX 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/inline-styles/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styled-jsx/inline-styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styled-jsx-inline-big-table", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "devServer --package styled-jsx/inline-styles", 7 | "build": "devBuild --package styled-jsx/inline-styles" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "benchmarks-utils": "1.0.0", 12 | "rockey-react": "0.0.11", 13 | "styled-jsx": "^2.0.2" 14 | }, 15 | "devDependencies": { 16 | "dev-tasks": "1.0.0" 17 | }, 18 | "benchmarks": { 19 | "name": "styled-jsx-inline-styles", 20 | "useInlineStyles": true, 21 | "useCSS": true, 22 | "link": "https://github.com/zeit/styled-jsx" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/benchmarks/styletron/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties" 4 | ], 5 | "presets": [ 6 | ["es2015", { "modules": false }], 7 | "react" 8 | ], 9 | "env": { 10 | "development": { 11 | "presets": [ 12 | "react-hmre" 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/benchmarks/styletron/README.md: -------------------------------------------------------------------------------- 1 | # Styletron Big Table 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | 14 | ### `npm run build` 15 | 16 | Builds the app for production to the `build` folder.
17 | It correctly bundles React in production mode and optimizes the build for the best performance.
18 | The build is minified and the filenames include the hashes. -------------------------------------------------------------------------------- /packages/benchmarks/styletron/client/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { styled, StyletronProvider } from 'styletron-react'; 3 | import Styletron from 'styletron-client'; 4 | 5 | const Table = styled('div', { 6 | display: 'table', 7 | marginTop: '10px', 8 | }); 9 | 10 | const Row = styled('div', { 11 | display: 'table-row', 12 | }); 13 | 14 | const Cell = styled('div', props => ({ 15 | display: 'table-cell', 16 | padding: '10px', 17 | background: `rgba(74, 174, 53, ${props.value})`, 18 | })); 19 | 20 | const TableComponent = ({ table, toPercent }) => ( 21 | 22 | {table.map((row, i) => ( 23 | 24 | {row.map((x, j) => ( 25 | {toPercent(x)} 26 | ))} 27 | 28 | ))} 29 |
30 | ); 31 | 32 | const styleSheet = document.createElement('style'); 33 | document.head.appendChild(styleSheet); 34 | 35 | const styletron = new Styletron([styleSheet]); 36 | 37 | export default ({ table, toPercent }) => ( 38 | 39 | 40 | 41 | ); 42 | -------------------------------------------------------------------------------- /packages/benchmarks/styletron/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styletron 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/benchmarks/styletron/client/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from 'benchmarks-utils'; 4 | import Table from './Table'; 5 | 6 | import './index.html'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /packages/benchmarks/styletron/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-styltron-big-table", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "devServer --package styletron", 6 | "build": "devBuild --package styletron" 7 | }, 8 | "license": "MIT", 9 | "dependencies": { 10 | "benchmarks-utils": "1.0.0", 11 | "rockey-react": "0.0.11", 12 | "styletron-client": "2.5.1", 13 | "styletron-react": "2.5.3" 14 | }, 15 | "devDependencies": { 16 | "dev-tasks": "1.0.0" 17 | }, 18 | "benchmarks": { 19 | "name": "styletron", 20 | "useCSS": true, 21 | "link": "https://github.com/rtsao/styletron" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/dev-tasks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dev-tasks", 3 | "version": "1.0.0", 4 | "bin": { 5 | "devBuild": "./src/build.js", 6 | "devServer": "./src/devServer.js" 7 | }, 8 | "keywords": [], 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "chalk": "1.1.3", 13 | "cross-spawn": "5.1.0", 14 | "extract-text-webpack-plugin": "^2", 15 | "webpack": "2.4.1", 16 | "webpack-dev-server": "2.4.5", 17 | "yargs": "7.1.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/dev-tasks/src/build.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const fs = require('fs'); 3 | const path = require('path'); 4 | const webpack = require('webpack'); 5 | const { argv } = require('yargs'); 6 | 7 | process.NODE_ENV = 'production'; 8 | const packageName = argv.package; 9 | 10 | const webpackConfig = require('./webpack.config.js'); 11 | const compiler = webpack(webpackConfig); 12 | 13 | compiler.run((err, stats) => { 14 | if (err || stats.hasErrors()) { 15 | console.log(`Error at ${packageName}`); 16 | 17 | const info = stats.toJson(); 18 | const space = ' '; 19 | 20 | info.errors.map(err => { 21 | console.log(''); 22 | console.log(space + err.split('\n').slice(0, 3).join('\n' + space)); 23 | console.log(''); 24 | 25 | process.exit(1); 26 | }); 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /packages/dev-tasks/src/devServer.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const webpackDevServer = require('webpack-dev-server'); 3 | const webpack = require('webpack'); 4 | 5 | const webpackConfig = require('./webpack.config.js'); 6 | const compiler = webpack(webpackConfig); 7 | 8 | const server = new webpackDevServer(compiler, { 9 | quiet: true, 10 | stats: 'errors-only', 11 | }); 12 | 13 | server.listen(3000); 14 | -------------------------------------------------------------------------------- /packages/dev-tasks/src/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | const chalk = require('chalk'); 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | 6 | const { argv } = require('yargs'); 7 | const packageName = argv.package; 8 | 9 | const sourcePath = path.join( 10 | __dirname, 11 | '..', 12 | '..', 13 | 'benchmarks', 14 | packageName, 15 | './client' 16 | ); 17 | const staticsPath = path.join( 18 | __dirname, 19 | '..', 20 | '..', 21 | 'benchmarks', 22 | packageName, 23 | './static' 24 | ); 25 | 26 | const isProd = process.NODE_ENV === 'production'; 27 | console.log( 28 | `webpack build with env ${isProd ? chalk.green('production') : chalk.green('development')}` 29 | ); 30 | 31 | const plugins = [ 32 | new webpack.optimize.CommonsChunkPlugin({ 33 | name: 'vendor', 34 | minChunks: Infinity, 35 | filename: 'vendor.bundle.js', 36 | }), 37 | new webpack.EnvironmentPlugin({ 38 | NODE_ENV: process.NODE_ENV, 39 | }), 40 | new webpack.NamedModulesPlugin(), 41 | ]; 42 | 43 | if (isProd) { 44 | plugins.push( 45 | new webpack.LoaderOptionsPlugin({ 46 | minimize: true, 47 | debug: false, 48 | }), 49 | new ExtractTextPlugin('styles.css'), 50 | new webpack.optimize.UglifyJsPlugin({ 51 | compress: { 52 | warnings: false, 53 | screw_ie8: true, 54 | conditionals: true, 55 | unused: true, 56 | comparisons: true, 57 | sequences: true, 58 | dead_code: true, 59 | evaluate: true, 60 | if_return: true, 61 | join_vars: true, 62 | }, 63 | output: { 64 | comments: false, 65 | }, 66 | }) 67 | ); 68 | } else { 69 | plugins.push(new webpack.HotModuleReplacementPlugin()); 70 | } 71 | 72 | module.exports = { 73 | devtool: isProd ? 'source-map' : 'eval', 74 | context: sourcePath, 75 | entry: { 76 | js: './index.js', 77 | vendor: ['react'], 78 | }, 79 | output: { 80 | path: staticsPath, 81 | filename: '[name].bundle.js', 82 | }, 83 | module: { 84 | rules: [ 85 | { 86 | test: /\.html$/, 87 | exclude: /node_modules/, 88 | use: { 89 | loader: 'file-loader', 90 | query: { 91 | name: '[name].[ext]', 92 | }, 93 | }, 94 | }, 95 | { 96 | test: /\.(js|jsx)$/, 97 | include: sourcePath, 98 | exclude: /node_modules/, 99 | use: ['babel-loader'], 100 | }, 101 | { 102 | test: /\.css$/, 103 | exclude: /node_modules/, 104 | use: isProd 105 | ? ExtractTextPlugin.extract({ 106 | fallback: 'style-loader', 107 | use: { loader: 'css-loader', options: { sourceMap: true } }, 108 | }) 109 | : [ 110 | 'style-loader', 111 | { 112 | loader: 'css-loader', 113 | options: { sourceMap: true }, 114 | }, 115 | ], 116 | }, 117 | ], 118 | }, 119 | resolve: { 120 | extensions: [ 121 | '.webpack-loader.js', 122 | '.web-loader.js', 123 | '.loader.js', 124 | '.js', 125 | '.jsx', 126 | ], 127 | modules: [ 128 | // path.join(__dirname, '..', '..', packageName, 'node_modules') 129 | // 'node_modules', 130 | path.join( 131 | __dirname, 132 | '..', 133 | '..', 134 | 'benchmarks', 135 | packageName, 136 | 'node_modules' 137 | ), 138 | path.join(__dirname, '..', '..', '..', 'node_modules'), 139 | ], 140 | }, 141 | 142 | plugins, 143 | 144 | performance: isProd && { 145 | maxAssetSize: 100, 146 | maxEntrypointSize: 300, 147 | hints: 'warning', 148 | }, 149 | 150 | stats: { 151 | colors: { 152 | green: '\u001b[32m', 153 | }, 154 | }, 155 | 156 | devServer: { 157 | contentBase: './client', 158 | historyApiFallback: true, 159 | port: 3000, 160 | compress: isProd, 161 | inline: !isProd, 162 | hot: !isProd, 163 | stats: { 164 | assets: true, 165 | children: false, 166 | chunks: false, 167 | hash: false, 168 | modules: false, 169 | publicPath: false, 170 | timings: true, 171 | version: false, 172 | warnings: true, 173 | colors: { 174 | green: '\u001b[32m', 175 | }, 176 | }, 177 | }, 178 | }; 179 | -------------------------------------------------------------------------------- /packages/tests/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tests", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "dependencies": { 6 | "connect": "3.6.1", 7 | "lighthouse": "1.6.5", 8 | "serve-static": "1.12.1", 9 | "shelljs": "0.7.7" 10 | } 11 | } 12 | --------------------------------------------------------------------------------