Merge pull request #15 from statelyai/davidkpiano/use-safe-stringify

Use `safe-stable-stringify`

Author: davidkpiano

.changeset/bright-llamas-fetch.md

@@ -0,0 +1,5 @@
+---
+"@statelyai/inspect": patch
+---
+
+Use `safe-stable-stringify` everywhere applicable

src/browser.ts

@@ -52,7 +52,7 @@ export function createBrowserInspector(
   const resolvedOptions = {
     url: 'https://stately.ai/inspect',
     filter: () => true,
-    serialize: (event) => JSON.parse(safeStringify(event)),
+    serialize: (inspectionEvent) => JSON.parse(safeStringify(inspectionEvent)),
     autoStart: true,
     iframe: null,
     ...options,

src/createInspector.ts

@@ -69,7 +69,7 @@ export function createInspector<TAdapter extends Adapter>(
         typeof actorRef === 'string' ? actorRef : actorRef.sessionId;
       const definitionObject = (actorRef as any)?.logic?.config;
       const definition = definitionObject
-        ? JSON.stringify(definitionObject)
+        ? safeStringify(definitionObject)
         : undefined;
       const rootId =
         info?.rootId ?? typeof actorRef === 'string'
@@ -163,14 +163,14 @@ export function convertXStateEvent(
       }
       const definitionString =
         typeof definitionObject === 'object'
-          ? JSON.stringify(definitionObject, (key, value) => {
+          ? safeStringify(definitionObject, (_key, value) => {
               if (typeof value === 'function') {
                 return { type: value.name };
               }
 
               return value;
             })
-          : JSON.stringify({
+          : safeStringify({
               id: name,
             });
 

src/webSocket.ts

@@ -17,7 +17,8 @@ export class WebSocketAdapter implements Adapter {
   constructor(options?: WebSocketInspectorOptions) {
     this.options = {
       filter: () => true,
-      serialize: (event) => JSON.parse(safeStringify(event)),
+      serialize: (inspectionEvent) =>
+        JSON.parse(safeStringify(inspectionEvent)),
       autoStart: true,
       url: 'ws://localhost:8080',
       ...options,
@@ -30,8 +31,9 @@ export class WebSocketAdapter implements Adapter {
       this.ws.onopen = () => {
         console.log('websocket open');
         this.status = 'open';
-        this.deferredEvents.forEach((event) => {
-          this.ws.send(JSON.stringify(event));
+        this.deferredEvents.forEach((inspectionEvent) => {
+          const serializedEvent = this.options.serialize(inspectionEvent);
+          this.ws.send(safeStringify(serializedEvent));
         });
       };
 
@@ -61,11 +63,11 @@ export class WebSocketAdapter implements Adapter {
     this.ws.close();
     this.status = 'closed';
   }
-  public send(event: StatelyInspectionEvent) {
+  public send(inspectionEvent: StatelyInspectionEvent) {
     if (this.status === 'open') {
-      this.ws.send(JSON.stringify(event));
+      this.ws.send(safeStringify(inspectionEvent));
     } else {
-      this.deferredEvents.push(event);
+      this.deferredEvents.push(inspectionEvent);
     }
   }
 }