kdu-router 3.1.3 → 3.4.0-beta.0

package/src/util/scroll.js

@@ -0,0 +1,165 @@
+/* @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)
+  }
+}

package/src/util/state-key.js

@@ -0,0 +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)
+}

package/src/util/warn.js

@@ -0,0 +1,14 @@
+/* @flow */
+
+export function assert (condition: any, message: string) {
+  if (!condition) {
+    throw new Error(`[kdu-router] ${message}`)
+  }
+}
+
+export function warn (condition: any, message: string) {
+  if (process.env.NODE_ENV !== 'production' && !condition) {
+    typeof console !== 'undefined' && console.warn(`[kdu-router] ${message}`)
+  }
+}
+

package/types/index.d.ts

@@ -1,16 +1,17 @@
-import './kdu'
-import { KduRouter } from './router'
-
-export default KduRouter
-
-export {
-  RouterMode,
-  RawLocation,
-  RedirectOption,
-  RouterOptions,
-  RouteConfig,
-  RouteRecord,
-  Location,
-  Route,
-  NavigationGuard
-} from './router'
+import './kdu'
+import { KduRouter } from './router'
+
+export default KduRouter
+
+export {
+  RouterMode,
+  RawLocation,
+  RedirectOption,
+  RouterOptions,
+  RouteConfig,
+  RouteRecord,
+  Location,
+  Route,
+  NavigationGuard,
+  NavigationGuardNext
+} from './router'

package/types/kdu.d.ts

@@ -1,22 +1,22 @@
-/**
- * Augment the typings of Kdu.js
- */
-
-import Kdu from 'kdu'
-import KduRouter, { Route, RawLocation, NavigationGuard } from './index'
-
-declare module 'kdu/types/kdu' {
-  interface Kdu {
-    $router: KduRouter
-    $route: Route
-  }
-}
-
-declare module 'kdu/types/options' {
-  interface ComponentOptions<V extends Kdu> {
-    router?: KduRouter
-    beforeRouteEnter?: NavigationGuard<V>
-    beforeRouteLeave?: NavigationGuard<V>
-    beforeRouteUpdate?: NavigationGuard<V>
-  }
-}
+/**
+ * Augment the typings of Kdu.js
+ */
+
+import Kdu from 'kdu'
+import KduRouter, { Route, RawLocation, NavigationGuard } from './index'
+
+declare module 'kdu/types/kdu' {
+  interface Kdu {
+    $router: KduRouter
+    $route: Route
+  }
+}
+
+declare module 'kdu/types/options' {
+  interface ComponentOptions<V extends Kdu> {
+    router?: KduRouter
+    beforeRouteEnter?: NavigationGuard<V>
+    beforeRouteLeave?: NavigationGuard<V>
+    beforeRouteUpdate?: NavigationGuard<V>
+  }
+}

package/types/router.d.ts

@@ -1,145 +1,170 @@
-import Kdu, { ComponentOptions, PluginFunction, AsyncComponent } from 'kdu'
-
-type Component = ComponentOptions<Kdu> | typeof Kdu | AsyncComponent
-type Dictionary < T > = { [key: string]: T }
-type ErrorHandler = (err: Error) => void
-
-export type RouterMode = 'hash' | 'history' | 'abstract'
-export type RawLocation = string | Location
-export type RedirectOption = RawLocation | ((to: Route) => RawLocation)
-export type NavigationGuard < V extends Kdu = Kdu > = (
-    to: Route,
-    from: Route,
-    next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
-) => any
-
-export declare class KduRouter {
-  constructor(options?: RouterOptions)
-
-  app: Kdu
-  mode: RouterMode
-  currentRoute: Route
-
-  beforeEach(guard: NavigationGuard): Function
-  beforeResolve(guard: NavigationGuard): Function
-  afterEach(hook: (to: Route, from: Route) => any): Function
-  push(location: RawLocation): Promise<Route>
-  replace(location: RawLocation): Promise<Route>
-  push(
-      location: RawLocation,
-      onComplete?: Function,
-      onAbort?: ErrorHandler
-  ): void
-  replace(
-      location: RawLocation,
-      onComplete?: Function,
-      onAbort?: ErrorHandler
-  ): void
-  go(n: number): void
-  back(): void
-  forward(): void
-  getMatchedComponents(to?: RawLocation | Route): Component[]
-  onReady(cb: Function, errorCb?: ErrorHandler): void
-  onError(cb: ErrorHandler): void
-  addRoutes(routes: RouteConfig[]): void
-  resolve(
-      to: RawLocation,
-      current?: Route,
-      append?: boolean
-  ): {
-    location: Location
-    route: Route
-    href: string
-    // backwards compat
-    normalizedTo: Location
-    resolved: Route
-  }
-
-  static install: PluginFunction<never>
-}
-
-type Position = { x: number; y: number }
-type PositionResult = Position | { selector: string; offset?: Position } | void
-
-export interface RouterOptions {
-  routes?: RouteConfig[]
-  mode?: RouterMode
-  fallback?: boolean
-  base?: string
-  linkActiveClass?: string
-  linkExactActiveClass?: string
-  parseQuery?: (query: string) => Object
-  stringifyQuery?: (query: Object) => string
-  scrollBehavior?: (
-      to: Route,
-      from: Route,
-      savedPosition: Position | void
-  ) => PositionResult | Promise<PositionResult>
-}
-
-type RoutePropsFunction = (route: Route) => Object
-
-export interface PathToRegexpOptions {
-  sensitive?: boolean
-  strict?: boolean
-  end?: boolean
-}
-
-export interface RouteConfig {
-  path: string
-  name?: string
-  component?: Component
-  components?: Dictionary<Component>
-  redirect?: RedirectOption
-  alias?: string | string[]
-  children?: RouteConfig[]
-  meta?: any
-  beforeEnter?: NavigationGuard
-  props?: boolean | Object | RoutePropsFunction
-  caseSensitive?: boolean
-  pathToRegexpOptions?: PathToRegexpOptions
-}
-
-export interface RouteRecord {
-  path: string
-  regex: RegExp
-  components: Dictionary<Component>
-  instances: Dictionary<Kdu>
-  name?: string
-  parent?: RouteRecord
-  redirect?: RedirectOption
-  matchAs?: string
-  meta: any
-  beforeEnter?: (
-      route: Route,
-      redirect: (location: RawLocation) => void,
-      next: () => void
-  ) => any
-  props:
-      | boolean
-      | Object
-      | RoutePropsFunction
-      | Dictionary<boolean | Object | RoutePropsFunction>
-}
-
-export interface Location {
-  name?: string
-  path?: string
-  hash?: string
-  query?: Dictionary<string | (string | null)[] | null | undefined>
-  params?: Dictionary<string>
-  append?: boolean
-  replace?: boolean
-}
-
-export interface Route {
-  path: string
-  name?: string
-  hash: string
-  query: Dictionary<string | (string | null)[]>
-  params: Dictionary<string>
-  fullPath: string
-  matched: RouteRecord[]
-  redirectedFrom?: string
-  meta?: any
-}
+import Kdu, { ComponentOptions, PluginFunction, AsyncComponent } from 'kdu'
+
+type Component = ComponentOptions<Kdu> | typeof Kdu | AsyncComponent
+type Dictionary<T> = { [key: string]: T }
+type ErrorHandler = (err: Error) => void
+
+export type RouterMode = 'hash' | 'history' | 'abstract'
+export type RawLocation = string | Location
+export type RedirectOption = RawLocation | ((to: Route) => RawLocation)
+export type NavigationGuardNext<V extends Kdu = Kdu> = (
+  to?: RawLocation | false | ((vm: V) => any) | void
+) => void
+
+export type NavigationGuard<V extends Kdu = Kdu> = (
+  to: Route,
+  from: Route,
+  next: NavigationGuardNext<V>
+) => any
+
+export declare class KduRouter {
+  constructor(options?: RouterOptions)
+
+  app: Kdu
+  options: RouterOptions;
+  mode: RouterMode
+  currentRoute: Route
+
+  beforeEach(guard: NavigationGuard): Function
+  beforeResolve(guard: NavigationGuard): Function
+  afterEach(hook: (to: Route, from: Route) => any): Function
+  push(location: RawLocation): Promise<Route>
+  replace(location: RawLocation): Promise<Route>
+  push(
+    location: RawLocation,
+    onComplete?: Function,
+    onAbort?: ErrorHandler
+  ): void
+  replace(
+    location: RawLocation,
+    onComplete?: Function,
+    onAbort?: ErrorHandler
+  ): void
+  go(n: number): void
+  back(): void
+  forward(): void
+  getMatchedComponents(to?: RawLocation | Route): Component[]
+  onReady(cb: Function, errorCb?: ErrorHandler): void
+  onError(cb: ErrorHandler): void
+  addRoutes(routes: RouteConfig[]): void
+  resolve(
+    to: RawLocation,
+    current?: Route,
+    append?: boolean
+  ): {
+    location: Location
+    route: Route
+    href: string
+    // backwards compat
+    normalizedTo: Location
+    resolved: Route
+  }
+
+  static install: PluginFunction<never>
+  static version: string
+
+  static isNavigationFailure: (error: any, type?: NavigationFailureTypeE) => error is Error
+  static NavigationFailureType: NavigationFailureTypeE
+}
+
+export enum NavigationFailureTypeE {
+  redirected = 1,
+  aborted = 2,
+  cancelled = 3,
+  duplicated = 4
+}
+
+type Position = { x: number; y: number }
+type PositionResult = Position | { selector: string; offset?: Position } | void
+
+export interface RouterOptions {
+  routes?: RouteConfig[]
+  mode?: RouterMode
+  fallback?: boolean
+  base?: string
+  linkActiveClass?: string
+  linkExactActiveClass?: string
+  parseQuery?: (query: string) => Object
+  stringifyQuery?: (query: Object) => string
+  scrollBehavior?: (
+    to: Route,
+    from: Route,
+    savedPosition: Position | void
+  ) => PositionResult | Promise<PositionResult> | undefined | null
+}
+
+type RoutePropsFunction = (route: Route) => Object
+
+export interface PathToRegexpOptions {
+  sensitive?: boolean
+  strict?: boolean
+  end?: boolean
+}
+
+interface _RouteConfigBase {
+  path: string
+  name?: string
+  children?: RouteConfig[]
+  redirect?: RedirectOption
+  alias?: string | string[]
+  meta?: any
+  beforeEnter?: NavigationGuard
+  caseSensitive?: boolean
+  pathToRegexpOptions?: PathToRegexpOptions
+}
+
+interface RouteConfigSingleView extends _RouteConfigBase {
+  component?: Component
+  props?: boolean | Object | RoutePropsFunction
+}
+
+interface RouteConfigMultipleViews extends _RouteConfigBase {
+  components?: Dictionary<Component>
+  props?: Dictionary<boolean | Object | RoutePropsFunction>
+}
+
+export type RouteConfig = RouteConfigSingleView | RouteConfigMultipleViews
+
+export interface RouteRecord {
+  path: string
+  regex: RegExp
+  components: Dictionary<Component>
+  instances: Dictionary<Kdu>
+  name?: string
+  parent?: RouteRecord
+  redirect?: RedirectOption
+  matchAs?: string
+  meta: any
+  beforeEnter?: (
+    route: Route,
+    redirect: (location: RawLocation) => void,
+    next: () => void
+  ) => any
+  props:
+    | boolean
+    | Object
+    | RoutePropsFunction
+    | Dictionary<boolean | Object | RoutePropsFunction>
+}
+
+export interface Location {
+  name?: string
+  path?: string
+  hash?: string
+  query?: Dictionary<string | (string | null)[] | null | undefined>
+  params?: Dictionary<string>
+  append?: boolean
+  replace?: boolean
+}
+
+export interface Route {
+  path: string
+  name?: string | null
+  hash: string
+  query: Dictionary<string | (string | null)[]>
+  params: Dictionary<string>
+  fullPath: string
+  matched: RouteRecord[]
+  redirectedFrom?: string
+  meta?: any
+}