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

svelte-robot-factory

Table of Contents

• svelte-robot-factory
  • Installation
  • API
  • Example
  • Sveltekit
  • License

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:

• machine: Robot state machine
• event: Object which will be passed to the context function

Returns:

• Writable svelte store which implements a robot service on subscribe

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;

Sveltekit

Due to a known issue with vite handling of commonjs modules, when used with sveltekit, add prebundleSvelteLibraries: true, to your svelte.config.js.

For example, [svelte.config.js]

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	experimental: {
		prebundleSvelteLibraries: true
	},
	kit: {
		adapter: adapter()
	}
};

export default config;

Or, reference the sveltekit-toggle example.

License

MIT