@curi/svelte

About#

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

Installation#

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

Prefer inline scripts?

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 a response handler 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 />
<:Component {$curi.response.body}></:Component>

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

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

In your index file, setup a one time response handler 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.respond(() => {
  view = new app({ target, store });
});