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, Realar and Remini (but possible for configure to custom one). Less code more effectiveness!
Mobx
import { makeAutoObservable } from 'mobx';
class Ticker {
value = 0;
next = () => this.value += 1;
constructor() {
makeAutoObservable(this);
}
}
const ticker = new Ticker();
const App = () => (
<>
Ticker: {ticker.value}
<br />
<button onClick={ticker.next}>Next</button>
</>
);
See wrapped version on CodeSandbox.
module.exports = {
"plugins": [
["jsx-wrapper", {
"decorator": "mobx-react-lite"
}]
]
};
Remini
import { prop } from 'remini';
class Ticker {
@prop value = 0;
next = () => this.value += 1;
}
const ticker = new Ticker();
const App = () => (
<>
Ticker: {ticker.value}
<br />
<button onClick={ticker.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.
module.exports = {
"plugins": [
["jsx-wrapper", {
"decorator": "remini-react"
}]
]
};
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.
module.exports = {
"plugins": [
["jsx-wrapper", {
"include": [
"src/components/*",
"src/pages/*"
],
}]
]
};
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 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".
Install
npm i --save-dev babel-plugin-jsx-wrapper
yarn add babel-plugin-jsx-wrapper
And update your babel config:
{
"plugins": [
["jsx-wrapper", {
"decorator": "mobx-react-lite"
}]
]
}
Enjoy and happy coding!