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

package/dist/index.test.mjs

@@ -0,0 +1,206 @@
+import { describe, expect, it } from "vitest";
+import * as RouterVueModule from "./index.mjs";
+describe("index.ts - Package Entry Point", () => {
+  describe("Composition API Exports", () => {
+    it("should export useRouter function", () => {
+      expect(RouterVueModule.useRouter).toBeDefined();
+      expect(typeof RouterVueModule.useRouter).toBe("function");
+    });
+    it("should export useRoute function", () => {
+      expect(RouterVueModule.useRoute).toBeDefined();
+      expect(typeof RouterVueModule.useRoute).toBe("function");
+    });
+    it("should export useProvideRouter function", () => {
+      expect(RouterVueModule.useProvideRouter).toBeDefined();
+      expect(typeof RouterVueModule.useProvideRouter).toBe("function");
+    });
+    it("should export useLink function", () => {
+      expect(RouterVueModule.useLink).toBeDefined();
+      expect(typeof RouterVueModule.useLink).toBe("function");
+    });
+  });
+  describe("Options API Exports", () => {
+    it("should export getRouter function", () => {
+      expect(RouterVueModule.getRouter).toBeDefined();
+      expect(typeof RouterVueModule.getRouter).toBe("function");
+    });
+    it("should export getRoute function", () => {
+      expect(RouterVueModule.getRoute).toBeDefined();
+      expect(typeof RouterVueModule.getRoute).toBe("function");
+    });
+  });
+  describe("Component Exports", () => {
+    it("should export RouterLink component", () => {
+      expect(RouterVueModule.RouterLink).toBeDefined();
+      expect(typeof RouterVueModule.RouterLink).toBe("object");
+      expect(RouterVueModule.RouterLink.name).toBe("RouterLink");
+      expect(typeof RouterVueModule.RouterLink.setup).toBe("function");
+    });
+    it("should export RouterView component", () => {
+      expect(RouterVueModule.RouterView).toBeDefined();
+      expect(typeof RouterVueModule.RouterView).toBe("object");
+      expect(RouterVueModule.RouterView.name).toBe("RouterView");
+      expect(typeof RouterVueModule.RouterView.setup).toBe("function");
+    });
+  });
+  describe("Plugin Exports", () => {
+    it("should export RouterPlugin", () => {
+      expect(RouterVueModule.RouterPlugin).toBeDefined();
+      expect(typeof RouterVueModule.RouterPlugin).toBe("object");
+      expect(typeof RouterVueModule.RouterPlugin.install).toBe(
+        "function"
+      );
+    });
+  });
+  describe("Export Completeness", () => {
+    it("should export all expected functions and components", () => {
+      const expectedExports = [
+        // Composition API
+        "useRouter",
+        "useRoute",
+        "useProvideRouter",
+        "useLink",
+        // Options API
+        "getRouter",
+        "getRoute",
+        // Components
+        "RouterLink",
+        "RouterView",
+        // Plugin
+        "RouterPlugin"
+      ];
+      expectedExports.forEach((exportName) => {
+        expect(RouterVueModule).toHaveProperty(exportName);
+        expect(
+          RouterVueModule[exportName]
+        ).toBeDefined();
+      });
+    });
+    it("should not export unexpected items", () => {
+      const actualExports = Object.keys(RouterVueModule);
+      const expectedExports = [
+        "useRouter",
+        "useRoute",
+        "useProvideRouter",
+        "useLink",
+        "getRouter",
+        "getRoute",
+        "RouterLink",
+        "RouterView",
+        "RouterPlugin"
+      ];
+      const unexpectedExports = actualExports.filter(
+        (exportName) => !expectedExports.includes(exportName)
+      );
+      expect(unexpectedExports).toEqual([]);
+    });
+  });
+  describe("Function Signatures", () => {
+    it("should have correct function signatures for Composition API", () => {
+      expect(() => {
+        RouterVueModule.useRouter();
+      }).toThrow("useRouter() can only be called during setup()");
+      expect(() => {
+        RouterVueModule.useRoute();
+      }).toThrow("useRoute() can only be called during setup()");
+      expect(() => {
+        RouterVueModule.useLink({
+          to: "/test",
+          type: "push",
+          exact: "include"
+        });
+      }).toThrow("useRouter() can only be called during setup()");
+    });
+    it("should have correct function signatures for Options API", () => {
+      expect(() => {
+        try {
+          RouterVueModule.getRouter({});
+        } catch (error) {
+          expect(error.message).toContain(
+            "Router context not found"
+          );
+        }
+      }).not.toThrow();
+      expect(() => {
+        try {
+          RouterVueModule.getRoute({});
+        } catch (error) {
+          expect(error.message).toContain(
+            "Router context not found"
+          );
+        }
+      }).not.toThrow();
+    });
+  });
+  describe("Component Properties", () => {
+    it("should have RouterLink with correct properties", () => {
+      const { RouterLink } = RouterVueModule;
+      expect(RouterLink.name).toBe("RouterLink");
+      expect(RouterLink.props).toBeDefined();
+      expect(RouterLink.setup).toBeDefined();
+      expect(RouterLink.props.to).toBeDefined();
+      expect(RouterLink.props.to.required).toBe(true);
+      expect(RouterLink.props.type.default).toBe("push");
+      expect(RouterLink.props.exact.default).toBe("include");
+      expect(RouterLink.props.tag.default).toBe("a");
+      expect(RouterLink.props.event.default).toBe("click");
+    });
+    it("should have RouterView with correct properties", () => {
+      const { RouterView } = RouterVueModule;
+      expect(RouterView.name).toBe("RouterView");
+      expect(RouterView.setup).toBeDefined();
+      expect(RouterView.props).toBeUndefined();
+    });
+  });
+  describe("Plugin Interface", () => {
+    it("should have RouterPlugin with install method", () => {
+      const { RouterPlugin } = RouterVueModule;
+      expect(RouterPlugin.install).toBeDefined();
+      expect(typeof RouterPlugin.install).toBe("function");
+      expect(() => {
+        RouterPlugin.install(null);
+      }).toThrow();
+    });
+  });
+  describe("Module Structure", () => {
+    it("should be a proper ES module", () => {
+      expect(typeof RouterVueModule).toBe("object");
+      expect(RouterVueModule).not.toBeNull();
+      expect("default" in RouterVueModule).toBe(false);
+    });
+    it("should have consistent export naming", () => {
+      const functionExports = [
+        "useRouter",
+        "useRoute",
+        "useProvideRouter",
+        "useLink",
+        "getRouter",
+        "getRoute"
+      ];
+      functionExports.forEach((exportName) => {
+        expect(exportName).toMatch(/^[a-z][a-zA-Z]*$/);
+      });
+      const componentExports = [
+        "RouterLink",
+        "RouterView",
+        "RouterPlugin"
+      ];
+      componentExports.forEach((exportName) => {
+        expect(exportName).toMatch(/^[A-Z][a-zA-Z]*$/);
+      });
+    });
+  });
+  describe("TypeScript Integration", () => {
+    it("should provide proper TypeScript types", () => {
+      expect(typeof RouterVueModule.useRouter).toBe("function");
+      expect(typeof RouterVueModule.useRoute).toBe("function");
+      expect(typeof RouterVueModule.getRouter).toBe("function");
+      expect(typeof RouterVueModule.getRoute).toBe("function");
+      expect(RouterVueModule.RouterLink).toHaveProperty("name");
+      expect(RouterVueModule.RouterLink).toHaveProperty("props");
+      expect(RouterVueModule.RouterLink).toHaveProperty("setup");
+      expect(RouterVueModule.RouterView).toHaveProperty("name");
+      expect(RouterVueModule.RouterView).toHaveProperty("setup");
+    });
+  });
+});

package/dist/plugin.d.ts

@@ -1,11 +1,61 @@
-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;
+/**
+ * Vue plugin for \@esmx/router integration.
+ * Registers RouterLink and RouterView components globally.
+ * Compatible with both Vue 2.7+ and Vue 3.
+ *
+ * @example
+ *
+ * Vue 3 installation
+ *
+ * ```typescript
+ * import { createApp } from 'vue';
+ * import { Router } from '@esmx/router';
+ * import { RouterPlugin, useProvideRouter } from '@esmx/router-vue';
+ *
+ * const routes = [
+ *   { path: '/', component: Home },
+ *   { path: '/about', component: About }
+ * ];
+ *
+ * const router = new Router({ routes });
+ * const app = createApp({
+ *   setup() {
+ *     useProvideRouter(router);
+ *   }
+ * });
+ *
+ * app.use(RouterPlugin);
+ * app.mount('#app');
+ * ```
+ *
+ * @example
+ *
+ * Vue 2 installation
+ *
+ * ```typescript
+ * import Vue from 'vue';
+ * import { Router } from '@esmx/router';
+ * import { RouterPlugin, useProvideRouter } from '@esmx/router-vue';
+ *
+ * const routes = [
+ *   { path: '/', component: Home },
+ *   { path: '/about', component: About }
+ * ];
+ *
+ * const router = new Router({ routes });
+ * Vue.use(RouterPlugin);
+ *
+ * new Vue({
+ *   setup() {
+ *     useProvideRouter(router);
+ *   }
+ * }).$mount('#app');
+ * ```
+ */
+export declare const RouterPlugin: {
+    /**
+     * Install the router plugin.
+     * @param app Vue application instance (Vue 3) or Vue constructor (Vue 2)
+     */
+    install(app: unknown): void;
+};

package/dist/plugin.mjs

@@ -1,16 +1,32 @@
-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);
-  };
-}
+import { RouterLink } from "./router-link.mjs";
+import { RouterView } from "./router-view.mjs";
+import { getRoute, getRouter } from "./use.mjs";
+import { isVue3 } from "./util.mjs";
+export const RouterPlugin = {
+  /**
+   * Install the router plugin.
+   * @param app Vue application instance (Vue 3) or Vue constructor (Vue 2)
+   */
+  install(app) {
+    var _a;
+    const vueApp = app;
+    const target = ((_a = vueApp.config) == null ? void 0 : _a.globalProperties) || vueApp.prototype;
+    if (!target) {
+      throw new Error("[@esmx/router-vue] Invalid Vue app instance");
+    }
+    Object.defineProperties(target, {
+      $router: {
+        get() {
+          return getRouter(isVue3 ? null : this);
+        }
+      },
+      $route: {
+        get() {
+          return getRoute(isVue3 ? null : this);
+        }
+      }
+    });
+    vueApp.component("RouterLink", RouterLink);
+    vueApp.component("RouterView", RouterView);
+  }
+};

package/dist/plugin.test.d.ts

@@ -0,0 +1 @@
+export {};