{"_id":"@chadoakenfold/xstate-patched","name":"@chadoakenfold/xstate-patched","dist-tags":{"latest":"4.38.3-patched.1"},"versions":{"4.38.3-patched.1":{"name":"@chadoakenfold/xstate-patched","version":"4.38.3-patched.1","description":"Finite State Machines and Statecharts for the Modern Web.","main":"lib/index.js","module":"es/index.js","types":"lib/index.d.ts","sideEffects":false,"funding":{"type":"opencollective","url":"https://opencollective.com/xstate"},"keywords":["statechart","state machine","finite state machine","finite automata","scxml","state","interpreter"],"scripts":{"clean":"rm -rf lib es dist tsconfig.tsbuildinfo","test":"jest","build":"rollup -c","prepare":"echo 'Skipping prepare: package is prebuilt'"},"repository":{"type":"git","url":"git+https://github.com/statelyai/xstate.git"},"author":{"name":"David Khourshid","email":"davidkpiano@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/statelyai/xstate/issues"},"homepage":"https://github.com/statelyai/xstate/tree/main/packages/core#readme","devDependencies":{"@babel/cli":"^7.10.5","@babel/core":"^7.10.5","@rollup/plugin-babel":"^5.3.0","@scion-scxml/test-framework":"^2.0.15","babel-plugin-annotate-pure-calls":"^0.4.0","fast-glob":"^3.2.11","jest":"^26.6.3","jsdom":"^14.0.0","jsdom-global":"^3.0.2","lerna-alias":"3.0.3-0","pkg-up":"^3.1.0","rollup":"^2.69.0","rollup-plugin-filesize":"^6.2.1","rollup-plugin-replace":"^2.2.0","rollup-plugin-terser":"^5.1.2","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-uglify":"^6.0.2","rxjs":"^7.1.0","ts-jest":"^26.5.6","tslib":"^2.3.1","typescript":"^4.8.4","xml-js":"^1.6.11"},"_id":"@chadoakenfold/xstate-patched@4.38.3-patched.1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-2SaoiQD9wCvISNdrHVlS3fh5W9rzMVLhwFLxQYRfQJhvzZgC/TY52y+nGeLJ7b+KbPISc3NHIkj7gO3axODMbA==","shasum":"c650c1c58c4b27a9cdf0026a0ea3708a0b76c1db","tarball":"https://registry.npmjs.org/@chadoakenfold/xstate-patched/-/xstate-patched-4.38.3-patched.1.tgz","fileCount":128,"unpackedSize":794602,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD+LrLT7s13FOulE6rZkulcpwFJCp+Pkru16P6M/Sh8LgIhAIcbxNj+H1FcPu9aesQvinahBX2U850CHy+ZzrMwRRy4"}]},"_npmUser":{"name":"chadoakenfold","email":"web@oakenfold.ca"},"directories":{},"maintainers":[{"name":"chadoakenfold","email":"web@oakenfold.ca"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/xstate-patched_4.38.3-patched.1_1777517720119_0.5015581034248433"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-30T02:55:20.039Z","4.38.3-patched.1":"2026-04-30T02:55:20.349Z","modified":"2026-04-30T02:55:20.522Z"},"maintainers":[{"name":"chadoakenfold","email":"web@oakenfold.ca"}],"description":"Finite State Machines and Statecharts for the Modern Web.","homepage":"https://github.com/statelyai/xstate/tree/main/packages/core#readme","keywords":["statechart","state machine","finite state machine","finite automata","scxml","state","interpreter"],"repository":{"type":"git","url":"git+https://github.com/statelyai/xstate.git"},"author":{"name":"David Khourshid","email":"davidkpiano@gmail.com"},"bugs":{"url":"https://github.com/statelyai/xstate/issues"},"license":"MIT","readme":"<p align=\"center\">\n  <a href=\"https://xstate.js.org\">\n  <br />\n  <img src=\"https://i.imgur.com/FshbFOv.png\" alt=\"XState\" width=\"100\"/>\n  <br />\n    <sub><strong>JavaScript state machines and statecharts</strong></sub>\n  <br />\n  <br />\n  </a>\n</p>\n\n[![npm version](https://badge.fury.io/js/xstate.svg)](https://badge.fury.io/js/xstate)\n[![Statecharts gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/statecharts/statecharts)\n<img src=\"https://opencollective.com/xstate/tiers/backer/badge.svg?label=sponsors&color=brightgreen\" />\n\nJavaScript 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.\n\n📖 [Read the documentation](https://xstate.js.org/docs)\n📑 Adheres to the [SCXML specification](https://www.w3.org/TR/scxml/).\n\n## Packages\n\n- 🤖 `xstate` - Core finite state machine and statecharts library + interpreter\n- [🔬 `@xstate/fsm`](https://github.com/statelyai/xstate/tree/main/packages/xstate-fsm) - Minimal finite state machine library\n- [📉 `@xstate/graph`](https://github.com/statelyai/xstate/tree/main/packages/xstate-graph) - Graph traversal utilities for XState\n- [⚛️ `@xstate/react`](https://github.com/statelyai/xstate/tree/main/packages/xstate-react) - React hooks and utilities for using XState in React applications\n- [✅ `@xstate/test`](https://github.com/statelyai/xstate/tree/main/packages/xstate-test) - Model-based testing utilities for XState\n\n## Super quick start\n\n```bash\nnpm install xstate\n```\n\n```js\nimport { createMachine, interpret } from 'xstate';\n\n// Stateless machine definition\n// machine.transition(...) is a pure function used by the interpreter.\nconst toggleMachine = createMachine({\n  id: 'toggle',\n  initial: 'inactive',\n  states: {\n    inactive: { on: { TOGGLE: 'active' } },\n    active: { on: { TOGGLE: 'inactive' } }\n  }\n});\n\n// Machine instance with internal state\nconst toggleService = interpret(toggleMachine)\n  .onTransition((state) => console.log(state.value))\n  .start();\n// => 'inactive'\n\ntoggleService.send('TOGGLE');\n// => 'active'\n\ntoggleService.send('TOGGLE');\n// => 'inactive'\n```\n\n- [Visualizer](#visualizer)\n- [Why? (info about statecharts)](#why)\n- [Installation](https://xstate.js.org/docs/guides/installation.html)\n- [Finite State Machines](#finite-state-machines)\n- [Hierarchical (Nested) State Machines](#hierarchical--nested--state-machines)\n- [Parallel State Machines](#parallel-state-machines)\n- [History States](#history-states)\n\n## Visualizer\n\n**[Visualize, simulate, and share your statecharts in XState Viz!](https://stately.ai/viz)**\n\n<a href=\"https://stately.ai/viz\" title=\"xstate visualizer\"><img src=\"https://i.imgur.com/3pEB0B3.png\" alt=\"xstate visualizer\" width=\"300\" /></a>\n\n## Why?\n\nStatecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the _behavior_ of your application, from the individual components to the overall application logic.\n\nRead [📽 the slides](http://slides.com/davidkhourshid/finite-state-machines) ([🎥 video](https://www.youtube.com/watch?v=VU1NKX6Qkxc)) or check out these resources for learning about the importance of finite state machines and statecharts in user interfaces:\n\n- [Statecharts - A Visual Formalism for Complex Systems](https://www.sciencedirect.com/science/article/pii/0167642387900359/pdf) by David Harel\n- [The World of Statecharts](https://statecharts.github.io/) by Erik Mogensen\n- [Pure UI](https://rauchg.com/2015/pure-ui) by Guillermo Rauch\n- [Pure UI Control](https://medium.com/@asolove/pure-ui-control-ac8d1be97a8d) by Adam Solove\n- [Stately Discord](https://discord.gg/xstate) chat about anything related to statecharts and XState\n- [GitHub Discussions](https://github.com/statelyai/xstate/discussions)\n\n## Finite State Machines\n\n<img src=\"https://imgur.com/rqqmkJh.png\" alt=\"Light Machine\" width=\"300\" />\n\n```js\nimport { createMachine } from 'xstate';\n\nconst lightMachine = createMachine({\n  id: 'light',\n  initial: 'green',\n  states: {\n    green: {\n      on: {\n        TIMER: 'yellow'\n      }\n    },\n    yellow: {\n      on: {\n        TIMER: 'red'\n      }\n    },\n    red: {\n      on: {\n        TIMER: 'green'\n      }\n    }\n  }\n});\n\nconst currentState = 'green';\n\nconst nextState = lightMachine.transition(currentState, 'TIMER').value;\n\n// => 'yellow'\n```\n\n## Hierarchical (Nested) State Machines\n\n<img src=\"https://imgur.com/GDZAeB9.png\" alt=\"Hierarchical Light Machine\" width=\"300\" />\n\n```js\nimport { createMachine } from 'xstate';\n\nconst pedestrianStates = {\n  initial: 'walk',\n  states: {\n    walk: {\n      on: {\n        PED_TIMER: 'wait'\n      }\n    },\n    wait: {\n      on: {\n        PED_TIMER: 'stop'\n      }\n    },\n    stop: {}\n  }\n};\n\nconst lightMachine = createMachine({\n  id: 'light',\n  initial: 'green',\n  states: {\n    green: {\n      on: {\n        TIMER: 'yellow'\n      }\n    },\n    yellow: {\n      on: {\n        TIMER: 'red'\n      }\n    },\n    red: {\n      on: {\n        TIMER: 'green'\n      },\n      ...pedestrianStates\n    }\n  }\n});\n\nconst currentState = 'yellow';\n\nconst nextState = lightMachine.transition(currentState, 'TIMER').value;\n// => {\n//   red: 'walk'\n// }\n\nlightMachine.transition('red.walk', 'PED_TIMER').value;\n// => {\n//   red: 'wait'\n// }\n```\n\n**Object notation for hierarchical states:**\n\n```js\n// ...\nconst waitState = lightMachine.transition({ red: 'walk' }, 'PED_TIMER').value;\n\n// => { red: 'wait' }\n\nlightMachine.transition(waitState, 'PED_TIMER').value;\n\n// => { red: 'stop' }\n\nlightMachine.transition({ red: 'stop' }, 'TIMER').value;\n\n// => 'green'\n```\n\n## Parallel State Machines\n\n<img src=\"https://imgur.com/GKd4HwR.png\" width=\"300\" alt=\"Parallel state machine\" />\n\n```js\nconst wordMachine = createMachine({\n  id: 'word',\n  type: 'parallel',\n  states: {\n    bold: {\n      initial: 'off',\n      states: {\n        on: {\n          on: { TOGGLE_BOLD: 'off' }\n        },\n        off: {\n          on: { TOGGLE_BOLD: 'on' }\n        }\n      }\n    },\n    underline: {\n      initial: 'off',\n      states: {\n        on: {\n          on: { TOGGLE_UNDERLINE: 'off' }\n        },\n        off: {\n          on: { TOGGLE_UNDERLINE: 'on' }\n        }\n      }\n    },\n    italics: {\n      initial: 'off',\n      states: {\n        on: {\n          on: { TOGGLE_ITALICS: 'off' }\n        },\n        off: {\n          on: { TOGGLE_ITALICS: 'on' }\n        }\n      }\n    },\n    list: {\n      initial: 'none',\n      states: {\n        none: {\n          on: { BULLETS: 'bullets', NUMBERS: 'numbers' }\n        },\n        bullets: {\n          on: { NONE: 'none', NUMBERS: 'numbers' }\n        },\n        numbers: {\n          on: { BULLETS: 'bullets', NONE: 'none' }\n        }\n      }\n    }\n  }\n});\n\nconst boldState = wordMachine.transition('bold.off', 'TOGGLE_BOLD').value;\n\n// {\n//   bold: 'on',\n//   italics: 'off',\n//   underline: 'off',\n//   list: 'none'\n// }\n\nconst nextState = wordMachine.transition(\n  {\n    bold: 'off',\n    italics: 'off',\n    underline: 'on',\n    list: 'bullets'\n  },\n  'TOGGLE_ITALICS'\n).value;\n\n// {\n//   bold: 'off',\n//   italics: 'on',\n//   underline: 'on',\n//   list: 'bullets'\n// }\n```\n\n## History States\n\n<img src=\"https://imgur.com/I4QsQsz.png\" width=\"300\" alt=\"Machine with history state\" />\n\n```js\nconst paymentMachine = createMachine({\n  id: 'payment',\n  initial: 'method',\n  states: {\n    method: {\n      initial: 'cash',\n      states: {\n        cash: { on: { SWITCH_CHECK: 'check' } },\n        check: { on: { SWITCH_CASH: 'cash' } },\n        hist: { type: 'history' }\n      },\n      on: { NEXT: 'review' }\n    },\n    review: {\n      on: { PREVIOUS: 'method.hist' }\n    }\n  }\n});\n\nconst checkState = paymentMachine.transition('method.cash', 'SWITCH_CHECK');\n\n// => State {\n//   value: { method: 'check' },\n//   history: State { ... }\n// }\n\nconst reviewState = paymentMachine.transition(checkState, 'NEXT');\n\n// => State {\n//   value: 'review',\n//   history: State { ... }\n// }\n\nconst previousState = paymentMachine.transition(reviewState, 'PREVIOUS').value;\n\n// => { method: 'check' }\n```\n\n## Sponsors\n\nHuge thanks to the following companies for sponsoring `xstate`. You can sponsor further `xstate` development [on OpenCollective](https://opencollective.com/xstate).\n\n<a href=\"https://tipe.io\" title=\"Tipe.io\"><img src=\"https://cdn.tipe.io/tipe/tipe-logo.svg?w=240\" style=\"background:#613DEF\" /></a>\n<a href=\"https://webflow.com\" title=\"Webflow\"><img src=\"https://uploads-ssl.webflow.com/583347ca8f6c7ee058111b3b/5b03bde0971fdd75d75b5591_webflow.png\" height=\"100\" /></a>\n","readmeFilename":"README.md","_rev":"1-54a2508423edc326283d4d049cd02c62"}