fix(story): always deep-clone state on export to prevent frozen/proxied object errors (#87)

There was a problem where components updated the model’s state directly (e.g., via shallow assign) without notifying the store or triggering reactivity. This meant changes could bypass signals/observers, leading to inconsistent state, missed updates in the UI, and potential data corruption. All state changes should go through the store’s public API to ensure proper notifications and data integrity

Author: draedful

src/components/canvas/blocks/Block.ts

@@ -165,7 +165,6 @@ export class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlock
 
   protected subscribe(id: TBlockId) {
     this.connectedState = selectBlockById<T>(this.context.graph, id);
-    this.state = this.connectedState.$state.value;
     this.connectedState.setViewComponent(this);
     this.setState({
       ...this.connectedState.$state.value,

src/graph.test.ts

@@ -0,0 +1,39 @@
+import { TBlock } from "./components/canvas/blocks/Block";
+import { Graph } from "./graph";
+
+describe("Graph export/import and updateBlock integration", () => {
+  function createBlock(): TBlock {
+    return {
+      id: "block1",
+      is: "Block",
+      x: 10,
+      y: 20,
+      width: 100,
+      height: 50,
+      selected: false,
+      name: "TestBlock",
+      anchors: [],
+    };
+  }
+
+  it("should allow export, import and updateBlock without errors (no frozen state)", (done) => {
+    const graph1Node = document.createElement("div");
+    const graph2Node = document.createElement("div");
+    const block = createBlock();
+    const graph1 = new Graph({ blocks: [block], connections: [] }, graph1Node);
+    graph1.start();
+
+    setTimeout(() => {
+      const exportedConfig = graph1.rootStore.getAsConfig();
+      const graph2 = new Graph(exportedConfig, graph2Node);
+      graph2.start();
+      const updatedHeight = block.height + 10;
+      expect(() => {
+        graph2.api.updateBlock({ ...exportedConfig.blocks[0], height: updatedHeight });
+      }).not.toThrow();
+      const updatedBlock = graph2.rootStore.blocksList.$blocks.value[0];
+      expect(updatedBlock.height).toBe(updatedHeight);
+      done();
+    }, 1000);
+  });
+});

src/store/block/Block.ts

@@ -1,5 +1,6 @@
 import { computed, signal } from "@preact/signals-core";
 import type { Signal } from "@preact/signals-core";
+import cloneDeep from "lodash/cloneDeep";
 
 import { TAnchor } from "../../components/canvas/anchors";
 import { Block, TBlock } from "../../components/canvas/blocks/Block";
@@ -154,7 +155,7 @@ export class BlockState<T extends TBlock = TBlock> {
   }
 
   public asTBlock(): TBlock {
-    return this.$state.value;
+    return cloneDeep(this.$state.toJSON());
   }
 }
 

src/store/connection/ConnectionList.ts

@@ -179,6 +179,10 @@ export class ConnectionsStore {
     }
   }
 
+  public toJSON() {
+    return this.$connections.value.map((c) => c.asTConnection());
+  }
+
   public resetSelection() {
     this.setConnectionsSelection([], false);
   }

src/store/connection/ConnectionState.ts

@@ -1,4 +1,5 @@
 import { computed, signal } from "@preact/signals-core";
+import cloneDeep from "lodash/cloneDeep";
 
 import { TConnectionColors } from "../../graphConfig";
 import { ESelectionStrategy } from "../../utils/types/types";
@@ -84,7 +85,7 @@ export class ConnectionState<T extends TConnection = TConnection> {
   }
 
   public asTConnection(): TConnection {
-    return this.$state.value;
+    return cloneDeep(this.$state.toJSON());
   }
 
   public updateConnection(connection: Partial<TConnection>): void {

src/store/index.ts

@@ -1,4 +1,5 @@
 import { batch } from "@preact/signals-core";
+import cloneDeep from "lodash/cloneDeep";
 
 import { Graph, TGraphConfig } from "../graph";
 
@@ -26,15 +27,12 @@ export class RootStore {
   }
 
   public getAsConfig(): TGraphConfig {
-    const blocks = this.blocksList.$blocks.value.map((block) => block.asTBlock());
-    const connections = this.connectionsList.$connections.value.map((connection) => connection.asTConnection());
-
-    return {
+    return cloneDeep({
       configurationName: this.configurationName,
-      blocks,
-      connections,
-      settings: this.settings.asConfig,
-    };
+      blocks: this.blocksList.toJSON(),
+      connections: this.connectionsList.toJSON(),
+      settings: this.settings.toJSON(),
+    });
   }
 
   public reset() {

src/store/settings.ts

@@ -1,4 +1,5 @@
 import { computed, signal } from "@preact/signals-core";
+import cloneDeep from "lodash/cloneDeep";
 
 import type { Block, TBlock } from "../components/canvas/blocks/Block";
 import { BlockConnection } from "../components/canvas/connections/BlockConnection";
@@ -90,8 +91,12 @@ export class GraphEditorSettings {
     };
   });
 
+  public toJSON() {
+    return cloneDeep(this.$settings.toJSON());
+  }
+
   public get asConfig(): TGraphSettingsConfig {
-    return this.$settings.value;
+    return this.toJSON();
   }
 
   public reset() {