@curi/svelte

v2.0.0-beta.5

GitHub logoGitHub RepoNPM logoNPM Package

About

This package enables you to use Curi alongside Svelte.

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

Installation

npm install @curi/svelte

API

Router

The Router component is used to make router related data available to components throughout the application.

<Router {router}>
  <Content />
</Router>

<script>
  import Router from "@curi/svelte/components/Router.svelte";

  export let router;
</script>

Props

router

A Curi router.

The Link component is used to create an anchor for navigating to another route.

<menu>
  <Link name='Home'>Home</Link>
  <Link name='User' params={{ userID: 5 }}>
    Profile
  </Link>
</menu>

<script>
  import Link from '@curi/svelte/components/Link.svelte';
</script>

The name of the route to link to.

<Link name="Home">Home</Link>
<!-- <a href="/">Home</a> -->

An object of route params for the linked route.

<Link name="User" params={{ userID: 5 }}>
  Profile
</Link>
<!-- <a href="/user/5">Profile</a> -->

The hash for the location to link to.

<Link name="Home" hash="test">Home</Link>
<!-- <a href="/#test">Home</a> -->

The query for the location to link to.

<Link name="Home" query="one=1">Home</Link>
<!-- <a href="/?one=1">Home</a> -->
Some (ephemeral) state associated with the location.

The AsyncLink component is used to create an anchor for navigating to another route. This is similar to the the Link, but also takes a wrapper component for

<menu>
  <AsyncLink wrapper={NavSpinner} name='User' params={{ userID: 5 }}>
    Profile
  </AsyncLink>
</menu>

<script>
  import AsyncLink from '@curi/svelte/components/AsyncLink.svelte';
</script>

A wrapper component to be rendered around the anchor. The wrapper will receive a navigating prop that defaults to false, is set to true when a user clicks the anchor to begin a navigation, and resets to false when the navigation completes.

<AsyncLink wrapper={NavSpinner} name="Home">Home</AsyncLink>

For a demonstration, please check out the asynchronous navigation example.

The name of the route to link to.

<AsyncLink name="Home" wrapper={NavSpinner}>Home</AsyncLink>
<!-- <a href="/">Home</a> -->

An object of route params for the linked route.

<AsyncLink
  name="User"
  params={{ userID: 5 }}
  wrapper={NavSpinner}
>
  Profile
</AsyncLink>
<!-- <a href="/user/5">Profile</a> -->

The hash for the location to link to.

<AsyncLink
  name="Home"
  hash="test"
  wrapper={NavSpinner}
>Home</AsyncLink>
<!-- <a href="/#test">Home</a> -->

The query for the location to link to.

<AsyncLink
  name="Home"
  query="one=1"
  wrapper={NavSpinner}
>Home</AsyncLink>
<!-- <a href="/?one=1">Home</a> -->
Some (ephemeral) state associated with the location.

The Navigating component is used to cancel an active asynchronous navigation.

A component is passed to Navigating. When there is an active asynchronous navigation, the component will be given a cancel function. When there is not an active asynchronous navigation, cancel will be undefined.

<Navigating component={Cancel} />

<script>
  import Navigating from "@curi/svelte/components/Navigating.svelte";
  import Cancel from "./Cancel";
</script>

A component that receives a cancel function when there is an active asynchronous navigation.

{#if typeof cancel === "function"}
  <button on:click="cancelHandler(event, cancel)">
    Cancel Navigation
  </button>
{/if}

<script>
  export default {
    methods: {
      cancelHandler(event, cancel) {
        event.preventDefault();
        cancel();
      }
    }
  };
</script>

getRouter

The getRouter function is used to read the router from Svelte's context.

<h1>{pathname}</h1>

<script>
  import { getRouter } from "@curi/svelte";

  let router = getRouter();

  let homeRoute = router.route("Home");
</script>

getResponse

The getResponse function is used to read the response store from Svelte's context. The value will update whenever there is a new response.

<h1>{$response.name}</h1>

<script>
  import { getResponse } from "@curi/svelte";

  let response = getResponse();
</script>

getNavigation

The getNavigation function is used to read the navigation store from Svelte's context. The value will update whenever there is a new navigation.

<h1>{$navigation.action}</h1>

<script>
  import { getNavigation } from "@curi/svelte";

  let navigation = getNavigation();
</script>