babel-plugin-realar

Automatic observe jsx arrow functions for smartify and purify your code 👍

That plugin for babel wraps all not wrapped arrow functions (that contains JSX) to Realar observe function (but possible for configure to custom one). Less code more effectiveness!

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

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

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

// const App = memo(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.

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": [
    ["realar", {
      "include": [
        "src/components/*",
        "src/pages/*"
      ],
      // "exclude": ["node_modules/*"]
    }]
  ]
};

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

memo - boolean flag. Wrap all react arrow function React component to React.memo. If "decorator" property is not used will be true by default.

decorator - function name that used instead of observe function from Realar. (For example: "require('mobx').observer")

Install

npm i --save-dev babel-plugin-realar
# or
yarn add babel-plugin-realar

And update your babel config:

// .babelrc
{
  "plugins": [
    "realar"
  ]
}

Enjoy and happy coding!