@tramvai/module-router 3.5.0 → 3.7.0

package/lib/components/link.browser.js

@@ -4,8 +4,8 @@ import { useNavigate } from '@tinkoff/router';
 import { usePrefetch } from '../hooks/usePrefetch.browser.browser.js';
 
 function Link(props) {
-    const { children, onClick, url, query, replace, target, navigateOptions, prefetch = true, ...otherProps } = props;
-    const navigate = useNavigate({ url, query, replace, ...navigateOptions });
+    const { children, onClick, url, query, replace, target, navigateOptions, prefetch = true, viewTransition = false, ...otherProps } = props;
+    const navigate = useNavigate({ url, query, replace, viewTransition, ...navigateOptions });
     const [linkElement, setLinkElement] = useState(null);
     usePrefetch({
         url,
@@ -27,7 +27,11 @@ function Link(props) {
         navigate();
         onClick && onClick(event);
     }, [navigate, target, onClick]);
-    const extraProps = { href: url, onClick: handleClick, target };
+    const extraProps = {
+        href: url,
+        onClick: handleClick,
+        target,
+    };
     if (isValidElement(children)) {
         return cloneElement(children, {
             // @ts-expect-error

package/lib/components/link.d.ts

@@ -1,16 +1,24 @@
-interface Props {
-    children?: any;
+import type { ReactNode, AnchorHTMLAttributes } from 'react';
+import type { NavigateOptions } from '@tinkoff/router';
+type AnchorLinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'id' | 'className' | 'style'>;
+interface Props extends Partial<AnchorLinkProps> {
+    children?: ReactNode;
     url: string;
     query?: Record<string, string>;
     replace?: boolean;
     target?: string;
     onClick?: Function;
-    navigateOptions?: Record<string, any>;
+    navigateOptions?: Partial<NavigateOptions>;
     /**
      * @description enable or disable target page resources prefetching
      * @default true
      */
     prefetch?: boolean;
+    /**
+     * @description enable view transition for underlying navigation
+     * @default false
+     */
+    viewTransition?: boolean;
 }
 declare function Link(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Link {

package/lib/components/link.es.js

@@ -3,8 +3,8 @@ import { useState, useCallback, isValidElement, cloneElement } from 'react';
 import { useNavigate } from '@tinkoff/router';
 
 function Link(props) {
-    const { children, onClick, url, query, replace, target, navigateOptions, prefetch = true, ...otherProps } = props;
-    const navigate = useNavigate({ url, query, replace, ...navigateOptions });
+    const { children, onClick, url, query, replace, target, navigateOptions, prefetch = true, viewTransition = false, ...otherProps } = props;
+    const navigate = useNavigate({ url, query, replace, viewTransition, ...navigateOptions });
     const [linkElement, setLinkElement] = useState(null);
     const handleClick = useCallback((event) => {
         // ignores the navigation when clicked using right mouse button or
@@ -21,7 +21,11 @@ function Link(props) {
         navigate();
         onClick && onClick(event);
     }, [navigate, target, onClick]);
-    const extraProps = { href: url, onClick: handleClick, target };
+    const extraProps = {
+        href: url,
+        onClick: handleClick,
+        target,
+    };
     if (isValidElement(children)) {
         return cloneElement(children, {
             // @ts-expect-error

package/lib/components/link.js

@@ -7,8 +7,8 @@ var react = require('react');
 var router = require('@tinkoff/router');
 
 function Link(props) {
-    const { children, onClick, url, query, replace, target, navigateOptions, prefetch = true, ...otherProps } = props;
-    const navigate = router.useNavigate({ url, query, replace, ...navigateOptions });
+    const { children, onClick, url, query, replace, target, navigateOptions, prefetch = true, viewTransition = false, ...otherProps } = props;
+    const navigate = router.useNavigate({ url, query, replace, viewTransition, ...navigateOptions });
     const [linkElement, setLinkElement] = react.useState(null);
     const handleClick = react.useCallback((event) => {
         // ignores the navigation when clicked using right mouse button or
@@ -25,7 +25,11 @@ function Link(props) {
         navigate();
         onClick && onClick(event);
     }, [navigate, target, onClick]);
-    const extraProps = { href: url, onClick: handleClick, target };
+    const extraProps = {
+        href: url,
+        onClick: handleClick,
+        target,
+    };
     if (react.isValidElement(children)) {
         return react.cloneElement(children, {
             // @ts-expect-error

package/lib/index.browser.js

@@ -1,7 +1,7 @@
 export { NoSpaRouterModule } from './modules/no-spa.browser.js';
 export { SpaRouterModule } from './modules/spa.browser.js';
 export { RouterChildAppModule } from './modules/child-app.browser.js';
-export { Provider, useNavigate, useRoute, useRouter, useUrl } from '@tinkoff/router';
+export { Provider, useNavigate, useRoute, useRouter, useUrl, useViewTransition } from '@tinkoff/router';
 export { Link } from './components/link.browser.js';
 export * from '@tramvai/tokens-router';
 export { generateForRoot, routerForRoot } from './modules/utils/forRoot.browser.js';

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { NoSpaRouterModule, SpaRouterModule } from './modules/server';
 export { RouterChildAppModule } from './modules/child-app';
-export { Provider, useNavigate, useRoute, useRouter, useUrl } from '@tinkoff/router';
+export { Provider, useNavigate, useRoute, useRouter, useUrl, useViewTransition, } from '@tinkoff/router';
 export { Link } from './components/link';
 export * from '@tramvai/tokens-router';
 export { routerForRoot, generateForRoot } from './modules/utils/forRoot';

package/lib/index.es.js

@@ -1,6 +1,6 @@
 export { NoSpaRouterModule, SpaRouterModule } from './modules/server.es.js';
 export { RouterChildAppModule } from './modules/child-app.es.js';
-export { Provider, useNavigate, useRoute, useRouter, useUrl } from '@tinkoff/router';
+export { Provider, useNavigate, useRoute, useRouter, useUrl, useViewTransition } from '@tinkoff/router';
 export { Link } from './components/link.es.js';
 export * from '@tramvai/tokens-router';
 export { generateForRoot, routerForRoot } from './modules/utils/forRoot.es.js';

package/lib/index.js

@@ -42,6 +42,10 @@ Object.defineProperty(exports, 'useUrl', {
 	enumerable: true,
 	get: function () { return router.useUrl; }
 });
+Object.defineProperty(exports, 'useViewTransition', {
+	enumerable: true,
+	get: function () { return router.useViewTransition; }
+});
 exports.Link = link.Link;
 exports.generateForRoot = forRoot.generateForRoot;
 exports.routerForRoot = forRoot.routerForRoot;

package/lib/modules/common.browser.js

@@ -3,6 +3,7 @@ import { provide, commandLineListTokens } from '@tramvai/core';
 import { setLogger } from '@tinkoff/router';
 import { LOGGER_TOKEN, COMBINE_REDUCERS } from '@tramvai/tokens-common';
 import { ROUTER_TOKEN, ROUTES_TOKEN, ROUTE_RESOLVE_TOKEN, ROUTER_GUARD_TOKEN, ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN } from '@tramvai/tokens-router';
+import { RENDER_SLOTS, ResourceType, ResourceSlot } from '@tramvai/tokens-render';
 import { routerClassToken, additionalRouterParameters, routeTransformToken, onChangeHooksToken, beforeResolveHooksToken, beforeNavigateHooksToken, afterNavigateHooksToken, beforeUpdateCurrentHooksToken, afterUpdateCurrentHooksToken } from './tokens.browser.js';
 import { RouterStore } from '../stores/RouterStore.browser.js';
 import { commonGuards } from './guards/common/index.browser.js';
@@ -22,6 +23,7 @@ const providers = [
                 ...additionalParameters,
                 trailingSlash: true,
                 mergeSlashes: true,
+                enableViewTransitions: process.env.__TRAMVAI_VIEW_TRANSITIONS === 'true',
                 routes: flatten(routes !== null && routes !== void 0 ? routes : []).map(routeTransform),
             });
             if (routeResolve) {
@@ -127,6 +129,20 @@ const providers = [
         multi: true,
         useValue: RouterStore,
     }),
+    ...(process.env.__TRAMVAI_VIEW_TRANSITIONS === 'true'
+        ? [
+            provide({
+                provide: RENDER_SLOTS,
+                useValue: [
+                    {
+                        type: ResourceType.inlineStyle,
+                        slot: ResourceSlot.HEAD_CORE_STYLES,
+                        payload: '@media (prefers-reduced-motion) { ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none !important; } }',
+                    },
+                ],
+            }),
+        ]
+        : []),
 ];
 
 export { providers };

package/lib/modules/common.es.js

@@ -3,6 +3,7 @@ import { provide, commandLineListTokens } from '@tramvai/core';
 import { setLogger } from '@tinkoff/router';
 import { LOGGER_TOKEN, COMBINE_REDUCERS } from '@tramvai/tokens-common';
 import { ROUTER_TOKEN, ROUTES_TOKEN, ROUTE_RESOLVE_TOKEN, ROUTER_GUARD_TOKEN, ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN } from '@tramvai/tokens-router';
+import { RENDER_SLOTS, ResourceType, ResourceSlot } from '@tramvai/tokens-render';
 import { routerClassToken, additionalRouterParameters, routeTransformToken, onChangeHooksToken, beforeResolveHooksToken, beforeNavigateHooksToken, afterNavigateHooksToken, beforeUpdateCurrentHooksToken, afterUpdateCurrentHooksToken } from './tokens.es.js';
 import { RouterStore } from '../stores/RouterStore.es.js';
 import { commonGuards } from './guards/common/index.es.js';
@@ -22,6 +23,7 @@ const providers = [
                 ...additionalParameters,
                 trailingSlash: true,
                 mergeSlashes: true,
+                enableViewTransitions: process.env.__TRAMVAI_VIEW_TRANSITIONS === 'true',
                 routes: flatten(routes !== null && routes !== void 0 ? routes : []).map(routeTransform),
             });
             if (routeResolve) {
@@ -127,6 +129,20 @@ const providers = [
         multi: true,
         useValue: RouterStore,
     }),
+    ...(process.env.__TRAMVAI_VIEW_TRANSITIONS === 'true'
+        ? [
+            provide({
+                provide: RENDER_SLOTS,
+                useValue: [
+                    {
+                        type: ResourceType.inlineStyle,
+                        slot: ResourceSlot.HEAD_CORE_STYLES,
+                        payload: '@media (prefers-reduced-motion) { ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none !important; } }',
+                    },
+                ],
+            }),
+        ]
+        : []),
 ];
 
 export { providers };

package/lib/modules/common.js

@@ -7,6 +7,7 @@ var core = require('@tramvai/core');
 var router = require('@tinkoff/router');
 var tokensCommon = require('@tramvai/tokens-common');
 var tokensRouter = require('@tramvai/tokens-router');
+var tokensRender = require('@tramvai/tokens-render');
 var tokens = require('./tokens.js');
 var RouterStore = require('../stores/RouterStore.js');
 var index = require('./guards/common/index.js');
@@ -30,6 +31,7 @@ const providers = [
                 ...additionalParameters,
                 trailingSlash: true,
                 mergeSlashes: true,
+                enableViewTransitions: process.env.__TRAMVAI_VIEW_TRANSITIONS === 'true',
                 routes: flatten__default["default"](routes !== null && routes !== void 0 ? routes : []).map(routeTransform),
             });
             if (routeResolve) {
@@ -135,6 +137,20 @@ const providers = [
         multi: true,
         useValue: RouterStore.RouterStore,
     }),
+    ...(process.env.__TRAMVAI_VIEW_TRANSITIONS === 'true'
+        ? [
+            core.provide({
+                provide: tokensRender.RENDER_SLOTS,
+                useValue: [
+                    {
+                        type: tokensRender.ResourceType.inlineStyle,
+                        slot: tokensRender.ResourceSlot.HEAD_CORE_STYLES,
+                        payload: '@media (prefers-reduced-motion) { ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none !important; } }',
+                    },
+                ],
+            }),
+        ]
+        : []),
 ];
 
 exports.providers = providers;

package/lib/modules/tokens/common/render.browser.js

@@ -3,8 +3,8 @@ import { Provider } from '@tinkoff/router';
 
 const provideRouter = ({ router }) => {
     const serverState = {
-        currentRoute: router.getCurrentRoute(),
-        currentUrl: router.getCurrentUrl(),
+        route: router.getCurrentRoute(),
+        url: router.getCurrentUrl(),
     };
     return (render) => {
         return (jsx(Provider, { router: router, serverState: serverState, children: render }));

package/lib/modules/tokens/common/render.es.js

@@ -3,8 +3,8 @@ import { Provider } from '@tinkoff/router';
 
 const provideRouter = ({ router }) => {
     const serverState = {
-        currentRoute: router.getCurrentRoute(),
-        currentUrl: router.getCurrentUrl(),
+        route: router.getCurrentRoute(),
+        url: router.getCurrentUrl(),
     };
     return (render) => {
         return (jsx(Provider, { router: router, serverState: serverState, children: render }));

package/lib/modules/tokens/common/render.js

@@ -7,8 +7,8 @@ var router = require('@tinkoff/router');
 
 const provideRouter = ({ router: router$1 }) => {
     const serverState = {
-        currentRoute: router$1.getCurrentRoute(),
-        currentUrl: router$1.getCurrentUrl(),
+        route: router$1.getCurrentRoute(),
+        url: router$1.getCurrentUrl(),
     };
     return (render) => {
         return (jsxRuntime.jsx(router.Provider, { router: router$1, serverState: serverState, children: render }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-router",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "",
   "main": "lib/index.js",
   "browser": {
@@ -26,27 +26,27 @@
   },
   "dependencies": {
     "@tinkoff/errors": "0.4.1",
-    "@tinkoff/router": "0.3.1",
+    "@tinkoff/router": "0.3.2",
     "@tinkoff/url": "0.9.1",
-    "@tramvai/react": "3.5.0",
+    "@tramvai/react": "3.7.0",
     "@tramvai/safe-strings": "0.6.1",
-    "@tramvai/tokens-child-app": "3.5.0",
-    "@tramvai/tokens-render": "3.5.0",
-    "@tramvai/tokens-router": "3.5.0",
-    "@tramvai/tokens-server": "3.5.0",
-    "@tramvai/experiments": "3.5.0"
+    "@tramvai/tokens-child-app": "3.7.0",
+    "@tramvai/tokens-render": "3.7.0",
+    "@tramvai/tokens-router": "3.7.0",
+    "@tramvai/tokens-server": "3.7.0",
+    "@tramvai/experiments": "3.7.0"
   },
   "peerDependencies": {
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/cli": "3.5.0",
-    "@tramvai/core": "3.5.0",
-    "@tramvai/module-log": "3.5.0",
-    "@tramvai/module-server": "3.5.0",
-    "@tramvai/papi": "3.5.0",
-    "@tramvai/state": "3.5.0",
-    "@tramvai/test-helpers": "3.5.0",
-    "@tramvai/test-mocks": "3.5.0",
-    "@tramvai/tokens-common": "3.5.0",
+    "@tramvai/cli": "3.7.0",
+    "@tramvai/core": "3.7.0",
+    "@tramvai/module-log": "3.7.0",
+    "@tramvai/module-server": "3.7.0",
+    "@tramvai/papi": "3.7.0",
+    "@tramvai/state": "3.7.0",
+    "@tramvai/test-helpers": "3.7.0",
+    "@tramvai/test-mocks": "3.7.0",
+    "@tramvai/tokens-common": "3.7.0",
     "@tinkoff/dippy": "0.9.1",
     "react": "*",
     "tslib": "^2.4.0"