refactor(projects): refactor simple-router

Author: Ohh-889

packages/simple-router/src/Component.tsx

@@ -0,0 +1,15 @@
+import { RouterProvider as Provider } from 'react-router-dom';
+import { RouterContext } from './hooks/useRouter';
+
+const RouterProvider = ({ router, fallback }: { router: any; fallback?: React.ReactNode }) => {
+  return (
+    <RouterContext.Provider value={router}>
+      <Provider
+        fallbackElement={fallback}
+        router={router.reactRouter}
+      />
+    </RouterContext.Provider>
+  );
+};
+
+export default RouterProvider;

packages/simple-router/src/context.ts

@@ -0,0 +1,110 @@
+import type { RouteLocationNamedRaw, RouteLocationNormalizedLoaded } from './types';
+
+/**
+ * Flags so we can combine them when checking for multiple errors. This is the internal version of
+ * {@link NavigationFailureType}.
+ *
+ * @internal
+ */
+export enum ErrorTypes {
+  // they must be literals to be used as values, so we can't write
+  // 1 << 2
+  MATCHER_NOT_FOUND = 1,
+  NAVIGATION_GUARD_REDIRECT = 2,
+  NAVIGATION_ABORTED = 4,
+  NAVIGATION_CANCELLED = 8,
+  NAVIGATION_DUPLICATED = 16
+}
+
+export interface MatcherError extends Error {
+  type: ErrorTypes.MATCHER_NOT_FOUND;
+  location: RouteLocationNamedRaw;
+  currentLocation?: RouteLocationNormalizedLoaded;
+}
+
+/**
+ * Internal error used to detect a redirection.
+ *
+ * @internal
+ */
+export interface NavigationRedirectError extends Omit<NavigationFailure, 'to' | 'type'> {
+  type: ErrorTypes.NAVIGATION_GUARD_REDIRECT;
+  to: RouteLocationNormalizedLoaded;
+}
+
+// Possible internal errors
+type RouterError = NavigationFailure | NavigationRedirectError | MatcherError;
+
+/** Extended Error that contains extra information regarding a failed navigation. */
+export interface NavigationFailure extends Error {
+  /** Type of the navigation. One of {@link NavigationFailureType} */
+  type: ErrorTypes.NAVIGATION_CANCELLED | ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_DUPLICATED;
+  /** Route location we were navigating from */
+  from: RouteLocationNormalizedLoaded;
+  /** Route location we were navigating to */
+  to: RouteLocationNormalizedLoaded;
+}
+
+// DEV only debug messages
+const ErrorTypeMessages = {
+  [ErrorTypes.MATCHER_NOT_FOUND]({ location, currentLocation }: MatcherError) {
+    return `No match for\n ${JSON.stringify(location)}${
+      currentLocation ? `\nwhile being at\n${JSON.stringify(currentLocation)}` : ''
+    }`;
+  },
+  [ErrorTypes.NAVIGATION_GUARD_REDIRECT]({ from, to }: NavigationRedirectError) {
+    return `Redirected from "${from.fullPath}" to "${stringifyRoute(to)}" via a navigation guard.`;
+  },
+  [ErrorTypes.NAVIGATION_ABORTED]({ from, to }: NavigationFailure) {
+    return `Navigation aborted from "${from.fullPath}" to "${to.fullPath}" via a navigation guard.`;
+  },
+  [ErrorTypes.NAVIGATION_CANCELLED]({ from, to }: NavigationFailure) {
+    return `Navigation cancelled from "${from.fullPath}" to "${to.fullPath}" with a new navigation.`;
+  },
+  [ErrorTypes.NAVIGATION_DUPLICATED]({ from }: NavigationFailure) {
+    return `Avoided redundant navigation to current location: "${from.fullPath}".`;
+  }
+};
+
+const NavigationFailureSymbol = Symbol(import.meta.env.MODE === 'development' ? 'navigation failure' : '');
+
+/**
+ * Creates a typed NavigationFailure object.
+ *
+ * @param type - NavigationFailureType
+ * @param params - { from, to }
+ * @internal
+ */
+export function createRouterError<E extends RouterError>(type: E['type'], params: Omit<E, 'type' | keyof Error>): E {
+  // keep full error messages in cjs versions
+  if (import.meta.env.MODE === 'development') {
+    return Object.assign(
+      new Error(ErrorTypeMessages[type](params as any)),
+      {
+        type,
+        [NavigationFailureSymbol]: true
+      } as { type: typeof type },
+      params
+    ) as E;
+  }
+  return Object.assign(
+    new Error('Route not found'),
+    {
+      type,
+      [NavigationFailureSymbol]: true
+    } as { type: typeof type },
+    params
+  ) as E;
+}
+
+const propertiesToLog = ['query', 'hash'] as const;
+
+function stringifyRoute(to: RouteLocationNormalizedLoaded): string {
+  if (typeof to === 'string') return to;
+  if (to.path !== null) return to.path;
+  const location = {} as Record<string, unknown>;
+  for (const key of propertiesToLog) {
+    if (key in to) location[key] = to[key];
+  }
+  return JSON.stringify(location, null, 2);
+}

packages/simple-router/src/error.ts

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

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

@@ -1,16 +1,12 @@
-import CreateRouter from './router';
-
+import { createRouter } from './router';
 import { useRouter } from './hooks/useRouter';
+import RouterProvider from './Component';
 import type { RouteRecordNormalized } from './matcher/types';
 
-export default CreateRouter;
-
-export { useRouter };
+export { useRouter, createRouter, RouterProvider };
 
 export type { RouteRecordNormalized };
 
-export type { CreateRouter as Router };
-
 export type {
   LocationQueryValueRaw,
   RouteLocationNamedRaw,

packages/simple-router/src/index.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import type { RouteLocationNormalizedLoaded } from './types/route';
+
+export const START_LOCATION_NORMALIZED: RouteLocationNormalizedLoaded = {
+  path: '/',
+  name: undefined,
+  query: {},
+  hash: '',
+  fullPath: '/',
+  matched: [],
+  meta: {},
+  state: null,
+  redirectedFrom: undefined
+};

packages/simple-router/src/location.ts

@@ -27,6 +27,7 @@ class CreateRouterMatcher {
     this.initializeRoutes();
     this.removeRoute = this.removeRoute.bind(this);
   }
+
   /** - Initializes the routes by adding each route from the initial routes array. */
   initializeRoutes() {
     this.initRoutes.forEach(route => this.addRoute(route));
@@ -87,7 +88,7 @@ class CreateRouterMatcher {
       // Avoid adding a record that doesn't display anything. This allows passing through records without a component to
       // not be reached and pass through the catch all route
 
-      if ((matcher.record.component && Object.keys(matcher.record.component).length) || matcher.record.name) {
+      if (matcher.record.name) {
         this.insertMatcher(matcher);
       }
     }
@@ -125,13 +126,13 @@ class CreateRouterMatcher {
   getRecordMatcher(name: string) {
     return this.matcherMap.get(name);
   }
+
   resolve(location: RouteLocationNamedRaw | Location, currentLocation: RouteLocationNamedRaw) {
     let matcher: RouteRecordRaw | undefined;
     let query: Record<string, any> = {};
     let path: string = '';
     let name: string | undefined;
     let fullPath: string = '';
-    let component: string | undefined;
 
     if ('name' in location) {
       matcher = this.matcherMap.get(location.name);
@@ -148,7 +149,6 @@ class CreateRouterMatcher {
 
       fullPath += queryParams ? `?${queryParams}` : '';
       path = matcher.record.path;
-      component = matcher.record.component;
     } else if (location.pathname) {
       // no need to resolve the path with the matcher as it was provided
       // this also allows the user to control the encoding
@@ -165,7 +165,6 @@ class CreateRouterMatcher {
       if (matcher) {
         name = matcher.record.name;
         fullPath = location.pathname + location.search;
-        component = matcher.record.component;
       }
       // location is a relative path
     } else {
@@ -186,13 +185,13 @@ class CreateRouterMatcher {
       matched.unshift(parentMatcher.record);
       parentMatcher = parentMatcher.parent;
     }
+
     return {
       fullPath,
-      state: location.state,
+      state: location?.state || null,
       name,
       path,
       hash: location.hash,
-      component,
       redirect: matcher.record.redirect,
       matched,
       query,

packages/simple-router/src/matcher/index.ts

@@ -41,14 +41,12 @@ export function normalizeRouteRecord(record: ElegantConstRoute): RouteRecordNorm
     redirect: record.redirect || (record.children && record.children[0].path),
     path: record.path || '',
     name: record.name,
-
     meta: record.meta || {},
     children:
       record.children?.map(child => {
         child.redirect ||= child.children && child.children[0].path;
         return child;
-      }) || [],
-    component: record.component
+      }) || []
   };
 }
 
@@ -67,6 +65,7 @@ export function checkChildMissingNameWithEmptyPath(mainNormalizedRecord: RouteRe
     );
   }
 }
+
 export function getQueryParams(search: string): LocationQuery {
   const params: LocationQuery = {};
   const queryParams = new URLSearchParams(search);

packages/simple-router/src/matcher/shared.ts

@@ -1,19 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import type { ElegantConstRoute } from '@ohh-889/react-auto-route';
 import type { _RouteRecordBase } from '../types';
 
 export interface RouteRecordNormalized {
   /** {@inheritDoc _RouteRecordBase.path} */
   path: _RouteRecordBase['path'];
-
   /** {@inheritDoc _RouteRecordBase.name} */
   name: _RouteRecordBase['name'];
-  /** {@inheritDoc RouteRecordMultipleViews.components} */
-  component: string | undefined;
+
   redirect?: string;
   /** Nested route records. */
   children: ElegantConstRoute[];
   /** {@inheritDoc _RouteRecordBase.meta} */
-
   meta: Exclude<_RouteRecordBase['meta'], void>;
 }