Themer v2 refactor

[alebiavati]

Status

READY

Description

Cleanup code base to better reflect how the package is being used in CA UI components and to extend functionality.

This PR includes some small breaking changes (listed below), therefore this will be published as v2.0.0 on NPM.

Affected areas:

• tests converted to jest
• tests split into multiple files mapping source files
• BREAKING CHANGE: remove unused property from Themer class: theme. We use Themer instance for many themed components, each with different themes, therefore we can't store theme as a property of Themer.
• remove unused property from Themer class: id. There is no need to assign a uuid to Themer instances if we only instantiate one per project.
• remove unused methods from Themer class: getVariants, getThemeVariables, getThemeStyles, getThemeId, setTheme. No need for these convenience methods if no theme instance is stored in Themer.
• BREAKING CHANGE: remove unused method from Themer class: render. As a developer I want to use the same rendering mechanism, no matter if I am using Themer for styling or not. After wrapping the snippet via the themer decorator, the developer can render the themed snippet simply by executing it.
• remove unused method from Themer class: resolveMiddleware. Middlewares are resolved when calling resolveAttributes, therefore the convenience method resolveMiddleware is not needed.
• Add new method resolve() to Theme class to get resolved theme, instead of different methods for variants, styles and variables. The Theme class now owns the theme structure, while Themer only owns middlewares. If the theme structure should change in the future, only the Theme would need to be refactored.
• BREAKING CHANGE: in method Themer.resolveAttributes, the entire resolved theme is now passed to this.middleware.resolve(), this allows to keep the knowledge of the theme structure within the Theme class alone. This is a breaking change for all themer-based middlewares like ca-ui-react-themer-jss.
• fix decorator to allow themeing multiple snippets. Before the fix, if the decorator was used on two snippets consecutively, they would both get the theme from the second snippet.
• fix variants props mapper to allow multiple prop checks per variant class.
• create new utility function mapThemeProps that maps theme and variants to snippet props.
• BREAKING CHANGE: variants are mapped into snippet props from the decorator and not from Themer as the latter doesn't have access to props. This is a breaking change for other themer-based decorators like ca-ui-react-themer

[codecov-io]

Codecov Report

Merging #16 into master will increase coverage by 2.77%. The diff coverage is 100%.

@@           Coverage Diff            @@
##           master    #16      +/-   ##
========================================
+ Coverage   97.22%   100%   +2.77%     
========================================
  Files           5      6       +1     
  Lines         108     87      -21     
  Branches       24      0      -24     
========================================
- Hits          105     87      -18     
+ Misses          3      0       -3

Impacted Files	Coverage Δ
src/index.js	100% <ø> (ø)	:white_check_mark:
src/utils/index.js	100% <100%> (+9.09%)	:white_check_mark:
src/Themer.js	100% <100%> (ø)	:white_check_mark:
src/theme/index.js	100% <100%> (+2.38%)	:white_check_mark:
src/decorator/index.js	100% <100%> (ø)
src/middleware/index.js	100% <0%> (ø)	:white_check_mark:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 1ca43f9...0b9154d. Read the comment docs.