From 4d7f55bce7e42fec26943cf3a7cd053a413c94dc Mon Sep 17 00:00:00 2001
From: Antoine Lelaisant <antoine.lelaisant@knplabs.com>
Date: Sat, 19 Oct 2019 01:06:17 +0200
Subject: [PATCH] Named routes

---
 README.md                    | 66 +++++++++++++++++++++++++++++++++---
 src/components/Link.svelte   | 28 +++++++++++++++
 src/components/Route.svelte  | 21 +++++++++++-
 src/components/Router.svelte |  6 +++-
 src/index.js                 |  1 +
 src/store.js                 |  1 +
 src/utils.js                 |  6 ++++
 7 files changed, 123 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Link.svelte

diff --git a/README.md b/README.md
index 7a65130..2d9d5c6 100644
--- a/README.md
+++ b/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>
+```
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
new file mode 100644
index 0000000..3329a58
--- /dev/null
+++ b/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>
diff --git a/src/components/Route.svelte b/src/components/Route.svelte
index 008d355..81ac740 100644
--- a/src/components/Route.svelte
+++ b/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)
   }
diff --git a/src/components/Router.svelte b/src/components/Router.svelte
index 6ef5ef3..9b863e5 100644
--- a/src/components/Router.svelte
+++ b/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>
diff --git a/src/index.js b/src/index.js
index 94c2e52..a5ef086 100644
--- a/src/index.js
+++ b/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'
diff --git a/src/store.js b/src/store.js
index 928c188..ef71a06 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,3 +1,4 @@
 import { writable } from 'svelte/store'
 
 export const location = writable(null)
+export const routes = writable([])
diff --git a/src/utils.js b/src/utils.js
index b7dc45a..cd915b2 100644
--- a/src/utils.js
+++ b/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)
+}