@esmx/router-vue 3.0.0-rc.12

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { RouterVuePlugin } from './plugin';
+export { useRouter, useRoute } from './use';
+export { RouterLink } from './link';
+export { RouterView } from './view';

package/dist/index.mjs

@@ -0,0 +1,4 @@
+export { RouterVuePlugin } from "./plugin.mjs";
+export { useRouter, useRoute } from "./use.mjs";
+export { RouterLink } from "./link.mjs";
+export { RouterView } from "./view.mjs";

package/dist/link.d.ts

@@ -0,0 +1,101 @@
+import { type RouterRawLocation } from '@esmx/router';
+import { type PropType } from 'vue';
+export interface RouterLinkProps {
+    /**
+     * 前往的路由路径
+     */
+    to: RouterRawLocation;
+    /**
+     * 节点使用的标签名
+     * @default 'a'
+     */
+    tag: string;
+    /**
+     * 调用 router.replace 以替换 router.push。
+     * @default false
+     */
+    replace: boolean;
+    /**
+     * 路径激活匹配规则
+     * @example include => 路径包含即激活.
+     * 如: 当前路由为/en/news/list  此时router-link 的路径为 /en/news 也会激活
+     * @example route => 路由匹配才会激活,需要匹配的路由树一致.
+     * 如: 当前路由为/en/news/list/123  此时router-link 的路径为 /en/news/list 也会激活
+     * @example exact => 路径全匹配才会激活，不仅需要匹配路由树一致，还需要参数匹配才会激活.
+     * 如: 当前路由为/en/news/list/123  此时router-link 的路径为 /en/news/list/123 才会激活，如果配置的路径为/en/news/list/123456 也不会激活
+     * @default 'include'
+     */
+    exact: 'include' | 'route' | 'exact';
+    /**
+     * 是否为相对路径
+     * 按照 Hanson 要求目前都是绝对路径，因此废弃此属性
+     * @default false
+     */
+    /**
+     * 路由激活时的class
+     * @default 'router-link-active'
+     */
+    activeClass: string;
+    /**
+     * 哪些事件触发路由跳转
+     * @default 'click'
+     */
+    event: string | string[];
+}
+export declare const RouterLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    to: {
+        type: PropType<RouterLinkProps["to"]>;
+        required: true;
+    };
+    tag: {
+        type: PropType<RouterLinkProps["tag"]>;
+        default: string;
+    };
+    replace: {
+        type: PropType<RouterLinkProps["replace"]>;
+        default: boolean;
+    };
+    exact: {
+        type: PropType<RouterLinkProps["exact"]>;
+        default: string;
+    };
+    activeClass: {
+        type: PropType<RouterLinkProps["activeClass"]>;
+        default: string;
+    };
+    event: {
+        type: PropType<RouterLinkProps["event"]>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: PropType<RouterLinkProps["to"]>;
+        required: true;
+    };
+    tag: {
+        type: PropType<RouterLinkProps["tag"]>;
+        default: string;
+    };
+    replace: {
+        type: PropType<RouterLinkProps["replace"]>;
+        default: boolean;
+    };
+    exact: {
+        type: PropType<RouterLinkProps["exact"]>;
+        default: string;
+    };
+    activeClass: {
+        type: PropType<RouterLinkProps["activeClass"]>;
+        default: string;
+    };
+    event: {
+        type: PropType<RouterLinkProps["event"]>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    exact: "include" | "route" | "exact";
+    tag: string;
+    replace: boolean;
+    activeClass: string;
+    event: string | string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/link.mjs

@@ -0,0 +1,103 @@
+import {
+  isEqualRoute,
+  isSameRoute
+} from "@esmx/router";
+import { defineComponent, h } from "vue";
+import { useRoute, useRouter } from "./use.mjs";
+export const RouterLink = defineComponent({
+  props: {
+    to: {
+      type: [String, Object],
+      required: true
+    },
+    tag: {
+      type: String,
+      default: "a"
+    },
+    replace: {
+      type: Boolean,
+      default: false
+    },
+    exact: {
+      type: String,
+      default: "include"
+    },
+    // append: {
+    //     type: Boolean as PropType<boolean>,
+    //     default: false
+    // },
+    activeClass: {
+      type: String,
+      default: "router-link-active"
+    },
+    event: {
+      type: String,
+      default: "click"
+    }
+  },
+  render(props) {
+    const { to, tag, replace, exact, activeClass, event } = props;
+    const router = useRouter();
+    const current = useRoute();
+    const resolveRoute = router.resolve(to);
+    let compare;
+    switch (exact) {
+      /* 路由级匹配 */
+      case "route":
+        compare = isSameRoute;
+        break;
+      /* 全匹配 */
+      case "exact":
+        compare = isEqualRoute;
+        break;
+      /* 是否包含 */
+      case "include":
+      default:
+        compare = (current2, route) => {
+          return current2.fullPath.startsWith(route.fullPath);
+        };
+        break;
+    }
+    const active = compare(current, resolveRoute);
+    const handler = (e) => {
+      if (guardEvent(e)) {
+        router[replace ? "replace" : "push"](to);
+      }
+    };
+    const on = {};
+    const eventTypeList = getEventTypeList(event);
+    eventTypeList.forEach((eventName) => {
+      on[`on${eventName.toLocaleLowerCase()}`] = handler;
+    });
+    return h(
+      tag,
+      {
+        class: ["router-link", active ? [activeClass] : ""],
+        href: resolveRoute.fullPath,
+        ...on
+      },
+      this.$slots
+    );
+  }
+});
+function getEventTypeList(eventType) {
+  if (eventType instanceof Array) {
+    if (eventType.length > 0) {
+      return eventType;
+    }
+    return ["click"];
+  }
+  return [eventType || "click"];
+}
+function guardEvent(e) {
+  var _a;
+  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+  if (e.defaultPrevented) return;
+  if (e.button !== void 0 && e.button !== 0) return;
+  if ((_a = e.currentTarget) == null ? void 0 : _a.getAttribute) {
+    const target = e.currentTarget.getAttribute("target");
+    if (/\b_blank\b/i.test(target)) return;
+  }
+  if (e.preventDefault) e.preventDefault();
+  return true;
+}

package/dist/plugin.d.ts

@@ -0,0 +1,11 @@
+import type { Route, RouterInstance } from '@esmx/router';
+import { type App, type ShallowReactive } from 'vue';
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $route: ShallowReactive<Route>;
+        $router: RouterInstance;
+    }
+    interface GlobalComponents {
+    }
+}
+export declare function RouterVuePlugin(router: RouterInstance): (app: App) => void;

package/dist/plugin.mjs

@@ -0,0 +1,16 @@
+import { shallowReactive, unref } from "vue";
+import { RouterLink } from "./link.mjs";
+import { routerKey, routerViewLocationKey } from "./symbols.mjs";
+import { RouterView } from "./view.mjs";
+export function RouterVuePlugin(router) {
+  return function install(app) {
+    const route = shallowReactive(router.route);
+    router.route = route;
+    app.config.globalProperties.$router = router;
+    app.config.globalProperties.$route = router.route;
+    app.provide(routerKey, unref(router));
+    app.provide(routerViewLocationKey, unref(router.route));
+    app.component("router-view", RouterView);
+    app.component("router-link", RouterLink);
+  };
+}

package/dist/symbols.d.ts

@@ -0,0 +1,3 @@
+export declare const routerKey: unique symbol;
+export declare const routerViewLocationKey: unique symbol;
+export declare const routerViewDepthKey: unique symbol;

package/dist/symbols.mjs

@@ -0,0 +1,3 @@
+export const routerKey = Symbol("routerViewLocation");
+export const routerViewLocationKey = Symbol("routerViewLocation");
+export const routerViewDepthKey = Symbol("routerViewDepth");

package/dist/use.d.ts

@@ -0,0 +1,4 @@
+import type { Route, RouterInstance } from '@esmx/router';
+export declare function throwNoCurrentInstance(method: string): void;
+export declare function useRouter(): RouterInstance;
+export declare function useRoute(): Route;

package/dist/use.mjs

@@ -0,0 +1,15 @@
+import { getCurrentInstance, inject } from "vue";
+import { routerKey, routerViewLocationKey } from "./symbols.mjs";
+export function throwNoCurrentInstance(method) {
+  if (!getCurrentInstance()) {
+    throw new Error(
+      `[router-vue]: Missing current instance. ${method}() must be called inside <script setup> or setup().`
+    );
+  }
+}
+export function useRouter() {
+  return inject(routerKey);
+}
+export function useRoute() {
+  return inject(routerViewLocationKey);
+}

package/dist/view.d.ts

@@ -0,0 +1,21 @@
+import type { Route } from '@esmx/router';
+import { type PropType } from 'vue';
+export declare const RouterView: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: PropType<string>;
+        default: string;
+    };
+    route: PropType<Route>;
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: PropType<string>;
+        default: string;
+    };
+    route: PropType<Route>;
+}>> & Readonly<{}>, {
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/view.mjs

@@ -0,0 +1,75 @@
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  inject,
+  provide,
+  shallowReactive
+} from "vue";
+import { routerViewDepthKey, routerViewLocationKey } from "./symbols.mjs";
+export const RouterView = defineComponent({
+  name: "RouterView",
+  inheritAttrs: true,
+  props: {
+    name: {
+      type: String,
+      default: "default"
+    },
+    route: Object
+  },
+  // Better compat for @vue/compat users
+  // https://github.com/vuejs/router/issues/1315
+  compatConfig: { MODE: 3 },
+  setup: (props, { attrs, slots }) => {
+    const instance = getCurrentInstance();
+    if (!instance) {
+      console.error("no current instance");
+      return;
+    }
+    const injectedRoute = inject(
+      routerViewLocationKey
+    );
+    const routeToDisplay = computed(
+      () => props.route || injectedRoute
+    );
+    const injectedDepth = inject(
+      routerViewDepthKey,
+      computed(() => 0)
+    );
+    const depth = computed(() => {
+      let initialDepth = injectedDepth.value;
+      const { matched } = routeToDisplay.value;
+      let matchedRoute;
+      while ((matchedRoute = matched[initialDepth]) && !(matchedRoute == null ? void 0 : matchedRoute.component)) {
+        initialDepth++;
+      }
+      return initialDepth;
+    });
+    provide(routerViewLocationKey, shallowReactive(routeToDisplay.value));
+    provide(
+      routerViewDepthKey,
+      computed(() => depth.value + 1)
+    );
+    return () => {
+      const matchRoute = routeToDisplay.value.matched[depth.value];
+      if (!matchRoute) {
+        return null;
+      }
+      const component = h(
+        matchRoute.component,
+        Object.assign({}, props, attrs)
+      );
+      return (
+        // pass the vnode to the slot as a prop.
+        // h and <component :is="..."> both accept vnodes
+        normalizeSlot(slots.default, { Component: component }) || component
+      );
+    };
+  }
+});
+function normalizeSlot(slot, data) {
+  if (!slot) return null;
+  const slotContent = slot(data);
+  return slotContent.length === 1 ? slotContent[0] : slotContent;
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+    "name": "@esmx/router-vue",
+    "template": "library",
+    "scripts": {
+        "lint:js": "biome check --write --no-errors-on-unmatched",
+        "lint:css": "stylelint '**/*.{css,vue}' --fix --aei",
+        "lint:type": "tsc --noEmit",
+        "test": "vitest run --pass-with-no-tests",
+        "coverage": "vitest run --coverage --pass-with-no-tests",
+        "build": "unbuild"
+    },
+    "contributors": [
+        {
+            "name": "lzxb",
+            "url": "https://github.com/lzxb"
+        },
+        {
+            "name": "RockShi1994",
+            "url": "https://github.com/RockShi1994"
+        },
+        {
+            "name": "jerrychan7",
+            "url": "https://github.com/jerrychan7"
+        },
+        {
+            "name": "wesloong",
+            "url": "https://github.com/wesloong"
+        }
+    ],
+    "peerDependencies": {
+        "vue": "^3.0.0"
+    },
+    "dependencies": {
+        "@esmx/router": "3.0.0-rc.12"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "1.9.4",
+        "@esmx/lint": "3.0.0-rc.12",
+        "@gez/lint": "3.0.0-rc.9",
+        "@types/node": "22.13.10",
+        "@vitest/coverage-v8": "3.0.8",
+        "@vue/runtime-core": "^3.4.27",
+        "@vue/runtime-dom": "^3.4.27",
+        "stylelint": "16.15.0",
+        "typescript": "5.8.2",
+        "unbuild": "2.0.0",
+        "vitest": "3.0.8",
+        "vue": "^3.4.27"
+    },
+    "version": "3.0.0-rc.12",
+    "type": "module",
+    "private": false,
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "module": "dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "lib",
+        "src",
+        "dist",
+        "*.mjs",
+        "template",
+        "public"
+    ],
+    "gitHead": "7d2c2fc4fe2cc98ebdbc12560f19637ca04398e5"
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { RouterVuePlugin } from './plugin';
+export { useRouter, useRoute } from './use';
+export { RouterLink } from './link';
+export { RouterView } from './view';

package/src/link.ts

@@ -0,0 +1,177 @@
+import {
+    type RouteRecord,
+    type RouterRawLocation,
+    isEqualRoute,
+    isSameRoute
+} from '@esmx/router';
+import { type PropType, defineComponent, h } from 'vue';
+
+import { useRoute, useRouter } from './use';
+
+export interface RouterLinkProps {
+    /**
+     * 前往的路由路径
+     */
+    to: RouterRawLocation;
+
+    /**
+     * 节点使用的标签名
+     * @default 'a'
+     */
+    tag: string;
+
+    /**
+     * 调用 router.replace 以替换 router.push。
+     * @default false
+     */
+    replace: boolean;
+
+    /**
+     * 路径激活匹配规则
+     * @example include => 路径包含即激活.
+     * 如: 当前路由为/en/news/list  此时router-link 的路径为 /en/news 也会激活
+     * @example route => 路由匹配才会激活,需要匹配的路由树一致.
+     * 如: 当前路由为/en/news/list/123  此时router-link 的路径为 /en/news/list 也会激活
+     * @example exact => 路径全匹配才会激活，不仅需要匹配路由树一致，还需要参数匹配才会激活.
+     * 如: 当前路由为/en/news/list/123  此时router-link 的路径为 /en/news/list/123 才会激活，如果配置的路径为/en/news/list/123456 也不会激活
+     * @default 'include'
+     */
+    exact: 'include' | 'route' | 'exact';
+
+    /**
+     * 是否为相对路径
+     * 按照 Hanson 要求目前都是绝对路径，因此废弃此属性
+     * @default false
+     */
+    // append?: boolean;
+
+    /**
+     * 路由激活时的class
+     * @default 'router-link-active'
+     */
+    activeClass: string;
+
+    /**
+     * 哪些事件触发路由跳转
+     * @default 'click'
+     */
+    event: string | string[];
+}
+
+export const RouterLink = defineComponent({
+    props: {
+        to: {
+            type: [String, Object] as PropType<RouterLinkProps['to']>,
+            required: true
+        },
+        tag: {
+            type: String as PropType<RouterLinkProps['tag']>,
+            default: 'a'
+        },
+        replace: {
+            type: Boolean as PropType<RouterLinkProps['replace']>,
+            default: false
+        },
+        exact: {
+            type: String as PropType<RouterLinkProps['exact']>,
+            default: 'include'
+        },
+        // append: {
+        //     type: Boolean as PropType<boolean>,
+        //     default: false
+        // },
+        activeClass: {
+            type: String as PropType<RouterLinkProps['activeClass']>,
+            default: 'router-link-active'
+        },
+        event: {
+            type: String as PropType<RouterLinkProps['event']>,
+            default: 'click'
+        }
+    },
+    render(props: RouterLinkProps) {
+        const { to, tag, replace, exact, activeClass, event } = props;
+        const router = useRouter();
+        const current = useRoute();
+        const resolveRoute = router.resolve(to);
+
+        /* 匹配函数 */
+        let compare: (current: RouteRecord, route: RouteRecord) => Boolean;
+        switch (exact) {
+            /* 路由级匹配 */
+            case 'route':
+                compare = isSameRoute;
+                break;
+
+            /* 全匹配 */
+            case 'exact':
+                compare = isEqualRoute;
+                break;
+
+            /* 是否包含 */
+            case 'include':
+            default:
+                compare = (current: RouteRecord, route: RouteRecord) => {
+                    return current.fullPath.startsWith(route.fullPath);
+                };
+                break;
+        }
+
+        /* 根据路由是否匹配获取高亮 */
+        const active = compare(current, resolveRoute);
+
+        /* 事件处理函数 */
+        const handler = (e: MouseEvent) => {
+            if (guardEvent(e)) {
+                router[replace ? 'replace' : 'push'](to);
+            }
+        };
+
+        /* 可触发事件 map */
+        const on: Record<string, Function | Function[]> = {};
+        const eventTypeList = getEventTypeList(event);
+        eventTypeList.forEach((eventName) => {
+            on[`on${eventName.toLocaleLowerCase()}`] = handler;
+        });
+
+        return h(
+            tag,
+            {
+                class: ['router-link', active ? [activeClass] : ''],
+                href: resolveRoute.fullPath,
+                ...on
+            },
+            this.$slots
+        );
+    }
+});
+
+function getEventTypeList(eventType: string | string[]): string[] {
+    if (eventType instanceof Array) {
+        if (eventType.length > 0) {
+            return eventType;
+        }
+        return ['click'];
+    }
+    return [eventType || 'click'];
+}
+
+function guardEvent(e: MouseEvent) {
+    // don't redirect with control keys
+    if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+    // don't redirect when preventDefault called
+    if (e.defaultPrevented) return;
+    // don't redirect on right click
+    if (e.button !== undefined && e.button !== 0) return;
+    // don't redirect if `target="_blank"`
+    // @ts-expect-error getAttribute does exist
+    if (e.currentTarget?.getAttribute) {
+        // @ts-expect-error getAttribute exists
+        const target = e.currentTarget.getAttribute('target');
+        if (/\b_blank\b/i.test(target)) return;
+    }
+    // this may be a Weex event which doesn't have this method
+    if (e.preventDefault) e.preventDefault();
+
+    return true;
+}

package/src/plugin.ts

@@ -0,0 +1,36 @@
+import type { Route, RouterInstance } from '@esmx/router';
+import { type App, type ShallowReactive, shallowReactive, unref } from 'vue';
+
+import { RouterLink } from './link';
+import { routerKey, routerViewLocationKey } from './symbols';
+import { RouterView } from './view';
+
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        // $route: Route;
+        $route: ShallowReactive<Route>;
+        $router: RouterInstance;
+    }
+
+    interface GlobalComponents {
+        // RouterView:
+        // RouterLink:
+    }
+}
+
+export function RouterVuePlugin(router: RouterInstance) {
+    return function install(app: App) {
+        const route = shallowReactive(router.route);
+        router.route = route;
+
+        app.config.globalProperties.$router = router;
+        app.config.globalProperties.$route = router.route;
+
+        app.provide(routerKey, unref(router));
+        app.provide(routerViewLocationKey, unref(router.route));
+
+        // 注册组件
+        app.component('router-view', RouterView);
+        app.component('router-link', RouterLink);
+    };
+}

package/src/symbols.ts

@@ -0,0 +1,8 @@
+/* router key */
+export const routerKey = Symbol('routerViewLocation');
+
+/* router location key */
+export const routerViewLocationKey = Symbol('routerViewLocation');
+
+/* router depth key */
+export const routerViewDepthKey = Symbol('routerViewDepth');

package/src/use.ts

@@ -0,0 +1,20 @@
+import type { Route, RouterInstance } from '@esmx/router';
+import { getCurrentInstance, inject } from 'vue';
+
+import { routerKey, routerViewLocationKey } from './symbols';
+
+export function throwNoCurrentInstance(method: string) {
+    if (!getCurrentInstance()) {
+        throw new Error(
+            `[router-vue]: Missing current instance. ${method}() must be called inside <script setup> or setup().`
+        );
+    }
+}
+
+export function useRouter(): RouterInstance {
+    return inject(routerKey)!;
+}
+
+export function useRoute(): Route {
+    return inject(routerViewLocationKey)!;
+}

package/src/view.ts

@@ -0,0 +1,95 @@
+import type { Route, RouteConfig } from '@esmx/router';
+import {
+    type ComputedRef,
+    type PropType,
+    type ShallowReactive,
+    type Slot,
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    h,
+    inject,
+    provide,
+    shallowReactive
+} from 'vue';
+
+import { routerViewDepthKey, routerViewLocationKey } from './symbols';
+
+export const RouterView = defineComponent({
+    name: 'RouterView',
+    inheritAttrs: true,
+    props: {
+        name: {
+            type: String as PropType<string>,
+            default: 'default'
+        },
+        route: Object as PropType<Route>
+    },
+
+    // Better compat for @vue/compat users
+    // https://github.com/vuejs/router/issues/1315
+    compatConfig: { MODE: 3 },
+
+    setup: (props, { attrs, slots }) => {
+        const instance = getCurrentInstance();
+        if (!instance) {
+            console.error('no current instance');
+            return;
+        }
+
+        const injectedRoute = inject<ShallowReactive<Route>>(
+            routerViewLocationKey
+        )!;
+
+        const routeToDisplay = computed<Route>(
+            () => props.route || injectedRoute
+        );
+        const injectedDepth = inject<ComputedRef<number>>(
+            routerViewDepthKey,
+            computed(() => 0)
+        );
+
+        const depth = computed<number>(() => {
+            let initialDepth = injectedDepth.value;
+            const { matched } = routeToDisplay.value;
+            let matchedRoute: RouteConfig | undefined;
+            while (
+                (matchedRoute = matched[initialDepth]) &&
+                !matchedRoute?.component
+            ) {
+                initialDepth++;
+            }
+            return initialDepth;
+        });
+
+        provide(routerViewLocationKey, shallowReactive(routeToDisplay.value));
+        provide(
+            routerViewDepthKey,
+            computed(() => depth.value + 1)
+        );
+
+        return () => {
+            const matchRoute = routeToDisplay.value.matched[depth.value];
+            if (!matchRoute) {
+                return null;
+            }
+
+            const component = h(
+                matchRoute.component,
+                Object.assign({}, props, attrs)
+            );
+            return (
+                // pass the vnode to the slot as a prop.
+                // h and <component :is="..."> both accept vnodes
+                normalizeSlot(slots.default, { Component: component }) ||
+                component
+            );
+        };
+    }
+});
+
+function normalizeSlot(slot: Slot | undefined, data: any) {
+    if (!slot) return null;
+    const slotContent = slot(data);
+    return slotContent.length === 1 ? slotContent[0] : slotContent;
+}