fix: fix history states when replacing or popping activity (#409)

extensions/plugin-history-sync/src/historySyncPlugin.spec.ts

@@ -1166,4 +1166,104 @@ describe("historySyncPlugin", () => {
     expect(path(history.location)).toEqual("/home/");
     expect(activeActivity(actions.getStack())?.name).toEqual("Home");
   });
+
+  test("historySyncPlugin - push > push > stepPush > pop", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.push({
+      activityId: "a2",
+      activityName: "Article",
+      activityParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "4",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        articleId: "5",
+      },
+    });
+
+    actions.replace({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s3",
+      stepParams: {
+        thirdId: "2",
+      },
+    });
+
+    actions.pop();
+
+    await delay(ENOUGH_DELAY_TIME);
+
+    expect(path(history.location)).toEqual("/articles/2/");
+    expect(activeActivity(actions.getStack())?.name).toEqual("Article");
+    expect(history.index).toEqual(2);
+  });
+
+  test("historySyncPlugin - push > stepPush > stepPush > replace", async () => {
+    actions.push({
+      activityId: "a1",
+      activityName: "Article",
+      activityParams: {
+        articleId: "1",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s1",
+      stepParams: {
+        articleId: "2",
+      },
+    });
+
+    actions.stepPush({
+      stepId: "s2",
+      stepParams: {
+        articleId: "3",
+      },
+    });
+
+    actions.replace({
+      activityId: "a3",
+      activityName: "ThirdActivity",
+      activityParams: {
+        thirdId: "1",
+      },
+    });
+
+    await delay(ENOUGH_DELAY_TIME);
+
+    expect(path(history.location)).toEqual("/third/1/");
+    expect(activeActivity(actions.getStack())?.name).toEqual("ThirdActivity");
+    expect(history.index).toEqual(1);
+  });
 });

extensions/plugin-history-sync/src/historySyncPlugin.tsx

@@ -48,7 +48,6 @@ export function historySyncPlugin<
   return () => {
     let pushFlag = 0;
     let popFlag = 0;
-    let replacePopCount = 0;
 
     const queue = makeQueue(history);
 
@@ -431,11 +430,16 @@ export function historySyncPlugin<
           enteredActivities.length > 0
             ? enteredActivities[enteredActivities.length - 1]
             : null;
-        const popCount = previousActivity?.steps.length
-          ? previousActivity.steps.length
-          : 0;
 
-        replacePopCount += popCount;
+        if (previousActivity) {
+          popFlag += previousActivity.steps.length - 1;
+
+          do {
+            for (let i = 0; i < previousActivity.steps.length - 1; i += 1) {
+              queue(history.back);
+            }
+          } while (!safeParseState(getCurrentState({ history })));
+        }
       },
       onBeforeStepPop({ actions: { getStack } }) {
         const { activities } = getStack();
@@ -453,48 +457,20 @@ export function historySyncPlugin<
         const currentActivity = activities.find(
           (activity) => activity.isActive,
         );
-        const enteredActivities = activities.filter(
-          (activity) =>
-            activity.transitionState === "enter-active" ||
-            activity.transitionState === "enter-done",
-        );
-        const currentActivityIndex = enteredActivities.findIndex(
-          (activity) => activity.isActive,
-        );
-        const previousActivity =
-          currentActivityIndex && currentActivityIndex > 0
-            ? enteredActivities[currentActivityIndex - 1]
-            : null;
 
-        const currentStepsLength = currentActivity?.steps.length ?? 0;
+        if (currentActivity) {
+          const { isRoot, steps } = currentActivity;
 
-        let popCount = currentStepsLength;
+          const popCount = isRoot ? 0 : steps.length;
 
-        if (
-          currentActivity?.enteredBy.name === "Replaced" &&
-          previousActivity
-        ) {
-          // replace 이후에 stepPush 만 진행하고 pop 을 수행하는 경우
-          const shouldPopForCurrentStepPush = currentStepsLength > 1;
-          popCount = shouldPopForCurrentStepPush
-            ? replacePopCount + currentStepsLength
-            : replacePopCount;
-        }
-        popFlag += popCount;
-
-        do {
-          for (let i = 0; i < popCount; i += 1) {
-            queue(history.back);
-          }
+          popFlag += popCount;
 
-          if (
-            currentActivity?.enteredBy.name === "Replaced" &&
-            previousActivity &&
-            replacePopCount > 0
-          ) {
-            replacePopCount = 0;
-          }
-        } while (!safeParseState(getCurrentState({ history })));
+          do {
+            for (let i = 0; i < popCount; i += 1) {
+              queue(history.back);
+            }
+          } while (!safeParseState(getCurrentState({ history })));
+        }
       },
     };
   };