Getting Started

First, install:

npm i -s rxjs
npm i -s @state-adapt/core
npm i -s @state-adapt/rxjs

Create a file named state-adapt.ts and export watch and adapt:

import { actionSanitizer, stateSanitizer } from '@state-adapt/core';
import { configureStateAdapt } from '@state-adapt/rxjs';

const enableReduxDevTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__?.({
  actionSanitizer,
  stateSanitizer,
});

export const { adapt, watch } = configureStateAdapt({
  devtools: enableReduxDevTools,
});

And now you can use it in your components:

import { adapt } from '../state-adapt';

const nameStore = adapt('Bob');
const name$ = nameStore.state$;
const name = $name$;

Library Coming Soon

StateAdapt doesn't currently have a dedicated library for Svelte, but it will.

For now, refer to configureStateAdapt for options.

Runes

We are considering two options to add support for runes. Please check progress here and chime in with feedback.

StackBlitz demo

Agents

Every StateAdapt package ships an agent skill containing its full API reference:

npx skills add ./node_modules/@state-adapt/core --skill state-adapt-core
npx skills add ./node_modules/@state-adapt/rxjs --skill state-adapt-rxjs
# etc

Or skip the skills

This article explains how every skill's name and description sit in the agent's context on every request, and the more skills you install, the more confused agents can get.

The references ship inside the packages either way, so an alternative is to create a dev.md file and point agents to it for development tasks. In this file you can describe code conventions and useful references:

<!-- dev.md -->
Always prefer declarative code and avoid imperative code.

API references for @state-adapt packages are in
node_modules/@state-adapt/*/skills/*/references

ESLint Plugin: No Spaghetti

Experimental: The rule and its configuration may change as we learn from real-world use.

@state-adapt/eslint-plugin-spaghetti helps minimize spaghetti code. It analyzes imperative commands and reports an error when they reach too far across functions, scopes, files, or folders.

Install the plugin and its peer dependencies:

npm install --save-dev @state-adapt/eslint-plugin-spaghetti @state-adapt/spaghetti-core @typescript-eslint/parser eslint

Then extend its recommended configuration for TypeScript files in .eslintrc.json:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "excludedFiles": ["*.spec.ts", "*.spec.tsx", "*.test.ts", "*.test.tsx"],
      "extends": ["plugin:@state-adapt/spaghetti/recommended"]
    }
  ]
}

This rule requires type-aware linting to resolve calls and resources across the project. With @typescript-eslint/parser v8 or newer, enable the TypeScript project service in the configuration that applies to TypeScript files:

{
  "languageOptions": {
    "parserOptions": {
      "projectService": true
    }
  }
}

Legacy .eslintrc configurations and parser v7 use parserOptions.project:

{
  "parserOptions": {
    "project": ["./tsconfig.json"]
  }
}

These examples show the underlying typescript-eslint settings. Tooling that manages ESLint configuration may require them elsewhere. See the typescript-eslint typed-linting guide for general setup, or Configuring ESLint with TypeScript for Nx workspaces, including flat and legacy configurations.

For advanced configuration, see the no-spaghetti rule reference.