svelte-robot-factory

svelte robot integration


Keywords
svelte, robot, finite state machine, integration
License
MIT
Install
npm install svelte-robot-factory@2.0.4

Documentation

layout title tags permalink
page.njk
svelte-robot-factory
integrations
integrations/svelte-robot-factory.html

Node.js Package

svelte-robot-factory

Table of Contents

The svelte-robot-factory returns a svelte writable store which implements a robot machine service.

Installation

npm:

npm install svelte-robot-factory robot3 --save

yarn:

yarn add svelte-robot-factory robot3

API

useMachine(machine, event);

Arguments:

Returns:

function useMachine(machine, event)
    const {subscribe, set} = writable(
        interpret(machine, service => set(service), event)
    )
    return {subscribe}
}

Example

View in REPL

<!--
  example integration with https://thisrobot.life
	supports send, context, and machine (to include machine.current & machine.state)
-->

<script>
  import service from './store.js';
  import Child from './Child.svelte'
  const send = $service.send;
  $: current = $service.machine.current
</script>

<div>Current state value: {current}</div>
<Child/>

<button on:click={() => send('toggle')}>
  Toggle
</button>
/// Child.svelte
<script>
  import service from './store.js';
  $: foo = $service.context.foo;
</script>

<div>Context value of foo property: {foo}</div>
/// store
import { createMachine, state, transition, invoke, reduce } from 'robot3';
import { useMachine } from 'svelte-robot-factory';
const context = event => ({
  foo: event.foo
});
const event = {
  foo: 'initial'
};
const machine = createMachine({
  inactive: state(
    transition('toggle', 'active', 
      reduce((ctx, ev)=>({ ...ctx, foo: 'bar'}))
    )
  ),
  active: state(
    transition('toggle', 'inactive', 
      reduce((ctx, ev)=>({ ...ctx, foo: 'foo'}))
    )
  )
}, context);

const service = useMachine(machine, event);
export default service;

License

MIT