fix(packages): fix useRouter type

Author: Ohh-889

packages/simple-router/src/hooks/useRouter/index.ts

@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
+import type { Router } from '../../router';
 
-export const RouterContext = createContext<any>({});
+export const RouterContext = createContext<Router>({} as Router);
 export function useRouter() {
   const router = useContext(RouterContext);
   if (!router) {

packages/simple-router/src/index.ts

@@ -1,17 +1,13 @@
-import { createRouter } from './router';
 import { useRouter } from './hooks/useRouter';
 import RouterProvider from './Component';
 import type { RouteRecordNormalized } from './matcher/types';
 
-export { useRouter, createRouter, RouterProvider };
+export { useRouter, RouterProvider };
+
+export { createRouter } from './router';
+
+export type { Mode, Options, RouterOptions, Router } from './router';
 
 export type { RouteRecordNormalized };
 
-export type {
-  LocationQueryValueRaw,
-  RouteLocationNamedRaw,
-  AfterEach,
-  BeforeEach,
-  RouteLocationNormalizedLoaded,
-  Route
-} from './types';
+export * from './types';

packages/simple-router/src/router.ts

@@ -2,7 +2,7 @@ import { createBrowserRouter, createHashRouter, createMemoryRouter } from 'react
 import type { Location, RouteObject } from 'react-router-dom';
 import type { ElegantConstRoute } from '@ohh-889/react-auto-route';
 import type { BlockerFunction, RouterState } from '@remix-run/router';
-import type { RouteLocationNamedRaw, RouteLocationNormalizedLoaded } from './types';
+import type { AfterEach, BeforeEach, Init, RouteLocationNamedRaw, RouteLocationNormalizedLoaded } from './types';
 import CreateRouterMatcher from './matcher';
 import { cleanParams, findParentNames, getFullPath, removeElement } from './utils/auxi';
 import { START_LOCATION_NORMALIZED } from './location';
@@ -18,18 +18,18 @@ const historyCreatorMap = {
 
 type HistoryCreator = typeof historyCreatorMap;
 
-type Mode = keyof HistoryCreator;
+export type Mode = keyof HistoryCreator;
 
-type Options = Parameters<HistoryCreator[Mode]>[1];
+export type Options = Parameters<HistoryCreator[Mode]>[1];
 
 export interface RouterOptions {
   mode: Mode;
   initRoutes: ElegantConstRoute[];
   opt: Options;
   getReactRoutes: (route: ElegantConstRoute) => RouteObject;
-  init: () => Promise<void>;
-  afterEach: any;
-  beforeEach: any;
+  init: Init;
+  afterEach: AfterEach;
+  beforeEach: BeforeEach;
 }
 
 export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes, init, afterEach }: RouterOptions) {
@@ -43,13 +43,12 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
 
   let currentRoute = START_LOCATION_NORMALIZED;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let listeners: any;
-
-  reactRouter.subscribe(afterRouteChange);
+  let listeners: (() => void)[] = [];
 
   reactRouter.getBlocker('beforeGuard', onBeforeRouteChange);
 
+  reactRouter.subscribe(afterRouteChange);
+
   /**
    * Adds React routes to the router.
    *
@@ -91,8 +90,6 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
       return true;
     }
 
-    if (nextLocation.state === 'reload') return false;
-
     if (to.redirect) {
       if (to.redirect.startsWith('/')) {
         if (to.redirect === currentRoute.fullPath) {
@@ -107,10 +104,10 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
       }
     }
 
-    return beforeEach(to, currentRoute, next);
+    return beforeEach(to, currentRoute, blockerOrJump);
   }
 
-  function next(param?: boolean | string | Location | RouteLocationNamedRaw) {
+  function blockerOrJump(param?: undefined | null | boolean | string | Location | RouteLocationNamedRaw) {
     if (!param) return false;
     if (typeof param === 'string') {
       reactRouter.navigate(param);
@@ -207,10 +204,14 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
 
   async function initReady(): Promise<boolean> {
     return new Promise((resolved, reject) => {
-      init()
-        .then(() => {
-          reactRouter.initialize();
-          resolved(true);
+      init(resolve(reactRouter.state.location), blockerOrJump)
+        .then(res => {
+          if (!res) {
+            reactRouter.initialize();
+            resolved(true);
+          } else {
+            reject(new Error('init failed'));
+          }
         })
         .catch(e => {
           reject(e);
@@ -279,12 +280,13 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
   function resetRoute() {
     // Resets the route matcher so it can begin matching new routes again.
     matcher.resetMatcher();
+    reactRouter._internalSetRoutes(initReactRoutes);
   }
 
   function subscribe(listener: () => void) {
-    listeners = [listener];
+    listeners = [...listeners, listener];
     return () => {
-      listeners = [];
+      listeners = listeners.filter(l => l !== listener);
     };
   }
 
@@ -328,3 +330,5 @@ export function createRouter({ beforeEach, initRoutes, mode, opt, getReactRoutes
 
   return router;
 }
+
+export type Router = ReturnType<typeof createRouter>;

packages/simple-router/src/types/router.ts

@@ -1,9 +1,8 @@
 import type { ElegantConstRoute } from '@ohh-889/react-auto-route';
-import type { RouteObject } from 'react-router-dom';
+import type { Location, RouteObject } from 'react-router-dom';
 import type { Router as RemixRouter } from '@remix-run/router';
 import type { RouteRecordNormalized } from '../matcher/types';
 import type { RouteLocationNormalizedLoaded } from './route';
-
 export interface RouterOptions {
   initRoutes: ElegantConstRoute[];
   history: 'hash' | 'history' | 'memory';
@@ -36,9 +35,14 @@ export interface Router {
 export type BeforeEach = (
   to: RouteLocationNormalizedLoaded,
   from: RouteLocationNormalizedLoaded,
-  next: (param?: boolean | undefined | string) => boolean
+  next: (param?: boolean | undefined | null | string | Location | RouteLocationNamedRaw) => boolean
 ) => boolean;
 
+export type Init = (
+  current: RouteLocationNormalizedLoaded,
+  next: (param?: boolean | undefined | null | string | Location | RouteLocationNamedRaw) => boolean
+) => Promise<boolean>;
+
 export type AfterEach = (to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => void;
 
 export type HistoryStateArray = Array<HistoryStateValue>;

src/router/index.ts

@@ -1,12 +1,8 @@
 import type { ElegantConstRoute } from '@ohh-889/react-auto-route';
 import { createRouter } from '@sa/simple-router';
-import { localStg } from '@/utils/storage';
-import { store } from '@/store';
-import { initAuthRoute, initConstantRoute } from '@/store/slice/route';
-// import { initTabStore } from '@/store/slice/tab';
 import { layouts, pages } from './elegant/imports';
 import { transformElegantRouteToReactRoute } from './elegant/transform';
-import { afterEach, createRouteGuard } from './guard';
+import { afterEach, createRouteGuard, init } from './guard';
 import { builtinRoutes } from './routes/builtin';
 
 const { VITE_ROUTER_HISTORY_MODE = 'history', VITE_BASE_URL } = import.meta.env;
@@ -20,19 +16,6 @@ function getReactRoutes(route: ElegantConstRoute) {
   return transformElegantRouteToReactRoute(route, layouts, pages);
 }
 
-async function init() {
-  await store.dispatch(initConstantRoute());
-  const isLogin = Boolean(localStg.get('token'));
-  if (!isLogin) {
-    return;
-  }
-  await store.dispatch(initAuthRoute());
-}
-
-// function initBeforeRoute(allNames: string[]) {
-//   store.dispatch(initTabStore(allNames));
-// }
-
 export const router = createRouter({
   initRoutes: builtinRoutes,
   mode: VITE_ROUTER_HISTORY_MODE,