kdu-router 3.4.0-beta.0 → 3.5.4

package/src/history/base.js

@@ -5,7 +5,7 @@ import type Router from '../index'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
 import { warn } from '../util/warn'
-import { START, isSameRoute } from '../util/route'
+import { START, isSameRoute, handleRouteEntered } from '../util/route'
 import {
   flatten,
   flatMapComponents,
@@ -20,6 +20,7 @@ import {
   isNavigationFailure,
   NavigationFailureType
 } from '../util/errors'
+import { handleScroll } from '../util/scroll'
 
 export class History {
   router: Router
@@ -84,6 +85,7 @@ export class History {
     onAbort?: Function
   ) {
     let route
+    // catch redirect option
     try {
       route = this.router.match(location, this.current)
     } catch (e) {
@@ -93,10 +95,10 @@ export class History {
       // Exception should still be thrown
       throw e
     }
+    const prev = this.current
     this.confirmTransition(
       route,
       () => {
-        const prev = this.current
         this.updateRoute(route)
         onComplete && onComplete(route)
         this.ensureURL()
@@ -117,16 +119,13 @@ export class History {
           onAbort(err)
         }
         if (err && !this.ready) {
-          this.ready = true
-          // Initial redirection should still trigger the onReady onSuccess
-          if (!isNavigationFailure(err, NavigationFailureType.redirected)) {
+          // 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)
             })
-          } else {
-            this.readyCbs.forEach(cb => {
-              cb(route)
-            })
           }
         }
       }
@@ -135,16 +134,19 @@ export class History {
 
   confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
     const current = this.current
+    this.pending = route
     const abort = err => {
-      // changed after adding errors before that change,
-      // redirect and aborted navigation would produce an err == null
+      // 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)
         }
       }
@@ -159,6 +161,9 @@ export class History {
       route.matched[lastRouteIndex] === current.matched[lastCurrentIndex]
     ) {
       this.ensureURL()
+      if (route.hash) {
+        handleScroll(this.router, current, route, false)
+      }
       return abort(createNavigationDuplicatedError(current, route))
     }
 
@@ -180,7 +185,6 @@ export class History {
       resolveAsyncComponents(activated)
     )
 
-    this.pending = route
     const iterator = (hook: NavigationGuard, next) => {
       if (this.pending !== route) {
         return abort(createNavigationCancelledError(current, route))
@@ -217,11 +221,9 @@ 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) {
@@ -231,9 +233,7 @@ export class History {
         onComplete(route)
         if (this.router.app) {
           this.router.app.$nextTick(() => {
-            postEnterCbs.forEach(cb => {
-              cb()
-            })
+            handleRouteEntered(route)
           })
         }
       })
@@ -249,11 +249,16 @@ export class History {
     // Default implementation is empty
   }
 
-  teardownListeners () {
+  teardown () {
+    // clean up event listeners
     this.listeners.forEach(cleanupListener => {
       cleanupListener()
     })
     this.listeners = []
+
+    // reset current history route
+    this.current = START
+    this.pending = null
   }
 }
 
@@ -344,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)
     }
   )
 }
@@ -360,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

@@ -124,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

@@ -86,8 +86,13 @@ export class HTML5History extends History {
 }
 
 export function getLocation (base: string): string {
-  let path = decodeURI(window.location.pathname)
-  if (base && path.toLowerCase().indexOf(base.toLowerCase()) === 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,7 +2,7 @@
 
 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'
@@ -23,6 +23,7 @@ export default class KduRouter {
   static version: string
   static isNavigationFailure: Function
   static NavigationFailureType: any
+  static START_LOCATION: Route
 
   app: any
   apps: Array<any>
@@ -38,6 +39,9 @@ export default class KduRouter {
   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
@@ -101,10 +105,7 @@ export default class KduRouter {
       // we do not release the router so it can be reused
       if (this.app === app) this.app = this.apps[0] || null
 
-      if (!this.app) {
-        // clean up event listeners
-        this.history.teardownListeners()
-      }
+      if (!this.app) this.history.teardown()
     })
 
     // main app previously initialized
@@ -246,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())
@@ -271,6 +286,7 @@ KduRouter.install = install
 KduRouter.version = '__VERSION__'
 KduRouter.isNavigationFailure = isNavigationFailure
 KduRouter.NavigationFailureType = NavigationFailureType
+KduRouter.START_LOCATION = START
 
 if (inBrowser && window.Kdu) {
   window.Kdu.use(KduRouter)

package/src/util/errors.js

@@ -1,3 +1,4 @@
+// When changing thing, also edit router.d.ts
 export const NavigationFailureType = {
   redirected: 2,
   aborted: 4,

package/src/util/path.js

@@ -70,5 +70,5 @@ export function parsePath (path: string): {
 }
 
 export function cleanPath (path: string): string {
-  return path.replace(/\/\//g, '/')
+  return path.replace(/\/(?:\s*\/)+/g, '/')
 }

package/src/util/query.js

@@ -9,11 +9,21 @@ const commaRE = /%2C/g
 // fixed encodeURIComponent which is more conformant to RFC3986:
 // - escapes [!'()*]
 // - preserve commas
-const encode = str => encodeURIComponent(str)
-  .replace(encodeReserveRE, encodeReserveReplacer)
-  .replace(commaRE, ',')
+const encode = str =>
+  encodeURIComponent(str)
+    .replace(encodeReserveRE, encodeReserveReplacer)
+    .replace(commaRE, ',')
 
-const decode = decodeURIComponent
+export function decode (str: string) {
+  try {
+    return decodeURIComponent(str)
+  } catch (err) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn(false, `Error decoding "${str}". Leaving it intact.`)
+    }
+  }
+  return str
+}
 
 export function resolveQuery (
   query: ?string,
@@ -30,11 +40,15 @@ export function resolveQuery (
   }
   for (const key in extraQuery) {
     const value = extraQuery[key]
-    parsedQuery[key] = Array.isArray(value) ? value.map(v => '' + v) : '' + value
+    parsedQuery[key] = Array.isArray(value)
+      ? value.map(castQueryParamValue)
+      : castQueryParamValue(value)
   }
   return parsedQuery
 }
 
+const castQueryParamValue = value => (value == null || typeof value === 'object' ? value : String(value))
+
 function parseQuery (query: string): Dictionary<string> {
   const res = {}
 
@@ -47,9 +61,7 @@ function parseQuery (query: string): Dictionary<string> {
   query.split('&').forEach(param => {
     const parts = param.replace(/\+/g, ' ').split('=')
     const key = decode(parts.shift())
-    const val = parts.length > 0
-      ? decode(parts.join('='))
-      : null
+    const val = parts.length > 0 ? decode(parts.join('=')) : null
 
     if (res[key] === undefined) {
       res[key] = val
@@ -64,33 +76,38 @@ function parseQuery (query: string): Dictionary<string> {
 }
 
 export function stringifyQuery (obj: Dictionary<string>): string {
-  const res = obj ? Object.keys(obj).map(key => {
-    const val = obj[key]
-
-    if (val === undefined) {
-      return ''
-    }
+  const res = obj
+    ? Object.keys(obj)
+      .map(key => {
+        const val = obj[key]
 
-    if (val === null) {
-      return encode(key)
-    }
+        if (val === undefined) {
+          return ''
+        }
 
-    if (Array.isArray(val)) {
-      const result = []
-      val.forEach(val2 => {
-        if (val2 === undefined) {
-          return
+        if (val === null) {
+          return encode(key)
         }
-        if (val2 === null) {
-          result.push(encode(key))
-        } else {
-          result.push(encode(key) + '=' + encode(val2))
+
+        if (Array.isArray(val)) {
+          const result = []
+          val.forEach(val2 => {
+            if (val2 === undefined) {
+              return
+            }
+            if (val2 === null) {
+              result.push(encode(key))
+            } else {
+              result.push(encode(key) + '=' + encode(val2))
+            }
+          })
+          return result.join('&')
         }
-      })
-      return result.join('&')
-    }
 
-    return encode(key) + '=' + encode(val)
-  }).filter(x => x.length > 0).join('&') : null
+        return encode(key) + '=' + encode(val)
+      })
+      .filter(x => x.length > 0)
+      .join('&')
+    : null
   return res ? `?${res}` : ''
 }

package/src/util/route.js

@@ -70,23 +70,23 @@ function getFullPath (
   return (path || '/') + stringify(query) + hash
 }
 
-export function isSameRoute (a: Route, b: ?Route): boolean {
+export function isSameRoute (a: Route, b: ?Route, onlyPath: ?boolean): boolean {
   if (b === START) {
     return a === b
   } else if (!b) {
     return false
   } else if (a.path && b.path) {
-    return (
-      a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') &&
+    return a.path.replace(trailingSlashRE, '') === b.path.replace(trailingSlashRE, '') && (onlyPath ||
       a.hash === b.hash &&
-      isObjectEqual(a.query, b.query)
-    )
+      isObjectEqual(a.query, b.query))
   } else if (a.name && b.name) {
     return (
       a.name === b.name &&
-      a.hash === b.hash &&
+      (onlyPath || (
+        a.hash === b.hash &&
       isObjectEqual(a.query, b.query) &&
-      isObjectEqual(a.params, b.params)
+      isObjectEqual(a.params, b.params))
+      )
     )
   } else {
     return false
@@ -96,14 +96,18 @@ export function isSameRoute (a: Route, b: ?Route): boolean {
 function isObjectEqual (a = {}, b = {}): boolean {
   // handle null value #1566
   if (!a || !b) return a === b
-  const aKeys = Object.keys(a)
-  const bKeys = Object.keys(b)
+  const aKeys = Object.keys(a).sort()
+  const bKeys = Object.keys(b).sort()
   if (aKeys.length !== bKeys.length) {
     return false
   }
-  return aKeys.every(key => {
+  return aKeys.every((key, i) => {
     const aVal = a[key]
+    const bKey = bKeys[i]
+    if (bKey !== key) return false
     const bVal = b[key]
+    // query values can be null and undefined
+    if (aVal == null || bVal == null) return aVal === bVal
     // check nested equality
     if (typeof aVal === 'object' && typeof bVal === 'object') {
       return isObjectEqual(aVal, bVal)
@@ -130,3 +134,18 @@ function queryIncludes (current: Dictionary<string>, target: Dictionary<string>)
   }
   return true
 }
+
+export function handleRouteEntered (route: Route) {
+  for (let i = 0; i < route.matched.length; i++) {
+    const record = route.matched[i]
+    for (const name in record.instances) {
+      const instance = record.instances[name]
+      const cbs = record.enteredCbs[name]
+      if (!instance || !cbs) continue
+      delete record.enteredCbs[name]
+      for (let i = 0; i < cbs.length; i++) {
+        if (!instance._isBeingDestroyed) cbs[i](instance)
+      }
+    }
+  }
+}

package/src/util/scroll.js

@@ -160,6 +160,16 @@ function scrollToPosition (shouldScroll, position) {
   }
 
   if (position) {
-    window.scrollTo(position.x, position.y)
+    // $flow-disable-line
+    if ('scrollBehavior' in document.documentElement.style) {
+      window.scrollTo({
+        left: position.x,
+        top: position.y,
+        // $flow-disable-line
+        behavior: shouldScroll.behavior
+      })
+    } else {
+      window.scrollTo(position.x, position.y)
+    }
   }
 }

package/src/util/warn.js

@@ -7,7 +7,7 @@ export function assert (condition: any, message: string) {
 }
 
 export function warn (condition: any, message: string) {
-  if (process.env.NODE_ENV !== 'production' && !condition) {
+  if (!condition) {
     typeof console !== 'undefined' && console.warn(`[kdu-router] ${message}`)
   }
 }

package/types/index.d.ts

@@ -5,13 +5,17 @@ export default KduRouter
 
 export {
   RouterMode,
+  RouteMeta,
   RawLocation,
   RedirectOption,
   RouterOptions,
   RouteConfig,
   RouteRecord,
+  RouteRecordPublic,
   Location,
   Route,
   NavigationGuard,
-  NavigationGuardNext
+  NavigationGuardNext,
+  NavigationFailureType,
+  NavigationFailure
 } from './router'

package/types/router.d.ts

@@ -21,7 +21,7 @@ export declare class KduRouter {
   constructor(options?: RouterOptions)
 
   app: Kdu
-  options: RouterOptions;
+  options: RouterOptions
   mode: RouterMode
   currentRoute: Route
 
@@ -43,10 +43,16 @@ export declare class KduRouter {
   go(n: number): void
   back(): void
   forward(): void
+  match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route
   getMatchedComponents(to?: RawLocation | Route): Component[]
   onReady(cb: Function, errorCb?: ErrorHandler): void
   onError(cb: ErrorHandler): void
   addRoutes(routes: RouteConfig[]): void
+
+  addRoute(parent: string, route: RouteConfig): void
+  addRoute(route: RouteConfig): void
+  getRoutes(): RouteRecordPublic[]
+
   resolve(
     to: RawLocation,
     current?: Route,
@@ -63,19 +69,32 @@ export declare class KduRouter {
   static install: PluginFunction<never>
   static version: string
 
-  static isNavigationFailure: (error: any, type?: NavigationFailureTypeE) => error is Error
-  static NavigationFailureType: NavigationFailureTypeE
+  static isNavigationFailure: (
+    error: any,
+    type?: number
+  ) => error is NavigationFailure
+  static NavigationFailureType: {
+    [k in keyof typeof NavigationFailureType]: NavigationFailureType
+  }
+
+  static START_LOCATION: Route
 }
 
-export enum NavigationFailureTypeE {
-  redirected = 1,
-  aborted = 2,
-  cancelled = 3,
-  duplicated = 4
+export enum NavigationFailureType {
+  redirected = 2,
+  aborted = 4,
+  cancelled = 8,
+  duplicated = 16
+}
+
+export interface NavigationFailure extends Error {
+  to: Route
+  from: Route
+  type: number
 }
 
 type Position = { x: number; y: number }
-type PositionResult = Position | { selector: string; offset?: Position } | void
+type PositionResult = Position | { selector: string; offset?: Position, behavior?: ScrollBehavior } | void
 
 export interface RouterOptions {
   routes?: RouteConfig[]
@@ -107,7 +126,7 @@ interface _RouteConfigBase {
   children?: RouteConfig[]
   redirect?: RedirectOption
   alias?: string | string[]
-  meta?: any
+  meta?: RouteMeta
   beforeEnter?: NavigationGuard
   caseSensitive?: boolean
   pathToRegexpOptions?: PathToRegexpOptions
@@ -134,6 +153,25 @@ export interface RouteRecord {
   parent?: RouteRecord
   redirect?: RedirectOption
   matchAs?: string
+  meta: RouteMeta
+  beforeEnter?: (
+    route: Route,
+    redirect: (location: RawLocation) => void,
+    next: () => void
+  ) => any
+  props:
+    | boolean
+    | Object
+    | RoutePropsFunction
+    | Dictionary<boolean | Object | RoutePropsFunction>
+}
+
+export interface RouteRecordPublic {
+  path: string
+  components: Dictionary<Component>
+  instances: Dictionary<Kdu>
+  name?: string
+  redirect?: RedirectOption
   meta: any
   beforeEnter?: (
     route: Route,
@@ -147,6 +185,7 @@ export interface RouteRecord {
     | Dictionary<boolean | Object | RoutePropsFunction>
 }
 
+
 export interface Location {
   name?: string
   path?: string
@@ -166,5 +205,7 @@ export interface Route {
   fullPath: string
   matched: RouteRecord[]
   redirectedFrom?: string
-  meta?: any
+  meta?: RouteMeta
 }
+
+export interface RouteMeta extends Record<string | number | symbol, any> {}