steveruizok / state-designer

State management with statecharts.

State Designer

State Designer is a JavaScript and TypeScript library for managing the state of a user interface. It prioritizes the design experience, making it easy to experiment with ideas, iterate on solutions, and communicate the final result.

• See examples in React and TypeScript.
• Learn more at state-designer.com.

Features

• Write state-charts in a simple declarative syntax.
• Create both global and local component states.
• Use selectors to subscribe to just the data you need.

Packages

• @state-designer/core - Core library.
• @state-designer/react - React hook.

Usage

Using State Designer involves three steps:

1. Create a state with a configuration object.
2. Subscribe to the state's updates.
3. Send events to the state.

Your exact usage will depend on your framework:

• Usage in JavaScript
• Usage in React

Inspiration

State Designer is heavily inspired by xstate. Note that, unlike xstate, State Designer does not adhere to the scxml spec.

Author

• Steve Ruiz

License

MIT

state-designer's Issues

Remove `tsdx` dependency for `@state-designer/core`

tsdx should probably be a development dependency only, instead of a normal dependency.

state designer core has missing dependencies

I tried to use @state-designer/core v2.0.3 (the latest as of this post) and found that two dependencies were missing, lodash and immer. I installed these myself and it worked.

I was confused because this codesandbox example of state designer with vanilla JS worked, but when I updated the state designer dependency to 2.0.3, it shows the missing dependency error, you can see that reproduced in this sandbox.

Just wanted to let you know, I'm excited to try using state designer with Imba, its working nicely so far.

Wait breaks await results.

Data resolved from an async function does not pass through if the onResolve includes a wait.

Dead Package links

https://github.com/steveruizok/state-designer#packages

The two links go to a 404

Accessing values in actions

action: (data, payload) => {..

Unless I'm missing it, it's currently not possible to access computed values in actions. Is that by design?
It's not a big issue since values are pure functions anyways, but it might be a bit cleaner to have access to them in here somehow.

Using wrong method name in a Sandbox example

Hi Stev,

In the tip box of this link, there's a Sandbox example where it has the following lines which are not correct:

import { createStateDesigner, useStateDesigner } from "@state-designer/react"

// [1]
const counter = createStateDesigner({
	data: { count: 0 },
	on: { CLICKED: data => data.count++ },
})

I suggest replacing them with the following lines so the example would work:

import {  useStateDesigner } from "@state-designer/react"
import { createState } from "@state-designer/core"
// [1]
const counter = createState({
	data: { count: 0 },
	on: { CLICKED: data => data.count++ },
})

P.S. I would like to thank you so much for your packages and for your creativity <3

Bug: useReducer re-renders even on same state in React 18

In React version 18, useReducer will re-render even if the reducer returns the same state. This is triggering re-renders when using the createSelectorHook.

React Issue: facebook/react#24596

I think the workaround will be to use useState instead.