babel-plugin-stateful-functional-react-components
✨ Stateful functional React components without runtime overhead (inspired by ClojureScript) ✨
Compiles stateful functional React components syntax into ES2015 classes
WARNING: This plugin is experimental. If you are interested in taking this further, please open an issue or submit a PR with improvements.
Why?
Because functional components are concise and it's annoying to write ES2015 classes when all you need is local state.
Advantages
- No runtime overhead
- No dependencies that adds additional KB's to your bundle
Example
Input
// props context state init stateconst Counter = <div className=theme> <h1>text</h1> <div> <button onClick= >-</button> <span>val</span> <button onClick= >+</button> </div> </div>;
Output
Component { super; thisstate = val: 0 ; } { const text = thisprops; const theme = thiscontext; const val = thisstate; return <div className=theme> <h1>text</h1> <div> <button onClick= this>-</button> <span>val</span> <button onClick= this>+</button> </div> </div> ; }
API
(props [,context], state = initialState, setState)
props
is component’s props i.e.this.props
context
is optional parameter which corresponds to React’s contextstate
is component’s state,initialState
is requiredsetState
maps tothis.setState
Requirements
- state parameter must be assigned default value (initial state)
- The last parameter must be named
setState
Installation
npm i babel-plugin-stateful-functional-react-components
Usage
Via .babelrc (Recommended)
.babelrc
Via CLI
babel --plugins stateful-functional-react-components script.js
Via Node API
;
License
MIT