@statelyai/inspect - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/index.d.ts

@@ -41,3 +41,5 @@ import { InspectionEvent, Snapshot, AnyActorRef, AnyEventObject, Observer, Subscribable } from 'xstate';
      */
-    snapshot: (actor: AnyActorRef | string, snapshot: InspectedSnapshot, info?: {
+    snapshot: ({ actor, snapshot, event, }: {
+        actor: AnyActorRef | string;
+        snapshot: InspectedSnapshot;
         event?: AnyEventObject;
@@ -48,4 +50,6 @@ }) => void;
      */
-    event: (targetActor: AnyActorRef | string, event: AnyEventObject | string, info?: {
-        source?: string;
+    event: ({ target, event, source, }: {
+        target: AnyActorRef | string;
+        event: AnyEventObject | string;
+        source?: AnyActorRef | string;
     }) => void;
@@ -55,3 +59,5 @@ /**
      */
-    actor: (actor: AnyActorRef | string, snapshot?: InspectedSnapshot, info?: {
+    actor: ({ actor, snapshot, definition, parentId, rootId, }: {
+        actor: AnyActorRef | string;
+        snapshot?: InspectedSnapshot;
         definition?: string;
@@ -124,2 +130,3 @@ parentId?: string;
     window?: Window;
+    iframe?: HTMLIFrameElement | null;
 }
@@ -126,0 +133,0 @@ /**

dist/index.js

@@ -59,3 +59,3 @@ "use strict";
   name: "@statelyai/inspect",
-  version: "0.0.7",
+  version: "0.0.8",
   description: "Inspection utilities for state, actors, workflows, and state machines.",
@@ -103,3 +103,4 @@ main: "dist/index.js",
     adapter,
-    actor: (actorRef, snapshot, info) => {
+    actor: (info) => {
+      const actorRef = info.actor;
       const sessionId = typeof actorRef === "string" ? actorRef : actorRef.sessionId;
@@ -121,12 +122,13 @@ const definitionObject = actorRef?.logic?.config;
         definition,
-        snapshot: snapshot ?? { status: "active" }
+        snapshot: info.snapshot ?? { status: "active" }
       });
     },
-    event(target, event, extra) {
-      const sessionId = typeof target === "string" ? target : target.sessionId;
+    event(info) {
+      const sessionId = typeof info.target === "string" ? info.target : info.target.sessionId;
+      const sourceId = !info.source ? void 0 : typeof info.source === "string" ? info.source : info.source.sessionId;
       adapter.send({
         type: "@xstate.event",
-        sourceId: extra?.source,
+        sourceId,
         sessionId,
-        event: toEventObject(event),
+        event: toEventObject(info.event),
         id: Math.random().toString(),
@@ -138,8 +140,8 @@ createdAt: Date.now().toString(),
     },
-    snapshot(actor, snapshot, extra) {
-      const sessionId = typeof actor === "string" ? actor : actor.sessionId;
+    snapshot(info) {
+      const sessionId = typeof info.actor === "string" ? info.actor : info.actor.sessionId;
       adapter.send({
         type: "@xstate.snapshot",
-        snapshot,
-        event: extra?.event ?? null,
+        snapshot: info.snapshot,
+        event: info.event ?? null,
         sessionId,
@@ -309,2 +311,3 @@ id: null,
       serialize: (event) => JSON.parse((0, import_fast_safe_stringify2.default)(event)),
+      iframe: null,
       ...options,
@@ -316,6 +319,9 @@ window: options.window ?? window
   start() {
-    this.targetWindow = this.options.window.open(
-      String(this.options.url),
-      "xstateinspector"
-    );
+    this.targetWindow = this.options.iframe ? null : this.options.window.open(String(this.options.url), "xstateinspector");
+    if (this.options.iframe) {
+      this.options.iframe.addEventListener("load", () => {
+        this.targetWindow = this.options.iframe?.contentWindow ?? null;
+        this.options.iframe?.setAttribute("src", String(this.options.url));
+      });
+    }
     this.options.window.addEventListener("message", (event) => {
@@ -322,0 +328,0 @@ if (isEventObject(event.data) && event.data.type === "@statelyai.connected") {

package.json

@@ -11,3 +11,3 @@ {
   "name": "@statelyai/inspect",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Inspection utilities for state, actors, workflows, and state machines.",
@@ -28,2 +28,2 @@ "main": "dist/index.js",
   }
-}
+}

README.md

@@ -39,25 +39,29 @@ # Stately.ai Inspect
 
-inspector.actor('someActor', {
-  status: 'active',
-  context: {
-    /* any context data */
+inspector.actor({
+  actor: 'someActor',
+  snapshot: {
+    status: 'active',
+    context: {
+      /* any context data */
+    },
   },
 });
 
-inspector.actor('anotherActor');
+inspector.actor({ actor: 'anotherActor' });
 
-inspector.event(
-  'someActor',
-  { type: 'hello' },
-  {
-    target: 'anotherActor',
-  }
-);
+inspector.event({
+  target: 'someActor',
+  event: { type: 'hello' },
+  source: 'anotherActor',
+});
 
-inspector.snapshot('anotherActor', {
-  status: 'active',
-  context: {
-    /* any context data */
+inspector.snapshot({
+  actor: 'anotherActor',
+  snapshot: {
+    status: 'active',
+    context: {
+      /* any context data */
+    },
   },
 });
 ```

src/browser.ts

@@ -32,2 +32,3 @@ import { AnyEventObject, Observer, Subscribable, toObserver } from 'xstate';
   window?: Window;
+  iframe?: HTMLIFrameElement | null;
 }
@@ -34,0 +35,0 @@

src/BrowserAdapter.ts

@@ -16,2 +16,3 @@ import { Adapter, StatelyInspectionEvent } from './types';
       serialize: (event) => JSON.parse(safeStringify(event)),
+      iframe: null,
       ...options,
@@ -23,7 +24,13 @@ window: options.window ?? window,
   public start() {
-    this.targetWindow = this.options.window.open(
-      String(this.options.url),
-      'xstateinspector'
-    );
+    this.targetWindow = this.options.iframe
+      ? null
+      : this.options.window.open(String(this.options.url), 'xstateinspector');
 
+    if (this.options.iframe) {
+      this.options.iframe.addEventListener('load', () => {
+        this.targetWindow = this.options.iframe?.contentWindow ?? null;
+        this.options.iframe?.setAttribute('src', String(this.options.url));
+      });
+    }
+
     this.options.window.addEventListener('message', (event) => {
@@ -30,0 +37,0 @@ if (

src/createInspector.test.ts

@@ -116,12 +116,22 @@ import { expect, test } from 'vitest';
 
-  inspector.actor('test');
-  inspector.actor('another', { status: 'active', context: 10 });
-  inspector.event('test', 'stringEvent');
-  inspector.event('another', { type: 'objectEvent' }, { source: 'test' });
-  inspector.snapshot('test', { status: 'active', context: 20 });
-  inspector.snapshot(
-    'another',
-    { status: 'done', context: { foo: 'bar' } },
-    { event: { type: 'objectEvent' } }
-  );
+  inspector.actor({ actor: 'test' });
+  inspector.actor({
+    actor: 'another',
+    snapshot: { status: 'active', context: 10 },
+  });
+  inspector.event({ target: 'test', event: 'stringEvent' });
+  inspector.event({
+    target: 'another',
+    event: { type: 'objectEvent' },
+    source: 'test',
+  });
+  inspector.snapshot({
+    actor: 'test',
+    snapshot: { status: 'active', context: 20 },
+  });
+  inspector.snapshot({
+    actor: 'another',
+    snapshot: { status: 'done', context: { foo: 'bar' } },
+    event: { type: 'objectEvent' },
+  });
 
@@ -185,5 +195,5 @@ expect(events.map(simplifyEvent)).toMatchInlineSnapshot(`
 
-  inspector.actor('test');
+  inspector.actor({ actor: 'test' });
 
   expect(events[0]._version).toEqual(pkg.version);
 });

src/createInspector.ts

@@ -48,3 +48,4 @@ import {
     adapter,
-    actor: (actorRef, snapshot, info) => {
+    actor: (info) => {
+      const actorRef = info.actor;
       const sessionId =
@@ -76,12 +77,18 @@ typeof actorRef === 'string' ? actorRef : actorRef.sessionId;
         definition,
-        snapshot: snapshot ?? { status: 'active' },
+        snapshot: info.snapshot ?? { status: 'active' },
       } satisfies StatelyActorEvent);
     },
-    event(target, event, extra) {
-      const sessionId = typeof target === 'string' ? target : target.sessionId;
+    event(info) {
+      const sessionId =
+        typeof info.target === 'string' ? info.target : info.target.sessionId;
+      const sourceId = !info.source
+        ? undefined
+        : typeof info.source === 'string'
+        ? info.source
+        : info.source.sessionId;
       adapter.send({
         type: '@xstate.event',
-        sourceId: extra?.source,
+        sourceId,
         sessionId,
-        event: toEventObject(event),
+        event: toEventObject(info.event),
         id: Math.random().toString(),
@@ -93,8 +100,9 @@ createdAt: Date.now().toString(),
     },
-    snapshot(actor, snapshot, extra) {
-      const sessionId = typeof actor === 'string' ? actor : actor.sessionId;
+    snapshot(info) {
+      const sessionId =
+        typeof info.actor === 'string' ? info.actor : info.actor.sessionId;
       adapter.send({
         type: '@xstate.snapshot',
-        snapshot: snapshot as unknown as Snapshot<unknown>,
-        event: extra?.event ?? (null as any),
+        snapshot: info.snapshot as unknown as Snapshot<unknown>,
+        event: info.event ?? (null as any),
         sessionId,
@@ -101,0 +109,0 @@ id: null as any,

src/types.ts

@@ -63,29 +63,39 @@ import {
    */
-  snapshot: (
-    actor: AnyActorRef | string,
-    snapshot: InspectedSnapshot,
-    info?: { event?: AnyEventObject }
-  ) => void;
+  snapshot: ({
+    actor,
+    snapshot,
+    event,
+  }: {
+    actor: AnyActorRef | string;
+    snapshot: InspectedSnapshot;
+    event?: AnyEventObject;
+  }) => void;
   /**
    * Sends an event inspection event. This represents the event that was sent to the actor.
    */
-  event: (
-    targetActor: AnyActorRef | string,
-    event: AnyEventObject | string,
-    info?: {
-      source?: string;
-    }
-  ) => void;
+  event: ({
+    target,
+    event,
+    source,
+  }: {
+    target: AnyActorRef | string;
+    event: AnyEventObject | string;
+    source?: AnyActorRef | string;
+  }) => void;
   /**
    * Sends an actor registration inspection event. This represents the actor that was created.
    */
-  actor: (
-    actor: AnyActorRef | string,
-    snapshot?: InspectedSnapshot,
-    info?: {
-      definition?: string;
-      parentId?: string;
-      rootId?: string;
-    }
-  ) => void;
+  actor: ({
+    actor,
+    snapshot,
+    definition,
+    parentId,
+    rootId,
+  }: {
+    actor: AnyActorRef | string;
+    snapshot?: InspectedSnapshot;
+    definition?: string;
+    parentId?: string;
+    rootId?: string;
+  }) => void;
   /**
@@ -92,0 +102,0 @@ * Starts the inspector.

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

57266

increased by2.65%

Lines of code

1464

increased by3.39%

Number of lines in readme file

67

increased by6.35%

No dependency changes