Merge branch 'main' into next

# Conflicts:
#	.github/ISSUE_TEMPLATE/bug_report.md
#	.github/workflows/nodejs.yml
#	package.json
#	packages/core/package.json
#	packages/core/rollup.config.js
#	packages/core/src/Actor.ts
#	packages/core/src/Machine.ts
#	packages/core/src/State.ts
#	packages/core/src/StateNode.ts
#	packages/core/src/actions.ts
#	packages/core/src/behaviors.ts
#	packages/core/src/dev/index.ts
#	packages/core/src/each.ts
#	packages/core/src/index.ts
#	packages/core/src/interpreter.ts
#	packages/core/src/model.ts
#	packages/core/src/model.types.ts
#	packages/core/src/scxml.ts
#	packages/core/src/stateUtils.ts
#	packages/core/src/types.ts
#	packages/core/src/utils.ts
#	packages/core/test/actionCreators.test.ts
#	packages/core/test/actions.test.ts
#	packages/core/test/actor.test.ts
#	packages/core/test/after.test.ts
#	packages/core/test/event.test.ts
#	packages/core/test/examples/6.16.test.ts
#	packages/core/test/examples/6.17.test.ts
#	packages/core/test/fixtures/id.ts
#	packages/core/test/guards.test.ts
#	packages/core/test/id.test.ts
#	packages/core/test/interpreter.test.ts
#	packages/core/test/invoke.test.ts
#	packages/core/test/order.test.ts
#	packages/core/test/parallel.test.ts
#	packages/core/test/scxml.test.ts
#	packages/core/test/types.test.ts
#	packages/core/test/utils.ts
#	packages/xstate-analytics/package.json
#	packages/xstate-analytics/src/index.ts
#	packages/xstate-fsm/package.json
#	packages/xstate-graph/package.json
#	packages/xstate-graph/src/graph.ts
#	packages/xstate-inspect/examples/server.ts
#	packages/xstate-inspect/package.json
#	packages/xstate-inspect/src/browser.ts
#	packages/xstate-inspect/src/inspectMachine.ts
#	packages/xstate-inspect/src/serialize.ts
#	packages/xstate-inspect/src/server.ts
#	packages/xstate-inspect/src/types.ts
#	packages/xstate-react/package.json
#	packages/xstate-react/src/useInterpret.ts
#	packages/xstate-react/src/useMachine.ts
#	packages/xstate-react/src/useService.ts
#	packages/xstate-react/src/useSpawn.ts
#	packages/xstate-react/test/types.test.tsx
#	packages/xstate-react/test/useActor.test.tsx
#	packages/xstate-react/test/useMachine.test.tsx
#	packages/xstate-react/test/useSelector.test.tsx
#	packages/xstate-react/test/useService.test.tsx
#	packages/xstate-scxml/package.json
#	packages/xstate-scxml/src/index.ts
#	packages/xstate-scxml/test/fixtures/assign-current-small-step/test1.ts
#	packages/xstate-scxml/test/fixtures/assign/assign_invalid.ts
#	packages/xstate-scxml/test/scxml.test.ts
#	packages/xstate-svelte/package.json
#	packages/xstate-svelte/src/useMachine.ts
#	packages/xstate-svelte/test/UseMachine.svelte
#	packages/xstate-test/package.json
#	packages/xstate-test/src/types.ts
#	packages/xstate-vue/package.json
#	packages/xstate-vue/src/useInterpret.ts
#	packages/xstate-vue/src/useSpawn.ts
#	packages/xstate-vue/test/UseMachine.vue
#	yarn.lock

.changeset/chilled-ghosts-turn.md

@@ -0,0 +1,5 @@
+---
+'xstate': patch
+---
+
+Added some internal `@ts-ignore` comments to fix consuming projects that do not use `skipLibCheck`.

.changeset/config.json

@@ -1,15 +1,13 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": [
-    "@changesets/changelog-github",
-    { "repo": "davidkpiano/xstate" }
-  ],
+  "changelog": ["@changesets/changelog-github", { "repo": "statelyai/xstate" }],
   "commit": false,
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "ignore": ["@xstate/analytics", "@xstate/scxml"],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
-    "onlyUpdatePeerDependentsWhenOutOfRange": true
+    "onlyUpdatePeerDependentsWhenOutOfRange": true,
+    "useCalculatedVersionForSnapshots": true
   }
 }

.changeset/empty-hairs-knock.md

@@ -0,0 +1,5 @@
+---
+'xstate': patch
+---
+
+Fixed an issue with context type being inferred from too many places within `createMachine` call and possibly ending up as `any` for the entire machine.

.changeset/lemon-mugs-attack.md

@@ -0,0 +1,5 @@
+---
+'xstate': patch
+---
+
+Fixed an issue with not being able to call `createMachine` in a generic context when the type for the context was generic and not concrete.

.changeset/red-frogs-yell.md

@@ -0,0 +1,5 @@
+---
+'xstate': patch
+---
+
+Fixed an issue with context type defined using `schema.context` being sometimes widened based on `config.context`. If both are given the `schema.context` should always take precedence and should represent the complete type of the context.

.changeset/short-eels-cough.md

@@ -0,0 +1,9 @@
+---
+'xstate': patch
+'@xstate/graph': patch
+'@xstate/inspect': patch
+'@xstate/react': patch
+'@xstate/vue': patch
+---
+
+Fixed compatibility with Skypack by exporting some shared utilities from root entry of XState and consuming them directly in other packages (this avoids accessing those things using deep imports and thus it avoids creating those compatibility problems).

.changeset/thin-hounds-kiss.md

@@ -0,0 +1,5 @@
+---
+'xstate': patch
+---
+
+Fixed an issue with `ActorRefFrom` not resolving the typegen metadata from machine types given to it. This could sometimes result in types assignability problems, especially when using machine factories and `spawn`.

.codesandbox/ci.json

@@ -0,0 +1,10 @@
+{
+  "packages": [
+    "packages/core",
+    "packages/xstate-fsm",
+    "packages/xstate-graph",
+    "packages/xstate-react",
+    "packages/xstate-test"
+  ],
+  "sandboxes": ["xstate-example-template-m4ckv", "xstate-react-template-3t2tg"]
+}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -2,12 +2,11 @@ name: Bug Report
 description: File a bug report
 title: "Bug: "
 labels: [bug, triage]
-assignees:
 body:
   - type: markdown
     attributes:
       value: |
-        Report an issue with XState or any XState-related tooling.
+        Report an issue with XState or XState tooling within this repo.
   - type: textarea
     id: description
     attributes:

.github/actions/ci-checks/action.yml

@@ -0,0 +1,19 @@
+name: 'CI checks'
+runs:
+  using: 'composite'
+  steps:
+    - name: Build
+      run: yarn build
+      shell: bash
+
+    - name: Typecheck
+      run: yarn typecheck
+      shell: bash
+
+    - name: Test
+      run: yarn test --silent
+      shell: bash
+
+    - name: Svelte Check
+      run: yarn --cwd packages/xstate-svelte svelte-check
+      shell: bash

.github/actions/ci-setup/action.yml

@@ -0,0 +1,12 @@
+name: 'CI setup'
+runs:
+  using: 'composite'
+  steps:
+    - name: Use Node.js 14.x
+      uses: actions/setup-node@v2
+      with:
+        node-version: 14.x
+
+    - name: Install Dependencies
+      run: yarn
+      shell: bash

.github/workflows/nodejs.yml

@@ -8,26 +8,7 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [14.x]
-
     steps:
       - uses: actions/checkout@v2
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Typecheck
-        run: yarn typecheck
-
-      - name: Test
-        run: yarn test --silent
-
-      - name: Build
-        run: yarn build
+      - uses: ./.github/actions/ci-setup
+      - uses: ./.github/actions/ci-checks

.github/workflows/release.yml

@@ -16,17 +16,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-        with:
-          # This makes action fetch all Git history so that Changesets can generate changelogs with the correct commits
-          fetch-depth: 0
-
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14.x
-
-      - name: Install Dependencies
-        run: yarn
+      - uses: ./.github/actions/ci-setup
+      - uses: ./.github/actions/ci-checks
 
       - name: Create Release Pull Request or Publish to npm
         uses: changesets/action@v1

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/)
 
+🖥 [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/)
 
 💬 Chat on the [Stately Discord Community](https://discord.gg/KCtSX7Cdjh)

docs/.vuepress/theme/index.js

@@ -10,7 +10,7 @@ module.exports = (_, ctx) => ({
     const isAlgoliaSearch =
       themeConfig.algolia ||
       Object.keys((siteConfig.locales && themeConfig.locales) || {}).some(
-        base => themeConfig.locales[base].algolia
+        (base) => themeConfig.locales[base].algolia
       );
 
     return {

docs/README.md

@@ -16,6 +16,8 @@ JavaScript and TypeScript [finite state machines](https://en.wikipedia.org/wiki/
 
 New to state machines and statecharts? [Read our introduction](/guides/introduction-to-state-machines-and-statecharts/).
 
+🖥 [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/)
 
 💬 Chat on the [Stately Discord Community](https://discord.gg/KCtSX7Cdjh)

docs/guides/communication.md

@@ -31,7 +31,7 @@ An invocation is defined in a state node's configuration with the `invoke` prope
   - the invoked observable completes
 - `onError` - (optional) the transition to be taken when the invoked service encounters an execution error.
 - `autoForward` - (optional) `true` if all events sent to this machine should also be sent (or _forwarded_) to the invoked child (`false` by default)
-  - ⚠️ Avoid setting `autoForward` to `true`, as blindly forwarding all events may lead to unexpected behavior and/or infinite loops. Always prefer to explicitly send events, and/or use the `forward(...)` action creator to directly forward an event to an invoked child. (works currently for machines only! ⚠️)
+  - ⚠️ Avoid setting `autoForward` to `true`, as blindly forwarding all events may lead to unexpected behavior and/or infinite loops. Always prefer to explicitly send events, and/or use the `forwardTo(...)` action creator to directly forward an event to a service.
 - `data` - (optional, used only when invoking machines) an object that maps properties of the child machine's [context](./context.md) to a function that returns the corresponding value from the parent machine's `context`.
 
 ::: warning

docs/guides/context.md

@@ -194,6 +194,39 @@ The `assign(...)` function is an **action creator**; it is a pure function that
 
 ## Action Order
 
+::: warning
+In XState version 5, this behavior will change and `assign(...)` actions will be called **in order** instead of being prioritized, which is incorrect behavior according to SCXML.
+
+To get this behavior in version 4, add `preserveActionOrder: true` to the machine config:
+
+```js
+const counterMachine = createMachine({
+  preserveActionOrder: true, // Ensures that assign actions are called in order
+  // ...
+  context: { count: 0 },
+  states: {
+    active: {
+      on: {
+        INC_TWICE: {
+          actions: [
+            (context) => console.log(`Before: ${context.count}`), // "Before: 0"
+            assign({ count: (context) => context.count + 1 }), // count === 1
+            assign({ count: (context) => context.count + 1 }), // count === 2
+            (context) => console.log(`After: ${context.count}`) // "After: 2"
+          ]
+        }
+      }
+    }
+  }
+});
+
+interpret(counterMachine).start().send({ type: 'INC_TWICE' });
+// => "Before: 0"
+// => "After: 2"
+```
+
+:::
+
 Custom actions are always executed with regard to the _next state_ in the transition. When a state transition has `assign(...)` actions, those actions are always batched and computed _first_, to determine the next state. This is because a state is a combination of the finite state and the extended state (context).
 
 For example, in this counter machine, the custom actions will not work as expected:
@@ -323,17 +356,22 @@ const countMachine = createMachine({
 
 ## TypeScript
 
-For proper type inference, add the context type as the first type parameter to `createMachine<TContext, ...>`:
+For proper type inference, add the context type to the schema property of the machine:
 
 ```ts
+import { createMachine } from 'xstate';
+
 interface CounterContext {
   count: number;
   user?: {
     name: string;
   };
 }
 
-const machine = createMachine<CounterContext>({
+const machine = createMachine({
+  schema: {
+    context: {} as CounterContext
+  },
   // ...
   context: {
     count: 0,
@@ -351,21 +389,27 @@ const context = {
   user: { name: '' }
 };
 
-const machine = createMachine<typeof context>({
+const machine = createMachine({
+  schema: {
+    context: {} as typeof context
+  },
   // ...
   context
   // ...
 });
 ```
 
-In most cases, the types for `context` and `event` in `assign(...)` actions will be automatically inferred from the type parameters passed into `createMachine<TContext, TEvent>`:
+In most cases, the types for `context` and `event` in `assign(...)` actions will be automatically inferred from the type parameters passed into `schema`:
 
 ```ts
 interface CounterContext {
   count: number;
 }
 
-const machine = createMachine<CounterContext>({
+const machine = createMachine({
+  schema: {
+    context: {} as CounterContext
+  },
   // ...
   context: {
     count: 0

docs/guides/interpretation.md

@@ -139,7 +139,6 @@ The `.onTransition()` callback will not run between eventless ("always") transit
 Microsteps are the intermediate transitions between macrosteps.
 :::
 
-
 ## Starting and Stopping
 
 The service can be initialized (i.e., started) and stopped with `.start()` and `.stop()`. Calling `.start()` will immediately transition the service to its initial state. Calling `.stop()` will remove all listeners from the service, and do any listener cleanup, if applicable.

docs/guides/start.md

@@ -8,7 +8,7 @@ Suppose we want to model a [Promise](https://developer.mozilla.org/en-US/docs/We
 npm install xstate --save
 ```
 
-> If you're using VSCode, you should install our [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=mattpocock.xstate-vscode) to allow you to visualize the machine you're building as you go.
+> If you're using VSCode, you should install our [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=statelyai.stately-vscode) to allow you to visualize the machine you're building as you go.
 
 Then, in your project, import `createMachine`, which is a function that creates a state machine.