kdu-router 3.0.7 → 3.1.7

package/src/history/hash.js

@@ -0,0 +1,154 @@
+/* @flow */
+
+import type Router from '../index'
+import { History } from './base'
+import { cleanPath } from '../util/path'
+import { getLocation } from './html5'
+import { setupScroll, handleScroll } from '../util/scroll'
+import { pushState, replaceState, supportsPushState } from '../util/push-state'
+
+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 () {
+    const router = this.router
+    const expectScroll = router.options.scrollBehavior
+    const supportsScroll = supportsPushState && expectScroll
+
+    if (supportsScroll) {
+      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)
+          }
+        })
+      }
+    )
+  }
+
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    const { current: fromRoute } = this
+    this.transitionTo(
+      location,
+      route => {
+        pushHash(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 => {
+        replaceHash(route.fullPath)
+        handleScroll(this.router, route, fromRoute, false)
+        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!
+  let href = window.location.href
+  const index = href.indexOf('#')
+  // empty path
+  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
+}
+
+function getUrl (path) {
+  const href = window.location.href
+  const i = href.indexOf('#')
+  const base = i >= 0 ? href.slice(0, i) : href
+  return `${base}#${path}`
+}
+
+function pushHash (path) {
+  if (supportsPushState) {
+    pushState(getUrl(path))
+  } else {
+    window.location.hash = path
+  }
+}
+
+function replaceHash (path) {
+  if (supportsPushState) {
+    replaceState(getUrl(path))
+  } else {
+    window.location.replace(getUrl(path))
+  }
+}

package/src/history/html5.js

@@ -0,0 +1,80 @@
+/* @flow */
+
+import type Router from '../index'
+import { History } from './base'
+import { cleanPath } from '../util/path'
+import { START } from '../util/route'
+import { setupScroll, handleScroll } from '../util/scroll'
+import { pushState, replaceState, supportsPushState } from '../util/push-state'
+
+export class HTML5History extends History {
+  constructor (router: Router, base: ?string) {
+    super(router, base)
+
+    const expectScroll = router.options.scrollBehavior
+    const supportsScroll = supportsPushState && expectScroll
+
+    if (supportsScroll) {
+      setupScroll()
+    }
+
+    const initLocation = getLocation(this.base)
+    window.addEventListener('popstate', e => {
+      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) {
+        return
+      }
+
+      this.transitionTo(location, route => {
+        if (supportsScroll) {
+          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 = decodeURI(window.location.pathname)
+  if (base && path.indexOf(base) === 0) {
+    path = path.slice(base.length)
+  }
+  return (path || '/') + window.location.search + window.location.hash
+}

package/src/index.js

@@ -150,11 +150,25 @@ export default class KduRouter {
   }
 
   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
-    this.history.push(location, onComplete, onAbort)
+    // $flow-disable-line
+    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
+      return new Promise((resolve, reject) => {
+        this.history.push(location, resolve, reject)
+      })
+    } else {
+      this.history.push(location, onComplete, onAbort)
+    }
   }
 
   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
-    this.history.replace(location, onComplete, onAbort)
+    // $flow-disable-line
+    if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
+      return new Promise((resolve, reject) => {
+        this.history.replace(location, resolve, reject)
+      })
+    } else {
+      this.history.replace(location, onComplete, onAbort)
+    }
   }
 
   go (n: number) {

package/src/util/async.js

@@ -0,0 +1,18 @@
+/* @flow */
+
+export function runQueue (queue: Array<?NavigationGuard>, fn: Function, cb: Function) {
+  const step = index => {
+    if (index >= queue.length) {
+      cb()
+    } else {
+      if (queue[index]) {
+        fn(queue[index], () => {
+          step(index + 1)
+        })
+      } else {
+        step(index + 1)
+      }
+    }
+  }
+  step(0)
+}

package/src/util/dom.js

@@ -0,0 +1,3 @@
+/* @flow */
+
+export const inBrowser = typeof window !== 'undefined'

package/src/util/location.js

@@ -0,0 +1,69 @@
+/* @flow */
+
+import type KduRouter from '../index'
+import { parsePath, resolvePath } from './path'
+import { resolveQuery } from './query'
+import { fillParams } from './params'
+import { warn } from './warn'
+import { extend } from './misc'
+
+export function normalizeLocation (
+  raw: RawLocation,
+  current: ?Route,
+  append: ?boolean,
+  router: ?KduRouter
+): Location {
+  let next: Location = typeof raw === 'string' ? { path: raw } : raw
+  // named target
+  if (next._normalized) {
+    return next
+  } else if (next.name) {
+    next = extend({}, raw)
+    const params = next.params
+    if (params && typeof params === 'object') {
+      next.params = extend({}, params)
+    }
+    return next
+  }
+
+  // relative params
+  if (!next.path && next.params && current) {
+    next = extend({}, next)
+    next._normalized = true
+    const params: any = extend(extend({}, current.params), next.params)
+    if (current.name) {
+      next.name = current.name
+      next.params = params
+    } else if (current.matched.length) {
+      const rawPath = current.matched[current.matched.length - 1].path
+      next.path = fillParams(rawPath, params, `path ${current.path}`)
+    } else if (process.env.NODE_ENV !== 'production') {
+      warn(false, `relative params navigation requires a current route.`)
+    }
+    return next
+  }
+
+  const parsedPath = parsePath(next.path || '')
+  const basePath = (current && current.path) || '/'
+  const path = parsedPath.path
+    ? resolvePath(parsedPath.path, basePath, append || next.append)
+    : basePath
+
+  const query = resolveQuery(
+    parsedPath.query,
+    next.query,
+    router && router.options.parseQuery
+  )
+
+  let hash = next.hash || parsedPath.hash
+  if (hash && hash.charAt(0) !== '#') {
+    hash = `#${hash}`
+  }
+
+  return {
+    _normalized: true,
+    path,
+    query,
+    hash
+  }
+}

package/src/util/misc.js

@@ -0,0 +1,6 @@
+export function extend (a, b) {
+  for (const key in b) {
+    a[key] = b[key]
+  }
+  return a
+}

package/src/util/params.js

@@ -0,0 +1,37 @@
+/* @flow */
+
+import { warn } from './warn'
+import Regexp from 'path-to-regexp'
+
+// $flow-disable-line
+const regexpCompileCache: {
+  [key: string]: Function
+} = Object.create(null)
+
+export function fillParams (
+  path: string,
+  params: ?Object,
+  routeMsg: string
+): string {
+  params = params || {}
+  try {
+    const filler =
+      regexpCompileCache[path] ||
+      (regexpCompileCache[path] = Regexp.compile(path))
+
+    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
+    // and fix #3106 so that you can work with location descriptor object having params.pathMatch equal to empty string
+    if (typeof params.pathMatch === 'string') params[0] = params.pathMatch
+
+    return filler(params, { pretty: true })
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      // Fix #3072 no warn if `pathMatch` is string
+      warn(typeof params.pathMatch === 'string', `missing param for ${routeMsg}: ${e.message}`)
+    }
+    return ''
+  } finally {
+    // delete the 0 if it was added
+    delete params[0]
+  }
+}

package/src/util/path.js

@@ -0,0 +1,74 @@
+/* @flow */
+
+export function resolvePath (
+  relative: string,
+  base: string,
+  append?: boolean
+): string {
+  const firstChar = relative.charAt(0)
+  if (firstChar === '/') {
+    return relative
+  }
+
+  if (firstChar === '?' || firstChar === '#') {
+    return base + relative
+  }
+
+  const stack = base.split('/')
+
+  // remove trailing segment if:
+  // - not appending
+  // - appending to trailing slash (last segment is empty)
+  if (!append || !stack[stack.length - 1]) {
+    stack.pop()
+  }
+
+  // resolve relative path
+  const segments = relative.replace(/^\//, '').split('/')
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i]
+    if (segment === '..') {
+      stack.pop()
+    } else if (segment !== '.') {
+      stack.push(segment)
+    }
+  }
+
+  // ensure leading slash
+  if (stack[0] !== '') {
+    stack.unshift('')
+  }
+
+  return stack.join('/')
+}
+
+export function parsePath (path: string): {
+  path: string;
+  query: string;
+  hash: string;
+} {
+  let hash = ''
+  let query = ''
+
+  const hashIndex = path.indexOf('#')
+  if (hashIndex >= 0) {
+    hash = path.slice(hashIndex)
+    path = path.slice(0, hashIndex)
+  }
+
+  const queryIndex = path.indexOf('?')
+  if (queryIndex >= 0) {
+    query = path.slice(queryIndex + 1)
+    path = path.slice(0, queryIndex)
+  }
+
+  return {
+    path,
+    query,
+    hash
+  }
+}
+
+export function cleanPath (path: string): string {
+  return path.replace(/\/\//g, '/')
+}

package/src/util/push-state.js

@@ -0,0 +1,46 @@
+/* @flow */
+
+import { inBrowser } from './dom'
+import { saveScrollPosition } from './scroll'
+import { genStateKey, setStateKey, getStateKey } from './state-key'
+import { extend } from './misc'
+
+export const supportsPushState =
+  inBrowser &&
+  (function () {
+    const ua = window.navigator.userAgent
+
+    if (
+      (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
+      ua.indexOf('Mobile Safari') !== -1 &&
+      ua.indexOf('Chrome') === -1 &&
+      ua.indexOf('Windows Phone') === -1
+    ) {
+      return false
+    }
+
+    return window.history && 'pushState' in window.history
+  })()
+
+export function pushState (url?: string, replace?: boolean) {
+  saveScrollPosition()
+  // try...catch the pushState call to get around Safari
+  // DOM Exception 18 where it limits to 100 pushState calls
+  const history = window.history
+  try {
+    if (replace) {
+      // preserve existing history state as it could be overriden by the user
+      const stateCopy = extend({}, history.state)
+      stateCopy.key = getStateKey()
+      history.replaceState(stateCopy, '', url)
+    } else {
+      history.pushState({ key: setStateKey(genStateKey()) }, '', url)
+    }
+  } catch (e) {
+    window.location[replace ? 'replace' : 'assign'](url)
+  }
+}
+
+export function replaceState (url?: string) {
+  pushState(url, true)
+}

package/src/util/query.js

@@ -0,0 +1,95 @@
+/* @flow */
+
+import { warn } from './warn'
+
+const encodeReserveRE = /[!'()*]/g
+const encodeReserveReplacer = c => '%' + c.charCodeAt(0).toString(16)
+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 decode = decodeURIComponent
+
+export function resolveQuery (
+  query: ?string,
+  extraQuery: Dictionary<string> = {},
+  _parseQuery: ?Function
+): Dictionary<string> {
+  const parse = _parseQuery || parseQuery
+  let parsedQuery
+  try {
+    parsedQuery = parse(query || '')
+  } catch (e) {
+    process.env.NODE_ENV !== 'production' && warn(false, e.message)
+    parsedQuery = {}
+  }
+  for (const key in extraQuery) {
+    parsedQuery[key] = extraQuery[key]
+  }
+  return parsedQuery
+}
+
+function parseQuery (query: string): Dictionary<string> {
+  const res = {}
+
+  query = query.trim().replace(/^(\?|#|&)/, '')
+
+  if (!query) {
+    return res
+  }
+
+  query.split('&').forEach(param => {
+    const parts = param.replace(/\+/g, ' ').split('=')
+    const key = decode(parts.shift())
+    const val = parts.length > 0
+      ? decode(parts.join('='))
+      : null
+
+    if (res[key] === undefined) {
+      res[key] = val
+    } else if (Array.isArray(res[key])) {
+      res[key].push(val)
+    } else {
+      res[key] = [res[key], val]
+    }
+  })
+
+  return res
+}
+
+export function stringifyQuery (obj: Dictionary<string>): string {
+  const res = obj ? Object.keys(obj).map(key => {
+    const val = obj[key]
+
+    if (val === undefined) {
+      return ''
+    }
+
+    if (val === null) {
+      return encode(key)
+    }
+
+    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 encode(key) + '=' + encode(val)
+  }).filter(x => x.length > 0).join('&') : null
+  return res ? `?${res}` : ''
+}