feat: support browserHistory

Author: jikkai

example/app.html

@@ -20,23 +20,27 @@
   })
 
   const router = new SvelteRouter({
-    '/': Home,
-    '/welcome': {
-      Component: Welcome,
-      props: {
-        store
-      }
-    },
-    '/test/replace': Replace,
-    '/hello/:name': {
-      Component: Hello,
-      props: {
-        data: {
-          salutation: 'Hello'
+    mode: 'hash',
+    // mode: 'history',
+    routes: {
+      '/': Home,
+      '/welcome': {
+        Component: Welcome,
+        props: {
+          store
         }
       },
-    },
-    default: NotFound
+      '/test/replace': Replace,
+      '/hello/:name': {
+        Component: Hello,
+        props: {
+          data: {
+            salutation: 'Hello'
+          }
+        },
+      },
+      default: NotFound
+    }
   })
   SvelteRouter.listen(() => {
     console.log('router changed')

rollup.config.js

@@ -43,6 +43,7 @@ if (process.env.NODE_ENV === 'production') {
   config.input = './example/main.js'
   config.plugins.unshift(
     serve({
+      historyApiFallback: true,
       contentBase: ['lib', 'build']
     }),
     livereload('release')

src/components/RouterLink.html

@@ -3,15 +3,14 @@
 </a>
 
 <script>
-  import history from '../history'
   const activedClassName = 'router-link-active'
 
   export default {
     data () {
       return {
         replace: false,
         to: '/',
-        basePath: '#',
+        basePath: '',
         active: false,
         class: '',
         activeClass: activedClassName,

src/history.js

@@ -1,5 +1,13 @@
-import createHistory from 'history/createHashHistory'
+import createBrowserHistory from 'history/es/createBrowserHistory'
+import createHashHistory from 'history/es/createHashHistory'
 
-const history = createHistory()
+const history = mode => {
+  switch (mode) {
+    case 'history':
+      return createBrowserHistory()
+    default:
+      return createHashHistory()
+  }
+}
 
 export default history

src/router.js

@@ -1,4 +1,4 @@
-import history from './history'
+import createHistory from './history'
 import {
   getPathRegex,
   getPathVariables,
@@ -7,6 +7,8 @@ import {
 
 const DEFAULT_ROUTE = 'default'
 
+let history
+
 class SvelteRouter {
   target = null
   listener = null
@@ -15,6 +17,10 @@ class SvelteRouter {
 
   constructor (options) {
     this.options = options
+    history = createHistory(options.mode)
+    Object.defineProperty(window, 'history', {
+      get: () => history
+    })
   }
 
   create (target) {
@@ -40,21 +46,21 @@ class SvelteRouter {
       this.content = null
     }
 
-    for (let path in this.options) {
-      if (Object.prototype.hasOwnProperty.call(this.options, path)) {
+    for (let path in this.options.routes) {
+      if (Object.prototype.hasOwnProperty.call(this.options.routes, path)) {
         const sections = path.split('/')
         const regexPath = getPathRegex(sections)
         const matches = location.pathname.match(new RegExp(`^${regexPath}$`))
         if (matches !== null) {
           const pathVariables = getPathVariables(sections, matches)
-          this.content = getContent(this.options, path, this.target, pathVariables)
+          this.content = getContent(this.options.routes, path, this.target, pathVariables)
           found = true
           break
         }
       }
     }
-    if (!found && this.options[DEFAULT_ROUTE]) {
-      this.content = getContent(this.options, DEFAULT_ROUTE, this.target, {})
+    if (!found && this.options.routes[DEFAULT_ROUTE]) {
+      this.content = getContent(this.options.routes, DEFAULT_ROUTE, this.target, {})
     }
   }
 }