Skip to content

Commit 907c769

Browse files
barelyhumanbarelyhuman
committed
docs: update readme and add np
1 parent 77534bf commit 907c769

File tree

2 files changed

+109
-87
lines changed

2 files changed

+109
-87
lines changed

‎README.md

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,35 @@
1-
# babel-transform-mutable-react-state
1+
# babel-plugin-mutable-react-state
22

33
> (WIP) Use mutable variable declarations as state in react
44
5-
[![Test](https://github.com/barelyhuman/babel-transform-mutable-react-state/actions/workflows/test.yml/badge.svg)](https://github.com/barelyhuman/babel-transform-mutable-react-state/actions/workflows/test.yml)
5+
[![Test](https://github.com/barelyhuman/babel-plugin-mutable-react-state/actions/workflows/test.yml/badge.svg)](https://github.com/barelyhuman/babel-plugin-mutable-react-state/actions/workflows/test.yml)
66

77
**UNSTABLE**
88
**The plugin is still under development so isn't recommended for production**
99

10+
## Caveats (for now)
11+
12+
- Doesn't support pragma right now
13+
- Update Expressions aren't supported (eg: variableName++) on numbers won't work.
14+
1015
## Install
1116

12-
TBD
17+
The plugin assumes you already have `jsx` enabled on babel or are using `preset-react` in your setup.
18+
19+
```sh
20+
npm i babel-plugin-mutable-react-state
21+
# or
22+
yarn add babel-plugin-mutable-react-state
23+
```
24+
25+
```jsonc
26+
// .babelrc
27+
[
28+
{
29+
"plugins": ["babel-plugin-mutable-react-state"]
30+
}
31+
]
32+
```
1333

1434
## Usage
1535

@@ -19,37 +39,37 @@ You write state with a prefix `$` and that's converted to `useState` accordingly
1939
import * as React from 'react'
2040

2141
function Component() {
22-
let $a = 1
23-
24-
const onPress = () => {
25-
$a += 1
26-
}
27-
28-
return (
29-
<div>
30-
<p>{$a}</p>
31-
<button onClick={onPress}>Press</button>
32-
</div>
33-
)
42+
let $a = 1
43+
44+
const onPress = () => {
45+
$a += 1
46+
}
47+
48+
return (
49+
<div>
50+
<p>{$a}</p>
51+
<button onClick={onPress}>Press</button>
52+
</div>
53+
)
3454
}
35-
```
3655

37-
```jsx
56+
↓ ↓ ↓ ↓ ↓ ↓
57+
3858
import * as React from 'react'
3959

4060
function Component() {
41-
const [a, setA] = React.useState(1)
42-
43-
const onPress = () => {
44-
setA(a + 1)
45-
}
46-
47-
return (
48-
<div>
49-
<p>{a}</p>
50-
<button onClick={onPress}>Press</button>
51-
</div>
52-
)
61+
const [a, setA] = React.useState(1)
62+
63+
const onPress = () => {
64+
setA(a + 1)
65+
}
66+
67+
return (
68+
<div>
69+
<p>{a}</p>
70+
<button onClick={onPress}>Press</button>
71+
</div>
72+
)
5373
}
5474
```
5575

‎package.json

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,62 @@
11
{
2-
"name": "babel-transform-mutable-react-state",
3-
"version": "0.0.0",
4-
"main": "./dist/index.js",
5-
"module": "./dist/index.mjs",
6-
"types": "./dist/index.d.ts",
7-
"engines": {
8-
"node": ">=12"
9-
},
10-
"exports": {
11-
"./package.json": "./package.json",
12-
".": {
13-
"require": "./dist/index.js",
14-
"import": "./dist/index.mjs",
15-
"types": "./dist/index.d.ts",
16-
"default": "./dist/index.js"
17-
}
18-
},
19-
"scripts": {
20-
"build": "tsup source/index.ts --format cjs,esm --dts --clean",
21-
"test": "ava",
22-
"fix": "npx prettier --write source/* test/*",
23-
"watch": "npm run build -- --watch source",
24-
"prepublishOnly": "npm run build"
25-
},
26-
"dependencies": {
27-
"@babel/types": "^7.16.0"
28-
},
29-
"devDependencies": {
30-
"@babel/core": "^7.16.5",
31-
"@babel/plugin-transform-react-jsx": "^7.16.5",
32-
"@babel/preset-env": "^7.16.5",
33-
"@babel/preset-react": "^7.16.5",
34-
"@types/babel__core": "^7.1.17",
35-
"@types/react": "^17.0.37",
36-
"ava": "^3.15.0",
37-
"prettier": "^2.5.1",
38-
"ts-node": "^10.4.0",
39-
"tsup": "^5.11.4",
40-
"typescript": "^4.5.4"
41-
},
42-
"prettier": {
43-
"bracketSpacing": false,
44-
"semi": false,
45-
"singleQuote": true,
46-
"trailingComma": "es5",
47-
"useTabs": false
48-
},
49-
"ava": {
50-
"extensions": {
51-
"ts": "module"
52-
},
53-
"nonSemVerExperiments": {
54-
"configurableModuleFormat": true
55-
},
56-
"nodeArguments": [
57-
"--loader=ts-node/esm"
58-
]
59-
}
2+
"name": "babel-plugin-mutable-react-state",
3+
"version": "0.0.0",
4+
"main": "./dist/index.js",
5+
"module": "./dist/index.mjs",
6+
"types": "./dist/index.d.ts",
7+
"engines": {
8+
"node": ">=12"
9+
},
10+
"exports": {
11+
"./package.json": "./package.json",
12+
".": {
13+
"require": "./dist/index.js",
14+
"import": "./dist/index.mjs",
15+
"types": "./dist/index.d.ts",
16+
"default": "./dist/index.js"
17+
}
18+
},
19+
"scripts": {
20+
"build": "tsup source/index.ts --format cjs,esm --dts --clean",
21+
"test": "ava",
22+
"fix": "npx prettier --write source/* test/*",
23+
"watch": "npm run build -- --watch source",
24+
"prepublishOnly": "npm run build",
25+
"release": "np --branch dev"
26+
},
27+
"dependencies": {
28+
"@babel/types": "^7.16.0"
29+
},
30+
"devDependencies": {
31+
"@babel/core": "^7.16.5",
32+
"@babel/plugin-transform-react-jsx": "^7.16.5",
33+
"@babel/preset-env": "^7.16.5",
34+
"@babel/preset-react": "^7.16.5",
35+
"@types/babel__core": "^7.1.17",
36+
"@types/react": "^17.0.37",
37+
"ava": "^3.15.0",
38+
"np": "^7.6.0",
39+
"prettier": "^2.5.1",
40+
"ts-node": "^10.4.0",
41+
"tsup": "^5.11.4",
42+
"typescript": "^4.5.4"
43+
},
44+
"prettier": {
45+
"bracketSpacing": false,
46+
"semi": false,
47+
"singleQuote": true,
48+
"trailingComma": "es5",
49+
"useTabs": false
50+
},
51+
"ava": {
52+
"extensions": {
53+
"ts": "module"
54+
},
55+
"nonSemVerExperiments": {
56+
"configurableModuleFormat": true
57+
},
58+
"nodeArguments": [
59+
"--loader=ts-node/esm"
60+
]
61+
}
6062
}

0 commit comments

Comments
 (0)