kdu-router 2.7.0

package/src/create-route-map.js

@@ -0,0 +1,165 @@
+/* @flow */
+
+import Regexp from 'path-to-regexp'
+import { cleanPath } from './util/path'
+import { assert, warn } from './util/warn'
+
+export function createRouteMap (
+  routes: Array<RouteConfig>,
+  oldPathList?: Array<string>,
+  oldPathMap?: Dictionary<RouteRecord>,
+  oldNameMap?: Dictionary<RouteRecord>
+): {
+  pathList: Array<string>;
+  pathMap: Dictionary<RouteRecord>;
+  nameMap: Dictionary<RouteRecord>;
+} {
+  // the path list is used to control path matching priority
+  const pathList: Array<string> = oldPathList || []
+  const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null)
+  const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null)
+
+  routes.forEach(route => {
+    addRouteRecord(pathList, pathMap, nameMap, route)
+  })
+
+  // ensure wildcard routes are always at the end
+  for (let i = 0, l = pathList.length; i < l; i++) {
+    if (pathList[i] === '*') {
+      pathList.push(pathList.splice(i, 1)[0])
+      l--
+      i--
+    }
+  }
+
+  return {
+    pathList,
+    pathMap,
+    nameMap
+  }
+}
+
+function addRouteRecord (
+  pathList: Array<string>,
+  pathMap: Dictionary<RouteRecord>,
+  nameMap: Dictionary<RouteRecord>,
+  route: RouteConfig,
+  parent?: RouteRecord,
+  matchAs?: string
+) {
+  const { path, name } = route
+  if (process.env.NODE_ENV !== 'production') {
+    assert(path != null, `"path" is required in a route configuration.`)
+    assert(
+      typeof route.component !== 'string',
+      `route config "component" for path: ${String(path || name)} cannot be a ` +
+      `string id. Use an actual component instead.`
+    )
+  }
+
+  const normalizedPath = normalizePath(path, parent)
+  const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {}
+
+  if (typeof route.caseSensitive === 'boolean') {
+    pathToRegexpOptions.sensitive = route.caseSensitive
+  }
+
+  const record: RouteRecord = {
+    path: normalizedPath,
+    regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
+    components: route.components || { default: route.component },
+    instances: {},
+    name,
+    parent,
+    matchAs,
+    redirect: route.redirect,
+    beforeEnter: route.beforeEnter,
+    meta: route.meta || {},
+    props: route.props == null
+      ? {}
+      : route.components
+        ? route.props
+        : { default: route.props }
+  }
+
+  if (route.children) {
+    // Warn if route is named, does not redirect and has a default child route.
+    // If users navigate to this route by name, the default child will
+    // not be rendered (GH Issue #629)
+    if (process.env.NODE_ENV !== 'production') {
+      if (route.name && !route.redirect && route.children.some(child => /^\/?$/.test(child.path))) {
+        warn(
+          false,
+          `Named Route '${route.name}' has a default child route. ` +
+          `When navigating to this named route (:to="{name: '${route.name}'"), ` +
+          `the default child route will not be rendered. Remove the name from ` +
+          `this route and use the name of the default child route for named ` +
+          `links instead.`
+        )
+      }
+    }
+    route.children.forEach(child => {
+      const childMatchAs = matchAs
+        ? cleanPath(`${matchAs}/${child.path}`)
+        : undefined
+      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
+    })
+  }
+
+  if (route.alias !== undefined) {
+    const aliases = Array.isArray(route.alias)
+      ? route.alias
+      : [route.alias]
+
+    aliases.forEach(alias => {
+      const aliasRoute = {
+        path: alias,
+        children: route.children
+      }
+      addRouteRecord(
+        pathList,
+        pathMap,
+        nameMap,
+        aliasRoute,
+        parent,
+        record.path || '/' // matchAs
+      )
+    })
+  }
+
+  if (!pathMap[record.path]) {
+    pathList.push(record.path)
+    pathMap[record.path] = record
+  }
+
+  if (name) {
+    if (!nameMap[name]) {
+      nameMap[name] = record
+    } else if (process.env.NODE_ENV !== 'production' && !matchAs) {
+      warn(
+        false,
+        `Duplicate named routes definition: ` +
+        `{ name: "${name}", path: "${record.path}" }`
+      )
+    }
+  }
+}
+
+function compileRouteRegex (path: string, pathToRegexpOptions: PathToRegexpOptions): RouteRegExp {
+  const regex = Regexp(path, [], pathToRegexpOptions)
+  if (process.env.NODE_ENV !== 'production') {
+    const keys: any = {}
+    regex.keys.forEach(key => {
+      warn(!keys[key.name], `Duplicate param keys in route with path: "${path}"`)
+      keys[key.name] = true
+    })
+  }
+  return regex
+}
+
+function normalizePath (path: string, parent?: RouteRecord): string {
+  path = path.replace(/\/$/, '')
+  if (path[0] === '/') return path
+  if (parent == null) return path
+  return cleanPath(`${parent.path}/${path}`)
+}

package/src/history/abstract.js

@@ -0,0 +1,51 @@
+/* @flow */
+
+import type Router from '../index'
+import { History } from './base'
+
+export class AbstractHistory extends History {
+  index: number;
+  stack: Array<Route>;
+
+  constructor (router: Router, base: ?string) {
+    super(router, base)
+    this.stack = []
+    this.index = -1
+  }
+
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    this.transitionTo(location, route => {
+      this.stack = this.stack.slice(0, this.index + 1).concat(route)
+      this.index++
+      onComplete && onComplete(route)
+    }, onAbort)
+  }
+
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    this.transitionTo(location, route => {
+      this.stack = this.stack.slice(0, this.index).concat(route)
+      onComplete && onComplete(route)
+    }, onAbort)
+  }
+
+  go (n: number) {
+    const targetIndex = this.index + n
+    if (targetIndex < 0 || targetIndex >= this.stack.length) {
+      return
+    }
+    const route = this.stack[targetIndex]
+    this.confirmTransition(route, () => {
+      this.index = targetIndex
+      this.updateRoute(route)
+    })
+  }
+
+  getCurrentLocation () {
+    const current = this.stack[this.stack.length - 1]
+    return current ? current.fullPath : '/'
+  }
+
+  ensureURL () {
+    // noop
+  }
+}

package/src/history/base.js

@@ -0,0 +1,328 @@
+/* @flow */
+
+import { _Kdu } from '../install'
+import type Router from '../index'
+import { inBrowser } from '../util/dom'
+import { runQueue } from '../util/async'
+import { warn, isError } from '../util/warn'
+import { START, isSameRoute } from '../util/route'
+import {
+  flatten,
+  flatMapComponents,
+  resolveAsyncComponents
+} from '../util/resolve-components'
+
+export class History {
+  router: Router;
+  base: string;
+  current: Route;
+  pending: ?Route;
+  cb: (r: Route) => void;
+  ready: boolean;
+  readyCbs: Array<Function>;
+  readyErrorCbs: Array<Function>;
+  errorCbs: Array<Function>;
+
+  // implemented by sub-classes
+  +go: (n: number) => void;
+  +push: (loc: RawLocation) => void;
+  +replace: (loc: RawLocation) => void;
+  +ensureURL: (push?: boolean) => void;
+  +getCurrentLocation: () => string;
+
+  constructor (router: Router, base: ?string) {
+    this.router = router
+    this.base = normalizeBase(base)
+    // start with a route object that stands for "nowhere"
+    this.current = START
+    this.pending = null
+    this.ready = false
+    this.readyCbs = []
+    this.readyErrorCbs = []
+    this.errorCbs = []
+  }
+
+  listen (cb: Function) {
+    this.cb = cb
+  }
+
+  onReady (cb: Function, errorCb: ?Function) {
+    if (this.ready) {
+      cb()
+    } else {
+      this.readyCbs.push(cb)
+      if (errorCb) {
+        this.readyErrorCbs.push(errorCb)
+      }
+    }
+  }
+
+  onError (errorCb: Function) {
+    this.errorCbs.push(errorCb)
+  }
+
+  transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    const route = this.router.match(location, this.current)
+    this.confirmTransition(route, () => {
+      this.updateRoute(route)
+      onComplete && onComplete(route)
+      this.ensureURL()
+
+      // fire ready cbs once
+      if (!this.ready) {
+        this.ready = true
+        this.readyCbs.forEach(cb => { cb(route) })
+      }
+    }, err => {
+      if (onAbort) {
+        onAbort(err)
+      }
+      if (err && !this.ready) {
+        this.ready = true
+        this.readyErrorCbs.forEach(cb => { cb(err) })
+      }
+    })
+  }
+
+  confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
+    const current = this.current
+    const abort = err => {
+      if (isError(err)) {
+        if (this.errorCbs.length) {
+          this.errorCbs.forEach(cb => { cb(err) })
+        } else {
+          warn(false, 'uncaught error during route navigation:')
+          console.error(err)
+        }
+      }
+      onAbort && onAbort(err)
+    }
+    if (
+      isSameRoute(route, current) &&
+      // in the case the route map has been dynamically appended to
+      route.matched.length === current.matched.length
+    ) {
+      this.ensureURL()
+      return abort()
+    }
+
+    const {
+      updated,
+      deactivated,
+      activated
+    } = resolveQueue(this.current.matched, route.matched)
+
+    const queue: Array<?NavigationGuard> = [].concat(
+      // in-component leave guards
+      extractLeaveGuards(deactivated),
+      // global before hooks
+      this.router.beforeHooks,
+      // in-component update hooks
+      extractUpdateHooks(updated),
+      // in-config enter guards
+      activated.map(m => m.beforeEnter),
+      // async components
+      resolveAsyncComponents(activated)
+    )
+
+    this.pending = route
+    const iterator = (hook: NavigationGuard, next) => {
+      if (this.pending !== route) {
+        return abort()
+      }
+      try {
+        hook(route, current, (to: any) => {
+          if (to === false || isError(to)) {
+            // next(false) -> abort navigation, ensure current URL
+            this.ensureURL(true)
+            abort(to)
+          } else if (
+            typeof to === 'string' ||
+            (typeof to === 'object' && (
+              typeof to.path === 'string' ||
+              typeof to.name === 'string'
+            ))
+          ) {
+            // next('/') or next({ path: '/' }) -> redirect
+            abort()
+            if (typeof to === 'object' && to.replace) {
+              this.replace(to)
+            } else {
+              this.push(to)
+            }
+          } else {
+            // confirm transition and pass on the value
+            next(to)
+          }
+        })
+      } catch (e) {
+        abort(e)
+      }
+    }
+
+    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 queue = enterGuards.concat(this.router.resolveHooks)
+      runQueue(queue, iterator, () => {
+        if (this.pending !== route) {
+          return abort()
+        }
+        this.pending = null
+        onComplete(route)
+        if (this.router.app) {
+          this.router.app.$nextTick(() => {
+            postEnterCbs.forEach(cb => { cb() })
+          })
+        }
+      })
+    })
+  }
+
+  updateRoute (route: Route) {
+    const prev = this.current
+    this.current = route
+    this.cb && this.cb(route)
+    this.router.afterHooks.forEach(hook => {
+      hook && hook(route, prev)
+    })
+  }
+}
+
+function normalizeBase (base: ?string): string {
+  if (!base) {
+    if (inBrowser) {
+      // respect <base> tag
+      const baseEl = document.querySelector('base')
+      base = (baseEl && baseEl.getAttribute('href')) || '/'
+      // strip full URL origin
+      base = base.replace(/^https?:\/\/[^\/]+/, '')
+    } else {
+      base = '/'
+    }
+  }
+  // make sure there's the starting slash
+  if (base.charAt(0) !== '/') {
+    base = '/' + base
+  }
+  // remove trailing slash
+  return base.replace(/\/$/, '')
+}
+
+function resolveQueue (
+  current: Array<RouteRecord>,
+  next: Array<RouteRecord>
+): {
+  updated: Array<RouteRecord>,
+  activated: Array<RouteRecord>,
+  deactivated: Array<RouteRecord>
+} {
+  let i
+  const max = Math.max(current.length, next.length)
+  for (i = 0; i < max; i++) {
+    if (current[i] !== next[i]) {
+      break
+    }
+  }
+  return {
+    updated: next.slice(0, i),
+    activated: next.slice(i),
+    deactivated: current.slice(i)
+  }
+}
+
+function extractGuards (
+  records: Array<RouteRecord>,
+  name: string,
+  bind: Function,
+  reverse?: boolean
+): Array<?Function> {
+  const guards = flatMapComponents(records, (def, instance, match, key) => {
+    const guard = extractGuard(def, name)
+    if (guard) {
+      return Array.isArray(guard)
+        ? guard.map(guard => bind(guard, instance, match, key))
+        : bind(guard, instance, match, key)
+    }
+  })
+  return flatten(reverse ? guards.reverse() : guards)
+}
+
+function extractGuard (
+  def: Object | Function,
+  key: string
+): NavigationGuard | Array<NavigationGuard> {
+  if (typeof def !== 'function') {
+    // extend now so that global mixins are applied.
+    def = _Kdu.extend(def)
+  }
+  return def.options[key]
+}
+
+function extractLeaveGuards (deactivated: Array<RouteRecord>): Array<?Function> {
+  return extractGuards(deactivated, 'beforeRouteLeave', bindGuard, true)
+}
+
+function extractUpdateHooks (updated: Array<RouteRecord>): Array<?Function> {
+  return extractGuards(updated, 'beforeRouteUpdate', bindGuard)
+}
+
+function bindGuard (guard: NavigationGuard, instance: ?_Kdu): ?NavigationGuard {
+  if (instance) {
+    return function boundRouteGuard () {
+      return guard.apply(instance, arguments)
+    }
+  }
+}
+
+function extractEnterGuards (
+  activated: Array<RouteRecord>,
+  cbs: Array<Function>,
+  isValid: () => boolean
+): Array<?Function> {
+  return extractGuards(activated, 'beforeRouteEnter', (guard, _, match, key) => {
+    return bindEnterGuard(guard, match, key, cbs, isValid)
+  })
+}
+
+function bindEnterGuard (
+  guard: NavigationGuard,
+  match: RouteRecord,
+  key: string,
+  cbs: Array<Function>,
+  isValid: () => boolean
+): NavigationGuard {
+  return function routeEnterGuard (to, from, next) {
+    return guard(to, from, cb => {
+      next(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)
+        })
+      }
+    })
+  }
+}
+
+function poll (
+  cb: any, // somehow flow cannot infer this is a function
+  instances: Object,
+  key: string,
+  isValid: () => boolean
+) {
+  if (instances[key]) {
+    cb(instances[key])
+  } else if (isValid()) {
+    setTimeout(() => {
+      poll(cb, instances, key, isValid)
+    }, 16)
+  }
+}

package/src/history/hash.js

@@ -0,0 +1,97 @@
+/* @flow */
+
+import type Router from '../index'
+import { History } from './base'
+import { cleanPath } from '../util/path'
+import { getLocation } from './html5'
+
+export class HashHistory extends History {
+  constructor (router: Router, base: ?string, fallback: boolean) {
+    super(router, base)
+    // check history fallback deeplinking
+    if (fallback && checkFallback(this.base)) {
+      return
+    }
+    ensureSlash()
+  }
+
+  // this is delayed until the app mounts
+  // to avoid the hashchange listener being fired too early
+  setupListeners () {
+    window.addEventListener('hashchange', () => {
+      if (!ensureSlash()) {
+        return
+      }
+      this.transitionTo(getHash(), route => {
+        replaceHash(route.fullPath)
+      })
+    })
+  }
+
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    this.transitionTo(location, route => {
+      pushHash(route.fullPath)
+      onComplete && onComplete(route)
+    }, onAbort)
+  }
+
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    this.transitionTo(location, route => {
+      replaceHash(route.fullPath)
+      onComplete && onComplete(route)
+    }, onAbort)
+  }
+
+  go (n: number) {
+    window.history.go(n)
+  }
+
+  ensureURL (push?: boolean) {
+    const current = this.current.fullPath
+    if (getHash() !== current) {
+      push ? pushHash(current) : replaceHash(current)
+    }
+  }
+
+  getCurrentLocation () {
+    return getHash()
+  }
+}
+
+function checkFallback (base) {
+  const location = getLocation(base)
+  if (!/^\/#/.test(location)) {
+    window.location.replace(
+      cleanPath(base + '/#' + location)
+    )
+    return true
+  }
+}
+
+function ensureSlash (): boolean {
+  const path = getHash()
+  if (path.charAt(0) === '/') {
+    return true
+  }
+  replaceHash('/' + path)
+  return false
+}
+
+export function getHash (): string {
+  // We can't use window.location.hash here because it's not
+  // consistent across browsers - Firefox will pre-decode it!
+  const href = window.location.href
+  const index = href.indexOf('#')
+  return index === -1 ? '' : href.slice(index + 1)
+}
+
+function pushHash (path) {
+  window.location.hash = path
+}
+
+function replaceHash (path) {
+  const href = window.location.href
+  const i = href.indexOf('#')
+  const base = i >= 0 ? href.slice(0, i) : href
+  window.location.replace(`${base}#${path}`)
+}

package/src/history/html5.js

@@ -0,0 +1,69 @@
+/* @flow */
+
+import type Router from '../index'
+import { History } from './base'
+import { cleanPath } from '../util/path'
+import { setupScroll, handleScroll } from '../util/scroll'
+import { pushState, replaceState } from '../util/push-state'
+
+export class HTML5History extends History {
+  constructor (router: Router, base: ?string) {
+    super(router, base)
+
+    const expectScroll = router.options.scrollBehavior
+
+    if (expectScroll) {
+      setupScroll()
+    }
+
+    window.addEventListener('popstate', e => {
+      const current = this.current
+      this.transitionTo(getLocation(this.base), route => {
+        if (expectScroll) {
+          handleScroll(router, route, current, true)
+        }
+      })
+    })
+  }
+
+  go (n: number) {
+    window.history.go(n)
+  }
+
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    const { current: fromRoute } = this
+    this.transitionTo(location, route => {
+      pushState(cleanPath(this.base + route.fullPath))
+      handleScroll(this.router, route, fromRoute, false)
+      onComplete && onComplete(route)
+    }, onAbort)
+  }
+
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    const { current: fromRoute } = this
+    this.transitionTo(location, route => {
+      replaceState(cleanPath(this.base + route.fullPath))
+      handleScroll(this.router, route, fromRoute, false)
+      onComplete && onComplete(route)
+    }, onAbort)
+  }
+
+  ensureURL (push?: boolean) {
+    if (getLocation(this.base) !== this.current.fullPath) {
+      const current = cleanPath(this.base + this.current.fullPath)
+      push ? pushState(current) : replaceState(current)
+    }
+  }
+
+  getCurrentLocation (): string {
+    return getLocation(this.base)
+  }
+}
+
+export function getLocation (base: string): string {
+  let path = window.location.pathname
+  if (base && path.indexOf(base) === 0) {
+    path = path.slice(base.length)
+  }
+  return (path || '/') + window.location.search + window.location.hash
+}