babel-plugin-jsx-wrapper
Automatic observe jsx arrow functions for smartify and purify your code
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", by default "realar"
}]
]
};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" // by default "realar"
]
};Options
ucfirst - boolean flag. Wrap only if first letter of the function name is uppercased. false by default.
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/*"]
}]
]
};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.
decorator - function name that used instead of observe function from Realar. (For example: "require('mobx-preact').observer") Or name of presetted vendor: "mobx", "mobx-lite", "remini", and "realar" (by default).
Install
npm i --save-dev babel-plugin-jsx-wrapper
# or
yarn add babel-plugin-jsx-wrapperAnd update your babel config:
// .babelrc
{
"plugins": [
["jsx-wrapper", {
"decorator": "mobx" // by default "realar"
}]
]
}Enjoy and happy coding!
