Merge branch 'main' into next

# Conflicts: # .changeset/poor-ducks-join.md # packages/core/src/model.types.ts # packages/core/src/typegenTypes.ts # packages/core/src/types.ts # packages/core/test/types.test.ts # packages/xstate-svelte/package.json # packages/xstate-svelte/src/useMachine.ts
statelyai · May 26, 2022 · 98a7202 · 98a7202
2 parents 7a68cbb + eb7856e
commit 98a7202
Show file tree

Hide file tree

Showing 39 changed files with 439 additions and 301 deletions.
diff --git a/.changeset/cool-ducks-pretend.md b/.changeset/cool-ducks-pretend.md
diff --git a/.changeset/fast-ways-run.md b/.changeset/fast-ways-run.md
diff --git a/.changeset/poor-ducks-join.md b/.changeset/poor-ducks-join.md
diff --git a/.changeset/serious-melons-fold.md b/.changeset/serious-melons-fold.md
diff --git a/.changeset/stupid-plums-smile.md b/.changeset/stupid-plums-smile.md
diff --git a/.changeset/tasty-chicken-itch.md b/.changeset/tasty-chicken-itch.md
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -1,6 +1,13 @@
 name: Node CI
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - main
+      - next
+  pull_request:
+    branches:
+      - '**'
 
 jobs:
   build:

diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@ JavaScript and TypeScript [finite state machines](https://en.wikipedia.org/wiki/
 
 💙 [Explore our catalogue of examples](https://xstate-catalogue.com/)
 
+➡️ [Create state machines with the Stately Editor](https://stately.ai/editor)
+
 🖥 [Download our VS Code extension](https://marketplace.visualstudio.com/items?itemName=statelyai.stately-vscode)
 
 📑 Adheres to the [SCXML specification](https://www.w3.org/TR/scxml/)

diff --git a/babel.config.js b/babel.config.js
@@ -39,6 +39,24 @@ module.exports = {
       { isTSX: true, allExtensions: true, disallowAmbiguousJSXLike: true }
     ]
   ],
+  overrides: [
+    {
+      test: /\.svelte$/,
+      presets: [
+        [
+          '@babel/preset-typescript',
+          {
+            isTSX: true,
+            allExtensions: true,
+            disallowAmbiguousJSXLike: true,
+            // this is the only overriden option
+            // potentially we could just configure it for all the files but surprisingly something crashes when we try to do it
+            onlyRemoveTypeImports: true
+          }
+        ]
+      ]
+    }
+  ],
   plugins: [
     stripSymbolObservableMethodPlugin,
     '@babel/proposal-class-properties'

diff --git a/docs/fr/packages/xstate-react/index.md b/docs/fr/packages/xstate-react/index.md
@@ -224,52 +224,6 @@ const App = ({ service }) => {
 };
 ```
 
-### `asEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useEffect`.
-
-**Example**
-
-```jsx
-const machine = createMachine({
-  initial: 'focused',
-  states: {
-    focused: {
-      entry: 'focus'
-    }
-  }
-});
-
-const Input = () => {
-  const inputRef = useRef(null);
-  const [state, send] = useMachine(machine, {
-    actions: {
-      focus: asEffect((context, event) => {
-        inputRef.current && inputRef.current.focus();
-      })
-    }
-  });
-
-  return <input ref={inputRef} />;
-};
-```
-
-### `asLayoutEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useLayoutEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useLayoutEffect`.
-
 ### `useMachine(machine)` with `@xstate/fsm`
 
 A [React hook](https://reactjs.org/hooks) that interprets the given finite state `machine` from [`@xstate/fsm`] and starts a service that runs for the lifetime of the component.

diff --git a/docs/guides/actions.md b/docs/guides/actions.md
@@ -679,7 +679,7 @@ const machine = createMachine({
 
 A [self-transition](./transitions.md#self-transitions) is when a state transitions to itself, in which it _may_ exit and then reenter itself. Self-transitions can either be an **internal** or **external** transition:
 
-- An internal transition will _not_ exit and reenter itself, so the state node's `entry` and `exit` actions will not be executed again.
+- An internal transition will _neither_ exit nor reenter itself, so the state node's `entry` and `exit` actions will not be executed again.
   - Internal transitions are indicated with `{ internal: true }`, or by leaving the `target` as `undefined`.
   - Actions defined on the transition's `actions` property will be executed.
 - An external transition _will_ exit and reenter itself, so the state node's `entry` and `exit` actions will be executed again.

diff --git a/docs/guides/transitions.md b/docs/guides/transitions.md
@@ -168,7 +168,7 @@ Other event descriptors include:
 
 A self-transition is when a state transitions to itself, in which it _may_ exit and then reenter itself. Self-transitions can either be an **internal** or **external** transition:
 
-- An **internal transition** will not exit nor re-enter itself, but may enter different child states.
+- An **internal transition** will neither exit nor re-enter itself, but may enter different child states.
 - An **external transition** will exit and re-enter itself, and may also exit/enter child states.
 
 By default, all transitions with a specified target are external.

diff --git a/docs/guides/typescript.md b/docs/guides/typescript.md
@@ -49,6 +49,9 @@ const machine = createMachine({
     events: {} as { type: 'FOO'; value: string } | { type: 'BAR' }
   },
   initial: 'a',
+  context: {
+    value: '',
+  },
   states: {
     a: {
       on: {
@@ -74,6 +77,9 @@ const machine = createMachine({
     context: {} as { value: string },
     events: {} as { type: 'FOO'; value: string } | { type: 'BAR' }
   },
+  context: {
+    value: '',
+  },
   initial: 'a',
   states: {
     /* ... */

diff --git a/docs/packages/xstate-react/index.md b/docs/packages/xstate-react/index.md
@@ -86,7 +86,7 @@ A [React hook](https://reactjs.org/hooks) that interprets the given `machine` an
   );
   ```
 
-- `options` (optional) - [Interpreter options](https://xstate.js.org/docs/guides/interpretation.html#options) and/or any of the following machine config options: `guards`, `actions`, `services`, `delays`, `immediate`, `context`, `state`.
+- `options` (optional) - [Interpreter options](https://xstate.js.org/docs/guides/interpretation.html#options) and/or any of the following machine config options: `guards`, `actions`, `services`, `delays`, `immediate`, `context`, `state`. If the machine already contains any of these options, they will be merged, with these options taking precedence.
 
 **Returns** a tuple of `[state, send, service]`:
 
@@ -127,7 +127,7 @@ _Since 1.3.0_
 **Arguments**
 
 - `machine` - An [XState machine](https://xstate.js.org/docs/guides/machines.html) or a function that lazily returns a machine.
-- `options` (optional) - [Interpreter options](https://xstate.js.org/docs/guides/interpretation.html#options) and/or any of the following machine config options: `guards`, `actions`, `services`, `delays`, `immediate`, `context`, `state`.
+- `options` (optional) - [Interpreter options](https://xstate.js.org/docs/guides/interpretation.html#options) and/or any of the following machine config options: `guards`, `actions`, `services`, `delays`, `immediate`, `context`, `state`. If the machine already contains any of these options, they will be merged, with these options taking precedence.
 - `observer` (optional) - an observer or listener that listens to state updates:
   - an observer (e.g., `{ next: (state) => {/* ... */} }`)
   - or a listener (e.g., `(state) => {/* ... */}`)
@@ -224,52 +224,6 @@ const App = ({ service }) => {
 };
 ```
 
-### `asEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useEffect`.
-
-**Example**
-
-```jsx
-const machine = createMachine({
-  initial: 'focused',
-  states: {
-    focused: {
-      entry: 'focus'
-    }
-  }
-});
-
-const Input = () => {
-  const inputRef = useRef(null);
-  const [state, send] = useMachine(machine, {
-    actions: {
-      focus: asEffect((context, event) => {
-        inputRef.current && inputRef.current.focus();
-      })
-    }
-  });
-
-  return <input ref={inputRef} />;
-};
-```
-
-### `asLayoutEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useLayoutEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useLayoutEffect`.
-
 ### `useMachine(machine)` with `@xstate/fsm`
 
 A [React hook](https://reactjs.org/hooks) that interprets the given finite state `machine` from [`@xstate/fsm`] and starts a service that runs for the lifetime of the component.

diff --git a/docs/updates/2022-03-24.md b/docs/updates/2022-03-24.md
@@ -10,6 +10,6 @@ updateType: docs
 <h1>{{ $frontmatter.title }}</h1>
 <p class="date">{{ new Date($frontmatter.date).toLocaleString('en-US',{ month:'long', day:'numeric', year:'numeric' }) }}</p>
 
-We now have a [Roadmap page](/docs/roadmap/) in the “News and Useful Links” section. The Roadmap describes what Stately is working on for XState and Stately tools.
+We now have a [Roadmap page](/roadmap/) in the “News and Useful Links” section. The Roadmap describes what Stately is working on for XState and Stately tools.
 
 We prioritize features based on your feedback. Please let us know if you have feedback or suggestions in [our GitHub Discussions](https://github.com/statelyai/xstate/discussions), [our Discord](https://discord.gg/xstate) or on [Twitter](https://twitter.com/statelyai).
diff --git a/docs/zh/packages/xstate-react/index.md b/docs/zh/packages/xstate-react/index.md
@@ -224,52 +224,6 @@ const App = ({ service }) => {
 };
 ```
 
-### `asEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useEffect`.
-
-**Example**
-
-```jsx
-const machine = createMachine({
-  initial: 'focused',
-  states: {
-    focused: {
-      entry: 'focus'
-    }
-  }
-});
-
-const Input = () => {
-  const inputRef = useRef(null);
-  const [state, send] = useMachine(machine, {
-    actions: {
-      focus: asEffect((context, event) => {
-        inputRef.current && inputRef.current.focus();
-      })
-    }
-  });
-
-  return <input ref={inputRef} />;
-};
-```
-
-### `asLayoutEffect(action)`
-
-Ensures that the `action` is executed as an effect in `useLayoutEffect`, rather than being immediately executed.
-
-**Arguments**
-
-- `action` - An action function (e.g., `(context, event) => { alert(context.message) })`)
-
-**Returns** a special action function that wraps the original so that `useMachine` knows to execute it in `useLayoutEffect`.
-
 ### `useMachine(machine)` with `@xstate/fsm`
 
 A [React hook](https://reactjs.org/hooks) that interprets the given finite state `machine` from [`@xstate/fsm`] and starts a service that runs for the lifetime of the component.

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,48 @@
 # xstate
 
+## 4.32.1
+
+### Patch Changes
+
+- [#3292](https://github.com/statelyai/xstate/pull/3292) [`16514e466`](https://github.com/statelyai/xstate/commit/16514e4663deba95731a84deaee94c17edec1e06) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue in the `EmittedFrom` type helper that could prevent it from inferring the desired type from some services.
+
+## 4.32.0
+
+### Minor Changes
+
+- [#3234](https://github.com/statelyai/xstate/pull/3234) [`ce376b388`](https://github.com/statelyai/xstate/commit/ce376b3889ea900e67d20026517b87185377c32e) Thanks [@Andarist](https://github.com/Andarist)! - Added a `StateValueFrom` helper that can be used to extract valid state values from a machine. This might specifically be useful with typegen because typegenless `state.matches` accepts `any` anyway.
+
+### Patch Changes
+
+- [#3215](https://github.com/statelyai/xstate/pull/3215) [`44c66e74f`](https://github.com/statelyai/xstate/commit/44c66e74f9eafbb326979234e2bbe51e38dc3a86) Thanks [@tom-sherman](https://github.com/tom-sherman)! - Removing the timeout that's built in to `waitFor` is now supported by explicitly passing an `Infinity` value.
+
+  Example usage:
+
+  ```js
+  import { waitFor } from 'xstate/lib/waitFor';
+
+  // This will
+  const loggedInState = await waitFor(
+    loginService,
+    state => state.hasTag('loggedIn'),
+    { timeout: Infinity }
+  );
+  ```
+
+  This fixes a bug that causes `waitFor` to reject with an error immediately due to the behaviour of `setTimeout`.
+
+* [#3230](https://github.com/statelyai/xstate/pull/3230) [`780458c92`](https://github.com/statelyai/xstate/commit/780458c921d4525c7a00119c7eb43d4833978861) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with typegen types not being able to provide events that had a union of strings as their `type` (such as `{ type: 'INC' | 'DEC'; value: number; }`).
+
+- [#3252](https://github.com/statelyai/xstate/pull/3252) [`a94dfd467`](https://github.com/statelyai/xstate/commit/a94dfd46772cacc59154c165f27122164f48625b) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with `EventFrom` not being able to extract events that had a union of strings as their `type` (such as `{ type: 'INC' | 'DEC'; value: number; }`).
+
+* [#3090](https://github.com/statelyai/xstate/pull/3090) [`c4f73ca13`](https://github.com/statelyai/xstate/commit/c4f73ca1356d106423c8b4ee34865f7e4f2d2bb6) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with action objects not receiving correct event types when used in the second argument to the `createMachine`.
+
+- [#3238](https://github.com/statelyai/xstate/pull/3238) [`3df6335ef`](https://github.com/statelyai/xstate/commit/3df6335ef8db4edcf0a47d4c559716552ce4bbe8) Thanks [@davidkpiano](https://github.com/davidkpiano)! - The typings for `sendTo(...)` have been fixed.
+
+* [#3228](https://github.com/statelyai/xstate/pull/3228) [`fe5f0e6c9`](https://github.com/statelyai/xstate/commit/fe5f0e6c9bbb6ff740673889892301c8989eacfd) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with inline functions in the config object used as transition actions not having their argument types inferred.
+
+- [#3252](https://github.com/statelyai/xstate/pull/3252) [`a94dfd467`](https://github.com/statelyai/xstate/commit/a94dfd46772cacc59154c165f27122164f48625b) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with default `TEvent` (`{ type: string }`) not being correctly provided to inline transition actions.
+
 ## 4.31.0
 
 ### Minor Changes

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xstate",
-  "version": "4.31.0",
+  "version": "4.32.1",
   "description": "Finite State Machines and Statecharts for the Modern Web.",
   "main": "dist/xstate.cjs.js",
   "module": "dist/xstate.esm.js",