@esmx/router-vue 3.0.0-rc.17 → 3.0.0-rc.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +563 -0
  3. package/README.zh-CN.md +563 -0
  4. package/dist/index.d.ts +6 -4
  5. package/dist/index.mjs +11 -4
  6. package/dist/index.test.d.ts +1 -0
  7. package/dist/index.test.mjs +206 -0
  8. package/dist/plugin.d.ts +55 -11
  9. package/dist/plugin.mjs +32 -16
  10. package/dist/plugin.test.d.ts +1 -0
  11. package/dist/plugin.test.mjs +436 -0
  12. package/dist/router-link.d.ts +202 -0
  13. package/dist/router-link.mjs +84 -0
  14. package/dist/router-link.test.d.ts +1 -0
  15. package/dist/router-link.test.mjs +456 -0
  16. package/dist/router-view.d.ts +30 -0
  17. package/dist/router-view.mjs +17 -0
  18. package/dist/router-view.test.d.ts +1 -0
  19. package/dist/router-view.test.mjs +459 -0
  20. package/dist/use.d.ts +198 -3
  21. package/dist/use.mjs +75 -9
  22. package/dist/use.test.d.ts +1 -0
  23. package/dist/use.test.mjs +461 -0
  24. package/dist/util.d.ts +7 -0
  25. package/dist/util.mjs +24 -0
  26. package/dist/util.test.d.ts +1 -0
  27. package/dist/util.test.mjs +319 -0
  28. package/dist/vue2.d.ts +13 -0
  29. package/dist/vue2.mjs +0 -0
  30. package/dist/vue3.d.ts +13 -0
  31. package/dist/vue3.mjs +0 -0
  32. package/package.json +31 -14
  33. package/src/index.test.ts +263 -0
  34. package/src/index.ts +16 -4
  35. package/src/plugin.test.ts +574 -0
  36. package/src/plugin.ts +86 -31
  37. package/src/router-link.test.ts +569 -0
  38. package/src/router-link.ts +148 -0
  39. package/src/router-view.test.ts +599 -0
  40. package/src/router-view.ts +61 -0
  41. package/src/use.test.ts +616 -0
  42. package/src/use.ts +307 -11
  43. package/src/util.test.ts +418 -0
  44. package/src/util.ts +32 -0
  45. package/src/vue2.ts +16 -0
  46. package/src/vue3.ts +15 -0
  47. package/dist/link.d.ts +0 -101
  48. package/dist/link.mjs +0 -103
  49. package/dist/symbols.d.ts +0 -3
  50. package/dist/symbols.mjs +0 -3
  51. package/dist/view.d.ts +0 -21
  52. package/dist/view.mjs +0 -75
  53. package/src/link.ts +0 -177
  54. package/src/symbols.ts +0 -8
  55. package/src/view.ts +0 -95
package/dist/view.d.ts DELETED
@@ -1,21 +0,0 @@
1
- import type { Route } from '@esmx/router';
2
- import { type PropType } from 'vue';
3
- export declare const RouterView: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
4
- name: {
5
- type: PropType<string>;
6
- default: string;
7
- };
8
- route: PropType<Route>;
9
- }>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
10
- [key: string]: any;
11
- }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
12
- [key: string]: any;
13
- }>[] | null) | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
14
- name: {
15
- type: PropType<string>;
16
- default: string;
17
- };
18
- route: PropType<Route>;
19
- }>> & Readonly<{}>, {
20
- name: string;
21
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
package/dist/view.mjs DELETED
@@ -1,75 +0,0 @@
1
- import {
2
- computed,
3
- defineComponent,
4
- getCurrentInstance,
5
- h,
6
- inject,
7
- provide,
8
- shallowReactive
9
- } from "vue";
10
- import { routerViewDepthKey, routerViewLocationKey } from "./symbols.mjs";
11
- export const RouterView = defineComponent({
12
- name: "RouterView",
13
- inheritAttrs: true,
14
- props: {
15
- name: {
16
- type: String,
17
- default: "default"
18
- },
19
- route: Object
20
- },
21
- // Better compat for @vue/compat users
22
- // https://github.com/vuejs/router/issues/1315
23
- compatConfig: { MODE: 3 },
24
- setup: (props, { attrs, slots }) => {
25
- const instance = getCurrentInstance();
26
- if (!instance) {
27
- console.error("no current instance");
28
- return;
29
- }
30
- const injectedRoute = inject(
31
- routerViewLocationKey
32
- );
33
- const routeToDisplay = computed(
34
- () => props.route || injectedRoute
35
- );
36
- const injectedDepth = inject(
37
- routerViewDepthKey,
38
- computed(() => 0)
39
- );
40
- const depth = computed(() => {
41
- let initialDepth = injectedDepth.value;
42
- const { matched } = routeToDisplay.value;
43
- let matchedRoute;
44
- while ((matchedRoute = matched[initialDepth]) && !(matchedRoute == null ? void 0 : matchedRoute.component)) {
45
- initialDepth++;
46
- }
47
- return initialDepth;
48
- });
49
- provide(routerViewLocationKey, shallowReactive(routeToDisplay.value));
50
- provide(
51
- routerViewDepthKey,
52
- computed(() => depth.value + 1)
53
- );
54
- return () => {
55
- const matchRoute = routeToDisplay.value.matched[depth.value];
56
- if (!matchRoute) {
57
- return null;
58
- }
59
- const component = h(
60
- matchRoute.component,
61
- Object.assign({}, props, attrs)
62
- );
63
- return (
64
- // pass the vnode to the slot as a prop.
65
- // h and <component :is="..."> both accept vnodes
66
- normalizeSlot(slots.default, { Component: component }) || component
67
- );
68
- };
69
- }
70
- });
71
- function normalizeSlot(slot, data) {
72
- if (!slot) return null;
73
- const slotContent = slot(data);
74
- return slotContent.length === 1 ? slotContent[0] : slotContent;
75
- }
package/src/link.ts DELETED
@@ -1,177 +0,0 @@
1
- import {
2
- type RouteRecord,
3
- type RouterRawLocation,
4
- isEqualRoute,
5
- isSameRoute
6
- } from '@esmx/router';
7
- import { type PropType, defineComponent, h } from 'vue';
8
-
9
- import { useRoute, useRouter } from './use';
10
-
11
- export interface RouterLinkProps {
12
- /**
13
- * 前往的路由路径
14
- */
15
- to: RouterRawLocation;
16
-
17
- /**
18
- * 节点使用的标签名
19
- * @default 'a'
20
- */
21
- tag: string;
22
-
23
- /**
24
- * 调用 router.replace 以替换 router.push。
25
- * @default false
26
- */
27
- replace: boolean;
28
-
29
- /**
30
- * 路径激活匹配规则
31
- * @example include => 路径包含即激活.
32
- * 如: 当前路由为/en/news/list 此时router-link 的路径为 /en/news 也会激活
33
- * @example route => 路由匹配才会激活,需要匹配的路由树一致.
34
- * 如: 当前路由为/en/news/list/123 此时router-link 的路径为 /en/news/list 也会激活
35
- * @example exact => 路径全匹配才会激活,不仅需要匹配路由树一致,还需要参数匹配才会激活.
36
- * 如: 当前路由为/en/news/list/123 此时router-link 的路径为 /en/news/list/123 才会激活,如果配置的路径为/en/news/list/123456 也不会激活
37
- * @default 'include'
38
- */
39
- exact: 'include' | 'route' | 'exact';
40
-
41
- /**
42
- * 是否为相对路径
43
- * 按照 Hanson 要求目前都是绝对路径,因此废弃此属性
44
- * @default false
45
- */
46
- // append?: boolean;
47
-
48
- /**
49
- * 路由激活时的class
50
- * @default 'router-link-active'
51
- */
52
- activeClass: string;
53
-
54
- /**
55
- * 哪些事件触发路由跳转
56
- * @default 'click'
57
- */
58
- event: string | string[];
59
- }
60
-
61
- export const RouterLink = defineComponent({
62
- props: {
63
- to: {
64
- type: [String, Object] as PropType<RouterLinkProps['to']>,
65
- required: true
66
- },
67
- tag: {
68
- type: String as PropType<RouterLinkProps['tag']>,
69
- default: 'a'
70
- },
71
- replace: {
72
- type: Boolean as PropType<RouterLinkProps['replace']>,
73
- default: false
74
- },
75
- exact: {
76
- type: String as PropType<RouterLinkProps['exact']>,
77
- default: 'include'
78
- },
79
- // append: {
80
- // type: Boolean as PropType<boolean>,
81
- // default: false
82
- // },
83
- activeClass: {
84
- type: String as PropType<RouterLinkProps['activeClass']>,
85
- default: 'router-link-active'
86
- },
87
- event: {
88
- type: String as PropType<RouterLinkProps['event']>,
89
- default: 'click'
90
- }
91
- },
92
- render(props: RouterLinkProps) {
93
- const { to, tag, replace, exact, activeClass, event } = props;
94
- const router = useRouter();
95
- const current = useRoute();
96
- const resolveRoute = router.resolve(to);
97
-
98
- /* 匹配函数 */
99
- let compare: (current: RouteRecord, route: RouteRecord) => Boolean;
100
- switch (exact) {
101
- /* 路由级匹配 */
102
- case 'route':
103
- compare = isSameRoute;
104
- break;
105
-
106
- /* 全匹配 */
107
- case 'exact':
108
- compare = isEqualRoute;
109
- break;
110
-
111
- /* 是否包含 */
112
- case 'include':
113
- default:
114
- compare = (current: RouteRecord, route: RouteRecord) => {
115
- return current.fullPath.startsWith(route.fullPath);
116
- };
117
- break;
118
- }
119
-
120
- /* 根据路由是否匹配获取高亮 */
121
- const active = compare(current, resolveRoute);
122
-
123
- /* 事件处理函数 */
124
- const handler = (e: MouseEvent) => {
125
- if (guardEvent(e)) {
126
- router[replace ? 'replace' : 'push'](to);
127
- }
128
- };
129
-
130
- /* 可触发事件 map */
131
- const on: Record<string, Function | Function[]> = {};
132
- const eventTypeList = getEventTypeList(event);
133
- eventTypeList.forEach((eventName) => {
134
- on[`on${eventName.toLocaleLowerCase()}`] = handler;
135
- });
136
-
137
- return h(
138
- tag,
139
- {
140
- class: ['router-link', active ? [activeClass] : ''],
141
- href: resolveRoute.fullPath,
142
- ...on
143
- },
144
- this.$slots
145
- );
146
- }
147
- });
148
-
149
- function getEventTypeList(eventType: string | string[]): string[] {
150
- if (eventType instanceof Array) {
151
- if (eventType.length > 0) {
152
- return eventType;
153
- }
154
- return ['click'];
155
- }
156
- return [eventType || 'click'];
157
- }
158
-
159
- function guardEvent(e: MouseEvent) {
160
- // don't redirect with control keys
161
- if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
162
- // don't redirect when preventDefault called
163
- if (e.defaultPrevented) return;
164
- // don't redirect on right click
165
- if (e.button !== undefined && e.button !== 0) return;
166
- // don't redirect if `target="_blank"`
167
- // @ts-expect-error getAttribute does exist
168
- if (e.currentTarget?.getAttribute) {
169
- // @ts-expect-error getAttribute exists
170
- const target = e.currentTarget.getAttribute('target');
171
- if (/\b_blank\b/i.test(target)) return;
172
- }
173
- // this may be a Weex event which doesn't have this method
174
- if (e.preventDefault) e.preventDefault();
175
-
176
- return true;
177
- }
package/src/symbols.ts DELETED
@@ -1,8 +0,0 @@
1
- /* router key */
2
- export const routerKey = Symbol('routerViewLocation');
3
-
4
- /* router location key */
5
- export const routerViewLocationKey = Symbol('routerViewLocation');
6
-
7
- /* router depth key */
8
- export const routerViewDepthKey = Symbol('routerViewDepth');
package/src/view.ts DELETED
@@ -1,95 +0,0 @@
1
- import type { Route, RouteConfig } from '@esmx/router';
2
- import {
3
- type ComputedRef,
4
- type PropType,
5
- type ShallowReactive,
6
- type Slot,
7
- computed,
8
- defineComponent,
9
- getCurrentInstance,
10
- h,
11
- inject,
12
- provide,
13
- shallowReactive
14
- } from 'vue';
15
-
16
- import { routerViewDepthKey, routerViewLocationKey } from './symbols';
17
-
18
- export const RouterView = defineComponent({
19
- name: 'RouterView',
20
- inheritAttrs: true,
21
- props: {
22
- name: {
23
- type: String as PropType<string>,
24
- default: 'default'
25
- },
26
- route: Object as PropType<Route>
27
- },
28
-
29
- // Better compat for @vue/compat users
30
- // https://github.com/vuejs/router/issues/1315
31
- compatConfig: { MODE: 3 },
32
-
33
- setup: (props, { attrs, slots }) => {
34
- const instance = getCurrentInstance();
35
- if (!instance) {
36
- console.error('no current instance');
37
- return;
38
- }
39
-
40
- const injectedRoute = inject<ShallowReactive<Route>>(
41
- routerViewLocationKey
42
- )!;
43
-
44
- const routeToDisplay = computed<Route>(
45
- () => props.route || injectedRoute
46
- );
47
- const injectedDepth = inject<ComputedRef<number>>(
48
- routerViewDepthKey,
49
- computed(() => 0)
50
- );
51
-
52
- const depth = computed<number>(() => {
53
- let initialDepth = injectedDepth.value;
54
- const { matched } = routeToDisplay.value;
55
- let matchedRoute: RouteConfig | undefined;
56
- while (
57
- (matchedRoute = matched[initialDepth]) &&
58
- !matchedRoute?.component
59
- ) {
60
- initialDepth++;
61
- }
62
- return initialDepth;
63
- });
64
-
65
- provide(routerViewLocationKey, shallowReactive(routeToDisplay.value));
66
- provide(
67
- routerViewDepthKey,
68
- computed(() => depth.value + 1)
69
- );
70
-
71
- return () => {
72
- const matchRoute = routeToDisplay.value.matched[depth.value];
73
- if (!matchRoute) {
74
- return null;
75
- }
76
-
77
- const component = h(
78
- matchRoute.component,
79
- Object.assign({}, props, attrs)
80
- );
81
- return (
82
- // pass the vnode to the slot as a prop.
83
- // h and <component :is="..."> both accept vnodes
84
- normalizeSlot(slots.default, { Component: component }) ||
85
- component
86
- );
87
- };
88
- }
89
- });
90
-
91
- function normalizeSlot(slot: Slot | undefined, data: any) {
92
- if (!slot) return null;
93
- const slotContent = slot(data);
94
- return slotContent.length === 1 ? slotContent[0] : slotContent;
95
- }