@xstate/inspect - npm Package Compare versions

Comparing version 0.6.0 to 0.8.0

es/_virtual/_tslib.js

@@ -27,2 +27,14 @@ /*! *****************************************************************************
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __values(o) {
@@ -40,2 +52,2 @@ var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 
-export { __assign, __values };
+export { __assign, __rest, __values };

es/browser.d.ts

@@ -1,3 +0,2 @@
-import { Interpreter, EventObject } from 'xstate';
-import { XStateDevInterface } from 'xstate/lib/devTools';
+import { EventObject, Interpreter, XStateDevInterface } from 'xstate';
 import type { Inspector, InspectorOptions, InspectReceiver, WebSocketReceiverOptions, WindowReceiverOptions } from './types';
@@ -7,3 +6,3 @@ export declare const serviceMap: Map<string, Interpreter<any, any, EventObject, {
     context: any;
-}>>;
+}, import("xstate").TypegenDisabled>>;
 export declare function createDevTools(): XStateDevInterface;
@@ -10,0 +9,0 @@ export declare function inspect(options?: InspectorOptions): Inspector | undefined;

es/browser.js

 import { __assign } from './_virtual/_tslib.js';
-import { interpret } from 'xstate';
-import { toSCXMLEvent, toEventObject, toObserver } from 'xstate/lib/utils';
+import { interpret, toSCXMLEvent, toEventObject, toObserver, toActorRef } from 'xstate';
+import { createInspectMachine } from './inspectMachine.js';
+import { stringifyMachine, stringifyState } from './serialize.js';
 import { getLazy, stringify, isReceiverEvent, parseReceiverEvent } from './utils.js';
-import { stringifyMachine, stringifyState } from './serialize.js';
-import { createInspectMachine } from './inspectMachine.js';
 
@@ -39,3 +38,3 @@ var serviceMap = new Map();
 var defaultInspectorOptions = {
-    url: 'https://statecharts.io/inspect',
+    url: 'https://stately.ai/viz?inspect',
     iframe: function () {
@@ -49,3 +48,4 @@ return document.querySelector('iframe[data-xstate]');
     },
-    serialize: undefined
+    serialize: undefined,
+    targetWindow: undefined
 };
@@ -56,5 +56,11 @@ var getFinalOptions = function (options) {
 };
+var patchedInterpreters = new Set();
 function inspect(options) {
-    var _a = getFinalOptions(options), iframe = _a.iframe, url = _a.url, devTools = _a.devTools;
-    if (iframe === null) {
+    var finalOptions = getFinalOptions(options);
+    var iframe = finalOptions.iframe, url = finalOptions.url, devTools = finalOptions.devTools;
+    if ((options === null || options === void 0 ? void 0 : options.targetWindow) === null) {
+        throw new Error('Received a nullable `targetWindow`.');
+    }
+    var targetWindow = finalOptions.targetWindow;
+    if (iframe === null && !targetWindow) {
         console.warn('No suitable <iframe> found to embed the inspector. Please pass an <iframe> element to `inspect(iframe)` or create an <iframe data-xstate></iframe> element.');
@@ -69,3 +75,2 @@ return undefined;
     });
-    var targetWindow;
     var client;
@@ -113,14 +118,17 @@ var messageHandler = function (event) {
         });
-        // monkey-patch service.send so that we know when an event was sent
-        // to a service *before* it is processed, since other events might occur
-        // while the sent one is being processed, which throws the order off
-        var originalSend = service.send.bind(service);
-        service.send = function inspectSend(event, payload) {
-            inspectService.send({
-                type: 'service.event',
-                event: stringifyWithSerializer(toSCXMLEvent(toEventObject(event, payload))),
-                sessionId: service.sessionId
-            });
-            return originalSend(event, payload);
-        };
+        if (!patchedInterpreters.has(service)) {
+            patchedInterpreters.add(service);
+            // monkey-patch service.send so that we know when an event was sent
+            // to a service *before* it is processed, since other events might occur
+            // while the sent one is being processed, which throws the order off
+            var originalSend_1 = service.send.bind(service);
+            service.send = function inspectSend(event, payload) {
+                inspectService.send({
+                    type: 'service.event',
+                    event: stringifyWithSerializer(toSCXMLEvent(toEventObject(event, payload))),
+                    sessionId: service.sessionId
+                });
+                return originalSend_1(event, payload);
+            };
+        }
         service.subscribe(function (state) {
@@ -152,3 +160,3 @@ // filter out synchronous notification from within `.start()` call
     }
-    else {
+    else if (!targetWindow) {
         targetWindow = window.open(String(url), 'xstateinspector');
@@ -189,3 +197,3 @@ }
     ownWindow.addEventListener('message', handler);
-    var actorRef = {
+    var actorRef = toActorRef({
         id: 'xstate.windowReceiver',
@@ -214,3 +222,3 @@ send: function (event) {
         }
-    };
+    });
     actorRef.send({
@@ -226,3 +234,3 @@ type: 'xstate.inspecting'
     var latestEvent;
-    var actorRef = {
+    var actorRef = toActorRef({
         id: 'xstate.webSocketReceiver',
@@ -244,3 +252,3 @@ send: function (event) {
         }
-    };
+    });
     ws.onopen = function () {
@@ -247,0 +255,0 @@ actorRef.send({

es/inspectMachine.d.ts

@@ -1,3 +0,2 @@
-import { ActorRef } from 'xstate';
-import { XStateDevInterface } from 'xstate/lib/devTools';
+import { ActorRef, XStateDevInterface } from 'xstate';
 import { ReceiverEvent, Replacer } from './types';
@@ -25,5 +24,3 @@ export declare type InspectMachineEvent = ReceiverEvent | {
     };
-}, import("xstate").ActionObject<{
-    client?: Pick<ActorRef<any, any>, "send"> | undefined;
-}, InspectMachineEvent>>;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, InspectMachineEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;
 //# sourceMappingURL=inspectMachine.d.ts.map

es/inspectMachine.js

@@ -13,2 +13,3 @@ import { createMachine, assign } from 'xstate';
     return createMachine({
+        predictableActionArguments: true,
         initial: 'pendingConnection',
@@ -15,0 +16,0 @@ context: {

es/serialize.d.ts

@@ -1,6 +0,6 @@
-import { State, StateMachine } from 'xstate';
+import { AnyState, AnyStateMachine } from 'xstate';
 import { Replacer } from './types';
 export declare function selectivelyStringify<T extends object>(value: T, keys: Array<keyof T>, replacer?: Replacer): string;
-export declare function stringifyState(state: State<any, any>, replacer?: Replacer): string;
-export declare function stringifyMachine(machine: StateMachine<any, any, any>, replacer?: Replacer): string;
+export declare function stringifyState(state: AnyState, replacer?: Replacer): string;
+export declare function stringifyMachine(machine: AnyStateMachine, replacer?: Replacer): string;
 //# sourceMappingURL=serialize.d.ts.map

es/serialize.js

@@ -1,2 +0,2 @@
-import { __assign, __values } from './_virtual/_tslib.js';
+import { __assign, __values, __rest } from './_virtual/_tslib.js';
 import { stringify } from './utils.js';
@@ -24,8 +24,9 @@
 function stringifyState(state, replacer) {
-    return selectivelyStringify(state, ['context', 'event', '_event'], replacer);
+    state.machine; state.configuration; state.history; var stateToStringify = __rest(state, ["machine", "configuration", "history"]);
+    return selectivelyStringify(stateToStringify, ['context', 'event', '_event'], replacer);
 }
 function stringifyMachine(machine, replacer) {
-    return selectivelyStringify(machine, ['context'], replacer);
+    return selectivelyStringify(machine.definition, ['context'], replacer);
 }
 
 export { selectivelyStringify, stringifyMachine, stringifyState };

es/types.d.ts

@@ -1,6 +0,6 @@
-import type { ActorRef, Interpreter, SCXML, State, StateMachine } from 'xstate';
-import { XStateDevInterface } from 'xstate/lib/devTools';
+import type { ActorRef, AnyInterpreter, AnyState, AnyStateMachine, SCXML } from 'xstate';
+import { XStateDevInterface } from 'xstate';
 import { InspectMachineEvent } from './inspectMachine';
 export declare type MaybeLazy<T> = T | (() => T);
-export declare type ServiceListener = (service: Interpreter<any>) => void;
+export declare type ServiceListener = (service: AnyInterpreter) => void;
 export declare type Replacer = (key: string, value: any) => any;
@@ -12,4 +12,5 @@ export interface InspectorOptions {
     serialize?: Replacer | undefined;
+    targetWindow?: Window | undefined | null;
 }
-export interface Inspector extends ActorRef<InspectMachineEvent, State<any, any, any>> {
+export interface Inspector extends ActorRef<InspectMachineEvent, AnyState> {
     /**
@@ -55,4 +56,4 @@ * Disconnects the inspector.
     type: 'service.register';
-    machine: StateMachine<any, any, any>;
-    state: State<any, any>;
+    machine: AnyStateMachine;
+    state: AnyState;
     id: string;
@@ -67,3 +68,3 @@ sessionId: string;
     type: 'service.state';
-    state: State<any, any>;
+    state: AnyState;
     sessionId: string;
@@ -70,0 +71,0 @@ } | {

es/utils.d.ts

@@ -1,2 +0,2 @@
-import { State } from 'xstate';
+import { AnyState } from 'xstate';
 import { ParsedReceiverEvent, ReceiverEvent } from './types';
@@ -6,4 +6,4 @@ export declare function getLazy<T>(value: T): T extends () => infer R ? R : T;
 export declare function isReceiverEvent(event: any): event is ReceiverEvent;
-export declare function parseState(stateJSON: string): State<any, any>;
+export declare function parseState(stateJSON: string): AnyState;
 export declare function parseReceiverEvent(event: ReceiverEvent): ParsedReceiverEvent;
 //# sourceMappingURL=utils.d.ts.map

es/utils.js

 import { __assign } from './_virtual/_tslib.js';
+import safeStringify from 'fast-safe-stringify';
 import { createMachine, State } from 'xstate';
-import safeStringify from 'fast-safe-stringify';
 
@@ -5,0 +5,0 @@ function getLazy(value) {

lib/_virtual/_tslib.js

@@ -31,2 +31,14 @@ 'use strict';
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __values(o) {
@@ -44,2 +56,3 @@ var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
 
+exports.__rest = __rest;
 exports.__values = __values;

lib/browser.d.ts

@@ -1,3 +0,2 @@
-import { Interpreter, EventObject } from 'xstate';
-import { XStateDevInterface } from 'xstate/lib/devTools';
+import { EventObject, Interpreter, XStateDevInterface } from 'xstate';
 import type { Inspector, InspectorOptions, InspectReceiver, WebSocketReceiverOptions, WindowReceiverOptions } from './types';
@@ -7,3 +6,3 @@ export declare const serviceMap: Map<string, Interpreter<any, any, EventObject, {
     context: any;
-}>>;
+}, import("xstate").TypegenDisabled>>;
 export declare function createDevTools(): XStateDevInterface;
@@ -10,0 +9,0 @@ export declare function inspect(options?: InspectorOptions): Inspector | undefined;

lib/browser.js

@@ -7,6 +7,5 @@ 'use strict';
 var xstate = require('xstate');
-var utils$1 = require('xstate/lib/utils');
+var inspectMachine = require('./inspectMachine.js');
+var serialize = require('./serialize.js');
 var utils = require('./utils.js');
-var serialize = require('./serialize.js');
-var inspectMachine = require('./inspectMachine.js');
 
@@ -44,3 +43,3 @@ var serviceMap = new Map();
 var defaultInspectorOptions = {
-    url: 'https://statecharts.io/inspect',
+    url: 'https://stately.ai/viz?inspect',
     iframe: function () {
@@ -54,3 +53,4 @@ return document.querySelector('iframe[data-xstate]');
     },
-    serialize: undefined
+    serialize: undefined,
+    targetWindow: undefined
 };
@@ -61,5 +61,11 @@ var getFinalOptions = function (options) {
 };
+var patchedInterpreters = new Set();
 function inspect(options) {
-    var _a = getFinalOptions(options), iframe = _a.iframe, url = _a.url, devTools = _a.devTools;
-    if (iframe === null) {
+    var finalOptions = getFinalOptions(options);
+    var iframe = finalOptions.iframe, url = finalOptions.url, devTools = finalOptions.devTools;
+    if ((options === null || options === void 0 ? void 0 : options.targetWindow) === null) {
+        throw new Error('Received a nullable `targetWindow`.');
+    }
+    var targetWindow = finalOptions.targetWindow;
+    if (iframe === null && !targetWindow) {
         console.warn('No suitable <iframe> found to embed the inspector. Please pass an <iframe> element to `inspect(iframe)` or create an <iframe data-xstate></iframe> element.');
@@ -74,3 +80,2 @@ return undefined;
     });
-    var targetWindow;
     var client;
@@ -118,14 +123,17 @@ var messageHandler = function (event) {
         });
-        // monkey-patch service.send so that we know when an event was sent
-        // to a service *before* it is processed, since other events might occur
-        // while the sent one is being processed, which throws the order off
-        var originalSend = service.send.bind(service);
-        service.send = function inspectSend(event, payload) {
-            inspectService.send({
-                type: 'service.event',
-                event: stringifyWithSerializer(utils$1.toSCXMLEvent(utils$1.toEventObject(event, payload))),
-                sessionId: service.sessionId
-            });
-            return originalSend(event, payload);
-        };
+        if (!patchedInterpreters.has(service)) {
+            patchedInterpreters.add(service);
+            // monkey-patch service.send so that we know when an event was sent
+            // to a service *before* it is processed, since other events might occur
+            // while the sent one is being processed, which throws the order off
+            var originalSend_1 = service.send.bind(service);
+            service.send = function inspectSend(event, payload) {
+                inspectService.send({
+                    type: 'service.event',
+                    event: stringifyWithSerializer(xstate.toSCXMLEvent(xstate.toEventObject(event, payload))),
+                    sessionId: service.sessionId
+                });
+                return originalSend_1(event, payload);
+            };
+        }
         service.subscribe(function (state) {
@@ -157,3 +165,3 @@ // filter out synchronous notification from within `.start()` call
     }
-    else {
+    else if (!targetWindow) {
         targetWindow = window.open(String(url), 'xstateinspector');
@@ -166,3 +174,3 @@ }
         subscribe: function (next, onError, onComplete) {
-            var observer = utils$1.toObserver(next, onError, onComplete);
+            var observer = xstate.toObserver(next, onError, onComplete);
             listeners.add(observer);
@@ -195,3 +203,3 @@ observer.next(inspectService.state);
     ownWindow.addEventListener('message', handler);
-    var actorRef = {
+    var actorRef = xstate.toActorRef({
         id: 'xstate.windowReceiver',
@@ -205,3 +213,3 @@ send: function (event) {
         subscribe: function (next, onError, onComplete) {
-            var observer = utils$1.toObserver(next, onError, onComplete);
+            var observer = xstate.toObserver(next, onError, onComplete);
             observers.add(observer);
@@ -221,3 +229,3 @@ return {
         }
-    };
+    });
     actorRef.send({
@@ -233,3 +241,3 @@ type: 'xstate.inspecting'
     var latestEvent;
-    var actorRef = {
+    var actorRef = xstate.toActorRef({
         id: 'xstate.webSocketReceiver',
@@ -240,3 +248,3 @@ send: function (event) {
         subscribe: function (next, onError, onComplete) {
-            var observer = utils$1.toObserver(next, onError, onComplete);
+            var observer = xstate.toObserver(next, onError, onComplete);
             observers.add(observer);
@@ -252,3 +260,3 @@ return {
         }
-    };
+    });
     ws.onopen = function () {
@@ -255,0 +263,0 @@ actorRef.send({

lib/inspectMachine.d.ts

@@ -1,3 +0,2 @@
-import { ActorRef } from 'xstate';
-import { XStateDevInterface } from 'xstate/lib/devTools';
+import { ActorRef, XStateDevInterface } from 'xstate';
 import { ReceiverEvent, Replacer } from './types';
@@ -25,5 +24,3 @@ export declare type InspectMachineEvent = ReceiverEvent | {
     };
-}, import("xstate").ActionObject<{
-    client?: Pick<ActorRef<any, any>, "send"> | undefined;
-}, InspectMachineEvent>>;
+}, import("xstate").BaseActionObject, import("xstate").ServiceMap, import("xstate").ResolveTypegenMeta<import("xstate").TypegenDisabled, InspectMachineEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;
 //# sourceMappingURL=inspectMachine.d.ts.map

lib/inspectMachine.js

@@ -17,2 +17,3 @@ 'use strict';
     return xstate.createMachine({
+        predictableActionArguments: true,
         initial: 'pendingConnection',
@@ -19,0 +20,0 @@ context: {

lib/serialize.d.ts

@@ -1,6 +0,6 @@
-import { State, StateMachine } from 'xstate';
+import { AnyState, AnyStateMachine } from 'xstate';
 import { Replacer } from './types';
 export declare function selectivelyStringify<T extends object>(value: T, keys: Array<keyof T>, replacer?: Replacer): string;
-export declare function stringifyState(state: State<any, any>, replacer?: Replacer): string;
-export declare function stringifyMachine(machine: StateMachine<any, any, any>, replacer?: Replacer): string;
+export declare function stringifyState(state: AnyState, replacer?: Replacer): string;
+export declare function stringifyMachine(machine: AnyStateMachine, replacer?: Replacer): string;
 //# sourceMappingURL=serialize.d.ts.map

lib/serialize.js

@@ -28,6 +28,7 @@ 'use strict';
 function stringifyState(state, replacer) {
-    return selectivelyStringify(state, ['context', 'event', '_event'], replacer);
+    state.machine; state.configuration; state.history; var stateToStringify = _tslib.__rest(state, ["machine", "configuration", "history"]);
+    return selectivelyStringify(stateToStringify, ['context', 'event', '_event'], replacer);
 }
 function stringifyMachine(machine, replacer) {
-    return selectivelyStringify(machine, ['context'], replacer);
+    return selectivelyStringify(machine.definition, ['context'], replacer);
 }
@@ -34,0 +35,0 @@

lib/server.js

@@ -7,5 +7,4 @@ 'use strict';
 var xstate = require('xstate');
-var utils$1 = require('xstate/lib/utils');
+var inspectMachine = require('./inspectMachine.js');
 var utils = require('./utils.js');
-var inspectMachine = require('./inspectMachine.js');
 
@@ -42,3 +41,3 @@ var services = new Set();
     var inspectService = xstate.interpret(inspectMachine.createInspectMachine(globalThis.__xstate__, options)).start();
-    var client = {
+    var client = xstate.toActorRef({
         id: '@@xstate/ws-client',
@@ -56,3 +55,3 @@ send: function (event) {
         getSnapshot: function () { return undefined; }
-    };
+    });
     server.on('connection', function connection(wsClient) {
@@ -87,3 +86,3 @@ wsClient.on('message', function incoming(data, isBinary) {
                 type: 'service.event',
-                event: utils.stringify(utils$1.toSCXMLEvent(utils$1.toEventObject(event, payload))),
+                event: utils.stringify(xstate.toSCXMLEvent(xstate.toEventObject(event, payload))),
                 sessionId: service.sessionId
@@ -106,11 +105,4 @@ });
         });
-        service.subscribe(function (state) {
-            inspectService.send({
-                type: 'service.state',
-                state: JSON.stringify(state),
-                sessionId: service.sessionId
-            });
-        });
     });
-    var inspector = {
+    var inspector = xstate.toActorRef({
         id: '@@xstate/inspector',
@@ -130,3 +122,3 @@ send: function (event) {
         getSnapshot: function () { return undefined; }
-    };
+    });
     server.on('close', function () {
@@ -133,0 +125,0 @@ inspectService.stop();

lib/types.d.ts

@@ -1,6 +0,6 @@
-import type { ActorRef, Interpreter, SCXML, State, StateMachine } from 'xstate';
-import { XStateDevInterface } from 'xstate/lib/devTools';
+import type { ActorRef, AnyInterpreter, AnyState, AnyStateMachine, SCXML } from 'xstate';
+import { XStateDevInterface } from 'xstate';
 import { InspectMachineEvent } from './inspectMachine';
 export declare type MaybeLazy<T> = T | (() => T);
-export declare type ServiceListener = (service: Interpreter<any>) => void;
+export declare type ServiceListener = (service: AnyInterpreter) => void;
 export declare type Replacer = (key: string, value: any) => any;
@@ -12,4 +12,5 @@ export interface InspectorOptions {
     serialize?: Replacer | undefined;
+    targetWindow?: Window | undefined | null;
 }
-export interface Inspector extends ActorRef<InspectMachineEvent, State<any, any, any>> {
+export interface Inspector extends ActorRef<InspectMachineEvent, AnyState> {
     /**
@@ -55,4 +56,4 @@ * Disconnects the inspector.
     type: 'service.register';
-    machine: StateMachine<any, any, any>;
-    state: State<any, any>;
+    machine: AnyStateMachine;
+    state: AnyState;
     id: string;
@@ -67,3 +68,3 @@ sessionId: string;
     type: 'service.state';
-    state: State<any, any>;
+    state: AnyState;
     sessionId: string;
@@ -70,0 +71,0 @@ } | {

lib/utils.d.ts

@@ -1,2 +0,2 @@
-import { State } from 'xstate';
+import { AnyState } from 'xstate';
 import { ParsedReceiverEvent, ReceiverEvent } from './types';
@@ -6,4 +6,4 @@ export declare function getLazy<T>(value: T): T extends () => infer R ? R : T;
 export declare function isReceiverEvent(event: any): event is ReceiverEvent;
-export declare function parseState(stateJSON: string): State<any, any>;
+export declare function parseState(stateJSON: string): AnyState;
 export declare function parseReceiverEvent(event: ReceiverEvent): ParsedReceiverEvent;
 //# sourceMappingURL=utils.d.ts.map

lib/utils.js

@@ -6,4 +6,4 @@ 'use strict';
 var _tslib = require('./_virtual/_tslib.js');
+var safeStringify = require('fast-safe-stringify');
 var xstate = require('xstate');
-var safeStringify = require('fast-safe-stringify');
 
@@ -22,3 +22,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
     catch (e) {
-        return safeStringify__default['default'](value, replacer);
+        return safeStringify__default["default"](value, replacer);
     }
@@ -25,0 +25,0 @@ }

package.json

 {
   "name": "@xstate/inspect",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "XState inspection utilities",
@@ -15,3 +15,3 @@ "keywords": [
   "author": "David Khourshid <[e-mail]>",
-  "homepage": "https://github.com/davidkpiano/xstate/tree/main/packages/xstate-inspect#readme",
+  "homepage": "https://github.com/statelyai/xstate/tree/main/packages/xstate-inspect#readme",
   "license": "MIT",
@@ -26,7 +26,8 @@ "main": "lib/index.js",
     "es/**/*.js",
-    "es/**/*.d.ts"
+    "es/**/*.d.ts",
+    "dist/**/*.js"
   ],
   "repository": {
     "type": "git",
-    "url": "git+ssh://[e-mail]/davidkpiano/xstate.git"
+    "url": "git+ssh://[e-mail]/statelyai/xstate.git"
   },
@@ -37,12 +38,16 @@ "scripts": {
     "build": "rollup -c",
-    "prepublish": "npm run build"
+    "prepare": "npm run build"
   },
   "bugs": {
-    "url": "https://github.com/davidkpiano/xstate/issues"
+    "url": "https://github.com/statelyai/xstate/issues"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
     "@types/ws": "^8.2.2",
-    "rollup": "^2.35.1",
+    "rollup": "^2.69.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "typescript": "^4.5.2",
+    "typescript": "^4.8.4",
     "ws": "^8.4.0",
@@ -53,3 +58,4 @@ "xstate": "*"
     "@types/ws": "^8.0.0",
-    "ws": "^8.0.0"
+    "ws": "^8.0.0",
+    "xstate": "^4.37.0"
   },
@@ -62,4 +68,4 @@ "peerDependenciesMeta": {
   "dependencies": {
-    "fast-safe-stringify": "^2.0.7"
+    "fast-safe-stringify": "^2.1.1"
   }
 }

README.md

@@ -28,2 +28,10 @@ # @xstate/inspect
 
+**Via CDN**
+
+```html
+<script src="https://unpkg.com/@xstate/inspect/dist/xstate-inspect.umd.min.js"></script>
+```
+
+By using the global variable `XStateInspect`
+
 2. Import it at the beginning of your project, before any other code is called:
@@ -36,3 +44,3 @@
   // options
-  // url: 'https://statecharts.io/inspect', // (default)
+  // url: 'https://stately.ai/viz?inspect', // (default)
   iframe: false // open in new window
@@ -50,2 +58,103 @@ });
 const service = interpret(someMachine, { devTools: true });
+service.start();
 ```
+
+## Configuration
+
+* `url` *(optional)* - The endpoint that the Inspector sends events to. Default: https://stately.ai/viz?inspect
+* `iframe` *(optional)* - The iframe that loads the provided URL. If iframe is set to `false`, then a new tab is opened instead.
+* `devTools` *(optional)* - Allows custom implementation for lifecycle hooks.
+* `serialize` *(optional)* - A custom serializer for messages sent to the URL endpoint. Useful for sanitizing sensitive information, such as credentials, from leaving your application.
+* `targetWindow` *(optional)* - Provide a pre-existing window location that will be used instead of opening a new window etc. When using this option, you must still provide the `url` value due to security checks in browser APIs, and the `iframe` option is ignored in such a case.
+
+### Examples
+
+### Add a custom serializer to @xstate/inspector events and transitions messages
+
+When is this useful?
+
+* Remove sensitive items, such as `credentials`
+* Add additional custom handling
+
+```typescript
+// Remove credentials from being forwarded
+inspect({
+  serialize: (key: string, value: any) => {
+    return key === "credentials" && typeof value === "object" ? {} : value;
+  },
+});
+
+// Add a custom local log
+inspect({
+  serialize: (key: string, value: any) => {
+    if (key === "ready") {
+      console.log("Detected ready key");
+    }
+    return value;
+  },
+});
+```
+
+### Easily log all machine events and transitions
+
+When is this useful?
+
+* Allows you to quickly see all events and transitions for your machines
+* No need to add manual `console.log` statements to your machine definitions
+
+
+```typescript
+// The URL and port of your local project (ex. Vite, Webpack, etc).
+const url = "http://127.0.0.1:5174/"
+
+const inspector = inspect({
+  url,
+  iframe: undefined,
+  targetWindow: window
+});
+
+// In the same window, subsribe to messages from @xstate/inspector
+createWindowReceiver({}).subscribe(console.log);
+
+// Start your machine, and all events generated are logged to the console
+interpret(machine, { devTools: true }).start({});
+
+```
+
+### Send events to a separate, locally hosted tool
+
+When is this useful?
+
+* Forward messages to a custom endpoint, that you can then listen to and add custom handling for messages
+
+
+```typescript
+// In your client application
+const url = "http://127.0.0.1:8443/"
+const targetWindow = window.open(url);
+
+const inspector = inspect({
+  // The URL must still be provided. This is used by postMessage, as it's
+  // not possible to do targetWindow.location for security reasons
+  url,
+  targetWindow
+});
+
+
+// In the second, hosted application
+createWindowReceiver({}).subscribe((event) => {
+  if (event.type === "service.register") {
+    // Do something when a new machine is started
+
+  } else if (event.type === "service.stop") {
+    // Do something when a machine enters a terminal state
+
+  } else if (event.type === "service.event") {
+    // Do something when a machine recieves an event
+
+  } else if (event.type === "service.state") {
+    // Do something when a machine enters to a new state
+    // Note: Does not handle transitional states.
+  }
+});
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72252

increased by16.47%

Lines of code

1426

increased by5.86%

Number of lines in readme file

157

increased by220.41%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

10

increased by66.67%

Number of low quality alerts

2

increased by100%