Merge branch 'main' into throw-errors-in-react

.changeset/config.json

@@ -5,13 +5,7 @@
   "linked": [],
   "access": "public",
   "baseBranch": "main",
-  "ignore": [
-    "@xstate/immer",
-    "@xstate/graph",
-    "@xstate/inspect",
-    "@xstate/solid",
-    "@xstate/test"
-  ],
+  "ignore": ["@xstate/immer", "@xstate/inspect"],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true,
     "useCalculatedVersionForSnapshots": true

.git-blame-ignore-revs

@@ -0,0 +1,4 @@
+# prettier formatting
+71183da18ae6b0b6b2e8f0c52ea9976232e54f41
+94037fe9c429839f0508ddcd287718b659276e3b
+f51bf4d8907307ace083a0decb34668176c7fad3

.github/FUNDING.yml

@@ -2,7 +2,7 @@
 
 github: davidkpiano
 patreon: # Replace with a single Patreon username
-open_collective: xstate 
+open_collective: xstate
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: File a bug report
-title: "Bug: "
+title: 'Bug: '
 labels: [bug, triage]
 body:
   - type: markdown

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,14 @@
 blank_issues_enabled: true
 contact_links:
   - name: ✨ Feature Request
-    url: https://github.com/statelyai/xstate/discussions/new
-    about: Have an idea for a new feature or integration? Share it here!
+    url: https://github.com/statelyai/xstate/discussions/new?category=ideas
+    about: Propose new features or integrations to enhance XState's functionality.
   - name: ❓ Ask a Question
-    url: https://github.com/statelyai/xstate/discussions/new
-    about: If you have any questions about how to do something in XState, ask it here.
+    url: https://github.com/statelyai/xstate/discussions/new?category=q-a
+    about: Need help with XState? Ask your questions and get support from the community.
+  - name: 📖 Documentation
+    url: https://github.com/statelyai/docs/issues/new
+    about: Found a problem or have suggestions for improving our documentation? Let us know here.
+  - name: 🛠️ Stately Studio
+    url: https://github.com/statelyai/studio-issues/issues/new/choose
+    about: Report issues or request features specific to Stately Studio.

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

@@ -17,3 +17,7 @@ runs:
     - name: Svelte Check
       run: yarn --cwd packages/xstate-svelte svelte-check
       shell: bash
+
+    - name: Knip
+      run: yarn knip
+      shell: bash

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

@@ -3,7 +3,7 @@ runs:
   using: 'composite'
   steps:
     - name: Use Node.js 20.x
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: 20.x
 

.github/workflows/docs.yml

@@ -13,22 +13,18 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x]
-
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Build docs
         working-directory: docs
         run: |
           yarn install
-          yarn docs:build
+          NODE_OPTIONS='--openssl-legacy-provider' yarn docs:build
 
       - name: Publish docs
         uses: JamesIves/[email protected]

.github/workflows/nodejs.yml

@@ -10,7 +10,7 @@ on:
       - '**'
 
 permissions:
-  contents: read  #  to fetch code (actions/checkout)
+  contents: read #  to fetch code (actions/checkout)
 
 jobs:
   build:
@@ -19,6 +19,6 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/ci-setup
       - uses: ./.github/actions/ci-checks

.github/workflows/release.yml

@@ -12,9 +12,9 @@ permissions: {}
 jobs:
   release:
     permissions:
-      contents: write  #  to create release (changesets/action)
+      contents: write #  to create release (changesets/action)
       issues: write # to post issue comments (changesets/action)
-      pull-requests: write  #  to create pull request (changesets/action)
+      pull-requests: write #  to create pull request (changesets/action)
 
     if: github.repository == 'statelyai/xstate'
 
@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/ci-setup
       - uses: ./.github/actions/ci-checks
 

.gitignore

@@ -53,3 +53,6 @@ docs/.cache
 
 # Docs
 api/
+
+# pnpm
+.pnpm-lock.yaml

.knip.jsonc

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "workspaces": {
+    ".": {
+      "entry": ["scripts/*.js"],
+      "project": ["scripts/*.js"]
+    },
+    "packages/core": {
+      "entry": [
+        "src/index.ts",
+        "src/actions.ts",
+        "src/actors/index.ts",
+        "src/guards.ts",
+        "src/dev/index.ts"
+      ]
+    },
+    "packages/xstate-inspect": {
+      "entry": ["src/index.ts", "src/server.ts"]
+    },
+    "packages/xstate-store": {
+      "entry": ["src/index.ts", "src/react.ts", "src/solid.ts"]
+    },
+    "packages/xstate-svelte": {
+      "typescript": "test/tsconfig.json"
+    }
+  },
+  "ignore": [
+    // used for `#is-development` conditional import
+    "packages/**/{true,false}.ts",
+    // file acts as a type test
+    "packages/xstate-svelte/test/interpreterAsReadable.svelte"
+  ],
+  "ignoreBinaries": ["svelte-check", "docs:build"],
+  "ignoreDependencies": [
+    "@xstate-repo/jest-utils",
+    "@xstate-repo/jest-utils/setup",
+    "synckit",
+    // package.json#exports aren't added as entry points, because `dist/` is .gitignored
+    "react",
+    "solid-js",
+    "xstate",
+    "@types/ws"
+  ]
+}

.node-version

@@ -1 +1 @@
-v16.15.0
+20.15.1

.prettierignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+/docs

.prettierrc

@@ -5,5 +5,7 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "none",
-  "bracketSpacing": true
+  "bracketSpacing": true,
+  "plugins": ["prettier-plugin-jsdoc"],
+  "tsdoc": true
 }

.vscode/launch.json

@@ -9,7 +9,6 @@
       "args": ["${file}", "--config", "jest.config.js", "--no-cache"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
-      "disableOptimisticBPs": true,
       "windows": {
         "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
@@ -28,7 +27,6 @@
       ],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
-      "disableOptimisticBPs": true,
       "windows": {
         "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }

CONTRIBUTING.md

@@ -22,16 +22,21 @@ Please read [our code of conduct](https://github.com/statelyai/xstate/blob/main/
 Pull requests are encouraged. If you want to add a feature or fix a bug:
 
 1. [Fork](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) and [clone](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) the [repository](https://github.com/statelyai/xstate).
-2. [Create a separate branch](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/managing-branches) for your changes.
-3. Make your changes, and ensure that it is formatted by [Prettier](https://prettier.io) and type-checks without errors in [TypeScript](https://www.typescriptlang.org/).
-4. Write tests that validate your change and/or fix.
-5. Run `yarn build` and then run tests with `yarn test` (for all packages) or `yarn test:core` (for only changes to core XState).
-6. For package changes, add docs inside the `/packages/*/README.md`. These docs will be copied on build to the corresponding `/docs/packages/*/index.md` file.
-7. Create a changeset by running `yarn changeset`. [More about changesets](https://github.com/atlassian/changesets).
-8. Push your branch and open a PR 🚀
+1. [Create a separate branch](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/managing-branches) for your changes.
+1. Make your changes, and write tests that validate your change and/or fix.
+1. Run `yarn test` (for all packages) or `yarn test:core` (for only changes to core XState).
+1. Run `yarn typecheck` to make sure that there are no type errors.
+1. Create a changeset by running `yarn changeset`. [More about changesets](https://github.com/atlassian/changesets).
+1. Push your branch and open a PR 🚀
 
 PRs are reviewed promptly and merged in within a day or two (or even within an hour) if everything looks good.
 
+## Contributing an example
+
+Our [examples](https://github.com/statelyai/xstate/tree/main/examples) are self-contained apps that show how to solve a common problem, integrate another framework (like Vue or Svelte) or build something fun with XState.
+
+To contribute an example, please read the [`readme`](https://github.com/statelyai/xstate/blob/main/examples/readme.md) in the `/examples` folder.
+
 ## Submit an issue
 
 Issues and bug reports are also encouraged. If you want to submit an issue:

README.md

@@ -181,16 +181,15 @@ Read [📽 the slides](http://slides.com/davidkhourshid/finite-state-machines) (
 
 ## Packages
 
-| Package                                                                                       | Description                                                                  |
-| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| 🤖 `xstate`                                                                                   | Core finite state machine and statecharts library + interpreter              |
-| [📉 `@xstate/graph`](https://github.com/statelyai/xstate/tree/main/packages/xstate-graph)     | Graph traversal utilities for XState                                         |
-| [⚛️ `@xstate/react`](https://github.com/statelyai/xstate/tree/main/packages/xstate-react)     | React hooks and utilities for using XState in React applications             |
-| [💚 `@xstate/vue`](https://github.com/statelyai/xstate/tree/main/packages/xstate-vue)         | Vue composition functions and utilities for using XState in Vue applications |
-| [🎷 `@xstate/svelte`](https://github.com/statelyai/xstate/tree/main/packages/xstate-svelte)   | Svelte utilities for using XState in Svelte applications                     |
-| [🥏 `@xstate/solid`](https://github.com/statelyai/xstate/tree/main/packages/xstate-solid)     | Solid hooks and utilities for using XState in Solid applications             |
-| [✅ `@xstate/test`](https://github.com/statelyai/xstate/tree/main/packages/xstate-test)       | Model-Based-Testing utilities (using XState) for testing any software        |
-| [🔍 `@xstate/inspect`](https://github.com/statelyai/xstate/tree/main/packages/xstate-inspect) | Inspection utilities for XState                                              |
+| Package                                                                                     | Description                                                                  |
+| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| 🤖 `xstate`                                                                                 | Core finite state machine and statecharts library + interpreter              |
+| [📉 `@xstate/graph`](https://github.com/statelyai/xstate/tree/main/packages/xstate-graph)   | Graph traversal and model-based testing utilities using XState               |
+| [⚛️ `@xstate/react`](https://github.com/statelyai/xstate/tree/main/packages/xstate-react)   | React hooks and utilities for using XState in React applications             |
+| [💚 `@xstate/vue`](https://github.com/statelyai/xstate/tree/main/packages/xstate-vue)       | Vue composition functions and utilities for using XState in Vue applications |
+| [🎷 `@xstate/svelte`](https://github.com/statelyai/xstate/tree/main/packages/xstate-svelte) | Svelte utilities for using XState in Svelte applications                     |
+| [🥏 `@xstate/solid`](https://github.com/statelyai/xstate/tree/main/packages/xstate-solid)   | Solid hooks and utilities for using XState in Solid applications             |
+| [🔍 `@statelyai/inspect`](https://github.com/statelyai/inspect)                             | Inspection utilities for XState                                              |
 
 ## Finite State Machines
 

babel.config.js

@@ -1,22 +1,6 @@
 const { NODE_ENV } = process.env;
 const isTest = NODE_ENV === 'test';
 
-const stripSymbolObservableMethodPlugin = ({ types: t }) => {
-  const isSymbolObservable = t.buildMatchMemberExpression('Symbol.observable');
-  return {
-    visitor: {
-      Class(path) {
-        path
-          .get('body.body')
-          .filter(
-            (p) => p.isClassMethod() && isSymbolObservable(p.get('key').node)
-          )
-          .forEach((p) => p.remove());
-      }
-    }
-  };
-};
-
 module.exports = {
   assumptions: {
     constantReexports: true, // only matters for tests (since only there we transpile to CJS using Babel), it makes debugging easier
@@ -65,12 +49,9 @@ module.exports = {
       ]
     },
     {
-      test: /\/xstate-solid\//,
+      test: /\/xstate-solid\/|solid\.test\.tsx$/,
       presets: ['babel-preset-solid']
     }
   ],
-  plugins: [
-    stripSymbolObservableMethodPlugin,
-    '@babel/proposal-class-properties'
-  ]
+  plugins: ['@babel/proposal-class-properties']
 };

docs/.vuepress/config.js

@@ -31,6 +31,7 @@ module.exports = {
     toc: { includeLevel: [2, 3], slugify: slugifyWithBadges }
   },
   head: [
+    ['meta', { name: 'robots', content: 'noindex' }],
     ['script', { src: 'https://plausible.io/js/plausible.js', defer: 'defer' }]
   ],
   themeConfig: {

docs/fr/sandboxes/todomvc/package.json

@@ -18,6 +18,6 @@
     "xstate",
     "react"
   ],
-  "name": "xstate-todomvc",
+  "name": "xstate-todomvc-fr",
   "description": "The TodoMVC app implemented with React (using hooks) and XState version 4."
 }

docs/guides/effects.md

@@ -4,7 +4,7 @@
 
 XState v5 is out now! [Read more about XState v5](https://stately.ai/blog/2023-12-01-xstate-v5)
 
-🆕 Find more about [effects and actions in XState](https://stately.ai/docs/xstate/actions) in our new docs.
+🆕 Find more about [effects and actions in XState](https://stately.ai/docs/actions) in our new docs.
 :::
 
 In statecharts, "side-effects" can be grouped into two categories:

docs/zh/sandboxes/todomvc/package.json

@@ -18,6 +18,6 @@
     "xstate",
     "react"
   ],
-  "name": "xstate-todomvc",
+  "name": "xstate-todomvc-zh",
   "description": "The TodoMVC app implemented with React (using hooks) and XState version 4."
 }

examples/7guis-1-counter-vue/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/7guis-1-counter-vue/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}