babel-plugin-stateful-functional-react-components

0.0.5 • Public • Published

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.

npm

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 state
const Counter = ({ text }, { theme }, { val } = { val: 0 }, setState) => (
  <div className={theme}>
    <h1>{text}</h1>
    <div>
      <button onClick={() => setState({ val: val - 1 })}>-</button>
      <span>{val}</span>
      <button onClick={() => setState({ val: val + 1 })}>+</button>
    </div>
  </div>
);

Output

class Counter extends React.Component {
  constructor() {
    super();
    this.state = { val: 0 };
  }
  render() {
 
    const { text } = this.props;
    const { theme } = this.context;
    const { val } = this.state;
 
    return (
      <div className={theme}>
        <h1>{text}</h1>
        <div>
          <button onClick={() => this.setState({ val: val - 1 })}>-</button>
          <span>{val}</span>
          <button onClick={() => this.setState({ val: val + 1 })}>+</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 context
  • state is component’s state, initialState is required
  • setState maps to this.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

{
  "plugins": ["stateful-functional-react-components"]
}

Via CLI

babel --plugins stateful-functional-react-components script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["stateful-functional-react-components"]
});

License

MIT

Package Sidebar

Install

npm i babel-plugin-stateful-functional-react-components

Weekly Downloads

0

Version

0.0.5

License

MIT

Last publish

Collaborators

  • roman01la