Migrate router to transitions API

Author: Anatoly Ostrovsky

src/directive/controller/controller.spec.js

@@ -139,7 +139,7 @@ describe("ngController", () => {
     );
     window.angular
       .module("myModule", [])
-      .controller("Count", function CountController($scope) {
+      .controller("Count", function CountController() {
         count += 1;
       });
 

src/directive/include/include.ts

@@ -38,7 +38,7 @@ export function ngIncludeDirective(
     controller: () => {
       /* empty */
     },
-    compile(_element: Element, attr: Attributes & Record<string, string>) {
+    compile(_element: Element, attr: Attributes) {
       const srcExp = attr.ngInclude || attr.src;
 
       const onloadExp = attr.onload || "";

src/router/directives/view-directive.spec.js

@@ -17,6 +17,7 @@ describe("ngView", () => {
     $injector,
     $state,
     $anchorScroll,
+    animateSpies,
     errorLog = [];
 
   const aState = {
@@ -172,6 +173,13 @@ describe("ngView", () => {
       $state = _$state_;
       $anchorScroll = _$anchorScroll_;
     });
+
+    const $animate = $injector.get("$animate");
+
+    animateSpies = {
+      enter: spyOn($animate, "enter").and.callThrough(),
+      leave: spyOn($animate, "leave").and.callThrough(),
+    };
   });
 
   describe("linking ng-directive", () => {
@@ -437,6 +445,159 @@ describe("ngView", () => {
     expect(log).toContain("animLeave;");
   });
 
+  it("should activate routed views inside document.startViewTransition", async () => {
+    await wait(350);
+    elem.innerHTML = "<div><ng-view></ng-view></div>";
+    $compile(elem)(scope);
+
+    let committedInsideCallback = false;
+
+    spyOn(document, "startViewTransition").and.callFake((callback) => {
+      expect(elem.querySelector("ng-view").textContent).toBe("");
+
+      callback();
+
+      expect(elem.querySelector("ng-view").textContent).toBe(aState.template);
+      committedInsideCallback = true;
+
+      return {
+        updateCallbackDone: Promise.resolve(),
+        finished: Promise.resolve(),
+      };
+    });
+
+    await $state.transitionTo("a");
+    await wait(20);
+
+    expect(document.startViewTransition).toHaveBeenCalledTimes(1);
+    expect(committedInsideCallback).toBeTrue();
+  });
+
+  it("should not start a view transition for an ignored same-state transition", async () => {
+    await wait(350);
+    elem.innerHTML = "<div><ng-view></ng-view></div>";
+    $compile(elem)(scope);
+
+    spyOn(document, "startViewTransition").and.callFake((callback) => {
+      callback();
+
+      return {
+        updateCallbackDone: Promise.resolve(),
+        finished: Promise.resolve(),
+      };
+    });
+
+    await $state.transitionTo("a");
+    await wait(20);
+
+    document.startViewTransition.calls.reset();
+
+    await $state.transitionTo("a");
+    await wait(20);
+
+    expect(document.startViewTransition).not.toHaveBeenCalled();
+    expect(elem.querySelector("ng-view").textContent).toBe(aState.template);
+  });
+
+  it("should not use $animate enter or leave for routed view replacement", async () => {
+    elem.innerHTML = "<div><ng-view></ng-view></div>";
+    $compile(elem)(scope);
+
+    animateSpies.enter.calls.reset();
+    animateSpies.leave.calls.reset();
+
+    await $state.transitionTo("a");
+    await wait(20);
+    await $state.transitionTo("b");
+    await wait(20);
+
+    expect(animateSpies.enter).not.toHaveBeenCalled();
+    expect(animateSpies.leave).not.toHaveBeenCalled();
+  });
+
+  it("should not start a view transition for detached routed views", async () => {
+    await wait(350);
+    const detachedScope = scope.$new();
+    const detachedElement = createElementFromHTML(
+      "<div><ng-view></ng-view></div>",
+    );
+
+    $compile(detachedElement)(detachedScope);
+
+    spyOn(document, "startViewTransition").and.callThrough();
+
+    await $state.transitionTo("a");
+    await wait(20);
+
+    expect(document.startViewTransition).not.toHaveBeenCalled();
+    expect(detachedElement.querySelector("ng-view").textContent).toBe(
+      aState.template,
+    );
+
+    detachedScope.$destroy();
+    dealoc(detachedElement);
+  });
+
+  it("should not wait for the visual view transition to finish before resolving the route transition", async () => {
+    await wait(350);
+    elem.innerHTML = "<div><ng-view></ng-view></div>";
+    $compile(elem)(scope);
+
+    let finishVisualTransition;
+    const finished = new Promise((resolve) => {
+      finishVisualTransition = resolve;
+    });
+
+    spyOn(document, "startViewTransition").and.callFake((callback) => {
+      callback();
+
+      return {
+        updateCallbackDone: Promise.resolve(),
+        finished,
+      };
+    });
+
+    await $state.transitionTo("a");
+
+    expect(elem.querySelector("ng-view").textContent).toBe(aState.template);
+    expect(document.startViewTransition).toHaveBeenCalledTimes(1);
+
+    finishVisualTransition();
+    await wait(20);
+  });
+
+  it("should commit overlapping routed view changes without waiting for the active view transition", async () => {
+    await wait(350);
+    elem.innerHTML = "<div><ng-view></ng-view></div>";
+    $compile(elem)(scope);
+
+    let finishFirstTransition;
+    const firstTransitionFinished = new Promise((resolve) => {
+      finishFirstTransition = resolve;
+    });
+
+    spyOn(document, "startViewTransition").and.callFake((callback) => {
+      callback();
+
+      return {
+        updateCallbackDone: Promise.resolve(),
+        finished: firstTransitionFinished,
+      };
+    });
+
+    await $state.transitionTo("a");
+    await wait(20);
+    expect(elem.querySelector("ng-view").textContent).toBe(aState.template);
+
+    await $state.transitionTo("b");
+    await wait(20);
+    expect(elem.querySelector("ng-view").textContent).toBe(bState.template);
+    expect(document.startViewTransition).toHaveBeenCalledTimes(1);
+
+    finishFirstTransition();
+    await wait(20);
+  });
+
   it("should do ngClass animations", async () => {
     scope.classOn = false;
     elem.innerHTML =

src/router/directives/view-directive.ts

@@ -17,10 +17,6 @@ import {
   isInstanceOf,
   isString,
 } from "../../shared/utils.ts";
-import {
-  createLazyAnimate,
-  getAnimateForNode,
-} from "../../animations/lazy-animate.ts";
 import { ResolveContext } from "../resolve/resolve-context.ts";
 import { ViewConfig } from "../state/views.ts";
 import {
@@ -41,11 +37,6 @@ type PromiseResolvers<T> = {
   reject: (reason?: any) => void;
 };
 
-type Renderer = {
-  enter: (element: HTMLElement, target: HTMLElement, cb: () => void) => void;
-  leave: (element: HTMLElement, cb: () => void) => void;
-};
-
 function getFirstElementFromClone(
   clone: Node | Node[] | NodeList | DocumentFragment | null | undefined,
 ): HTMLElement | null {
@@ -211,46 +202,18 @@ const controllerLastParamsChangedTransition = new WeakMap<
  * ```
  */
 
-ViewDirective.$inject = [_view, _state, _injector, _anchorScroll, _interpolate];
+ViewDirective.$inject = [_view, _state, _anchorScroll, _interpolate];
 
 /**
  * Renders and updates the currently active view configuration.
  */
 export function ViewDirective(
   $view: ViewService,
   $state: ng.StateService,
-  $injector: ng.InjectorService,
   $anchorScroll: ng.AnchorScrollService,
   $interpolate: ng.InterpolateService,
 ): ng.Directive {
   void $state;
-  const getAnimate = createLazyAnimate($injector);
-
-  function getRenderer(): Renderer {
-    return {
-      enter(element: HTMLElement, target: HTMLElement, cb: () => void): void {
-        const animate = getAnimateForNode(getAnimate, element);
-
-        if (animate) {
-          animate.enter(element, null, target).done(cb);
-        } else {
-          target.after(element);
-          cb();
-        }
-      },
-
-      leave(element: HTMLElement, cb: () => void): void {
-        const animate = getAnimateForNode(getAnimate, element);
-
-        if (animate) {
-          animate.leave(element).done(cb);
-        } else {
-          removeElement(element);
-          cb();
-        }
-      },
-    };
-  }
 
   const rootData: ActiveNgViewRootData = {
     $cfg: { viewDecl: { $context: $view._rootViewContext() as ViewContext } },
@@ -272,7 +235,6 @@ export function ViewDirective(
       ) {
         const onloadExp = attrs.onload || "",
           autoScrollExp = attrs.autoscroll,
-          renderer = getRenderer(),
           inherited =
             (getInheritedData($element, "$ngView") as
               | ActiveNgViewRootData
@@ -284,8 +246,6 @@ export function ViewDirective(
               ) as ng.InterpolationFunction
             )(scope) || "$default";
 
-        let previousEl: HTMLElement | null = null;
-
         let currentEl: HTMLElement | null = null;
 
         let currentScope: ng.Scope | null = null;
@@ -299,6 +259,7 @@ export function ViewDirective(
 
         const activeNgView: ActiveNgView = {
           id: directive.count++, // Global sequential ID for ng-view tags added to DOM
+          element: $element,
           name, // ng-view name, retained internally for nested view matching
           fqn: parentFqn ? `${parentFqn}.${name}` : name, // fully qualified name, describes location in DOM
           config: null, // The active ViewConfig loaded for this ng-view
@@ -357,12 +318,8 @@ export function ViewDirective(
         scope.$on("$destroy", function () {
           unregister();
         });
-        function cleanupLastView(): void {
-          if (previousEl) {
-            removeElement(previousEl);
-            previousEl = null;
-          }
 
+        function cleanupLastView(): void {
           if (currentScope) {
             currentScope.$destroy();
             currentScope = null;
@@ -373,11 +330,8 @@ export function ViewDirective(
               | NgViewAnimData
               | undefined;
 
-            renderer.leave(currentEl, function () {
-              _viewData?.$$animLeave.resolve();
-              previousEl = null;
-            });
-            previousEl = currentEl;
+            removeElement(currentEl);
+            _viewData?.$$animLeave.resolve();
             currentEl = null;
           }
         }
@@ -420,23 +374,20 @@ export function ViewDirective(
               setCacheData(node, "$ngViewAnim", $ngViewAnim);
               setCacheData(node, "$ngView", $ngViewData);
             });
-            renderer.enter(elementClone, $element, () => {
-              animEnter.resolve(undefined);
-
-              if (currentScope)
-                currentScope.$emit("$viewContentAnimationEnded");
-
-              if (
-                (isDefined(autoScrollExp) && !autoScrollExp) ||
-                (autoScrollExp && scope.$eval(autoScrollExp))
-              ) {
-                $anchorScroll(elementClone);
-              }
-            });
+            $element.after(elementClone);
+            animEnter.resolve(undefined);
             cleanupLastView();
+
+            if (
+              (isDefined(autoScrollExp) && !autoScrollExp) ||
+              (autoScrollExp && scope.$eval(autoScrollExp))
+            ) {
+              $anchorScroll(elementClone);
+            }
           }) as unknown as HTMLElement;
 
           currentScope = newScope;
+          currentScope.$emit("$viewContentAnimationEnded");
           /**
            * Fired once the view is **loaded**, *after* the DOM is rendered.
            *