babel-plugin-realar

babel-plugin-realar

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

That plugin for babel wraps all not wrapped arrow functions (that contains JSX) to Realar observe function. Less code more effectivity!

import React from 'react';
import { box, shared } from 'realar';

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

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

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

See wrapped version of it on CodeSandbox

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

Installation

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

And update your babel config:

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

Enjoy and happy coding!