feat: flatted parser.resolve method

README.md

@@ -2,7 +2,7 @@
 
 Morfeo it's a set of tools that helps you to build **consistent UIs** based on a single source of truth: the **theme**.
 
-You can use it with any framework like `React`, `React Native`, `Vue`, `Angular`, `svelte` or `vanilla`.
+You can use it with any framework like [React](https://reactjs.org/), [React Native](https://reactnative.dev/), [Vue](https://v3.vuejs.org/), [Angular](https://angular.io/), [Svelte](https://svelte.dev/) or just Vanilla JS/TS.
 
 In other words, morfeo will transform this:
 

apps/benchmarks/results/core.md

@@ -8,9 +8,9 @@
 }
 ```
 
-**regular parsing**  1,674,079 ops/sec ±1.28% (92 runs sampled)
+**regular parsing**  1,560,270 ops/sec ±2.01% (84 runs sampled)
 
-**with cache enabled**  3,336,631 ops/sec ±0.36% (91 runs sampled)
+**with cache enabled**  2,950,728 ops/sec ±0.88% (89 runs sampled)
 
 Fastest is **with cache enabled**
 
@@ -23,9 +23,9 @@ Fastest is **with cache enabled**
 }
 ```
 
-**regular parsing**  875,625 ops/sec ±0.87% (92 runs sampled)
+**regular parsing**  822,836 ops/sec ±0.63% (93 runs sampled)
 
-**with cache enabled**  1,735,908 ops/sec ±0.43% (90 runs sampled)
+**with cache enabled**  1,763,224 ops/sec ±1.10% (85 runs sampled)
 
 Fastest is **with cache enabled**
 
@@ -38,9 +38,9 @@ Fastest is **with cache enabled**
 }
 ```
 
-**regular parsing**  238,443 ops/sec ±0.67% (91 runs sampled)
+**regular parsing**  136,781 ops/sec ±1.19% (92 runs sampled)
 
-**with cache enabled**  241,772 ops/sec ±0.59% (90 runs sampled)
+**with cache enabled**  245,730 ops/sec ±0.96% (92 runs sampled)
 
 Fastest is **with cache enabled**
 
@@ -58,8 +58,8 @@ Fastest is **with cache enabled**
 }
 ```
 
-**regular parsing**  71,908 ops/sec ±0.51% (92 runs sampled)
+**regular parsing**  58,332 ops/sec ±1.22% (85 runs sampled)
 
-**with cache enabled**  94,384 ops/sec ±0.90% (88 runs sampled)
+**with cache enabled**  96,209 ops/sec ±0.86% (91 runs sampled)
 
 Fastest is **with cache enabled**

apps/benchmarks/results/jss.md

@@ -10,8 +10,8 @@
 }
 ```
 
-**regular parsing**  2,588,520 ops/sec ±1.37% (89 runs sampled)
+**regular parsing**  2,964,522 ops/sec ±0.74% (91 runs sampled)
 
-**with cache enabled**  213,422 ops/sec ±2.30% (85 runs sampled)
+**jss**  196,230 ops/sec ±2.66% (87 runs sampled)
 
 Fastest is **regular parsing**

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

@@ -11,8 +11,8 @@
 }
 ```
 
-**morfeo**  408,433 ops/sec ±0.74% (92 runs sampled)
+**morfeo**  415,502 ops/sec ±0.98% (94 runs sampled)
 
-**styled system**  345,296 ops/sec ±0.73% (88 runs sampled)
+**styled system**  331,424 ops/sec ±1.17% (89 runs sampled)
 
 Fastest is **morfeo**

apps/benchmarks/src/core/completeStyle.js

@@ -15,10 +15,12 @@ const style = {
 
 suite
   .add('regular parsing', () => {
-    parsers.resolve({ style, cache: false });
+    parsers.disableCache();
+    parsers.resolve(style);
   })
   .add('with cache enabled', () => {
-    parsers.resolve({ style, cache: true });
+    parsers.enableCache();
+    parsers.resolve(style);
   })
   .on('start', () => onStart('parsing a complete style', style))
   .on('cycle', onCycle)

apps/benchmarks/src/core/componentStyle.js

@@ -8,10 +8,12 @@ const style = { componentName: 'Box' };
 
 suite
   .add('regular parsing', () => {
-    parsers.resolve({ style, cache: false });
+    parsers.disableCache();
+    parsers.resolve(style);
   })
   .add('with cache enabled', () => {
-    parsers.resolve({ style, cache: true });
+    parsers.enableCache();
+    parsers.resolve(style);
   })
   .on('start', () => onStart('parsing the style of a theme component', style))
   .on('cycle', onCycle)

apps/benchmarks/src/core/singleComplexProperty.js

@@ -8,10 +8,12 @@ const style = { shadow: 'light' };
 
 suite
   .add('regular parsing', () => {
-    parsers.resolve({ style, cache: false });
+    parsers.disableCache();
+    parsers.resolve(style);
   })
   .add('with cache enabled', () => {
-    parsers.resolve({ style, cache: true });
+    parsers.enableCache();
+    parsers.resolve(style);
   })
   .on('start', () => onStart('single complex property parser', style))
   .on('cycle', onCycle)

apps/benchmarks/src/core/singleProperty.js

@@ -8,10 +8,12 @@ const style = { color: 'primary' };
 
 suite
   .add('regular parsing', () => {
-    parsers.resolve({ style, cache: false });
+    parsers.disableCache();
+    parsers.resolve(style);
   })
   .add('with cache enabled', () => {
-    parsers.resolve({ style, cache: true });
+    parsers.enableCache();
+    parsers.resolve(style);
   })
   .on('start', () => onStart('single property parser', style))
   .on('cycle', onCycle)

apps/benchmarks/src/jss/jssVsCore.js

@@ -1,6 +1,6 @@
 const Benchmark = require('benchmark');
 const { parsers } = require('@morfeo/core');
-const { getStyle } = require('@morfeo/jss');
+const { getStyles } = require('@morfeo/jss');
 const { onCycle, onComplete, onStart } = require('./utils');
 
 const suite = new Benchmark.Suite();
@@ -13,12 +13,12 @@ suite
       const style = styles[key];
       return {
         ...acc,
-        [key]: parsers.resolve({ style }),
+        [key]: parsers.resolve(style),
       };
     }, {});
   })
-  .add('with cache enabled', () => {
-    getStyle(styles);
+  .add('jss', () => {
+    getStyles(styles);
   })
   .on('start', () =>
     onStart('@morfeo/jss speed compared to @morfeo/core', styles),

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

@@ -54,7 +54,7 @@ writeMdTitle(mdPath, `# @morfeo/core vs styled-system`);
 
 suite
   .add('morfeo', () => {
-    parsers.resolve({ style, cache: true });
+    parsers.resolve(style);
   })
   .add('styled system', () => {
     allProps({ ...style, theme: defaultTheme });

apps/native-sandbox/src/App.tsx

@@ -10,7 +10,7 @@ LogBox.ignoreAllLogs();
 
 theme.set(defaultTheme as any);
 
-const Box = styled.View<Style>(style => parsers.resolve({ style }) as any);
+const Box = styled.View<Style>(style => parsers.resolve(style) as any);
 
 const StyleProvider: React.FC = ({ children }) => {
   const currentTheme = useTheme();

apps/native-sandbox/src/components/Typography.tsx

@@ -4,9 +4,7 @@ import { CSSObject } from 'styled-components';
 import styled from 'styled-components/native';
 
 const Container = styled.Text<Style>(({ theme: _, ...props }) => {
-  return parsers.resolve({
-    style: props,
-  }) as CSSObject;
+  return parsers.resolve(props) as CSSObject;
 });
 
 export const Typography: React.FC<Style> = ({ children, ...props }) => {

packages/core/src/parsers/components.ts

@@ -27,10 +27,8 @@ export function components({ value, style }: ParserParams<'componentName'>) {
   const variantStyle = getVariantStyle(variants, variant);
 
   return parsers.resolve({
-    style: {
-      ...componentStyle,
-      ...variantStyle,
-    },
+    ...componentStyle,
+    ...variantStyle,
   });
 }
 

packages/core/src/parsers/createParsers.ts

@@ -1,16 +1,11 @@
 import {
-  allProperties,
-  AllProperties,
-  BreakPoint,
+  Style,
   Property,
+  BreakPoint,
+  AllProperties,
+  allProperties,
 } from '@morfeo/spec';
-import {
-  Parser,
-  AllParsers,
-  ParserParams,
-  ResolvedStyle,
-  ResolverParams,
-} from '../types';
+import { Parser, AllParsers, ParserParams, ResolvedStyle } from '../types';
 import { baseParser } from './baseParser';
 import { sizeParsers } from './sizes';
 import { colorsParsers } from './colors';
@@ -57,6 +52,7 @@ type ParsersContext = {
 export function createParsers() {
   let context = { ...INITIAL_PARSERS } as any as ParsersContext;
   let cache: any = {};
+  let cacheEnabled = true;
 
   function get() {
     return context;
@@ -66,8 +62,12 @@ export function createParsers() {
     context[property as any] = parser;
   }
 
-  function reset() {
-    context = { ...INITIAL_PARSERS } as any as ParsersContext;
+  function enableCache() {
+    cacheEnabled = true;
+  }
+
+  function disableCache() {
+    cacheEnabled = false;
   }
 
   function getCache() {
@@ -78,6 +78,11 @@ export function createParsers() {
     cache = {};
   }
 
+  function reset() {
+    context = { ...INITIAL_PARSERS } as any as ParsersContext;
+    resetCache();
+  }
+
   function resolveResponsiveProperty({
     property,
     value,
@@ -130,10 +135,7 @@ export function createParsers() {
     return {};
   }
 
-  function resolve({
-    style = {},
-    cache: cacheEnabled = true,
-  }: ResolverParams): ResolvedStyle {
+  function resolve(style: Style): ResolvedStyle {
     const { componentName, ...rest } = style;
     const properties = Object.keys(rest);
 
@@ -187,6 +189,8 @@ export function createParsers() {
     resolve,
     getCache,
     resetCache,
+    enableCache,
+    disableCache,
     resolveProperty,
   };
 

packages/core/src/types.ts

@@ -4,10 +4,6 @@ export type ParserProperty = keyof AllProperties;
 
 export interface ResolvedStyle {}
 
-export type ResolverParams = {
-  style?: Style;
-  cache?: boolean;
-};
 export interface ParserParams<P extends keyof Style> {
   value: Style[P];
   property: P;

packages/core/tests/parsers/borders.test.ts

@@ -24,7 +24,7 @@ afterAll(() => {
 
 describe('borders', () => {
   test('should generate a style with border property', () => {
-    const result = parsers.resolve({ style: { border: 'primary' } });
+    const result = parsers.resolve({ border: 'primary' });
     expect(result).toEqual({
       border: '1px solid red',
     });
@@ -33,9 +33,7 @@ describe('borders', () => {
 
 describe('borderStyles', () => {
   test('should generate a style with fontSize property', () => {
-    const result = parsers.resolve({
-      style: { borderStyle: 'solid' },
-    });
+    const result = parsers.resolve({ borderStyle: 'solid' });
     expect(result).toEqual({
       borderStyle: 'solid',
     });
@@ -44,9 +42,7 @@ describe('borderStyles', () => {
 
 describe('borderWidths', () => {
   test('should generate a style with fontWeight property', () => {
-    const result = parsers.resolve({
-      style: { borderWidth: 'm' },
-    });
+    const result = parsers.resolve({ borderWidth: 'm' });
     expect(result).toEqual({
       borderWidth: '3px',
     });

packages/core/tests/parsers/cache.test.ts

@@ -18,19 +18,15 @@ describe('cache', () => {
   });
 
   test('should set the cache after resolving a style', () => {
-    parsers.resolve({
-      style: { color: 'primary' },
-    });
+    parsers.resolve({ color: 'primary' });
 
     expect(parsers.getCache()).toEqual({
       color: { primary: { color: 'white' } },
     });
   });
 
   test('should reset the cache after a change of the theme', () => {
-    parsers.resolve({
-      style: { color: 'primary' },
-    });
+    parsers.resolve({ color: 'primary' });
 
     theme.set({
       colors: {
@@ -42,18 +38,14 @@ describe('cache', () => {
   });
 
   test('should return a different value for the same style if the theme is updated', () => {
-    const firstStyle = parsers.resolve({
-      style: { color: 'primary' },
-    });
+    const firstStyle = parsers.resolve({ color: 'primary' });
     theme.set({
       colors: {
         primary: 'black',
         secondary: 'white',
       },
     } as any);
-    const secondStyle = parsers.resolve({
-      style: { color: 'primary' },
-    });
+    const secondStyle = parsers.resolve({ color: 'primary' });
     expect(firstStyle).toEqual({ color: 'white' });
     expect(secondStyle).toEqual({ color: 'black' });
     expect(parsers.getCache()).toEqual({
@@ -62,20 +54,16 @@ describe('cache', () => {
   });
 
   test('should return a different value for the same style if the theme is updated and the cache is disabled', () => {
-    const firstStyle = parsers.resolve({
-      style: { color: 'primary' },
-      cache: false,
-    });
+    parsers.disableCache();
+    const firstStyle = parsers.resolve({ color: 'primary' });
+    parsers.enableCache();
     theme.set({
       colors: {
         primary: 'black',
         secondary: 'white',
       },
     } as any);
-    const secondStyle = parsers.resolve({
-      style: { color: 'primary' },
-      cache: false,
-    });
+    const secondStyle = parsers.resolve({ color: 'primary' });
     expect(firstStyle).toEqual({ color: 'white' });
     expect(secondStyle).toEqual({ color: 'black' });
   });