Skip to content

Commit

Permalink
Improve performances
Browse files Browse the repository at this point in the history
Following #444, I bring perf improvements from @smooth-ui/system into styled-system.
The goal is to make this library the best one and the universal one.

What have changed?

- I switched to the core of @smooth-ui/system, more performant
especially with multiple compose. Composition is now flat, it means you
can compose 10 times and it will not be slower. We are probably in O(n),
where "n" is the number of props.
- I switched to rollup in order to optimize build, provide umd and
improve tree shaking

What are the breaking changes?

- We now rely on the order of props. ES2015 is here and we can rely on
it, see this tweet for context: https://twitter.com/ianstormtaylor/status/1115680037875752963.
- Object keys or array keys have now equivalent parsing
  • Loading branch information
gregberge committed May 5, 2019
1 parent e6b5032 commit 4263c32
Show file tree
Hide file tree
Showing 11 changed files with 2,958 additions and 383 deletions.
17 changes: 3 additions & 14 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
.DS_Store
.prettierrc
.nyc_output
.travis.yml
coverage
coverage.lcov
bench
docs
src
examples
babel.config.js
test
CONTRIBUTING.md
CODE_OF_CONDUCT.md
/*
!/dist/**/*.js
!/props.js
21 changes: 21 additions & 0 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"dist/styled-system.cjs.js": {
"bundled": 18794,
"minified": 11425,
"gzipped": 3172
},
"dist/styled-system.esm.js": {
"bundled": 16608,
"minified": 9477,
"gzipped": 2776,
"treeshaked": {
"rollup": {
"code": 79,
"import_statements": 44
},
"webpack": {
"code": 1112
}
}
}
}
26 changes: 2 additions & 24 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,7 @@
module.exports = {
env: {
test: {
presets: [
[ '@babel/env', { loose: true } ],
'@babel/react'
],
plugins: [
'@babel/transform-runtime'
]
presets: [['@babel/preset-env', { loose: true }], '@babel/react'],
},
cjs: {
presets: [
[ '@babel/env', { loose: true } ]
],
plugins: [
'@babel/transform-runtime'
]
},
esm: {
presets: [
[ '@babel/env', { loose: true, modules: false } ]
],
plugins: [
['@babel/transform-runtime', { useESModules: true }]
]
},
}
},
}
40 changes: 40 additions & 0 deletions benchmarks/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/* eslint-disable no-console, import/no-unresolved */
const Benchmark = require('benchmark')

const libs = [
{
name: 'actual',
module: require('../dist/styled-system.cjs'),
},
{
name: 'v4',
module: require('./v4.1.0'),
},
].map(({ name, module: { compose, fontSize, space } }) => {
const system = compose(
fontSize,
space
)
const run = () => system({ p: [10, 20], mt: 10, m: '20px', fontSize: 10 })
return { name, run }
})

const suite = new Benchmark.Suite()

console.log('Initial run...')

libs.forEach(lib => {
console.log(lib.name, lib.run())
suite.add(lib.name, lib.run)
})

console.log('Run suite...')

suite
.on('cycle', event => {
console.log(String(event.target))
})
.on('complete', function onComplete() {
console.log(`Fastest is ${this.filter('fastest').map('name')}`)
})
.run({ async: true })

0 comments on commit 4263c32

Please sign in to comment.