Security News
Internet Archive Hacked, 31 Million Record Compromised
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
@react-simplifier/babel-plugin
Advanced tools
A Babel plugin that makes writing React components concise and fast.
A Babel plugin that makes writing React components concise and fast.
:warning: WARNING: This project is still in early develop stage! DO NOT use it on production! :warning:
Let's have a look on an example. This is a simple React component:
const Counter = () => {
const [counter, setCounter] = useState(0);
const increment = () => {
setCounter((prevValue) => prevValue + 1);
};
return (
<div>
<span>{counter}</span>
<button onClick={increment}>Increment</button>
</div>
)
};
And here, the same component but with React Simplifier:
const Counter = () => {
const $counter = 0;
const increment = () => { counter++; }
return (
<div>
<span>{counter}</span>
<button onClick={increment}>Increment</button>
</div>
)
};
As you can see, working with this plugin is much easier, because you don't have to import useState
and use the useState
getter/setter. You can deal with the component's state as with normal JS variables. Under the hood the React useState
hook is still used so the compiled code will look like this:
import { useState } from 'react';
const Counter = () => {
const [$counter, ____set$counter] = useState(0);
const increment = () => ____set$counter((prevValue) => prevValue + 1);
return (
<div>
<span>{counter}</span>
<button onClick={increment}>Increment</button>
</div>
)
};
But you don't need to care, because the plugin does it for you. :wink:
The plugin is available as an npm package.
npm i @react-simplifier/babel-plugin
After installation you have to add the plugin to your Babel config file.
module.exports = {
...
plugins: [
'@react-simplifier/babel-plugin'
]
}
Property | Required | Type | Default value | Description |
---|---|---|---|---|
stateVariablePattern | :x: | RegExp | /^\$\w+/ | Set pattern to recognize React state variables. The default pattern starts with the dollar sign - $foo |
Not yet, we plan to add support for class components in the future - this is one of our priorities.
FAQs
A Babel plugin that makes writing React components concise and fast.
The npm package @react-simplifier/babel-plugin receives a total of 0 weekly downloads. As such, @react-simplifier/babel-plugin popularity was classified as not popular.
We found that @react-simplifier/babel-plugin 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.
Security News
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.