@xstate/inspect - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

es/index.js

@@ -25,4 +25,3 @@ var __assign = (this && this.__assign) || function () {
 var defaultInspectorOptions = {
-    // url: 'https://statecharts.io/embed'
-    url: 'http://localhost:3001',
+    url: 'https://embed.statecharts.io',
     iframe: function () { return document.querySelector('iframe[data-xstate]'); }
@@ -33,2 +32,12 @@ };
     var resolvedIframe = typeof iframe === 'function' ? iframe() : iframe;
+    var deferredEvents = [];
+    var targetWindow;
+    var postMessage = function (event) {
+        if (!targetWindow) {
+            deferredEvents.push(event);
+        }
+        else {
+            targetWindow.postMessage(event, '*');
+        }
+    };
     if (!resolvedIframe) {
@@ -38,22 +47,32 @@ 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.');
     }
-    resolvedIframe.addEventListener('load', function () {
-        window.__xstate__.onRegister(function (service) {
-            var _a;
-            (_a = resolvedIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                type: 'service.register',
-                machine: JSON.stringify(service.machine),
-                state: JSON.stringify(service.state || service.initialState),
+    window.__xstate__.onRegister(function (service) {
+        postMessage({
+            type: 'service.register',
+            machine: JSON.stringify(service.machine),
+            state: JSON.stringify(service.state || service.initialState),
+            id: service.id
+        });
+        service.subscribe(function (state) {
+            postMessage({
+                type: 'service.state',
+                state: JSON.stringify(state),
                 id: service.id
-            }, '*');
-            service.subscribe(function (state) {
-                var _a;
-                (_a = resolvedIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                    type: 'service.state',
-                    state: JSON.stringify(state),
-                    id: service.id
-                }, '*');
             });
         });
     });
+    resolvedIframe.addEventListener('load', function () {
+        targetWindow = resolvedIframe.contentWindow;
+        var handler = function (event) {
+            if (typeof event.data === 'object' &&
+                event.data !== null &&
+                'type' in event.data &&
+                event.data.type === 'xstate.inspecting') {
+                while (deferredEvents.length > 0) {
+                    targetWindow.postMessage(deferredEvents.shift(), url);
+                }
+            }
+        };
+        window.addEventListener('message', handler);
+    });
     resolvedIframe.setAttribute('src', url);
 }

lib/index.js

@@ -27,4 +27,3 @@ "use strict";
 var defaultInspectorOptions = {
-    // url: 'https://statecharts.io/embed'
-    url: 'http://localhost:3001',
+    url: 'https://embed.statecharts.io',
     iframe: function () { return document.querySelector('iframe[data-xstate]'); }
@@ -35,2 +34,12 @@ };
     var resolvedIframe = typeof iframe === 'function' ? iframe() : iframe;
+    var deferredEvents = [];
+    var targetWindow;
+    var postMessage = function (event) {
+        if (!targetWindow) {
+            deferredEvents.push(event);
+        }
+        else {
+            targetWindow.postMessage(event, '*');
+        }
+    };
     if (!resolvedIframe) {
@@ -40,23 +49,33 @@ 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.');
     }
-    resolvedIframe.addEventListener('load', function () {
-        window.__xstate__.onRegister(function (service) {
-            var _a;
-            (_a = resolvedIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                type: 'service.register',
-                machine: JSON.stringify(service.machine),
-                state: JSON.stringify(service.state || service.initialState),
+    window.__xstate__.onRegister(function (service) {
+        postMessage({
+            type: 'service.register',
+            machine: JSON.stringify(service.machine),
+            state: JSON.stringify(service.state || service.initialState),
+            id: service.id
+        });
+        service.subscribe(function (state) {
+            postMessage({
+                type: 'service.state',
+                state: JSON.stringify(state),
                 id: service.id
-            }, '*');
-            service.subscribe(function (state) {
-                var _a;
-                (_a = resolvedIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
-                    type: 'service.state',
-                    state: JSON.stringify(state),
-                    id: service.id
-                }, '*');
             });
         });
     });
+    resolvedIframe.addEventListener('load', function () {
+        targetWindow = resolvedIframe.contentWindow;
+        var handler = function (event) {
+            if (typeof event.data === 'object' &&
+                event.data !== null &&
+                'type' in event.data &&
+                event.data.type === 'xstate.inspecting') {
+                while (deferredEvents.length > 0) {
+                    targetWindow.postMessage(deferredEvents.shift(), url);
+                }
+            }
+        };
+        window.addEventListener('message', handler);
+    });
     resolvedIframe.setAttribute('src', url);
 }
 exports.inspect = inspect;

package.json

 {
   "name": "@xstate/inspect",
-  "version": "0.0.01",
-  "private": false,
+  "version": "0.0.2",
   "description": "XState inspection utilities",
@@ -6,0 +5,0 @@ "keywords": [

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7807

increased by12.88%

Lines of code

189

increased by25.17%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes