@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

If you prefer to use script tags, Unpkg will always have the latest version of @curi/svelte available for you.

<script src="https://unpkg.com/@curi/svelte@1.0.0-beta.4/dist/curi-svelte.js" />

There is also a minimized version available if you change the filename to svelte.min.js. The package will be attached to the window as window.CuriSvelte.

API#

Usage#

The components exported by @curi/svelte rely on Svelte's store. The store should include a router property for accessing the Curi router and a curi property for accessing the latest response and action values.

import { Store } from 'svelte/store';

const router = curi(history, routes);
const store = new Store({
  router,
  curi: { response: null, action: null }
});

Add a subscriber to the router to update the store whenever a new response is emitted.

router.respond((response, action) => {
  store.set({ curi: { response, action } });
});

As far as rendering your application goes, you should should have a base component that has any global layout and uses the response to render the correct component(s). Setup a one time subscriber to render this component and make sure to pass the store to the component.

<NavLinks />
<:Component {$curi.response.body}></:Component>

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

  export default {
	  components: { NavLinks }
  };
</script>
import app from './components/app';

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