Skip to content
This repository has been archived by the owner on Oct 15, 2023. It is now read-only.

roman01la/babel-plugin-stateful-functional-react-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Table of Contents

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

Important notes

  • state parameter must be assigned default value (initial state)
  • The last parameter must be named setState
  • Even though this syntax makes components look functional, don't forget that they are also stateful, which means that hot-reloading won't work for them.

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

About

Stateful functional React components without runtime overhead

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published