Apply changes (#4348)

Co-authored-by: Anders Bech Mellson <[email protected]>
statelyai · Oct 9, 2023 · 4457421 · 4457421
1 parent 2647033
commit 4457421
Show file tree

Hide file tree

Showing 21 changed files with 42 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ JavaScript and TypeScript [finite state machines](https://en.wikipedia.org/wiki/
 
 ### ✨ Create state machines visually → [state.new](https://state.new)
 
-📖 [Read the documentation](https://stately.ai/docs/xstate)
+📖 [Read the documentation](https://stately.ai/docs)
 
 ➡️ [Create state machines with the Stately Editor](https://stately.ai/editor)
 
@@ -76,7 +76,7 @@ const toggleMachine = createMachine({
 
 // Machine instance with internal state
 const toggleActor = interpret(toggleMachine);
-toggleActor.subscribe((state) => console.log(state.value))
+toggleActor.subscribe((state) => console.log(state.value));
 toggleActor.start();
 // => logs 'inactive'
 
@@ -157,7 +157,9 @@ const lightMachine = createMachine({
 
 const currentState = 'green';
 
-const nextState = lightMachine.transition(currentState, { type: 'TIMER' }).value;
+const nextState = lightMachine.transition(currentState, {
+  type: 'TIMER'
+}).value;
 
 // => 'yellow'
 ```
@@ -216,7 +218,9 @@ const lightMachine = createMachine({
 
 const currentState = 'yellow';
 
-const nextState = lightMachine.transition(currentState, { type: 'TIMER' }).value;
+const nextState = lightMachine.transition(currentState, {
+  type: 'TIMER'
+}).value;
 // => {
 //   red: 'walk'
 // }
@@ -231,7 +235,10 @@ lightMachine.transition('red.walk', { type: 'PED_TIMER' }).value;
 
 ```js
 // ...
-const waitState = lightMachine.transition({ red: 'walk' }, { type: 'PED_TIMER' }).value;
+const waitState = lightMachine.transition(
+  { red: 'walk' },
+  { type: 'PED_TIMER' }
+).value;
 
 // => { red: 'wait' }
 
@@ -308,7 +315,9 @@ const wordMachine = createMachine({
   }
 });
 
-const boldState = wordMachine.transition('bold.off', { type: 'TOGGLE_BOLD' }).value;
+const boldState = wordMachine.transition('bold.off', {
+  type: 'TOGGLE_BOLD'
+}).value;
 
 // {
 //   bold: 'on',
@@ -364,7 +373,9 @@ const paymentMachine = createMachine({
   }
 });
 
-const checkState = paymentMachine.transition('method.cash', { type: 'SWITCH_CHECK' });
+const checkState = paymentMachine.transition('method.cash', {
+  type: 'SWITCH_CHECK'
+});
 
 // => State {
 //   value: { method: 'check' },
@@ -378,7 +389,9 @@ const reviewState = paymentMachine.transition(checkState, { type: 'NEXT' });
 //   history: State { ... }
 // }
 
-const previousState = paymentMachine.transition(reviewState, { type: 'PREVIOUS' }).value;
+const previousState = paymentMachine.transition(reviewState, {
+  type: 'PREVIOUS'
+}).value;
 
 // => { method: 'check' }
 ```

diff --git a/docs/guides/actions.md b/docs/guides/actions.md
@@ -30,7 +30,7 @@ Actions are fire-and-forget [effects](./effects.md). They can be declared in thr
 To learn more, read about [actions in our introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#actions).
 
 :::tip Check out our new docs!
-🆕 Find our [actions in XState explainer](https://stately.ai/docs/xstate/actions/) in our new docs, along with a [no-code introduction to actions in statecharts and the Stately Studio](https://stately.ai/docs/actions-and-actors/entry-and-exit-actions).
+🆕 Find our [actions in XState explainer](https://stately.ai/docs/actions/) in our new docs, along with a [no-code introduction to actions in statecharts and the Stately Studio](https://stately.ai/docs/actions#entry-and-exit-actions).
 :::
 
 ## API

diff --git a/docs/guides/actors.md b/docs/guides/actors.md
@@ -1,7 +1,7 @@
 # Actors <Badge text="4.6+"/>
 
 :::tip Check out our new docs!
-🆕 Find our [actors in XState explainer](https://stately.ai/docs/xstate/actors/intro) in our new docs, along with a [no-code introduction to actors in statecharts and the Stately Studio](https://stately.ai/docs/actions-and-actors/actors).
+🆕 Find our [actors in XState explainer](https://stately.ai/docs/actors) in our new docs, along with a [no-code introduction to actors in statecharts and the Stately Studio](https://stately.ai/docs/actors#using-actors-in-stately-studio).
 :::
 
 [:rocket: Quick Reference](#quick-reference)

diff --git a/docs/guides/communication.md b/docs/guides/communication.md
@@ -1,7 +1,7 @@
 # Invoking Services
 
 :::tip Check out our new docs!
-🆕 Our [section on actors in XState](https://stately.ai/docs/xstate/actors/intro) has explainers and examples for promises, callbacks, observables, actions, and actors.
+🆕 Our [section on actors in XState](https://stately.ai/docs/actors) has explainers and examples for promises, callbacks, observables, actions, and actors.
 :::
 
 [:rocket: Quick Reference](#quick-reference)

diff --git a/docs/guides/context.md b/docs/guides/context.md
@@ -3,7 +3,7 @@
 [:rocket: Quick Reference](#quick-reference)
 
 :::tip Check out our new docs!
-🆕 Find more about [context in XState](https://stately.ai/docs/xstate/actions/context) in our new docs.
+🆕 Find more about [context in XState](https://stately.ai/docs/context) in our new docs.
 :::
 
 While _finite_ states are well-defined in finite state machines and statecharts, state that represents _quantitative data_ (e.g., arbitrary strings, numbers, objects, etc.) that can be potentially infinite is represented as [extended state](https://en.wikipedia.org/wiki/UML_state_machine#Extended_states) instead. This makes statecharts much more useful for real-life applications.

diff --git a/docs/guides/delays.md b/docs/guides/delays.md
@@ -3,7 +3,7 @@
 Delays and timeouts can be handled declaratively with statecharts. To learn more, see the section in our [introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#delayed-transitions).
 
 :::tip Check out our new docs!
-🆕 Find more about [delayed (after) transitions in XState](https://stately.ai/docs/xstate/transitions-and-choices/after) as well as a [no-code introduction to delayed transitions](https://stately.ai/docs/transitions-and-events/delayed-transitions) in our new docs.
+🆕 Find more about [delayed (after) transitions in XState](https://stately.ai/docs/delayed-transitions) as well as a [no-code introduction to delayed transitions](https://stately.ai/docs/delayed-transitions#using-delayed-transitions-in-stately-studio) in our new docs.
 :::
 
 ## Delayed transitions

diff --git a/docs/guides/effects.md b/docs/guides/effects.md
@@ -1,7 +1,7 @@
 # Effects
 
 :::tip Check out our new docs!
-🆕 Find more about [effects and actions in XState](https://stately.ai/docs/xstate/actions#side-effects) in our new docs.
+🆕 Find more about [effects and actions in XState](https://stately.ai/docs/xstate-v4/xstate/actions#side-effects) in our new docs.
 :::
 
 In statecharts, "side-effects" can be grouped into two categories:

diff --git a/docs/guides/events.md b/docs/guides/events.md
@@ -1,7 +1,7 @@
 # Events
 
 :::tip Check out our new docs!
-🆕 Find more about [events in XState](https://stately.ai/docs/xstate/basics/what-is-a-statechart#transitions-and-events) as well as a [no-code introduction to events and transitions featuring puppies](https://stately.ai/docs/xstate/basics/what-is-a-statechart#transitions-and-events).
+🆕 Find more about [events in XState](https://stately.ai/docs/transitions) as well as a [no-code introduction to events and transitions featuring puppies](https://stately.ai/docs/state-machines-and-statecharts#transitions-and-events).
 :::
 
 An event is what causes a state machine to [transition](./transitions.md) from its current [state](./states.md) to its next state. To learn more, read [the events section in our introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#transitions-and-events).

diff --git a/docs/guides/final.md b/docs/guides/final.md
@@ -1,7 +1,7 @@
 # Final states
 
 :::tip Check out our new docs!
-🆕 Find more about [final states in XState](https://stately.ai/docs/xstate/states/final-states) as well as a [no-code introduction to final states](https://stately.ai/docs/states/final-states).
+🆕 Find more about [final states in XState](https://stately.ai/docs/final-states) as well as a [no-code introduction to final states](https://stately.ai/docs/state-machines-and-statecharts#final-state).
 :::
 
 In statecharts, you can declare a state as a **final state**. The final state indicates that its parent state is “done”. To learn more, read the [final state section in our introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#final-state).

diff --git a/docs/guides/guards.md b/docs/guides/guards.md
@@ -1,7 +1,7 @@
 # Guarded Transitions
 
 :::tip Check out our new docs!
-🆕 Find more about [guards in XState](https://stately.ai/docs/xstate/transitions-and-choices/guards) as well as a [no-code introduction to guards](https://stately.ai/docs/transitions-and-events/guards).
+🆕 Find more about [guards in XState](https://stately.ai/docs/guards) as well as a [no-code introduction to guards](https://stately.ai/docs/guards#using-guards-in-stately-studio).
 :::
 
 Many times, you'll want a transition between states to only take place if certain conditions on the state (finite or extended) or the event are met. For instance, let's say you're creating a machine for a search form, and you only want search to be allowed if:

diff --git a/docs/guides/hierarchical.md b/docs/guides/hierarchical.md
@@ -1,7 +1,7 @@
 # Hierarchical state nodes
 
 :::tip Check out our new docs!
-🆕 Find more about [parent and child states in XState](https://stately.ai/docs/xstate/states/parent-and-child-states) as well as a [no-code introduction to parent states](https://stately.ai/docs/states/parent-states).
+🆕 Find more about [parent and child states in XState](https://stately.ai/docs/parent-states) as well as a [no-code introduction to parent states](https://stately.ai/docs/state-machines-and-statecharts#parent-states).
 :::
 
 In statecharts, states can be nested _within other states_. These nested states are called **compound states**. To learn more, read the [compound states section in our introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#compound-states).

diff --git a/docs/guides/history.md b/docs/guides/history.md
@@ -1,7 +1,7 @@
 # History
 
 :::tip Check out our new docs!
-🆕 Find more about [parent and child states in XState](https://stately.ai/docs/xstate/states/history-states) as well as a [no-code introduction to history states](https://stately.ai/docs/states/history-states).
+🆕 Find more about [parent and child states in XState](https://stately.ai/docs/history-states) as well as a [no-code introduction to history states](https://stately.ai/docs/history-states#using-history-states-in-stately-studio).
 :::
 
 A history [state node](./statenodes.md) is a special kind of state node that, when reached, tells the machine to go to the last state value of that region. There's two types of history states:

diff --git a/docs/guides/installation.md b/docs/guides/installation.md
@@ -3,7 +3,7 @@
 You can install XState from NPM or Yarn, or you can embed the `<script>` directly from a CDN.
 
 :::tip Check out our new docs!
-🆕 Find more about [installing XState](https://stately.ai/docs/xstate/installation) in our new docs.
+🆕 Find more about [installing XState](https://stately.ai/docs/installation) in our new docs.
 :::
 
 ## Package Manager

diff --git a/docs/guides/interpretation.md b/docs/guides/interpretation.md
@@ -1,7 +1,7 @@
 # Interpreting Machines
 
 :::tip Check out our new docs!
-🆕 Find more about [interpreting machines using XState](https://stately.ai/docs/xstate/running-machines/intro#interpret) in our new docs.
+🆕 Find more about [creating actors using XState](https://stately.ai/docs/actors#creating-actors) in our new docs.
 :::
 
 While a state machine/statechart with a pure `.transition()` function is useful for flexibility, purity, and testability, in order for it to have any use in a real-life application, something needs to:

diff --git a/docs/guides/machines.md b/docs/guides/machines.md
@@ -3,7 +3,7 @@
 A state machine is a finite set of states that can transition to each other deterministically due to events. To learn more, read our [introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md).
 
 :::tip Check out our new docs!
-🆕 Find more about [creating machines using XState](https://stately.ai/docs/xstate/basics/what-is-a-statechart) in our new docs.
+🆕 Find more about [creating machines using XState](https://stately.ai/docs/machines#creating-a-state-machine) in our new docs.
 :::
 
 ## Configuration

diff --git a/docs/guides/parallel.md b/docs/guides/parallel.md
@@ -3,7 +3,7 @@
 In statecharts, you can declare a state as a **parallel state**. This means that all its child states will run _at the same time_. To learn more, see the section in our [introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#parallel-states).
 
 :::tip Check out our new docs!
-🆕 Find more about [parallel states in XState](https://stately.ai/docs/xstate/states/parallel-states) as well as a [no-code introduction to parallel states](https://stately.ai/docs/states/parallel-states).
+🆕 Find more about [parallel states in XState](https://stately.ai/docs/parallel-states) as well as a [no-code introduction to parallel states](https://stately.ai/docs/state-machines-and-statecharts#parallel-states).
 :::
 
 ## API

diff --git a/docs/guides/scxml.md b/docs/guides/scxml.md
@@ -3,7 +3,7 @@
 XState is compatible with the [SCXML (State Chart XML: State Machine Notation for Control Abstraction) specification](https://www.w3.org/TR/scxml/). This page contains details on where our API relates to the SCXML specification.
 
 :::tip Check out our new docs!
-🆕 Find more about [SCXML compatibility in XState](https://stately.ai/docs/xstate/advanced/scxml) in our new docs.
+🆕 Find more about [SCXML compatibility in XState](https://stately.ai/docs/xstate-v4/xstate/advanced/scxml) in our new docs.
 :::
 
 ## Events

diff --git a/docs/guides/states.md b/docs/guides/states.md
@@ -3,7 +3,7 @@
 A state is an abstract representation of a system (such as an application) at a specific point in time. To learn more, read the [section on states in our introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#states).
 
 :::tip Check out our new docs!
-🆕 Find more about [states in XState](https://stately.ai/docs/xstate/basics/what-is-a-statechart#states) as well as a [no-code introduction to states](https://stately.ai/docs/states/intro).
+🆕 Find more about [states in XState](https://stately.ai/docs/states) as well as a [no-code introduction to states](https://stately.ai/docs/state-machines-and-statecharts#states).
 :::
 
 ## API

diff --git a/docs/guides/testing.md b/docs/guides/testing.md
@@ -5,7 +5,7 @@ In general, testing state machines and statecharts should be done by testing the
 > Given a **current state**, when some **sequence of events** occurs, the system under test should be in **a certain state** and/or exhibit a specific **output**.
 
 :::tip Check out our new docs!
-🆕 Find more about [model-based testing using XState](https://stately.ai/docs/xstate/model-based-testing/intro) in our new docs.
+🆕 Find more about [model-based testing using XState](https://stately.ai/docs/xstate-v4/xstate/model-based-testing/intro) in our new docs.
 :::
 
 This follows [behavior-driven development (BDD)](https://en.wikipedia.org/wiki/Behavior-driven_development) and [black-box testing](https://en.wikipedia.org/wiki/Black-box_testing) strategies. The internal workings of a machine should not be directly tested; rather, the observed behavior should be tested instead. This makes testing machines closer to integration or end-to-end (E2E) tests than unit tests.

diff --git a/docs/guides/transitions.md b/docs/guides/transitions.md
@@ -3,7 +3,7 @@
 Transitions define how the machine reacts to [events](./events.md). To learn more, see the section in our [introduction to statecharts](./introduction-to-state-machines-and-statecharts/index.md#transitions-and-events).
 
 :::tip Check out our new docs!
-🆕 Find more about [transitions in XState](https://stately.ai/docs/xstate/basics/what-is-a-statechart#transitions-and-events) as well as a [no-code introduction to transitions](https://stately.ai/docs/state-machines-and-statecharts#transitions-and-events).
+🆕 Find more about [transitions in XState](https://stately.ai/docs/transitions) as well as a [no-code introduction to transitions](https://stately.ai/docs/state-machines-and-statecharts#transitions-and-events).
 :::
 
 ## API

diff --git a/docs/recipes/svelte.md b/docs/recipes/svelte.md
@@ -6,8 +6,8 @@ This guides you through setting up XState in a Svelte project. For new Svelte or
 
 XState integrates great with Svelte & SvelteKit, and especially [Svelte stores](https://svelte.dev/docs#svelte_store). We recommend the official `@xstate/svelte` package to get the most out of XState and Svelte.
 
-- Find installation details and example usage in the new docs on the [xstate svelte package](https://stately.ai/docs/xstate/packages/xstate-svelte).
-- Check out a [template](https://stately.ai/docs/xstate/templates) to get started quickly with a minimal project.
+- Find installation details and example usage in the new docs on the [xstate svelte package](https://stately.ai/docs/xstate-svelte).
+- Check out a [template](https://stately.ai/docs/templates) to get started quickly with a minimal project.
 
 ## Legacy Svelte projects based on Rollup