stent - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
| { | ||
| "name": "stent", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "Stent is a state machines container made for UI development", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -7,11 +7,75 @@ # Mealy | ||
| ## Example: Working with a state machine | ||
| ## Examples | ||
| ### Transitioning to another state | ||
| From `idle` to `fetching` by using `fetch data` action. | ||
| ```js | ||
| // Just pass the new state as a handler for an action | ||
| Machine.create('app', { | ||
| 'idle': { | ||
| 'fetch data': 'fetching' | ||
| } | ||
| }); | ||
| // Return a string in the handler | ||
| Machine.create('app', { | ||
| 'idle': { | ||
| 'fetch data': function () { | ||
| return 'fetching'; | ||
| } | ||
| } | ||
| }); | ||
| // Return a state object | ||
| Machine.create('app', { | ||
| 'idle': { | ||
| 'fetch data': function () { | ||
| return { name: 'fetching' }; | ||
| } | ||
| } | ||
| }); | ||
| // Yield a string in the handler's generator | ||
| Machine.create('app', { | ||
| 'idle': { | ||
| 'fetch data': function * () { | ||
| yield 'fetching'; | ||
| // or you can yield a state object | ||
| // `yield { name: 'fetching' }` | ||
| } | ||
| } | ||
| }); | ||
| ``` | ||
| ### Having dependent actions | ||
| For the cases where you want to do something as a result of two (or more) actions. From `idle` state to `done` when `fetching in progress` and `success` (or `fail`) actions are dispatched. | ||
| ```js | ||
| Machine.create('app', { | ||
| 'idle': { | ||
| 'fetching in progress': function * () { | ||
| const [ data, error ] = yield wait(['success', 'fail']); | ||
| // or just `const data = yield wait('success')` | ||
| // if we are interested only in one action | ||
| return data ? { name: 'done', data } : { name: 'done', error }; | ||
| } | ||
| } | ||
| }); | ||
| ``` | ||
| *This example is a bit silly. We'll probably go with a separate state when data fetching is in progress.* | ||
| ### Small ToDo app | ||
| ```js | ||
| import { Machine } from 'mealy'; | ||
| const machine = Machine.create('app', { | ||
| state: { name: 'standby', todos: [] }, | ||
| state: { name: 'idle', todos: [] }, | ||
| transitions: { | ||
| 'standby': { | ||
| 'idle': { | ||
| 'add new todo': function ({ todos }, todo) { | ||
@@ -28,3 +92,3 @@ todos.push(todo); | ||
| try { | ||
| const todos = await getTodos('/api/todos'); | ||
| const todos = yield call(getTodos, '/api/todos'); | ||
| } catch (error) { | ||
@@ -34,3 +98,3 @@ return { name: 'fetching failed', error }; | ||
| return { name: 'standby', todos }; | ||
| return { name: 'idle', todos }; | ||
| } | ||
@@ -40,3 +104,3 @@ }, | ||
| 'fetch todos': function * () { | ||
| yield { name: 'standby', error: null }; | ||
| yield { name: 'idle', error: null }; | ||
| this.fetchTodos(); | ||
@@ -51,3 +115,3 @@ } | ||
| ## Example: React integration | ||
| ### Integration with React | ||
@@ -62,3 +126,3 @@ ```js | ||
| if (isFetching) return <p>Loading</p>; | ||
| if (isFetching()) return <p>Loading</p>; | ||
| if (error) return ( | ||
@@ -81,3 +145,9 @@ <div> | ||
| .with('app') | ||
| .map(({ name, ...stateData }, machine) => { ...stateData, ...machine }); | ||
| .map(({ state, isFetching, fetchTodos, deleteTodo } => { | ||
| todos: state.todos, | ||
| error: state.error, | ||
| isFetching, | ||
| fetchTodos, | ||
| deleteTodo | ||
| })); | ||
| ``` | ||
@@ -84,0 +154,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by35.09%
5729
- Number of lines in readme file
- increased by86.42%
151
No dependency changes