@tramvai/module-router 2.70.1 → 2.72.0

package/lib/components/link.browser.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, isValidElement, cloneElement } from 'react';
+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 [linkElement, setLinkElement] = useState(null);
+    usePrefetch({
+        url,
+        prefetch,
+        target: linkElement,
+    });
+    const handleClick = useCallback((event) => {
+        // ignores the navigation when clicked using right mouse button or
+        // by holding a special modifier key: ctrl, command, win, alt, shift
+        if (target ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.shiftKey ||
+            event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        navigate();
+        onClick && onClick(event);
+    }, [navigate, target, onClick]);
+    const extraProps = { href: url, onClick: handleClick, target };
+    if (isValidElement(children)) {
+        return cloneElement(children, {
+            // @ts-expect-error
+            ref: (element) => {
+                // @ts-expect-error
+                const { ref } = children;
+                // preserve original ref
+                if (typeof ref === 'function') {
+                    ref(element);
+                }
+                else if (typeof ref === 'object' && ref !== null) {
+                    ref.current = element;
+                }
+                setLinkElement(element);
+            },
+            ...extraProps,
+        });
+    }
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    jsx("a", { ref: (element) => setLinkElement(element), ...otherProps, ...extraProps, children: children }));
+}
+Link.displayName = 'Link';
+
+export { Link };

package/lib/components/link.es.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+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 [linkElement, setLinkElement] = useState(null);
+    const handleClick = useCallback((event) => {
+        // ignores the navigation when clicked using right mouse button or
+        // by holding a special modifier key: ctrl, command, win, alt, shift
+        if (target ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.shiftKey ||
+            event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        navigate();
+        onClick && onClick(event);
+    }, [navigate, target, onClick]);
+    const extraProps = { href: url, onClick: handleClick, target };
+    if (isValidElement(children)) {
+        return cloneElement(children, {
+            // @ts-expect-error
+            ref: (element) => {
+                // @ts-expect-error
+                const { ref } = children;
+                // preserve original ref
+                if (typeof ref === 'function') {
+                    ref(element);
+                }
+                else if (typeof ref === 'object' && ref !== null) {
+                    ref.current = element;
+                }
+                setLinkElement(element);
+            },
+            ...extraProps,
+        });
+    }
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    jsx("a", { ref: (element) => setLinkElement(element), ...otherProps, ...extraProps, children: children }));
+}
+Link.displayName = 'Link';
+
+export { Link };

package/lib/components/link.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+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 [linkElement, setLinkElement] = react.useState(null);
+    const handleClick = react.useCallback((event) => {
+        // ignores the navigation when clicked using right mouse button or
+        // by holding a special modifier key: ctrl, command, win, alt, shift
+        if (target ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.shiftKey ||
+            event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        navigate();
+        onClick && onClick(event);
+    }, [navigate, target, onClick]);
+    const extraProps = { href: url, onClick: handleClick, target };
+    if (react.isValidElement(children)) {
+        return react.cloneElement(children, {
+            // @ts-expect-error
+            ref: (element) => {
+                // @ts-expect-error
+                const { ref } = children;
+                // preserve original ref
+                if (typeof ref === 'function') {
+                    ref(element);
+                }
+                else if (typeof ref === 'object' && ref !== null) {
+                    ref.current = element;
+                }
+                setLinkElement(element);
+            },
+            ...extraProps,
+        });
+    }
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    jsxRuntime.jsx("a", { ref: (element) => setLinkElement(element), ...otherProps, ...extraProps, children: children }));
+}
+Link.displayName = 'Link';
+
+exports.Link = Link;

package/lib/hooks/usePageService.browser.js

@@ -0,0 +1,10 @@
+import { useRoute } from '@tinkoff/router';
+import { useDi } from '@tramvai/react';
+import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+
+const usePageService = () => {
+    useRoute();
+    return useDi(PAGE_SERVICE_TOKEN);
+};
+
+export { usePageService };

package/lib/hooks/usePageService.es.js

@@ -0,0 +1,10 @@
+import { useRoute } from '@tinkoff/router';
+import { useDi } from '@tramvai/react';
+import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+
+const usePageService = () => {
+    useRoute();
+    return useDi(PAGE_SERVICE_TOKEN);
+};
+
+export { usePageService };

package/lib/hooks/usePageService.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var router = require('@tinkoff/router');
+var react = require('@tramvai/react');
+var tokensRouter = require('@tramvai/tokens-router');
+
+const usePageService = () => {
+    router.useRoute();
+    return react.useDi(tokensRouter.PAGE_SERVICE_TOKEN);
+};
+
+exports.usePageService = usePageService;

package/lib/hooks/usePrefetch.browser.browser.js

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { useDi } from '@tramvai/react';
+import { LINK_PREFETCH_MANAGER_TOKEN } from '@tramvai/tokens-router';
+import { requestIdleCallback, cancelIdleCallback } from '../utils/requestIdleCallback.browser.js';
+import { optional } from '@tinkoff/dippy';
+
+const isUserNetworkConditionsSuitableForPrefetch = () => {
+    var _a;
+    const { saveData, effectiveType = '' } = (_a = navigator.connection) !== null && _a !== void 0 ? _a : {};
+    return !saveData && !(effectiveType === '2g' || effectiveType === 'slow-2g');
+};
+const usePrefetch = ({ url, target, prefetch, }) => {
+    const linkPrefetchManager = useDi(optional(LINK_PREFETCH_MANAGER_TOKEN));
+    useEffect(() => {
+        if (!target || !prefetch || !linkPrefetchManager) {
+            return;
+        }
+        let idleId = null;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                // when `Link` element in viewport
+                if (entry.isIntersecting && entry.intersectionRatio > 0) {
+                    // only once
+                    observer.disconnect();
+                    if (isUserNetworkConditionsSuitableForPrefetch()) {
+                        // trigger prefetching when browser is idle
+                        idleId = requestIdleCallback(() => {
+                            linkPrefetchManager.prefetch(url);
+                        });
+                    }
+                }
+            });
+        });
+        observer.observe(target);
+        return () => {
+            observer.disconnect();
+            cancelIdleCallback(idleId);
+        };
+    }, [url, target, prefetch, linkPrefetchManager]);
+};
+
+export { usePrefetch };