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