feat: expose mapThemeProps

expose mapThemeProps to allow all themer-based decorators to apply theme and variants props
consistently

src/decorator/index.js

@@ -13,6 +13,6 @@ export function createDecorator(customThemer) {
  const themerInstance = customThemer || themer;
  return rawTheme => inputSnippet => {
  const { snippet, theme } = themerInstance.resolveAttributes(inputSnippet, [rawTheme]);
- return mapThemeProps(snippet, theme);
+ return (props) => snippet(mapThemeProps(props, theme));
  };
 }

src/index.js

@@ -4,11 +4,11 @@
  * of the MIT license. See the LICENSE file for details.
  */
 
-import { createThemer as create } from './utils';
+import { createThemer as create, mapThemeProps } from './utils';
 import { createDecorator } from './decorator';
 
 const themer = create();
 
-export { themer, create, createDecorator };
+export { themer, create, createDecorator, mapThemeProps };
 
 export default createDecorator(themer);

src/utils/index.js

@@ -148,12 +148,10 @@ export function applyVariantsProps(props, resolvedTheme) {
  return { ...mappedProps, theme: mappedTheme };
 }
 
-export function mapThemeProps(snippet, resolvedTheme) {
- return (props) => {
- if (resolvedTheme.variants && resolvedTheme.styles) {
- const variantsProps = applyVariantsProps(props, resolvedTheme);
- return snippet(variantsProps);
- }
- return snippet({ ...props, theme: resolvedTheme });
- };
+export function mapThemeProps(props, resolvedTheme) {
+ if (resolvedTheme.variants && resolvedTheme.styles) {
+ const variantsProps = applyVariantsProps(props, resolvedTheme);
+ return variantsProps;
+ }
+ return { ...props, theme: resolvedTheme };
 }

tests/index.spec.js

@@ -4,7 +4,7 @@
  * of the MIT license. See the LICENSE file for details.
  */
 
-import themerDecorator, { create, themer as themerInstance } from '../src';
+import themerDecorator, { create, themer as themerInstance, mapThemeProps } from '../src';
 import Themer from '../src/Themer';
 import { testThemeSimple, snippet } from './fixtures';
 
@@ -39,4 +39,10 @@ describe('exports', () => {
  expect(mockMiddleware).toHaveBeenCalledTimes(1);
  });
  });
+
+ describe('mapThemeProps', () => {
+ it('should export mapThemeProps function that correctly maps resolved theme to snippet props', () => {
+ expect(typeof mapThemeProps).toBe('function');
+ });
+ });
 });

tests/utils/index.spec.js

@@ -13,7 +13,6 @@ import {
  applyVariantsProps,
  mapThemeProps,
 } from '../../src/utils';
-import { snippet } from '../fixtures';
 
 describe('utils', () => {
  describe('createThemer', () => {
@@ -109,15 +108,22 @@ describe('utils', () => {
  it('should be a funciton', () => {
  expect(typeof mapThemeProps).toBe('function');
  });
+
  it('should map theme prop', () => {
  const testResolvedTheme = { styles: { root: 'root-class-123' } };
- const mappedSnippet = mapThemeProps(snippet, testResolvedTheme);
- expect(mappedSnippet({ content: 'Hello' })).toBe('<h1 class="root-class-123">Hello</h1>');
+ const testProps = { content: 'Hello' };
+ const mappedProps = mapThemeProps(testProps, testResolvedTheme);
+ expect(mappedProps).toEqual({ ...testProps, theme: testResolvedTheme });
  });
+
  it('should map variants props, if defined', () => {
  const testResolvedTheme = { styles: { root: 'root-class-123', test: 'test-123' }, variants: { test: true } };
- const mappedSnippet = mapThemeProps(snippet, testResolvedTheme);
- expect(mappedSnippet({ content: 'Hello', test: true })).toBe('<h1 class="root-class-123 test-123">Hello</h1>');
+ const testProps = { content: 'Hello', test: true };
+ const mappedProps = mapThemeProps(testProps, testResolvedTheme);
+ expect(mappedProps).toEqual({
+ content: 'Hello',
+ theme: { styles: { root: 'root-class-123 test-123', test: 'test-123' }, variants: { test: true } },
+ });
  });
  });
 });