diff --git a/README.md b/README.md
index 87bbe09..21ce7a2 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# eslint-plugin-valtio
-[Valtio](https://github.com/pmndrs/valtio) linting plugin for better development.
+[Valtio](https://github.com/pmndrs/valtio) linting plugin for better development.
## Installation
@@ -11,29 +11,47 @@ npm install eslint-plugin-valtio --save-dev
for yarn users:
```bash
-yarn add -D eslint-plugin-valtio
+yarn add -D eslint-plugin-valtio
```
## Usage
-Add `valtio` to the `extends` section of your `.eslintrc` configuration file.
+### eslint v9 / flat config
+
+```js
+const valtio = require('eslint-plugin-valtio')
+
+module.exports = [
+ valtio.configs['flat/recommended'],
+ {
+ rules: {
+ 'valtio/state-snapshot-rule': ['warn'],
+ 'valtio/avoid-this-in-proxy': ['warn'],
+ },
+ },
+]
+```
+
+### eslint v8 and below
+
+Add `valtio` to the `extends` section of your `.eslintrc` configuration file.
```json
{
- "extends": [
- "plugin:valtio/recommended"
- ]
+ "extends": ["plugin:valtio/recommended"]
}
```
+## Rules
+
Alternatively, you can enable rules in the plugin, selectively.
```json
{
"rules": {
"valtio/state-snapshot-rule": "warn",
- "valtio/avoid-this-in-proxy" :"warn",
- }
+ "valtio/avoid-this-in-proxy": "warn"
+ }
}
```
@@ -41,6 +59,9 @@ Alternatively, you can enable rules in the plugin, selectively.
This plugin helps you catch common mistakes that can occur in [valtio](https://github.com/pmndrs/valtio). Here are some cases that this plugin catches.
+
+## Rules Breakdown
+
### Snapshots in callbacks are not recommended
We shouldn't use snapshots in callbacks, because snapshots can be stale there.
@@ -55,7 +76,7 @@ function App() {
}
return (
- {snap.count}
+ {snap.count}
)
}
@@ -70,12 +91,10 @@ const state = proxy({ count: 0 })
function App() {
return (
-
- {state.count} // This is not recommended as it is not reactive.
-
+
{state.count} // This is not recommended as it is not reactive.
)
}
-```
+```
### Snapshots mutating is not possible
@@ -91,48 +110,51 @@ function App() {
const handleClick = () => {
++snap.count // This doesn't work. Use proxy state instead.
}
- return
+ return
}
```
### Computed declaration order
-In the way valtio treats objects in `proxyWithComputed`, the order of fields matters; for example, `quadrupled` comes before `doubled`, but it depends on `doubled`, so the order is wrong! So we need to bring `doubled` first.
+In the way valtio treats objects in `proxyWithComputed`, the order of fields matters; for example, `quadrupled` comes before `doubled`, but it depends on `doubled`, so the order is wrong! So we need to bring `doubled` first.
```jsx
-const state = proxyWithComputed({
- count: 0,
-}, {
- quadrupled: (snap) => snap.doubled * 2, // Not found, If a computed field deriving value is created from another computed, the computed source should be declared first.
- doubled: (snap) => snap.count * 2,
-})
+const state = proxyWithComputed(
+ {
+ count: 0,
+ },
+ {
+ quadrupled: (snap) => snap.doubled * 2, // Not found, If a computed field deriving value is created from another computed, the computed source should be declared first.
+ doubled: (snap) => snap.count * 2,
+ }
+)
```
-### Using `this` in proxy (`valtio/avoid-this-in-proxy`)
+### Using `this` in proxy (`valtio/avoid-this-in-proxy`)
-When working with `proxy` using `this` in it's context as long as taken care of will work as expected but since the implementation differs from a simple `proxy` to a `snapshot` version of the proxy, using `this` could get confusing. This rule is specifically for beginners that are adapting to the structure/differences in valtio.
+When working with `proxy` using `this` in it's context as long as taken care of will work as expected but since the implementation differs from a simple `proxy` to a `snapshot` version of the proxy, using `this` could get confusing. This rule is specifically for beginners that are adapting to the structure/differences in valtio.
```jsx
const state = proxy({
count: 0,
inc() {
- ++state.count; // works as the state is being modified
+ ++state.count // works as the state is being modified
},
-});
+})
const state = proxy({
count: 0,
inc() {
- ++this.count; // works as the context belongs to proxy
+ ++this.count // works as the context belongs to proxy
},
-});
+})
const state = snapshot(
proxy({
count: 0,
inc() {
- ++this.count; // won't work since the params are now frozen since you are in a snapshot.
+ ++this.count // won't work since the params are now frozen since you are in a snapshot.
},
})
-);
+)
```
diff --git a/src/index.js b/src/index.js
index e333712..a98ad27 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,13 @@ const plugin = {
Object.assign(plugin, {
configs: {
recommended: {
+ plugins: ['valtio'],
+ rules: {
+ 'valtio/state-snapshot-rule': 'warn',
+ 'valtio/avoid-this-in-proxy': 'warn',
+ },
+ },
+ 'flat/recommended': {
plugins: { valtio: plugin },
rules: {
'valtio/state-snapshot-rule': 'warn',
@@ -25,6 +32,5 @@ Object.assign(plugin, {
})
module.exports = plugin
-
export const configs = plugin.configs
export const rules = plugin.rules