valyrian.js 7.2.12 → 8.0.1

package/lib/router/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable no-use-before-define */
 import {
   Component,
@@ -13,19 +14,19 @@ import {
   v
 } from "valyrian.js";
 
-interface Request {
+export interface Request {
   params: Record<string, any>;
   query: Record<string, any>;
   url: string;
   path: string;
   matches: string[];
   // eslint-disable-next-line no-unused-vars
-  redirect: (path: string, parentComponent?: Component | POJOComponent | VnodeComponentInterface) => false;
+  redirect: (path: string) => Promise<string | void>;
 }
 
-interface Middleware {
+export interface Middleware {
   // eslint-disable-next-line no-unused-vars
-  (req: Request, res?: any):
+  (req: Request, err?: any):
     | Promise<any | Component | POJOComponent | VnodeComponentInterface>
     | any
     | Component
@@ -35,39 +36,13 @@ interface Middleware {
 
 interface Middlewares extends Array<Middleware> {}
 
-interface Path {
-  method: string;
-  path: string;
-  middlewares: Middlewares;
-  params: string[];
-  regexp: RegExp;
-}
-
-interface RouterInterface {
-  paths: Path[];
-  container: Element | string | null;
-  query: Record<string, string | number>;
-  options: Record<string, any>;
-  url: string;
-  path: string;
-  params: Record<string, string | number | any>;
-  matches: string[];
-  pathPrefix: string;
-  // eslint-disable-next-line no-unused-vars
-  add(method: string, ...args: Middlewares): Router;
-  // eslint-disable-next-line no-unused-vars
-  use(...args: (string | Middleware | Router)[]): Router;
-
-  routes(): string[];
-  // eslint-disable-next-line no-unused-vars
-  go(path: string, parentComponent?: Component | POJOComponent | VnodeComponentInterface): Promise<string | void>;
-}
-
 interface RedirectFunction {
-  // eslint-disable-next-line no-unused-vars
   (
+    // eslint-disable-next-line no-unused-vars
     path: string,
+    // eslint-disable-next-line no-unused-vars
     parentComponent?: Component | POJOComponent | VnodeComponentInterface,
+    // eslint-disable-next-line no-unused-vars
     preventPushState?: boolean
   ): Promise<string | void>;
 }
@@ -88,132 +63,123 @@ function getPathWithoutLastSlash(path: string) {
   return pathWithoutLastSlash;
 }
 
-const addPath = ({
-  router,
-  method,
-  path,
-  middlewares
-}: {
-  router: Router;
-  method: string;
-  path: string;
-  middlewares: Middleware[];
-}): void => {
-  if (!method || !path || !Array.isArray(middlewares) || middlewares.length === 0) {
-    throw new Error(`Invalid route input: ${method} ${path} ${middlewares}`);
-  }
-
-  // Trim trailing slashes from the path
-  const realpath = path.replace(/(\S)(\/+)$/, "$1");
-
-  // Find the express-like params in the path
-  const params = (realpath.match(/:(\w+)?/gi) || [])
-    // Set the names of the params found
-    .map((param) => param.slice(1));
-
-  // Generate a regular expression to match the path
-  const regexpPath = "^" + realpath.replace(/:(\w+)/gi, "([^\\/\\s]+)") + "$";
-
-  router.paths.push({
-    method,
-    path: realpath,
-    middlewares: flat(middlewares),
-    params,
-    regexp: new RegExp(regexpPath, "i")
-  });
-};
-
 // Parse a query string into an object
-function parseQuery(queryParts?: string): Record<string, string> {
-  // Split the query string into an array of name-value pairs
+function parseQuery(queryParts?: string): Record<string, any> {
   const parts = queryParts ? queryParts.split("&") : [];
-  const query: Record<string, string> = {};
+  const query: Record<string, any> = {};
 
-  // Iterate over the name-value pairs and add them to the query object
   for (const nameValue of parts) {
     const [name, value] = nameValue.split("=", 2);
-    query[name] = value || "";
+    query[name] =
+      isNaN(Number(value)) === false ? Number(value) : value === "true" ? true : value === "false" ? false : value;
   }
 
   return query;
 }
 
-// Search for middlewares that match a given path
-function searchMiddlewares(router: RouterInterface, path: string): Middlewares {
-  const middlewares: Middlewares = [];
-  const params: Record<string, any> = {};
-  const matches = [];
+interface RouteNode {
+  segment: string;
+  children: Map<string, RouteNode>;
+  middlewares?: Middlewares;
+  paramKey?: string;
+  isDynamic: boolean;
+}
+
+class RouteTree {
+  root: RouteNode = { segment: "", children: new Map(), isDynamic: false };
 
-  // Search for middlewares
-  for (const item of router.paths) {
-    const match = item.regexp.exec(path);
+  addRoute(path: string, middlewares: Middlewares) {
+    const segments = path === "/" ? [path] : path.split("/").filter(Boolean); // Divide the path into segments
+    let currentNode = this.root;
 
-    // If we found middlewares
-    if (Array.isArray(match)) {
-      middlewares.push(...item.middlewares);
-      match.shift();
+    for (const segment of segments) {
+      const isDynamic = segment.startsWith(":");
+      const key = isDynamic ? ":" : segment; // If the segment is dynamic, use ":" as key
 
-      // Parse params
-      for (const [index, key] of item.params.entries()) {
-        params[key] = match[index];
+      if (!currentNode.children.has(key)) {
+        currentNode.children.set(key, {
+          segment: segment,
+          children: new Map(),
+          isDynamic: isDynamic,
+          paramKey: isDynamic ? segment.slice(1) : undefined
+        });
       }
 
-      // Add remaining matches to the array
-      matches.push(...match);
+      currentNode = currentNode.children.get(key)!;
+    }
+
+    currentNode.middlewares = middlewares; // Assign the middlewares to the last node
+  }
+
+  // Search for a route in the tree
+  // eslint-disable-next-line sonarjs/cognitive-complexity
+  findRoute(path: string): { middlewares?: Middlewares; params: Record<string, string> } | null {
+    const pathWithoutLastSlash = getPathWithoutLastSlash(path);
+    const segments =
+      pathWithoutLastSlash === "/" ? [pathWithoutLastSlash] : pathWithoutLastSlash.split("/").filter(Boolean);
+    let currentNode: RouteNode | null = this.root;
+    const params: Record<string, string> = {};
+
+    const wildcardMiddlewares: Middlewares = []; // Middlewares for wildcard routes
+    const segmentsLength = segments.length;
 
-      if (item.method === "add") {
-        router.path = getPathWithoutPrefix(item.path, router.pathPrefix);
+    for (let i = 0; i < segmentsLength; i++) {
+      if (!currentNode) {
         break;
       }
-    }
-  }
 
-  router.params = params;
-  router.matches = matches;
+      const segment = segments[i];
 
-  return middlewares;
-}
+      let found = false;
 
-async function searchComponent(
-  router: RouterInterface,
-  middlewares: Middlewares
-): Promise<Component | VnodeComponentInterface | false | void> {
-  // Define request object with default values
-  const request: Request = {
-    params: router.params,
-    query: router.query,
-    url: router.url,
-    path: router.path,
-    matches: router.matches,
-    redirect: (path: string, parentComponent?: Component | POJOComponent | VnodeComponentInterface) => {
-      router.go(path, parentComponent);
-      // Return false to stop the middleware chain
-      return false;
-    }
-  };
+      for (const [key, child] of currentNode.children) {
+        if (key === segment) {
+          currentNode = child;
+          found = true;
+          break;
+        }
 
-  // Initialize response variable
-  let response;
+        if (segment !== ".*" && key === ":") {
+          currentNode = child;
+          params[child.paramKey!] = segment;
+          found = true;
+          break;
+        }
 
-  // Iterate through middlewares
-  for (const middleware of middlewares) {
-    // Invoke middleware and update response
-    response = await middleware(request, response);
+        if (key === ".*" && !found) {
+          wildcardMiddlewares.push(...(child.middlewares || []));
+        }
+      }
 
-    // Return response if it's a valid component
-    if (response !== undefined && (isComponent(response) || isVnodeComponent(response))) {
-      return response;
+      if (!found) {
+        if (currentNode.children.has(".*")) {
+          return { middlewares: wildcardMiddlewares, params };
+        }
+        return null;
+      }
     }
 
-    // Return false if response is explicitly false to stop the middleware chain
-    if (response === false) {
-      return false;
+    // Add the wildcard middlewares to the current node middlewares
+    const allMiddlewares = [...wildcardMiddlewares, ...(currentNode.middlewares || [])];
+
+    // If there are no middlewares, return null
+    if (allMiddlewares.length === 0) {
+      return null;
     }
+
+    // If there are middlewares, return them
+    return { middlewares: allMiddlewares, params };
   }
 }
 
-export class Router implements RouterInterface {
-  paths: Path[] = [];
+export const RouterError = class RouterError extends Error {
+  status: number | undefined = 500;
+};
+
+type RouteParams = string | Middleware | Router | (string | Middleware | Router | RouteParams)[];
+
+export class Router {
+  private routeTree = new RouteTree();
   container: Element | string | null = null;
   query: Record<string, string | number> = {};
   options: Record<string, any> = {};
@@ -223,54 +189,82 @@ export class Router implements RouterInterface {
   matches: string[] = [];
   pathPrefix: string = "";
 
+  private errorHandlers: Map<number | string | Error | "generic", Middlewares> = new Map();
+
   constructor(pathPrefix: string = "") {
     this.pathPrefix = pathPrefix;
   }
 
-  add(path: string, ...middlewares: Middlewares): Router {
-    const pathWithoutLastSlash = getPathWithoutLastSlash(`${this.pathPrefix}${path}`);
-    addPath({ router: this, method: "add", path: pathWithoutLastSlash, middlewares });
-    return this;
-  }
-
-  use(...middlewares: Middlewares | Router[] | string[]): Router {
+  add(...args: RouteParams[]): Router {
+    const flatArgs = flat(args);
     const path = getPathWithoutLastSlash(
-      `${this.pathPrefix}${typeof middlewares[0] === "string" ? middlewares.shift() : "/"}`
+      `${this.pathPrefix}${typeof flatArgs[0] === "string" ? flatArgs.shift() : "/.*"}`
     );
 
-    for (const item of middlewares) {
-      if (item instanceof Router) {
-        const subrouter = item as Router;
-        for (const subpath of subrouter.paths) {
-          addPath({
-            router: this,
-            method: subpath.method,
-            path: `${path}${subpath.path}`.replace(/^\/\//, "/"),
-            middlewares: subpath.middlewares
-          });
-        }
-        continue;
+    // If the first argument is a Router, add all its routes
+    if (flatArgs.length === 1 && flatArgs[0] instanceof Router) {
+      const subrouter = flatArgs[0] as Router;
+      for (const subroute of subrouter.routes()) {
+        const subroutePath = `${path}${subroute}`;
+        this.routeTree.addRoute(subroutePath, subrouter.routeTree.findRoute(subroute)!.middlewares || []);
+      }
+    } else {
+      // Verify that no middlewares are added when a subrouter is added
+      if (flatArgs.some((item) => item instanceof Router)) {
+        throw new RouterError("You cannot add middlewares when adding a subrouter.");
       }
 
-      if (typeof item === "function") {
-        addPath({ router: this, method: "use", path: `${path}.*`, middlewares: [item as Middleware] });
+      // Verify that all middlewares are functions
+      if (flatArgs.some((item) => typeof item !== "function")) {
+        throw new RouterError("All middlewares must be functions.");
       }
+
+      this.routeTree.addRoute(path, flatArgs as Middlewares);
+    }
+
+    return this;
+  }
+
+  catch(...args: (number | string | Error | typeof Error | Middleware)[]): Router {
+    const condition =
+      typeof args[0] === "number" || typeof args[0] === "string" || args[0].name.includes("Error")
+        ? (args.shift() as number | string | Error)
+        : "generic";
+
+    if (typeof condition !== "number" && typeof condition !== "string" && !condition.name.includes("Error")) {
+      throw new RouterError("The condition must be a number, string or an instance of Error.");
+    }
+
+    // Verify that all middlewares are functions
+    if (args.some((item) => typeof item !== "function")) {
+      throw new RouterError("All middlewares must be functions.");
+    }
+
+    let handlers = this.errorHandlers.get(condition);
+    if (!handlers) {
+      handlers = [];
+      this.errorHandlers.set(condition, handlers);
     }
 
+    handlers.push(...(args as Middlewares));
     return this;
   }
 
   routes(): string[] {
-    return this.paths.filter((path) => path.method === "add").map((path) => path.path);
+    return this.getAllRoutes(this.routeTree.root, "");
   }
 
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   async go(
     path: string,
-    parentComponent?: Component | POJOComponent | VnodeComponentInterface,
-    preventPushState = false
+    parentComponent?: Component | POJOComponent | VnodeComponentInterface
   ): Promise<string | void> {
     if (!path) {
-      throw new Error("router.url.required");
+      return this.handleError(new RouterError("The URL is empty."), parentComponent);
+    }
+
+    if (/%[^0-9A-Fa-f]{2}/.test(path)) {
+      return this.handleError(new RouterError(`The URL ${path} is malformed.`));
     }
 
     const constructedPath = getPathWithoutLastSlash(`${this.pathPrefix}${path}`);
@@ -278,15 +272,46 @@ export class Router implements RouterInterface {
     this.url = constructedPath;
     this.query = parseQuery(parts[1]);
 
-    const middlewares = searchMiddlewares(this as RouterInterface, parts[0].replace(/(.+)\/$/, "$1").split("#")[0]);
-    let component = await searchComponent(this as RouterInterface, middlewares);
+    const finalPath = parts[0].replace(/(.+)\/$/, "$1").split("#")[0];
+    this.path = path;
+
+    let route = this.routeTree.findRoute(finalPath);
+
+    if (!route || !route.middlewares) {
+      // If the route is not found, search for a wildcard route
+      const finalPathParts = finalPath.split("/"); // Divide the path into segments
+
+      while (finalPathParts.length > 0) {
+        finalPathParts.pop(); // Remove the last segment
+        const wildcardRoute = this.routeTree.findRoute(finalPathParts.join("/") + "/.*"); // Search for a wildcard route
+        if (wildcardRoute) {
+          route = wildcardRoute;
+          break;
+        }
+      }
+
+      // If no route is found, return a 404 error
+      if (!route || !route.middlewares) {
+        const error = new RouterError(`The URL ${constructedPath} was not found in the router's registered paths.`);
+        (error as any).status = 404;
+        return this.handleError(error, parentComponent);
+      }
+    }
+
+    const { middlewares, params } = route;
+    this.params = params;
+
+    let component = await this.searchComponent(middlewares, parentComponent);
 
     if (component === false) {
       return;
     }
 
     if (!component) {
-      throw new Error(`The url ${constructedPath} requested wasn't found`);
+      return this.handleError(
+        new RouterError(`The URL ${constructedPath} did not return a valid component.`),
+        parentComponent
+      );
     }
 
     if (isComponent(parentComponent) || isVnodeComponent(parentComponent)) {
@@ -299,7 +324,7 @@ export class Router implements RouterInterface {
       }
     }
 
-    if (!isNodeJs && !preventPushState) {
+    if (!isNodeJs && window.location.pathname + window.location.search !== constructedPath) {
       window.history.pushState(null, "", constructedPath);
     }
 
@@ -310,23 +335,188 @@ export class Router implements RouterInterface {
 
   getOnClickHandler(url: string) {
     return (e: MouseEvent) => {
+      if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.defaultPrevented) {
+        return;
+      }
+
       if (typeof url === "string" && url.length > 0) {
         this.go(url);
       }
       e.preventDefault();
     };
   }
+
+  private getAllRoutes(node: RouteNode, prefix: string): string[] {
+    const routes: string[] = [];
+
+    for (const [key, child] of node.children) {
+      // eslint-disable-next-line sonarjs/no-nested-template-literals
+      const newPrefix = `${prefix}/${child.isDynamic ? `:${child.paramKey}` : key}`.replace(/\/$/, "");
+      if (child.middlewares) {
+        routes.push(newPrefix);
+      }
+      routes.push(...this.getAllRoutes(child, newPrefix));
+    }
+
+    return routes;
+  }
+
+  private createRequest(): Request {
+    return {
+      params: this.params,
+      query: this.query,
+      url: this.url,
+      path: this.path,
+      matches: this.matches,
+      redirect: (path: string) => this.go(path)
+    };
+  }
+
+  private getErrorConditionMiddlewares(error: any): Middlewares | false {
+    // Search first for class and name errors
+    for (const [condition, middlewares] of this.errorHandlers) {
+      if (
+        typeof condition !== "number" &&
+        typeof condition !== "string" &&
+        error instanceof (condition as any) &&
+        error.name === condition.name
+      ) {
+        return middlewares;
+      }
+    }
+
+    // then for code errors
+    for (const [condition, middlewares] of this.errorHandlers) {
+      if (typeof condition === "number" && (error.status === condition || error.code === condition)) {
+        return middlewares;
+      }
+    }
+
+    // and then for message errors
+    for (const [condition, middlewares] of this.errorHandlers) {
+      if (typeof condition === "string" && (error.name === condition || error.message.includes(condition))) {
+        return middlewares;
+      }
+    }
+
+    // If no specific error handler is found, return the generic one
+    return this.errorHandlers.get("generic") || false;
+  }
+
+  // eslint-disable-next-line sonarjs/cognitive-complexity
+  private async handleError(
+    error: Error,
+    parentComponent?: Component | POJOComponent | VnodeComponentInterface
+  ): Promise<void | string> {
+    const request: Request = this.createRequest();
+    let component = null;
+    const middlewares = this.getErrorConditionMiddlewares(error);
+
+    // If no error handler is found, throw the error
+    if (middlewares === false) {
+      throw error;
+    }
+
+    let response;
+    try {
+      for (const middleware of middlewares) {
+        response = await middleware(request, error);
+
+        // If the response is a component or vnode, return it for rendering
+        if (response !== undefined && (isComponent(response) || isVnodeComponent(response))) {
+          component = response;
+          break;
+        }
+
+        // If the response is false, stop the middleware chain
+        if (response === false) {
+          return;
+        }
+      }
+    } catch (err) {
+      // If an error occurs during the error handling, we handle it recursively
+      (err as Error).cause = error;
+
+      let errorCauseCount = 0;
+      while ((err as Error).cause) {
+        errorCauseCount++;
+      }
+
+      if (errorCauseCount > 20) {
+        throw new RouterError("Too many error causes. Possible circular error handling.");
+      }
+
+      return this.handleError(err as Error, parentComponent);
+    }
+
+    if (component) {
+      // If there is an error middleware that returns a component, we return it
+      if (isComponent(parentComponent) || isVnodeComponent(parentComponent)) {
+        const childComponent = isVnodeComponent(component) ? component : v(component as Component, {});
+        if (isVnodeComponent(parentComponent)) {
+          parentComponent.children.push(childComponent);
+          component = parentComponent;
+        } else {
+          component = v(parentComponent, {}, childComponent) as VnodeComponentInterface;
+        }
+      }
+
+      // If we are in the browser, we update the URL
+      if (!isNodeJs && window.location.pathname + window.location.search !== this.url) {
+        window.history.pushState(null, "", this.url);
+      }
+
+      // If there is a container, we mount the component
+      if (this.container) {
+        return mount(this.container, component);
+      }
+    }
+
+    // If there is no component to render, we throw the error
+    throw error;
+  }
+
+  private async searchComponent(
+    middlewares: Middlewares,
+    parentComponent?: Component | POJOComponent | VnodeComponentInterface
+  ) {
+    const request: Request = this.createRequest();
+
+    let response;
+
+    for (const middleware of middlewares) {
+      try {
+        response = await middleware(request);
+      } catch (error) {
+        return this.handleError(error as Error, parentComponent);
+      }
+
+      // If the response is a component or vnode, return it for rendering
+      if (response !== undefined && (isComponent(response) || isVnodeComponent(response))) {
+        return response;
+      }
+
+      // If the response is false, stop the middleware chain
+      if (response === false) {
+        return false;
+      }
+    }
+
+    return response;
+  }
 }
 
 let localRedirect: RedirectFunction;
 
-export function redirect(
+export async function redirect(
   url: string,
   parentComponent?: Component | POJOComponent | VnodeComponentInterface,
   preventPushState = false
 ): Promise<string | void> {
   if (!localRedirect) {
-    throw new Error("router.redirect.not.found");
+    // eslint-disable-next-line no-console
+    console.warn("Redirect function is not initialized. Please mount the router first.");
+    return;
   }
   return localRedirect(url, parentComponent, preventPushState);
 }
@@ -338,14 +528,13 @@ export function mountRouter(elementContainer: string | any, router: Router): voi
   if (!isNodeJs) {
     function onPopStateGoToRoute(): void {
       const pathWithoutPrefix = getPathWithoutPrefix(document.location.pathname, router.pathPrefix);
-      (router as unknown as Router).go(pathWithoutPrefix, undefined, true);
+      (router as unknown as Router).go(pathWithoutPrefix);
     }
     window.addEventListener("popstate", onPopStateGoToRoute, false);
     onPopStateGoToRoute();
   }
 
-  directive("route", (vnode: VnodeWithDom): void => {
-    const url = vnode.props["v-route"];
+  directive("route", (url: string, vnode: VnodeWithDom): void => {
     setAttribute("href", url, vnode);
     setAttribute("onclick", router.getOnClickHandler(url), vnode);
   });