Skip to content

Commit fc2bfda

Browse files
committed
feat: add vue 2.7 support
1 parent 29e382f commit fc2bfda

File tree

6 files changed

+265
-2
lines changed

6 files changed

+265
-2
lines changed

Diff for: package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
"selenium-server": "^3.141.59",
101101
"terser": "^4.2.0",
102102
"typescript": "^3.5.2",
103-
"vue": "^2.6.12",
103+
"vue": "^2.7.0",
104104
"vue-loader": "^15.9.3",
105105
"vue-server-renderer": "^2.6.12",
106106
"vue-template-compiler": "^2.6.12",

Diff for: src/composable.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { getCurrentInstance, reactive, watchEffect } from 'vue'
2+
3+
/**
4+
* Returns the current route location. Equivalent to using `$route` inside
5+
* templates.
6+
*/
7+
export function useRoute () {
8+
const instance = getCurrentInstance()
9+
if (!instance) {
10+
throw new Error('getCurrentInstance() returned null. useRoute() must be called at the top of a setup function')
11+
}
12+
const route = reactive(Object.assign({}, instance.proxy.$root.$route))
13+
watchEffect(() => {
14+
Object.assign(route, instance.proxy.$root.$route)
15+
})
16+
17+
return route
18+
}
19+
20+
/**
21+
* Returns the router instance. Equivalent to using `$router` inside
22+
* templates.
23+
*/
24+
export function useRouter () {
25+
const instance = getCurrentInstance()
26+
if (!instance) {
27+
throw new Error(
28+
'getCurrentInstance() returned null. useRouter() must be called at the top of a setup function',
29+
)
30+
}
31+
const router = instance.proxy.$root.$router
32+
watchEffect(() => {
33+
if (router) {
34+
Object.assign(router, instance.proxy.$root.$router)
35+
}
36+
})
37+
return router
38+
}
39+
40+
// TODO: function useLink(props) { }
41+
// TODO: function onBeforeRouteLeave(leaveGuard) { }
42+
// TODO: function onBeforeRouteUpdate(updateGuard) { }
43+

Diff for: src/v4-compat.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export { default as VueRouter } from './index'
2+
export { default as RouterLink } from './components/link'
3+
export { default as RouterView } from './components/view'
4+
export { useRoute, useRouter } from './composable'
5+
export { NavigationFailureType, isNavigationFailure } from './util/errors'
6+
export { START as START_LOCATION } from './util/route'

Diff for: types/router.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,17 @@ export declare class VueRouter {
8282

8383
export enum NavigationFailureType {
8484
redirected = 2,
85+
/**
86+
* An aborted navigation is a navigation that failed because a navigation guard returned `false` or called `next(false)`
87+
*/
8588
aborted = 4,
89+
/**
90+
* A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished).
91+
*/
8692
cancelled = 8,
93+
/**
94+
* A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same location.
95+
*/
8796
duplicated = 16
8897
}
8998

Diff for: types/v4-compat.d.ts

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { VNode } from 'vue'
2+
import { NavigationFailure, Route, VueRouter } from './router'
3+
4+
export interface RouterLinkProps {
5+
/**
6+
* Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to `router.push()` internally, so the value can be either a string or a location descriptor object.
7+
*/
8+
to: string | Location
9+
/**
10+
* Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record.
11+
*
12+
* @default false
13+
*/
14+
replace?: boolean
15+
/**
16+
* Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at `/a/b`.
17+
*
18+
* @default false
19+
*/
20+
append?: boolean
21+
/**
22+
* Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to render to, and it will still listen to click events for navigation.
23+
*
24+
* @default "a"
25+
*/
26+
tag?: string
27+
/**
28+
* Configure the active CSS class applied when the link is active. Note the default value can also be configured globally via the `linkActiveClass` router constructor option.
29+
*
30+
* @default "router-link-active"
31+
*/
32+
activeClass?: string
33+
/**
34+
* The default active class matching behavior is **inclusive match**. For example, `<RouterLink to="/a">` will get this class applied as long as the current path starts with `/a/` or is `/a`.
35+
*
36+
* @default false
37+
*/
38+
exact?: boolean
39+
/**
40+
* Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.
41+
*
42+
* @default false
43+
*/
44+
exactPath?: boolean
45+
/**
46+
* Configure the active CSS class applied when the link is active with exact path match. Note the default value can also be configured globally via the `linkExactPathActiveClass` router constructor option.
47+
*
48+
* @default "router-link-exact-path-active"
49+
*/
50+
exactPathActiveClass?: string
51+
52+
/**
53+
* Specify the event(s) that can trigger the link navigation.
54+
*
55+
* @default 'click'
56+
*/
57+
event?: string | ReadonlyArray<string>
58+
/**
59+
* Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option.
60+
*
61+
* @default "router-link-exact-active"
62+
*/
63+
exactActiveClass?: string
64+
/**
65+
* Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the default of page should be the best fit.
66+
*
67+
* @default "page"
68+
*/
69+
ariaCurrentValue?:
70+
| 'page'
71+
| 'step'
72+
| 'location'
73+
| 'date'
74+
| 'time'
75+
| 'true'
76+
| 'false'
77+
}
78+
79+
interface RouterLinkSlotArgument {
80+
/**
81+
* resolved url. This would be the `href` attribute of an `a` element
82+
*/
83+
href: string
84+
/**
85+
* resolved normalized location
86+
*/
87+
route: Route
88+
/**
89+
* function to trigger the navigation. It will automatically prevent events when necessary, the same way `RouterLink` does
90+
*/
91+
navigate: (e?: MouseEvent) => Promise<undefined | NavigationFailure>
92+
/**
93+
* `true` if the [active class](https://v3.router.vuejs.org/api/#active-class) should be applied. Allows to apply an arbitrary class
94+
*/
95+
isActive: boolean
96+
/**
97+
* `true` if the [exact active class](https://v3.router.vuejs.org/api/#exact-active-class) should be applied. Allows to apply an arbitrary class
98+
*/
99+
isExactActive: boolean
100+
}
101+
102+
/**
103+
* Component to render a link that triggers a navigation on click.
104+
*/
105+
export declare const RouterLink: new (props: RouterLinkProps) => {
106+
$props: typeof props
107+
$scopedSlots: {
108+
default?: ({
109+
href,
110+
route,
111+
navigate,
112+
isActive,
113+
isExactActive
114+
}: RouterLinkSlotArgument) => VNode[] | undefined
115+
}
116+
}
117+
118+
export interface RouterViewProps {
119+
/**
120+
* When a <RouterView> has a name, it will render the component with the corresponding name in the matched route record's components option. See [Named Views](https://v3.router.vuejs.org/guide/essentials/named-views.html) for an example.
121+
*
122+
* @default "default"
123+
*/
124+
name?: string
125+
}
126+
127+
/**
128+
* Component to display the current route the user is at.
129+
*/
130+
export declare const RouterView: new (props: RouterViewProps) => {
131+
$props: typeof props
132+
}
133+
134+
export declare function useRoute(): Route;
135+
export declare function useRouter(): VueRouter;
136+
export declare function isNavigationFailure(error: any, type?: number): error is NavigationFailure
137+
export declare const START_LOCATION: Route; // TODO: fix type here
138+
139+
export {
140+
RouterMode,
141+
RouteMeta,
142+
RawLocation,
143+
RedirectOption,
144+
RouterOptions,
145+
RouteConfig,
146+
RouteRecord,
147+
RouteRecordPublic,
148+
Location,
149+
Route,
150+
NavigationGuard,
151+
NavigationGuardNext,
152+
NavigationFailureType,
153+
NavigationFailure
154+
} from './router'

Diff for: yarn.lock

+52-1
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,11 @@
257257
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.0.tgz#2f0ebfed92bcddcc8395b91f1895191ce2760380"
258258
integrity sha512-AHbfoxesfBALg33idaTBVUkLnfXtsgvJREf93p4p0Lwsz4ppfE7g1tpEXVm4vrxUcH4DVhAa9Z1m1zqf9WUC7Q==
259259

260+
"@babel/parser@^7.18.4":
261+
version "7.18.8"
262+
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf"
263+
integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==
264+
260265
"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
261266
version "7.13.12"
262267
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
@@ -1215,6 +1220,15 @@
12151220
"@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
12161221
camelcase "^5.0.0"
12171222

1223+
1224+
version "2.7.6"
1225+
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.6.tgz#964615c10ba9098e82479afe19e87068fc72fe46"
1226+
integrity sha512-W677WEQdXSBEMd0egLtqKxQqmMuLM2zGPKFizjls0SYkEVrQL0ad124j7VbpEU0JLG4j8dp/3OFtvFGCG+grlQ==
1227+
dependencies:
1228+
"@babel/parser" "^7.18.4"
1229+
postcss "^8.4.14"
1230+
source-map "^0.6.1"
1231+
12181232
"@vue/component-compiler-utils@^3.1.0":
12191233
version "3.2.0"
12201234
resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d"
@@ -4072,6 +4086,11 @@ csso@^4.0.2:
40724086
dependencies:
40734087
css-tree "^1.1.2"
40744088

4089+
csstype@^3.1.0:
4090+
version "3.1.0"
4091+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
4092+
integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
4093+
40754094
currently-unhandled@^0.4.1:
40764095
version "0.4.1"
40774096
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -8053,6 +8072,11 @@ nan@^2.12.1:
80538072
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
80548073
integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
80558074

8075+
nanoid@^3.3.4:
8076+
version "3.3.4"
8077+
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
8078+
integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
8079+
80568080
nanomatch@^1.2.9:
80578081
version "1.2.13"
80588082
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -8819,6 +8843,11 @@ performance-now@^2.1.0:
88198843
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
88208844
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
88218845

8846+
picocolors@^1.0.0:
8847+
version "1.0.0"
8848+
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
8849+
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
8850+
88228851
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
88238852
version "2.2.3"
88248853
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
@@ -9237,6 +9266,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.2
92379266
source-map "^0.6.1"
92389267
supports-color "^6.1.0"
92399268

9269+
postcss@^8.4.14:
9270+
version "8.4.14"
9271+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
9272+
integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
9273+
dependencies:
9274+
nanoid "^3.3.4"
9275+
picocolors "^1.0.0"
9276+
source-map-js "^1.0.2"
9277+
92409278
prelude-ls@~1.1.2:
92419279
version "1.1.2"
92429280
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -10492,6 +10530,11 @@ source-list-map@^2.0.0:
1049210530
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
1049310531
integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
1049410532

10533+
source-map-js@^1.0.2:
10534+
version "1.0.2"
10535+
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
10536+
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
10537+
1049510538
source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
1049610539
version "0.5.3"
1049710540
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -11692,11 +11735,19 @@ vue-template-es2015-compiler@^1.9.0:
1169211735
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
1169311736
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
1169411737

11695-
vue@^2.6.10, vue@^2.6.12:
11738+
vue@^2.6.10:
1169611739
version "2.6.12"
1169711740
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
1169811741
integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
1169911742

11743+
vue@^2.7.0:
11744+
version "2.7.6"
11745+
resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.6.tgz#e0b2dacb8de9a16aa95d1a144b308e67ea216c52"
11746+
integrity sha512-5hfTjdByl2R9rtGmPzP+31/EURYwpIXhgyhZ+sO1biG3s49iuHVqwC9ZrPTqn22IPISn0UZLF5WwQ4KMMWec2w==
11747+
dependencies:
11748+
"@vue/compiler-sfc" "2.7.6"
11749+
csstype "^3.1.0"
11750+
1170011751
vuepress-html-webpack-plugin@^3.2.0:
1170111752
version "3.2.0"
1170211753
resolved "https://registry.yarnpkg.com/vuepress-html-webpack-plugin/-/vuepress-html-webpack-plugin-3.2.0.tgz#219be272ad510faa8750d2d4e70fd028bfd1c16e"

0 commit comments

Comments
 (0)