Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 94 Commits
.codesandbox		.codesandbox
.github/workflows		.github/workflows
.husky		.husky
src		src
tests		tests
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.swcrc		.swcrc
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
package.json		package.json
rollup.config.js		rollup.config.js
yarn.lock		yarn.lock

Repository files navigation

eslint-plugin-valtio

Valtio linting plugin for better development.

Installation

npm install eslint-plugin-valtio --save-dev

for yarn users:

yarn add -D eslint-plugin-valtio

Usage

eslint v9 / flat config

constvaltio=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

Addvaltio to theextends section of your.eslintrc configuration file.

{"extends": ["plugin:valtio/recommended"]}

Rules

Alternatively, you can enable rules in the plugin, selectively.

{"rules": {"valtio/state-snapshot-rule":"warn","valtio/avoid-this-in-proxy":"warn"  }}

Why

This plugin helps you catch common mistakes that can occur invaltio. 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.

conststate=proxy({count:0})functionApp(){constsnap=useSnapshot(state)consthandleClick=()=>{console.log(snap.count)// This is not recommended as it can be stale.}return(<div>{snap.count}<buttononClick={handleClick}>click</button></div>)}

Proxies in render phase is not recommended

In render phase, it's better to use snapshots (as they're made to be compatible with react's reactivity) instead of states directly.

conststate=proxy({count:0})functionApp(){return(<div>{state.count} // This is not recommended as it is not reactive.</div>)}

Snapshots mutating is not possible

Snapshots are made to be used in the react render phase,and not mutable.So, we need to mutate proxy states directly.

conststate=proxy({count:0})functionApp(){constsnap=useSnapshot(state)consthandleClick=()=>{++snap.count// This doesn't work. Use proxy state instead.}return<buttononClick={handleClick}>mutate</button>}

Computed declaration order

In the way valtio treats objects inproxyWithComputed, the order of fields matters; for example,quadrupled comes beforedoubled, but it depends ondoubled, so the order is wrong! So we need to bringdoubled first.

conststate=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`)

When working withproxy usingthis in it's context as long as taken care of will work as expected but since the implementation differs from a simpleproxy to asnapshot version of the proxy, usingthis could get confusing. This rule is specifically for beginners that are adapting to the structure/differences in valtio.

conststate=proxy({count:0,inc(){++state.count// works as the state is being modified},})conststate=proxy({count:0,inc(){++this.count// works as the context belongs to proxy},})conststate=snapshot(proxy({count:0,inc(){++this.count// won't work since the params are now frozen since you are in a snapshot.},}))