@tinkoff/router 0.5.115 → 0.6.102

package/lib/components/react/context.d.ts

@@ -10,6 +10,7 @@ export type ViewTransitionState = {
     isTransitioning: true;
     currentRoute: NavigationRoute;
     nextRoute: NavigationRoute;
+    types?: string[];
 };
 export declare const ViewTransitionContext: import("react").Context<ViewTransitionState>;
 //# sourceMappingURL=context.d.ts.map

package/lib/components/react/providers/transitions.browser.js

@@ -36,6 +36,7 @@ const TransitionsProvider = ({ router, children, }) => {
                 isTransitioning: true,
                 currentRoute: navigation.from,
                 nextRoute: navigation.to,
+                types: navigation.viewTransitionTypes,
             });
             return;
         }
@@ -56,12 +57,22 @@ const TransitionsProvider = ({ router, children, }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
             if (renderDeferred !== null && pendingState !== null) {
-                const transition = document.startViewTransition(async () => {
+                const update = async () => {
                     startReactTransition(() => {
                         setState(pendingState);
                     });
                     await renderDeferred.promise;
-                });
+                };
+                let transition;
+                if (window.ViewTransition && 'types' in window.ViewTransition.prototype) {
+                    transition = document.startViewTransition({
+                        update,
+                        types: viewTransitionState.isTransitioning ? viewTransitionState.types : undefined,
+                    });
+                }
+                else {
+                    transition = document.startViewTransition(update);
+                }
                 // eslint-disable-next-line promise/catch-or-return
                 transition.finished.finally(() => {
                     setRenderDeferred(null);
@@ -69,7 +80,7 @@ const TransitionsProvider = ({ router, children, }) => {
                     setViewTransitionState({ isTransitioning: false });
                 });
             }
-        }, [pendingState, renderDeferred]);
+        }, [pendingState, renderDeferred, viewTransitionState]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
             if (renderDeferred !== null &&

package/lib/components/react/providers/transitions.es.js

@@ -36,6 +36,7 @@ const TransitionsProvider = ({ router, children, }) => {
                 isTransitioning: true,
                 currentRoute: navigation.from,
                 nextRoute: navigation.to,
+                types: navigation.viewTransitionTypes,
             });
             return;
         }
@@ -56,12 +57,22 @@ const TransitionsProvider = ({ router, children, }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
             if (renderDeferred !== null && pendingState !== null) {
-                const transition = document.startViewTransition(async () => {
+                const update = async () => {
                     startReactTransition(() => {
                         setState(pendingState);
                     });
                     await renderDeferred.promise;
-                });
+                };
+                let transition;
+                if (window.ViewTransition && 'types' in window.ViewTransition.prototype) {
+                    transition = document.startViewTransition({
+                        update,
+                        types: viewTransitionState.isTransitioning ? viewTransitionState.types : undefined,
+                    });
+                }
+                else {
+                    transition = document.startViewTransition(update);
+                }
                 // eslint-disable-next-line promise/catch-or-return
                 transition.finished.finally(() => {
                     setRenderDeferred(null);
@@ -69,7 +80,7 @@ const TransitionsProvider = ({ router, children, }) => {
                     setViewTransitionState({ isTransitioning: false });
                 });
             }
-        }, [pendingState, renderDeferred]);
+        }, [pendingState, renderDeferred, viewTransitionState]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
             if (renderDeferred !== null &&

package/lib/components/react/providers/transitions.js

@@ -40,6 +40,7 @@ const TransitionsProvider = ({ router, children, }) => {
                 isTransitioning: true,
                 currentRoute: navigation.from,
                 nextRoute: navigation.to,
+                types: navigation.viewTransitionTypes,
             });
             return;
         }
@@ -60,12 +61,22 @@ const TransitionsProvider = ({ router, children, }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         react.useEffect(() => {
             if (renderDeferred !== null && pendingState !== null) {
-                const transition = document.startViewTransition(async () => {
+                const update = async () => {
                     startReactTransition(() => {
                         setState(pendingState);
                     });
                     await renderDeferred.promise;
-                });
+                };
+                let transition;
+                if (window.ViewTransition && 'types' in window.ViewTransition.prototype) {
+                    transition = document.startViewTransition({
+                        update,
+                        types: viewTransitionState.isTransitioning ? viewTransitionState.types : undefined,
+                    });
+                }
+                else {
+                    transition = document.startViewTransition(update);
+                }
                 // eslint-disable-next-line promise/catch-or-return
                 transition.finished.finally(() => {
                     setRenderDeferred(null);
@@ -73,7 +84,7 @@ const TransitionsProvider = ({ router, children, }) => {
                     setViewTransitionState({ isTransitioning: false });
                 });
             }
-        }, [pendingState, renderDeferred]);
+        }, [pendingState, renderDeferred, viewTransitionState]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         react.useEffect(() => {
             if (renderDeferred !== null &&

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

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 import { ViewTransitionContext, RouterContext } from './context.browser.js';
+import { NAVIGATION_TYPE } from '../../router/constants.browser.js';
 
 const normalizePath = (payload, router) => {
     const route = router.resolve(payload);
@@ -13,10 +14,15 @@ const useViewTransition = (payload) => {
         const path = normalizePath(payload, router);
         const currentPath = viewTransition.currentRoute.actualPath;
         const nextPath = viewTransition.nextRoute.actualPath;
-        // We are handling forward and back navigations for the same route here
-        return [currentPath, nextPath].includes(path);
+        return {
+            // 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),
+        };
     }
-    return false;
+    return { isTransitioning: false, isForward: false, isBack: false };
 };
 
 export { useViewTransition };

package/lib/components/react/useViewTransition.d.ts

@@ -1,5 +1,10 @@
 import type { NavigateOptions } from '../../types';
 type Payload = string | Partial<NavigateOptions>;
-export declare const useViewTransition: (payload: Payload) => boolean;
+export declare const useViewTransition: (payload: Payload) => {
+    isTransitioning: boolean;
+    types?: string[];
+    isForward: boolean;
+    isBack: boolean;
+};
 export {};
 //# sourceMappingURL=useViewTransition.d.ts.map

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

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 import { ViewTransitionContext, RouterContext } from './context.es.js';
+import { NAVIGATION_TYPE } from '../../router/constants.es.js';
 
 const normalizePath = (payload, router) => {
     const route = router.resolve(payload);
@@ -13,10 +14,15 @@ const useViewTransition = (payload) => {
         const path = normalizePath(payload, router);
         const currentPath = viewTransition.currentRoute.actualPath;
         const nextPath = viewTransition.nextRoute.actualPath;
-        // We are handling forward and back navigations for the same route here
-        return [currentPath, nextPath].includes(path);
+        return {
+            // 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),
+        };
     }
-    return false;
+    return { isTransitioning: false, isForward: false, isBack: false };
 };
 
 export { useViewTransition };

package/lib/components/react/useViewTransition.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 var context = require('./context.js');
+var constants = require('../../router/constants.js');
 
 const normalizePath = (payload, router) => {
     const route = router.resolve(payload);
@@ -17,10 +18,15 @@ const useViewTransition = (payload) => {
         const path = normalizePath(payload, router);
         const currentPath = viewTransition.currentRoute.actualPath;
         const nextPath = viewTransition.nextRoute.actualPath;
-        // We are handling forward and back navigations for the same route here
-        return [currentPath, nextPath].includes(path);
+        return {
+            // 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),
+        };
     }
-    return false;
+    return { isTransitioning: false, isForward: false, isBack: false };
 };
 
 exports.useViewTransition = useViewTransition;

package/lib/history/base.browser.js

@@ -1,5 +1,8 @@
 class History {
+    listener;
+    tree;
     init(navigation) { }
+    unsubscribe() { }
     listen(listener) {
         this.listener = listener;
     }

package/lib/history/base.d.ts

@@ -1,4 +1,4 @@
-import type { Navigation, HistoryOptions, NavigationType } from '../types';
+import type { Navigation, HistoryOptions, NavigationType, HistoryState } from '../types';
 import type { RouteTree } from '../tree/tree';
 export type Listener = (arg: {
     url: string;
@@ -6,13 +6,26 @@ export type Listener = (arg: {
     navigateState?: any;
     replace?: boolean;
     history?: boolean;
+    isBack?: boolean;
+    hasUAVisualTransition?: boolean;
+    viewTransition?: boolean;
+    viewTransitionTypes?: string[];
 }) => Promise<void>;
 export declare abstract class History {
     protected listener?: Listener;
     protected tree?: RouteTree;
     init(navigation: Navigation): void;
+    unsubscribe(): void;
     abstract save(navigation: Navigation): void;
     abstract go(to: number, options?: HistoryOptions): Promise<void>;
+    /**
+     * Получает стабильное значение window.history.state, необходимое для работы ViewTransition.
+     *
+     * Т.К. window.history.state обнуляется при инициализации tmsg чата.
+     *
+     * Возвращает undefined, если роут сразу вызывает redirect guard.
+     * */
+    abstract getCurrentState(): HistoryState | undefined;
     listen(listener: Listener): void;
     setTree(tree: RouteTree): void;
 }

package/lib/history/base.es.js

@@ -1,5 +1,8 @@
 class History {
+    listener;
+    tree;
     init(navigation) { }
+    unsubscribe() { }
     listen(listener) {
         this.listener = listener;
     }

package/lib/history/base.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 class History {
+    listener;
+    tree;
     init(navigation) { }
+    unsubscribe() { }
     listen(listener) {
         this.listener = listener;
     }

package/lib/history/client.browser.js

@@ -50,9 +50,14 @@ const generateState = (navigation, currentState, index = 0) => {
     };
 };
 class ClientHistory extends History {
+    goPromiseResolve;
+    goPromiseReject;
+    currentIndex = 0;
+    currentState;
+    historyUnsubscribeCallback;
+    historyWrapper;
     constructor() {
         super();
-        this.currentIndex = 0;
         this.historyWrapper = wrapHistory({
             onNavigate: ({ url, replace, navigateState }) => {
                 this.listener({
@@ -63,16 +68,22 @@ class ClientHistory extends History {
             },
         });
     }
+    onNavigate;
+    getCurrentState() {
+        return this.currentState;
+    }
     init(navigation) {
         this.currentState = isHistoryState(window.history?.state)
             ? window.history.state
             : generateState(navigation);
         this.currentIndex = this.currentState.index;
         this.historyWrapper.init(this.currentState);
-        this.historyWrapper.subscribe(async ({ path, state }) => {
+        this.historyUnsubscribeCallback = this.historyWrapper.subscribe(async ({ path, state, hasUAVisualTransition }) => {
             try {
                 let navigationType;
                 let navigateState;
+                const { viewTransition, viewTransitionTypes } = this.currentState;
+                const isBack = state.index < this.currentState.index;
                 if (isHistoryState(state)) {
                     const { key: prevKey, type: prevType } = this.currentState;
                     const { key, type } = state;
@@ -95,6 +106,10 @@ class ClientHistory extends History {
                     history: true,
                     url: path,
                     navigateState,
+                    hasUAVisualTransition,
+                    viewTransition,
+                    viewTransitionTypes,
+                    isBack,
                 });
                 this.goPromiseResolve?.();
             }
@@ -103,6 +118,9 @@ class ClientHistory extends History {
             }
         });
     }
+    unsubscribe() {
+        this.historyUnsubscribeCallback?.();
+    }
     save(navigation) {
         const { replace, url } = navigation;
         if (!replace) {
@@ -139,6 +157,8 @@ class ClientHistory extends History {
             this.goPromiseResolve = resolve;
             this.goPromiseReject = reject;
         });
+        this.currentState.viewTransition = options?.viewTransition;
+        this.currentState.viewTransitionTypes = options?.viewTransitionTypes;
         this.historyWrapper.history(to);
         return promise;
     }

package/lib/history/client.d.ts

@@ -1,24 +1,20 @@
 import { History } from './base';
-import type { Navigation, NavigationType, HistoryOptions } from '../types';
+import type { Navigation, HistoryOptions, HistoryState } from '../types';
 import type { Wrapper } from './wrapper';
 import { wrapHistory } from './wrapper';
-interface HistoryState {
-    key: string;
-    type: NavigationType;
-    navigateState?: any;
-    index: number;
-}
 export declare class ClientHistory extends History {
     private goPromiseResolve;
     private goPromiseReject;
     private currentIndex;
     private currentState;
+    private historyUnsubscribeCallback;
     protected historyWrapper: Wrapper<HistoryState>;
     constructor();
     protected onNavigate: Parameters<typeof wrapHistory>[0]['onNavigate'];
+    getCurrentState(): HistoryState | undefined;
     init(navigation: Navigation): void;
+    unsubscribe(): void;
     save(navigation: Navigation): void;
     go(to: number, options?: HistoryOptions): Promise<void>;
 }
-export {};
 //# sourceMappingURL=client.d.ts.map

package/lib/history/client.es.js

@@ -50,9 +50,14 @@ const generateState = (navigation, currentState, index = 0) => {
     };
 };
 class ClientHistory extends History {
+    goPromiseResolve;
+    goPromiseReject;
+    currentIndex = 0;
+    currentState;
+    historyUnsubscribeCallback;
+    historyWrapper;
     constructor() {
         super();
-        this.currentIndex = 0;
         this.historyWrapper = wrapHistory({
             onNavigate: ({ url, replace, navigateState }) => {
                 this.listener({
@@ -63,16 +68,22 @@ class ClientHistory extends History {
             },
         });
     }
+    onNavigate;
+    getCurrentState() {
+        return this.currentState;
+    }
     init(navigation) {
         this.currentState = isHistoryState(window.history?.state)
             ? window.history.state
             : generateState(navigation);
         this.currentIndex = this.currentState.index;
         this.historyWrapper.init(this.currentState);
-        this.historyWrapper.subscribe(async ({ path, state }) => {
+        this.historyUnsubscribeCallback = this.historyWrapper.subscribe(async ({ path, state, hasUAVisualTransition }) => {
             try {
                 let navigationType;
                 let navigateState;
+                const { viewTransition, viewTransitionTypes } = this.currentState;
+                const isBack = state.index < this.currentState.index;
                 if (isHistoryState(state)) {
                     const { key: prevKey, type: prevType } = this.currentState;
                     const { key, type } = state;
@@ -95,6 +106,10 @@ class ClientHistory extends History {
                     history: true,
                     url: path,
                     navigateState,
+                    hasUAVisualTransition,
+                    viewTransition,
+                    viewTransitionTypes,
+                    isBack,
                 });
                 this.goPromiseResolve?.();
             }
@@ -103,6 +118,9 @@ class ClientHistory extends History {
             }
         });
     }
+    unsubscribe() {
+        this.historyUnsubscribeCallback?.();
+    }
     save(navigation) {
         const { replace, url } = navigation;
         if (!replace) {
@@ -139,6 +157,8 @@ class ClientHistory extends History {
             this.goPromiseResolve = resolve;
             this.goPromiseReject = reject;
         });
+        this.currentState.viewTransition = options?.viewTransition;
+        this.currentState.viewTransitionTypes = options?.viewTransitionTypes;
         this.historyWrapper.history(to);
         return promise;
     }

package/lib/history/client.js

@@ -54,9 +54,14 @@ const generateState = (navigation, currentState, index = 0) => {
     };
 };
 class ClientHistory extends base.History {
+    goPromiseResolve;
+    goPromiseReject;
+    currentIndex = 0;
+    currentState;
+    historyUnsubscribeCallback;
+    historyWrapper;
     constructor() {
         super();
-        this.currentIndex = 0;
         this.historyWrapper = wrapper.wrapHistory({
             onNavigate: ({ url, replace, navigateState }) => {
                 this.listener({
@@ -67,16 +72,22 @@ class ClientHistory extends base.History {
             },
         });
     }
+    onNavigate;
+    getCurrentState() {
+        return this.currentState;
+    }
     init(navigation) {
         this.currentState = isHistoryState(window.history?.state)
             ? window.history.state
             : generateState(navigation);
         this.currentIndex = this.currentState.index;
         this.historyWrapper.init(this.currentState);
-        this.historyWrapper.subscribe(async ({ path, state }) => {
+        this.historyUnsubscribeCallback = this.historyWrapper.subscribe(async ({ path, state, hasUAVisualTransition }) => {
             try {
                 let navigationType;
                 let navigateState;
+                const { viewTransition, viewTransitionTypes } = this.currentState;
+                const isBack = state.index < this.currentState.index;
                 if (isHistoryState(state)) {
                     const { key: prevKey, type: prevType } = this.currentState;
                     const { key, type } = state;
@@ -99,6 +110,10 @@ class ClientHistory extends base.History {
                     history: true,
                     url: path,
                     navigateState,
+                    hasUAVisualTransition,
+                    viewTransition,
+                    viewTransitionTypes,
+                    isBack,
                 });
                 this.goPromiseResolve?.();
             }
@@ -107,6 +122,9 @@ class ClientHistory extends base.History {
             }
         });
     }
+    unsubscribe() {
+        this.historyUnsubscribeCallback?.();
+    }
     save(navigation) {
         const { replace, url } = navigation;
         if (!replace) {
@@ -143,6 +161,8 @@ class ClientHistory extends base.History {
             this.goPromiseResolve = resolve;
             this.goPromiseReject = reject;
         });
+        this.currentState.viewTransition = options?.viewTransition;
+        this.currentState.viewTransitionTypes = options?.viewTransitionTypes;
         this.historyWrapper.history(to);
         return promise;
     }

package/lib/history/server.d.ts

@@ -2,5 +2,6 @@ import { History } from './base';
 export declare class ServerHistory extends History {
     save(): void;
     go(): Promise<void>;
+    getCurrentState(): any;
 }
 //# sourceMappingURL=server.d.ts.map

package/lib/history/server.es.js

@@ -10,6 +10,13 @@ class ServerHistory extends History {
         });
         return Promise.resolve();
     }
+    getCurrentState() {
+        logger.warn({
+            event: 'history.server',
+            message: 'Trying to get current state on server',
+        });
+        return null;
+    }
 }
 
 export { ServerHistory };

package/lib/history/server.js

@@ -14,6 +14,13 @@ class ServerHistory extends base.History {
         });
         return Promise.resolve();
     }
+    getCurrentState() {
+        logger.logger.warn({
+            event: 'history.server',
+            message: 'Trying to get current state on server',
+        });
+        return null;
+    }
 }
 
 exports.ServerHistory = ServerHistory;

package/lib/history/wrapper.browser.js

@@ -14,7 +14,7 @@ const wrapHistory = ({ onNavigate }) => {
                 throw new Error('Method not implemented');
             },
             init: noop,
-            subscribe: noop,
+            subscribe: () => noop,
         };
     }
     let browserHistory = window.history;
@@ -59,12 +59,17 @@ const wrapHistory = ({ onNavigate }) => {
             replaceState(state, '');
         },
         subscribe: (handler) => {
-            window.addEventListener('popstate', ({ state }) => {
+            const listener = ({ state, hasUAVisualTransition }) => {
                 handler({
                     path: window.location.pathname + window.location.search + window.location.hash,
                     state,
+                    hasUAVisualTransition,
                 });
-            });
+            };
+            window.addEventListener('popstate', listener);
+            return () => {
+                window.removeEventListener('popstate', listener);
+            };
         },
     };
 };

package/lib/history/wrapper.d.ts

@@ -9,7 +9,8 @@ export interface Wrapper<T> {
     subscribe(handler: (arg: {
         path: string;
         state: T;
-    }) => void): void;
+        hasUAVisualTransition?: boolean;
+    }) => void): () => void;
 }
 interface NavigateHandler {
     (arg: {

package/lib/history/wrapper.es.js

@@ -14,7 +14,7 @@ const wrapHistory = ({ onNavigate }) => {
                 throw new Error('Method not implemented');
             },
             init: noop,
-            subscribe: noop,
+            subscribe: () => noop,
         };
     }
     let browserHistory = window.history;
@@ -59,12 +59,17 @@ const wrapHistory = ({ onNavigate }) => {
             replaceState(state, '');
         },
         subscribe: (handler) => {
-            window.addEventListener('popstate', ({ state }) => {
+            const listener = ({ state, hasUAVisualTransition }) => {
                 handler({
                     path: window.location.pathname + window.location.search + window.location.hash,
                     state,
+                    hasUAVisualTransition,
                 });
-            });
+            };
+            window.addEventListener('popstate', listener);
+            return () => {
+                window.removeEventListener('popstate', listener);
+            };
         },
     };
 };

package/lib/history/wrapper.js

@@ -22,7 +22,7 @@ const wrapHistory = ({ onNavigate }) => {
                 throw new Error('Method not implemented');
             },
             init: noop__default["default"],
-            subscribe: noop__default["default"],
+            subscribe: () => noop__default["default"],
         };
     }
     let browserHistory = window.history;
@@ -67,12 +67,17 @@ const wrapHistory = ({ onNavigate }) => {
             replaceState(state, '');
         },
         subscribe: (handler) => {
-            window.addEventListener('popstate', ({ state }) => {
+            const listener = ({ state, hasUAVisualTransition }) => {
                 handler({
                     path: window.location.pathname + window.location.search + window.location.hash,
                     state,
+                    hasUAVisualTransition,
                 });
-            });
+            };
+            window.addEventListener('popstate', listener);
+            return () => {
+                window.removeEventListener('popstate', listener);
+            };
         },
     };
 };