Merged 25Feb (#7)

* Created xstate-svelte directory and added support for @xstate/fsm. * Added support for xstate and tests. * Updated svelte-jester to allow running tests from project root. * Add createModel + test * Update test to show full typing * Rename withUpdaters -> withAssigners, fix mapValue types * Fix typings for createModel * Improve types * Do not crash when stopping already stopped interpreter. Fixes statelyai#1697 * Add changeset * WIP: model updates * Simplify model * Add comment * Update resources.md * Fixed an issue with `process` references not being removed correctly from the `@xstate/react` UMD bundles (statelyai#1756) * 'rollup-replace' replaces process.env.NODE_ENV declarations. * rollup-replace is a dependency. * 'rollup-replace' replaces process.env.NODE_ENV declarations. * Use the same version of rollup-plugin-replace across the repo * tweak changeset Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Version Packages (statelyai#1760) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Rename context -> initialContext, use ExtractEvent * Remove actions property * Fix types * Update description in svelte.md Add import statement: import replace from "@rollup/plugin-replace"; to documentation * Refactoring! * WIP * Fixed an issue with events received from callback actors not having the appropriate `_event.origin` set * Version Packages * Finish refactoring * Export createDevTools * Update packages/xstate-inspect/src/utils.ts Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Update packages/xstate-inspect/examples/server.ts Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Add global shim * Fix rollup config * Add null check * Add changeset and update README.md * Fixed an issue with some external packages not being bundled correctly into the `@xstate/react` UMD bundles (statelyai#1780) * Version Packages (statelyai#1781) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Switch to Vue 3 compatibility that has builtin support for the composition API (statelyai#1629) * build: set Vue 3 as dev and peer dependencies * refactor: import dependencies from Vue package * refactor: import test dependencies from Vue package * refactor: replace Composition API global with Vue * build: remove Composition API package * docs: add changeset * fix: apply suggestion from code review Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Fix tests etc. * Re-enable husky git hooks * Remove unnecessary dep & config stuff Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> Co-authored-by: David Khourshid <davidkpiano@gmail.com> * Version Packages * Update README.md Add Vue 3 template * Version Packages * Update docs * Fixed a typo parenthesis in the docs (statelyai#1798) * Ensure that services are registered by inspect client. Fixes statelyai#1797 * Add changeset * Version Packages * Update yarn.lock * Update README.md * `machine.resolveState(state)` calls should resolve to the correct value of `.done` property now (statelyai#1816) * Version Packages * Update resources.md * Update resources.md * Create deno.md (statelyai#1830) * Create deno.md Just wanted to mention how to get XState working on Deno. Not sure if 'recipes' is the best place, but not sure of anywhere better? * Update docs/recipes/deno.md Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Update resources.md * Update resources.md * Update resources.md * Remove RestrictedActions * Add model.reset() * Revert changed types * Fix TransitionsConfigMap * Fix types in tests * Remove unused function * Add changeset * Revert types * Version Packages * Add useMachineObserver * Add tests * Update resources.md * Update resources.md * Updated dependency versions * Improved `.matches(value)` inference for typestates containing union types as values * Changed minimum @types/jest version to 24.0.23 * Fix a bound TTypestate not being able to satisfy the default value * Copied yarn.lock from master and then ran yarn * Update resources.md * Fsm actions no longer merged. * Added 'service' to returned object * Update resources.md * Update .changeset/clean-walls-breathe.md Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Rename useMachineObserver -> useInterpret * Move useInterpret to file * Fixed URL to a codesandbox demoing @xstate/inspect using vanilla JS (statelyai#1878) It was pointing to TS template. * Documented using useMachine. Adapted xstate-react examples. * Added 'Services' section to svelte readme. * Corrections to svelte readme * Corrected link in svelte readme * Remove duplicated import from React in xstate-viz (statelyai#1897) * Remove React double import * Add changeset for removing react double import * Revert "Add changeset for removing react double import" This reverts commit 859845f. * Update resources.md * Update resources.md * Update immer * Remove xstate-dev * Fix TS issues * Fixing types * Add changeset * Update resources.md * Add support for "internal" transitions * Update shy-toes-worry.md * Add changeset * Update resources.md * Version Packages * Update .changeset/afraid-eggs-wonder.md Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Update packages/xstate-fsm/src/index.ts Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> * Refactor * Version Packages * docs: remove Spectrum.chat & where Spectrum.chat is appropriate, remind that GH Discussions is for XState-specific questions * Update README.md * Update README.md * + discussions link * replace Gitter "chat" with Discord * Add useSelector + tests * Fix types * Version Packages * Add test * Separate useReactEffectActions * Don't use instanceof * Add test for comparison function * Update resources.md * Add useIsomorphicLayoutEffect + consolidate options assignment * Update README.md * Fixed an issue with synchronous initial updates not updating useMachine * Move implementations update to a layout effect to avoid stale closure problems for layout effects * Update resources.md * Update resources.md * Fix selector subscription * Don't update guards * Separate observer subscription * Update resources.md * Adds final states to test plan description * Adds changeset * Version Packages * Revert options changes * Add changesets * Update useSelector * Memoize listener * Update resources.md * Update resources.md * Update resources.md * Update README.md * Version Packages * add typestate type to service returned from react/fsm useMachine * Add changeset * Fixed @xstate/react UMD build by redeclaring toObserver (statelyai#1950) * Version Packages (statelyai#1949) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Update resources.md * docs: add new resource Github - XState with React and Angular in Nx Workspace * Update docs * Update @xstate/react README.md * Fix README.md * Update resources.md Co-authored-by: James Opstad <13586373+jamesopstad@users.noreply.github.com> Co-authored-by: David Khourshid <davidkpiano@gmail.com> Co-authored-by: Dimitar Danailov <dimityr.danailov@gmail.com> Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: jonasholbech <jh@jonasholbech.dk> Co-authored-by: Sarah Dayan <dayan.sarah@gmail.com> Co-authored-by: decaylala <decaylala@users.noreply.github.com> Co-authored-by: Tom Byrer <tomByrer@gmail.com> Co-authored-by: Hosein <hosein2398@gmail.com> Co-authored-by: Jim Wheaton <jimwheaton@gmail.com> Co-authored-by: Luke Karrys <lukekarrys@gmail.com> Co-authored-by: Chau Tran <nartc7789@gmail.com>
dsngo · Feb 24, 2021 · 9c9d0e9 · 9c9d0e9
1 parent 40c5a18
commit 9c9d0e9
Show file tree

Hide file tree

Showing 153 changed files with 7,034 additions and 32,572 deletions.
diff --git a/README.md b/README.md
@@ -9,21 +9,16 @@
   </a>
 </p>
 
-
-
-
-
 [![npm version](https://badge.fury.io/js/xstate.svg)](https://badge.fury.io/js/xstate)
 <img src="https://opencollective.com/xstate/tiers/backer/badge.svg?label=sponsors&color=brightgreen" />
 
-<div class="blm-callout">
-Black lives matter. <a href="https://support.eji.org/give/153413/#!/donation/checkout" target="_blank">Support the Equal Justice Initiative.</a> ✊🏽✊🏾✊🏿 
-</div>
-
 JavaScript and TypeScript [finite state machines](https://en.wikipedia.org/wiki/Finite-state_machine) and [statecharts](https://www.sciencedirect.com/science/article/pii/0167642387900359/pdf) for the modern web.
 
 📖 [Read the documentation](https://xstate.js.org/docs)
-📑 Adheres to the [SCXML specification](https://www.w3.org/TR/scxml/).
+
+📑 Adheres to the [SCXML specification](https://www.w3.org/TR/scxml/)
+
+💬 Chat on the [Stately Discord Community](https://discord.gg/KCtSX7Cdjh)
 
 ## Packages
 
@@ -44,6 +39,7 @@ Get started by forking one of these templates on CodeSandbox:
 - [XState + React Template](https://codesandbox.io/s/xstate-react-template-3t2tg)
 - [XState + React + TypeScript Template](https://codesandbox.io/s/xstate-react-typescript-template-wjdvn)
 - [XState + Vue Template](https://codesandbox.io/s/xstate-vue-template-composition-api-1n23l)
+- [XState + Vue 3 Template](https://codesandbox.io/s/xstate-vue-3-template-vrkk9)
 - [XState + Svelte Template](https://codesandbox.io/s/xstate-svelte-template-jflv1)
 
 ## Super quick start
@@ -164,16 +160,16 @@ Read [📽 the slides](http://slides.com/davidkhourshid/finite-state-machines) (
 - [The World of Statecharts](https://statecharts.github.io/) by Erik Mogensen
 - [Pure UI](https://rauchg.com/2015/pure-ui) by Guillermo Rauch
 - [Pure UI Control](https://medium.com/@asolove/pure-ui-control-ac8d1be97a8d) by Adam Solove
-- [Spectrum - Statecharts Community](https://spectrum.chat/statecharts)
+- [Spectrum - Statecharts Community](https://spectrum.chat/statecharts) (For XState specific questions, please use the [GitHub Discussions](https://github.com/davidkpiano/xstate/discussions))
 
 ## Finite State Machines
 
 <img src="https://imgur.com/rqqmkJh.png" alt="Light Machine" width="300" />
 
 ```js
-import { Machine } from 'xstate';
+import { createMachine } from 'xstate';
 
-const lightMachine = Machine({
+const lightMachine = createMachine({
   id: 'light',
   initial: 'green',
   states: {
@@ -207,7 +203,7 @@ const nextState = lightMachine.transition(currentState, 'TIMER').value;
 <img src="https://imgur.com/GDZAeB9.png" alt="Hierarchical Light Machine" width="300" />
 
 ```js
-import { Machine } from 'xstate';
+import { createMachine } from 'xstate';
 
 const pedestrianStates = {
   initial: 'walk',
@@ -226,7 +222,7 @@ const pedestrianStates = {
   }
 };
 
-const lightMachine = Machine({
+const lightMachine = createMachine({
   id: 'light',
   initial: 'green',
   states: {
@@ -284,7 +280,7 @@ lightMachine.transition({ red: 'stop' }, 'TIMER').value;
 <img src="https://imgur.com/GKd4HwR.png" width="300" alt="Parallel state machine" />
 
 ```js
-const wordMachine = Machine({
+const wordMachine = createMachine({
   id: 'word',
   type: 'parallel',
   states: {
@@ -370,7 +366,7 @@ const nextState = wordMachine.transition(
 <img src="https://imgur.com/I4QsQsz.png" width="300" alt="Machine with history state" />
 
 ```js
-const paymentMachine = Machine({
+const paymentMachine = createMachine({
   id: 'payment',
   initial: 'method',
   states: {

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -19,7 +19,7 @@ module.exports = {
     nav: [
       { text: 'API', link: 'https://xstate.js.org/api' },
       { text: 'Visualizer', link: 'https://xstate.js.org/viz' },
-      { text: 'Chat', link: 'https://gitter.im/statecharts/statecharts' },
+      { text: 'Discord', link: 'https://discord.gg/xtWgFTgvNV' },
       {
         text: 'Community',
         link: 'https://github.com/davidkpiano/xstate/discussions'

diff --git a/docs/README.md b/docs/README.md
@@ -12,14 +12,13 @@
 [![npm version](https://badge.fury.io/js/xstate.svg)](https://badge.fury.io/js/xstate)
 <img src="https://opencollective.com/xstate/tiers/backer/badge.svg?label=sponsors&color=brightgreen" />
 
-<div class="blm-callout">
-Black lives matter. <a href="https://support.eji.org/give/153413/#!/donation/checkout" target="_blank">Support the Equal Justice Initiative.</a> ✊🏽✊🏾✊🏿 
-</div>
-
 JavaScript and TypeScript [finite state machines](https://en.wikipedia.org/wiki/Finite-state_machine) and [statecharts](https://www.sciencedirect.com/science/article/pii/0167642387900359/pdf) for the modern web.
 
 📖 [Read the documentation](https://xstate.js.org/docs)
-📑 Adheres to the [SCXML specification](https://www.w3.org/TR/scxml/).
+
+📑 Adheres to the [SCXML specification](https://www.w3.org/TR/scxml/)
+
+💬 Chat on the [Stately Discord Community](https://discord.gg/KCtSX7Cdjh)
 
 ## Packages
 
@@ -40,6 +39,7 @@ Get started by forking one of these templates on CodeSandbox:
 - [XState + React Template](https://codesandbox.io/s/xstate-react-template-3t2tg)
 - [XState + React + TypeScript Template](https://codesandbox.io/s/xstate-react-typescript-template-wjdvn)
 - [XState + Vue Template](https://codesandbox.io/s/xstate-vue-template-composition-api-1n23l)
+- [XState + Vue 3 Template](https://codesandbox.io/s/xstate-vue-3-template-vrkk9)
 - [XState + Svelte Template](https://codesandbox.io/s/xstate-svelte-template-jflv1)
 
 ## Super quick start
@@ -160,16 +160,16 @@ Read [📽 the slides](http://slides.com/davidkhourshid/finite-state-machines) (
 - [The World of Statecharts](https://statecharts.github.io/) by Erik Mogensen
 - [Pure UI](https://rauchg.com/2015/pure-ui) by Guillermo Rauch
 - [Pure UI Control](https://medium.com/@asolove/pure-ui-control-ac8d1be97a8d) by Adam Solove
-- [Spectrum - Statecharts Community](https://spectrum.chat/statecharts)
+- [Spectrum - Statecharts Community](https://spectrum.chat/statecharts) (For XState specific questions, please use the [GitHub Discussions](https://github.com/davidkpiano/xstate/discussions))
 
 ## Finite State Machines
 
 <img src="https://imgur.com/rqqmkJh.png" alt="Light Machine" width="300" />
 
 ```js
-import { Machine } from 'xstate';
+import { createMachine } from 'xstate';
 
-const lightMachine = Machine({
+const lightMachine = createMachine({
   id: 'light',
   initial: 'green',
   states: {
@@ -203,7 +203,7 @@ const nextState = lightMachine.transition(currentState, 'TIMER').value;
 <img src="https://imgur.com/GDZAeB9.png" alt="Hierarchical Light Machine" width="300" />
 
 ```js
-import { Machine } from 'xstate';
+import { createMachine } from 'xstate';
 
 const pedestrianStates = {
   initial: 'walk',
@@ -222,7 +222,7 @@ const pedestrianStates = {
   }
 };
 
-const lightMachine = Machine({
+const lightMachine = createMachine({
   id: 'light',
   initial: 'green',
   states: {
@@ -280,7 +280,7 @@ lightMachine.transition({ red: 'stop' }, 'TIMER').value;
 <img src="https://imgur.com/GKd4HwR.png" width="300" alt="Parallel state machine" />
 
 ```js
-const wordMachine = Machine({
+const wordMachine = createMachine({
   id: 'word',
   type: 'parallel',
   states: {
@@ -366,7 +366,7 @@ const nextState = wordMachine.transition(
 <img src="https://imgur.com/I4QsQsz.png" width="300" alt="Machine with history state" />
 
 ```js
-const paymentMachine = Machine({
+const paymentMachine = createMachine({
   id: 'payment',
   initial: 'method',
   states: {

diff --git a/docs/about/goals.md b/docs/about/goals.md
@@ -25,6 +25,6 @@ If you're deciding if you should use XState, [John Yanarella](https://github.com
 >
 > The front-end development world is the wild west, and it could stand to learn from what other engineering disciplines have known and employed for years.
 >
-> 3. It has **passed a critical threshold of maturity** as of version 4, particularly given the introduction of [the visualizer](https://statecharts.github.io/xstate-viz). And that's just the tip of the iceberg of where it could go next, as it (and [its community](https://spectrum.chat/statecharts)) introduces tooling that takes advantage of how a statechart can be visualized, analyzed, and tested.
+> 3. It has **passed a critical threshold of maturity** as of version 4, particularly given the introduction of [the visualizer](https://statecharts.github.io/xstate-viz). And that's just the tip of the iceberg of where it could go next, as it (and [its community](https://github.com/davidkpiano/xstate/discussions)) introduces tooling that takes advantage of how a statechart can be visualized, analyzed, and tested.
 >
 > 4. The **community** that is growing around it and the awareness it is bringing to finite state machines and statecharts. If you read back through this gitter history, there's a wealth of links to research papers, other FSM and Statechart implementations, etc. that have been collected by [Erik Mogensen](https://twitter.com/mogsie) over at [statecharts.github.io](https://statecharts.github.io).
diff --git a/docs/about/resources.md b/docs/about/resources.md
@@ -8,6 +8,8 @@ Below is an incomplete collection of many resources for learning and applying XS
 Watch the official [State Machines in JavaScript with XState](https://frontendmasters.com/courses/xstate/) course by [@davidkpiano](https://twitter.com/davidkpiano) on Frontend Masters! In this course, you’ll learn the fundamentals of state machines and statecharts, from building your own without any libraries in pure JavaScript, up to using XState to take advantage of a wide variety of other features.
 
 The workshop code examples are [open-sourced and available on GitHub](https://github.com/davidkpiano/frontend-masters-xstate-workshop).
+
+There is also a follow-up course: [State Modeling with React and XState](https://frontendmasters.com/workshops/xstate-react/). Once you've gone through the first course, be sure to take this one too so you can learn how to apply state machines and statecharts to real-world apps and master advanced concepts such as spawning/invoking actors and model-based testing.
 :::
 
 **Other great courses and guides:**
@@ -28,6 +30,8 @@ The workshop code examples are [open-sourced and available on GitHub](https://gi
 - [🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid](https://shoptalkshow.com/327-working-state-machines/)
 - [🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin](https://egghead.io/podcasts/introduction-to-state-machines-and-xstate-with-kyle-shevlin)
 - [🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano](https://syntax.fm/show/206/state-machines-css-and-animations-with-david-k-piano)
+- [🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid](https://modernweb.podbean.com/e/s07e20-modern-web-podcast-building-state-machines-using-xstate-with-david-khourshid/)
+  - [▶️ Video](https://www.youtube.com/watch?v=uLlQjp5u2KQ)
 
 ## Articles and Videos
 
@@ -164,7 +168,30 @@ The workshop code examples are [open-sourced and available on GitHub](https://gi
 - [▶️ Frontend is Rocket Science - How to use XState in Vue 3 Now!](https://www.youtube.com/watch?v=wRktleOGKS4) by [Aleksej Dix](https://twitter.com/aleksejdix)
 - [▶️ React Wednesdays: XState and JavaScript State Machines](https://www.youtube.com/watch?v=1TT2ymkYGyM)
 - [▶️ Declarative and manageable state management with XState](https://www.youtube.com/watch?v=jCbV5aELY6A) on Decoupled Days
-
-## Exercises
-
+- [▶️ Modeling a Voicemail Widget with XState](https://www.youtube.com/watch?v=D6LzWcV_-14) by [Constantin Druc](https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA)
 - [XState Brain Teaser #1 - Auth Flow](https://dev.to/mpocock1/xstate-brain-teaser-1-auth-flow-2jhl) by [Matt Pocock](https://twitter.com/mpocock1)
+- [▶️ Learning XState by refactoring an old project](https://fvsch.com/learning-xstate) by [Florens Verschelde](https://fvsch.com/)
+  - [Article](https://fvsch.com/learning-xstate)
+- [Creating State Machines in JavaScript with XState](https://nisimdor.medium.com/creating-state-machines-in-javascript-with-xstate-21e1599521be) by [Dor Nisim](https://nisimdor.medium.com/)
+- ["Just Use Props": An opinionated guide to React and XState](https://dev.to/mpocock1/just-use-props-an-opinionated-guide-to-react-and-xstate-fc9) by [Matt Pocock](https://dev.to/mpocock1)
+- [Usando XState y React para hacer peticiones HTTP (en español)](https://www.youtube.com/watch?v=Wo-rVyAsz-Q) by [GCD Coder](https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA)
+- [Infinite Scrolling con Svelte, IntersectionObserver & XState (en español)](https://www.youtube.com/watch?v=GMXrwrG0cL4) by [GCD Coder](https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA)
+- [▶️ Getting Started with XState in Vue 3](https://www.youtube.com/watch?v=g4YnmydXMP8) by [JacoboCode](https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q)
+- [▶️ Typing XState in Vue 3](https://www.youtube.com/watch?v=7tT45eRmyJE) by [JacoboCode](https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q)
+- [Infinite Scrolling with Svelte 3, XState and IntersectionObserver](https://dev.to/gcdcoder/infinite-scrolling-with-svelte-3-xstate-and-intersectionobserver-127j) by [Gustavo Castillo](https://dev.to/gcdcoder)
+- [Untangle complex flows in your React Native app with XState](https://medium.com/welld-tech/untangle-complex-flows-in-your-react-native-app-with-xstate-1b11d0b8a91f) by [Simone D'Avico](https://sdavico.medium.com/)
+- [Integrate XState with React Native and React Navigation](https://medium.com/welld-tech/integrate-xstate-with-react-native-and-react-navigation-21ead87391da) by [Simone D'Avico](https://sdavico.medium.com/)
+- [An Introduction to Finite State Machines: Simplifying React State Management with State Machines](https://soshace.com/an-introduction-to-finite-state-machines-simplifying-react-state-management-with-state-machines/) by [Bradley Kofi](https://soshace.com/author/bradstarart/)
+- [An Introduction to XState in TypeScript](https://medium.com/giant-machines/an-introduction-to-xstate-in-typescript-e71c7729ce88) by [Neeraj Khosla
+  ](https://medium.com/@n.khosla91)
+- [▶️ XState - Global state in React](https://www.youtube.com/watch?v=1kJcnFBrk2I) by [Matt Pocock](https://twitter.com/mpocock1)
+- [▶️ XState Introduction](https://www.youtube.com/watch?v=clu2bqjk3c0) on [For Those Who Code](https://www.youtube.com/channel/UCS3-MF_4ADqglU2OSly4vIw)
+- [Future of state management in React with XState](https://blog.jskoneczny.pl/post/future-of-state-management-in-react-with-xstate) by [Jakub Skoneczny](https://blog.jskoneczny.pl/)
+- [▶️ Custom Svelte Store: XState as Svelte store](https://www.youtube.com/watch?v=NIfQsc5XAzU) by [lihautan](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ)
+- [▶️ Finite State Machine on Frontend](https://www.youtube.com/watch?v=gCT-lCYYhf4) by [Eugenia Zigisova](https://twitter.com/jevgeniazi)
+- [#1 Introduction to XState in React](https://blog.imbhargav5.com/1-introduction-to-xstate-in-react) by [Bhargav Ponnapalli](https://blog.imbhargav5.com/)
+- [▶️ Modelling application behaviour with the XState library (in React)](https://www.youtube.com/watch?v=paZ4ImyI1YQ) by [Marc Klefter](https://twitter.com/marcklefter)
+- [Rsvp to weddings with XState](https://dev.to/droopytersen/rsvp-to-weddings-with-xstate-55nl) by [Andrew Peterson](https://dev.to/droopytersen)
+- [▶️ XState and State Machines in Vue](https://tallpad.com/series/xstate-misc/episode/1)
+- [Github - XState with React and Angular in Nx Workspace](https://github.com/nartc/nx-state-machine-todos-mvc) by [Chau Tran](https://nartc.me)
+- [Boost your React application's performance by XState](https://dev.to/alirezavalizade/boost-your-react-application-s-performance-by-xstate-42p8) by [Alireza Valizade](https://dev.to/alirezavalizade)
diff --git a/docs/guides/communication.md b/docs/guides/communication.md
@@ -423,7 +423,7 @@ data: (context, event) => ({
 
 ### Done Data
 
-When a child machine reaches its top-level [final state](./final.md), it can send data in the "done" event (e.g., `{ type: 'done.invoke.someId', data: ... })`). This "done data" is specified on the final state's `data` property:
+When a child machine reaches its top-level [final state](./final.md), it can send data in the "done" event (e.g., `{ type: 'done.invoke.someId', data: ... }`). This "done data" is specified on the final state's `data` property:
 
 ```js
 const secretMachine = Machine({
@@ -883,7 +883,7 @@ The `invoke` property is synonymous to the SCXML `<invoke>` element:
     invoke: {
       src: 'someSource',
       id: 'someID',
-      autoForward: true, // currently for machines only!  
+      autoForward: true, // currently for machines only!
       onDone: 'success',
       onError: 'failure'
     }

diff --git a/docs/guides/context.md b/docs/guides/context.md
@@ -39,8 +39,8 @@ const glassMachine = Machine(
       filling: {
         // Transient transition
         always: {
-            target: 'full',
-            cond: 'glassIsFull'
+          target: 'full',
+          cond: 'glassIsFull'
         },
         on: {
           FILL: {

diff --git a/docs/guides/delays.md b/docs/guides/delays.md
@@ -260,7 +260,7 @@ With the XState [interpreter](./interpretation.md), delayed actions will use the
 ```js
 import { interpret } from 'xstate';
 
-const service = interpret(lightDelayMachine).onTransition(state =>
+const service = interpret(lightDelayMachine).onTransition((state) =>
   console.log(state.value)
 );
 
@@ -281,7 +281,7 @@ import { SimulatedClock } from 'xstate/lib/SimulatedClock'; // >= 4.6.0
 
 const service = interpret(lightDelayMachine, {
   clock: new SimulatedClock()
-}).onTransition(state => console.log(state.value));
+}).onTransition((state) => console.log(state.value));
 
 service.start();
 // => 'green'

diff --git a/docs/guides/final.md b/docs/guides/final.md
@@ -130,6 +130,6 @@ Final states correspond to the SCXML spec: [https://www.w3.org/TR/scxml/#final](
 ## Notes
 
 - A final state node only indicates that its immediate parent is _done_. It does not affect the _done_ status of any higher parents, except with parallel state nodes, which are _done_ when all of its child compound state nodes are _done_.
-- A parallel state that reaches a final substate does not stop receiving events until all its siblings are done. The final substate can still be exited with an event. 
+- A parallel state that reaches a final substate does not stop receiving events until all its siblings are done. The final substate can still be exited with an event.
 - Final state nodes cannot have any children. They are atomic state nodes.
 - You can specify `entry` and `exit` actions on final state nodes.
diff --git a/docs/guides/states.md b/docs/guides/states.md
@@ -207,7 +207,8 @@ import { State, interpret } from 'xstate';
 import { myMachine } from '../path/to/myMachine';
 
 // Retrieving the state definition from localStorage, if localStorage is empty use machine initial state
-const stateDefinition = JSON.parse(localStorage.getItem('app-state')) || myMachine.initialState
+const stateDefinition =
+  JSON.parse(localStorage.getItem('app-state')) || myMachine.initialState;
 
 // Use State.create() to restore state from a plain object
 const previousState = State.create(stateDefinition);

diff --git a/docs/packages/core/index.md b/docs/packages/core/index.md
@@ -48,7 +48,7 @@ const toggleMachine = Machine({
 
 // Machine instance with internal state
 const toggleService = interpret(toggleMachine)
-  .onTransition(state => console.log(state.value))
+  .onTransition((state) => console.log(state.value))
   .start();
 // => 'inactive'
 
@@ -83,7 +83,7 @@ Read [📽 the slides](http://slides.com/davidkhourshid/finite-state-machines) (
 - [The World of Statecharts](https://statecharts.github.io/) by Erik Mogensen
 - [Pure UI](https://rauchg.com/2015/pure-ui) by Guillermo Rauch
 - [Pure UI Control](https://medium.com/@asolove/pure-ui-control-ac8d1be97a8d) by Adam Solove
-- [Spectrum - Statecharts Community](https://spectrum.chat/statecharts)
+- [Spectrum - Statecharts Community](https://spectrum.chat/statecharts) (For XState specific questions, please use the [GitHub Discussions](https://github.com/davidkpiano/xstate/discussions))
 
 ## Finite State Machines