build: composables

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,35 +30,49 @@ 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(),
         cjs(),
         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) {

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;

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 };

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')
     }
   },
 

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"

src/composables.js → 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 () {}

src/entries/cjs.js

@@ -0,0 +1,3 @@
+import VueRouter from '../router'
+
+export default VueRouter

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