Automatic observe jsx arrow functions for smartify and purify your code 👍
Enhanced fork of re-js/babel-plugin-jsx-wrapper with additional features and improvements.
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!
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-wrapperAnd update your babel config:
// .babelrc
{
"plugins": [
["@c4605/jsx-wrapper", {
"decorator": "mobx"
}]
]
}Enjoy and happy coding!
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": [
["@c4605/jsx-wrapper", {
"decorator": "mobx" // or possible value "mobx-lite"
}]
]
};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": [
"@c4605/jsx-wrapper"
]
};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": [
["@c4605/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.
This fork provides several enhancements compared to re-js/babel-plugin-jsx-wrapper:
Use modern ES module imports instead of require() for better tree-shaking and bundle optimization.
// .babelrc.js
module.exports = {
"plugins": [
["@c4605/jsx-wrapper", {
"decorator": "mobx-react-lite",
"esImport": true // Use import instead of require
}]
]
};Generated code:
// With esImport: true
import { observer } from "mobx-react-lite";
const App = observer(() => <div>...</div>);
// Without esImport (default)
const App = require("mobx-react-lite").observer(() => <div>...</div>);Flexible decorator configuration with decoratorModule and decoratorFn options for custom wrapper functions.
// .babelrc.js
module.exports = {
"plugins": [
["@c4605/jsx-wrapper", {
"decoratorModule": "my-custom-library",
"decoratorFn": "myWrapperFunction",
"esImport": true
}]
]
};Automatically add displayName to components for better debugging in React DevTools.
// .babelrc.js
module.exports = {
"plugins": [
["@c4605/jsx-wrapper", {
"decorator": "mobx-react-lite",
"displayName": true
}]
]
};Source code:
const MyComponent = () => <div>Hello</div>;Generated code:
const MyComponent$$$$$$jsxWrapped = () => <div>Hello</div>;
MyComponent$$$$$$jsxWrapped.displayName = "mobx-react-lite.observer(MyComponent)";
const MyComponent = require("mobx-react-lite").observer(MyComponent$$$$$$jsxWrapped);Automatically wrap components with React.memo for performance optimization.
// .babelrc.js
module.exports = {
"plugins": [
["@c4605/jsx-wrapper", {
"decorator": "mobx-react-lite",
"memo": true
}]
]
};Enhanced mechanism to prevent double-wrapping of components:
- Tracks processed paths with a
Set - Uses unique suffix (
$$$$$$jsxWrapped) to identify already wrapped components - More robust than the upstream implementation
| Feature | Upstream | This Fork |
|---|---|---|
| ES Module imports | ❌ | ✅ esImport option |
| Custom decorator config | ❌ | ✅ decoratorModule + decoratorFn |
| DisplayName support | ❌ | ✅ displayName option |
| React.memo support | ❌ | ✅ memo option |
| Duplicate prevention | Basic | Enhanced with Set + suffix |
| Preset decorators | ✅ | ✅ Same presets |
| Include/exclude patterns | ✅ | ✅ Same |
| Ucfirst option | ✅ | ✅ Same |