fix(types): append declare module

Close vuejs#419

Author: posva

package.json

@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "build:dts": "api-extractor run --local --verbose",
+    "build:dts": "api-extractor run --local --verbose && tail -n +7 src/globalExtensions.ts >> dist/vue-router.d.ts",
     "dev": "webpack-dev-server --mode=development",
     "release": "bash scripts/release.sh",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",

scripts/release.sh

@@ -15,6 +15,7 @@ then
   rm -rf node_modules/.rts2_cache
   yarn run build
   yarn run build:dts
+  yarn run test:dts
 
   # generate the version so that the changelog can be generated too
   yarn version --no-git-tag-version --no-commit-hooks --new-version $VERSION

src/globalExtensions.ts

@@ -0,0 +1,58 @@
+import {
+  NavigationGuardWithThis,
+  NavigationGuard,
+  RouteLocationNormalizedLoaded,
+} from './types'
+import { Router } from './router'
+
+declare module 'vue' {
+  export interface ComponentCustomOptions {
+    /**
+     * Guard called when the router is navigating to the route that is rendering
+     * this component from a different route. Differently from `beforeRouteUpdate`
+     * and `beforeRouteLeave`, `beforeRouteEnter` does not have access to the
+     * component instance through `this` because it triggers before the component
+     * is even mounted.
+     *
+     * @param to - RouteLocationRaw we are navigating to
+     * @param from - RouteLocationRaw we are navigating from
+     * @param next - function to validate, cancel or modify (by redirecting) the
+     * navigation
+     */
+    beforeRouteEnter?: NavigationGuardWithThis<undefined>
+
+    /**
+     * Guard called whenever the route that renders this component has changed but
+     * it is reused for the new route. This allows you to guard for changes in
+     * params, the query or the hash.
+     *
+     * @param to - RouteLocationRaw we are navigating to
+     * @param from - RouteLocationRaw we are navigating from
+     * @param next - function to validate, cancel or modify (by redirecting) the
+     * navigation
+     */
+    beforeRouteUpdate?: NavigationGuard
+
+    /**
+     * Guard called when the router is navigating away from the current route that
+     * is rendering this component.
+     *
+     * @param to - RouteLocationRaw we are navigating to
+     * @param from - RouteLocationRaw we are navigating from
+     * @param next - function to validate, cancel or modify (by redirecting) the
+     * navigation
+     */
+    beforeRouteLeave?: NavigationGuard
+  }
+
+  export interface ComponentCustomProperties {
+    /**
+     * Normalized current ___location. See {@link RouteLocationNormalizedLoaded}.
+     */
+    $route: RouteLocationNormalizedLoaded
+    /**
+     * {@link Router} instance used by the application.
+     */
+    $router: Router
+  }
+}

src/index.ts

@@ -1,10 +1,3 @@
-import {
-  NavigationGuard,
-  RouteLocationNormalizedLoaded,
-  NavigationGuardWithThis,
-} from './types'
-import { Router } from './router'
-
 export { createWebHistory } from './history/html5'
 export { createMemoryHistory } from './history/memory'
 export { createWebHashHistory } from './history/hash'
@@ -62,54 +55,4 @@ export { RouterView, RouterViewProps } from './RouterView'
 
 export * from './useApi'
 
-declare module '@vue/runtime-core' {
-  export interface ComponentCustomOptions {
-    /**
-     * Guard called when the router is navigating to the route that is rendering
-     * this component from a different route. Differently from `beforeRouteUpdate`
-     * and `beforeRouteLeave`, `beforeRouteEnter` does not have access to the
-     * component instance through `this` because it triggers before the component
-     * is even mounted.
-     *
-     * @param to - RouteLocationRaw we are navigating to
-     * @param from - RouteLocationRaw we are navigating from
-     * @param next - function to validate, cancel or modify (by redirecting) the
-     * navigation
-     */
-    beforeRouteEnter?: NavigationGuardWithThis<undefined>
-
-    /**
-     * Guard called whenever the route that renders this component has changed but
-     * it is reused for the new route. This allows you to guard for changes in
-     * params, the query or the hash.
-     *
-     * @param to - RouteLocationRaw we are navigating to
-     * @param from - RouteLocationRaw we are navigating from
-     * @param next - function to validate, cancel or modify (by redirecting) the
-     * navigation
-     */
-    beforeRouteUpdate?: NavigationGuard
-
-    /**
-     * Guard called when the router is navigating away from the current route that
-     * is rendering this component.
-     *
-     * @param to - RouteLocationRaw we are navigating to
-     * @param from - RouteLocationRaw we are navigating from
-     * @param next - function to validate, cancel or modify (by redirecting) the
-     * navigation
-     */
-    beforeRouteLeave?: NavigationGuard
-  }
-
-  export interface ComponentCustomProperties {
-    /**
-     * Normalized current ___location. See {@link RouteLocationNormalizedLoaded}.
-     */
-    $route: RouteLocationNormalizedLoaded
-    /**
-     * {@link Router} instance used by the application.
-     */
-    $router: Router
-  }
-}
+export * from './globalExtensions'

test-dts/legacy.test-d.ts

@@ -0,0 +1,11 @@
+import { Router, RouteLocationNormalizedLoaded, expectType } from './index'
+import { defineComponent } from 'vue'
+
+defineComponent({
+  methods: {
+    doStuff() {
+      expectType<Router>(this.$router)
+      expectType<RouteLocationNormalizedLoaded>(this.$route)
+    },
+  },
+})