feat: support svelte3

.eslintrc

@@ -8,6 +8,13 @@
     "browser": true,
     "node": true
   },
+  "plugins": [
+    "svelte3"
+  ],
+  "overrides": [{
+    "files": ["**/*.svelte"],
+    "processor": "svelte3/svelte3"
+  }],
   "extends": "standard",
   "parser": "babel-eslint",
   "rules": {

README.md

@@ -5,7 +5,7 @@
 
 > Router component for Svelte
 
-This branch is for Svelte v1.8.1+. For usage with Svelte v1.8.0-, see the [0.1.x branch](https://github.com/jikkai/svelte-router/tree/0.1.x).
+This branch is for Svelte v3.0.0+. For usage with Svelte v1.8.0+, see the [v2 branch](https://github.com/jikkai/svelte-router/tree/v2). For usage with Svelte v1.8.0-, see the [0.1.x branch](https://github.com/jikkai/svelte-router/tree/0.1.x).
 
 ## Installation
 
@@ -25,54 +25,36 @@ yarn add svelte-router
 
 ```html
 <div>
-  <RouterLink to="/">Home</RouterLink>
-  <RouterLink to="/welcome">Welcome</RouterLink>
-  <div id="app"></div>
+  <Link to="/">Home</Link>
+  <Link to="/welcome">Welcome</Link>
+  <div use:create></div>
 </div>
 
 <script>
-  import { Store } from 'svelte/store'
-  import SvelteRouter from 'svelte-router'
-  import Home from './Home.html'
-  import Welcome from './Welcome.html'
-  import Animal from './Animal.html'
-
-  const router = new SvelteRouter({
-    mode: 'hash',
-    routes: {
-      '/': Home,
-      '/welcome': Welcome,
-      '/animal': {
-        Component: Animal,
-        props: {
-          store: new Store({
-            animal: 'dog',
-            sheep: 'baaah',
-            moo: {
-              cow: true,
-              foo: 'bar'
-            }
-          }),
-          data: {
-            qwert: 'asdf'
-          }
-        }
+  import SvelteRouter, { Link } from 'svelte-router'
+  import Home from './Home.svelte'
+  import Welcome from './Welcome.svelte'
+
+  function create (node) {
+    const router = new SvelteRouter({
+      target: node,
+      mode: 'hash',
+      routes: [{
+        path: '/',
+        component: Home
+      }, {
+        path: '/welcome',
+        component: Welcome
+      }]
+    })
+
+    router.init()
+
+    return {
+      destroy () {
+        router.destroy()
       }
     }
-  })
-
-  export default {
-    oncreate () {
-      router.create('#app')
-    },
-
-    ondestroy () {
-      router.destroy()
-    },
-
-    components: {
-      RouterLink: SvelteRouter.RouterLink
-    }
   }
 </script>
 
@@ -90,12 +72,16 @@ yarn add svelte-router
 * `push(path: string)`
 * `replace(path: string)`
 * `go(n: number)`
+* `goBack()`
+* `goForward()`
 * `listen(fn: function)`
 
-### RouterLink
+### Link
 
+* `to`: string
 * `replace`: boolean
-* `match`: string
+* `className`: string
+* `activeClassName`: string
 
 ## Contributors
 

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   presets: [
-    [ '@babel/preset-env', {
+    ['@babel/preset-env', {
       modules: false,
       targets: {
         browsers: [

example/app.html → example/App.svelte

@@ -1,37 +1,39 @@
 <Header></Header>
 <section class="sr-container">
   <Menu></Menu>
+
   <main class="sr-main">
-    <div id="app"></div>
+    <div use:create></div>
   </main>
 </section>
 
 <script>
   import prism from  'prismjs/prism'
+
   import SvelteRouter from '../src'
   import routes from './routes'
-  import Header from './components/header.html'
-  import Menu from './components/menu.html'
+  import Header from './components/header'
+  import Menu from './components/menu'
 
-  const router = new SvelteRouter(routes)
-  SvelteRouter.listen(() => {
-    setTimeout(() => {
-      prism.highlightAll()
+  function create (node) {
+    const router = new SvelteRouter({
+      target: node,
+      mode: 'hash',
+      routes
     })
-  })
 
-  export default {
-    oncreate () {
-      router.create('#app')
-    },
+    SvelteRouter.listen(() => {
+      setTimeout(() => {
+        prism.highlightAll()
+      })
+    })
 
-    ondestroy () {
-      router.destroy()
-    },
+    router.init()
 
-    components: {
-      Header,
-      Menu
+    return {
+      destroy () {
+        router.destroy()
+      }
     }
   }
 </script>

example/components/button.svelte

@@ -0,0 +1,12 @@
+<button
+	class="alius-button is-primary"
+	on:click={() => dispatch('click')}
+>
+  <slot></slot>
+</button>
+
+<script>
+	import { createEventDispatcher } from 'svelte'
+
+	const dispatch = createEventDispatcher()
+</script>

example/components/header.html → example/components/header.svelte

@@ -1,17 +1,11 @@
 <header class="sr-header">
-  <RouterLink to="/">
+  <Link to="/">
     <h1>Svelte Router</h1>
-  </RouterLink>
+  </Link>
 </header>
 
 <script>
-  import SvelteRouter from '../../src'
-
-  export default {
-    components: {
-      RouterLink: SvelteRouter.RouterLink
-    }
-  }
+  import { Link } from '../../src'
 </script>
 
 <style>

example/components/menu.html → example/components/menu.svelte

@@ -1,20 +1,20 @@
 <aside class="sr-menu">
   <ul>
     <li>
-      <RouterLink to="/">Introduction</RouterLink>
+      <Link to="/">Introduction</Link>
     </li>
     <li>
-      <RouterLink to="/installation">Installation</RouterLink>
+      <Link to="/installation">Installation</Link>
     </li>
     <li>
       <div class="sr-menu-group">
         <span>Getting Started</span>
         <ul>
           <li>
-            <RouterLink to="/guide/basic-usage" replace>Basic Usage</RouterLink>
+            <Link to="/guide/basic-usage" replace>Basic Usage</Link>
           </li>
           <li>
-            <RouterLink to="/guide/api">API</RouterLink>
+            <Link to="/guide/api">API</Link>
           </li>
         </ul>
       </div>
@@ -24,7 +24,7 @@
         <span>Component</span>
         <ul>
           <li>
-            <RouterLink to="/component/router-link" replace>RouterLink</RouterLink>
+            <Link to="/component/router-link" replace>Link</Link>
           </li>
         </ul>
       </div>
@@ -33,13 +33,7 @@
 </aside>
 
 <script>
-  import SvelteRouter from '../../src'
-
-  export default {
-    components: {
-      RouterLink: SvelteRouter.RouterLink
-    }
-  }
+  import { Link } from '../../src'
 </script>
 
 <style>

example/docs/component/Link.md

@@ -0,0 +1,12 @@
+# Link
+
+`<Link>` is the component for enabling user navigation in a router-enabled app.
+
+## Props
+
+| name | type | default |
+| --- | --- | --- |
+| to | `string` | - |
+| replace | `boolean` | `false` |
+| className | `string` | `''` |
+| activeClassName | `string` | `'router-link-active'` |