Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
babel-plugin-jsx-wrapper
Advanced tools
Readme
Automatic decorate 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 decorator function with easy configuring Remini, Mobx, and Realar (but possible for configure to custom one). Less code more effectiveness!
import { box, read, update } from 'remini';
/* import { component } from 'remini/react'; */
const $value = box(0);
const next = () => update($value, (v) => v + 1);
// const App = component(() => {
const App = () => (
<>
Ticker: {read($value)}
<br />
<button onClick={next}>Next</button>
</>
);
See wrapped version on CodeSandbox.
You are no need more to wrap (decorate) JSX components to component
function! It will be automatic.
// .babelrc.js
module.exports = {
"plugins": [
["jsx-wrapper", {
"decorator": "remini-react" // "remini-preact", "realar", "mobx-react", "mobx-react-lite", or some custom
}]
]
};
import { makeAutoObservable } from 'mobx';
/* import { observer } from 'mobx-react-lite'; */
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-react-lite" // "mobx-react", "remini-react", "remini-preact", "realar", or some custom
}]
]
};
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".
ucfirst - boolean flag. Wrap only if first letter of the function name is uppercased. true
by default.
root - string that provide root path for "exclude" and "include" options.
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/*"]
}]
]
};
npm i --save-dev babel-plugin-jsx-wrapper
# or
yarn add babel-plugin-jsx-wrapper
And update your babel config:
// .babelrc
{
"plugins": [
["jsx-wrapper", {
"decorator": "remini-react"
}]
]
}
Enjoy and happy coding!
FAQs
Automatic observe jsx arrow functions
The npm package babel-plugin-jsx-wrapper receives a total of 6 weekly downloads. As such, babel-plugin-jsx-wrapper popularity was classified as not popular.
We found that babel-plugin-jsx-wrapper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.