svelte robot integration
npm install svelte-robot-factory---
layout: page.njk
title: svelte-robot-factory
tags: integrations
permalink: integrations/svelte-robot-factory.html
---
Table of Contents
- svelte-robot-factory
- Installation
- API
- Example
- Sveltekit
- This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
- For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
- License
The svelte-robot-factory returns a svelte writable store which implements a robot machine service.
npm:
``bash`
npm install svelte-robot-factory robot3 --save
yarn:
`bash`
yarn add svelte-robot-factory robot3
`javascript`
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
`javascript`
function useMachine(machine, event)
const {subscribe, set} = writable(
interpret(machine, service => set(service), event)
)
return {subscribe}
}
Explaination:
This code exports a function named useMachine that takes in two arguments: machine and event. It uses the Machine and interpret functions imported from the robot3 library, and the writable function imported from the svelte/store library.
When useMachine is called, it creates a Svelte store by calling the writable function, passing in the result of invoking interpret on the machine and event arguments. interpret creates an instance of a state machine and provides a callback function that updates the Svelte store with the new state returned by the instance.
The function returns an object with a subscribe method that allows components to subscribe to changes in the store. Whenever a component subscribes to the store, it will be notified with the current state and any future state changes.
`js
`
`js
/// Child.svelte
js
/// 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]
javascript
import adapter from '@sveltejs/adapter-auto';/* @type {import('@sveltejs/kit').Config} /
const config = {
experimental: {
prebundleSvelteLibraries: true
},
kit: {
adapter: adapter()
}
};
export default config;
``on:
release:
types: [created]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- name: Use Node.js ${{ matrix.node-version }}
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run build
- run: npm test
publish-npm:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- name: Use Node.js ${{ matrix.node-version }}
with:
node-version: ${{ matrix.node-version }}
registry-url: https://registry.npmjs.org/
- run: npm ci
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
Or, reference the sveltekit-toggle example.