abstract-state-router renderer for Svelte
Clone or download
Latest commit 2a08e77 Apr 23, 2018
Failed to load latest commit information.
.gitignore Build to ES5 Sep 16, 2017
.npmignore Build to ES5 Sep 16, 2017
index.js Call destroy instead of teardown Apr 23, 2018
package-lock.json 2.0.0 Apr 23, 2018
package.json 2.0.0 Apr 23, 2018
readme.md Call destroy instead of teardown Apr 23, 2018


Use Svelte with abstract-state-router!

  • svelte-state-renderer >=2 is compatible with svelte >=1.8.1
  • svelte-state-renderer <2 is compatible with svelte <2


npm + your favorite CommonJS bundler is easiest.

npm install svelte-state-renderer

You can also download the stand-alone build from wzrd.in. If you include it in a <script> tag, a svelteStateRenderer function will be available on the global scope.


const StateRouter = require('abstract-state-router')
const makeSvelteStateRenderer = require('svelte-state-renderer')

const defaultParameters = {
	methods: {
		annoy() {
			alert('Modal dialogs are annoying')

const renderer = makeSvelteStateRenderer(defaultParameters)
const stateRouter = StateRouter(renderer, document.querySelector('body'))

// add whatever states to the state router



Any parameters you pass in the defaultParameters object will be passed to all Svelte components when they are constructed. In addition, any members of the methods object will be added to the object itself.

In templates

Svelte components don't give you an easy way to corrupt them with stateful functions at the moment, but it is possible. You can access the state router's makePath and stateIsActive functions on the asr object for now:

	href="{{ asr.makePath('app.topics.tasks', { topicId: topic.id }) }}"
	class="{{ asr.stateIsActive('app.topics.tasks', { topicId: topic.id }) ? 'active' : '' }}"

To embed child states, add a <uiView></uiView> element to the parent template.

Passing templates to addState

When calling the abstract-state-router's addState function, you may provide any of these values as the template:

  • a Svelte component constructor function
  • an object with two properties:
    • component, a Svelte component constructor function
    • options, an object whose properties will be merged into the other default options and used to instantiate the Svelte components