kdu-router 3.4.0-beta.0 → 3.6.0

package/src/util/route.js

@@ -1,132 +1,151 @@
-/* @flow */
-
-import type KduRouter from '../index'
-import { stringifyQuery } from './query'
-
-const trailingSlashRE = /\/?$/
-
-export function createRoute (
-  record: ?RouteRecord,
-  location: Location,
-  redirectedFrom?: ?Location,
-  router?: KduRouter
-): Route {
-  const stringifyQuery = router && router.options.stringifyQuery
-
-  let query: any = location.query || {}
-  try {
-    query = clone(query)
-  } catch (e) {}
-
-  const route: Route = {
-    name: location.name || (record && record.name),
-    meta: (record && record.meta) || {},
-    path: location.path || '/',
-    hash: location.hash || '',
-    query,
-    params: location.params || {},
-    fullPath: getFullPath(location, stringifyQuery),
-    matched: record ? formatMatch(record) : []
-  }
-  if (redirectedFrom) {
-    route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
-  }
-  return Object.freeze(route)
-}
-
-function clone (value) {
-  if (Array.isArray(value)) {
-    return value.map(clone)
-  } else if (value && typeof value === 'object') {
-    const res = {}
-    for (const key in value) {
-      res[key] = clone(value[key])
-    }
-    return res
-  } else {
-    return value
-  }
-}
-
-// the starting route that represents the initial state
-export const START = createRoute(null, {
-  path: '/'
-})
-
-function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
-  const res = []
-  while (record) {
-    res.unshift(record)
-    record = record.parent
-  }
-  return res
-}
-
-function getFullPath (
-  { path, query = {}, hash = '' },
-  _stringifyQuery
-): string {
-  const stringify = _stringifyQuery || stringifyQuery
-  return (path || '/') + stringify(query) + hash
-}
-
-export function isSameRoute (a: Route, b: ?Route): 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, '') &&
-      a.hash === b.hash &&
-      isObjectEqual(a.query, b.query)
-    )
-  } else if (a.name && b.name) {
-    return (
-      a.name === b.name &&
-      a.hash === b.hash &&
-      isObjectEqual(a.query, b.query) &&
-      isObjectEqual(a.params, b.params)
-    )
-  } else {
-    return false
-  }
-}
-
-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)
-  if (aKeys.length !== bKeys.length) {
-    return false
-  }
-  return aKeys.every(key => {
-    const aVal = a[key]
-    const bVal = b[key]
-    // check nested equality
-    if (typeof aVal === 'object' && typeof bVal === 'object') {
-      return isObjectEqual(aVal, bVal)
-    }
-    return String(aVal) === String(bVal)
-  })
-}
-
-export function isIncludedRoute (current: Route, target: Route): boolean {
-  return (
-    current.path.replace(trailingSlashRE, '/').indexOf(
-      target.path.replace(trailingSlashRE, '/')
-    ) === 0 &&
-    (!target.hash || current.hash === target.hash) &&
-    queryIncludes(current.query, target.query)
-  )
-}
-
-function queryIncludes (current: Dictionary<string>, target: Dictionary<string>): boolean {
-  for (const key in target) {
-    if (!(key in current)) {
-      return false
-    }
-  }
-  return true
-}
+/* @flow */
+
+import type KduRouter from '../index'
+import { stringifyQuery } from './query'
+
+const trailingSlashRE = /\/?$/
+
+export function createRoute (
+  record: ?RouteRecord,
+  location: Location,
+  redirectedFrom?: ?Location,
+  router?: KduRouter
+): Route {
+  const stringifyQuery = router && router.options.stringifyQuery
+
+  let query: any = location.query || {}
+  try {
+    query = clone(query)
+  } catch (e) {}
+
+  const route: Route = {
+    name: location.name || (record && record.name),
+    meta: (record && record.meta) || {},
+    path: location.path || '/',
+    hash: location.hash || '',
+    query,
+    params: location.params || {},
+    fullPath: getFullPath(location, stringifyQuery),
+    matched: record ? formatMatch(record) : []
+  }
+  if (redirectedFrom) {
+    route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
+  }
+  return Object.freeze(route)
+}
+
+function clone (value) {
+  if (Array.isArray(value)) {
+    return value.map(clone)
+  } else if (value && typeof value === 'object') {
+    const res = {}
+    for (const key in value) {
+      res[key] = clone(value[key])
+    }
+    return res
+  } else {
+    return value
+  }
+}
+
+// the starting route that represents the initial state
+export const START = createRoute(null, {
+  path: '/'
+})
+
+function formatMatch (record: ?RouteRecord): Array<RouteRecord> {
+  const res = []
+  while (record) {
+    res.unshift(record)
+    record = record.parent
+  }
+  return res
+}
+
+function getFullPath (
+  { path, query = {}, hash = '' },
+  _stringifyQuery
+): string {
+  const stringify = _stringifyQuery || stringifyQuery
+  return (path || '/') + stringify(query) + hash
+}
+
+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, '') && (onlyPath ||
+      a.hash === b.hash &&
+      isObjectEqual(a.query, b.query))
+  } else if (a.name && b.name) {
+    return (
+      a.name === b.name &&
+      (onlyPath || (
+        a.hash === b.hash &&
+      isObjectEqual(a.query, b.query) &&
+      isObjectEqual(a.params, b.params))
+      )
+    )
+  } else {
+    return false
+  }
+}
+
+function isObjectEqual (a = {}, b = {}): boolean {
+  // handle null value #1566
+  if (!a || !b) return a === b
+  const aKeys = Object.keys(a).sort()
+  const bKeys = Object.keys(b).sort()
+  if (aKeys.length !== bKeys.length) {
+    return false
+  }
+  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)
+    }
+    return String(aVal) === String(bVal)
+  })
+}
+
+export function isIncludedRoute (current: Route, target: Route): boolean {
+  return (
+    current.path.replace(trailingSlashRE, '/').indexOf(
+      target.path.replace(trailingSlashRE, '/')
+    ) === 0 &&
+    (!target.hash || current.hash === target.hash) &&
+    queryIncludes(current.query, target.query)
+  )
+}
+
+function queryIncludes (current: Dictionary<string>, target: Dictionary<string>): boolean {
+  for (const key in target) {
+    if (!(key in current)) {
+      return false
+    }
+  }
+  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

@@ -1,165 +1,175 @@
-/* @flow */
-
-import type Router from '../index'
-import { assert } from './warn'
-import { getStateKey, setStateKey } from './state-key'
-import { extend } from './misc'
-
-const positionStore = Object.create(null)
-
-export function setupScroll () {
-  // Prevent browser scroll behavior on History popstate
-  if ('scrollRestoration' in window.history) {
-    window.history.scrollRestoration = 'manual'
-  }
-  // Fix for #1585 for Firefox
-  // Fix for #2195 Add optional third attribute to workaround a bug in safari https://bugs.webkit.org/show_bug.cgi?id=182678
-  // Fix for #2774 Support for apps loaded from Windows file shares not mapped to network drives: replaced location.origin with
-  // window.location.protocol + '//' + window.location.host
-  // location.host contains the port and location.hostname doesn't
-  const protocolAndPath = window.location.protocol + '//' + window.location.host
-  const absolutePath = window.location.href.replace(protocolAndPath, '')
-  // preserve existing history state as it could be overriden by the user
-  const stateCopy = extend({}, window.history.state)
-  stateCopy.key = getStateKey()
-  window.history.replaceState(stateCopy, '', absolutePath)
-  window.addEventListener('popstate', handlePopState)
-  return () => {
-    window.removeEventListener('popstate', handlePopState)
-  }
-}
-
-export function handleScroll (
-  router: Router,
-  to: Route,
-  from: Route,
-  isPop: boolean
-) {
-  if (!router.app) {
-    return
-  }
-
-  const behavior = router.options.scrollBehavior
-  if (!behavior) {
-    return
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    assert(typeof behavior === 'function', `scrollBehavior must be a function`)
-  }
-
-  // wait until re-render finishes before scrolling
-  router.app.$nextTick(() => {
-    const position = getScrollPosition()
-    const shouldScroll = behavior.call(
-      router,
-      to,
-      from,
-      isPop ? position : null
-    )
-
-    if (!shouldScroll) {
-      return
-    }
-
-    if (typeof shouldScroll.then === 'function') {
-      shouldScroll
-        .then(shouldScroll => {
-          scrollToPosition((shouldScroll: any), position)
-        })
-        .catch(err => {
-          if (process.env.NODE_ENV !== 'production') {
-            assert(false, err.toString())
-          }
-        })
-    } else {
-      scrollToPosition(shouldScroll, position)
-    }
-  })
-}
-
-export function saveScrollPosition () {
-  const key = getStateKey()
-  if (key) {
-    positionStore[key] = {
-      x: window.pageXOffset,
-      y: window.pageYOffset
-    }
-  }
-}
-
-function handlePopState (e) {
-  saveScrollPosition()
-  if (e.state && e.state.key) {
-    setStateKey(e.state.key)
-  }
-}
-
-function getScrollPosition (): ?Object {
-  const key = getStateKey()
-  if (key) {
-    return positionStore[key]
-  }
-}
-
-function getElementPosition (el: Element, offset: Object): Object {
-  const docEl: any = document.documentElement
-  const docRect = docEl.getBoundingClientRect()
-  const elRect = el.getBoundingClientRect()
-  return {
-    x: elRect.left - docRect.left - offset.x,
-    y: elRect.top - docRect.top - offset.y
-  }
-}
-
-function isValidPosition (obj: Object): boolean {
-  return isNumber(obj.x) || isNumber(obj.y)
-}
-
-function normalizePosition (obj: Object): Object {
-  return {
-    x: isNumber(obj.x) ? obj.x : window.pageXOffset,
-    y: isNumber(obj.y) ? obj.y : window.pageYOffset
-  }
-}
-
-function normalizeOffset (obj: Object): Object {
-  return {
-    x: isNumber(obj.x) ? obj.x : 0,
-    y: isNumber(obj.y) ? obj.y : 0
-  }
-}
-
-function isNumber (v: any): boolean {
-  return typeof v === 'number'
-}
-
-const hashStartsWithNumberRE = /^#\d/
-
-function scrollToPosition (shouldScroll, position) {
-  const isObject = typeof shouldScroll === 'object'
-  if (isObject && typeof shouldScroll.selector === 'string') {
-    // getElementById would still fail if the selector contains a more complicated query like #main[data-attr]
-    // but at the same time, it doesn't make much sense to select an element with an id and an extra selector
-    const el = hashStartsWithNumberRE.test(shouldScroll.selector) // $flow-disable-line
-      ? document.getElementById(shouldScroll.selector.slice(1)) // $flow-disable-line
-      : document.querySelector(shouldScroll.selector)
-
-    if (el) {
-      let offset =
-        shouldScroll.offset && typeof shouldScroll.offset === 'object'
-          ? shouldScroll.offset
-          : {}
-      offset = normalizeOffset(offset)
-      position = getElementPosition(el, offset)
-    } else if (isValidPosition(shouldScroll)) {
-      position = normalizePosition(shouldScroll)
-    }
-  } else if (isObject && isValidPosition(shouldScroll)) {
-    position = normalizePosition(shouldScroll)
-  }
-
-  if (position) {
-    window.scrollTo(position.x, position.y)
-  }
-}
+/* @flow */
+
+import type Router from '../index'
+import { assert } from './warn'
+import { getStateKey, setStateKey } from './state-key'
+import { extend } from './misc'
+
+const positionStore = Object.create(null)
+
+export function setupScroll () {
+  // Prevent browser scroll behavior on History popstate
+  if ('scrollRestoration' in window.history) {
+    window.history.scrollRestoration = 'manual'
+  }
+  // Fix for #1585 for Firefox
+  // Fix for #2195 Add optional third attribute to workaround a bug in safari https://bugs.webkit.org/show_bug.cgi?id=182678
+  // Fix for #2774 Support for apps loaded from Windows file shares not mapped to network drives: replaced location.origin with
+  // window.location.protocol + '//' + window.location.host
+  // location.host contains the port and location.hostname doesn't
+  const protocolAndPath = window.location.protocol + '//' + window.location.host
+  const absolutePath = window.location.href.replace(protocolAndPath, '')
+  // preserve existing history state as it could be overriden by the user
+  const stateCopy = extend({}, window.history.state)
+  stateCopy.key = getStateKey()
+  window.history.replaceState(stateCopy, '', absolutePath)
+  window.addEventListener('popstate', handlePopState)
+  return () => {
+    window.removeEventListener('popstate', handlePopState)
+  }
+}
+
+export function handleScroll (
+  router: Router,
+  to: Route,
+  from: Route,
+  isPop: boolean
+) {
+  if (!router.app) {
+    return
+  }
+
+  const behavior = router.options.scrollBehavior
+  if (!behavior) {
+    return
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    assert(typeof behavior === 'function', `scrollBehavior must be a function`)
+  }
+
+  // wait until re-render finishes before scrolling
+  router.app.$nextTick(() => {
+    const position = getScrollPosition()
+    const shouldScroll = behavior.call(
+      router,
+      to,
+      from,
+      isPop ? position : null
+    )
+
+    if (!shouldScroll) {
+      return
+    }
+
+    if (typeof shouldScroll.then === 'function') {
+      shouldScroll
+        .then(shouldScroll => {
+          scrollToPosition((shouldScroll: any), position)
+        })
+        .catch(err => {
+          if (process.env.NODE_ENV !== 'production') {
+            assert(false, err.toString())
+          }
+        })
+    } else {
+      scrollToPosition(shouldScroll, position)
+    }
+  })
+}
+
+export function saveScrollPosition () {
+  const key = getStateKey()
+  if (key) {
+    positionStore[key] = {
+      x: window.pageXOffset,
+      y: window.pageYOffset
+    }
+  }
+}
+
+function handlePopState (e) {
+  saveScrollPosition()
+  if (e.state && e.state.key) {
+    setStateKey(e.state.key)
+  }
+}
+
+function getScrollPosition (): ?Object {
+  const key = getStateKey()
+  if (key) {
+    return positionStore[key]
+  }
+}
+
+function getElementPosition (el: Element, offset: Object): Object {
+  const docEl: any = document.documentElement
+  const docRect = docEl.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  return {
+    x: elRect.left - docRect.left - offset.x,
+    y: elRect.top - docRect.top - offset.y
+  }
+}
+
+function isValidPosition (obj: Object): boolean {
+  return isNumber(obj.x) || isNumber(obj.y)
+}
+
+function normalizePosition (obj: Object): Object {
+  return {
+    x: isNumber(obj.x) ? obj.x : window.pageXOffset,
+    y: isNumber(obj.y) ? obj.y : window.pageYOffset
+  }
+}
+
+function normalizeOffset (obj: Object): Object {
+  return {
+    x: isNumber(obj.x) ? obj.x : 0,
+    y: isNumber(obj.y) ? obj.y : 0
+  }
+}
+
+function isNumber (v: any): boolean {
+  return typeof v === 'number'
+}
+
+const hashStartsWithNumberRE = /^#\d/
+
+function scrollToPosition (shouldScroll, position) {
+  const isObject = typeof shouldScroll === 'object'
+  if (isObject && typeof shouldScroll.selector === 'string') {
+    // getElementById would still fail if the selector contains a more complicated query like #main[data-attr]
+    // but at the same time, it doesn't make much sense to select an element with an id and an extra selector
+    const el = hashStartsWithNumberRE.test(shouldScroll.selector) // $flow-disable-line
+      ? document.getElementById(shouldScroll.selector.slice(1)) // $flow-disable-line
+      : document.querySelector(shouldScroll.selector)
+
+    if (el) {
+      let offset =
+        shouldScroll.offset && typeof shouldScroll.offset === 'object'
+          ? shouldScroll.offset
+          : {}
+      offset = normalizeOffset(offset)
+      position = getElementPosition(el, offset)
+    } else if (isValidPosition(shouldScroll)) {
+      position = normalizePosition(shouldScroll)
+    }
+  } else if (isObject && isValidPosition(shouldScroll)) {
+    position = normalizePosition(shouldScroll)
+  }
+
+  if (position) {
+    // $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/state-key.js

@@ -1,22 +1,22 @@
-/* @flow */
-import { inBrowser } from './dom'
-
-// use User Timing api (if present) for more accurate key precision
-const Time =
-  inBrowser && window.performance && window.performance.now
-    ? window.performance
-    : Date
-
-export function genStateKey (): string {
-  return Time.now().toFixed(3)
-}
-
-let _key: string = genStateKey()
-
-export function getStateKey () {
-  return _key
-}
-
-export function setStateKey (key: string) {
-  return (_key = key)
-}
+/* @flow */
+import { inBrowser } from './dom'
+
+// use User Timing api (if present) for more accurate key precision
+const Time =
+  inBrowser && window.performance && window.performance.now
+    ? window.performance
+    : Date
+
+export function genStateKey (): string {
+  return Time.now().toFixed(3)
+}
+
+let _key: string = genStateKey()
+
+export function getStateKey () {
+  return _key
+}
+
+export function setStateKey (key: string) {
+  return (_key = key)
+}