y-state-machine v0.1.5
Intro
This is a simplified version of state machine in javascript.
Installation
$ npm i --save-dev y-state-machine
# or
$ yarn add --dev y-state-machineUsage
In a nutshell:
import {StateMachine} from 'y-state-machine'
class YourStateMachine extends StateMachine {
edit() {}
onedit() {
console.log('you are editing')
}
}
const sm = new YourStateMachine({
name: 'any_name_you_like',
init: 'view',
transitions: [
{
name: 'edit',
from: 'view',
to: 'editing'
}
]
})
document.addEventListener('click', function handler(e) {
sm.edit() // 'you are editing'
sm.edit() // nothing happens
})In the example above, you declare a simple state machine called YourStateMachine.
It extends the base class of StateMachine and has two methods: edit and onedit.
The edit method corresponds to the name field in the only element of transitions,
which is one of the properties of the option that you use to instantiate YourStateMachine
When invoke sm.edit(), behind the scene, sm checks whether the current state match the need for such activity
In this example, the current state has to be view in order to invoke edit method successfully.
By setting init: 'view', the initial state of sm will be view.
The real codes executed would be the ones within
oneditmethod.There should always be a
actionandonactionpair
sm will call onedit internally and the state will become editing.
The second time you try to invoke edit, the state would be editing and won't match the requirement.
In other words, nothing happens.
About from field
from in transitions could be String or Array<String> or *.
Monitor state
You can declare onStateChange method on your own class.
Whenever state changes, onStateChange method will be called with two passing arguments:
newState and oldState, which represent the latest state and the last state respectively.
class yourClass extends StateMachine {
onStateChange(newState, oldState) {
// your own logic
}
}License
Copyright (c) 2017-present, Yuchen Liu