Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barelyhuman/babel-plugin-mutable-react-state
(WIP) transform mutable variables to react-state
https://github.com/barelyhuman/babel-plugin-mutable-react-state
babel mutable react reactjs state
Last synced: 2 months ago
JSON representation
(WIP) transform mutable variables to react-state
- Host: GitHub
- URL: https://github.com/barelyhuman/babel-plugin-mutable-react-state
- Owner: barelyhuman
- License: mit
- Created: 2021-12-15T03:40:04.000Z (about 3 years ago)
- Default Branch: dev
- Last Pushed: 2022-01-03T23:36:56.000Z (almost 3 years ago)
- Last Synced: 2024-10-02T08:46:25.171Z (3 months ago)
- Topics: babel, mutable, react, reactjs, state
- Language: TypeScript
- Homepage: https://barelyhuman.github.io/babel-plugin-mutable-react-state/
- Size: 48.8 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-mutable-react-state
> (WIP) Use mutable variable declarations as state in react
[](https://github.com/barelyhuman/babel-plugin-mutable-react-state/actions/workflows/test.yml)
**UNSTABLE**
**The plugin is still under development so isn't recommended for production**
## Caveats (for now)
Check [this issue](https://github.com/barelyhuman/babel-plugin-mutable-react-state/issues/4)
## Docs
[Web Documentation](https://barelyhuman.github.io/babel-plugin-mutable-react-state/#/)
## Notes
- While the caveats exist due to the extensive types of expressions that javascript has, it's recommended that you use a cloned variable and then just assigned the modification to the reactive variable if you plan to use it right now.
```jsx
function Component() {
let $text = ''
return (
<>
{
$text = e.target.value
// some code
// won't work...
$text = $text.toUpperCase()
}}
/>
>
)
}
// CAN be written as
function Component() {
let $text = ''
return (
<>
{
const val = e.target.value
// some code
// will work...
$text = val.toUpperCase()
}}
/>
>
)
}
```
- This is still react state so you cannot do dependent state updates at once,
```jsx
// the value of `length` will still be the older value of $text and not the latest one
changeHandler(){
$text = value
$length = $text.length
}
// you'll still have to consider that dependent values need to be handled with useEffect
useEffect(()=>{
$length = $text.length
},[$text])
changeHandler(){
$text = value
}
```
## Install
The plugin assumes you already have `jsx` enabled on babel or are using `preset-react` in your setup.
```sh
npm i babel-plugin-mutable-react-state
# or
yarn add babel-plugin-mutable-react-state
```
```jsonc
// .babelrc
[
{
"plugins": ["babel-plugin-mutable-react-state"]
}
]
```
## Usage
You write state with a prefix `$` and that's converted to `useState` accordingly.
```jsx
import * as React from 'react'
function Component() {
let $a = 1
const onPress = () => {
$a += 1
}
return (
{$a}
Press
)
}
↓ ↓ ↓ ↓ ↓ ↓
import * as React from 'react'
function Component() {
const [a, setA] = React.useState(1)
const onPress = () => {
setA(a + 1)
}
return (
{a}
Press
)
}
```
## License
[MIT](/LICENSE)