Remove timeout logic

CHANGELOG.md

@@ -1,3 +1,8 @@
+v1.7.2
+-
+- Устранены проблемы, связанные с работой runSync при использовании большого количества переходов в одной транзакции.
+- Изменили пример с использование компонента Popout.
+
 v1.7.1
 -
 - Обновили peer зависимости

examples/vk-mini-apps-router-example/src/popouts/OffencePersikPopout.tsx

@@ -1,23 +1,45 @@
+import { useCallback, useRef } from 'react';
 import { useRouteNavigator } from '@vkontakte/vk-mini-apps-router';
 import { Alert } from '@vkontakte/vkui';
 
 export function OffencePersikPopout() {
   const routeNavigator = useRouteNavigator();
-  return <Alert
-    actions={[
-      {
-        title: 'Отмена',
-        mode: 'cancel',
-      },
-      {
-        title: 'Забрать',
-        mode: 'destructive',
-        action: () => setTimeout(() => routeNavigator.replace('/persik/sad/persik_modal/sad', { keepSearchParams: true }), 100),
-      },
-    ]}
-    actionsLayout="horizontal"
-    onClose={() => routeNavigator.hidePopout()}
-    title="Еда персика"
-    description="Вы уверены, что хотите забрать у персика еду?"
-  />;
+  const closeWithAction = useRef(false);
+
+  const handleTakeFood = useCallback(() => {
+    closeWithAction.current = true;
+
+    routeNavigator.runSync([
+      () => routeNavigator.hidePopout(),
+      () => routeNavigator.replace('/persik/sad/persik_modal/sad', { keepSearchParams: true }), 
+    ]);
+  }, [routeNavigator]);
+
+  const handleClose = useCallback(() => {
+    if (!closeWithAction.current) {
+      routeNavigator.hidePopout();
+    }
+
+    closeWithAction.current = false;
+  }, [closeWithAction, routeNavigator]);
+
+  return (
+    <Alert
+      actions={[
+        {
+          title: 'Отмена',
+          mode: 'cancel',
+        },
+        {
+          title: 'Забрать',
+          mode: 'destructive',
+          action: handleTakeFood,
+        },
+      ]}
+      actionsLayout="horizontal"
+      onClose={handleClose}
+      title="Еда персика"
+      description="Вы уверены, что хотите забрать у персика еду?"
+    />
+  );
 }

package.json

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

src/entities/NavigationTransaction.ts

@@ -27,9 +27,11 @@ export class NavigationTransaction {
 
   doNext(): void {
     if (!this.finished) {
-      this.actions[this.pointer]();
-      this.pointer += 1;
+      const action = this.actions[this.pointer];
+      this.pointer++;
+      action();
     }
+
     // this.finished изменился при выполнении предыдущего условия - нельзя объединить в if-else.
     if (this.finished) {
       this.resolve();

src/services/TransactionExecutor.ts

@@ -38,14 +38,11 @@ export class TransactionExecutor {
   public static async doNext(): Promise<void> {
     const transactionExecutor = TransactionExecutor.getInstance();
     const transactions = transactionExecutor.transactions;
-    // Нужно делать асинхронно, иначе будет бесконечный цикл навигация-изменение стейта-навигация...
-    setTimeout(() => {
-      if (transactions.length) {
-        transactions[0].doNext();
-        if (transactions[0].finished) {
-          transactions.shift();
-        }
+    if (transactions.length) {
+      transactions[0].doNext();
+      if (transactions[0]?.finished) {
+        transactions.shift();
       }
-    });
+    }
   }
 }