Fix view directive and expand scroll service to accept elements

tolyo · tolyo · commit 168e4976aed2 · 2026-02-02T23:05:34.000+02:00
diff --git a/@types/router/state/views.d.ts b/@types/router/state/views.d.ts
@@ -47,6 +47,7 @@ export class ViewConfig {
     viewDecl: import("./interface.ts").ViewDeclaration,
     factory: import("../template-factory.js").TemplateFactoryProvider,
   );
+  $id: number;
   /**
    * @type {Array<import('../path/path-node.js').PathNode>}
    */
@@ -67,10 +68,14 @@ export class ViewConfig {
    * @type {string | undefined}
    */
   template: string | undefined;
-  /** @type {Number} */ $id: number;
+  /** @type {boolean} */
   loaded: boolean;
   getTemplate: (ngView: any, context: ResolveContext) => string;
-  load(): Promise<this>;
+  /**
+   *
+   * @returns {Promise<ViewConfig>}
+   */
+  load(): Promise<ViewConfig>;
   controller: any;
   /**
    * Gets the controller for a view configuration.
diff --git a/@types/router/view/interface.d.ts b/@types/router/view/interface.d.ts
@@ -1,5 +1,4 @@
-import { ViewDeclaration } from "../state/interface.ts";
-import { PathNode } from "../path/path-node.js";
+import { ViewConfig } from "../state/views.js";
 /** The context ref can be anything that has a `name` and a `parent` reference to another IContextRef */
 export interface ViewContext {
   name: string;
@@ -13,35 +12,12 @@ export interface ActiveUIView {
   /** The ng-view's fully qualified name */
   fqn: string;
   /** The ViewConfig that is currently loaded into the ng-view */
-  config: ViewConfig;
+  config: ViewConfig | null;
   /** The state context in which the ng-view tag was created. */
   creationContext: ViewContext;
   /** A callback that should apply a ViewConfig (or clear the ng-view, if config is undefined) */
   configUpdated: (config: ViewConfig) => void;
 }
-/**
- * This interface represents a [[_ViewDeclaration]] that is bound to a [[PathNode]].
- *
- * A `ViewConfig` is the runtime definition of a single view.
- *
- * During a transition, `ViewConfig`s are created for each [[_ViewDeclaration]] defined on each "entering" [[StateObject]].
- * Then, the [[ViewService]] finds any matching `ng-view`(s) in the DOM, and supplies the ng-view
- * with the `ViewConfig`.  The `ng-view` then loads itself using the information found in the `ViewConfig`.
- *
- * A `ViewConfig` if matched with a `ng-view` by finding all `ng-view`s which were created in the
- * context named by the `ngVIewContextAnchor`, and finding the `ng-view` or child `ng-view` that matches
- * the `ngVIewName` address.
- */
-export interface ViewConfig {
-  $id: number;
-  /** The normalized view declaration from [[State.views]] */
-  viewDecl: ViewDeclaration;
-  /** The node the ViewConfig is bound to */
-  path: PathNode[];
-  loaded: boolean;
-  /** Fetches templates, runs dynamic (controller|template)Provider code, lazy loads Components, etc */
-  load(): Promise<ViewConfig>;
-}
 export interface ViewTuple {
   ngView: ActiveUIView | undefined;
   viewConfig: ViewConfig;
diff --git a/@types/services/anchor-scroll/interface.d.ts b/@types/services/anchor-scroll/interface.d.ts
@@ -2,7 +2,7 @@ export interface AnchorScrollService {
   /**
    * Invoke anchor scrolling.
    */
-  (hash?: string | number): void;
+  (hashOrElement?: string | number | HTMLElement): void;
   /**
    * Vertical scroll offset.
    * Can be a number, a function returning a number,
diff --git a/src/router/directives/view-directive.js b/src/router/directives/view-directive.js
@@ -1,4 +1,4 @@
-import { filter, tail, unnestR } from "../../shared/common.js";
+import { tail, unnestR } from "../../shared/common.js";
 import { hasAnimate, isDefined, isFunction } from "../../shared/utils.js";
 import { parse } from "../../shared/hof.js";
 import { ResolveContext } from "../resolve/resolve-context.js";
@@ -210,12 +210,12 @@ export function $ViewDirective($view, $animate, $anchorScroll, $interpolate) {
             )(scope) || "$default";
 
         /**
-         * @type {HTMLElement}
+         * @type {HTMLElement | null}
          */
         let previousEl;
 
         /**
-         * @type {HTMLElement}
+         * @type {HTMLElement | null}
          */
         let currentEl;
 
@@ -229,6 +229,7 @@ export function $ViewDirective($view, $animate, $anchorScroll, $interpolate) {
          */
         let viewConfig;
 
+        /** @type {import("../view/interface.ts").ActiveUIView} */
         const activeUIView = {
           id: /** @type {number} */ (directive.count)++, // Global sequential ID for ng-view tags added to DOM
           name, // ng-view name (<div ng-view="name"></div>
@@ -333,24 +334,39 @@ export function $ViewDirective($view, $animate, $anchorScroll, $interpolate) {
            * @param {string} viewName Name of the view.
            */
           newScope.$emit("$viewContentLoading", name);
-          currentEl = $transclude(newScope, function (clone) {
-            setCacheData(clone, "$ngViewAnim", $ngViewAnim);
-            setCacheData(clone, "$ngView", $ngViewData);
-            renderer.enter(clone, $element, function () {
-              animEnter.resolve();
-
-              if (currentScope)
-                currentScope.$emit("$viewContentAnimationEnded");
-
-              if (
-                (isDefined(autoScrollExp) && !autoScrollExp) ||
-                (autoScrollExp && scope.$eval(autoScrollExp))
-              ) {
-                /** @type {ng.AnchorScrollService} */ ($anchorScroll)(clone);
-              }
-            });
-            cleanupLastView();
-          });
+          currentEl = /** @type {HTMLElement} */ (
+            /** @type {ng.TranscludeFn} */ ($transclude)(newScope, (clone) => {
+              setCacheData(
+                /** @type {HTMLElement} */ (clone),
+                "$ngViewAnim",
+                $ngViewAnim,
+              );
+              setCacheData(
+                /** @type {HTMLElement} */ (clone),
+                "$ngView",
+                $ngViewData,
+              );
+              renderer.enter(
+                /** @type {HTMLElement} */ (clone),
+                $element,
+                () => {
+                  animEnter.resolve(undefined);
+
+                  if (currentScope)
+                    currentScope.$emit("$viewContentAnimationEnded");
+
+                  if (
+                    (isDefined(autoScrollExp) && !autoScrollExp) ||
+                    (autoScrollExp && scope.$eval(autoScrollExp))
+                  ) {
+                    $anchorScroll(/** @type {HTMLElement} */ (clone));
+                  }
+                },
+              );
+              cleanupLastView();
+            })
+          );
+
           currentScope = newScope;
           /**
            * Fired once the view is **loaded**, *after* the DOM is rendered.
@@ -497,9 +513,9 @@ let _uiCanExitId = 0;
 /**
  * @ignore TODO: move these callbacks to $view and/or `/hooks/components.ts` or something
  * @param {ng.TransitionService} $transitions
- * @param {object | (() => object)} controllerInstance
+ * @param {any} controllerInstance
  * @param {ng.Scope} $scope
- * @param {{ viewDecl: { component: any; componentProvider: any; }; path: string | any[]; }} cfg
+ * @param {{ viewDecl: { component: any; componentProvider: any; }; path: import("../transition/transition.js").PathNode[]; }} cfg
  */
 function registerControllerCallbacks(
   $transitions,
@@ -525,50 +541,79 @@ function registerControllerCallbacks(
     const viewCreationTrans = resolveContext.getResolvable("$transition$").data;
 
     // Fire callback on any successful transition
-    const paramsUpdated = ($transition$) => {
+    const paramsUpdated = (
+      /** @type {ng.Transition | undefined} */ $transition$,
+    ) => {
+      if (!$transition$) return;
+
       // Exit early if the $transition$ is the same as the view was created within.
       // Exit early if the $transition$ will exit the state the view is for.
       if (
         $transition$ === viewCreationTrans ||
         $transition$.exiting().indexOf(viewState) !== -1
-      )
+      ) {
         return;
+      }
+
       const toParams = $transition$.params("to");
 
       const fromParams = $transition$.params("from");
 
-      const getNodeSchema = (node) => node.paramSchema;
+      const getNodeSchema = (/** @type {{ paramSchema: any }} */ node) =>
+        node.paramSchema;
 
-      const toSchema = $transition$
-        .treeChanges("to")
-        .map(getNodeSchema)
-        .reduce(unnestR, []);
+      const treeChanges = $transition$ && $transition$.treeChanges;
 
-      const fromSchema = $transition$
-        .treeChanges("from")
-        .map(getNodeSchema)
-        .reduce(unnestR, []);
+      const toNodes = isFunction(treeChanges)
+        ? (treeChanges.call($transition$, "to") ?? [])
+        : [];
 
-      // Find the to params that have different values than the from params
-      const changedToParams = toSchema.filter((param) => {
-        const idx = fromSchema.indexOf(param);
+      const fromNodes = isFunction(treeChanges)
+        ? (treeChanges.call($transition$, "from") ?? [])
+        : [];
 
-        return (
-          idx === -1 ||
-          !fromSchema[idx].type.equals(toParams[param.id], fromParams[param.id])
-        );
-      });
+      const toSchema =
+        /** @type {import("../transition/transition.js").PathNode[]} */ (
+          toNodes
+        )
+          .map(getNodeSchema)
+          .reduce(unnestR, []);
+
+      const fromSchema =
+        /** @type {import("../transition/transition.js").PathNode[]} */ (
+          fromNodes
+        )
+          .map(getNodeSchema)
+          .reduce(unnestR, []);
+
+      // Find the to params that have different values than the from params
+      const changedToParams = toSchema.filter(
+        (/** @type {{ id: string | number; }} */ param) => {
+          const idx = fromSchema.indexOf(param);
+
+          return (
+            idx === -1 ||
+            !fromSchema[idx].type.equals(
+              toParams[param.id],
+              fromParams[param.id],
+            )
+          );
+        },
+      );
 
       // Only trigger callback if a to param has changed or is new
       if (changedToParams.length) {
-        const changedKeys = changedToParams.map((x) => x.id);
+        const changedKeys = /** @type {any[]} */ (
+          changedToParams.map((/** @type {{ id: any; }} */ x) => x.id)
+        );
 
         // Filter the params to only changed/new to params.  `$transition$.params()` may be used to get all params.
-        const newValues = filter(
-          toParams,
-          (val, key) => changedKeys.indexOf(key) !== -1,
-        );
+        /** @type {Record<string, any>} */
+        const newValues = {};
 
+        changedKeys.forEach((key) => {
+          if (key in toParams) newValues[key] = toParams[key];
+        });
         controllerInstance.uiOnParamsChanged(newValues, $transition$);
       }
     };
@@ -585,14 +630,22 @@ function registerControllerCallbacks(
 
     const cacheProp = "_uiCanExitIds";
 
-    // Returns true if a redirect transition already answered truthy
-    const prevTruthyAnswer = (trans) =>
+    /**
+     * Returns true if any transition in the redirect chain already answered truthy
+     * @param {import("../transition/transition.js").Transition | null | undefined} trans
+     * @returns {boolean}
+     */
+    const prevTruthyAnswer = (
+      /** @type {ng.Transition & Record<String, any>} */ trans,
+    ) =>
       !!trans &&
       ((trans[cacheProp] && trans[cacheProp][id] === true) ||
         prevTruthyAnswer(trans.redirectedFrom()));
 
     // If a user answered yes, but the transition was later redirected, don't also ask for the new redirect transition
-    const wrappedHook = (trans) => {
+    const wrappedHook = (
+      /** @type {ng.Transition & Record<String, any>} */ trans,
+    ) => {
       let promise;
 
       const ids = (trans[cacheProp] = trans[cacheProp] || {});
diff --git a/src/router/state/views.js b/src/router/state/views.js
@@ -125,6 +125,7 @@ export class ViewConfig {
    * @param {import('../template-factory.js').TemplateFactoryProvider} factory
    */
   constructor(path, viewDecl, factory) {
+    this.$id = -1;
     /**
      * @type {Array<import('../path/path-node.js').PathNode>}
      */
@@ -147,7 +148,10 @@ export class ViewConfig {
      */
     this.template = undefined;
 
-    /** @type {Number} */ this.$id = id++;
+    /** @type {Number} */
+    this.$id = id++;
+
+    /** @type {boolean} */
     this.loaded = false;
     this.getTemplate = (
       /** @type {any} */ ngView,
@@ -163,6 +167,10 @@ export class ViewConfig {
         : this.template;
   }
 
+  /**
+   *
+   * @returns {Promise<ViewConfig>}
+   */
   async load() {
     const context = new ResolveContext(this.path);
 
diff --git a/src/router/view/interface.ts b/src/router/view/interface.ts
@@ -1,5 +1,4 @@
-import { ViewDeclaration } from "../state/interface.ts";
-import { PathNode } from "../path/path-node.js";
+import { ViewConfig } from "../state/views.js";
 
 /** The context ref can be anything that has a `name` and a `parent` reference to another IContextRef */
 export interface ViewContext {
@@ -15,41 +14,13 @@ export interface ActiveUIView {
   /** The ng-view's fully qualified name */
   fqn: string;
   /** The ViewConfig that is currently loaded into the ng-view */
-  config: ViewConfig;
+  config: ViewConfig | null;
   /** The state context in which the ng-view tag was created. */
   creationContext: ViewContext;
   /** A callback that should apply a ViewConfig (or clear the ng-view, if config is undefined) */
   configUpdated: (config: ViewConfig) => void;
 }
 
-/**
- * This interface represents a [[_ViewDeclaration]] that is bound to a [[PathNode]].
- *
- * A `ViewConfig` is the runtime definition of a single view.
- *
- * During a transition, `ViewConfig`s are created for each [[_ViewDeclaration]] defined on each "entering" [[StateObject]].
- * Then, the [[ViewService]] finds any matching `ng-view`(s) in the DOM, and supplies the ng-view
- * with the `ViewConfig`.  The `ng-view` then loads itself using the information found in the `ViewConfig`.
- *
- * A `ViewConfig` if matched with a `ng-view` by finding all `ng-view`s which were created in the
- * context named by the `ngVIewContextAnchor`, and finding the `ng-view` or child `ng-view` that matches
- * the `ngVIewName` address.
- */
-export interface ViewConfig {
-  /* The unique id for the ViewConfig instance */
-  $id: number;
-  /** The normalized view declaration from [[State.views]] */
-  viewDecl: ViewDeclaration;
-
-  /** The node the ViewConfig is bound to */
-  path: PathNode[];
-
-  loaded: boolean;
-
-  /** Fetches templates, runs dynamic (controller|template)Provider code, lazy loads Components, etc */
-  load(): Promise<ViewConfig>;
-}
-
 // A uiView and its matching viewConfig
 export interface ViewTuple {
   ngView: ActiveUIView | undefined;
diff --git a/src/services/anchor-scroll/anchor-scroll.js b/src/services/anchor-scroll/anchor-scroll.js
diff --git a/src/services/anchor-scroll/anchor-scroll.spec.js b/src/services/anchor-scroll/anchor-scroll.spec.js
diff --git a/src/services/anchor-scroll/interface.ts b/src/services/anchor-scroll/interface.ts
