fixup! feat(router): Add feature to support the View Transitions API

atscott · atscott · commit b3a240f82301 · 2023-09-08T15:26:01.000-07:00
diff --git a/goldens/public-api/router/index.md b/goldens/public-api/router/index.md
@@ -4,8 +4,6 @@
 
 ```ts
 
-/// <reference types="@types/dom-view-transitions" />
-
 import { AfterContentInit } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { Compiler } from '@angular/core';
diff --git a/packages/router/src/navigation_transition.ts b/packages/router/src/navigation_transition.ts
@@ -261,7 +261,6 @@ export interface NavigationTransition {
   targetRouterState: RouterState|null;
   guards: Checks;
   guardsResult: boolean|UrlTree|null;
-  viewTransition?: ViewTransition
 }
 
 /**
@@ -306,7 +305,7 @@ export class NavigationTransitions {
   private readonly paramsInheritanceStrategy =
       this.options.paramsInheritanceStrategy || 'emptyOnly';
   private readonly urlHandlingStrategy = inject(UrlHandlingStrategy);
-  private readonly createTransition = inject(CREATE_VIEW_TRANSITION, {optional: true});
+  private readonly createViewTransition = inject(CREATE_VIEW_TRANSITION, {optional: true});
 
   navigationId = 0;
   get hasRequestedNavigation() {
@@ -614,15 +613,13 @@ export class NavigationTransitions {
                          switchTap(() => this.afterPreactivation()),
 
                          switchMap(() => {
-                           const viewTransitionInfo =
-                               this.createTransition?.(this.environmentInjector);
-                           overallTransitionState.viewTransition = viewTransitionInfo?.transition;
+                           const viewTransitionStarted =
+                               this.createViewTransition?.(this.environmentInjector);
 
                            // If view transitions are enabled, block the navigation until the view
                            // transition callback starts. Otherwise, continue immediately.
-                           return viewTransitionInfo ?
-                               from(viewTransitionInfo.viewTransitionStarted)
-                                   .pipe(map(() => overallTransitionState)) :
+                           return viewTransitionStarted ?
+                               from(viewTransitionStarted).pipe(map(() => overallTransitionState)) :
                                of(overallTransitionState);
                          }),
 
@@ -663,10 +660,6 @@ export class NavigationTransitions {
                            }
                          }),
 
-                         switchTap(
-                             () => overallTransitionState.viewTransition?.updateCallbackDone ??
-                                 of(void 0)),
-
                          // There used to be a lot more logic happening directly within the
                          // transition Observable. Some of this logic has been refactored out to
                          // other places but there may still be errors that happen there. This gives
diff --git a/packages/router/src/provide_router.ts b/packages/router/src/provide_router.ts
@@ -22,7 +22,7 @@ import {ROUTER_SCROLLER, RouterScroller} from './router_scroller';
 import {ActivatedRoute} from './router_state';
 import {UrlSerializer} from './url_tree';
 import {afterNextNavigation} from './utils/navigations';
-import {CREATE_VIEW_TRANSITION, transitionHelper} from './utils/view_transition';
+import {CREATE_VIEW_TRANSITION, createViewTransition} from './utils/view_transition';
 
 
 /**
@@ -729,7 +729,7 @@ export function withComponentInputBinding(): ComponentInputBindingFeature {
  * @experimental
  */
 export function withViewTransitions(): ViewTransitionsFeature {
-  const providers = [{provide: CREATE_VIEW_TRANSITION, useValue: transitionHelper}];
+  const providers = [{provide: CREATE_VIEW_TRANSITION, useValue: createViewTransition}];
   return routerFeature(RouterFeatureKind.ViewTransitionsFeature, providers);
 }
 
diff --git a/packages/router/src/utils/view_transition.ts b/packages/router/src/utils/view_transition.ts
@@ -11,44 +11,30 @@
 import {afterNextRender, InjectionToken, Injector, NgZone} from '@angular/core';
 
 export const CREATE_VIEW_TRANSITION =
-    new InjectionToken<typeof transitionHelper>(ngDevMode ? 'view transition helper' : '');
+    new InjectionToken<typeof createViewTransition>(ngDevMode ? 'view transition helper' : '');
 
 /**
  * A helper function for using browser view transitions. This function skips the call to
  * `startViewTransition` if the browser does not support it.
  *
- * @returns An Observable that completes when the `ViewTransition.updateCallbackDone` promise
- *     resolves.
+ * @returns A Promise that resolves when the view transition callback begins.
  */
-export function transitionHelper(injector: Injector):
-    {viewTransitionStarted: Promise<void>, transition: ViewTransition} {
+export function createViewTransition(injector: Injector): Promise<void> {
   // Create promises outside the Angular zone to avoid causing extra change detections
   return injector.get(NgZone).runOutsideAngular(() => {
     if (!document.startViewTransition) {
-      // Ensure the timing of the update and finish promises are the same even when view transitions
-      // aren't supported by the browser. That is, resolve it after the next render in both cases.
-      const renderPromise = createRenderPromise(injector);
-      const transition: ViewTransition = {
-        ready: Promise.resolve(),
-        updateCallbackDone: renderPromise,
-        finished: renderPromise,
-        skipTransition: () => {},
-      };
-      return {
-        transition,
-        viewTransitionStarted: Promise.resolve(),
-      };
-    } else {
-      let resolveViewTransitionStarted: () => void;
-      const viewTransitionStarted = new Promise<void>((resolve) => {
-        resolveViewTransitionStarted = resolve;
-      });
-      const transition = document.startViewTransition(() => {
-        resolveViewTransitionStarted();
-        return createRenderPromise(injector);
-      });
-      return {transition, viewTransitionStarted};
+      return Promise.resolve();
     }
+
+    let resolveViewTransitionStarted: () => void;
+    const viewTransitionStarted = new Promise<void>((resolve) => {
+      resolveViewTransitionStarted = resolve;
+    });
+    document.startViewTransition(() => {
+      resolveViewTransitionStarted();
+      return createRenderPromise(injector);
+    });
+    return viewTransitionStarted;
   });
 }
 
diff --git a/packages/router/test/bootstrap.spec.ts b/packages/router/test/bootstrap.spec.ts
@@ -534,7 +534,7 @@ describe('bootstrap', () => {
       expect(window.removeEventListener).toHaveBeenCalledWith('hashchange', jasmine.any(Function));
     });
 
-    fit('should have the correct event order when using view transitions', async () => {
+    it('should have the correct event order when using view transitions', async () => {
       @Component({
         selector: 'component-a',
         template: `a`,
