https://github.com/insightsoftwareconsortium/xstate-lit
XState Web Component Reactive Selector Controller
https://github.com/insightsoftwareconsortium/xstate-lit
lit-element xstate
Last synced: 6 months ago
JSON representation
XState Web Component Reactive Selector Controller
- Host: GitHub
- URL: https://github.com/insightsoftwareconsortium/xstate-lit
- Owner: InsightSoftwareConsortium
- License: apache-2.0
- Created: 2023-01-08T22:49:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-03T02:10:23.000Z (about 2 years ago)
- Last Synced: 2025-07-09T12:53:27.683Z (7 months ago)
- Topics: lit-element, xstate
- Language: TypeScript
- Homepage:
- Size: 97.7 KB
- Stars: 4
- Watchers: 13
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# xstate-lit
Connect XState machines with Lit Element components. Similar to `@xstate/react`'s useSelector hook.
Based on @ChrisShank's PR https://github.com/statelyai/xstate/pull/2581
## Setup
`npm install --save xstate-lit`
## Example
```ts
export class MyElement extends LitElement {
count = new SelectorController(this, actor, (state) => state.context.count);
render() {
return html`
count is ${this.count.value} `;
}
}
```
To run example install node_modules at top level as well as in example directory:
```
pnpm install
cd example
pnpm install
pnpm run dev
```
## SelecterController
This Lit ReactiveController:
1. Subscribes to all updates of an XState actor or service.
1. Runs the user provided state selector function when the state changes or the actor receives an event.
1. Triggers the Lit component to update if the compare function returns false. The default compare function uses `===` to check equality of the old and new selected values.
## SelectState
A wrapper for SelecterController that pulls the XState actor or service from a `@lit/context`. This avoids needed to pass a shared actor down the component tree.