@statekit/eslint-plugin

ESLint rules that catch StateKit mistakes the type checker can't see.

Work in progress.

Install

npm i -D @statekit/eslint-plugin

eslint.config.js:

import statekit from "@statekit/eslint-plugin"

export default [statekit.configs.recommended]

With .eslintrc, extend plugin:@statekit/recommended-legacy.

To check machine hooks imported from other files, turn on typed linting.

Rules

no-draft-write-between-awaits

Default: "error"

A draft change between two awaits stays hidden until the event finishes.

load: async ({ draft }, id) => {
   draft.user = await fetchUser(id) // ❌ another await follows
   draft.posts = await fetchPosts(id) // ✅ last await
}

no-subscribe-all-destructuring

Default: "warn"

Rest and array destructuring read the whole object, so the component rerenders on any change to it.

const { name, ...rest } = m.data // ⚠️ subscribes to all of data
const [first] = m.data.tags // ⚠️ subscribes to every tag

const { name, email } = m.data // subscribes to name and email
const first = m.data.tags[0] // subscribes to the first tag

This is a warning, not a mistake. When the component needs the whole object, keep the destructuring and disable the rule for that line.

Development

From the node directory:

pnpm --filter @statekit/eslint-plugin test -- --runInBand
pnpm --filter @statekit/eslint-plugin build