@tinkoff/router 0.1.79 → 0.1.80

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

@@ -1,6 +1,12 @@
-import React from 'react';
+import type { FunctionComponent, ReactNode } from 'react';
+import type { Url } from '@tinkoff/url';
 import type { AbstractRouter } from '../../router/abstract';
-export declare const Provider: React.FunctionComponent<{
+import type { NavigationRoute } from '../../types';
+export declare const Provider: FunctionComponent<{
     router: AbstractRouter;
-    children?: React.ReactNode;
+    serverState?: {
+        currentRoute: NavigationRoute;
+        currentUrl: Url;
+    };
+    children?: ReactNode;
 }>;

package/lib/index.browser.js

@@ -8,8 +8,9 @@ import each from '@tinkoff/utils/array/each';
 import find from '@tinkoff/utils/array/find';
 import findIndex from '@tinkoff/utils/array/findIndex';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useContext, useCallback, isValidElement, cloneElement } from 'react';
-import { useIsomorphicLayoutEffect, useShallowEqual } from '@tinkoff/react-hooks';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { createContext, useContext, useCallback, isValidElement, cloneElement } from 'react';
+import { useShallowEqual } from '@tinkoff/react-hooks';
 
 const PARAMETER_DELIMITER = ':';
 const WILDCARD_REGEXP = /\*/;
@@ -173,6 +174,14 @@ class AbstractRouter {
         // same as getCurrentRoute
         return (_b = (_a = this.currentNavigation) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : (_c = this.lastNavigation) === null || _c === void 0 ? void 0 : _c.url;
     }
+    getLastRoute() {
+        var _a;
+        return (_a = this.lastNavigation) === null || _a === void 0 ? void 0 : _a.to;
+    }
+    getLastUrl() {
+        var _a;
+        return (_a = this.lastNavigation) === null || _a === void 0 ? void 0 : _a.url;
+    }
     commitNavigation(navigation) {
         logger.debug({
             event: 'commit-navigation',
@@ -182,9 +191,9 @@ class AbstractRouter {
             // in case we came from history do not history back to prevent infinity recursive calls
             this.history.save(navigation);
         }
-        this.runSyncHooks('change', navigation);
         this.lastNavigation = navigation;
         this.currentNavigation = null;
+        this.runSyncHooks('change', navigation);
     }
     async updateCurrentRoute(updateRouteOptions) {
         return this.internalUpdateCurrentRoute(updateRouteOptions, {});
@@ -1126,17 +1135,10 @@ const RouterContext = createContext(null);
 const RouteContext = createContext(null);
 const UrlContext = createContext(null);
 
-const Provider = ({ router, children }) => {
-    const [state, setState] = useState({
-        route: router.getCurrentRoute(),
-        url: router.getCurrentUrl(),
-    });
-    useIsomorphicLayoutEffect(() => {
-        return router.registerSyncHook('change', ({ to, url }) => {
-            setState({ route: to, url });
-        });
-    }, [router]);
-    return (jsx(RouterContext.Provider, Object.assign({ value: router }, { children: jsx(RouteContext.Provider, Object.assign({ value: state.route }, { children: jsx(UrlContext.Provider, Object.assign({ value: state.url }, { children: children }), void 0) }), void 0) }), void 0));
+const Provider = ({ router, serverState, children }) => {
+    const route = useSyncExternalStore((cb) => router.registerSyncHook('change', cb), () => router.getLastRoute(), serverState ? () => serverState.currentRoute : () => router.getLastRoute());
+    const url = useSyncExternalStore((cb) => router.registerSyncHook('change', cb), () => router.getLastUrl(), serverState ? () => serverState.currentUrl : () => router.getLastUrl());
+    return (jsx(RouterContext.Provider, Object.assign({ value: router }, { children: jsx(RouteContext.Provider, Object.assign({ value: route }, { children: jsx(UrlContext.Provider, Object.assign({ value: url }, { children: children }), void 0) }), void 0) }), void 0));
 };
 Provider.displayName = 'Provider';
 

package/lib/index.es.js

@@ -8,8 +8,9 @@ import each from '@tinkoff/utils/array/each';
 import find from '@tinkoff/utils/array/find';
 import findIndex from '@tinkoff/utils/array/findIndex';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useContext, useCallback, isValidElement, cloneElement } from 'react';
-import { useIsomorphicLayoutEffect, useShallowEqual } from '@tinkoff/react-hooks';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { createContext, useContext, useCallback, isValidElement, cloneElement } from 'react';
+import { useShallowEqual } from '@tinkoff/react-hooks';
 
 const PARAMETER_DELIMITER = ':';
 const WILDCARD_REGEXP = /\*/;
@@ -173,6 +174,14 @@ class AbstractRouter {
         // same as getCurrentRoute
         return (_b = (_a = this.currentNavigation) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : (_c = this.lastNavigation) === null || _c === void 0 ? void 0 : _c.url;
     }
+    getLastRoute() {
+        var _a;
+        return (_a = this.lastNavigation) === null || _a === void 0 ? void 0 : _a.to;
+    }
+    getLastUrl() {
+        var _a;
+        return (_a = this.lastNavigation) === null || _a === void 0 ? void 0 : _a.url;
+    }
     commitNavigation(navigation) {
         logger.debug({
             event: 'commit-navigation',
@@ -182,9 +191,9 @@ class AbstractRouter {
             // in case we came from history do not history back to prevent infinity recursive calls
             this.history.save(navigation);
         }
-        this.runSyncHooks('change', navigation);
         this.lastNavigation = navigation;
         this.currentNavigation = null;
+        this.runSyncHooks('change', navigation);
     }
     async updateCurrentRoute(updateRouteOptions) {
         return this.internalUpdateCurrentRoute(updateRouteOptions, {});
@@ -1054,17 +1063,10 @@ const RouterContext = createContext(null);
 const RouteContext = createContext(null);
 const UrlContext = createContext(null);
 
-const Provider = ({ router, children }) => {
-    const [state, setState] = useState({
-        route: router.getCurrentRoute(),
-        url: router.getCurrentUrl(),
-    });
-    useIsomorphicLayoutEffect(() => {
-        return router.registerSyncHook('change', ({ to, url }) => {
-            setState({ route: to, url });
-        });
-    }, [router]);
-    return (jsx(RouterContext.Provider, Object.assign({ value: router }, { children: jsx(RouteContext.Provider, Object.assign({ value: state.route }, { children: jsx(UrlContext.Provider, Object.assign({ value: state.url }, { children: children }), void 0) }), void 0) }), void 0));
+const Provider = ({ router, serverState, children }) => {
+    const route = useSyncExternalStore((cb) => router.registerSyncHook('change', cb), () => router.getLastRoute(), serverState ? () => serverState.currentRoute : () => router.getLastRoute());
+    const url = useSyncExternalStore((cb) => router.registerSyncHook('change', cb), () => router.getLastUrl(), serverState ? () => serverState.currentUrl : () => router.getLastUrl());
+    return (jsx(RouterContext.Provider, Object.assign({ value: router }, { children: jsx(RouteContext.Provider, Object.assign({ value: route }, { children: jsx(UrlContext.Provider, Object.assign({ value: url }, { children: children }), void 0) }), void 0) }), void 0));
 };
 Provider.displayName = 'Provider';
 

package/lib/index.js

@@ -12,6 +12,7 @@ var each = require('@tinkoff/utils/array/each');
 var find = require('@tinkoff/utils/array/find');
 var findIndex = require('@tinkoff/utils/array/findIndex');
 var jsxRuntime = require('react/jsx-runtime');
+var shim = require('use-sync-external-store/shim');
 var react = require('react');
 var reactHooks = require('@tinkoff/react-hooks');
 
@@ -188,6 +189,14 @@ class AbstractRouter {
         // same as getCurrentRoute
         return (_b = (_a = this.currentNavigation) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : (_c = this.lastNavigation) === null || _c === void 0 ? void 0 : _c.url;
     }
+    getLastRoute() {
+        var _a;
+        return (_a = this.lastNavigation) === null || _a === void 0 ? void 0 : _a.to;
+    }
+    getLastUrl() {
+        var _a;
+        return (_a = this.lastNavigation) === null || _a === void 0 ? void 0 : _a.url;
+    }
     commitNavigation(navigation) {
         exports.logger.debug({
             event: 'commit-navigation',
@@ -197,9 +206,9 @@ class AbstractRouter {
             // in case we came from history do not history back to prevent infinity recursive calls
             this.history.save(navigation);
         }
-        this.runSyncHooks('change', navigation);
         this.lastNavigation = navigation;
         this.currentNavigation = null;
+        this.runSyncHooks('change', navigation);
     }
     async updateCurrentRoute(updateRouteOptions) {
         return this.internalUpdateCurrentRoute(updateRouteOptions, {});
@@ -1069,17 +1078,10 @@ const RouterContext = react.createContext(null);
 const RouteContext = react.createContext(null);
 const UrlContext = react.createContext(null);
 
-const Provider = ({ router, children }) => {
-    const [state, setState] = react.useState({
-        route: router.getCurrentRoute(),
-        url: router.getCurrentUrl(),
-    });
-    reactHooks.useIsomorphicLayoutEffect(() => {
-        return router.registerSyncHook('change', ({ to, url }) => {
-            setState({ route: to, url });
-        });
-    }, [router]);
-    return (jsxRuntime.jsx(RouterContext.Provider, Object.assign({ value: router }, { children: jsxRuntime.jsx(RouteContext.Provider, Object.assign({ value: state.route }, { children: jsxRuntime.jsx(UrlContext.Provider, Object.assign({ value: state.url }, { children: children }), void 0) }), void 0) }), void 0));
+const Provider = ({ router, serverState, children }) => {
+    const route = shim.useSyncExternalStore((cb) => router.registerSyncHook('change', cb), () => router.getLastRoute(), serverState ? () => serverState.currentRoute : () => router.getLastRoute());
+    const url = shim.useSyncExternalStore((cb) => router.registerSyncHook('change', cb), () => router.getLastUrl(), serverState ? () => serverState.currentUrl : () => router.getLastUrl());
+    return (jsxRuntime.jsx(RouterContext.Provider, Object.assign({ value: router }, { children: jsxRuntime.jsx(RouteContext.Provider, Object.assign({ value: route }, { children: jsxRuntime.jsx(UrlContext.Provider, Object.assign({ value: url }, { children: children }), void 0) }), void 0) }), void 0));
 };
 Provider.displayName = 'Provider';
 

package/lib/router/abstract.d.ts

@@ -41,6 +41,8 @@ export declare abstract class AbstractRouter {
     start(): Promise<void>;
     getCurrentRoute(): import("../types").NavigationRoute;
     getCurrentUrl(): Url;
+    getLastRoute(): import("../types").NavigationRoute;
+    getLastUrl(): Url;
     protected commitNavigation(navigation: Navigation): void;
     updateCurrentRoute(updateRouteOptions: UpdateCurrentRouteOptions): Promise<void>;
     protected internalUpdateCurrentRoute(updateRouteOptions: UpdateCurrentRouteOptions, { history }: InternalOptions): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinkoff/router",
-  "version": "0.1.79",
+  "version": "0.1.80",
   "description": "router",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -24,7 +24,8 @@
   "dependencies": {
     "@tinkoff/react-hooks": "0.0.27",
     "@tinkoff/url": "0.7.39",
-    "@tinkoff/utils": "^2.1.2"
+    "@tinkoff/utils": "^2.1.2",
+    "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
     "react": ">=16.14.0",
@@ -32,6 +33,7 @@
   },
   "sideEffects": false,
   "devDependencies": {
+    "@types/use-sync-external-store": "^0.0.3",
     "object-sizeof": "^1.6.1"
   },
   "license": "Apache-2.0"