Doc updates (#285)

* Improve installation

* Updates

* Update context

Author: davidkpiano

docs/cheatsheet.mdx

@@ -7,18 +7,26 @@ Use this cheatsheet to quickly look up the syntax for XState v5 beta.
 ## Installing XState
 
 <Tabs>
-<TabItem value="yarn" label="yarn">
+<TabItem value="npm" label="npm">
 
 ```bash
-yarn add xstate
+npm install xstate@beta
 ```
 
 </TabItem>
 
-<TabItem value="npm" label="npm">
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm install xstate@beta
+```
+
+</TabItem>
+
+<TabItem value="yarn" label="yarn">
 
 ```bash
-npm install xstate
+yarn add xstate@beta
 ```
 
 </TabItem>
@@ -200,9 +208,16 @@ const machine = createMachine({
     active: {
       initial: 'one',
       states: {
-        one: {},
+        one: {
+          on: {
+            NEXT: { target: 'two' }
+          }
+        },
         two: {},
       },
+      on: {
+        NEXT: { target: 'inactive' }
+      }
     },
     inactive: {},
   },
@@ -216,6 +231,12 @@ actor.subscribe((snapshot) => {
 
 actor.start();
 // logs { active: 'one' }
+
+actor.send({ type: 'NEXT' });
+// logs { active: 'two' }
+
+actor.send({ type: 'NEXT' });
+// logs 'inactive'
 ```
 
 [Read more about parent states](parent-states.mdx).
@@ -323,6 +344,7 @@ const machine = createMachine({
       on: {
         toggle: {
           // Guard with params
+          // highlight-next-line
           guard: { type: 'isAfterTime', params: { time: '16:00' } },
           target: 'inactive',
         },
@@ -362,15 +384,18 @@ actor.start();
 ## Invoking actors
 
 ```ts
-import { createMachine, fromPromise, createActor, assign } from 'xstate';
+import { setup, fromPromise, createActor, assign } from 'xstate';
 
 const loadUserLogic = fromPromise(async () => {
   const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
   const user = await response.json();
   return user;
 });
 
-const machine = createMachine({
+const machine = setup({
+  // highlight-next-line
+  actors: { loadUserLogic }
+}).createMachine({
   id: 'toggle',
   initial: 'loading',
   context: {
@@ -381,7 +406,7 @@ const machine = createMachine({
       // highlight-start
       invoke: {
         id: 'loadUser',
-        src: loadUserLogic,
+        src: 'loadUserLogic',
         onDone: {
           target: 'doSomethingWithUser',
           actions: assign({
@@ -531,36 +556,40 @@ actor.start();
 ## Types
 
 ```ts
+import { setup, fromPromise } from 'xstate';
+
 const promiseLogic = fromPromise(async () => {
   /* ... */
 });
 
-const machine = createMachine({
-  types: {} as {
-    context: {
+const machine = setup({
+  types: {
+    context: {} as {
       count: number;
     };
-    events:
-      | {
-          type: 'inc';
-        }
+    events: {} as 
+      | { type: 'inc'; }
       | { type: 'dec' }
       | { type: 'incBy'; amount: number };
-    actions:
+    actions: {} as 
       | { type: 'notify'; params: { message: string } }
       | { type: 'handleChange' };
-    guards:
+    guards: {} as 
       | { type: 'canBeToggled' }
       | { type: 'isAfterTime'; params: { time: string } };
-    actors: {
-      logic: typeof promiseLogic;
-      src: 'someSrc';
-      id: 'promise1' | 'promise2';
+    children: {} as {
+      promise1: 'someSrc';
+      promise2: 'someSrc';
     };
     delays: 'shortTimeout' | 'longTimeout';
     tags: 'tag1' | 'tag2';
     input: number;
     output: string;
   },
+  actors: {
+    promiseLogic
+  }
+}).createMachine({
+  // ...
 });
 ```

docs/context.mdx

@@ -6,9 +6,9 @@ import SkipDownLink from '@site/src/components/SkipDownLink';
 
 In XState, `context` is how you store data in a state machine [actor](actors.mdx).
 
-`context` is a special property available in all states and used to store data relevant to the state machine. The `context` object is immutable, so you cannot directly modify it. Instead, use the `assign(...)` action to update `context`.
+The `context` property is available in all states and used to store data relevant to an actor. The `context` object is immutable, so you cannot directly modify it. Instead, for state machine logic, you can use the `assign(...)` action to update `context`.
 
-The `context` property is _optional_; if the state machine only specifies [finite states](finite-states.mdx), it may not need `context`.
+The `context` property is _optional_; if the state machine only specifies [finite states](finite-states.mdx) and no external contextual data, it may not need `context`.
 
 ```ts
 import { createMachine } from 'xstate';
@@ -179,7 +179,7 @@ const machine = createMachine({
 
 Use our XState context cheatsheet below to get started quickly.
 
-**Initial context**
+### Initial context
 
 ```ts
 const machine = createMachine({
@@ -189,7 +189,7 @@ const machine = createMachine({
 });
 ```
 
-**Lazy initial context**
+### Lazy initial context
 
 ```ts
 const machine = createMachine({
@@ -200,7 +200,7 @@ const machine = createMachine({
 });
 ```
 
-**Updating context with `assign(...)`**
+### Updating context with `assign(...)`
 
 ```ts
 const machine = createMachine({
@@ -217,7 +217,7 @@ const machine = createMachine({
 });
 ```
 
-**Input**
+### Input
 
 ```ts
 const machine = createMachine({

docs/installation.mdx

@@ -4,46 +4,52 @@ title: Installation
 
 # Installation
 
-You can install XState using your favorite package manager or embed the `<script>` directly from a CDN.
+XState has **zero dependencies** and runs anywhere that JavaScript runs. You can install XState using your favorite package manager, like [npm](https://www.npmjs.com/), [pnpm](https://pnpm.js.org/), or [yarn](https://yarnpkg.com/).
 
 <Tabs>
-<TabItem value="yarn" label="yarn">
+<TabItem value="npm" label="npm">
 
 ```bash
-yarn add xstate@beta
+npm install xstate@beta
 ```
 
 </TabItem>
 
-<TabItem value="npm" label="npm">
+<TabItem value="pnpm" label="pnpm">
 
 ```bash
-npm install xstate@beta
+pnpm install xstate@beta
+```
+
+</TabItem>
+
+<TabItem value="yarn" label="yarn">
+
+```bash
+yarn add xstate@beta
 ```
 
 </TabItem>
 </Tabs>
 
 ## CDN
 
-You can import XState from the [Skypack CDN](https://www.skypack.dev/xstate@beta):
+You can also import XState from various CDNs:
+
+- [esm.run](https://esm.run):
+
+```ts
+import { createMachine, createActor } from 'https://esm.run/xstate';
+```
+
+- [esm.sh](https://esm.sh):
+
+```ts
+import { createMachine, createActor } from 'https://esm.sh/xstate';
+```
+
+- [Skypack](https://www.skypack.dev):
 
 ```ts
-import {
-  createMachine,
-  createActor,
-} from 'https://cdn.skypack.dev/xstate@beta';
-
-const machine = createMachine({
-  initial: 'a',
-  states: {
-    a: {},
-  },
-});
-
-const actor = createActor(machine);
-actor.subscribe((state) => {
-  console.log(state);
-});
-actor.start();
+import { createMachine, createActor } from 'https://cdn.skypack.dev/xstate';
 ```