@tinkoff/router 0.6.222 → 0.6.224

package/lib/components/react/useViewTransition.browser.js

@@ -18,8 +18,8 @@ const useViewTransition = (payload) => {
             // We are handling forward and back navigations for the same route here
             isTransitioning: [currentPath, nextPath].includes(path),
             types: viewTransition.types,
-            isForward: viewTransition.types.includes(NAVIGATION_TYPE.FORWARD),
-            isBack: viewTransition.types.includes(NAVIGATION_TYPE.BACK),
+            isForward: viewTransition.types?.includes(NAVIGATION_TYPE.FORWARD),
+            isBack: viewTransition.types?.includes(NAVIGATION_TYPE.BACK),
         };
     }
     return { isTransitioning: false, isForward: false, isBack: false };

package/lib/components/react/useViewTransition.es.js

@@ -18,8 +18,8 @@ const useViewTransition = (payload) => {
             // We are handling forward and back navigations for the same route here
             isTransitioning: [currentPath, nextPath].includes(path),
             types: viewTransition.types,
-            isForward: viewTransition.types.includes(NAVIGATION_TYPE.FORWARD),
-            isBack: viewTransition.types.includes(NAVIGATION_TYPE.BACK),
+            isForward: viewTransition.types?.includes(NAVIGATION_TYPE.FORWARD),
+            isBack: viewTransition.types?.includes(NAVIGATION_TYPE.BACK),
         };
     }
     return { isTransitioning: false, isForward: false, isBack: false };

package/lib/components/react/useViewTransition.js

@@ -22,8 +22,8 @@ const useViewTransition = (payload) => {
             // We are handling forward and back navigations for the same route here
             isTransitioning: [currentPath, nextPath].includes(path),
             types: viewTransition.types,
-            isForward: viewTransition.types.includes(constants.NAVIGATION_TYPE.FORWARD),
-            isBack: viewTransition.types.includes(constants.NAVIGATION_TYPE.BACK),
+            isForward: viewTransition.types?.includes(constants.NAVIGATION_TYPE.FORWARD),
+            isBack: viewTransition.types?.includes(constants.NAVIGATION_TYPE.BACK),
         };
     }
     return { isTransitioning: false, isForward: false, isBack: false };

package/lib/history/client.browser.js

@@ -96,7 +96,7 @@ class ClientHistory extends History {
                     this.currentState = state;
                     navigateState = state.navigateState;
                     if (key !== prevKey) {
-                        navigateState = 'navigate';
+                        navigationType = 'navigate';
                     }
                     else {
                         if (this.backNavigationWithinRouteType === BackNavigationType.PREFER_UPDATE) {

package/lib/history/client.es.js

@@ -96,7 +96,7 @@ class ClientHistory extends History {
                     this.currentState = state;
                     navigateState = state.navigateState;
                     if (key !== prevKey) {
-                        navigateState = 'navigate';
+                        navigationType = 'navigate';
                     }
                     else {
                         if (this.backNavigationWithinRouteType === BackNavigationType.PREFER_UPDATE) {

package/lib/history/client.js

@@ -100,7 +100,7 @@ class ClientHistory extends base.History {
                     this.currentState = state;
                     navigateState = state.navigateState;
                     if (key !== prevKey) {
-                        navigateState = 'navigate';
+                        navigationType = 'navigate';
                     }
                     else {
                         if (this.backNavigationWithinRouteType === types.BackNavigationType.PREFER_UPDATE) {

package/lib/router/abstract.browser.js

@@ -102,6 +102,7 @@ class AbstractRouter {
         this.internalHooks = {
             'router:resolve-route': this.hooksFactory.createSync('router:resolve-route'),
             'router:resolve-url': this.hooksFactory.createSync('router:resolve-url'),
+            'router:resolve-view-transition': this.hooksFactory.createSync('router:resolve-view-transition'),
         };
         this.internalHooks['router:resolve-route'].tap('router', (_, args) => {
             return this._resolveRoute(...args);
@@ -109,6 +110,9 @@ class AbstractRouter {
         this.internalHooks['router:resolve-url'].tap('router', (_, navigation) => {
             return this._resolveUrl(navigation);
         });
+        this.internalHooks['router:resolve-view-transition'].tap('router', (_, params) => {
+            return this._resolveViewTransition(params);
+        });
         this.plugins.forEach((plugin) => {
             plugin.apply(this);
         });
@@ -133,6 +137,19 @@ class AbstractRouter {
         // same as getCurrentRoute
         return this.currentNavigation?.url ?? this.lastNavigation?.url;
     }
+    getCurrentViewTransition() {
+        const currentNavigation = this.currentNavigation ?? this.lastNavigation;
+        if (!currentNavigation || !('viewTransition' in currentNavigation)) {
+            return null;
+        }
+        const viewTransition = {
+            viewTransition: currentNavigation.viewTransition,
+        };
+        if ('viewTransitionTypes' in currentNavigation) {
+            viewTransition.viewTransitionTypes = currentNavigation.viewTransitionTypes;
+        }
+        return viewTransition;
+    }
     getLastRoute() {
         return this.lastNavigation?.to;
     }
@@ -477,6 +494,9 @@ class AbstractRouter {
             navigateState,
         };
     }
+    _resolveViewTransition(params) {
+        return null;
+    }
 }
 
 export { AbstractRouter };

package/lib/router/abstract.d.ts

@@ -51,6 +51,18 @@ export declare abstract class AbstractRouter {
     readonly internalHooks: {
         'router:resolve-route': SyncTapableHookInstance<Parameters<AbstractRouter['_resolveRoute']>, NavigationRoute | undefined>;
         'router:resolve-url': SyncTapableHookInstance<NavigateOptions, Url>;
+        'router:resolve-view-transition': SyncTapableHookInstance<{
+            navigation: Navigation;
+            from: string;
+            to: string;
+            previousViewTransition: {
+                viewTransition: boolean;
+                viewTransitionTypes?: string[];
+            };
+        }, {
+            viewTransition?: boolean;
+            viewTransitionTypes?: string[];
+        } | null>;
     };
     readonly navigateHook: AsyncTapableHookInstance<{
         navigateOptions: NavigateOptions | string;
@@ -86,6 +98,10 @@ export declare abstract class AbstractRouter {
     start(): Promise<void>;
     getCurrentRoute(): NavigationRoute;
     getCurrentUrl(): Url;
+    getCurrentViewTransition(): {
+        viewTransition: boolean;
+        viewTransitionTypes?: string[];
+    };
     getLastRoute(): NavigationRoute;
     getLastUrl(): Url;
     protected commitNavigation(navigation: Navigation): void;
@@ -127,6 +143,15 @@ export declare abstract class AbstractRouter {
     }, { wildcard }?: {
         wildcard?: boolean;
     }): NavigationRoute;
+    protected _resolveViewTransition(params: {
+        navigation: Navigation;
+        from: string;
+        to: string;
+        previousViewTransition: {
+            viewTransition: boolean;
+            viewTransitionTypes?: string[];
+        };
+    }): any;
 }
 export {};
 //# sourceMappingURL=abstract.d.ts.map

package/lib/router/abstract.es.js

@@ -102,6 +102,7 @@ class AbstractRouter {
         this.internalHooks = {
             'router:resolve-route': this.hooksFactory.createSync('router:resolve-route'),
             'router:resolve-url': this.hooksFactory.createSync('router:resolve-url'),
+            'router:resolve-view-transition': this.hooksFactory.createSync('router:resolve-view-transition'),
         };
         this.internalHooks['router:resolve-route'].tap('router', (_, args) => {
             return this._resolveRoute(...args);
@@ -109,6 +110,9 @@ class AbstractRouter {
         this.internalHooks['router:resolve-url'].tap('router', (_, navigation) => {
             return this._resolveUrl(navigation);
         });
+        this.internalHooks['router:resolve-view-transition'].tap('router', (_, params) => {
+            return this._resolveViewTransition(params);
+        });
         this.plugins.forEach((plugin) => {
             plugin.apply(this);
         });
@@ -133,6 +137,19 @@ class AbstractRouter {
         // same as getCurrentRoute
         return this.currentNavigation?.url ?? this.lastNavigation?.url;
     }
+    getCurrentViewTransition() {
+        const currentNavigation = this.currentNavigation ?? this.lastNavigation;
+        if (!currentNavigation || !('viewTransition' in currentNavigation)) {
+            return null;
+        }
+        const viewTransition = {
+            viewTransition: currentNavigation.viewTransition,
+        };
+        if ('viewTransitionTypes' in currentNavigation) {
+            viewTransition.viewTransitionTypes = currentNavigation.viewTransitionTypes;
+        }
+        return viewTransition;
+    }
     getLastRoute() {
         return this.lastNavigation?.to;
     }
@@ -477,6 +494,9 @@ class AbstractRouter {
             navigateState,
         };
     }
+    _resolveViewTransition(params) {
+        return null;
+    }
 }
 
 export { AbstractRouter };

package/lib/router/abstract.js

@@ -111,6 +111,7 @@ class AbstractRouter {
         this.internalHooks = {
             'router:resolve-route': this.hooksFactory.createSync('router:resolve-route'),
             'router:resolve-url': this.hooksFactory.createSync('router:resolve-url'),
+            'router:resolve-view-transition': this.hooksFactory.createSync('router:resolve-view-transition'),
         };
         this.internalHooks['router:resolve-route'].tap('router', (_, args) => {
             return this._resolveRoute(...args);
@@ -118,6 +119,9 @@ class AbstractRouter {
         this.internalHooks['router:resolve-url'].tap('router', (_, navigation) => {
             return this._resolveUrl(navigation);
         });
+        this.internalHooks['router:resolve-view-transition'].tap('router', (_, params) => {
+            return this._resolveViewTransition(params);
+        });
         this.plugins.forEach((plugin) => {
             plugin.apply(this);
         });
@@ -142,6 +146,19 @@ class AbstractRouter {
         // same as getCurrentRoute
         return this.currentNavigation?.url ?? this.lastNavigation?.url;
     }
+    getCurrentViewTransition() {
+        const currentNavigation = this.currentNavigation ?? this.lastNavigation;
+        if (!currentNavigation || !('viewTransition' in currentNavigation)) {
+            return null;
+        }
+        const viewTransition = {
+            viewTransition: currentNavigation.viewTransition,
+        };
+        if ('viewTransitionTypes' in currentNavigation) {
+            viewTransition.viewTransitionTypes = currentNavigation.viewTransitionTypes;
+        }
+        return viewTransition;
+    }
     getLastRoute() {
         return this.lastNavigation?.to;
     }
@@ -486,6 +503,9 @@ class AbstractRouter {
             navigateState,
         };
     }
+    _resolveViewTransition(params) {
+        return null;
+    }
 }
 
 exports.AbstractRouter = AbstractRouter;

package/lib/router/browser.browser.js

@@ -4,7 +4,7 @@ import { RouteTree } from '../tree/tree.browser.js';
 import { NAVIGATION_TYPE } from './constants.browser.js';
 
 const DELAY_CHECK_INTERVAL = 50;
-const APPLIED_VIEW_TRANSITIONS_KEY = '_t_view_transitions';
+const APPLIED_VIEW_TRANSITIONS_KEY = '_t_view_transitions_v2';
 class Router extends ClientRouter {
     delayedNavigation;
     delayedPromise;
@@ -34,6 +34,7 @@ class Router extends ClientRouter {
             return this.flattenDelayedNavigation(delayedNavigation);
         }
     }
+    // eslint-disable-next-line max-statements
     async run(navigation) {
         // if navigation was cancelled before, do not run it
         if (navigation.skipped) {
@@ -47,17 +48,46 @@ class Router extends ClientRouter {
             ? this.resolve(navigation.to.redirect)?.actualPath
             : navigation.to?.actualPath) ?? '';
         const from = navigation.from?.actualPath ?? '';
-        if (this.viewTransitionsEnabled && to !== from && !navigation.hasUAVisualTransition) {
-            navigation.viewTransition = this.shouldApplyViewTransition(navigation, to);
-            const hasNavigationType = !!navigation.viewTransitionTypes &&
-                navigation.viewTransitionTypes.some((type) => Object.values(NAVIGATION_TYPE).includes(type));
-            // add a navigation type only if it has not been provided
-            if (navigation.viewTransition && !hasNavigationType) {
-                const navigationType = this.getNavigationType(navigation);
-                // add a navigation type to transition types
-                navigation.viewTransitionTypes = navigation.viewTransitionTypes
-                    ? [...(navigation.viewTransitionTypes ?? []), navigationType]
-                    : [navigationType];
+        if (this.viewTransitionsEnabled) {
+            const prevTransitionByIndex = this.getPrevTransition(navigation, to);
+            const previousViewTransition = prevTransitionByIndex
+                ? {
+                    viewTransition: true,
+                    viewTransitionTypes: prevTransitionByIndex && prevTransitionByIndex?.viewTransitionTypes,
+                }
+                : {
+                    viewTransition: false,
+                };
+            const viewTransition = this.internalHooks['router:resolve-view-transition'].call({
+                navigation,
+                from,
+                to,
+                previousViewTransition,
+            });
+            logger.debug({
+                event: 'view-transition.resolved',
+                navigation,
+                viewTransition,
+                previousViewTransition,
+            });
+            if (viewTransition) {
+                navigation.viewTransition = viewTransition.viewTransition;
+                navigation.viewTransitionTypes = viewTransition.viewTransitionTypes;
+            }
+            const historyState = this.history.getCurrentState();
+            // sync applied view transitions
+            if (!navigation.history && historyState) {
+                if (navigation.viewTransition) {
+                    // add transition except history navigations with VT enabled
+                    this.appliedViewTransitions.set(historyState.index, {
+                        path: from,
+                        viewTransitionTypes: navigation.viewTransitionTypes,
+                    });
+                    // if we have forward navigation without VT enabled and stored val for this index
+                }
+                else if (this.appliedViewTransitions.has(historyState.index)) {
+                    this.appliedViewTransitions.delete(historyState.index);
+                }
             }
         }
         // if router is not started yet delay current navigation without blocking promise resolving
@@ -191,41 +221,74 @@ class Router extends ClientRouter {
         return NAVIGATION_TYPE.FORWARD;
     }
     shouldApplyViewTransition(navigation, to) {
-        const from = navigation.from?.actualPath ?? '';
         const historyState = this.history.getCurrentState();
         if (!historyState) {
+            logger.debug({
+                event: 'view-transition.not-applied',
+                message: 'View Transition not applied because there is no history state, probably it is the first navigation in app',
+                navigation,
+            });
             return false;
         }
-        const historyIndex = historyState.index;
-        const prevTransitionFrom = this.getPrevTransition(navigation);
+        const prevTransitionByIndex = this.getPrevTransition(navigation, to);
         // handle back navigation when prev navigation was with VT enabled
-        if (navigation.history && prevTransitionFrom === to) {
+        if (navigation.history && navigation.isBack && !!prevTransitionByIndex) {
+            logger.debug({
+                event: 'view-transition.should-apply',
+                message: 'View Transition should be applied for browser back navigation with VT enabled on previous navigation',
+                navigation,
+            });
             return true;
         }
         if (navigation.viewTransition) {
-            // add transition except history navigations with VT enabled
-            !navigation.history && this.appliedViewTransitions.set(historyIndex, from);
+            logger.debug({
+                event: 'view-transition.should-apply',
+                message: 'View Transition should be applied because it is present on navigation parameters',
+                navigation,
+            });
             return true;
         }
         // handle forward navigation
         if (navigation.history && !navigation.isBack) {
             // returns true if prev navigation was with VT enabled
-            return !!prevTransitionFrom;
-        }
-        // if we have forward navigation without VT enabled and stored val for this index
-        if (!navigation.history && this.appliedViewTransitions.has(historyIndex)) {
-            this.appliedViewTransitions.delete(historyIndex);
+            const result = !!prevTransitionByIndex;
+            if (result) {
+                logger.debug({
+                    event: 'view-transition.should-apply',
+                    message: 'View Transition should be applied for browser forward navigation because previous navigation was with VT enabled',
+                    navigation,
+                });
+            }
+            else {
+                logger.debug({
+                    event: 'view-transition.not-applied',
+                    message: 'View Transition not applied for browser forward navigation because previous navigation was without VT',
+                    navigation,
+                });
+            }
+            return result;
         }
+        logger.debug({
+            event: 'view-transition.not-applied',
+            navigation,
+        });
         return false;
     }
-    getPrevTransition(navigation) {
+    getPrevTransition(navigation, target) {
         const historyState = this.history.getCurrentState();
         if (!historyState) {
             return false;
         }
+        const isBrowserBackNavigation = navigation.history && navigation.isBack;
         const historyIndex = historyState.index;
-        const index = navigation.history && navigation.isBack ? historyIndex : historyIndex - 1;
-        return this.appliedViewTransitions.get(index);
+        const index = isBrowserBackNavigation ? historyIndex : historyIndex - 1;
+        const result = this.appliedViewTransitions.get(index);
+        if (result) {
+            // can't be sure, but this check looks like replace state protection,
+            // when we save a different route on the same index
+            return result && result.path === target ? result : false;
+        }
+        return false;
     }
     restoreAppliedViewTransitions() {
         try {
@@ -287,6 +350,40 @@ class Router extends ClientRouter {
             return this._flatten(delayedNavigation);
         }
     }
+    _resolveViewTransition({ navigation, from, to, }) {
+        if (!this.viewTransitionsEnabled) {
+            return null;
+        }
+        if (to === from) {
+            logger.debug({
+                event: 'view-transition.disabled',
+                message: 'View Transition is disabled for same route navigation',
+                navigation,
+            });
+            return null;
+        }
+        if (navigation.hasUAVisualTransition) {
+            logger.debug({
+                event: 'view-transition.disabled',
+                message: 'View Transition is disabled because another View Transition is already running',
+                navigation,
+            });
+            return null;
+        }
+        const result = {};
+        result.viewTransition = this.shouldApplyViewTransition(navigation, to);
+        const hasNavigationType = !!navigation.viewTransitionTypes &&
+            navigation.viewTransitionTypes.some((type) => Object.values(NAVIGATION_TYPE).includes(type));
+        // add a navigation type only if it has not been provided
+        if (result.viewTransition && !hasNavigationType) {
+            const navigationType = this.getNavigationType(navigation);
+            // add a navigation type to transition types
+            result.viewTransitionTypes = navigation.viewTransitionTypes
+                ? [...(navigation.viewTransitionTypes ?? []), navigationType]
+                : [navigationType];
+        }
+        return result;
+    }
 }
 
 export { Router };

package/lib/router/browser.d.ts

@@ -24,5 +24,13 @@ export declare class Router extends ClientRouter {
     private saveAppliedViewTransitions;
     cancel(navigation?: Navigation): void | Navigation;
     private _flatten;
+    _resolveViewTransition({ navigation, from, to, }: {
+        navigation: Navigation;
+        from: string;
+        to: string;
+    }): {
+        viewTransition?: boolean;
+        viewTransitionTypes?: string[];
+    };
 }
 //# sourceMappingURL=browser.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinkoff/router",
-  "version": "0.6.222",
+  "version": "0.6.224",
   "description": "router",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -28,7 +28,7 @@
     "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {
-    "@tramvai/core": "6.80.20",
+    "@tramvai/core": "6.80.22",
     "react": ">=16.14.0",
     "tslib": "^2.4.0"
   },