Merge pull request #7 from svelters/feature/named-routes

Named routes

README.md

@@ -49,12 +49,12 @@ yarn add svelters-router
 
   let routes = [
     {
-        path: "/users",
-        component: Users
+      path: "/users",
+      component: Users
     },
     {
-        path: "/users/:id",
-        component: User
+      path: "/users/:id",
+      component: User
     }
   ]
 </script>
@@ -101,6 +101,8 @@ Route parameters are compiled by `svelters-router` and given to defined componen
 
 ### Links
 
+#### The link action
+
 ```svelte
 <script>
   import { link } from 'svelters-router'
@@ -111,6 +113,18 @@ Route parameters are compiled by `svelters-router` and given to defined componen
 <a href="/some/path" use:link>Just click here!</a>
 ```
 
+#### The Link component
+
+```svelte
+<script>
+  import { Link } from 'svelters-router'
+</script>
+
+<p>I wonder how simple it is to create a link ?</p>
+
+<Link href="/some/path">Just click here!</Link>
+```
+
 ### To navigate somewhere programmatically
 
 ```svelte
@@ -129,3 +143,47 @@ Route parameters are compiled by `svelters-router` and given to defined componen
 
 <button on:click={goToTheMoon}>Fly me to the moon!</button>
 ```
+
+## Advanced
+
+### Named routes
+
+It's sometime more convenient to rely on route name instead of its path to generate links.
+
+`svelters-router` provides all the stuff you need!
+
+#### Route declaration
+
+```svelte
+<script>
+  import { Router, Route } from 'svelters-router'
+  import Home from './Home.svelte'
+  import Users from './Users.svelte'
+  import User from './User.svelte'
+
+  let routes = [
+    {
+      name: "user.show",
+      path: "/users/:id",
+      component: User
+    }
+  ]
+</script>
+
+<Router {routes}>
+  <Route path="/" component={Home} />
+  <Route path="/users" component={Users} />
+</Router>
+```
+
+#### Link to a named route
+
+```svelte
+<script>
+  import { Link } from 'svelters-router'
+
+  let userId = 1234
+</script>
+
+<Link name="user.show" params={{id: userId}}>See the user {userId}</Link>
+```

src/components/Link.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { derived } from 'svelte/store'
+  import link from '../link'
+  import { routes } from '../store'
+  import { compileParameters } from '../utils'
+
+  export let name = null
+  export let params = {}
+  export let href = null
+
+  let path = derived(routes, routes => {
+    if (href !== null) {
+      return href
+    }
+
+    const index = routes.findIndex(route => route.name === name)
+
+    if (index === -1) {
+      return null
+    }
+
+    return compileParameters(routes[index].path, params)
+  })
+</script>
+
+<a href={$path} use:link>
+  <slot></slot>
+</a>

src/components/Route.svelte

@@ -1,12 +1,31 @@
 <script>
-  import { location } from '../store.js'
+  import { onMount, onDestroy } from 'svelte'
+  import { location, routes } from '../store.js'
   import { matchPath, parseParameters } from '../utils.js'
 
+  export let name = null
   export let path = null
   export let component = null
 
   let routeParams = {}
 
+  onMount(() => {
+    routes.update(routes => {
+      routes.push({ name, path })
+
+      return routes
+    })
+  })
+
+  onDestroy(() => {
+    routes.update(routes => {
+      const index = routes.findIndex(route => route.path === path)
+      routes.splice(index, 1)
+
+      return routes
+    })
+  })
+
   $: if (matchPath($location.pathname, path)) {
     routeParams = parseParameters($location.pathname, path)
   }

src/components/Router.svelte

@@ -8,6 +8,10 @@
 </script>
 
 {#each routes as route}
-  <Route path={route.path} component={route.component} />
+  <Route
+    component={route.component}
+    name={route.name}
+    path={route.path}
+  />
 {/each}
 <slot></slot>

src/index.js

@@ -1,4 +1,5 @@
 export { default as Router } from './components/Router.svelte'
 export { default as Route } from './components/Route.svelte'
+export { default as Link } from './components/Link.svelte'
 export { push, replace, goBack, goForward } from './history'
 export { default as link } from './link'

src/store.js

@@ -1,3 +1,4 @@
 import { writable } from 'svelte/store'
 
 export const location = writable(null)
+export const routes = writable([])

src/utils.js

@@ -19,3 +19,9 @@ export const parseParameters = (location, path) => {
     return memo
   }, {})
 }
+
+export const compileParameters = (path, parameters) => {
+  const toPath = pathToRegexp.compile(path)
+
+  return toPath(parameters)
+}