@xstate/inspect - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/xstate-inspect.umd.min.js

@@ -15,2 +15,2 @@ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("xstate")):"function"==typeof define&&define.amd?define(["exports","xstate"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).XStateInspect={},e.XState)}(this,(function(e,t){"use strict";
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var n=function(){return(n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var r=c;c.default=c,c.stable=f,c.stableStringify=f;var i=[],o=[];function s(){return{depthLimit:Number.MAX_SAFE_INTEGER,edgesLimit:Number.MAX_SAFE_INTEGER}}function c(e,t,n,r){var c;void 0===r&&(r=s()),function e(t,n,r,i,o,s,c){var u;if(s+=1,"object"==typeof t&&null!==t){for(u=0;u<i.length;u++)if(i[u]===t)return void a("[Circular]",t,n,o);if(void 0!==c.depthLimit&&s>c.depthLimit)return void a("[...]",t,n,o);if(void 0!==c.edgesLimit&&r+1>c.edgesLimit)return void a("[...]",t,n,o);if(i.push(t),Array.isArray(t))for(u=0;u<t.length;u++)e(t[u],u,u,i,t,s,c);else{var f=Object.keys(t);for(u=0;u<f.length;u++){var d=f[u];e(t[d],d,u,i,t,s,c)}}i.pop()}}(e,"",0,[],void 0,0,r);try{c=0===o.length?JSON.stringify(e,t,n):JSON.stringify(e,d(t),n)}catch(e){return JSON.stringify("[unable to serialize, circular reference is too complex to analyze]")}finally{for(;0!==i.length;){var u=i.pop();4===u.length?Object.defineProperty(u[0],u[1],u[3]):u[0][u[1]]=u[2]}}return c}function a(e,t,n,r){var s=Object.getOwnPropertyDescriptor(r,n);void 0!==s.get?s.configurable?(Object.defineProperty(r,n,{value:e}),i.push([r,n,t,s])):o.push([t,n,e]):(r[n]=e,i.push([r,n,t]))}function u(e,t){return e<t?-1:e>t?1:0}function f(e,t,n,r){void 0===r&&(r=s());var c,f=function e(t,n,r,o,s,c,f){var d;if(c+=1,"object"==typeof t&&null!==t){for(d=0;d<o.length;d++)if(o[d]===t)return void a("[Circular]",t,n,s);try{if("function"==typeof t.toJSON)return}catch(e){return}if(void 0!==f.depthLimit&&c>f.depthLimit)return void a("[...]",t,n,s);if(void 0!==f.edgesLimit&&r+1>f.edgesLimit)return void a("[...]",t,n,s);if(o.push(t),Array.isArray(t))for(d=0;d<t.length;d++)e(t[d],d,d,o,t,c,f);else{var l={},v=Object.keys(t).sort(u);for(d=0;d<v.length;d++){var p=v[d];e(t[p],p,d,o,t,c,f),l[p]=t[p]}if(void 0===s)return l;i.push([s,n,t]),s[n]=l}o.pop()}}(e,"",0,[],void 0,0,r)||e;try{c=0===o.length?JSON.stringify(f,t,n):JSON.stringify(f,d(t),n)}catch(e){return JSON.stringify("[unable to serialize, circular reference is too complex to analyze]")}finally{for(;0!==i.length;){var l=i.pop();4===l.length?Object.defineProperty(l[0],l[1],l[3]):l[0][l[1]]=l[2]}}return c}function d(e){return e=void 0!==e?e:function(e,t){return t},function(t,n){if(o.length>0)for(var r=0;r<o.length;r++){var i=o[r];if(i[1]===t&&i[0]===n){n=i[2],o.splice(r,1);break}}return e.call(this,t,n)}}function l(e){return"function"==typeof e?e():e}function v(e,t){try{return JSON.stringify(e,t)}catch(n){return r(e,t)}}function p(e){if(!e)return!1;try{if("object"==typeof e&&"type"in e&&e.type.startsWith("service."))return!0}catch(e){return!1}return!1}function y(e){var n=t.State.create(JSON.parse(e));return delete n.history,n}function g(e){switch(e.type){case"service.event":return n(n({},e),{event:JSON.parse(e.event)});case"service.register":return n(n({},e),{machine:t.createMachine(JSON.parse(e.machine)),state:y(e.state)});case"service.state":return n(n({},e),{state:y(e.state)});default:return e}}function h(e,t,r){var i,o,s={};try{for(var c=function(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}(t),a=c.next();!a.done;a=c.next()){var u=a.value;s[u]=e[u]}}catch(e){i={error:e}}finally{try{a&&!a.done&&(o=c.return)&&o.call(c)}finally{if(i)throw i.error}}var f=JSON.parse(v(s,r));return v(n(n({},e),f))}function b(e,t){return e.machine,e.configuration,e.history,h(function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}(e,["machine","configuration","history"]),["context","event","_event"],t)}function m(e,t){return h(e.definition,["context"],t)}var w=new Map;function S(){var e=new Set,t=new Set;return{services:e,register:function(n){e.add(n),w.set(n.sessionId,n),t.forEach((function(e){return e(n)})),n.onStop((function(){e.delete(n),w.delete(n.sessionId)}))},unregister:function(t){e.delete(t),w.delete(t.sessionId)},onRegister:function(n){return t.add(n),e.forEach((function(e){return n(e)})),{unsubscribe:function(){t.delete(n)}}}}}var O={url:"https://stately.ai/viz?inspect",iframe:function(){return document.querySelector("iframe[data-xstate]")},devTools:function(){var e=S();return globalThis.__xstate__=e,e},serialize:void 0},x=new Set;e.createDevTools=S,e.createWebSocketReceiver=function(e){var n,r=e.protocol,i=new WebSocket("".concat(void 0===r?"ws":r,"://").concat(e.server)),o=new Set,s=t.toActorRef({id:"xstate.webSocketReceiver",send:function(t){i.send(v(t,e.serialize))},subscribe:function(e,n,r){var i=t.toObserver(e,n,r);return o.add(i),{unsubscribe:function(){o.delete(i)}}},getSnapshot:function(){return n}});return i.onopen=function(){s.send({type:"xstate.inspecting"})},i.onmessage=function(e){if("string"==typeof e.data)try{var t=JSON.parse(e.data);p(t)&&(n=g(t),o.forEach((function(e){e.next(n)})))}catch(e){console.error(e)}},i.onerror=function(e){o.forEach((function(t){var n;null===(n=t.error)||void 0===n||n.call(t,e)}))},s},e.createWindowReceiver=function(e){var n,r=e||{},i=r.window,o=void 0===i?window:i,s=r.targetWindow,c=void 0===s?window.self===window.top?window.opener:window.parent:s,a=new Set,u=function(e){var t=e.data;p(t)&&(n=g(t),a.forEach((function(e){return e.next(n)})))};o.addEventListener("message",u);var f=t.toActorRef({id:"xstate.windowReceiver",send:function(e){c&&c.postMessage(e,"*")},subscribe:function(e,n,r){var i=t.toObserver(e,n,r);return a.add(i),{unsubscribe:function(){a.delete(i)}}},stop:function(){a.clear(),o.removeEventListener("message",u)},getSnapshot:function(){return n}});return f.send({type:"xstate.inspecting"}),f},e.inspect=function(e){var r=function(e){var t=n(n({},O),e);return n(n({},t),{url:new URL(t.url),iframe:l(t.iframe),devTools:l(t.devTools)})}(e),i=r.iframe,o=r.url,s=r.devTools;if(null!==i){var c,a,u=function(e,n){void 0===e&&(e=globalThis.__xstate__);var r=new Map,i=e.onRegister((function(e){r.set(e.sessionId,e)}));return t.createMachine({predictableActionArguments:!0,initial:"pendingConnection",context:{client:void 0},states:{pendingConnection:{},connected:{on:{"service.state":{actions:function(e,t){return e.client.send(t)}},"service.event":{actions:function(e,t){return e.client.send(t)}},"service.register":{actions:function(e,t){return e.client.send(t)}},"service.stop":{actions:function(e,t){return e.client.send(t)}},"xstate.event":{actions:function(e,t){var n=t.event,i=JSON.parse(n),o=r.get(i.origin);null==o||o.send(i)}},unload:{actions:function(e){e.client.send({type:"xstate.disconnect"})}},disconnect:"disconnected"}},disconnected:{entry:function(){i.unsubscribe()},type:"final"}},on:{"xstate.inspecting":{target:".connected",actions:[t.assign({client:function(e,t){return t.client}}),function(t){e.services.forEach((function(e){var r;null===(r=t.client)||void 0===r||r.send({type:"service.register",machine:m(e.machine,null==n?void 0:n.serialize),state:b(e.state||e.initialState,null==n?void 0:n.serialize),sessionId:e.sessionId})}))}]}}})}(s,e),f=t.interpret(u).start(),d=new Set,p=f.subscribe((function(e){d.forEach((function(t){return t.next(e)}))})),y=function(e){if("object"==typeof e.data&&null!==e.data&&"type"in e.data){i&&!c&&(c=i.contentWindow),a||(a={send:function(e){c.postMessage(e,o.origin)}});var t=n(n({},e.data),{client:a});f.send(t)}};window.addEventListener("message",y),window.addEventListener("unload",(function(){f.send({type:"unload"})}));var g=function(t){return v(t,null==e?void 0:e.serialize)};return s.onRegister((function(n){var r,i=n.state||n.initialState;if(f.send({type:"service.register",machine:m(n.machine,null==e?void 0:e.serialize),state:b(i,null==e?void 0:e.serialize),sessionId:n.sessionId,id:n.id,parent:null===(r=n.parent)||void 0===r?void 0:r.sessionId}),f.send({type:"service.event",event:g(i._event),sessionId:n.sessionId}),!x.has(n)){x.add(n);var o=n.send.bind(n);n.send=function(e,r){return f.send({type:"service.event",event:g(t.toSCXMLEvent(t.toEventObject(e,r))),sessionId:n.sessionId}),o(e,r)}}n.subscribe((function(t){void 0!==t&&f.send({type:"service.state",state:b(t,null==e?void 0:e.serialize),sessionId:n.sessionId})})),n.onStop((function(){f.send({type:"service.stop",sessionId:n.sessionId})}))})),i?(i.addEventListener("load",(function(){c=i.contentWindow})),i.setAttribute("src",String(o))):c=window.open(String(o),"xstateinspector"),{send:function(e){f.send(e)},subscribe:function(e,n,r){var i=t.toObserver(e,n,r);return d.add(i),i.next(f.state),{unsubscribe:function(){d.delete(i)}}},disconnect:function(){f.send("disconnect"),window.removeEventListener("message",y),p.unsubscribe()}}}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.")},Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */var n=function(){return(n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};var r=a;a.default=a,a.stable=d,a.stableStringify=d;var i=[],o=[];function s(){return{depthLimit:Number.MAX_SAFE_INTEGER,edgesLimit:Number.MAX_SAFE_INTEGER}}function a(e,t,n,r){var a;void 0===r&&(r=s()),function e(t,n,r,i,o,s,a){var u;if(s+=1,"object"==typeof t&&null!==t){for(u=0;u<i.length;u++)if(i[u]===t)return void c("[Circular]",t,n,o);if(void 0!==a.depthLimit&&s>a.depthLimit)return void c("[...]",t,n,o);if(void 0!==a.edgesLimit&&r+1>a.edgesLimit)return void c("[...]",t,n,o);if(i.push(t),Array.isArray(t))for(u=0;u<t.length;u++)e(t[u],u,u,i,t,s,a);else{var d=Object.keys(t);for(u=0;u<d.length;u++){var f=d[u];e(t[f],f,u,i,t,s,a)}}i.pop()}}(e,"",0,[],void 0,0,r);try{a=0===o.length?JSON.stringify(e,t,n):JSON.stringify(e,f(t),n)}catch(e){return JSON.stringify("[unable to serialize, circular reference is too complex to analyze]")}finally{for(;0!==i.length;){var u=i.pop();4===u.length?Object.defineProperty(u[0],u[1],u[3]):u[0][u[1]]=u[2]}}return a}function c(e,t,n,r){var s=Object.getOwnPropertyDescriptor(r,n);void 0!==s.get?s.configurable?(Object.defineProperty(r,n,{value:e}),i.push([r,n,t,s])):o.push([t,n,e]):(r[n]=e,i.push([r,n,t]))}function u(e,t){return e<t?-1:e>t?1:0}function d(e,t,n,r){void 0===r&&(r=s());var a,d=function e(t,n,r,o,s,a,d){var f;if(a+=1,"object"==typeof t&&null!==t){for(f=0;f<o.length;f++)if(o[f]===t)return void c("[Circular]",t,n,s);try{if("function"==typeof t.toJSON)return}catch(e){return}if(void 0!==d.depthLimit&&a>d.depthLimit)return void c("[...]",t,n,s);if(void 0!==d.edgesLimit&&r+1>d.edgesLimit)return void c("[...]",t,n,s);if(o.push(t),Array.isArray(t))for(f=0;f<t.length;f++)e(t[f],f,f,o,t,a,d);else{var l={},v=Object.keys(t).sort(u);for(f=0;f<v.length;f++){var p=v[f];e(t[p],p,f,o,t,a,d),l[p]=t[p]}if(void 0===s)return l;i.push([s,n,t]),s[n]=l}o.pop()}}(e,"",0,[],void 0,0,r)||e;try{a=0===o.length?JSON.stringify(d,t,n):JSON.stringify(d,f(t),n)}catch(e){return JSON.stringify("[unable to serialize, circular reference is too complex to analyze]")}finally{for(;0!==i.length;){var l=i.pop();4===l.length?Object.defineProperty(l[0],l[1],l[3]):l[0][l[1]]=l[2]}}return a}function f(e){return e=void 0!==e?e:function(e,t){return t},function(t,n){if(o.length>0)for(var r=0;r<o.length;r++){var i=o[r];if(i[1]===t&&i[0]===n){n=i[2],o.splice(r,1);break}}return e.call(this,t,n)}}function l(e){return"function"==typeof e?e():e}function v(e,t){try{return JSON.stringify(e,t)}catch(n){return r(e,t)}}function p(e){if(!e)return!1;try{if("object"==typeof e&&"type"in e&&e.type.startsWith("service."))return!0}catch(e){return!1}return!1}function y(e){var n=t.State.create(JSON.parse(e));return delete n.history,n}function g(e){switch(e.type){case"service.event":return n(n({},e),{event:JSON.parse(e.event)});case"service.register":return n(n({},e),{machine:t.createMachine(JSON.parse(e.machine)),state:y(e.state)});case"service.state":return n(n({},e),{state:y(e.state)});default:return e}}function h(e,t,r){var i,o,s={};try{for(var a=function(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}(t),c=a.next();!c.done;c=a.next()){var u=c.value;s[u]=e[u]}}catch(e){i={error:e}}finally{try{c&&!c.done&&(o=a.return)&&o.call(a)}finally{if(i)throw i.error}}var d=JSON.parse(v(s,r));return v(n(n({},e),d))}function b(e,t){return e.machine,e.configuration,e.history,h(function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}(e,["machine","configuration","history"]),["context","event","_event"],t)}function w(e,t){return h(e.definition,["context"],t)}var m=new Map;function S(){var e=new Set,t=new Set;return{services:e,register:function(n){e.add(n),m.set(n.sessionId,n),t.forEach((function(e){return e(n)})),n.onStop((function(){e.delete(n),m.delete(n.sessionId)}))},unregister:function(t){e.delete(t),m.delete(t.sessionId)},onRegister:function(n){return t.add(n),e.forEach((function(e){return n(e)})),{unsubscribe:function(){t.delete(n)}}}}}var O={url:"https://stately.ai/viz?inspect",iframe:function(){return document.querySelector("iframe[data-xstate]")},devTools:function(){var e=S();return globalThis.__xstate__=e,e},serialize:void 0,targetWindow:void 0},x=new Set;e.createDevTools=S,e.createWebSocketReceiver=function(e){var n,r=e.protocol,i=new WebSocket("".concat(void 0===r?"ws":r,"://").concat(e.server)),o=new Set,s=t.toActorRef({id:"xstate.webSocketReceiver",send:function(t){i.send(v(t,e.serialize))},subscribe:function(e,n,r){var i=t.toObserver(e,n,r);return o.add(i),{unsubscribe:function(){o.delete(i)}}},getSnapshot:function(){return n}});return i.onopen=function(){s.send({type:"xstate.inspecting"})},i.onmessage=function(e){if("string"==typeof e.data)try{var t=JSON.parse(e.data);p(t)&&(n=g(t),o.forEach((function(e){e.next(n)})))}catch(e){console.error(e)}},i.onerror=function(e){o.forEach((function(t){var n;null===(n=t.error)||void 0===n||n.call(t,e)}))},s},e.createWindowReceiver=function(e){var n,r=e||{},i=r.window,o=void 0===i?window:i,s=r.targetWindow,a=void 0===s?window.self===window.top?window.opener:window.parent:s,c=new Set,u=function(e){var t=e.data;p(t)&&(n=g(t),c.forEach((function(e){return e.next(n)})))};o.addEventListener("message",u);var d=t.toActorRef({id:"xstate.windowReceiver",send:function(e){a&&a.postMessage(e,"*")},subscribe:function(e,n,r){var i=t.toObserver(e,n,r);return c.add(i),{unsubscribe:function(){c.delete(i)}}},stop:function(){c.clear(),o.removeEventListener("message",u)},getSnapshot:function(){return n}});return d.send({type:"xstate.inspecting"}),d},e.inspect=function(e){var r=function(e){var t=n(n({},O),e);return n(n({},t),{url:new URL(t.url),iframe:l(t.iframe),devTools:l(t.devTools)})}(e),i=r.iframe,o=r.url,s=r.devTools;if(null===(null==e?void 0:e.targetWindow))throw new Error("Received a nullable `targetWindow`.");var a=r.targetWindow;if(null!==i||a){var c,u=function(e,n){void 0===e&&(e=globalThis.__xstate__);var r=new Map,i=e.onRegister((function(e){r.set(e.sessionId,e)}));return t.createMachine({predictableActionArguments:!0,initial:"pendingConnection",context:{client:void 0},states:{pendingConnection:{},connected:{on:{"service.state":{actions:function(e,t){return e.client.send(t)}},"service.event":{actions:function(e,t){return e.client.send(t)}},"service.register":{actions:function(e,t){return e.client.send(t)}},"service.stop":{actions:function(e,t){return e.client.send(t)}},"xstate.event":{actions:function(e,t){var n=t.event,i=JSON.parse(n),o=r.get(i.origin);null==o||o.send(i)}},unload:{actions:function(e){e.client.send({type:"xstate.disconnect"})}},disconnect:"disconnected"}},disconnected:{entry:function(){i.unsubscribe()},type:"final"}},on:{"xstate.inspecting":{target:".connected",actions:[t.assign({client:function(e,t){return t.client}}),function(t){e.services.forEach((function(e){var r;null===(r=t.client)||void 0===r||r.send({type:"service.register",machine:w(e.machine,null==n?void 0:n.serialize),state:b(e.state||e.initialState,null==n?void 0:n.serialize),sessionId:e.sessionId})}))}]}}})}(s,e),d=t.interpret(u).start(),f=new Set,p=d.subscribe((function(e){f.forEach((function(t){return t.next(e)}))})),y=function(e){if("object"==typeof e.data&&null!==e.data&&"type"in e.data){i&&!a&&(a=i.contentWindow),c||(c={send:function(e){a.postMessage(e,o.origin)}});var t=n(n({},e.data),{client:c});d.send(t)}};window.addEventListener("message",y),window.addEventListener("unload",(function(){d.send({type:"unload"})}));var g=function(t){return v(t,null==e?void 0:e.serialize)};return s.onRegister((function(n){var r,i=n.state||n.initialState;if(d.send({type:"service.register",machine:w(n.machine,null==e?void 0:e.serialize),state:b(i,null==e?void 0:e.serialize),sessionId:n.sessionId,id:n.id,parent:null===(r=n.parent)||void 0===r?void 0:r.sessionId}),d.send({type:"service.event",event:g(i._event),sessionId:n.sessionId}),!x.has(n)){x.add(n);var o=n.send.bind(n);n.send=function(e,r){return d.send({type:"service.event",event:g(t.toSCXMLEvent(t.toEventObject(e,r))),sessionId:n.sessionId}),o(e,r)}}n.subscribe((function(t){void 0!==t&&d.send({type:"service.state",state:b(t,null==e?void 0:e.serialize),sessionId:n.sessionId})})),n.onStop((function(){d.send({type:"service.stop",sessionId:n.sessionId})}))})),i?(i.addEventListener("load",(function(){a=i.contentWindow})),i.setAttribute("src",String(o))):a||(a=window.open(String(o),"xstateinspector")),{send:function(e){d.send(e)},subscribe:function(e,n,r){var i=t.toObserver(e,n,r);return f.add(i),i.next(d.state),{unsubscribe:function(){f.delete(i)}}},disconnect:function(){d.send("disconnect"),window.removeEventListener("message",y),p.unsubscribe()}}}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.")},Object.defineProperty(e,"__esModule",{value:!0})}));

es/browser.js

@@ -47,3 +47,4 @@ import { __assign } from './_virtual/_tslib.js';
     },
-    serialize: undefined
+    serialize: undefined,
+    targetWindow: undefined
 };
@@ -56,4 +57,9 @@ var getFinalOptions = function (options) {
 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.');
@@ -68,3 +74,2 @@ return undefined;
     });
-    var targetWindow;
     var client;
@@ -153,3 +158,3 @@ var messageHandler = function (event) {
     }
-    else {
+    else if (!targetWindow) {
         targetWindow = window.open(String(url), 'xstateinspector');
@@ -156,0 +161,0 @@ }

es/types.d.ts

@@ -12,2 +12,3 @@ import type { ActorRef, AnyInterpreter, AnyState, AnyStateMachine, SCXML } from 'xstate';
     serialize?: Replacer | undefined;
+    targetWindow?: Window | undefined | null;
 }
@@ -14,0 +15,0 @@ export interface Inspector extends ActorRef<InspectMachineEvent, AnyState> {

lib/browser.js

@@ -51,3 +51,4 @@ 'use strict';
     },
-    serialize: undefined
+    serialize: undefined,
+    targetWindow: undefined
 };
@@ -60,4 +61,9 @@ var getFinalOptions = function (options) {
 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.');
@@ -72,3 +78,2 @@ return undefined;
     });
-    var targetWindow;
     var client;
@@ -157,3 +162,3 @@ var messageHandler = function (event) {
     }
-    else {
+    else if (!targetWindow) {
         targetWindow = window.open(String(url), 'xstateinspector');
@@ -160,0 +165,0 @@ }

lib/types.d.ts

@@ -12,2 +12,3 @@ import type { ActorRef, AnyInterpreter, AnyState, AnyStateMachine, SCXML } from 'xstate';
     serialize?: Replacer | undefined;
+    targetWindow?: Window | undefined | null;
 }
@@ -14,0 +15,0 @@ export interface Inspector extends ActorRef<InspectMachineEvent, AnyState> {

package.json

 {
   "name": "@xstate/inspect",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "XState inspection utilities",
@@ -56,3 +56,3 @@ "keywords": [
     "ws": "^8.0.0",
-    "xstate": "^4.35.3"
+    "xstate": "^4.37.0"
   },
@@ -59,0 +59,0 @@ "peerDependenciesMeta": {

README.md

@@ -58,1 +58,101 @@ # @xstate/inspect
 ```
+
+## 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

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 by5.81%

Lines of code

1426

increased by0.92%

Number of lines in readme file

157

increased by170.69%

No dependency changes