https://github.com/TehShrike/svelte-state-renderer

abstract-state-router renderer for Svelte
https://github.com/TehShrike/svelte-state-renderer

abstract-state-router svelte

Last synced: 3 months ago
JSON representation

abstract-state-router renderer for Svelte

• Host: GitHub
• URL: https://github.com/TehShrike/svelte-state-renderer
• Owner: TehShrike
• Created: 2016-12-01T04:00:31.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-08-15T18:18:22.000Z (about 1 year ago)
• Last Synced: 2024-07-07T05:23:18.164Z (4 months ago)
• Topics: abstract-state-router, svelte
• Language: JavaScript
• Size: 47.9 KB
• Stars: 36
• Watchers: 4
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
Use [Svelte](https://svelte.technology/) with [abstract-state-router](https://github.com/TehShrike/abstract-state-router)!

- `svelte-state-renderer` 1 is compatible with `svelte` 1

- `svelte-state-renderer` 2 is compatible with `svelte` >=1.8.1

- `svelte-state-renderer` 3 is compatible with `svelte` 3

## Usage

```js

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.

```html

	export let asr

	export let userId



	{topic.name}



```

To embed child states, add a `` 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

# License

[WTFPL](http://wtfpl2.com/)