@curi/svelte

About#

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

Installation#

If you have Node and NPM installed, you can install the package through npm (or yarn if you prefer).

npm install @curi/svelte
yarn add @curi/svelte

Prefer inline scripts? Every version is available through Unpkg. There are both full and minified versions available. You can access the package's exports through window.CuriSvelte.

<script src="https://unpkg.com/@curi/svelte@1.0.0-beta.8/dist/curi-svelte.umd.js"></script>
<script type="text/javascript">
  window.CuriSvelte
</script>

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 });
});