fix(plugin-history-sync): replace json-cycle with flatted (#517)

.changeset/friendly-tips-end.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-history-sync": patch
+---
+
+fix(plugin-history-sync): replace json-cycle with flatted

.changeset/pre.json

@@ -0,0 +1,27 @@
+{
+  "mode": "exit",
+  "tag": "canary",
+  "initialVersions": {
+    "@stackflow/config": "1.1.0",
+    "@stackflow/core": "1.1.0",
+    "@stackflow/demo": "1.3.2",
+    "@stackflow/docs": "1.2.27",
+    "@stackflow/compat-await-push": "1.1.13",
+    "@stackflow/link": "1.4.5",
+    "@stackflow/plugin-basic-ui": "1.10.0",
+    "@stackflow/plugin-devtools": "0.1.11",
+    "@stackflow/plugin-google-analytics-4": "1.1.15",
+    "@stackflow/plugin-history-sync": "1.6.3",
+    "@stackflow/plugin-map-initial-activity": "1.0.11",
+    "@stackflow/plugin-preload": "1.4.2",
+    "@stackflow/plugin-renderer-basic": "1.1.13",
+    "@stackflow/plugin-renderer-web": "1.1.13",
+    "@stackflow/plugin-stack-depth-change": "1.1.5",
+    "@stackflow/react-ui-core": "1.1.2",
+    "@stackflow/react": "1.3.2",
+    "@stackflow/esbuild-config": "1.0.3"
+  },
+  "changesets": [
+    "friendly-tips-end"
+  ]
+}

demo/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @stackflow/demo
 
+## 1.3.3-canary.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackflow/plugin-history-sync@1.6.4-canary.0
+  - @stackflow/link@1.4.6-canary.0
+  - @stackflow/plugin-preload@1.4.3-canary.0
+
 ## 1.3.2
 
 ### Patch Changes

demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackflow/demo",
-  "version": "1.3.2",
+  "version": "1.3.3-canary.0",
   "private": true,
   "license": "MIT",
   "type": "module",
@@ -35,12 +35,12 @@
     "@stackflow/compat-await-push": "^1.1.13",
     "@stackflow/config": "^1.1.0",
     "@stackflow/core": "^1.1.0",
-    "@stackflow/link": "^1.4.5",
+    "@stackflow/link": "^1.4.6-canary.0",
     "@stackflow/plugin-basic-ui": "^1.9.2",
     "@stackflow/plugin-devtools": "^0.1.11",
-    "@stackflow/plugin-history-sync": "^1.6.3-canary.0",
+    "@stackflow/plugin-history-sync": "^1.6.4-canary.0",
     "@stackflow/plugin-map-initial-activity": "^1.0.11",
-    "@stackflow/plugin-preload": "^1.4.2",
+    "@stackflow/plugin-preload": "^1.4.3-canary.0",
     "@stackflow/plugin-renderer-basic": "^1.1.13",
     "@stackflow/plugin-stack-depth-change": "^1.1.5",
     "@stackflow/react": "^1.3.2",

docs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stackflow/docs
 
+## 1.2.28-canary.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackflow/plugin-history-sync@1.6.4-canary.0
+  - @stackflow/demo@1.3.3-canary.0
+
 ## 1.2.27
 
 ### Patch Changes

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackflow/docs",
-  "version": "1.2.27",
+  "version": "1.2.28-canary.0",
   "private": true,
   "description": "Mobile-first stack navigator framework with Composable Plugin System",
   "license": "MIT",
@@ -12,9 +12,9 @@
   "dependencies": {
     "@mdx-js/react": "^3.0.1",
     "@stackflow/core": "^1.1.0",
-    "@stackflow/demo": "^1.3.2",
+    "@stackflow/demo": "^1.3.3-canary.0",
     "@stackflow/plugin-basic-ui": "^1.9.2",
-    "@stackflow/plugin-history-sync": "^1.6.3-canary.0",
+    "@stackflow/plugin-history-sync": "^1.6.4-canary.0",
     "@stackflow/plugin-renderer-basic": "^1.1.13",
     "@stackflow/react": "^1.3.2",
     "@types/react": "^18.3.3",

extensions/link/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stackflow/link
 
+## 1.4.6-canary.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackflow/plugin-history-sync@1.6.4-canary.0
+  - @stackflow/plugin-preload@1.4.3-canary.0
+
 ## 1.4.5
 
 ## 1.4.5-canary.0

extensions/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackflow/link",
-  "version": "1.4.5",
+  "version": "1.4.6-canary.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/daangn/stackflow.git",
@@ -33,8 +33,8 @@
   "devDependencies": {
     "@stackflow/core": "^1.1.0",
     "@stackflow/esbuild-config": "^1.0.3",
-    "@stackflow/plugin-history-sync": "^1.6.3-canary.0",
-    "@stackflow/plugin-preload": "^1.4.2",
+    "@stackflow/plugin-history-sync": "^1.6.4-canary.0",
+    "@stackflow/plugin-preload": "^1.4.3-canary.0",
     "@stackflow/react": "^1.3.2",
     "@types/react": "^18.3.3",
     "esbuild": "^0.23.0",
@@ -44,8 +44,8 @@
   },
   "peerDependencies": {
     "@stackflow/core": "^1.1.0-canary.0",
-    "@stackflow/plugin-history-sync": "^1.6.3-canary.0",
-    "@stackflow/plugin-preload": "^1.4.2-canary.0",
+    "@stackflow/plugin-history-sync": "^1.6.4-canary.0",
+    "@stackflow/plugin-preload": "^1.4.3-canary.0",
     "@stackflow/react": "^1.3.2-canary.0",
     "@types/react": ">=16.8.0",
     "react": ">=16.8.0"

extensions/plugin-history-sync/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stackflow/plugin-history-sync
 
+## 1.6.4-canary.0
+
+### Patch Changes
+
+- fix(plugin-history-sync): replace json-cycle with flatted
+
 ## 1.6.3
 
 ### Patch Changes

extensions/plugin-history-sync/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackflow/plugin-history-sync",
-  "version": "1.6.3",
+  "version": "1.6.4-canary.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/daangn/stackflow.git",
@@ -41,6 +41,7 @@
     }
   },
   "dependencies": {
+    "flatted": "^3.3.1",
     "history": "^5.3.0",
     "url-pattern": "^1.0.3"
   },
@@ -60,7 +61,6 @@
     "esbuild": "^0.23.0",
     "graphql": "^16.9.0",
     "jest": "^29.7.0",
-    "json-cycle": "^1.5.0",
     "react": "^18.3.1",
     "react-relay": "^17.0.0",
     "relay-compiler": "^17.0.0",

extensions/plugin-history-sync/src/historyState.ts

@@ -1,6 +1,6 @@
 import type { Activity, ActivityStep } from "@stackflow/core";
+import { parse, stringify } from "flatted";
 import type { History } from "history";
-import { decycle, retrocycle } from "json-cycle";
 
 const STATE_TAG = "@stackflow/plugin-history-sync";
 
@@ -9,40 +9,39 @@ interface State {
   step?: ActivityStep;
 }
 
-interface SerializedState extends State {
+interface SerializedState {
   _TAG: typeof STATE_TAG;
+  flattedState: string;
 }
 
 function serializeState(state: State): SerializedState {
-  return JSON.parse(
-    JSON.stringify(
-      decycle({
-        _TAG: STATE_TAG,
-        activity: state.activity,
-        step: state.step,
-      }),
-    ),
-  );
+  return {
+    _TAG: STATE_TAG,
+    flattedState: stringify({
+      activity: state.activity,
+      step: state.step,
+    }),
+  };
 }
 
-export function safeParseState(state: unknown): State | null {
-  const _state: any = state;
-
-  if (
-    typeof _state === "object" &&
-    _state !== null &&
-    "_TAG" in _state &&
-    typeof _state._TAG === "string" &&
-    _state._TAG === STATE_TAG
-  ) {
-    return retrocycle<State>(state);
-  }
-
-  return null;
+function isSerializedState(input: unknown): input is SerializedState {
+  return (
+    typeof input === "object" &&
+    input !== null &&
+    "_TAG" in input &&
+    "flattedState" in input &&
+    typeof input._TAG === "string" &&
+    input._TAG === STATE_TAG &&
+    typeof input.flattedState === "string"
+  );
 }
 
-export function getCurrentState({ history }: { history: History }): unknown {
-  return history.location.state;
+export function parseState(input: unknown): State | null {
+  try {
+    return isSerializedState(input) ? parse(input.flattedState) : null;
+  } catch {
+    return null;
+  }
 }
 
 export function pushState({

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

@@ -7,12 +7,7 @@ import type { ActivityDefinition, Config } from "@stackflow/config";
 import { HistoryQueueProvider } from "./HistoryQueueContext";
 import type { RouteLike } from "./RouteLike";
 import { RoutesProvider } from "./RoutesContext";
-import {
-  getCurrentState,
-  pushState,
-  replaceState,
-  safeParseState,
-} from "./historyState";
+import { parseState, pushState, replaceState } from "./historyState";
 import { last } from "./last";
 import { makeHistoryTaskQueue } from "./makeHistoryTaskQueue";
 import type { UrlPatternOptions } from "./makeTemplate";
@@ -89,21 +84,19 @@ export function historySyncPlugin<
         );
       },
       overrideInitialEvents({ initialContext }) {
-        const initialHistoryState = safeParseState(
-          getCurrentState({ history }),
-        );
+        const initialState = parseState(history.location.state);
 
-        if (initialHistoryState) {
+        if (initialState) {
           return [
             {
-              ...initialHistoryState.activity.enteredBy,
+              ...initialState.activity.enteredBy,
               name: "Pushed",
             },
-            ...(initialHistoryState.step?.enteredBy.name === "StepPushed" ||
-            initialHistoryState.step?.enteredBy.name === "StepReplaced"
+            ...(initialState.step?.enteredBy.name === "StepPushed" ||
+            initialState.step?.enteredBy.name === "StepReplaced"
               ? [
                   {
-                    ...initialHistoryState.step.enteredBy,
+                    ...initialState.step.enteredBy,
                     name: "StepPushed" as const,
                   },
                 ]
@@ -210,15 +203,15 @@ export function historySyncPlugin<
             return;
           }
 
-          const historyState = safeParseState(e.location.state);
+          const state = parseState(e.location.state);
 
-          if (!historyState) {
+          if (!state) {
             return;
           }
 
-          const targetActivity = historyState.activity;
-          const targetActivityId = historyState.activity.id;
-          const targetStep = historyState.step;
+          const targetActivity = state.activity;
+          const targetActivityId = state.activity.id;
+          const targetStep = state.step;
 
           const { activities } = getStack();
           const currentActivity = activities.find(
@@ -476,7 +469,7 @@ export function historySyncPlugin<
         if (previousActivity) {
           for (let i = 0; i < previousActivity.steps.length - 1; i += 1) {
             requestHistoryTick((resolve) => {
-              if (!safeParseState(getCurrentState({ history }))) {
+              if (!parseState(history.location.state)) {
                 silentFlag = true;
                 history.back();
               } else {
@@ -517,7 +510,7 @@ export function historySyncPlugin<
 
           for (let i = 0; i < popCount; i += 1) {
             requestHistoryTick((resolve) => {
-              if (!safeParseState(getCurrentState({ history }))) {
+              if (!parseState(history.location.state)) {
                 silentFlag = true;
                 history.back();
               } else {