Merge pull request #59 from Keireira/fix/cc-parse

package.json

@@ -60,6 +60,7 @@
     "husky": "^8.0.2",
     "lint-staged": "^10.5.4",
     "prettier": "^2.7.1",
+    "ramda.clone": "^0.26.1",
     "rollup": "^3.3.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "solid-js": "^1.6.2",

src/index.ts

@@ -14,6 +14,7 @@ import {
   Unit,
 } from 'effector';
 import {render} from 'solid-js/web';
+import clone from 'ramda.clone';
 
 import {App} from './app';
 import {$effects} from './entities/effects/model';
@@ -23,6 +24,8 @@ import {$stores} from './entities/stores/model';
 import {setOptions} from './shared/configs/options';
 import {createLogRecordFx} from './tabs/log';
 import {traceEffectRun, traceEventTrigger, traceStoreChange} from './tabs/trace';
+
+import './types.d';
 import {EffectCreator, EventCreator, Inspector, Kind, Options, StoreCreator} from './types.h';
 
 const storeAdd = createEvent<StoreCreator>();
@@ -71,7 +74,7 @@ $events
   }))
   .on(eventTriggered, (map, {name, params}) => {
     // should not change the order of fields
-    const safeParams = params === undefined ? undefined : JSON.parse(JSON.stringify(params));
+    const safeParams = params === undefined ? undefined : clone(params);
     map[name] = {
       ...map[name],
       history: [safeParams, ...map[name].history],
@@ -169,10 +172,6 @@ function traceEvent(event: Event<any>, name = createName(event)) {
   );
 }
 
-function copy<T>(a: T): T {
-  return JSON.parse(JSON.stringify(a));
-}
-
 function traceStore($store: Store<any>) {
   const name = createName($store);
 
@@ -181,7 +180,7 @@ function traceStore($store: Store<any>) {
   graphite($store).seq.unshift(
     step.compute({
       fn(data, scope) {
-        before = copy(scope.state.current);
+        before = clone(scope.state.current);
         return data;
       },
     }),

src/types.d.ts

@@ -0,0 +1,5 @@
+declare module 'ramda.clone' {
+  function clone<T>(value: T): T;
+
+  export default clone;
+}

usage/index.ts

@@ -1,7 +1,6 @@
 import {createDomain, createEffect, createEvent, createStore} from 'effector';
 
 import * as inspector from '../src';
-
 import {
   $args,
   $error,
@@ -100,12 +99,12 @@ const $promise = createStore(new Promise((resolve) => setTimeout(resolve, 5000))
 const $promiseResolved = createStore(Promise.resolve(1));
 const $promiseRejected = createStore(Promise.reject(1));
 
-const a = {};
-const b = {a};
+const cdFirst = {};
 // @ts-ignore
-a.b = b;
+cdFirst.cdFirst = cdFirst;
 
-const $circularObject = createStore(a);
+const $circularObject = createStore(cdFirst);
+const circular = createEvent<Record<string, any>>();
 
 const exampleFx = createEffect({
   handler() {
@@ -190,8 +189,29 @@ setInterval(() => {
 setInterval(() => {
   exampleFx2();
 }, 3500);
+setTimeout(() => {
+  const cdSecond = {};
+  // @ts-ignore
+  cdSecond.cdSecond = cdSecond;
+
+  circular(cdSecond);
+}, 1000)
+
+setTimeout(() => {
+  const cdThird = {
+    purple: true,
+  };
+  // @ts-ignore
+  cdThird.cdThird = cdThird;
+
+  circular(cdThird);
+}, 3000)
 
 $anotherNumber.on(event, (counter) => counter + 1);
 $date.on(event, () => new Date());
 $foo.on(just, (s, n) => s + n);
 $example.on(event, () => Math.random() * 100);
+$circularObject.on(circular, (value, nextValue) => ({
+  ...value,
+  ...nextValue,
+}));