kdu-router 3.4.0-beta.0 → 3.6.0

package/src/components/view.js

@@ -1,149 +1,155 @@
-import { warn } from '../util/warn'
-import { extend } from '../util/misc'
-
-export default {
-  name: 'RouterView',
-  functional: true,
-  props: {
-    name: {
-      type: String,
-      default: 'default'
-    }
-  },
-  render (_, { props, children, parent, data }) {
-    // used by devtools to display a router-view badge
-    data.routerView = true
-
-    // directly use parent context's createElement() function
-    // so that components rendered by router-view can resolve named slots
-    const h = parent.$createElement
-    const name = props.name
-    const route = parent.$route
-    const cache = parent._routerViewCache || (parent._routerViewCache = {})
-
-    // determine current view depth, also check to see if the tree
-    // has been toggled inactive but kept-alive.
-    let depth = 0
-    let inactive = false
-    while (parent && parent._routerRoot !== parent) {
-      const knodeData = parent.$knode ? parent.$knode.data : {}
-      if (knodeData.routerView) {
-        depth++
-      }
-      if (knodeData.keepAlive && parent._directInactive && parent._inactive) {
-        inactive = true
-      }
-      parent = parent.$parent
-    }
-    data.routerViewDepth = depth
-
-    // render previous view if the tree is inactive and kept-alive
-    if (inactive) {
-      const cachedData = cache[name]
-      const cachedComponent = cachedData && cachedData.component
-      if (cachedComponent) {
-        // #2301
-        // pass props
-        if (cachedData.configProps) {
-          fillPropsinData(cachedComponent, data, cachedData.route, cachedData.configProps)
-        }
-        return h(cachedComponent, data, children)
-      } else {
-        // render previous empty view
-        return h()
-      }
-    }
-
-    const matched = route.matched[depth]
-    const component = matched && matched.components[name]
-
-    // render empty node if no matched route or no config component
-    if (!matched || !component) {
-      cache[name] = null
-      return h()
-    }
-
-    // cache component
-    cache[name] = { component }
-
-    // attach instance registration hook
-    // this will be called in the instance's injected lifecycle hooks
-    data.registerRouteInstance = (vm, val) => {
-      // val could be undefined for unregistration
-      const current = matched.instances[name]
-      if (
-        (val && current !== vm) ||
-        (!val && current === vm)
-      ) {
-        matched.instances[name] = val
-      }
-    }
-
-    // also register instance in prepatch hook
-    // in case the same component instance is reused across different routes
-    ;(data.hook || (data.hook = {})).prepatch = (_, knode) => {
-      matched.instances[name] = knode.componentInstance
-    }
-
-    // register instance in init hook
-    // in case kept-alive component be actived when routes changed
-    data.hook.init = (knode) => {
-      if (knode.data.keepAlive &&
-        knode.componentInstance &&
-        knode.componentInstance !== matched.instances[name]
-      ) {
-        matched.instances[name] = knode.componentInstance
-      }
-    }
-
-    const configProps = matched.props && matched.props[name]
-    // save route and configProps in cache
-    if (configProps) {
-      extend(cache[name], {
-        route,
-        configProps
-      })
-      fillPropsinData(component, data, route, configProps)
-    }
-
-    return h(component, data, children)
-  }
-}
-
-function fillPropsinData (component, data, route, configProps) {
-  // resolve props
-  let propsToPass = data.props = resolveProps(route, configProps)
-  if (propsToPass) {
-    // clone to prevent mutation
-    propsToPass = data.props = extend({}, propsToPass)
-    // pass non-declared props as attrs
-    const attrs = data.attrs = data.attrs || {}
-    for (const key in propsToPass) {
-      if (!component.props || !(key in component.props)) {
-        attrs[key] = propsToPass[key]
-        delete propsToPass[key]
-      }
-    }
-  }
-}
-
-function resolveProps (route, config) {
-  switch (typeof config) {
-    case 'undefined':
-      return
-    case 'object':
-      return config
-    case 'function':
-      return config(route)
-    case 'boolean':
-      return config ? route.params : undefined
-    default:
-      if (process.env.NODE_ENV !== 'production') {
-        warn(
-          false,
-          `props in "${route.path}" is a ${typeof config}, ` +
-          `expecting an object, function or boolean.`
-        )
-      }
-  }
-}
+import { warn } from '../util/warn'
+import { extend } from '../util/misc'
+import { handleRouteEntered } from '../util/route'
+
+export default {
+  name: 'RouterView',
+  functional: true,
+  props: {
+    name: {
+      type: String,
+      default: 'default'
+    }
+  },
+  render (_, { props, children, parent, data }) {
+    // used by devtools to display a router-view badge
+    data.routerView = true
+
+    // directly use parent context's createElement() function
+    // so that components rendered by router-view can resolve named slots
+    const h = parent.$createElement
+    const name = props.name
+    const route = parent.$route
+    const cache = parent._routerViewCache || (parent._routerViewCache = {})
+
+    // determine current view depth, also check to see if the tree
+    // has been toggled inactive but kept-alive.
+    let depth = 0
+    let inactive = false
+    while (parent && parent._routerRoot !== parent) {
+      const knodeData = parent.$knode ? parent.$knode.data : {}
+      if (knodeData.routerView) {
+        depth++
+      }
+      if (knodeData.keepAlive && parent._directInactive && parent._inactive) {
+        inactive = true
+      }
+      parent = parent.$parent
+    }
+    data.routerViewDepth = depth
+
+    // render previous view if the tree is inactive and kept-alive
+    if (inactive) {
+      const cachedData = cache[name]
+      const cachedComponent = cachedData && cachedData.component
+      if (cachedComponent) {
+        // #2301
+        // pass props
+        if (cachedData.configProps) {
+          fillPropsinData(cachedComponent, data, cachedData.route, cachedData.configProps)
+        }
+        return h(cachedComponent, data, children)
+      } else {
+        // render previous empty view
+        return h()
+      }
+    }
+
+    const matched = route.matched[depth]
+    const component = matched && matched.components[name]
+
+    // render empty node if no matched route or no config component
+    if (!matched || !component) {
+      cache[name] = null
+      return h()
+    }
+
+    // cache component
+    cache[name] = { component }
+
+    // attach instance registration hook
+    // this will be called in the instance's injected lifecycle hooks
+    data.registerRouteInstance = (vm, val) => {
+      // val could be undefined for unregistration
+      const current = matched.instances[name]
+      if (
+        (val && current !== vm) ||
+        (!val && current === vm)
+      ) {
+        matched.instances[name] = val
+      }
+    }
+
+    // also register instance in prepatch hook
+    // in case the same component instance is reused across different routes
+    ;(data.hook || (data.hook = {})).prepatch = (_, knode) => {
+      matched.instances[name] = knode.componentInstance
+    }
+
+    // register instance in init hook
+    // in case kept-alive component be actived when routes changed
+    data.hook.init = (knode) => {
+      if (knode.data.keepAlive &&
+        knode.componentInstance &&
+        knode.componentInstance !== matched.instances[name]
+      ) {
+        matched.instances[name] = knode.componentInstance
+      }
+
+      // if the route transition has already been confirmed then we weren't
+      // able to call the cbs during confirmation as the component was not
+      // registered yet, so we call it here.
+      handleRouteEntered(route)
+    }
+
+    const configProps = matched.props && matched.props[name]
+    // save route and configProps in cache
+    if (configProps) {
+      extend(cache[name], {
+        route,
+        configProps
+      })
+      fillPropsinData(component, data, route, configProps)
+    }
+
+    return h(component, data, children)
+  }
+}
+
+function fillPropsinData (component, data, route, configProps) {
+  // resolve props
+  let propsToPass = data.props = resolveProps(route, configProps)
+  if (propsToPass) {
+    // clone to prevent mutation
+    propsToPass = data.props = extend({}, propsToPass)
+    // pass non-declared props as attrs
+    const attrs = data.attrs = data.attrs || {}
+    for (const key in propsToPass) {
+      if (!component.props || !(key in component.props)) {
+        attrs[key] = propsToPass[key]
+        delete propsToPass[key]
+      }
+    }
+  }
+}
+
+function resolveProps (route, config) {
+  switch (typeof config) {
+    case 'undefined':
+      return
+    case 'object':
+      return config
+    case 'function':
+      return config(route)
+    case 'boolean':
+      return config ? route.params : undefined
+    default:
+      if (process.env.NODE_ENV !== 'production') {
+        warn(
+          false,
+          `props in "${route.path}" is a ${typeof config}, ` +
+          `expecting an object, function or boolean.`
+        )
+      }
+  }
+}

package/src/composables/globals.js

@@ -0,0 +1,34 @@
+import {
+  getCurrentInstance,
+  shallowReactive,
+  effectScope
+} from 'kdu'
+import { throwNoCurrentInstance } from './utils'
+
+export function useRouter () {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('useRouter')
+  }
+
+  return getCurrentInstance().proxy.$root.$router
+}
+
+export function useRoute () {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('useRoute')
+  }
+
+  const root = getCurrentInstance().proxy.$root
+  if (!root._$route) {
+    const route = effectScope(true).run(() =>
+      shallowReactive(Object.assign({}, root.$router.currentRoute))
+    )
+    root._$route = route
+
+    root.$router.afterEach(to => {
+      Object.assign(route, to)
+    })
+  }
+
+  return root._$route
+}

package/src/composables/guards.js

@@ -0,0 +1,68 @@
+import { getCurrentInstance, onUnmounted } from 'kdu'
+import { throwNoCurrentInstance } from './utils'
+import { useRouter } from './globals'
+
+export function onBeforeRouteUpdate (guard) {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('onBeforeRouteUpdate')
+  }
+
+  return useFilteredGuard(guard, isUpdateNavigation)
+}
+function isUpdateNavigation (to, from, depth) {
+  const toMatched = to.matched
+  const fromMatched = from.matched
+  return (
+    toMatched.length >= depth &&
+    toMatched
+      .slice(0, depth + 1)
+      .every((record, i) => record === fromMatched[i])
+  )
+}
+
+function isLeaveNavigation (to, from, depth) {
+  const toMatched = to.matched
+  const fromMatched = from.matched
+  return toMatched.length < depth || toMatched[depth] !== fromMatched[depth]
+}
+
+export function onBeforeRouteLeave (guard) {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('onBeforeRouteLeave')
+  }
+
+  return useFilteredGuard(guard, isLeaveNavigation)
+}
+
+const noop = () => {}
+function useFilteredGuard (guard, fn) {
+  const instance = getCurrentInstance()
+  const router = useRouter()
+
+  let target = instance.proxy
+  // find the nearest RouterView to know the depth
+  while (
+    target &&
+    target.$knode &&
+    target.$knode.data &&
+    target.$knode.data.routerViewDepth == null
+  ) {
+    target = target.$parent
+  }
+
+  const depth =
+    target && target.$knode && target.$knode.data
+      ? target.$knode.data.routerViewDepth
+      : null
+
+  if (depth != null) {
+    const removeGuard = router.beforeEach((to, from, next) => {
+      return fn(to, from, depth) ? guard(to, from, next) : next()
+    })
+
+    onUnmounted(removeGuard)
+    return removeGuard
+  }
+
+  return noop
+}

package/src/composables/index.js

@@ -0,0 +1,3 @@
+export * from './guards'
+export * from './globals'
+export * from './useLink'

package/src/composables/useLink.js

@@ -0,0 +1,113 @@
+import { computed, unref } from 'kdu'
+import { guardEvent } from '../components/link'
+import { throwNoCurrentInstance } from './utils'
+import { useRouter, useRoute } from './globals'
+
+function includesParams (outer, inner) {
+  for (const key in inner) {
+    const innerValue = inner[key]
+    const outerValue = outer[key]
+    if (typeof innerValue === 'string') {
+      if (innerValue !== outerValue) return false
+    } else {
+      if (
+        !Array.isArray(outerValue) ||
+        outerValue.length !== innerValue.length ||
+        innerValue.some((value, i) => value !== outerValue[i])
+      ) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+// helpers from kdu router 4
+
+function isSameRouteLocationParamsValue (a, b) {
+  return Array.isArray(a)
+    ? isEquivalentArray(a, b)
+    : Array.isArray(b)
+      ? isEquivalentArray(b, a)
+      : a === b
+}
+
+function isEquivalentArray (a, b) {
+  return Array.isArray(b)
+    ? a.length === b.length && a.every((value, i) => value === b[i])
+    : a.length === 1 && a[0] === b
+}
+
+export function isSameRouteLocationParams (a, b) {
+  if (Object.keys(a).length !== Object.keys(b).length) return false
+
+  for (const key in a) {
+    if (!isSameRouteLocationParamsValue(a[key], b[key])) return false
+  }
+
+  return true
+}
+
+export function useLink (props) {
+  if (process.env.NODE_ENV !== 'production') {
+    throwNoCurrentInstance('useLink')
+  }
+
+  const router = useRouter()
+  const currentRoute = useRoute()
+
+  const resolvedRoute = computed(() => router.resolve(unref(props.to), currentRoute))
+
+  const activeRecordIndex = computed(() => {
+    const route = resolvedRoute.value.route
+    const { matched } = route
+    const { length } = matched
+    const routeMatched = matched[length - 1]
+    const currentMatched = currentRoute.matched
+    if (!routeMatched || !currentMatched.length) return -1
+    const index = currentMatched.indexOf(routeMatched)
+    if (index > -1) return index
+    // possible parent record
+    const parentRecord = currentMatched[currentMatched.length - 2]
+
+    return (
+      // we are dealing with nested routes
+      length > 1 &&
+      // if the parent and matched route have the same path, this link is
+      // referring to the empty child. Or we currently are on a different
+      // child of the same parent
+      parentRecord && parentRecord === routeMatched.parent
+    )
+  })
+
+  const isActive = computed(
+    () =>
+      activeRecordIndex.value > -1 &&
+      includesParams(currentRoute.params, resolvedRoute.value.route.params)
+  )
+  const isExactActive = computed(
+    () =>
+      activeRecordIndex.value > -1 &&
+      activeRecordIndex.value === currentRoute.matched.length - 1 &&
+      isSameRouteLocationParams(currentRoute.params, resolvedRoute.value.route.params)
+  )
+
+  const navigate = e => {
+    const href = resolvedRoute.value.route
+    if (guardEvent(e)) {
+      return props.replace
+        ? router.replace(href)
+        : router.push(href)
+    }
+    return Promise.resolve()
+  }
+
+  return {
+    href: computed(() => resolvedRoute.value.href),
+    route: computed(() => resolvedRoute.value.route),
+    isExactActive,
+    isActive,
+    navigate
+  }
+}

package/src/composables/utils.js

@@ -0,0 +1,11 @@
+import { getCurrentInstance } from 'kdu'
+
+// dev only warn if no current instance
+
+export function throwNoCurrentInstance (method) {
+  if (!getCurrentInstance()) {
+    throw new Error(
+      `[kdu-router]: Missing current instance. ${method}() must be called inside <script setup> or setup().`
+    )
+  }
+}