Router optimizations

Author: tolyo

src/router/directives/state-directives.ts

@@ -11,11 +11,11 @@ import { removeFrom } from "../../shared/common.ts";
 import {
   assign,
   arrayFrom,
-  entries,
   isArray,
   isNullOrUndefined,
   isObject,
   isString,
+  keys,
 } from "../../shared/utils.ts";
 import { getInheritedData } from "../../shared/dom.ts";
 import type { RawParams } from "../params/interface.ts";
@@ -84,6 +84,12 @@ function getClasses(stateList: ActiveClassState[]): string[] {
   return classes;
 }
 
+function appendUniqueClasses(target: string[], source: string[]): void {
+  source.forEach((className) => {
+    if (!target.includes(className)) target.push(className);
+  });
+}
+
 /**
  * Parses an `ng-sref` expression into a target state name and parameter expression.
  */
@@ -573,11 +579,11 @@ export function StateRefActiveDirective(
       function setStatesFromDefinitionObject(statesDefinition: unknown): void {
         if (isObject(statesDefinition)) {
           states = [];
-          const stateEntries = entries(
-            statesDefinition as Record<string, unknown>,
-          );
+          const definition = statesDefinition as Record<string, unknown>;
+
+          keys(definition).forEach((activeClass) => {
+            const stateOrName = definition[activeClass];
 
-          stateEntries.forEach(([activeClass, stateOrName]) => {
             if (isString(stateOrName)) {
               addStateForClass(stateOrName, activeClass);
             } else if (isArray(stateOrName)) {
@@ -657,7 +663,9 @@ export function StateRefActiveDirective(
           appendSplitClasses(exactClasses, activeEqClass);
         }
 
-        const addClasses = uniqueStrings(fuzzyClasses.concat(exactClasses));
+        const addClasses = uniqueStrings(fuzzyClasses);
+
+        appendUniqueClasses(addClasses, exactClasses);
 
         const removeClasses: string[] = [];
 

src/router/params/interface.ts

@@ -139,37 +139,38 @@ export interface ParamDeclaration {
   /**
    * The parameter's `array` mode
    *
-   * Explicitly specifies the array mode of a URL parameter
+   * Explicitly specifies the array mode of a query parameter. Path parameters
+   * are always treated as single values.
    *
    * - If `false`, the parameter value will be treated (encoded/decoded) as a single value
-   * - If `true`, the parameter value will be treated (encoded/decoded) as an array of values.
+   * - If `true`, a query parameter value will be treated (encoded/decoded) as an array of values.
    * - If `auto` (for query parameters only), if multiple values for a single parameter are present
    * in the URL (e.g.: /foo?bar=1&bar=2&bar=3) then the values are mapped to an array (e.g.:
    * `{ foo: [ '1', '2', '3' ] }`). However, if only one value is present (e.g.: /foo?bar=1)
    * then the value is treated as single value (e.g.: { foo: '1' }).
    *
-   * If you specified a [[type]] for the parameter, the value will be treated as an array
-   * of the specified [[ParamType]].
+   * If you specified a [[type]] for a query parameter, the value will be treated
+   * as an array of the specified [[ParamType]].
    *
    * #### Example:
    * ```js
    * {
    *   name: 'foo',
-   *   url: '/foo/{arrayParam:int}`,
+   *   url: '/foo?arrayParam',
    *   params: {
    *     arrayParam: { array: true }
    *   }
    * }
    *
-   * // After the transition, URL should be '/foo/1-2-3'
+   * // After the transition, URL should be '/foo?arrayParam=1&arrayParam=2&arrayParam=3'
    * $state.go("foo", { arrayParam: [ 1, 2, 3 ] });
    * ```
    *
    * @default `false` for path parameters, such as `url: '/foo/:pathParam'`
    * @default `auto` for query parameters, such as `url: '/foo?queryParam'`
-   * @default `true` if the parameter name ends in `[]`, such as `url: '/foo/{implicitArrayParam:int[]}'`
+   * @default `true` for query parameters if the parameter name ends in `[]`, such as `url: '/foo?implicitArrayParam[]'`
    */
-  array?: boolean;
+  array?: boolean | "auto";
 
   /**
    * Squash mode: omit default parameter values in URL

src/router/params/param-type.spec.js

@@ -14,14 +14,12 @@ describe("ParamType", () => {
   it("returns the original type when array mode is disabled", () => {
     const type = createType();
 
-    expect(type.$asArray(false, true)).toBe(type);
+    expect(type.$asArray(false)).toBe(type);
   });
 
-  it("rejects auto array mode for path parameters", () => {
+  it("wraps a type when array mode is enabled", () => {
     const type = createType();
 
-    expect(() => type.$asArray("auto", false)).toThrowError(
-      "'auto' array mode is for query parameters only",
-    );
+    expect(type.$asArray("auto")).not.toBe(type);
   });
 });

src/router/params/param-type.ts

@@ -31,7 +31,6 @@ export class ParamType {
     this.pattern = /.*/;
     this.inherit = true;
     assign(this, def);
-    this.name = undefined;
   }
   // consider these four methods to be "abstract methods" that should be overridden
 
@@ -86,14 +85,10 @@ export class ParamType {
    * - url: "/path?queryParam=1 will create $stateParams.queryParam: 1
    * - url: "/path?queryParam=1&queryParam=2 will create $stateParams.queryParam: [1, 2]
    * @param {boolean |'auto'} mode
-   * @param {boolean} isSearch
    */
-  $asArray(mode: boolean | "auto", isSearch: boolean): ParamType {
+  $asArray(mode: boolean | "auto"): ParamType {
     if (!mode) return this;
 
-    if (mode === "auto" && !isSearch)
-      throw new Error("'auto' array mode is for query parameters only");
-
     return new ArrayParamType(this, mode);
   }
 }
@@ -122,15 +117,12 @@ class ArrayParamType extends ParamType {
 
     this._type = type;
     this._arrayMode = mode;
-
-    assign(this, {
-      dynamic: type.dynamic,
-      name: type.name,
-      pattern: type.pattern,
-      inherit: type.inherit,
-      raw: type.raw,
-      $arrayMode: mode,
-    });
+    this.dynamic = type.dynamic;
+    this.name = type.name as string | undefined;
+    this.pattern = type.pattern;
+    this.inherit = type.inherit;
+    this.raw = type.raw;
+    this.$arrayMode = mode;
   }
 
   /** @internal */
@@ -156,22 +148,22 @@ class ArrayParamType extends ParamType {
 
     const arr = this._arrayWrap(val);
 
-    const result: unknown[] = [];
-
     const type = this._type;
 
-    arr.forEach((item) => {
-      result.push(type[method](item));
-    });
-
     if (allTruthyMode) {
-      for (let i = 0; i < result.length; i++) {
-        if (!result[i]) return false;
+      for (let i = 0; i < arr.length; i++) {
+        if (!type[method](arr[i])) return false;
       }
 
       return true;
     }
 
+    const result: unknown[] = [];
+
+    arr.forEach((item) => {
+      result.push(type[method](item));
+    });
+
     return this._arrayUnwrap(result);
   }
 

src/router/params/param.ts

@@ -1,6 +1,5 @@
 import { isInjectable } from "../../shared/predicates.ts";
 import {
-  assign,
   hasOwn,
   isArray,
   isDefined,
@@ -13,6 +12,7 @@ import { ParamType } from "./param-type.ts";
 import type {
   ParamDeclaration,
   ParamDefaultValueFactory,
+  ParamDefaultValueProvider,
   RawParams,
   Replace,
 } from "./interface.ts";
@@ -62,11 +62,13 @@ function getParamDeclaration(
 ): ParamDeclaration {
   const { dynamic } = state;
 
-  const defaultConfig = isDefined(dynamic) ? { dynamic } : {};
-
   const paramConfig = unwrapShorthand(state?.params?.[paramName]);
 
-  return assign(defaultConfig, paramConfig);
+  if (isDefined(dynamic) && !hasOwn(paramConfig, "dynamic")) {
+    paramConfig.dynamic = dynamic;
+  }
+
+  return paramConfig;
 }
 
 /**
@@ -88,7 +90,9 @@ function unwrapShorthand(cfg: unknown): ParamDeclaration {
     ? paramConfig.value
     : getStaticDefaultValue;
 
-  return assign(paramConfig, { _fn });
+  paramConfig._fn = _fn as ParamDefaultValueProvider;
+
+  return paramConfig;
 }
 
 /**
@@ -172,32 +176,39 @@ function getReplace(
   isOptional: boolean,
   squash: string | boolean,
 ): Replace[] {
-  const defaultPolicy = [
-    { from: "", to: isOptional || arrayMode ? undefined : "" },
-    { from: null, to: isOptional || arrayMode ? undefined : "" },
-  ] as Replace[];
-
   const replace = isArray(config.replace) ? config.replace : [];
 
-  if (isString(squash)) replace.push({ from: squash, to: undefined });
+  const result: Replace[] = [];
 
-  const configuredKeys: Array<string | null> = [];
+  let hasEmptyReplace = false;
 
-  replace.forEach((item) => {
-    configuredKeys.push(item.from);
-  });
+  let hasNullReplace = false;
 
-  const result: Replace[] = [];
+  for (let i = 0; i < replace.length; i++) {
+    const item = replace[i];
 
-  defaultPolicy.forEach((item) => {
-    if (configuredKeys.indexOf(item.from) === -1) {
-      result.push(item);
+    if (item.from === "") {
+      hasEmptyReplace = true;
+    } else if (item.from === null) {
+      hasNullReplace = true;
     }
-  });
+  }
+
+  const defaultReplacement = isOptional || arrayMode ? undefined : "";
+
+  if (!hasEmptyReplace) result.push({ from: "", to: defaultReplacement });
+
+  if (!hasNullReplace) {
+    result.push({ from: null as unknown as string, to: defaultReplacement });
+  }
+
+  for (let i = 0; i < replace.length; i++) {
+    const item = replace[i];
 
-  replace.forEach((item) => {
     result.push(item);
-  });
+  }
+
+  if (isString(squash)) result.push({ from: squash, to: undefined });
 
   return result;
 }
@@ -207,13 +218,11 @@ function getArrayMode(
   location: DefTypeValue,
   config: ParamDeclaration,
 ): boolean | "auto" {
-  const arrayDefaults = {
-    array: location === DefType._SEARCH ? "auto" : false,
-  };
+  if (location !== DefType._SEARCH) return false;
 
-  const arrayParamNomenclature = id.match(/\[\]$/) ? { array: true } : {};
+  if (isDefined(config.array)) return config.array;
 
-  return assign(arrayDefaults, arrayParamNomenclature, config).array;
+  return id.endsWith("[]") ? true : "auto";
 }
 
 export class Param {
@@ -228,7 +237,6 @@ export class Param {
   inherit: boolean;
   array: boolean | "auto";
   config: ParamDeclaration;
-  matchingKeys: RawParams | undefined;
   /** @internal */
   _defaultValueCache?: { defaultValue: unknown };
   /** @internal */
@@ -256,9 +264,7 @@ export class Param {
     type = getType(config, type, location, id, urlConfig._paramTypes);
     const arrayMode = getArrayMode(id, location, config);
 
-    type = arrayMode
-      ? type && type.$asArray(arrayMode, location === DefType._SEARCH)
-      : type;
+    type = arrayMode ? type && type.$asArray(arrayMode) : type;
     const isOptional =
       config.value !== undefined || location === DefType._SEARCH;
 
@@ -289,7 +295,6 @@ export class Param {
     this.inherit = inherit;
     this.array = arrayMode;
     this.config = config;
-    this.matchingKeys = undefined;
     this._runtime = runtime;
   }
 
@@ -306,7 +311,14 @@ export class Param {
    * @param {undefined} [value]
    */
   value(value?: unknown): unknown {
-    value = this._replaceSpecialValues(value);
+    for (let i = 0; i < this.replace.length; i++) {
+      const tuple = this.replace[i];
+
+      if (tuple.from === value) {
+        value = tuple.to;
+        break;
+      }
+    }
 
     return isUndefined(value)
       ? this._getDefaultValue()
@@ -346,21 +358,6 @@ export class Param {
     return defaultValue;
   }
 
-  /** @internal */
-  _replaceSpecialValues(value: unknown): unknown {
-    for (let i = 0; i < this.replace.length; i++) {
-      const tuple = this.replace[i];
-
-      if (tuple.from === value) return tuple.to;
-    }
-
-    return value;
-  }
-
-  isSearch(): boolean {
-    return this.location === DefType._SEARCH;
-  }
-
   /**
    * @param {null} value
    */
@@ -433,7 +430,15 @@ export class Param {
     values1: RawParams = {},
     values2: RawParams = {},
   ): boolean {
-    return Param.changed(params, values1, values2).length === 0;
+    for (let i = 0; i < params.length; i++) {
+      const param = params[i];
+
+      if (!param.type.equals(values1[param.id], values2[param.id])) {
+        return false;
+      }
+    }
+
+    return true;
   }
 
   /**