UnHOC
Installation
Npm
npm install @unhoc/core [UnHOC Packages] --save-dev
Yarn
yarn add @unhoc/core [UnHOC Packages] --dev
Motivation
A Higher-Order Component (HOC) is an incredibly popular design pattern within the React ecosystem useful for reusing common component logic. Many popular third-party libraries implement this pattern such as React Redux, React Router, and Material-UI.
A HOC is simply a function that takes one component and returns a new component with enhanced functionality.
export default hoc(WrappedComponent);
When developing components, HOCs are wonderfully simple and extremely powerful, but testing those components can cause many developers headaches as they attempt to circumvent the HOC. Common techniques to do so are:
- Manually unwrap third-party HOCs.
- Manually mock third-party HOCs.
- Manually export the wrapped, and unwrapped version of the component.
All of these solutions are far from perfect and that's where UnHOC comes in!
Getting Started
UnHOC is an extensible utility library for automatically unwrapping each HOC and allowing you to test with the original component.
- Import
@unhoc/core
and any plugins you wish to use. E.g.@unhoc/react
import createUnHOC from '@unhoc/core';
import { unHOCMemo } from '@unhoc/react';
- Initialize UnHOC function.
const unhoc = createUnHOC({
plugins: [unHOCMemo()],
});
- Unwrap your React components for testing.
const unwrapped = unhoc(<Component />);
See ./packages/[plugin]/examples
for examples on specific UnHOC plugins.
Packages
Plugin | Package | Description | Version |
---|---|---|---|
Core | @unhoc/core |
The core functionality of UnHOC, configures and runs plugins that unwrap HOCs. | |
React↗︎ | @unhoc/react |
Unwraps HOCs built into react E.g. React.memo . |
|
React Redux↗︎ | @unhoc/react-redux |
Unwraps HOCs from react-redux E.g. connect . |
|
Material UI↗︎ | @unhoc/material-ui |
Unwraps HOCs from @material-ui E.g. withStyles . |
Development
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Prerequisites
We use Yarn package manager for development so please ensure you have yarn installed globally.
npm install yarn --global
Clone this repository
git clone git@github.com:cassels/UnHOC.git
Dev Environment
Install Dependencies via Yarn
yarn
Unit Tests
Run tests with Yarn
yarn test
Prettier & Linter
To format and lint code with Prettier and TSLint
yarn lint
Roadmap
Core
- Implement Core
- Unit Testing
- Improve Efficiency
Plugins
-
react
memo
-
react-redux
connect
-
@material-ui/styles
withStyles
-
react-router
withRouter
Integrations
- enzyme
TODOs
-
Documentation
- Motivation
- Installation
- Getting Started
- Developing a Plugin
-
Development
- Add LICENSE
- CONTRIBUTING
- CODE_OF_CONDUCT
- Add Git Hooks
- Add CI
- Add CD
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Contributors
- Graeme Cassels - Initial work - cassels
Contributing
We are actively encouraging contributions from the community – see CONTRIBUTING.md and CODE_OF_CONDUCT.md for details of our PR process and code of conduct.
License
This project is licensed under the MIT License – see the LICENSE file for details.