@tramvai/module-autoscroll 7.20.3 → 7.21.1

package/README.md

@@ -30,6 +30,8 @@ createApp({
 
 `behavior: smooth` is not supported by every browser (e.g. doesn't work in Safari). In this case you can use polyfill `smoothscroll-polyfill` that you should add to your app.
 
+Browser scroll restoration is disabled when autoscroll is enabled (`window.history.scrollRestoration = 'manual'`).
+
 ## How to
 
 ### Disable autoscroll for page
@@ -97,3 +99,28 @@ const providers = [
   }),
 ];
 ```
+
+#### Local
+
+You can also provide a function that will return scroll top value, for example if you save page scroll position in sessionStorage and then want to restore it:
+
+```tsx
+import { AUTOSCROLL_SCROLL_TOP_TOKEN } from '@tramvai/module-autoscroll';
+import { provide } from '@tramvai/core';
+
+const providers = [
+  // ...,
+  provide({
+    provide: AUTOSCROLL_SCROLL_TOP_TOKEN,
+    useValue: () => {
+      try {
+        const savedScrollTop = JSON.parse(sessionStorage.get('scrollTop'));
+        // for example, if you save scroll position by navigation index
+        return savedScrollTop[history.state.index] ?? 0;
+      } catch (e) {
+        return 0;
+      }
+    },
+  }),
+];
+```

package/lib/components/Autoscroll.d.ts

@@ -1,2 +1,2 @@
-export declare function Autoscroll(): null;
+export declare const Autoscroll: import("react").MemoExoticComponent<() => null>;
 //# sourceMappingURL=Autoscroll.d.ts.map

package/lib/components/Autoscroll.es.js

@@ -1,13 +1,15 @@
-import { useRef, useEffect } from 'react';
-import { useRoute, useUrl } from '@tramvai/module-router';
+import { memo, useMemo, useRef } from 'react';
+import { useRoute, useUrl, useViewTransition } from '@tramvai/module-router';
 import { optional } from '@tinkoff/dippy';
 import { useDi } from '@tramvai/react';
+import { LOGGER_TOKEN } from '@tramvai/tokens-common';
+import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
 import { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN } from '../tokens.es.js';
 
 const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
 const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
 const scrollToTop = (behavior, top) => {
-    // В некоторых браузерах не поддерживается scrollTo с одним параметром
+    // cross-browser `window.scrollTo` parameters
     try {
         window.scrollTo({ top, left: 0, behavior });
     }
@@ -15,10 +17,6 @@ const scrollToTop = (behavior, top) => {
         window.scrollTo(0, top);
     }
 };
-const isAutoScrollEnabled = (route, prevRoute) => {
-    const isDisabled = route.navigateState?.disableAutoscroll || prevRoute.navigateState?.disableAutoscroll;
-    return !isDisabled;
-};
 const scrollToAnchor = (anchor, behavior) => {
     try {
         document.querySelector(anchor)?.scrollIntoView({
@@ -30,43 +28,59 @@ const scrollToAnchor = (anchor, behavior) => {
         return false;
     }
 };
-function usePreviousValue(value) {
-    const prevValueRef = useRef(value);
-    /** Сохраняем предыдущее значение */
-    useEffect(() => {
-        prevValueRef.current = value;
-    }, [value]);
-    return prevValueRef.current;
-}
-// Поведение с подскроллом похоже на
-// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
-function Autoscroll() {
-    const globalScrollBehavior = useDi(optional(AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
-    const scrollTop = useDi(optional(AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+// @reference https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
+const Autoscroll = memo(() => {
     const route = useRoute();
-    const prevRoute = usePreviousValue(route);
     const url = useUrl();
-    const routeRef = useRef(url);
-    const shouldScroll = useRef(!!routeRef.current.hash && isAutoScrollEnabled(route, prevRoute));
-    // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
-    useEffect(() => {
-        if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
-            routeRef.current = url;
-            shouldScroll.current = isAutoScrollEnabled(route, prevRoute);
+    const { isTransitioning } = useViewTransition(url.pathname);
+    const scrollBehaviorFactory = useDi(optional(AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) ?? DEFAULT_AUTOSCROLL_BEHAVIOR;
+    const scrollTopFactory = useDi(optional(AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+    const logger = useDi(LOGGER_TOKEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const log = useMemo(() => logger('autoscroll'), []);
+    const previousUrl = useRef(url);
+    const shouldScroll = useRef(false);
+    useIsomorphicLayoutEffect(() => {
+        if (url.pathname !== previousUrl.current.pathname || url.hash !== previousUrl.current.hash) {
+            shouldScroll.current = true;
         }
+        // skip unnecessary checks, if url has not changed and shouldScroll.current set to false - we don't need to scroll
         if (!shouldScroll.current) {
             return;
         }
-        const scrollBehavior = route?.navigateState?.autoscrollBehavior || globalScrollBehavior;
-        if (!url.hash) {
-            scrollToTop(scrollBehavior, scrollTop);
+        // when VT is enabled, we will have a two re-renderw with `isTransitioning: true` (with current and next url),
+        // and only after that `isTransitioning` will be false and url will be updated to the next one.
+        if (isTransitioning) {
+            return;
+        }
+        // disable autoscroll for current page if `disableAutoscroll` is set in route history state
+        if (route.navigateState?.disableAutoscroll) {
+            previousUrl.current = url;
             shouldScroll.current = false;
+            log.debug('Skipping autoscroll because "disableAutoscroll" is set in route history state');
+            return;
         }
-        else {
-            shouldScroll.current = !scrollToAnchor(url.hash, scrollBehavior);
+        previousUrl.current = url;
+        shouldScroll.current = false;
+        const scrollBehavior = route.navigateState?.autoscrollBehavior ??
+            (typeof scrollBehaviorFactory === 'function'
+                ? scrollBehaviorFactory()
+                : scrollBehaviorFactory);
+        const scrollTop = typeof scrollTopFactory === 'function' ? scrollTopFactory() : scrollTopFactory;
+        function scroll() {
+            if (!url.hash) {
+                log.debug(`Scrolling to top ${scrollTop}px with behavior: ${scrollBehavior}`);
+                scrollToTop(scrollBehavior, scrollTop);
+            }
+            else {
+                log.debug(`Scrolling to anchor ${url.hash} with behavior: ${scrollBehavior}`);
+                scrollToAnchor(url.hash, scrollBehavior);
+            }
         }
-    });
+        scroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [route, url, isTransitioning]);
     return null;
-}
+});
 
 export { Autoscroll };

package/lib/components/Autoscroll.js

@@ -2,16 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react$1 = require('react');
+var react = require('react');
 var moduleRouter = require('@tramvai/module-router');
 var dippy = require('@tinkoff/dippy');
-var react = require('@tramvai/react');
+var react$1 = require('@tramvai/react');
+var tokensCommon = require('@tramvai/tokens-common');
+var reactHooks = require('@tinkoff/react-hooks');
 var tokens = require('../tokens.js');
 
 const DEFAULT_AUTOSCROLL_BEHAVIOR = 'smooth';
 const DEFAULT_AUTOSCROLL_SCROLL_TOP = 0;
 const scrollToTop = (behavior, top) => {
-    // В некоторых браузерах не поддерживается scrollTo с одним параметром
+    // cross-browser `window.scrollTo` parameters
     try {
         window.scrollTo({ top, left: 0, behavior });
     }
@@ -19,10 +21,6 @@ const scrollToTop = (behavior, top) => {
         window.scrollTo(0, top);
     }
 };
-const isAutoScrollEnabled = (route, prevRoute) => {
-    const isDisabled = route.navigateState?.disableAutoscroll || prevRoute.navigateState?.disableAutoscroll;
-    return !isDisabled;
-};
 const scrollToAnchor = (anchor, behavior) => {
     try {
         document.querySelector(anchor)?.scrollIntoView({
@@ -34,43 +32,59 @@ const scrollToAnchor = (anchor, behavior) => {
         return false;
     }
 };
-function usePreviousValue(value) {
-    const prevValueRef = react$1.useRef(value);
-    /** Сохраняем предыдущее значение */
-    react$1.useEffect(() => {
-        prevValueRef.current = value;
-    }, [value]);
-    return prevValueRef.current;
-}
-// Поведение с подскроллом похоже на
-// https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
-function Autoscroll() {
-    const globalScrollBehavior = react.useDi(dippy.optional(tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) || DEFAULT_AUTOSCROLL_BEHAVIOR;
-    const scrollTop = react.useDi(dippy.optional(tokens.AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+// @reference https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top
+const Autoscroll = react.memo(() => {
     const route = moduleRouter.useRoute();
-    const prevRoute = usePreviousValue(route);
     const url = moduleRouter.useUrl();
-    const routeRef = react$1.useRef(url);
-    const shouldScroll = react$1.useRef(!!routeRef.current.hash && isAutoScrollEnabled(route, prevRoute));
-    // Так как отрисовка нужного нам элемента происходит после обновления route, при первом срабатывании эффекта мы обновляем shouldScroll, а при втором скроллим
-    react$1.useEffect(() => {
-        if (url.pathname !== routeRef.current.pathname || url.hash !== routeRef.current.hash) {
-            routeRef.current = url;
-            shouldScroll.current = isAutoScrollEnabled(route, prevRoute);
+    const { isTransitioning } = moduleRouter.useViewTransition(url.pathname);
+    const scrollBehaviorFactory = react$1.useDi(dippy.optional(tokens.AUTOSCROLL_BEHAVIOR_MODE_TOKEN)) ?? DEFAULT_AUTOSCROLL_BEHAVIOR;
+    const scrollTopFactory = react$1.useDi(dippy.optional(tokens.AUTOSCROLL_SCROLL_TOP_TOKEN)) ?? DEFAULT_AUTOSCROLL_SCROLL_TOP;
+    const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const log = react.useMemo(() => logger('autoscroll'), []);
+    const previousUrl = react.useRef(url);
+    const shouldScroll = react.useRef(false);
+    reactHooks.useIsomorphicLayoutEffect(() => {
+        if (url.pathname !== previousUrl.current.pathname || url.hash !== previousUrl.current.hash) {
+            shouldScroll.current = true;
         }
+        // skip unnecessary checks, if url has not changed and shouldScroll.current set to false - we don't need to scroll
         if (!shouldScroll.current) {
             return;
         }
-        const scrollBehavior = route?.navigateState?.autoscrollBehavior || globalScrollBehavior;
-        if (!url.hash) {
-            scrollToTop(scrollBehavior, scrollTop);
+        // when VT is enabled, we will have a two re-renderw with `isTransitioning: true` (with current and next url),
+        // and only after that `isTransitioning` will be false and url will be updated to the next one.
+        if (isTransitioning) {
+            return;
+        }
+        // disable autoscroll for current page if `disableAutoscroll` is set in route history state
+        if (route.navigateState?.disableAutoscroll) {
+            previousUrl.current = url;
             shouldScroll.current = false;
+            log.debug('Skipping autoscroll because "disableAutoscroll" is set in route history state');
+            return;
         }
-        else {
-            shouldScroll.current = !scrollToAnchor(url.hash, scrollBehavior);
+        previousUrl.current = url;
+        shouldScroll.current = false;
+        const scrollBehavior = route.navigateState?.autoscrollBehavior ??
+            (typeof scrollBehaviorFactory === 'function'
+                ? scrollBehaviorFactory()
+                : scrollBehaviorFactory);
+        const scrollTop = typeof scrollTopFactory === 'function' ? scrollTopFactory() : scrollTopFactory;
+        function scroll() {
+            if (!url.hash) {
+                log.debug(`Scrolling to top ${scrollTop}px with behavior: ${scrollBehavior}`);
+                scrollToTop(scrollBehavior, scrollTop);
+            }
+            else {
+                log.debug(`Scrolling to anchor ${url.hash} with behavior: ${scrollBehavior}`);
+                scrollToAnchor(url.hash, scrollBehavior);
+            }
         }
-    });
+        scroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [route, url, isTransitioning]);
     return null;
-}
+});
 
 exports.Autoscroll = Autoscroll;

package/lib/index.es.js

@@ -1,6 +1,8 @@
 import { __decorate } from 'tslib';
-import { Module } from '@tramvai/core';
+import { Module, provide, commandLineListTokens } from '@tramvai/core';
 import { LAYOUT_OPTIONS } from '@tramvai/tokens-render';
+import { ROUTER_TOKEN } from '@tramvai/module-router';
+import { LOGGER_TOKEN } from '@tramvai/tokens-common';
 import { Autoscroll } from './components/Autoscroll.es.js';
 export { Autoscroll } from './components/Autoscroll.es.js';
 export { AUTOSCROLL_BEHAVIOR_MODE_TOKEN, AUTOSCROLL_SCROLL_TOP_TOKEN } from './tokens.es.js';
@@ -10,7 +12,7 @@ let AutoscrollModule = class AutoscrollModule {
 AutoscrollModule = __decorate([
     Module({
         providers: [
-            {
+            provide({
                 provide: LAYOUT_OPTIONS,
                 useValue: {
                     components: {
@@ -18,7 +20,46 @@ AutoscrollModule = __decorate([
                     },
                 },
                 multi: true,
-            },
+            }),
+            ...(typeof window !== 'undefined'
+                ? [
+                    provide({
+                        provide: commandLineListTokens.customerStart,
+                        useFactory: ({ logger, router }) => {
+                            const log = logger('autoscroll');
+                            // disable browser scroll restoration, to avoid conflicts with autoscroll
+                            const disableBrowserScrollRestoration = () => {
+                                log.debug('Disabling browser scroll restoration, autoscroll will be applied for this history entry');
+                                window.history.scrollRestoration = 'manual';
+                            };
+                            // enable browser scroll restoration, if autoscroll was disabled
+                            const enableBrowserScrollRestoration = () => {
+                                log.debug('Enable browser scroll restoration, autoscroll was disabled for this history entry');
+                                window.history.scrollRestoration = 'auto';
+                            };
+                            return () => {
+                                // for initial page load
+                                if (!window.history.state?.navigateState?.disableAutoscroll) {
+                                    disableBrowserScrollRestoration();
+                                }
+                                // for sequent navigations
+                                router.registerSyncHook('change', async (navigation) => {
+                                    if (!navigation.navigateState?.disableAutoscroll) {
+                                        disableBrowserScrollRestoration();
+                                    }
+                                    else {
+                                        enableBrowserScrollRestoration();
+                                    }
+                                });
+                            };
+                        },
+                        deps: {
+                            logger: LOGGER_TOKEN,
+                            router: ROUTER_TOKEN,
+                        },
+                    }),
+                ]
+                : []),
         ],
     })
 ], AutoscrollModule);

package/lib/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var core = require('@tramvai/core');
 var tokensRender = require('@tramvai/tokens-render');
+var moduleRouter = require('@tramvai/module-router');
+var tokensCommon = require('@tramvai/tokens-common');
 var Autoscroll = require('./components/Autoscroll.js');
 var tokens = require('./tokens.js');
 
@@ -13,7 +15,7 @@ exports.AutoscrollModule = class AutoscrollModule {
 exports.AutoscrollModule = tslib.__decorate([
     core.Module({
         providers: [
-            {
+            core.provide({
                 provide: tokensRender.LAYOUT_OPTIONS,
                 useValue: {
                     components: {
@@ -21,7 +23,46 @@ exports.AutoscrollModule = tslib.__decorate([
                     },
                 },
                 multi: true,
-            },
+            }),
+            ...(typeof window !== 'undefined'
+                ? [
+                    core.provide({
+                        provide: core.commandLineListTokens.customerStart,
+                        useFactory: ({ logger, router }) => {
+                            const log = logger('autoscroll');
+                            // disable browser scroll restoration, to avoid conflicts with autoscroll
+                            const disableBrowserScrollRestoration = () => {
+                                log.debug('Disabling browser scroll restoration, autoscroll will be applied for this history entry');
+                                window.history.scrollRestoration = 'manual';
+                            };
+                            // enable browser scroll restoration, if autoscroll was disabled
+                            const enableBrowserScrollRestoration = () => {
+                                log.debug('Enable browser scroll restoration, autoscroll was disabled for this history entry');
+                                window.history.scrollRestoration = 'auto';
+                            };
+                            return () => {
+                                // for initial page load
+                                if (!window.history.state?.navigateState?.disableAutoscroll) {
+                                    disableBrowserScrollRestoration();
+                                }
+                                // for sequent navigations
+                                router.registerSyncHook('change', async (navigation) => {
+                                    if (!navigation.navigateState?.disableAutoscroll) {
+                                        disableBrowserScrollRestoration();
+                                    }
+                                    else {
+                                        enableBrowserScrollRestoration();
+                                    }
+                                });
+                            };
+                        },
+                        deps: {
+                            logger: tokensCommon.LOGGER_TOKEN,
+                            router: moduleRouter.ROUTER_TOKEN,
+                        },
+                    }),
+                ]
+                : []),
         ],
     })
 ], exports.AutoscrollModule);

package/lib/tokens.d.ts

@@ -1,9 +1,14 @@
+export type AutoscrollBehavior = 'smooth' | 'auto';
 export declare const AUTOSCROLL_BEHAVIOR_MODE_TOKEN: ("smooth" & {
     __type?: "base token" | undefined;
 }) | ("auto" & {
     __type?: "base token" | undefined;
+}) | ((() => AutoscrollBehavior) & {
+    __type?: "base token" | undefined;
 });
-export declare const AUTOSCROLL_SCROLL_TOP_TOKEN: number & {
+export declare const AUTOSCROLL_SCROLL_TOP_TOKEN: (number & {
+    __type?: "base token" | undefined;
+}) | ((() => number) & {
     __type?: "base token" | undefined;
-};
+});
 //# sourceMappingURL=tokens.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-autoscroll",
-  "version": "7.20.3",
+  "version": "7.21.1",
   "description": "Компонент с автопрокруткой к началу страницы",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -16,14 +16,18 @@
     "build": "tramvai-build --forPublish --preserveModules",
     "watch": "tsc -w"
   },
+  "dependencies": {
+    "tslib": "^2.4.0"
+  },
   "peerDependencies": {
     "@tinkoff/dippy": "^1.0.0",
-    "@tramvai/core": "7.20.3",
-    "@tramvai/module-router": "7.20.3",
-    "@tramvai/react": "7.20.3",
-    "@tramvai/tokens-render": "7.20.3",
-    "react": ">=16.14.0",
-    "tslib": "^2.4.0"
+    "@tinkoff/react-hooks": "0.6.1",
+    "@tramvai/core": "7.21.1",
+    "@tramvai/module-router": "7.21.1",
+    "@tramvai/react": "7.21.1",
+    "@tramvai/tokens-common": "7.21.1",
+    "@tramvai/tokens-render": "7.21.1",
+    "react": ">=16.14.0"
   },
   "module": "lib/index.es.js",
   "license": "Apache-2.0"