@c4605/babel-plugin-jsx-wrapper

babel-plugin-jsx-wrapper

Automatic observe 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 wrapper function with easy configuring Mobx and Realar (but possible for configure to custom one). Less code more effectiveness!

Mobx

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

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" // or possible value "mobx-lite"
    }]
  ]
};

Realar

import React from 'react';
import { prop, shared, /* observe */ } from 'realar';

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

const sharedTicker = () => shared(Ticker);

// const App = observe(() => {
const App = () => {
  const { value, next } = sharedTicker();
  return (
    <>
      Ticker: {value}
      <br />
      <button onClick={next}>Next</button>
    </>
  );
};

See wrapped version on CodeSandbox.

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

// .babelrc.js
module.exports = {
  "plugins": [
    "jsx-wrapper"
  ]
};

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/*"]
    }]
  ]
};

decorator - function name that using to wrapping jsx arrow function component. Available values: mobx-react-lite, mobx-react, remini-react, remini-preact, realar. Will be disabled if decoratorModule and decoratorFn defined

decoratorModule, decoratorFn - module and function name that using to wrapping jsx function component.

esImport - boolean flag. Use esmodule import intead of require.

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

memo - boolean flag. Wrap all arrow function React component to React.memo. false by default.

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

displayName - boolean flag. Add displaName property to the original component.

Install

npm i --save-dev @c4605/babel-plugin-jsx-wrapper
# or
yarn add -D @c4605/babel-plugin-jsx-wrapper
# or
pnpm install -D @c4605/babel-plugin-jsx-wrapper

And update your babel config:

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

Enjoy and happy coding!