kdu-router 3.1.7 → 3.5.4

package/src/history/base.js

@@ -4,14 +4,23 @@ import { _Kdu } from '../install'
 import type Router from '../index'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
-import { warn, isError, isExtendedError } from '../util/warn'
-import { START, isSameRoute } from '../util/route'
+import { warn } from '../util/warn'
+import { START, isSameRoute, handleRouteEntered } from '../util/route'
 import {
   flatten,
   flatMapComponents,
   resolveAsyncComponents
 } from '../util/resolve-components'
-import { NavigationDuplicated } from './errors'
+import {
+  createNavigationDuplicatedError,
+  createNavigationCancelledError,
+  createNavigationRedirectedError,
+  createNavigationAbortedError,
+  isError,
+  isNavigationFailure,
+  NavigationFailureType
+} from '../util/errors'
+import { handleScroll } from '../util/scroll'
 
 export class History {
   router: Router
@@ -23,13 +32,20 @@ export class History {
   readyCbs: Array<Function>
   readyErrorCbs: Array<Function>
   errorCbs: Array<Function>
+  listeners: Array<Function>
+  cleanupListeners: Function
 
   // implemented by sub-classes
   +go: (n: number) => void
-  +push: (loc: RawLocation) => void
-  +replace: (loc: RawLocation) => void
+  +push: (loc: RawLocation, onComplete?: Function, onAbort?: Function) => void
+  +replace: (
+    loc: RawLocation,
+    onComplete?: Function,
+    onAbort?: Function
+  ) => void
   +ensureURL: (push?: boolean) => void
   +getCurrentLocation: () => string
+  +setupListeners: Function
 
   constructor (router: Router, base: ?string) {
     this.router = router
@@ -41,6 +57,7 @@ export class History {
     this.readyCbs = []
     this.readyErrorCbs = []
     this.errorCbs = []
+    this.listeners = []
   }
 
   listen (cb: Function) {
@@ -67,13 +84,27 @@ export class History {
     onComplete?: Function,
     onAbort?: Function
   ) {
-    const route = this.router.match(location, this.current)
+    let route
+    // catch redirect option
+    try {
+      route = this.router.match(location, this.current)
+    } catch (e) {
+      this.errorCbs.forEach(cb => {
+        cb(e)
+      })
+      // Exception should still be thrown
+      throw e
+    }
+    const prev = this.current
     this.confirmTransition(
       route,
       () => {
         this.updateRoute(route)
         onComplete && onComplete(route)
         this.ensureURL()
+        this.router.afterHooks.forEach(hook => {
+          hook && hook(route, prev)
+        })
 
         // fire ready cbs once
         if (!this.ready) {
@@ -88,10 +119,14 @@ export class History {
           onAbort(err)
         }
         if (err && !this.ready) {
-          this.ready = true
-          this.readyErrorCbs.forEach(cb => {
-            cb(err)
-          })
+          // Initial redirection should not mark the history as ready yet
+          // because it's triggered by the redirection instead
+          if (!isNavigationFailure(err, NavigationFailureType.redirected) || prev !== START) {
+            this.ready = true
+            this.readyErrorCbs.forEach(cb => {
+              cb(err)
+            })
+          }
         }
       }
     )
@@ -99,29 +134,37 @@ export class History {
 
   confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
     const current = this.current
+    this.pending = route
     const abort = err => {
-      // When the user navigates through history through back/forward buttons
-      // we do not want to throw the error. We only throw it if directly calling
-      // push/replace. That's why it's not included in isError
-      if (!isExtendedError(NavigationDuplicated, err) && isError(err)) {
+      // changed after adding errors
+      // before that change, redirect and aborted navigation would produce an err == null
+      if (!isNavigationFailure(err) && isError(err)) {
         if (this.errorCbs.length) {
           this.errorCbs.forEach(cb => {
             cb(err)
           })
         } else {
-          warn(false, 'uncaught error during route navigation:')
+          if (process.env.NODE_ENV !== 'production') {
+            warn(false, 'uncaught error during route navigation:')
+          }
           console.error(err)
         }
       }
       onAbort && onAbort(err)
     }
+    const lastRouteIndex = route.matched.length - 1
+    const lastCurrentIndex = current.matched.length - 1
     if (
       isSameRoute(route, current) &&
       // in the case the route map has been dynamically appended to
-      route.matched.length === current.matched.length
+      lastRouteIndex === lastCurrentIndex &&
+      route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]
     ) {
       this.ensureURL()
-      return abort(new NavigationDuplicated(route))
+      if (route.hash) {
+        handleScroll(this.router, current, route, false)
+      }
+      return abort(createNavigationDuplicatedError(current, route))
     }
 
     const { updated, deactivated, activated } = resolveQueue(
@@ -142,15 +185,17 @@ export class History {
       resolveAsyncComponents(activated)
     )
 
-    this.pending = route
     const iterator = (hook: NavigationGuard, next) => {
       if (this.pending !== route) {
-        return abort()
+        return abort(createNavigationCancelledError(current, route))
       }
       try {
         hook(route, current, (to: any) => {
-          if (to === false || isError(to)) {
+          if (to === false) {
             // next(false) -> abort navigation, ensure current URL
+            this.ensureURL(true)
+            abort(createNavigationAbortedError(current, route))
+          } else if (isError(to)) {
             this.ensureURL(true)
             abort(to)
           } else if (
@@ -159,7 +204,7 @@ export class History {
               (typeof to.path === 'string' || typeof to.name === 'string'))
           ) {
             // next('/') or next({ path: '/' }) -> redirect
-            abort()
+            abort(createNavigationRedirectedError(current, route))
             if (typeof to === 'object' && to.replace) {
               this.replace(to)
             } else {
@@ -176,23 +221,19 @@ export class History {
     }
 
     runQueue(queue, iterator, () => {
-      const postEnterCbs = []
-      const isValid = () => this.current === route
       // wait until async components are resolved before
       // extracting in-component enter guards
-      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
+      const enterGuards = extractEnterGuards(activated)
       const queue = enterGuards.concat(this.router.resolveHooks)
       runQueue(queue, iterator, () => {
         if (this.pending !== route) {
-          return abort()
+          return abort(createNavigationCancelledError(current, route))
         }
         this.pending = null
         onComplete(route)
         if (this.router.app) {
           this.router.app.$nextTick(() => {
-            postEnterCbs.forEach(cb => {
-              cb()
-            })
+            handleRouteEntered(route)
           })
         }
       })
@@ -200,12 +241,24 @@ export class History {
   }
 
   updateRoute (route: Route) {
-    const prev = this.current
     this.current = route
     this.cb && this.cb(route)
-    this.router.afterHooks.forEach(hook => {
-      hook && hook(route, prev)
+  }
+
+  setupListeners () {
+    // Default implementation is empty
+  }
+
+  teardown () {
+    // clean up event listeners
+    this.listeners.forEach(cleanupListener => {
+      cleanupListener()
     })
+    this.listeners = []
+
+    // reset current history route
+    this.current = START
+    this.pending = null
   }
 }
 
@@ -296,15 +349,13 @@ function bindGuard (guard: NavigationGuard, instance: ?_Kdu): ?NavigationGuard {
 }
 
 function extractEnterGuards (
-  activated: Array<RouteRecord>,
-  cbs: Array<Function>,
-  isValid: () => boolean
+  activated: Array<RouteRecord>
 ): Array<?Function> {
   return extractGuards(
     activated,
     'beforeRouteEnter',
     (guard, _, match, key) => {
-      return bindEnterGuard(guard, match, key, cbs, isValid)
+      return bindEnterGuard(guard, match, key)
     }
   )
 }
@@ -312,41 +363,17 @@ function extractEnterGuards (
 function bindEnterGuard (
   guard: NavigationGuard,
   match: RouteRecord,
-  key: string,
-  cbs: Array<Function>,
-  isValid: () => boolean
+  key: string
 ): NavigationGuard {
   return function routeEnterGuard (to, from, next) {
     return guard(to, from, cb => {
       if (typeof cb === 'function') {
-        cbs.push(() => {
-          // #750
-          // if a router-view is wrapped with an out-in transition,
-          // the instance may not have been registered at this time.
-          // we will need to poll for registration until current route
-          // is no longer valid.
-          poll(cb, match.instances, key, isValid)
-        })
+        if (!match.enteredCbs[key]) {
+          match.enteredCbs[key] = []
+        }
+        match.enteredCbs[key].push(cb)
       }
       next(cb)
     })
   }
 }
-
-function poll (
-  cb: any, // somehow flow cannot infer this is a function
-  instances: Object,
-  key: string,
-  isValid: () => boolean
-) {
-  if (
-    instances[key] &&
-    !instances[key]._isBeingDestroyed // do not reuse being destroyed instance
-  ) {
-    cb(instances[key])
-  } else if (isValid()) {
-    setTimeout(() => {
-      poll(cb, instances, key, isValid)
-    }, 16)
-  }
-}

package/src/history/hash.js

@@ -20,31 +20,40 @@ export class HashHistory extends History {
   // this is delayed until the app mounts
   // to avoid the hashchange listener being fired too early
   setupListeners () {
+    if (this.listeners.length > 0) {
+      return
+    }
+
     const router = this.router
     const expectScroll = router.options.scrollBehavior
     const supportsScroll = supportsPushState && expectScroll
 
     if (supportsScroll) {
-      setupScroll()
+      this.listeners.push(setupScroll())
     }
 
-    window.addEventListener(
-      supportsPushState ? 'popstate' : 'hashchange',
-      () => {
-        const current = this.current
-        if (!ensureSlash()) {
-          return
-        }
-        this.transitionTo(getHash(), route => {
-          if (supportsScroll) {
-            handleScroll(this.router, route, current, true)
-          }
-          if (!supportsPushState) {
-            replaceHash(route.fullPath)
-          }
-        })
+    const handleRoutingEvent = () => {
+      const current = this.current
+      if (!ensureSlash()) {
+        return
       }
+      this.transitionTo(getHash(), route => {
+        if (supportsScroll) {
+          handleScroll(this.router, route, current, true)
+        }
+        if (!supportsPushState) {
+          replaceHash(route.fullPath)
+        }
+      })
+    }
+    const eventType = supportsPushState ? 'popstate' : 'hashchange'
+    window.addEventListener(
+      eventType,
+      handleRoutingEvent
     )
+    this.listeners.push(() => {
+      window.removeEventListener(eventType, handleRoutingEvent)
+    })
   }
 
   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
@@ -115,17 +124,6 @@ export function getHash (): string {
   if (index < 0) return ''
 
   href = href.slice(index + 1)
-  // decode the hash but not the search or hash
-  // as search(query) is already decoded
-  const searchIndex = href.indexOf('?')
-  if (searchIndex < 0) {
-    const hashIndex = href.indexOf('#')
-    if (hashIndex > -1) {
-      href = decodeURI(href.slice(0, hashIndex)) + href.slice(hashIndex)
-    } else href = decodeURI(href)
-  } else {
-    href = decodeURI(href.slice(0, searchIndex)) + href.slice(searchIndex)
-  }
 
   return href
 }

package/src/history/html5.js

@@ -8,24 +8,34 @@ import { setupScroll, handleScroll } from '../util/scroll'
 import { pushState, replaceState, supportsPushState } from '../util/push-state'
 
 export class HTML5History extends History {
+  _startLocation: string
+
   constructor (router: Router, base: ?string) {
     super(router, base)
 
+    this._startLocation = getLocation(this.base)
+  }
+
+  setupListeners () {
+    if (this.listeners.length > 0) {
+      return
+    }
+
+    const router = this.router
     const expectScroll = router.options.scrollBehavior
     const supportsScroll = supportsPushState && expectScroll
 
     if (supportsScroll) {
-      setupScroll()
+      this.listeners.push(setupScroll())
     }
 
-    const initLocation = getLocation(this.base)
-    window.addEventListener('popstate', e => {
+    const handleRoutingEvent = () => {
       const current = this.current
 
       // Avoiding first `popstate` event dispatched in some browsers but first
       // history route not updated since async guard at the same time.
       const location = getLocation(this.base)
-      if (this.current === START && location === initLocation) {
+      if (this.current === START && location === this._startLocation) {
         return
       }
 
@@ -34,6 +44,10 @@ export class HTML5History extends History {
           handleScroll(router, route, current, true)
         }
       })
+    }
+    window.addEventListener('popstate', handleRoutingEvent)
+    this.listeners.push(() => {
+      window.removeEventListener('popstate', handleRoutingEvent)
     })
   }
 
@@ -72,8 +86,13 @@ export class HTML5History extends History {
 }
 
 export function getLocation (base: string): string {
-  let path = decodeURI(window.location.pathname)
-  if (base && path.indexOf(base) === 0) {
+  let path = window.location.pathname
+  const pathLowerCase = path.toLowerCase()
+  const baseLowerCase = base.toLowerCase()
+  // base="/a" shouldn't turn path="/app" into "/a/pp"
+  // so we ensure the trailing slash in the base
+  if (base && ((pathLowerCase === baseLowerCase) ||
+    (pathLowerCase.indexOf(cleanPath(baseLowerCase + '/')) === 0))) {
     path = path.slice(base.length)
   }
   return (path || '/') + window.location.search + window.location.hash

package/src/index.js

@@ -2,12 +2,13 @@
 
 import { install } from './install'
 import { START } from './util/route'
-import { assert } from './util/warn'
+import { assert, warn } from './util/warn'
 import { inBrowser } from './util/dom'
 import { cleanPath } from './util/path'
 import { createMatcher } from './create-matcher'
 import { normalizeLocation } from './util/location'
 import { supportsPushState } from './util/push-state'
+import { handleScroll } from './util/scroll'
 
 import { HashHistory } from './history/hash'
 import { HTML5History } from './history/html5'
@@ -15,24 +16,32 @@ import { AbstractHistory } from './history/abstract'
 
 import type { Matcher } from './create-matcher'
 
+import { isNavigationFailure, NavigationFailureType } from './util/errors'
+
 export default class KduRouter {
-  static install: () => void;
-  static version: string;
-
-  app: any;
-  apps: Array<any>;
-  ready: boolean;
-  readyCbs: Array<Function>;
-  options: RouterOptions;
-  mode: string;
-  history: HashHistory | HTML5History | AbstractHistory;
-  matcher: Matcher;
-  fallback: boolean;
-  beforeHooks: Array<?NavigationGuard>;
-  resolveHooks: Array<?NavigationGuard>;
-  afterHooks: Array<?AfterNavigationHook>;
+  static install: () => void
+  static version: string
+  static isNavigationFailure: Function
+  static NavigationFailureType: any
+  static START_LOCATION: Route
+
+  app: any
+  apps: Array<any>
+  ready: boolean
+  readyCbs: Array<Function>
+  options: RouterOptions
+  mode: string
+  history: HashHistory | HTML5History | AbstractHistory
+  matcher: Matcher
+  fallback: boolean
+  beforeHooks: Array<?NavigationGuard>
+  resolveHooks: Array<?NavigationGuard>
+  afterHooks: Array<?AfterNavigationHook>
 
   constructor (options: RouterOptions = {}) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn(this instanceof KduRouter, `Router must be called with the new operator.`)
+    }
     this.app = null
     this.apps = []
     this.options = options
@@ -42,7 +51,8 @@ export default class KduRouter {
     this.matcher = createMatcher(options.routes || [], this)
 
     let mode = options.mode || 'hash'
-    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
+    this.fallback =
+      mode === 'history' && !supportsPushState && options.fallback !== false
     if (this.fallback) {
       mode = 'hash'
     }
@@ -68,11 +78,7 @@ export default class KduRouter {
     }
   }
 
-  match (
-    raw: RawLocation,
-    current?: Route,
-    redirectedFrom?: Location
-  ): Route {
+  match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {
     return this.matcher.match(raw, current, redirectedFrom)
   }
 
@@ -81,11 +87,12 @@ export default class KduRouter {
   }
 
   init (app: any /* Kdu component instance */) {
-    process.env.NODE_ENV !== 'production' && assert(
-      install.installed,
-      `not installed. Make sure to call \`Kdu.use(KduRouter)\` ` +
-      `before creating root instance.`
-    )
+    process.env.NODE_ENV !== 'production' &&
+      assert(
+        install.installed,
+        `not installed. Make sure to call \`Kdu.use(KduRouter)\` ` +
+          `before creating root instance.`
+      )
 
     this.apps.push(app)
 
@@ -97,6 +104,8 @@ export default class KduRouter {
       // ensure we still have a main app or null if no apps
       // we do not release the router so it can be reused
       if (this.app === app) this.app = this.apps[0] || null
+
+      if (!this.app) this.history.teardown()
     })
 
     // main app previously initialized
@@ -109,21 +118,29 @@ export default class KduRouter {
 
     const history = this.history
 
-    if (history instanceof HTML5History) {
-      history.transitionTo(history.getCurrentLocation())
-    } else if (history instanceof HashHistory) {
-      const setupHashListener = () => {
+    if (history instanceof HTML5History || history instanceof HashHistory) {
+      const handleInitialScroll = routeOrError => {
+        const from = history.current
+        const expectScroll = this.options.scrollBehavior
+        const supportsScroll = supportsPushState && expectScroll
+
+        if (supportsScroll && 'fullPath' in routeOrError) {
+          handleScroll(this, routeOrError, from, false)
+        }
+      }
+      const setupListeners = routeOrError => {
         history.setupListeners()
+        handleInitialScroll(routeOrError)
       }
       history.transitionTo(
         history.getCurrentLocation(),
-        setupHashListener,
-        setupHashListener
+        setupListeners,
+        setupListeners
       )
     }
 
     history.listen(route => {
-      this.apps.forEach((app) => {
+      this.apps.forEach(app => {
         app._route = route
       })
     })
@@ -192,11 +209,14 @@ export default class KduRouter {
     if (!route) {
       return []
     }
-    return [].concat.apply([], route.matched.map(m => {
-      return Object.keys(m.components).map(key => {
-        return m.components[key]
+    return [].concat.apply(
+      [],
+      route.matched.map(m => {
+        return Object.keys(m.components).map(key => {
+          return m.components[key]
+        })
       })
-    }))
+    )
   }
 
   resolve (
@@ -212,12 +232,7 @@ export default class KduRouter {
     resolved: Route
   } {
     current = current || this.history.current
-    const location = normalizeLocation(
-      to,
-      current,
-      append,
-      this
-    )
+    const location = normalizeLocation(to, current, append, this)
     const route = this.match(location, current)
     const fullPath = route.redirectedFrom || route.fullPath
     const base = this.history.base
@@ -232,7 +247,21 @@ export default class KduRouter {
     }
   }
 
+  getRoutes () {
+    return this.matcher.getRoutes()
+  }
+
+  addRoute (parentOrRoute: string | RouteConfig, route?: RouteConfig) {
+    this.matcher.addRoute(parentOrRoute, route)
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation())
+    }
+  }
+
   addRoutes (routes: Array<RouteConfig>) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn(false, 'router.addRoutes() is deprecated and has been removed in Kdu Router 4. Use router.addRoute() instead.')
+    }
     this.matcher.addRoutes(routes)
     if (this.history.current !== START) {
       this.history.transitionTo(this.history.getCurrentLocation())
@@ -255,6 +284,9 @@ function createHref (base: string, fullPath: string, mode) {
 
 KduRouter.install = install
 KduRouter.version = '__VERSION__'
+KduRouter.isNavigationFailure = isNavigationFailure
+KduRouter.NavigationFailureType = NavigationFailureType
+KduRouter.START_LOCATION = START
 
 if (inBrowser && window.Kdu) {
   window.Kdu.use(KduRouter)