babel-plugin-jsx-wrapper

Automatic decorate jsx arrow functions for smartify and purify your code :+1:

That plugin for babel wraps all not wrapped arrow functions (that contains JSX and defined in file global scope) to decorator function with easy configuring Remini, Mobx, and Realar (but possible for configure to custom one). Less code more effectiveness!

Remini

import { box, read, update } from 'remini';
/* import { component } from 'remini/react'; */

const $value = box(0);
const next = () => update($value, (v) => v + 1);

// const App = component(() => {
const App = () => (
  <>
    Ticker: {read($value)}
    <br />
    <button onClick={next}>Next</button>
  </>
);

See wrapped version on CodeSandbox.

You are no need more to wrap (decorate) JSX components to component function! It will be automatic.

// .babelrc.js
module.exports = {
  "plugins": [
    ["jsx-wrapper", {
      "decorator": "remini-react" // "remini-preact", "realar", "mobx-react", "mobx-react-lite", or some custom
    }]
  ]
};

Mobx

import { makeAutoObservable } from 'mobx';
/* import { observer } from 'mobx-react-lite'; */

class Ticker {
  value = 0;
  next = () => this.value += 1;

  constructor() {
    makeAutoObservable(this);
  }
}

const ticker = new Ticker();

// const App = observer(() => (
const App = () => (
  <>
    Ticker: {ticker.value}
    <br />
    <button onClick={ticker.next}>Next</button>
  </>
);

See wrapped version on CodeSandbox.

// .babelrc.js
module.exports = {
  "plugins": [
    ["jsx-wrapper", {
      "decorator": "mobx-react-lite" // "mobx-react", "remini-react", "remini-preact", "realar", or some custom
    }]
  ]
};

Options

decorator - function name that using to wrapping jsx arrow function component. (For example: "require('mobx-preact').observer") Or name of presetted vendor: "remini-react", "remini-preact", "realar", "mobx-react", and "mobx-react-lite".

ucfirst - boolean flag. Wrap only if first letter of the function name is uppercased. true by default.

root - string that provide root path for "exclude" and "include" options.

exclude - array of matcher patterns that needs to exclude.

include - array of matcher patterns that need to include, other ones will be excluded.

// .babelrc.js
module.exports = {
  "plugins": [
    ["jsx-wrapper", {
      "include": [
        "src/components/*",
        "src/pages/*"
      ],
      // "exclude": ["node_modules/*"]
    }]
  ]
};

Install

npm i --save-dev babel-plugin-jsx-wrapper
# or
yarn add babel-plugin-jsx-wrapper

And update your babel config:

// .babelrc
{
  "plugins": [
    ["jsx-wrapper", {
      "decorator": "remini-react"
    }]
  ]
}

Enjoy and happy coding!