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!

$3

``javascript
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}


ticker.next()}>Next

);
`

See wrapped version on CodeSandbox.

`javascript
// .babelrc.js
module.exports = {
"plugins": [
["jsx-wrapper", {
"decorator": "mobx" // or possible value "mobx-lite"
}]
]
};
`

$3

`javascript
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}


Next

);
};
`

See wrapped version on CodeSandbox.

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

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

$3

exclude - array of matcher patterns that needs to exclude.

include - array of matcher patterns that need to include, other ones will be excluded.

`javascript
// .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.

$3

`bash
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:

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

Enjoy and happy coding!