@curi/svelte

Installation

The package can be installed through npm (you need to have Node & NPM installed).

npm install @curi/svelte

About

This package enables you to use Curi alongside Svelte. This package relies on the Svelte store.

For more information on using Curi with Svelte, please check out the Svelte guide.

API

curiStore

@curi/svelte components rely on being able to access router related values (router, response, and navigation) from a Svelte store. While you can set this up manually, the curiStore will handle this for you.

This will setup an observer to automatically update the store when new responses are emitted by the router.

import { curiStore } from '@curi/svelte';

const router = curi(history, routes);
const store = curiStore(router);

If you already have a store, you can pass it to curiStore and the Curi values will be added to it.

import { curiStore } from '@curi/svelte';
import { Store } from 'svelte/store';

const router = curi(history, routes);
const store = new Store({...});
curiStore(router, store);

Usage

For rendering your application, you should should have a base component that has any global layout and uses the response to render the correct component(s). Assuming you setup your store using curiStore, the components can access the router using $router and the response and navigation using $curi.response and $curi.navigation.

<!-- components/App.html -->
<NavLinks />
<svelte:component this={$curi.response.body} />

<script>
  import NavLinks from './NavLinks.html';

  export default {
	  components: { NavLinks }
  };
</script>

In your index file, setup an observer to render this component, making sure to pass the store to the component.

import app from './components/app';

const store = curiStore(router);

// use a one time subscriber for the initial render
router.once(() => {
  view = new app({ target, store });
});