From 5bae10d8426b5838eb74f06aa533c2c3277e1a3d Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 19 Aug 2022 17:32:07 +0200
Subject: [PATCH] build: composables

---
 build/configs.js                             |  29 +-
 dist/composables.js                          |  87 ++++++
 dist/composables.mjs                         |  81 +++++
 examples/webpack.config.js                   |   2 +-
 package.json                                 |  17 ++
 src/{composables.js => composables/index.js} |  34 ++-
 src/entries/cjs.js                           |   3 +
 src/entries/esm.js                           |  10 +
 src/index.js                                 | 295 +------------------
 src/router.js                                | 294 ++++++++++++++++++
 yarn.lock                                    |  36 +--
 11 files changed, 566 insertions(+), 322 deletions(-)
 create mode 100644 dist/composables.js
 create mode 100644 dist/composables.mjs
 rename src/{composables.js => composables/index.js} (50%)
 create mode 100644 src/entries/cjs.js
 create mode 100644 src/entries/esm.js
 create mode 100644 src/router.js

diff --git a/build/configs.js b/build/configs.js
index 33117a641..0910f9c0f 100644
--- a/build/configs.js
+++ b/build/configs.js
@@ -5,8 +5,7 @@ const cjs = require('@rollup/plugin-commonjs')
 const node = require('@rollup/plugin-node-resolve').nodeResolve
 const replace = require('rollup-plugin-replace')
 const version = process.env.VERSION || require('../package.json').version
-const banner =
-`/*!
+const banner = `/*!
   * vue-router v${version}
   * (c) ${new Date().getFullYear()} Evan You
   * @license MIT
@@ -31,27 +30,40 @@ module.exports = [
     format: 'cjs'
   },
   {
+    input: resolve('src/entries/esm.js'),
     file: resolve('dist/vue-router.esm.js'),
     format: 'es'
   },
   {
+    input: resolve('src/entries/esm.js'),
     file: resolve('dist/vue-router.esm.browser.js'),
     format: 'es',
     env: 'development',
     transpile: false
   },
   {
+    input: resolve('src/entries/esm.js'),
     file: resolve('dist/vue-router.esm.browser.min.js'),
     format: 'es',
     env: 'production',
     transpile: false
+  },
+  {
+    input: resolve('src/composables/index.js'),
+    file: resolve('./dist/composables.mjs'),
+    format: 'es'
+  },
+  {
+    input: resolve('src/composables/index.js'),
+    file: resolve('./dist/composables.js'),
+    format: 'cjs'
   }
 ].map(genConfig)
 
 function genConfig (opts) {
   const config = {
     input: {
-      input: resolve('src/index.js'),
+      input: opts.input || resolve('src/index.js'),
       plugins: [
         flow(),
         node(),
@@ -59,7 +71,8 @@ function genConfig (opts) {
         replace({
           __VERSION__: version
         })
-      ]
+      ],
+      external: ['vue']
     },
     output: {
       file: opts.file,
@@ -70,9 +83,11 @@ function genConfig (opts) {
   }
 
   if (opts.env) {
-    config.input.plugins.unshift(replace({
-      'process.env.NODE_ENV': JSON.stringify(opts.env)
-    }))
+    config.input.plugins.unshift(
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(opts.env)
+      })
+    )
   }
 
   if (opts.transpile !== false) {
diff --git a/dist/composables.js b/dist/composables.js
new file mode 100644
index 000000000..2f1c92291
--- /dev/null
+++ b/dist/composables.js
@@ -0,0 +1,87 @@
+/*!
+  * vue-router v3.5.4
+  * (c) 2022 Evan You
+  * @license MIT
+  */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function useRouter () {
+  var i = vue.getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRouter');
+  }
+
+  return i.proxy.$root.$router
+}
+
+function useRoute () {
+  var i = vue.getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRoute');
+  }
+
+  var root = i.proxy.$root;
+  if (!root._$route) {
+    var route = vue.effectScope(true).run(
+      function () { return vue.shallowReactive(Object.assign({}, root.$router.currentRoute)); }
+    );
+    root._$route = route;
+
+    root.$router.afterEach(function (to) {
+      Object.assign(route, to);
+    });
+  }
+
+  return root._$route
+}
+
+// TODO:
+// export function useLink () {}
+
+function onBeforeRouteUpdate (guard) {
+  var i = vue.getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('onBeforeRouteUpdate');
+  }
+
+  var router = useRouter();
+
+  var target = i.proxy;
+  // find the nearest routerview to know the depth
+  while (target && target.$vnode && target.$vnode.data && target.$vnode.data.routerViewDepth == null) {
+    target = target.$parent;
+  }
+
+  var depth = target && target.$vnode && target.$vnode.data ? target.$vnode.data.routerViewDepth : null;
+
+  console.log('found depth', depth);
+
+  // TODO: allow multiple guards?
+  i.proxy.$options.beforeRouteUpdate = guard;
+
+  var removeGuard = router.beforeEach(function (to, from, next) {
+    // TODO: check it's an update
+    return guard(to, from, next)
+  });
+
+  vue.onUnmounted(removeGuard);
+
+  return removeGuard
+}
+
+// TODO:
+// export function onBeforeRouteLeave () {}
+
+function throwNoCurrentInstance (method) {
+  throw new Error(
+    ("[vue-router]: Missing current instance. " + method + "() must be called inside <script setup> or setup().")
+  )
+}
+
+exports.onBeforeRouteUpdate = onBeforeRouteUpdate;
+exports.useRoute = useRoute;
+exports.useRouter = useRouter;
diff --git a/dist/composables.mjs b/dist/composables.mjs
new file mode 100644
index 000000000..4b2470e78
--- /dev/null
+++ b/dist/composables.mjs
@@ -0,0 +1,81 @@
+/*!
+  * vue-router v3.5.4
+  * (c) 2022 Evan You
+  * @license MIT
+  */
+import { getCurrentInstance, effectScope, shallowReactive, onUnmounted } from 'vue';
+
+function useRouter () {
+  var i = getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRouter');
+  }
+
+  return i.proxy.$root.$router
+}
+
+function useRoute () {
+  var i = getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('useRoute');
+  }
+
+  var root = i.proxy.$root;
+  if (!root._$route) {
+    var route = effectScope(true).run(
+      function () { return shallowReactive(Object.assign({}, root.$router.currentRoute)); }
+    );
+    root._$route = route;
+
+    root.$router.afterEach(function (to) {
+      Object.assign(route, to);
+    });
+  }
+
+  return root._$route
+}
+
+// TODO:
+// export function useLink () {}
+
+function onBeforeRouteUpdate (guard) {
+  var i = getCurrentInstance();
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('onBeforeRouteUpdate');
+  }
+
+  var router = useRouter();
+
+  var target = i.proxy;
+  // find the nearest routerview to know the depth
+  while (target && target.$vnode && target.$vnode.data && target.$vnode.data.routerViewDepth == null) {
+    target = target.$parent;
+  }
+
+  var depth = target && target.$vnode && target.$vnode.data ? target.$vnode.data.routerViewDepth : null;
+
+  console.log('found depth', depth);
+
+  // TODO: allow multiple guards?
+  i.proxy.$options.beforeRouteUpdate = guard;
+
+  var removeGuard = router.beforeEach(function (to, from, next) {
+    // TODO: check it's an update
+    return guard(to, from, next)
+  });
+
+  onUnmounted(removeGuard);
+
+  return removeGuard
+}
+
+// TODO:
+// export function onBeforeRouteLeave () {}
+
+function throwNoCurrentInstance (method) {
+  throw new Error(
+    ("[vue-router]: Missing current instance. " + method + "() must be called inside <script setup> or setup().")
+  )
+}
+
+export { onBeforeRouteUpdate, useRoute, useRouter };
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
index 7b9afb16f..a74f22fb4 100644
--- a/examples/webpack.config.js
+++ b/examples/webpack.config.js
@@ -50,7 +50,7 @@ module.exports = {
     alias: {
       vue: 'vue/dist/vue.esm.js',
       'vue-router': path.join(__dirname, '..', 'src'),
-      'vue-router/composables': path.join(__dirname, '..', 'src/composables.js')
+      'vue-router/composables': path.join(__dirname, '..', 'src/composables')
     }
   },
 
diff --git a/package.json b/package.json
index 474987fd3..7a635ffd2 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,23 @@
     "vetur/tags.json",
     "vetur/attributes.json"
   ],
+  "exports": {
+    ".": {
+      "import": {
+        "node": "./dist/vue-router.mjs",
+        "default": "./dist/vue-router.esm.js"
+      },
+      "require": "./dist/vue-router.common.js",
+      "types": "./types/index.d.ts"
+    },
+    "./composables": {
+      "import": "./dist/composables.mjs",
+      "require": "./dist/composables.js"
+    },
+    "./dist/*": "./dist/*",
+    "./types/*": "./types/*",
+    "./package.json": "./package.json"
+  },
   "vetur": {
     "tags": "vetur/tags.json",
     "attributes": "vetur/attributes.json"
diff --git a/src/composables.js b/src/composables/index.js
similarity index 50%
rename from src/composables.js
rename to src/composables/index.js
index f2dd6c588..270974d31 100644
--- a/src/composables.js
+++ b/src/composables/index.js
@@ -1,4 +1,4 @@
-import { getCurrentInstance, shallowReactive, effectScope } from 'vue'
+import { getCurrentInstance, shallowReactive, effectScope, onUnmounted } from 'vue'
 
 export function useRouter () {
   const i = getCurrentInstance()
@@ -33,8 +33,36 @@ export function useRoute () {
 // TODO:
 // export function useLink () {}
 
-// TODO:
-// export function onBeforeRouteUpdate () {}
+export function onBeforeRouteUpdate (guard) {
+  const i = getCurrentInstance()
+  if (process.env.NODE_ENV !== 'production' && !i) {
+    throwNoCurrentInstance('onBeforeRouteUpdate')
+  }
+
+  const router = useRouter()
+
+  let target = i.proxy
+  // find the nearest routerview to know the depth
+  while (target && target.$vnode && target.$vnode.data && target.$vnode.data.routerViewDepth == null) {
+    target = target.$parent
+  }
+
+  const depth = target && target.$vnode && target.$vnode.data ? target.$vnode.data.routerViewDepth : null
+
+  console.log('found depth', depth)
+
+  // TODO: allow multiple guards?
+  i.proxy.$options.beforeRouteUpdate = guard
+
+  const removeGuard = router.beforeEach((to, from, next) => {
+    // TODO: check it's an update
+    return guard(to, from, next)
+  })
+
+  onUnmounted(removeGuard)
+
+  return removeGuard
+}
 
 // TODO:
 // export function onBeforeRouteLeave () {}
diff --git a/src/entries/cjs.js b/src/entries/cjs.js
new file mode 100644
index 000000000..4e815ba54
--- /dev/null
+++ b/src/entries/cjs.js
@@ -0,0 +1,3 @@
+import VueRouter from '../router'
+
+export default VueRouter
diff --git a/src/entries/esm.js b/src/entries/esm.js
new file mode 100644
index 000000000..a94e19278
--- /dev/null
+++ b/src/entries/esm.js
@@ -0,0 +1,10 @@
+import VueRouter from '../router'
+
+export const version = '__VERSION__'
+export { isNavigationFailure, NavigationFailureType } from '../util/errors'
+export { START as START_LOCATION } from '../util/route'
+
+// we can't add the other composables here because people could still be using an older version of vue and that would
+// create a compilation error trying to import from vue
+
+export default VueRouter
diff --git a/src/index.js b/src/index.js
index 4ffe2db57..deacaced6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,294 +1,3 @@
-/* @flow */
+import VueRouter from './entries/cjs'
 
-import { install } from './install'
-import { START } from './util/route'
-import { assert, warn } from './util/warn'
-import { inBrowser } from './util/dom'
-import { cleanPath } from './util/path'
-import { createMatcher } from './create-matcher'
-import { normalizeLocation } from './util/location'
-import { supportsPushState } from './util/push-state'
-import { handleScroll } from './util/scroll'
-
-import { HashHistory } from './history/hash'
-import { HTML5History } from './history/html5'
-import { AbstractHistory } from './history/abstract'
-
-import type { Matcher } from './create-matcher'
-
-import { isNavigationFailure, NavigationFailureType } from './util/errors'
-
-export default class VueRouter {
-  static install: () => void
-  static version: string
-  static isNavigationFailure: Function
-  static NavigationFailureType: any
-  static START_LOCATION: Route
-
-  app: any
-  apps: Array<any>
-  ready: boolean
-  readyCbs: Array<Function>
-  options: RouterOptions
-  mode: string
-  history: HashHistory | HTML5History | AbstractHistory
-  matcher: Matcher
-  fallback: boolean
-  beforeHooks: Array<?NavigationGuard>
-  resolveHooks: Array<?NavigationGuard>
-  afterHooks: Array<?AfterNavigationHook>
-
-  constructor (options: RouterOptions = {}) {
-    if (process.env.NODE_ENV !== 'production') {
-      warn(this instanceof VueRouter, `Router must be called with the new operator.`)
-    }
-    this.app = null
-    this.apps = []
-    this.options = options
-    this.beforeHooks = []
-    this.resolveHooks = []
-    this.afterHooks = []
-    this.matcher = createMatcher(options.routes || [], this)
-
-    let mode = options.mode || 'hash'
-    this.fallback =
-      mode === 'history' && !supportsPushState && options.fallback !== false
-    if (this.fallback) {
-      mode = 'hash'
-    }
-    if (!inBrowser) {
-      mode = 'abstract'
-    }
-    this.mode = mode
-
-    switch (mode) {
-      case 'history':
-        this.history = new HTML5History(this, options.base)
-        break
-      case 'hash':
-        this.history = new HashHistory(this, options.base, this.fallback)
-        break
-      case 'abstract':
-        this.history = new AbstractHistory(this, options.base)
-        break
-      default:
-        if (process.env.NODE_ENV !== 'production') {
-          assert(false, `invalid mode: ${mode}`)
-        }
-    }
-  }
-
-  match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {
-    return this.matcher.match(raw, current, redirectedFrom)
-  }
-
-  get currentRoute (): ?Route {
-    return this.history && this.history.current
-  }
-
-  init (app: any /* Vue component instance */) {
-    process.env.NODE_ENV !== 'production' &&
-      assert(
-        install.installed,
-        `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
-          `before creating root instance.`
-      )
-
-    this.apps.push(app)
-
-    // set up app destroyed handler
-    // https://github.com/vuejs/vue-router/issues/2639
-    app.$once('hook:destroyed', () => {
-      // clean out app from this.apps array once destroyed
-      const index = this.apps.indexOf(app)
-      if (index > -1) this.apps.splice(index, 1)
-      // ensure we still have a main app or null if no apps
-      // we do not release the router so it can be reused
-      if (this.app === app) this.app = this.apps[0] || null
-
-      if (!this.app) this.history.teardown()
-    })
-
-    // main app previously initialized
-    // return as we don't need to set up new history listener
-    if (this.app) {
-      return
-    }
-
-    this.app = app
-
-    const history = this.history
-
-    if (history instanceof HTML5History || history instanceof HashHistory) {
-      const handleInitialScroll = routeOrError => {
-        const from = history.current
-        const expectScroll = this.options.scrollBehavior
-        const supportsScroll = supportsPushState && expectScroll
-
-        if (supportsScroll && 'fullPath' in routeOrError) {
-          handleScroll(this, routeOrError, from, false)
-        }
-      }
-      const setupListeners = routeOrError => {
-        history.setupListeners()
-        handleInitialScroll(routeOrError)
-      }
-      history.transitionTo(
-        history.getCurrentLocation(),
-        setupListeners,
-        setupListeners
-      )
-    }
-
-    history.listen(route => {
-      this.apps.forEach(app => {
-        app._route = route
-      })
-    })
-  }
-
-  beforeEach (fn: Function): Function {
-    return registerHook(this.beforeHooks, fn)
-  }
-
-  beforeResolve (fn: Function): Function {
-    return registerHook(this.resolveHooks, fn)
-  }
-
-  afterEach (fn: Function): Function {
-    return registerHook(this.afterHooks, fn)
-  }
-
-  onReady (cb: Function, errorCb?: Function) {
-    this.history.onReady(cb, errorCb)
-  }
-
-  onError (errorCb: Function) {
-    this.history.onError(errorCb)
-  }
-
-  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
-    // $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) {
-    // $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) {
-    this.history.go(n)
-  }
-
-  back () {
-    this.go(-1)
-  }
-
-  forward () {
-    this.go(1)
-  }
-
-  getMatchedComponents (to?: RawLocation | Route): Array<any> {
-    const route: any = to
-      ? to.matched
-        ? to
-        : this.resolve(to).route
-      : this.currentRoute
-    if (!route) {
-      return []
-    }
-    return [].concat.apply(
-      [],
-      route.matched.map(m => {
-        return Object.keys(m.components).map(key => {
-          return m.components[key]
-        })
-      })
-    )
-  }
-
-  resolve (
-    to: RawLocation,
-    current?: Route,
-    append?: boolean
-  ): {
-    location: Location,
-    route: Route,
-    href: string,
-    // for backwards compat
-    normalizedTo: Location,
-    resolved: Route
-  } {
-    current = current || this.history.current
-    const location = normalizeLocation(to, current, append, this)
-    const route = this.match(location, current)
-    const fullPath = route.redirectedFrom || route.fullPath
-    const base = this.history.base
-    const href = createHref(base, fullPath, this.mode)
-    return {
-      location,
-      route,
-      href,
-      // for backwards compat
-      normalizedTo: location,
-      resolved: route
-    }
-  }
-
-  getRoutes () {
-    return this.matcher.getRoutes()
-  }
-
-  addRoute (parentOrRoute: string | RouteConfig, route?: RouteConfig) {
-    this.matcher.addRoute(parentOrRoute, route)
-    if (this.history.current !== START) {
-      this.history.transitionTo(this.history.getCurrentLocation())
-    }
-  }
-
-  addRoutes (routes: Array<RouteConfig>) {
-    if (process.env.NODE_ENV !== 'production') {
-      warn(false, 'router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.')
-    }
-    this.matcher.addRoutes(routes)
-    if (this.history.current !== START) {
-      this.history.transitionTo(this.history.getCurrentLocation())
-    }
-  }
-}
-
-function registerHook (list: Array<any>, fn: Function): Function {
-  list.push(fn)
-  return () => {
-    const i = list.indexOf(fn)
-    if (i > -1) list.splice(i, 1)
-  }
-}
-
-function createHref (base: string, fullPath: string, mode) {
-  var path = mode === 'hash' ? '#' + fullPath : fullPath
-  return base ? cleanPath(base + '/' + path) : path
-}
-
-VueRouter.install = install
-VueRouter.version = '__VERSION__'
-VueRouter.isNavigationFailure = isNavigationFailure
-VueRouter.NavigationFailureType = NavigationFailureType
-VueRouter.START_LOCATION = START
-
-if (inBrowser && window.Vue) {
-  window.Vue.use(VueRouter)
-}
+export default VueRouter
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 000000000..9cfb5e892
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,294 @@
+/* @flow */
+
+import { install } from './install'
+import { START } from './util/route'
+import { assert, warn } from './util/warn'
+import { inBrowser } from './util/dom'
+import { cleanPath } from './util/path'
+import { createMatcher } from './create-matcher'
+import { normalizeLocation } from './util/location'
+import { supportsPushState } from './util/push-state'
+import { handleScroll } from './util/scroll'
+import { isNavigationFailure, NavigationFailureType } from './util/errors'
+
+import { HashHistory } from './history/hash'
+import { HTML5History } from './history/html5'
+import { AbstractHistory } from './history/abstract'
+
+import type { Matcher } from './create-matcher'
+
+export default class VueRouter {
+  static install: () => void
+  static version: string
+  static isNavigationFailure: Function
+  static NavigationFailureType: any
+  static START_LOCATION: Route
+
+  app: any
+  apps: Array<any>
+  ready: boolean
+  readyCbs: Array<Function>
+  options: RouterOptions
+  mode: string
+  history: HashHistory | HTML5History | AbstractHistory
+  matcher: Matcher
+  fallback: boolean
+  beforeHooks: Array<?NavigationGuard>
+  resolveHooks: Array<?NavigationGuard>
+  afterHooks: Array<?AfterNavigationHook>
+
+  constructor (options: RouterOptions = {}) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn(this instanceof VueRouter, `Router must be called with the new operator.`)
+    }
+    this.app = null
+    this.apps = []
+    this.options = options
+    this.beforeHooks = []
+    this.resolveHooks = []
+    this.afterHooks = []
+    this.matcher = createMatcher(options.routes || [], this)
+
+    let mode = options.mode || 'hash'
+    this.fallback =
+      mode === 'history' && !supportsPushState && options.fallback !== false
+    if (this.fallback) {
+      mode = 'hash'
+    }
+    if (!inBrowser) {
+      mode = 'abstract'
+    }
+    this.mode = mode
+
+    switch (mode) {
+      case 'history':
+        this.history = new HTML5History(this, options.base)
+        break
+      case 'hash':
+        this.history = new HashHistory(this, options.base, this.fallback)
+        break
+      case 'abstract':
+        this.history = new AbstractHistory(this, options.base)
+        break
+      default:
+        if (process.env.NODE_ENV !== 'production') {
+          assert(false, `invalid mode: ${mode}`)
+        }
+    }
+  }
+
+  match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route {
+    return this.matcher.match(raw, current, redirectedFrom)
+  }
+
+  get currentRoute (): ?Route {
+    return this.history && this.history.current
+  }
+
+  init (app: any /* Vue component instance */) {
+    process.env.NODE_ENV !== 'production' &&
+      assert(
+        install.installed,
+        `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
+          `before creating root instance.`
+      )
+
+    this.apps.push(app)
+
+    // set up app destroyed handler
+    // https://github.com/vuejs/vue-router/issues/2639
+    app.$once('hook:destroyed', () => {
+      // clean out app from this.apps array once destroyed
+      const index = this.apps.indexOf(app)
+      if (index > -1) this.apps.splice(index, 1)
+      // ensure we still have a main app or null if no apps
+      // we do not release the router so it can be reused
+      if (this.app === app) this.app = this.apps[0] || null
+
+      if (!this.app) this.history.teardown()
+    })
+
+    // main app previously initialized
+    // return as we don't need to set up new history listener
+    if (this.app) {
+      return
+    }
+
+    this.app = app
+
+    const history = this.history
+
+    if (history instanceof HTML5History || history instanceof HashHistory) {
+      const handleInitialScroll = routeOrError => {
+        const from = history.current
+        const expectScroll = this.options.scrollBehavior
+        const supportsScroll = supportsPushState && expectScroll
+
+        if (supportsScroll && 'fullPath' in routeOrError) {
+          handleScroll(this, routeOrError, from, false)
+        }
+      }
+      const setupListeners = routeOrError => {
+        history.setupListeners()
+        handleInitialScroll(routeOrError)
+      }
+      history.transitionTo(
+        history.getCurrentLocation(),
+        setupListeners,
+        setupListeners
+      )
+    }
+
+    history.listen(route => {
+      this.apps.forEach(app => {
+        app._route = route
+      })
+    })
+  }
+
+  beforeEach (fn: Function): Function {
+    return registerHook(this.beforeHooks, fn)
+  }
+
+  beforeResolve (fn: Function): Function {
+    return registerHook(this.resolveHooks, fn)
+  }
+
+  afterEach (fn: Function): Function {
+    return registerHook(this.afterHooks, fn)
+  }
+
+  onReady (cb: Function, errorCb?: Function) {
+    this.history.onReady(cb, errorCb)
+  }
+
+  onError (errorCb: Function) {
+    this.history.onError(errorCb)
+  }
+
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    // $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) {
+    // $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) {
+    this.history.go(n)
+  }
+
+  back () {
+    this.go(-1)
+  }
+
+  forward () {
+    this.go(1)
+  }
+
+  getMatchedComponents (to?: RawLocation | Route): Array<any> {
+    const route: any = to
+      ? to.matched
+        ? to
+        : this.resolve(to).route
+      : this.currentRoute
+    if (!route) {
+      return []
+    }
+    return [].concat.apply(
+      [],
+      route.matched.map(m => {
+        return Object.keys(m.components).map(key => {
+          return m.components[key]
+        })
+      })
+    )
+  }
+
+  resolve (
+    to: RawLocation,
+    current?: Route,
+    append?: boolean
+  ): {
+    location: Location,
+    route: Route,
+    href: string,
+    // for backwards compat
+    normalizedTo: Location,
+    resolved: Route
+  } {
+    current = current || this.history.current
+    const location = normalizeLocation(to, current, append, this)
+    const route = this.match(location, current)
+    const fullPath = route.redirectedFrom || route.fullPath
+    const base = this.history.base
+    const href = createHref(base, fullPath, this.mode)
+    return {
+      location,
+      route,
+      href,
+      // for backwards compat
+      normalizedTo: location,
+      resolved: route
+    }
+  }
+
+  getRoutes () {
+    return this.matcher.getRoutes()
+  }
+
+  addRoute (parentOrRoute: string | RouteConfig, route?: RouteConfig) {
+    this.matcher.addRoute(parentOrRoute, route)
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation())
+    }
+  }
+
+  addRoutes (routes: Array<RouteConfig>) {
+    if (process.env.NODE_ENV !== 'production') {
+      warn(false, 'router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.')
+    }
+    this.matcher.addRoutes(routes)
+    if (this.history.current !== START) {
+      this.history.transitionTo(this.history.getCurrentLocation())
+    }
+  }
+}
+
+function registerHook (list: Array<any>, fn: Function): Function {
+  list.push(fn)
+  return () => {
+    const i = list.indexOf(fn)
+    if (i > -1) list.splice(i, 1)
+  }
+}
+
+function createHref (base: string, fullPath: string, mode) {
+  var path = mode === 'hash' ? '#' + fullPath : fullPath
+  return base ? cleanPath(base + '/' + path) : path
+}
+
+if (inBrowser && window.Vue) {
+  window.Vue.use(VueRouter)
+}
+
+// We cannot remove this as it would be a breaking change
+VueRouter.install = install
+VueRouter.version = '__VERSION__'
+VueRouter.isNavigationFailure = isNavigationFailure
+VueRouter.NavigationFailureType = NavigationFailureType
+VueRouter.START_LOCATION = START
diff --git a/yarn.lock b/yarn.lock
index c2a0b5d82..8a02e39c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1220,10 +1220,10 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
     camelcase "^5.0.0"
 
-"@vue/compiler-sfc@2.7.8":
-  version "2.7.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.8.tgz#731aadd6beafdb9c72fd8614ce189ac6cee87612"
-  integrity sha512-2DK4YWKfgLnW9VDR9gnju1gcYRk3flKj8UNsms7fsRmFcg35slVTZEkqwBtX+wJBXaamFfn6NxSsZh3h12Ix/Q==
+"@vue/compiler-sfc@2.7.9":
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.9.tgz#aa31813c94de39f4977e4b924eb261c2199218ad"
+  integrity sha512-TD2FvT0fPUezw5RVP4tfwTZnKHP0QjeEUb39y7tORvOJQTjbOuHJEk4GPHUPsRaTeQ8rjuKjntyrYcEIx+ODxg==
   dependencies:
     "@babel/parser" "^7.18.4"
     postcss "^8.4.14"
@@ -4139,7 +4139,7 @@ dateformat@^3.0.0:
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
 debug@*, debug@4, debug@4.3.1, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.3.1"
@@ -7380,7 +7380,7 @@ lodash._isiterateecall@^3.0.0:
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+  integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==
 
 lodash.clone@3.0.3:
   version "3.0.3"
@@ -7463,7 +7463,7 @@ lodash.templatesettings@^4.0.0:
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
+  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
 lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.21"
@@ -10603,7 +10603,7 @@ source-map-url@^0.4.0:
 source-map@0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-  integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
+  integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
 
 source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
@@ -11749,9 +11749,9 @@ vue-server-renderer@^2.6.10:
     source-map "0.5.6"
 
 vue-server-renderer@^2.7.0:
-  version "2.7.8"
-  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.7.8.tgz#ee3b32e58ca59a6459d17f090ca9d42a84d54d51"
-  integrity sha512-d7nf5uRk4BrZLKptAbAcAvmCM4/3VD1xBThjXgLfcAarwta1ngTdXxnVkUHPlYLTUaOFf563EoH2tgxfLY9fcg==
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.7.9.tgz#39f2cace07e8a5c89d0e6a8c678fdd5a0d855639"
+  integrity sha512-XBANTA8BScw6ls+GT3SnVWM4GKWx6aBQv+m+vNT2RKiTc1AG6Mpoh+xA4n/Uf314ZVofX7L7y6Z3MfcV+/DhSQ==
   dependencies:
     chalk "^4.1.2"
     hash-sum "^2.0.0"
@@ -11779,9 +11779,9 @@ vue-template-compiler@^2.6.10:
     he "^1.1.0"
 
 vue-template-compiler@^2.7.0:
-  version "2.7.8"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.8.tgz#eadd54ed8fbff55b7deb07093a976c07f451a1dc"
-  integrity sha512-eQqdcUpJKJpBRPDdxCNsqUoT0edNvdt1jFjtVnVS/LPPmr0BU2jWzXlrf6BVMeODtdLewB3j8j3WjNiB+V+giw==
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.9.tgz#ffbeb1769ae6af65cd405a6513df6b1e20e33616"
+  integrity sha512-NPJxt6OjVlzmkixYg0SdIN2Lw/rMryQskObY89uAMcM9flS/HrmLK5LaN1ReBTuhBgnYuagZZEkSS6FESATQUQ==
   dependencies:
     de-indent "^1.0.2"
     he "^1.2.0"
@@ -11797,11 +11797,11 @@ vue@^2.6.10:
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
 vue@^2.7.0:
-  version "2.7.8"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.8.tgz#34e06553137611d8cecc4b0cd78b7a59f80b1299"
-  integrity sha512-ncwlZx5qOcn754bCu5/tS/IWPhXHopfit79cx+uIlLMyt3vCMGcXai5yCG5y+I6cDmEj4ukRYyZail9FTQh7lQ==
+  version "2.7.9"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.9.tgz#ac3ccb4a4ac5dd31a8eec4c68a094efe7f83dfbb"
+  integrity sha512-GeWCvAUkjzD5q4A3vgi8ka5r9bM6g8fmNmx/9VnHDKCaEzBcoVw+7UcQktZHrJ2jhlI+Zv8L57pMCIwM4h4MWg==
   dependencies:
-    "@vue/compiler-sfc" "2.7.8"
+    "@vue/compiler-sfc" "2.7.9"
     csstype "^3.1.0"
 
 vuepress-html-webpack-plugin@^3.2.0: