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

package/src/util.test.ts

@@ -0,0 +1,418 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { beforeEach, describe, expect, it } from 'vitest';
+import { version } from 'vue';
+import {
+    createSymbolProperty,
+    isESModule,
+    isVue3,
+    resolveComponent
+} from './util';
+
+describe('util.ts - Utility Functions', () => {
+    describe('isVue3', () => {
+        it('should correctly identify Vue 3', () => {
+            // Since we're testing in a Vue 3 environment, isVue3 should be true
+            expect(isVue3).toBe(version.startsWith('3.'));
+            expect(typeof isVue3).toBe('boolean');
+        });
+
+        it('should be consistent with Vue version check', () => {
+            // Verify the logic is correct
+            const expectedResult = version.startsWith('3.');
+            expect(isVue3).toBe(expectedResult);
+        });
+    });
+
+    describe('createSymbolProperty', () => {
+        let testSymbol: symbol;
+        let symbolProperty: ReturnType<typeof createSymbolProperty>;
+        let testInstance: Record<string | symbol, unknown>;
+
+        beforeEach(() => {
+            testSymbol = Symbol('test-symbol');
+            symbolProperty = createSymbolProperty<string>(testSymbol);
+            testInstance = {};
+        });
+
+        describe('set method', () => {
+            it('should set value using symbol as key', () => {
+                const testValue = 'test-value';
+
+                symbolProperty.set(testInstance, testValue);
+
+                expect(testInstance[testSymbol]).toBe(testValue);
+            });
+
+            it('should handle different value types', () => {
+                const stringValue = 'string-value';
+                const numberValue = 42;
+                const objectValue = { key: 'value' };
+                const arrayValue = [1, 2, 3];
+
+                const stringProperty = createSymbolProperty<string>(
+                    Symbol('string')
+                );
+                const numberProperty = createSymbolProperty<number>(
+                    Symbol('number')
+                );
+                const objectProperty = createSymbolProperty<object>(
+                    Symbol('object')
+                );
+                const arrayProperty = createSymbolProperty<number[]>(
+                    Symbol('array')
+                );
+
+                stringProperty.set(testInstance, stringValue);
+                numberProperty.set(testInstance, numberValue);
+                objectProperty.set(testInstance, objectValue);
+                arrayProperty.set(testInstance, arrayValue);
+
+                expect(stringProperty.get(testInstance)).toBe(stringValue);
+                expect(numberProperty.get(testInstance)).toBe(numberValue);
+                expect(objectProperty.get(testInstance)).toBe(objectValue);
+                expect(arrayProperty.get(testInstance)).toBe(arrayValue);
+            });
+
+            it('should overwrite existing value', () => {
+                const firstValue = 'first-value';
+                const secondValue = 'second-value';
+
+                symbolProperty.set(testInstance, firstValue);
+                expect(symbolProperty.get(testInstance)).toBe(firstValue);
+
+                symbolProperty.set(testInstance, secondValue);
+                expect(symbolProperty.get(testInstance)).toBe(secondValue);
+            });
+        });
+
+        describe('get method', () => {
+            it('should return undefined for non-existent symbol', () => {
+                const result = symbolProperty.get(testInstance);
+
+                expect(result).toBeUndefined();
+            });
+
+            it('should return correct value after setting', () => {
+                const testValue = 'retrieved-value';
+
+                symbolProperty.set(testInstance, testValue);
+                const result = symbolProperty.get(testInstance);
+
+                expect(result).toBe(testValue);
+            });
+
+            it('should return undefined after value is deleted', () => {
+                const testValue = 'temporary-value';
+
+                symbolProperty.set(testInstance, testValue);
+                delete testInstance[testSymbol];
+                const result = symbolProperty.get(testInstance);
+
+                expect(result).toBeUndefined();
+            });
+        });
+
+        describe('symbol isolation', () => {
+            it('should not interfere with different symbols', () => {
+                const symbol1 = Symbol('symbol1');
+                const symbol2 = Symbol('symbol2');
+                const property1 = createSymbolProperty<string>(symbol1);
+                const property2 = createSymbolProperty<string>(symbol2);
+
+                const value1 = 'value1';
+                const value2 = 'value2';
+
+                property1.set(testInstance, value1);
+                property2.set(testInstance, value2);
+
+                expect(property1.get(testInstance)).toBe(value1);
+                expect(property2.get(testInstance)).toBe(value2);
+                expect(property1.get(testInstance)).not.toBe(value2);
+                expect(property2.get(testInstance)).not.toBe(value1);
+            });
+
+            it('should work with multiple instances', () => {
+                const instance1 = {};
+                const instance2 = {};
+                const testValue1 = 'instance1-value';
+                const testValue2 = 'instance2-value';
+
+                symbolProperty.set(instance1, testValue1);
+                symbolProperty.set(instance2, testValue2);
+
+                expect(symbolProperty.get(instance1)).toBe(testValue1);
+                expect(symbolProperty.get(instance2)).toBe(testValue2);
+            });
+        });
+
+        describe('type safety', () => {
+            it('should maintain type information through generic', () => {
+                interface TestInterface {
+                    name: string;
+                    count: number;
+                }
+
+                const interfaceSymbol = Symbol('interface');
+                const interfaceProperty =
+                    createSymbolProperty<TestInterface>(interfaceSymbol);
+                const testObject: TestInterface = { name: 'test', count: 5 };
+
+                interfaceProperty.set(testInstance, testObject);
+                const result = interfaceProperty.get(testInstance);
+
+                expect(result).toEqual(testObject);
+                expect(result?.name).toBe('test');
+                expect(result?.count).toBe(5);
+            });
+        });
+    });
+
+    describe('isESModule', () => {
+        describe('should return true for ES modules', () => {
+            it('should identify module with __esModule property', () => {
+                const esModule = { __esModule: true };
+
+                expect(isESModule(esModule)).toBe(true);
+            });
+
+            it('should identify module with Symbol.toStringTag', () => {
+                const esModule = { [Symbol.toStringTag]: 'Module' };
+
+                expect(isESModule(esModule)).toBe(true);
+            });
+
+            it('should identify module with both properties', () => {
+                const esModule = {
+                    __esModule: true,
+                    [Symbol.toStringTag]: 'Module'
+                };
+
+                expect(isESModule(esModule)).toBe(true);
+            });
+
+            it('should handle truthy __esModule values', () => {
+                const testCases = [
+                    { __esModule: true },
+                    { __esModule: 1 },
+                    { __esModule: 'true' },
+                    { __esModule: {} },
+                    { __esModule: [] }
+                ];
+
+                testCases.forEach((moduleObj) => {
+                    expect(isESModule(moduleObj)).toBe(true);
+                });
+            });
+        });
+
+        describe('should return false for non-ES modules', () => {
+            it('should return false for null', () => {
+                expect(isESModule(null)).toBe(false);
+            });
+
+            it('should return false for undefined', () => {
+                expect(isESModule(undefined)).toBe(false);
+            });
+
+            it('should return false for plain objects', () => {
+                const plainObject = { key: 'value' };
+
+                expect(isESModule(plainObject)).toBe(false);
+            });
+
+            it('should return false for objects with falsy __esModule', () => {
+                const testCases = [
+                    { __esModule: false },
+                    { __esModule: 0 },
+                    { __esModule: '' },
+                    { __esModule: null },
+                    { __esModule: undefined }
+                ];
+
+                testCases.forEach((moduleObj) => {
+                    expect(isESModule(moduleObj)).toBe(false);
+                });
+            });
+
+            it('should return false for objects with wrong Symbol.toStringTag', () => {
+                const testCases = [
+                    { [Symbol.toStringTag]: 'Object' },
+                    { [Symbol.toStringTag]: 'Function' },
+                    { [Symbol.toStringTag]: 'Array' },
+                    { [Symbol.toStringTag]: '' },
+                    { [Symbol.toStringTag]: null }
+                ];
+
+                testCases.forEach((moduleObj) => {
+                    expect(isESModule(moduleObj)).toBe(false);
+                });
+            });
+
+            it('should return false for primitive values', () => {
+                const primitives = ['string', 42, true, false, Symbol('test')];
+
+                primitives.forEach((primitive) => {
+                    expect(isESModule(primitive)).toBe(false);
+                });
+            });
+        });
+    });
+
+    describe('resolveComponent', () => {
+        describe('should return null for falsy inputs', () => {
+            const falsyValues = [null, undefined, false, 0, '', Number.NaN];
+
+            falsyValues.forEach((value) => {
+                it(`should return null for ${value}`, () => {
+                    expect(resolveComponent(value)).toBeNull();
+                });
+            });
+        });
+
+        describe('should handle ES modules', () => {
+            it('should return default export when available', () => {
+                const defaultComponent = { name: 'DefaultComponent' };
+                const esModule = {
+                    __esModule: true,
+                    default: defaultComponent,
+                    namedExport: { name: 'NamedComponent' }
+                };
+
+                const result = resolveComponent(esModule);
+
+                expect(result).toBe(defaultComponent);
+            });
+
+            it('should return the module itself when no default export', () => {
+                const esModule = {
+                    __esModule: true,
+                    namedExport: { name: 'NamedComponent' }
+                };
+
+                const result = resolveComponent(esModule);
+
+                expect(result).toBe(esModule);
+            });
+
+            it('should prefer default export over module when both exist', () => {
+                const defaultComponent = { name: 'DefaultComponent' };
+                const esModule = {
+                    __esModule: true,
+                    default: defaultComponent,
+                    name: 'ModuleComponent'
+                };
+
+                const result = resolveComponent(esModule);
+
+                expect(result).toBe(defaultComponent);
+                expect(result).not.toBe(esModule);
+            });
+
+            it('should handle modules with Symbol.toStringTag', () => {
+                const defaultComponent = { name: 'SymbolTagComponent' };
+                const esModule = {
+                    [Symbol.toStringTag]: 'Module',
+                    default: defaultComponent
+                };
+
+                const result = resolveComponent(esModule);
+
+                expect(result).toBe(defaultComponent);
+            });
+
+            it('should handle falsy default export', () => {
+                const falsyDefaults = [null, undefined, false, 0, ''];
+
+                falsyDefaults.forEach((falsyDefault) => {
+                    const esModule = {
+                        __esModule: true,
+                        default: falsyDefault,
+                        fallback: { name: 'FallbackComponent' }
+                    };
+
+                    const result = resolveComponent(esModule);
+
+                    // Should return the module itself when default is falsy
+                    expect(result).toBe(esModule);
+                });
+            });
+        });
+
+        describe('should handle non-ES modules', () => {
+            it('should return component directly for non-ES modules', () => {
+                const component = { name: 'RegularComponent' };
+
+                const result = resolveComponent(component);
+
+                expect(result).toBe(component);
+            });
+
+            it('should return function components directly', () => {
+                const functionComponent = () => ({ name: 'FunctionComponent' });
+
+                const result = resolveComponent(functionComponent);
+
+                expect(result).toBe(functionComponent);
+            });
+
+            it('should return class components directly', () => {
+                class ClassComponent {
+                    name = 'ClassComponent';
+                }
+
+                const result = resolveComponent(ClassComponent);
+
+                expect(result).toBe(ClassComponent);
+            });
+        });
+
+        describe('edge cases', () => {
+            it('should handle circular references in modules', () => {
+                const esModule: Record<string, unknown> = {
+                    __esModule: true
+                };
+                esModule.default = esModule; // Circular reference
+
+                const result = resolveComponent(esModule);
+
+                expect(result).toBe(esModule);
+            });
+
+            it('should handle deeply nested default exports', () => {
+                const actualComponent = { name: 'DeepComponent' };
+                const esModule = {
+                    __esModule: true,
+                    default: {
+                        default: {
+                            default: actualComponent
+                        }
+                    }
+                };
+
+                const result = resolveComponent(esModule);
+
+                // Should only resolve one level of default
+                expect(result).toEqual({
+                    default: {
+                        default: actualComponent
+                    }
+                });
+            });
+
+            it('should handle modules with both __esModule and Symbol.toStringTag', () => {
+                const defaultComponent = { name: 'BothPropertiesComponent' };
+                const esModule = {
+                    __esModule: true,
+                    [Symbol.toStringTag]: 'Module',
+                    default: defaultComponent
+                };
+
+                const result = resolveComponent(esModule);
+
+                expect(result).toBe(defaultComponent);
+            });
+        });
+    });
+});

package/src/util.ts

@@ -0,0 +1,32 @@
+import { version } from 'vue';
+
+export const isVue3 = version.startsWith('3.');
+
+export function createSymbolProperty<T>(symbol: symbol) {
+    return {
+        set(instance: any, value: T): void {
+            instance[symbol] = value;
+        },
+        get(instance: any): T | undefined {
+            return instance[symbol];
+        }
+    } as const;
+}
+
+export function isESModule(obj: unknown): obj is Record<string | symbol, any> {
+    if (!obj || typeof obj !== 'object') return false;
+    const module = obj as Record<string | symbol, any>;
+    return (
+        Boolean(module.__esModule) || module[Symbol.toStringTag] === 'Module'
+    );
+}
+
+export function resolveComponent(component: unknown): unknown {
+    if (!component) return null;
+
+    if (isESModule(component)) {
+        return component.default || component;
+    }
+
+    return component;
+}

package/src/vue2.ts

@@ -0,0 +1,16 @@
+import type { Route, Router } from '@esmx/router';
+import type Vue from 'vue2';
+
+// @ts-ignore
+declare module 'vue/types/vue' {
+    interface Vue {
+        readonly $router: Router;
+        readonly $route: Route;
+    }
+}
+declare module 'vue2/types/vue' {
+    interface Vue {
+        readonly $router: Router;
+        readonly $route: Route;
+    }
+}

package/src/vue3.ts

@@ -0,0 +1,15 @@
+import type { Route, Router } from '@esmx/router';
+import type { RouterLink } from './router-link';
+import type { RouterView } from './router-view';
+
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        readonly $router: Router;
+        readonly $route: Route;
+    }
+
+    interface GlobalComponents {
+        RouterLink: typeof RouterLink;
+        RouterView: typeof RouterView;
+    }
+}

package/dist/link.d.ts

@@ -1,101 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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/symbols.d.ts

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

package/dist/symbols.mjs

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