Merge pull request #24 from statelyai/davidkpiano/better-serialization

Better serialization

.changeset/twelve-tomatoes-cover.md

@@ -0,0 +1,5 @@
+---
+'@statelyai/inspect': minor
+---
+
+The `serialize` option will now pre-serialize the event using `superjson` before the custom serialization.

src/browser.ts

@@ -1,6 +1,10 @@
 import safeStringify from 'fast-safe-stringify';
 import { AnyEventObject, Observer, Subscribable, toObserver } from 'xstate';
-import { InspectorOptions, createInspector } from './createInspector';
+import {
+  InspectorOptions,
+  createInspector,
+  defaultInspectorOptions,
+} from './createInspector';
 import { Adapter, Inspector, StatelyInspectionEvent } from './types';
 import { UselessAdapter } from './useless';
 
@@ -165,7 +169,14 @@ export class BrowserAdapter implements Adapter {
       ) {
         this.status = 'connected';
         this.deferredEvents.forEach((event) => {
-          const serializedEvent = this.options.serialize(event);
+          const preSerializedEvent = defaultInspectorOptions.serialize(
+            event,
+            event
+          );
+          const serializedEvent = this.options.serialize(
+            preSerializedEvent,
+            event
+          );
           this.targetWindow?.postMessage(serializedEvent, '*');
         });
       }
@@ -184,7 +195,11 @@ export class BrowserAdapter implements Adapter {
     if (this.options.send) {
       this.options.send(event);
     } else if (this.status === 'connected') {
-      const serializedEvent = this.options.serialize(event);
+      const preSerializedEvent = defaultInspectorOptions.serialize(
+        event,
+        event
+      );
+      const serializedEvent = this.options.serialize(preSerializedEvent, event);
       this.targetWindow?.postMessage(serializedEvent, '*');
     }
 

src/createInspector.test.ts

@@ -61,7 +61,7 @@ test('Creates an inspector for a state machine', async () => {
           },
           {
             "event": {
-              "input": undefined,
+              "input": null,
               "type": "xstate.init",
             },
             "sessionId": "x:0",

src/createInspector.ts

@@ -11,6 +11,7 @@ import { AnyActorRef, InspectionEvent, Snapshot } from 'xstate';
 import pkg from '../package.json';
 import { idleCallback } from './idleCallback';
 import safeStringify from 'safe-stable-stringify';
+import { serialize } from 'superjson';
 
 function getRoot(actorRef: AnyActorRef) {
   let marker: AnyActorRef | undefined = actorRef;
@@ -33,7 +34,10 @@ function getRootId(actorRefOrId: AnyActorRef | string): string | undefined {
 
 export interface InspectorOptions {
   filter?: (event: StatelyInspectionEvent) => boolean;
-  serialize?: (event: StatelyInspectionEvent) => StatelyInspectionEvent;
+  serialize?: (
+    event: StatelyInspectionEvent,
+    originalEvent: StatelyInspectionEvent
+  ) => StatelyInspectionEvent;
   /**
    * Whether to automatically start the inspector.
    *
@@ -44,7 +48,8 @@ export interface InspectorOptions {
 
 export const defaultInspectorOptions: Required<InspectorOptions> = {
   filter: () => true,
-  serialize: (event) => event,
+  serialize: (event) =>
+    serialize(event).json as unknown as StatelyInspectionEvent,
   autoStart: true,
 };
 
@@ -57,10 +62,11 @@ export function createInspector<TAdapter extends Adapter>(
       // Event filtered out
       return;
     }
-    const serializedEvent = options?.serialize?.(event) ?? event;
-    // idleCallback(() => {
+    const preSerializedEvent = defaultInspectorOptions.serialize(event, event);
+    const serializedEvent =
+      options?.serialize?.(preSerializedEvent, event) ?? preSerializedEvent;
+
     adapter.send(serializedEvent);
-    // })
   }
   const inspector: Inspector<TAdapter> = {
     adapter,

src/index.ts

@@ -8,3 +8,4 @@ export type {
   StatelySnapshotEvent,
 } from './types';
 export { createWebSocketInspector, createWebSocketReceiver } from './webSocket';
+export { createReduxDevToolsInspector } from './redux';