Fix useParams with SwipeBack

CHANGELOG.md

@@ -1,3 +1,7 @@
+v1.7.3
+-
+- Устранены проблемы при исползовании хука useParams c жестом SwipeBack.
+
 v1.7.2
 -
 - Устранены проблемы, связанные с работой runSync при использовании большого количества переходов в одной транзакции.

examples/vk-mini-apps-router-example/package.json

@@ -12,7 +12,7 @@
     "@types/react-dom": "^18.2.7",
     "@vkontakte/icons": "^2.77.0",
     "@vkontakte/vk-bridge": "latest",
-    "@vkontakte/vk-mini-apps-router": "1.7.1",
+    "@vkontakte/vk-mini-apps-router": "1.7.3",
     "@vkontakte/vkui": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/vk-mini-apps-router-example/yarn.lock

@@ -2483,10 +2483,10 @@
   resolved "https://registry.yarnpkg.com/@vkontakte/vk-bridge/-/vk-bridge-2.9.0.tgz#24aed0217f0c508f4c62ed44fe52ce3fe7f47e53"
   integrity sha512-fyOdtZq+68Jnp8FNmas3fnJ4b1bjc1fmAovl2afV14VeJ1KG1OwoAaE7zpVL4U4VVZJGhhdANxEsc4tBYUSkxA==
 
-"@vkontakte/[email protected].1":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@vkontakte/vk-mini-apps-router/-/vk-mini-apps-router-1.7.1.tgz#c14b9468e598e114a6c7b0c050331142ebea8816"
-  integrity sha512-qNKOjUoqNuCQmuCwBLH0pVMTsdmdnryfLhbQL+ZOE5047YCoPr78taH0LLexjE85kDvBmMB+QxhUi/rKP96Bjw==
+"@vkontakte/[email protected].3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@vkontakte/vk-mini-apps-router/-/vk-mini-apps-router-1.7.3.tgz#c8115b9311c248b5339ba1fc111357b74cd0fe84"
+  integrity sha512-u2xSuwAnv/9AI/V/y7s+95DBDBPDDwAHe+Tsp9l7lm6+wMw1eER1Bgp9B3OE2t7v18bZWVj4EboBobmy3aw3Kg==
   dependencies:
     "@remix-run/router" "^1.13.0"
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vk-mini-apps-router",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "React-роутер для мини-приложений ВКонтакте, построенных на VKUI",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

src/hooks/useThrottledContext.ts

@@ -4,14 +4,11 @@ import { EventBus } from '../services/EventBus';
 
 export function useThrottledContext<T>(context: Context<T>): [T, T | null] {
   const contextValue = useContext(context);
-  const contextName = context.displayName;
-  const [prevValue, setPrevValue] = useState<T>(contextValue);
-  const [throttledValue, setThrottledValue] = useState<T>(contextValue);
+  const contextName = context.displayName ?? '';
+  const initialContextData = ContextThrottleService.retrieveContextInfo(contextName, contextValue);
 
-  if (!contextName) {
-    console.error('No context display name found');
-    return [contextValue, null];
-  }
+  const [prevValue, setPrevValue] = useState<T | null>(initialContextData.prevValue);
+  const [throttledValue, setThrottledValue] = useState<T>(initialContextData.throttledValue);
 
   useEffect(() => {
     const unsubscribe = EventBus.subscribe<(throttleValue: T, prevValue: T) => void>(
@@ -29,5 +26,10 @@ export function useThrottledContext<T>(context: Context<T>): [T, T | null] {
     ContextThrottleService.triggerContextUpdate(contextName, contextValue);
   }, [contextValue, contextName]);
 
+  if (!contextName) {
+    console.error('No context display name found');
+    return [contextValue, null];
+  }
+
   return [throttledValue, prevValue];
 }

src/services/ContextThrottleService.ts

@@ -1,10 +1,10 @@
 import { EventBus } from './EventBus';
 import { TransactionExecutor } from './TransactionExecutor';
 
-interface ContextThrottleInfo {
-  prevValue: unknown;
+interface ContextThrottleInfo<T = unknown> {
+  prevValue: T | null;
   updateTimerId: number;
-  throttledValue: unknown;
+  throttledValue: T;
   lastUpdateTimestamp: number;
 }
 
@@ -17,7 +17,7 @@ export class ContextThrottleService {
   private static instance?: ContextThrottleService;
   private interval = 0;
   private throttled = true;
-  private contextThrottleMap: Record<string, ContextThrottleInfo> = {};
+  private contextThrottleMap: Map<string, ContextThrottleInfo> = new Map();
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private constructor() {}
@@ -30,21 +30,22 @@ export class ContextThrottleService {
     return ContextThrottleService.instance;
   }
 
-  private getContextThrottleInfoByName(contextName: string) {
-    if (!(contextName in this.contextThrottleMap)) {
-      this.contextThrottleMap[contextName] = {
+  private getWithInitThrottleInfoByName<T>(
+    contextName: string,
+    contextValue: T,
+  ): ContextThrottleInfo<T> {
+    if (!this.contextThrottleMap.has(contextName)) {
+      const contextData = {
         prevValue: null,
-        throttledValue: null,
+        throttledValue: contextValue,
         lastUpdateTimestamp: 0,
         updateTimerId: 0,
       };
+
+      this.contextThrottleMap.set(contextName, contextData);
     }
-    return this.contextThrottleMap[contextName];
-  }
 
-  private isContextChange<T>(contextName: string, newValue: T) {
-    const contextData = this.getContextThrottleInfoByName(contextName);
-    return !(newValue === contextData.throttledValue);
+    return this.contextThrottleMap.get(contextName) as ContextThrottleInfo<T>;
   }
 
   private getTimeUntilNextUpdate(lastUpdateTimestamp: number) {
@@ -54,17 +55,25 @@ export class ContextThrottleService {
   }
 
   private updateContextValue<T>(contextName: string, newValue: T) {
-    const contextData = this.getContextThrottleInfoByName(contextName);
+    const contextData = this.getWithInitThrottleInfoByName(contextName, newValue);
+
+    if (newValue === contextData.throttledValue) {
+      return;
+    }
+
     contextData.prevValue = contextData.throttledValue;
     contextData.lastUpdateTimestamp = Date.now();
     contextData.throttledValue = newValue;
     EventBus.broadcast(contextName, [contextData.throttledValue, contextData.prevValue]);
   }
 
   private throttleUpdateContextValue<T>(contextName: string, newValue: T) {
-    const contextData = this.getContextThrottleInfoByName(contextName);
+    const contextData = this.getWithInitThrottleInfoByName(contextName, newValue);
     clearTimeout(contextData.updateTimerId);
-    if (this.isRunSyncActive()) return;
+
+    if (TransactionExecutor.isRunSyncActive) {
+      return;
+    }
 
     const lastUpdateTimestamp = contextData.lastUpdateTimestamp;
     const timeUntilNextUpdate = this.getTimeUntilNextUpdate(lastUpdateTimestamp);
@@ -78,24 +87,31 @@ export class ContextThrottleService {
     }
   }
 
-  private isRunSyncActive() {
-    return TransactionExecutor.isRunSyncActive;
-  }
-
   public static triggerContextUpdate<T>(contextName: string, newValue: T) {
     const throttledService = ContextThrottleService.getInstance();
+    const contextData = throttledService.getWithInitThrottleInfoByName(contextName, newValue);
 
-    if (!throttledService.isContextChange(contextName, newValue)) {
+    if (newValue === contextData.throttledValue) {
       return;
     }
 
-    if (!throttledService.throttled && !throttledService.isRunSyncActive()) {
+    if (!throttledService.throttled && !TransactionExecutor.isRunSyncActive) {
       throttledService.updateContextValue(contextName, newValue);
     } else {
       throttledService.throttleUpdateContextValue(contextName, newValue);
     }
   }
 
+  public static retrieveContextInfo<T>(contextName: string, contextValue: T) {
+    const throttledService = ContextThrottleService.getInstance();
+    const { prevValue, throttledValue } = throttledService.getWithInitThrottleInfoByName(
+      contextName,
+      contextValue,
+    );
+
+    return { prevValue, throttledValue };
+  }
+
   public static updateThrottledServiceSettings(settings: ContextThrottleServiceSettings) {
     const throttledService = ContextThrottleService.getInstance();
     throttledService.interval = settings.interval;