TehShrikeUse Svelte with abstract-state-router!
svelte-state-renderer1 is compatible withsvelte1svelte-state-renderer2 is compatible withsvelte>=1.8.1svelte-state-renderer3 is compatible withsvelte3 & 4svelte-state-renderer4 & 5 are compatible withsvelte5
Usage
const StateRouter = require('abstract-state-router')
const makeSvelteStateRenderer = require('svelte-state-renderer')
const defaultParameters = {
props: {
annoy() {
alert('Modal dialogs are annoying')
}
}
}
const renderer = makeSvelteStateRenderer(defaultParameters)
const stateRouter = StateRouter(renderer, document.querySelector('body'))
// add whatever states to the state router
stateRouter.evaluateCurrentRoute('login')makeSvelteStateRenderer(defaultParameters)
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
To access the asr object with its makePath and stateIsActive and go and getActiveState functions, you can export let asr in your template.
You will access any properties of the object returned by your resolve function in the same way – if your resolve function returns { userId: 13 } then you would access that value by putting export let userId into your component.
<script>
export let asr
export let userId
</script>
<a
href="{ asr.makePath('app.topics.tasks', { topicId: topic.id }) }"
class="{ asr.stateIsActive('app.topics.tasks', { topicId: topic.id }) ? 'active' : '' }"
>
{topic.name}
</a>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 functionoptions, an object whose properties will be merged into the other default options and used to instantiate the Svelte components