![New Socket Web Extension, Take Socket with You](https://cdn.sanity.io/images/cgdhsj6q/production/7c7e90f37af51d175eaf8b2ae56124aec35c57c8-874x566.png?w=400&fit=max&auto=format)
Product
New Socket Web Extension, Take Socket with You
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
@zag-js/core
Advanced tools
Readme
This package contains a minimal implementation of XState FSM for finite state machines with addition of extra features we need for our components.
setTimeout
)setInterval
)and
, or
, not
)To better understand the state machines, we strongly recommend going though the xstate docs and videos. It'll give you the foundations you need.
Installation
npm i @zag-js/core
# or
yarn add @zag-js/core
Usage (machine):
import { createMachine } from "@zag-js/core"
const toggleMachine = createMachine({
id: "toggle",
initial: "inactive",
states: {
inactive: { on: { TOGGLE: "active" } },
active: { on: { TOGGLE: "inactive" } },
},
})
toggleMachine.start()
console.log(toggleMachine.state.value) // => "inactive"
toggleMachine.send("TOGGLE")
console.log(toggleMachine.state.value) // => "active"
toggleMachine.send("TOGGLE")
console.log(toggleMachine.state.value) // => "inactive"
Usage (service):
import { createMachine } from "@zag-js/core"
const toggleMachine = createMachine({...})
toggleMachine.start()
toggleService.subscribe((state) => {
console.log(state.value)
})
toggleService.send("TOGGLE")
toggleService.send("TOGGLE")
toggleService.stop()
createMachine(config, options)
Creates a new finite state machine from the config.
Argument | Type | Description |
---|---|---|
config | object (see below) | The config object for creating the machine. |
options | object (see below) | The optional options object. |
Returns:
A Machine
, which provides:
machine.initialState
: the machine's resolved initial statemachine.start()
: the function to start the machine in the specified initial state.machine.stop()
: the function to stop the machine completely. It also cleans up all scheduled actions and timeouts.machine.transition(state, event)
: a transition function that returns the next state given the current state
and
event
. It also performs any delayed, entry or exit side-effects.machine.send(event)
: a transition function instructs the machine to execute a transition based on the event.machine.onTransition(fn)
: a function that gets called when the machine transition function instructs the machine to
execute a transition based on the event.machine.onChange(fn)
: a function that gets called when the machine's context value changes.machine.state
: the state object that describes the machine at a specific point in time. It contains the following
properties:
value
: the current state valuepreviousValue
: the previous state valueevent
: the event that triggered the transition to the current statenextEvents
: the list of events the machine can respond to at its current statetags
: the tags associated with this statedone
: whehter the machine that reached its final statecontext
: the current context valuematches(...)
: a function used to test whether the current state matches one or more state valuesThe machine config has this schema:
id
(string) - an identifier for the type of machine this is. Useful for debugging.context
(object) - the extended state data that represents quantitative data (string, number, objects, etc) that can
be modified in the machine.initial
(string) - the key of the initial state.states
(object) - an object mapping state names (keys) to stateson
(object) - an global mapping of event types to transitions. If specified, this event will called if the state
node doesn't handle the emitted event.on
(object) - an object mapping event types (keys) to transitionsString syntax:
{ target: stateName }
Object syntax:
target
(string) - the state name to transition to.actions
(Action | Action[]) - the action(s) to execute when this transition is taken.guard
(Guard) - the condition (predicate function) to test. If it returns true
, the transition will be taken.actions?
(object) - a lookup object for your string actions.guards?
(object) - a lookup object for your string guards specified as guard
in the machine.activities?
(object) - a lookup object for your string activities.delays?
(object) - a lookup object for your string delays used in after
and every
config.The action function to execute while transitioning from one state to another. It takes the following arguments:
context
(any) - the machine's current context
.event
(object) - the event that caused the action to be executed.FAQs
A minimal implementation of xstate fsm for UI machines
The npm package @zag-js/core receives a total of 82,788 weekly downloads. As such, @zag-js/core popularity was classified as popular.
We found that @zag-js/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
Product
Socket introduces three new customizable default security policies for users to choose from: Low Noise (traditional SCA), Default, and Higher Noise.
Security News
MITRE has just minted its 400th CNA, as the NVD struggles to tame its backlog of CVEs awaiting analysis, which has increased by 30% since June.