Merge pull request #178 from statelyai/davidkpiano/createactor

interpret -> createActor

Author: davidkpiano

versioned_docs/version-5/actions.mdx

@@ -53,7 +53,7 @@ Examples of actions:
 
 In our video player machine, we have entry and exit actions on the Playing state. We use the entry action of playVideo to fire an effect playing the video on entry to the Playing state. We use the exit action of pauseVideo to fire an effect pausing the video when the Playing state is exited.
 
-<EmbedMachine 
+<EmbedMachine
   name="video player machine"
   embedURL="https://stately.ai/registry/editor/embed/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=222e2d7a-0ed6-4f2c-843a-e6646d717000"
 />
@@ -142,9 +142,9 @@ To add a built-in action, first add a [transition action](#add-a-transition-acti
 
 1. Open the state, or event <Info size={18} /> **Details** panel from the right tool menu.
 1. Hover, focus, or select the action block to reveal the <Edit size={18} /> edit icon button.
-2. Use the <Edit size={18} /> edit icon button to open the **Action** panel.
-3. Choose your desired action from the dropdown menu at the top of the **Action** panel.
-4. Fill out the required corresponding action input fields.
+1. Use the <Edit size={18} /> edit icon button to open the **Action** panel.
+1. Choose your desired action from the dropdown menu at the top of the **Action** panel.
+1. Fill out the required corresponding action input fields.
 
 ## Add a custom action
 
@@ -165,9 +165,9 @@ First, add a [transition action](#add-a-transition-action), [entry action](#add-
 
 1. Open the state, or event <Info size={18} /> **Details** panel from the right tool menu.
 1. Hover, focus, or select the action block to reveal the <Edit size={18} /> edit icon button.
-2. Use the <Edit size={18} /> edit icon button to open the **Action** panel.
-3. Custom action is selected by default. Add your custom action type in the **Action type** text input.
-4. Add your custom **Action parameters** using the **Parameter key** and **Parameter value** text input pairs.
+1. Use the <Edit size={18} /> edit icon button to open the **Action** panel.
+1. Custom action is selected by default. Add your custom action type in the **Action type** text input.
+1. Add your custom **Action parameters** using the **Parameter key** and **Parameter value** text input pairs.
 
 ## Entry and exit actions
 
@@ -183,7 +183,6 @@ Entry and exit actions are defined using the `entry: ...` and `exit: ...` attrib
 
 Coming soon… example
 
-
 ## Inline actions
 
 You can declare actions as inline functions:
@@ -263,7 +262,7 @@ const feedbackMachine = createMachine(
 These implementations can later be overridden by providing implementations in the `machine.provide(implementations)` method, which creates a new machine with the same config but with the provided implementations:
 
 ```ts
-const feedbackActor = interpret(
+const feedbackActor = createActor(
   // highlight-start
   feedbackMachine.provide({
     actions: {
@@ -297,7 +296,7 @@ const countMachine = createMachine({
   },
 });
 
-const countActor = interpret(countMachine);
+const countActor = createActor(countMachine);
 countActor.subscribe((state) => {
   console.log(state.context.count);
 });
@@ -340,7 +339,7 @@ The raise action is a special action that _raises_ an event that is received by
 actions: raise({ type: 'someEvent', data: 'someData' });
 ```
 
-Internally, when an event is raised, it is placed into an “internal event queue”. After the current transition is finished, these events are processed in insertion order ([first-in first-out, or FIFO](https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics))). External events are only processed once all events in the internal event queue are processed.
+Internally, when an event is raised, it is placed into an “internal event queue”. After the current transition is finished, these events are processed in insertion order ([first-in first-out, or FIFO](<https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)>)). External events are only processed once all events in the internal event queue are processed.
 
 Raised events can be dynamic:
 

versioned_docs/version-5/actors.mdx

@@ -48,18 +48,18 @@ In XState, actor logic is defined by an object containing methods like `.transit
 
 ## Creating actors
 
-You can create an actor, which is a “live” instance of some actor logic, via `interpret(actorLogic, options?)`. The `interpret(...)` function takes the following arguments:
+You can create an actor, which is a “live” instance of some actor logic, via `createActor(actorLogic, options?)`. The `createActor(...)` function takes the following arguments:
 
-- `actorLogic`: the [actor logic](actors.mdx#creating-actor-logic) to interpret
-- `options` (optional): interpreter options
+- `actorLogic`: the [actor logic](actors.mdx#creating-actor-logic) to create an actor from
+- `options` (optional): actor options
 
-When you `interpret(...)` actor logic, you implicitly create an [actor system](system.mdx) where the created actor is the root actor. Any actors spawned from this root actor and its descendants are part of that actor system. The actor must be started by calling `actor.start()`, which will also start the actor system:
+When you create an actor from actor logic via `createActor(actorLogic)`, you implicitly create an [actor system](system.mdx) where the created actor is the root actor. Any actors spawned from this root actor and its descendants are part of that actor system. The actor must be started by calling `actor.start()`, which will also start the actor system:
 
 ```ts
-import { interpret } from 'xstate';
+import { createActor } from 'xstate';
 import { someActorLogic } from './someActorLogic.ts';
 
-const actor = interpret(someActorLogic);
+const actor = createActor(someActorLogic);
 actor.start();
 
 // Now the actor can receive events
@@ -91,15 +91,15 @@ When an actor receives an event, its internal state may change. An actor may emi
 An actor’s snapshot is not necessarily the same as its internal state; instead, it is a value the actor wants to _share_ with subscribers. For example, a promise actor has an internal state consisting of `data`, `status`, and other internal properties, but only the `data` is emitted as its snapshot.
 
 ```ts
-import { fromPromise, interpret } from 'xstate';
+import { fromPromise, createActor } from 'xstate';
 
 const countLogic = fromPromise(async () => {
   const count = await fetchCount();
 
   return count;
 });
 
-const countActor = interpret(countLogic);
+const countActor = createActor(countLogic);
 countActor.start();
 
 countActor.getSnapshot(); // logs undefined
@@ -148,14 +148,14 @@ subscription.unsubscribe();
 
 When the actor is stopped, all observers will automatically be unsubscribed.
 
-You can initialize actor logic at a specific persisted internal state by passing the state in the second `options` argument of `interpret(logic, options)`. If the state is compatible with the actor logic, this will create an actor that will be started at that persisted state:
+You can initialize actor logic at a specific persisted internal state by passing the state in the second `options` argument of `createActor(logic, options)`. If the state is compatible with the actor logic, this will create an actor that will be started at that persisted state:
 
-You can initialize actor logic at a specific persisted internal state by passing the state in the second `options` argument of `interpret(logic, options)`. If the state is compatible with the actor logic, this will create an actor that will be started at that persisted state:
+You can initialize actor logic at a specific persisted internal state by passing the state in the second `options` argument of `createActor(logic, options)`. If the state is compatible with the actor logic, this will create an actor that will be started at that persisted state:
 
 ```ts
 const persistedState = JSON.parse(localStorage.get('some-persisted-state'));
 
-const actor = interpret(someLogic, {
+const actor = createActor(someLogic, {
   // highlight-start
   state: persistedState,
   // highlight-end
@@ -206,7 +206,7 @@ const toggleMachine = createMachine({
   },
 });
 
-const toggleActor = interpret(toggleMachine);
+const toggleActor = createActor(toggleMachine);
 toggleActor.subscribe((snapshot) => {
   // snapshot is the machine's state
   console.log('state', snapshot.value);
@@ -232,7 +232,7 @@ const promiseLogic = fromPromise(() => {
   return fetch('...').then((data) => data.json());
 });
 
-const promiseActor = interpret(promiseLogic);
+const promiseActor = createActor(promiseLogic);
 promiseActor.subscribe((snapshot) => {
   console.log(snapshot);
 });
@@ -264,7 +264,7 @@ const transitionLogic = fromTransition(
   { count: 0 },
 );
 
-const transitionActor = interpret(transitionLogic);
+const transitionActor = createActor(transitionLogic);
 transitionActor.subscribe((snapshot) => {
   console.log(snapshot);
 });
@@ -286,7 +286,7 @@ Sending events to observable actors will have no effect.
 ```ts
 const secondLogic = fromObservable(() => interval(1000));
 
-const secondActor = interpret(secondLogic);
+const secondActor = createActor(secondLogic);
 secondActor.start();
 // At every second:
 // Logs 0
@@ -316,7 +316,7 @@ const canvasMachine = createMachine({
   },
 });
 
-const canvasActor = interpret(canvasMachine);
+const canvasActor = createActor(canvasMachine);
 canvasActor.start();
 ```
 

versioned_docs/version-5/context.mdx

@@ -20,7 +20,7 @@ const feedbackMachine = createMachine({
   },
 });
 
-const feedbackActor = interpret(feedbackMachine);
+const feedbackActor = createActor(feedbackMachine);
 
 feedbackActor.subscribe((state) => {
   console.log(state.context.feedback);
@@ -79,7 +79,7 @@ const feedbackMachine = createMachine({
   }),
 });
 
-const feedbackActor = interpret(feedbackMachine).start();
+const feedbackActor = createActor(feedbackMachine).start();
 
 console.log(feedbackActor.getSnapshot().context.createdAt);
 // logs the current timestamp
@@ -89,7 +89,7 @@ Lazy initial context is evaluated per actor, so each actor will have its own `co
 
 ### Input
 
-You can provide input data to a machine’s initial `context` by passing an `input` property to the `interpret(machine, { input })` function and using the `input` property from the first argument in the `context` function:
+You can provide input data to a machine’s initial `context` by passing an `input` property to the `createActor(machine, { input })` function and using the `input` property from the first argument in the `context` function:
 
 ```ts
 const feedbackMachine = createMachine({
@@ -99,7 +99,7 @@ const feedbackMachine = createMachine({
   }),
 });
 
-const feedbackActor = interpret(feedbackMachine, {
+const feedbackActor = createActor(feedbackMachine, {
   input: {
     defaultRating: 5,
   },
@@ -131,7 +131,7 @@ const feedbackMachine = createMachine({
   },
 });
 
-const feedbackActor = interpret(feedbackMachine);
+const feedbackActor = createActor(feedbackMachine);
 
 feedbackActor.subscribe((state) => {
   console.log(state.context.feedback);
@@ -218,7 +218,7 @@ const machine = createMachine({
   }),
 });
 
-const feedbackActor = interpret(machine, {
+const feedbackActor = createActor(machine, {
   input: {
     defaultRating: 5,
   },

versioned_docs/version-5/final-states.mdx

@@ -7,7 +7,7 @@ import EmbedMachine from '@site/src/components/EmbedMachine';
 A final state is a state that represents the completion or successful termination of a machine. It is defined by the `type: 'final'` property on a state node:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   initial: 'prompt',
@@ -42,7 +42,10 @@ A machine can have multiple final states or no final states.
 - When a machine reaches a top-level final state, it terminates.
 - Final states cannot have transitions
 
-<EmbedMachine name="Video player" embedURL="https://stately.ai/registry/editor/embed/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=c6f8ca35-25e3-4fc6-b4fe-c9994715852e" />
+<EmbedMachine
+  name="Video player"
+  embedURL="https://stately.ai/registry/editor/embed/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=c6f8ca35-25e3-4fc6-b4fe-c9994715852e"
+/>
 
 ## Using final states in Stately Studio
 
@@ -86,7 +89,7 @@ When all regions of a parallel state are "done", the parallel state is considere
 In this example, the `preparation` state is a parallel state with two regions: `beans` and `water`. When both regions are done, the `preparation` state is done, and the `brewing` state is entered.
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const coffeeMachine = createMachine({
   initial: 'preparation',
@@ -139,7 +142,7 @@ const coffeeMachine = createMachine({
 When a machine reaches its top-level final state, it can produce output data. You can specify this output data in the `.output` property of the top-level final state:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const currencyMachine = createMachine({
   // ...
@@ -159,7 +162,7 @@ const currencyMachine = createMachine({
   },
 });
 
-const currencyActor = interpret(currencyMachine, {
+const currencyActor = createActor(currencyMachine, {
   input: {
     amount: 10,
     fromCurrency: 'USD',

versioned_docs/version-5/finite-states.mdx

@@ -52,7 +52,7 @@ const feedbackMachine = createMachine({
   },
 });
 
-const feedbackActor = interpret(feedbackMachine).start();
+const feedbackActor = createActor(feedbackMachine).start();
 
 // Finite state
 console.log(feedbackActor.getSnapshot().value);
@@ -161,7 +161,7 @@ const feedbackMachine = createMachine({
   },
 });
 
-const feedbackActor = interpret(feedbackMachine).start();
+const feedbackActor = createActor(feedbackMachine).start();
 
 console.log(feedbackActor..getSnapshot().hasTag('visible'));
 // logs true
@@ -220,7 +220,7 @@ const feedbackMachine = createMachine({
   },
 });
 
-const feedbackActor = interpret(feedbackMachine).start();
+const feedbackActor = createActor(feedbackMachine).start();
 
 console.log(feedbackActor.getSnapshot().meta);
 // logs the object:
@@ -239,7 +239,7 @@ console.log(feedbackActor.getSnapshot().meta);
 Transitions are how you move from one finite state to another. They are defined by the `on` property on a state node:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   initial: 'prompt',
@@ -258,7 +258,7 @@ const feedbackMachine = createMachine({
   },
 });
 
-const feedbackActor = interpret(feedbackMachine).start();
+const feedbackActor = createActor(feedbackMachine).start();
 
 console.log(feedbackActor.getSnapshot().value);
 // logs 'prompt'
@@ -276,7 +276,7 @@ Read more about [events and transitions](transitions.mdx).
 A transition's `target` property defines where the machine should go when the transition is taken. Normally, it targets a sibling state node:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   initial: 'prompt',
@@ -302,7 +302,7 @@ const feedbackMachine = createMachine({
 The `target` can also target a descendant of a sibling state node:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   initial: 'prompt',
@@ -333,7 +333,7 @@ const feedbackMachine = createMachine({
 When the target state node is a descendant of the source state node, the source state node key can be omitted:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   // ...
@@ -366,7 +366,7 @@ const feedbackMachine = createMachine({
 When the state node doesn't change; i.e., the source and target state nodes are the same, the `target` property can be omitted:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   // ...
@@ -389,7 +389,7 @@ const feedbackMachine = createMachine({
 State nodes can also be targeted by their `id` by prefixing the `target` with a `#` followed by the state node's `id`:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   initial: 'prompt',
@@ -415,7 +415,7 @@ const feedbackMachine = createMachine({
 States can be identified with a unique ID: `id: 'myState'`. This is useful for targeting a state from any other state, even if they have different parent states:
 
 ```ts
-import { createMachine, interpret } from 'xstate';
+import { createMachine, createActor } from 'xstate';
 
 const feedbackMachine = createMachine({
   initial: 'prompt',

versioned_docs/version-5/guards.mdx

@@ -41,7 +41,10 @@ const feedbackMachine = createMachine(
 
 ## Using guards in Stately Studio
 
-<EmbedMachine name="Video player" embedURL="https://stately.ai/registry/editor/embed/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=96f3bfce-147a-4aa0-ae2d-674cdfcb14ec"/>
+<EmbedMachine
+  name="Video player"
+  embedURL="https://stately.ai/registry/editor/embed/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=96f3bfce-147a-4aa0-ae2d-674cdfcb14ec"
+/>
 
 :::studio
 
@@ -155,7 +158,7 @@ const feedbackMachine = createMachine(
 Guards can later be provided or overridden by providing custom guard implementations in the `.provide()` method:
 
 ```ts
-const feedbackActor = interpret(
+const feedbackActor = createActor(
   // highlight-start
   feedbackMachine.provide({
     guards: {