feat: support passing props to route components

Author: jikkai

babel.config.js

@@ -10,9 +10,5 @@ module.exports = {
         ]
       }
     }]
-  ],
-  plugins: [
-    '@babel/plugin-transform-spread',
-    '@babel/plugin-proposal-class-properties'
   ]
 }

example/components/menu.svelte

@@ -11,7 +11,10 @@
         <span>Getting Started</span>
         <ul>
           <li>
-            <Link to="/guide/basic-usage" replace>Basic Usage</Link>
+            <Link to="/guide/basic-usage">Basic Usage</Link>
+          </li>
+          <li>
+            <Link to="/guide/passing-props">Passing Props</Link>
           </li>
           <li>
             <Link to="/guide/api">API</Link>
@@ -24,7 +27,7 @@
         <span>Component</span>
         <ul>
           <li>
-            <Link to="/component/link" replace>Link</Link>
+            <Link to="/component/link">Link</Link>
           </li>
         </ul>
       </div>

example/docs/guide/PassingProps.md

@@ -0,0 +1,45 @@
+# Passing Props
+
+Passing props to route components by using `props`.
+
+## Foo.svelte
+
+```html
+<h1>Hello {title}</h1>
+
+<script>
+  export let title
+</script>
+```
+
+## App.svelte
+
+```html
+<div>
+  <div use:create></div>
+</div>
+
+<script>
+  import SvelteRouter from 'svelte-router'
+  import Foo from './Foo.svelte'
+
+  function create (node) {
+    const router = new SvelteRouter({
+      target: node,
+      routes: [{
+        path: '/foo',
+        component: Foo,
+        props: {
+          title: 'Foo'
+        }
+      }]
+    })
+
+    return {
+      destroy () {
+        router.destroy()
+      }
+    }
+  }
+</script>
+```

example/pages/guide/PassingProps.svelte

@@ -0,0 +1,7 @@
+<section>
+  {@html content}
+</section>
+
+<script>
+  import content from '../../docs/guide/PassingProps'
+</script>

example/routes.js

@@ -1,6 +1,7 @@
 import Introduction from './pages/Introduction'
 import Installation from './pages/Installation'
 import BasicUsage from './pages/guide/BasicUsage'
+import PassingProps from './pages/guide/PassingProps'
 import API from './pages/guide/API'
 import Link from './pages/component/Link'
 import NotFound from './pages/NotFound'
@@ -14,6 +15,12 @@ export default [{
 }, {
   path: '/guide/basic-usage',
   component: BasicUsage
+}, {
+  path: '/guide/passing-props',
+  component: PassingProps,
+  props: {
+    foo: 'bar'
+  }
 }, {
   path: '/guide/api',
   component: API

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-router",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "A simple router for Svelte",
   "main": "lib/svelte-router.js",
   "author": "Jikkai Xiao <sonne@asaki.me>",
@@ -36,8 +36,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-spread": "^7.2.2",
     "@babel/preset-env": "^7.5.5",
     "alius": "0.0.1",
     "babel-eslint": "^10.0.2",

package.json

@@ -29,13 +29,13 @@ class SvelteRouter {
     this.$content = null
     this.target = typeof target === 'string' ? document.querySelector(target) : target
     this.routes = routes
-    this.$listener = SvelteRouter.history.listen(this.handleRouteChange.bind(this))
+    this.$listener = history.listen(this.handleRouteChange.bind(this))
 
-    this.handleRouteChange(SvelteRouter.history.location)
+    this.handleRouteChange(history.location)
   }
 
   destroy () {
-    if (this.listener) {
+    if (this.$listener) {
       this.$listener()
       this.$listener = null
     }
@@ -54,10 +54,11 @@ class SvelteRouter {
 
     if (matchedRoute && matchedRoute.component) {
       if (this.$content) this.$content.$destroy()
-      const Component = matchedRoute.component
+      const { component: Component, props } = matchedRoute
 
       this.$content = new Component({
-        target: this.target
+        target: this.target,
+        props
       })
     }
   }