feat: cache and benchmarks

apps/benchmarks/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "benchmarks",
+  "version": "0.0.7",
+  "private": true,
+  "author": {
+    "name": "Mauro Erta",
+    "email": "[email protected]"
+  },
+  "scripts": {
+    "morfeo-vs": "node src/morfeo-vs/index.js",
+    "core": "node src/core/index.js",
+    "all": "npm run core && npm run morfeo-vs"
+  },
+  "devDependencies": {
+    "benchmark": "^2.1.4"
+  },
+  "dependencies": {
+    "@morfeo/core": "^0.0.7",
+    "styled-system": "5.1.5"
+  }
+}

apps/benchmarks/results/core.md

@@ -0,0 +1,65 @@
+# @morfeo/core
+
+## single property parser
+
+```json
+{
+  "color": "primary"
+}
+```
+
+**regular parsing**  1,674,079 ops/sec ±1.28% (92 runs sampled)
+
+**with cache enabled**  3,336,631 ops/sec ±0.36% (91 runs sampled)
+
+Fastest is **with cache enabled**
+
+
+## single complex property parser
+
+```json
+{
+  "shadow": "light"
+}
+```
+
+**regular parsing**  875,625 ops/sec ±0.87% (92 runs sampled)
+
+**with cache enabled**  1,735,908 ops/sec ±0.43% (90 runs sampled)
+
+Fastest is **with cache enabled**
+
+
+## parsing the style of a theme component
+
+```json
+{
+  "componentName": "Box"
+}
+```
+
+**regular parsing**  238,443 ops/sec ±0.67% (91 runs sampled)
+
+**with cache enabled**  241,772 ops/sec ±0.59% (90 runs sampled)
+
+Fastest is **with cache enabled**
+
+
+## parsing a complete style
+
+```json
+{
+  "px": "m",
+  "py": "s",
+  "color": "primary",
+  "bg": "secondary",
+  "shadow": "light",
+  "componentName": "Box"
+}
+```
+
+**regular parsing**  71,908 ops/sec ±0.51% (92 runs sampled)
+
+**with cache enabled**  94,384 ops/sec ±0.90% (88 runs sampled)
+
+Fastest is **with cache enabled**

apps/benchmarks/results/morfeo-vs-styled-system.md

@@ -0,0 +1,18 @@
+# @morfeo/core vs styled-system
+
+## resolving a style
+
+```json
+{
+  "p": "m",
+  "m": "s",
+  "bg": "secondary",
+  "color": "primary"
+}
+```
+
+**morfeo**  408,433 ops/sec ±0.74% (92 runs sampled)
+
+**styled system**  345,296 ops/sec ±0.73% (88 runs sampled)
+
+Fastest is **morfeo**

apps/benchmarks/src/core/completeStyle.js

@@ -0,0 +1,27 @@
+const Benchmark = require('benchmark');
+const { parsers } = require('@morfeo/core');
+const { onCycle, onComplete, onStart, appendInMd } = require('./utils');
+
+const suite = new Benchmark.Suite();
+
+const style = {
+  px: 'm',
+  py: 's',
+  color: 'primary',
+  bg: 'secondary',
+  shadow: 'light',
+  componentName: 'Box',
+};
+
+suite
+  .add('regular parsing', () => {
+    parsers.resolve({ style, cache: false });
+  })
+  .add('with cache enabled', () => {
+    parsers.resolve({ style, cache: true });
+  })
+  .on('start', () => onStart('parsing a complete style', style))
+  .on('cycle', onCycle)
+  .on('complete', () => onComplete(suite));
+
+module.exports = suite;

apps/benchmarks/src/core/componentStyle.js

@@ -0,0 +1,20 @@
+const Benchmark = require('benchmark');
+const { parsers } = require('@morfeo/core');
+const { onCycle, onComplete, onStart, appendInMd } = require('./utils');
+
+const suite = new Benchmark.Suite();
+
+const style = { componentName: 'Box' };
+
+suite
+  .add('regular parsing', () => {
+    parsers.resolve({ style, cache: false });
+  })
+  .add('with cache enabled', () => {
+    parsers.resolve({ style, cache: true });
+  })
+  .on('start', () => onStart('parsing the style of a theme component', style))
+  .on('cycle', onCycle)
+  .on('complete', () => onComplete(suite));
+
+module.exports = suite;

apps/benchmarks/src/core/index.js

@@ -0,0 +1,43 @@
+const { theme } = require('@morfeo/core');
+const { writeMdTitle } = require('./utils');
+const singlePropertySuite = require('./singleProperty');
+const singleComplexPropertySuite = require('./singleComplexProperty');
+const componentSuite = require('./componentStyle');
+const completeStyleSuite = require('./completeStyle');
+
+theme.set({
+  colors: {
+    primary: 'black',
+    secondary: 'white',
+  },
+  space: {
+    s: '10px',
+    m: '20px',
+  },
+  shadows: {
+    light: {
+      color: 'primary',
+      offset: { width: 2, height: 2 },
+      opacity: 0.4,
+      radius: 20,
+    },
+  },
+  components: {
+    Box: {
+      style: {
+        bg: 'primary',
+        color: 'secondary',
+        px: 'm',
+        my: 's',
+        shadow: 'light',
+      },
+    },
+  },
+});
+
+writeMdTitle(`# @morfeo/core`);
+
+singlePropertySuite.run({ async: false });
+singleComplexPropertySuite.run({ async: false });
+componentSuite.run({ async: false });
+completeStyleSuite.run({ async: false });

apps/benchmarks/src/core/singleComplexProperty.js

@@ -0,0 +1,20 @@
+const Benchmark = require('benchmark');
+const { parsers } = require('@morfeo/core');
+const { onCycle, onComplete, onStart, appendInMd } = require('./utils');
+
+const suite = new Benchmark.Suite();
+
+const style = { shadow: 'light' };
+
+suite
+  .add('regular parsing', () => {
+    parsers.resolve({ style, cache: false });
+  })
+  .add('with cache enabled', () => {
+    parsers.resolve({ style, cache: true });
+  })
+  .on('start', () => onStart('single complex property parser', style))
+  .on('cycle', onCycle)
+  .on('complete', () => onComplete(suite));
+
+module.exports = suite;

apps/benchmarks/src/core/singleProperty.js

@@ -0,0 +1,20 @@
+const Benchmark = require('benchmark');
+const { parsers } = require('@morfeo/core');
+const { onCycle, onComplete, onStart } = require('./utils');
+
+const suite = new Benchmark.Suite();
+
+const style = { color: 'primary' };
+
+suite
+  .add('regular parsing', () => {
+    parsers.resolve({ style, cache: false });
+  })
+  .add('with cache enabled', () => {
+    parsers.resolve({ style, cache: true });
+  })
+  .on('start', () => onStart('single property parser', style))
+  .on('cycle', onCycle)
+  .on('complete', () => onComplete(suite));
+
+module.exports = suite;

apps/benchmarks/src/core/utils.js

@@ -0,0 +1,45 @@
+const {
+  getMdPath,
+  onCycle: _onCycle,
+  onStart: _onStart,
+  writeInMd: _writeInMd,
+  appendInMd: _appendInMd,
+  onComplete: _onComplete,
+  writeMdTitle: _writeMdTitle,
+} = require('../utils');
+
+const mdPath = getMdPath('core');
+
+function writeInMd(text) {
+  _writeInMd(mdPath, text);
+}
+
+function appendInMd(text) {
+  appendInMd(mdPath, `\n\n${text}`);
+}
+
+function writeMdTitle(title) {
+  _writeInMd(mdPath, `${title}`);
+}
+
+function onStart(title, style) {
+  _onStart(mdPath, title, style);
+}
+
+function onCycle(event) {
+  _onCycle(mdPath, event);
+}
+
+function onComplete(suite) {
+  _onComplete(mdPath, suite);
+}
+
+module.exports = {
+  onCycle,
+  onStart,
+  getMdPath,
+  writeInMd,
+  appendInMd,
+  onComplete,
+  writeMdTitle,
+};

apps/benchmarks/src/morfeo-vs/index.js

@@ -0,0 +1,7 @@
+const { theme } = require('@morfeo/core');
+const defaultTheme = require('./theme');
+const styledSystemSuite = require('./styled-system');
+
+theme.set(defaultTheme);
+
+styledSystemSuite.run({ async: false });

apps/benchmarks/src/morfeo-vs/styled-system.js

@@ -0,0 +1,66 @@
+const Benchmark = require('benchmark');
+const { parsers } = require('@morfeo/core');
+const defaultTheme = require('./theme');
+const {
+  onCycle,
+  onStart,
+  onComplete,
+  getMdPath,
+  writeMdTitle,
+} = require('../utils');
+const {
+  compose,
+  space,
+  color,
+  typography,
+  layout,
+  padding,
+  margin,
+  flexbox,
+  grid,
+  background,
+  borders,
+  position,
+  shadow,
+} = require('styled-system');
+
+const allProps = compose(
+  grid,
+  space,
+  color,
+  layout,
+  margin,
+  shadow,
+  borders,
+  padding,
+  flexbox,
+  position,
+  typography,
+  background,
+);
+
+const suite = new Benchmark.Suite();
+
+const mdPath = getMdPath('morfeo-vs-styled-system');
+
+const style = {
+  p: 'm',
+  m: 's',
+  bg: 'secondary',
+  color: 'primary',
+};
+
+writeMdTitle(mdPath, `# @morfeo/core vs styled-system`);
+
+suite
+  .add('morfeo', () => {
+    parsers.resolve({ style, cache: true });
+  })
+  .add('styled system', () => {
+    allProps({ ...style, theme: defaultTheme });
+  })
+  .on('start', () => onStart(mdPath, 'resolving a style', style))
+  .on('cycle', event => onCycle(mdPath, event))
+  .on('complete', () => onComplete(mdPath, suite));
+
+module.exports = suite;

apps/benchmarks/src/morfeo-vs/theme.js

@@ -0,0 +1,12 @@
+const defaultTheme = {
+  colors: {
+    primary: 'black',
+    secondary: 'white',
+  },
+  space: {
+    s: '10px',
+    m: '20px',
+  },
+};
+
+module.exports = defaultTheme;