New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@xstate/inspect
Advanced tools
@xstate/inspect - npm Package Compare versions
Comparing version 0.0.5 to 0.0.6
@@ -19,4 +19,15 @@ import { Interpreter } from 'xstate'; | ||
| } | ||
| export declare function inspect(options?: Partial<InspectorOptions>): void; | ||
| export declare function createDevTools(): void; | ||
| export declare const inspectMachine: import("xstate").StateMachine<{ | ||
| client?: any; | ||
| }, any, import("xstate").AnyEventObject, { | ||
| value: any; | ||
| context: { | ||
| client?: any; | ||
| }; | ||
| }>; | ||
| export declare function inspect(options?: Partial<InspectorOptions>): { | ||
| disconnect: () => void; | ||
| }; | ||
| export {}; | ||
| //# sourceMappingURL=index.d.ts.map |
153
es/index.js
@@ -12,20 +12,83 @@ var __assign = (this && this.__assign) || function () { | ||
| }; | ||
| var services = new Set(); | ||
| var serviceListeners = new Set(); | ||
| window.__xstate__ = { | ||
| services: services, | ||
| register: function (service) { | ||
| services.add(service); | ||
| serviceListeners.forEach(function (listener) { return listener(service); }); | ||
| import { createMachine, assign, interpret } from 'xstate'; | ||
| var serviceMap = new Map(); | ||
| export function createDevTools() { | ||
| var services = new Set(); | ||
| var serviceListeners = new Set(); | ||
| window.__xstate__ = { | ||
| services: services, | ||
| register: function (service) { | ||
| services.add(service); | ||
| serviceMap.set(service.sessionId, service); | ||
| serviceListeners.forEach(function (listener) { return listener(service); }); | ||
| service.onStop(function () { | ||
| services.delete(service); | ||
| serviceMap.delete(service.sessionId); | ||
| }); | ||
| }, | ||
| onRegister: function (listener) { | ||
| serviceListeners.add(listener); | ||
| services.forEach(function (service) { return listener(service); }); | ||
| return { | ||
| unsubscribe: function () { | ||
| serviceListeners.delete(listener); | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| } | ||
| export var inspectMachine = createMachine({ | ||
| initial: 'pendingConnection', | ||
| context: { | ||
| client: undefined | ||
| }, | ||
| onRegister: function (listener) { | ||
| serviceListeners.add(listener); | ||
| services.forEach(function (service) { return listener(service); }); | ||
| return { | ||
| unsubscribe: function () { | ||
| serviceListeners.delete(listener); | ||
| states: { | ||
| pendingConnection: {}, | ||
| connected: { | ||
| on: { | ||
| 'service.state': { | ||
| actions: function (ctx, e) { return ctx.client.send(e); } | ||
| }, | ||
| 'service.register': { | ||
| actions: function (ctx, e) { return ctx.client.send(e); } | ||
| }, | ||
| 'service.stop': { | ||
| actions: function (ctx, e) { return ctx.client.send(e); } | ||
| }, | ||
| 'xstate.event': { | ||
| actions: function (_, e) { | ||
| var event = e.event; | ||
| var scxmlEventObject = JSON.parse(event); | ||
| var service = serviceMap.get(scxmlEventObject.origin); | ||
| service === null || service === void 0 ? void 0 : service.send(JSON.parse(event)); | ||
| } | ||
| }, | ||
| unload: { | ||
| actions: function (ctx) { | ||
| ctx.client.send({ type: 'xstate.disconnect' }); | ||
| } | ||
| }, | ||
| disconnect: 'pendingConnection' | ||
| } | ||
| }; | ||
| } | ||
| }, | ||
| on: { | ||
| 'xstate.inspecting': { | ||
| target: '.connected', | ||
| actions: [ | ||
| assign({ client: function (_, e) { return e.client; } }), | ||
| function (ctx) { | ||
| globalThis.__xstate__.services.forEach(function (service) { | ||
| ctx.client.send({ | ||
| type: 'service.register', | ||
| machine: JSON.stringify(service.machine), | ||
| state: JSON.stringify(service.state || service.initialState), | ||
| id: service.id | ||
| }); | ||
| }); | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| }; | ||
| }); | ||
| var defaultInspectorOptions = { | ||
@@ -36,32 +99,32 @@ url: 'https://embed.statecharts.io', | ||
| export function inspect(options) { | ||
| createDevTools(); | ||
| var _a = __assign(__assign({}, defaultInspectorOptions), options), iframe = _a.iframe, url = _a.url; | ||
| var resolvedIframe = typeof iframe === 'function' ? iframe() : iframe; | ||
| var deferredEvents = []; | ||
| var targetWindow; | ||
| var isDeferred = true; | ||
| var postMessage = function (event) { | ||
| if (isDeferred) { | ||
| deferredEvents.push(event); | ||
| } | ||
| else { | ||
| targetWindow.postMessage(event, '*'); | ||
| } | ||
| }; | ||
| var inspectService = interpret(inspectMachine).start(); | ||
| if (resolvedIframe === null) { | ||
| 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.'); | ||
| return; | ||
| return { disconnect: function () { return void 0; } }; | ||
| } | ||
| window.addEventListener('message', function (event) { | ||
| var client; | ||
| var messageHandler = function (event) { | ||
| if (typeof event.data === 'object' && | ||
| event.data !== null && | ||
| 'type' in event.data && | ||
| event.data.type === 'xstate.inspecting') { | ||
| isDeferred = false; | ||
| // TODO: use a state machine... | ||
| setTimeout(function () { | ||
| while (deferredEvents.length > 0) { | ||
| targetWindow.postMessage(deferredEvents.shift(), url); | ||
| } | ||
| }, 1000); | ||
| 'type' in event.data) { | ||
| if (resolvedIframe && !targetWindow) { | ||
| targetWindow = resolvedIframe.contentWindow; | ||
| } | ||
| if (!client) { | ||
| client = { | ||
| send: function (e) { | ||
| targetWindow.postMessage(e, url); | ||
| } | ||
| }; | ||
| } | ||
| inspectService.send(__assign(__assign({}, event.data), { client: client })); | ||
| } | ||
| }; | ||
| window.addEventListener('message', messageHandler); | ||
| window.addEventListener('unload', function () { | ||
| inspectService.send({ type: 'unload' }); | ||
| }); | ||
@@ -71,4 +134,4 @@ if (resolvedIframe === false) { | ||
| } | ||
| window.__xstate__.onRegister(function (service) { | ||
| postMessage({ | ||
| globalThis.__xstate__.onRegister(function (service) { | ||
| inspectService.send({ | ||
| type: 'service.register', | ||
@@ -80,3 +143,3 @@ machine: JSON.stringify(service.machine), | ||
| service.subscribe(function (state) { | ||
| postMessage({ | ||
| inspectService.send({ | ||
| type: 'service.state', | ||
@@ -87,2 +150,8 @@ state: JSON.stringify(state), | ||
| }); | ||
| service.onStop(function () { | ||
| inspectService.send({ | ||
| type: 'service.stop', | ||
| id: service.id | ||
| }); | ||
| }); | ||
| }); | ||
@@ -95,2 +164,8 @@ if (resolvedIframe) { | ||
| } | ||
| return { | ||
| disconnect: function () { | ||
| inspectService.send('disconnect'); | ||
| window.removeEventListener('message', messageHandler); | ||
| } | ||
| }; | ||
| } |
@@ -19,4 +19,15 @@ import { Interpreter } from 'xstate'; | ||
| } | ||
| export declare function inspect(options?: Partial<InspectorOptions>): void; | ||
| export declare function createDevTools(): void; | ||
| export declare const inspectMachine: import("xstate").StateMachine<{ | ||
| client?: any; | ||
| }, any, import("xstate").AnyEventObject, { | ||
| value: any; | ||
| context: { | ||
| client?: any; | ||
| }; | ||
| }>; | ||
| export declare function inspect(options?: Partial<InspectorOptions>): { | ||
| disconnect: () => void; | ||
| }; | ||
| export {}; | ||
| //# sourceMappingURL=index.d.ts.map |
155
lib/index.js
@@ -14,20 +14,85 @@ "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var services = new Set(); | ||
| var serviceListeners = new Set(); | ||
| window.__xstate__ = { | ||
| services: services, | ||
| register: function (service) { | ||
| services.add(service); | ||
| serviceListeners.forEach(function (listener) { return listener(service); }); | ||
| exports.inspect = exports.inspectMachine = exports.createDevTools = void 0; | ||
| var xstate_1 = require("xstate"); | ||
| var serviceMap = new Map(); | ||
| function createDevTools() { | ||
| var services = new Set(); | ||
| var serviceListeners = new Set(); | ||
| window.__xstate__ = { | ||
| services: services, | ||
| register: function (service) { | ||
| services.add(service); | ||
| serviceMap.set(service.sessionId, service); | ||
| serviceListeners.forEach(function (listener) { return listener(service); }); | ||
| service.onStop(function () { | ||
| services.delete(service); | ||
| serviceMap.delete(service.sessionId); | ||
| }); | ||
| }, | ||
| onRegister: function (listener) { | ||
| serviceListeners.add(listener); | ||
| services.forEach(function (service) { return listener(service); }); | ||
| return { | ||
| unsubscribe: function () { | ||
| serviceListeners.delete(listener); | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| } | ||
| exports.createDevTools = createDevTools; | ||
| exports.inspectMachine = xstate_1.createMachine({ | ||
| initial: 'pendingConnection', | ||
| context: { | ||
| client: undefined | ||
| }, | ||
| onRegister: function (listener) { | ||
| serviceListeners.add(listener); | ||
| services.forEach(function (service) { return listener(service); }); | ||
| return { | ||
| unsubscribe: function () { | ||
| serviceListeners.delete(listener); | ||
| states: { | ||
| pendingConnection: {}, | ||
| connected: { | ||
| on: { | ||
| 'service.state': { | ||
| actions: function (ctx, e) { return ctx.client.send(e); } | ||
| }, | ||
| 'service.register': { | ||
| actions: function (ctx, e) { return ctx.client.send(e); } | ||
| }, | ||
| 'service.stop': { | ||
| actions: function (ctx, e) { return ctx.client.send(e); } | ||
| }, | ||
| 'xstate.event': { | ||
| actions: function (_, e) { | ||
| var event = e.event; | ||
| var scxmlEventObject = JSON.parse(event); | ||
| var service = serviceMap.get(scxmlEventObject.origin); | ||
| service === null || service === void 0 ? void 0 : service.send(JSON.parse(event)); | ||
| } | ||
| }, | ||
| unload: { | ||
| actions: function (ctx) { | ||
| ctx.client.send({ type: 'xstate.disconnect' }); | ||
| } | ||
| }, | ||
| disconnect: 'pendingConnection' | ||
| } | ||
| }; | ||
| } | ||
| }, | ||
| on: { | ||
| 'xstate.inspecting': { | ||
| target: '.connected', | ||
| actions: [ | ||
| xstate_1.assign({ client: function (_, e) { return e.client; } }), | ||
| function (ctx) { | ||
| globalThis.__xstate__.services.forEach(function (service) { | ||
| ctx.client.send({ | ||
| type: 'service.register', | ||
| machine: JSON.stringify(service.machine), | ||
| state: JSON.stringify(service.state || service.initialState), | ||
| id: service.id | ||
| }); | ||
| }); | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| }; | ||
| }); | ||
| var defaultInspectorOptions = { | ||
@@ -38,32 +103,32 @@ url: 'https://embed.statecharts.io', | ||
| function inspect(options) { | ||
| createDevTools(); | ||
| var _a = __assign(__assign({}, defaultInspectorOptions), options), iframe = _a.iframe, url = _a.url; | ||
| var resolvedIframe = typeof iframe === 'function' ? iframe() : iframe; | ||
| var deferredEvents = []; | ||
| var targetWindow; | ||
| var isDeferred = true; | ||
| var postMessage = function (event) { | ||
| if (isDeferred) { | ||
| deferredEvents.push(event); | ||
| } | ||
| else { | ||
| targetWindow.postMessage(event, '*'); | ||
| } | ||
| }; | ||
| var inspectService = xstate_1.interpret(exports.inspectMachine).start(); | ||
| if (resolvedIframe === null) { | ||
| 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.'); | ||
| return; | ||
| return { disconnect: function () { return void 0; } }; | ||
| } | ||
| window.addEventListener('message', function (event) { | ||
| var client; | ||
| var messageHandler = function (event) { | ||
| if (typeof event.data === 'object' && | ||
| event.data !== null && | ||
| 'type' in event.data && | ||
| event.data.type === 'xstate.inspecting') { | ||
| isDeferred = false; | ||
| // TODO: use a state machine... | ||
| setTimeout(function () { | ||
| while (deferredEvents.length > 0) { | ||
| targetWindow.postMessage(deferredEvents.shift(), url); | ||
| } | ||
| }, 1000); | ||
| 'type' in event.data) { | ||
| if (resolvedIframe && !targetWindow) { | ||
| targetWindow = resolvedIframe.contentWindow; | ||
| } | ||
| if (!client) { | ||
| client = { | ||
| send: function (e) { | ||
| targetWindow.postMessage(e, url); | ||
| } | ||
| }; | ||
| } | ||
| inspectService.send(__assign(__assign({}, event.data), { client: client })); | ||
| } | ||
| }; | ||
| window.addEventListener('message', messageHandler); | ||
| window.addEventListener('unload', function () { | ||
| inspectService.send({ type: 'unload' }); | ||
| }); | ||
@@ -73,4 +138,4 @@ if (resolvedIframe === false) { | ||
| } | ||
| window.__xstate__.onRegister(function (service) { | ||
| postMessage({ | ||
| globalThis.__xstate__.onRegister(function (service) { | ||
| inspectService.send({ | ||
| type: 'service.register', | ||
@@ -82,3 +147,3 @@ machine: JSON.stringify(service.machine), | ||
| service.subscribe(function (state) { | ||
| postMessage({ | ||
| inspectService.send({ | ||
| type: 'service.state', | ||
@@ -89,2 +154,8 @@ state: JSON.stringify(state), | ||
| }); | ||
| service.onStop(function () { | ||
| inspectService.send({ | ||
| type: 'service.stop', | ||
| id: service.id | ||
| }); | ||
| }); | ||
| }); | ||
@@ -97,3 +168,9 @@ if (resolvedIframe) { | ||
| } | ||
| return { | ||
| disconnect: function () { | ||
| inspectService.send('disconnect'); | ||
| window.removeEventListener('message', messageHandler); | ||
| } | ||
| }; | ||
| } | ||
| exports.inspect = inspect; |
| { | ||
| "name": "@xstate/inspect", | ||
| "version": "0.0.5", | ||
| "version": "0.0.6", | ||
| "description": "XState inspection utilities", | ||
@@ -35,3 +35,4 @@ "keywords": [ | ||
| "build": "tsc && tsc --outDir es --module es2015", | ||
| "prepublish": "npm run build && npm run test" | ||
| "watch": "tsc -w --module es2015", | ||
| "prepublish": "npm run build" | ||
| }, | ||
@@ -42,4 +43,11 @@ "bugs": { | ||
| "devDependencies": { | ||
| "xstate": "*" | ||
| } | ||
| "@types/ws": "^7.2.6", | ||
| "ws": "^7.3.1", | ||
| "xstate": "*", | ||
| "typescript": "^4.0.2" | ||
| }, | ||
| "peerDependencies": { | ||
| "ws": "^7.3.1" | ||
| }, | ||
| "dependencies": {} | ||
| } |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by160.97%
23166
- Number of package files
- increased by80%
9
- Lines of code
- increased by184.75%
635
Worsened metrics
- Dependency count
- increased byInfinity%
1
- Dev dependency count
- increased by300%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes