{"id":20595582,"url":"https://github.com/johnpaulada/unlimited-machine-works","last_synced_at":"2025-07-07T00:08:34.117Z","repository":{"id":57386694,"uuid":"118440190","full_name":"johnpaulada/unlimited-machine-works","owner":"johnpaulada","description":"🔥 The unlimited working 1KB state machine library for the web!","archived":false,"fork":false,"pushed_at":"2018-08-23T11:51:38.000Z","size":2055,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-11T11:36:39.636Z","etag":null,"topics":["javascript","javascript-library","state-machine","state-management"],"latest_commit_sha":null,"homepage":"https://kutt.it/umw","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnpaulada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-22T10:10:22.000Z","updated_at":"2023-04-11T15:22:13.000Z","dependencies_parsed_at":"2022-09-06T01:30:45.117Z","dependency_job_id":null,"html_url":"https://github.com/johnpaulada/unlimited-machine-works","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpaulada%2Funlimited-machine-works","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpaulada%2Funlimited-machine-works/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpaulada%2Funlimited-machine-works/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpaulada%2Funlimited-machine-works/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnpaulada","download_url":"https://codeload.github.com/johnpaulada/unlimited-machine-works/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240131746,"owners_count":19752727,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-library","state-machine","state-management"],"created_at":"2024-11-16T08:13:34.125Z","updated_at":"2025-03-06T15:15:33.893Z","avatar_url":"https://github.com/johnpaulada.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e⚔ Unlimited \u003cstrike\u003eBlade\u003c/strike\u003e Machine Works ⚔\u003c/h1\u003e\n  \u003cp\u003eThe unlimited working 1KB state machine library for the web!\u003c/p\u003e\n  \u003cp\u003e\u003cstrong\u003eWork in Progress\u003c/strong\u003e - Use at your own risk! LOL\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"http://forthebadge.com\"\u003e\n    \u003cimg src=\"http://forthebadge.com/images/badges/fuck-it-ship-it.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"http://forthebadge.com\"\u003e\n    \u003cimg src=\"http://forthebadge.com/images/badges/built-with-love.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"http://forthebadge.com\"\u003e\n    \u003cimg src=\"http://forthebadge.com/images/badges/uses-js.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://deepscan.io/dashboard/#view=project\u0026pid=1706\u0026bid=7351\"\u003e\n    \u003cimg src=\"https://deepscan.io/api/projects/1706/branches/7351/badge/grade.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codebeat.co/projects/github-com-johnpaulada-unlimited-machine-works-master\"\u003e\n    \u003cimg alt=\"codebeat badge\" src=\"https://codebeat.co/badges/6f237813-7087-42b8-9736-514e569b950b\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.jsdelivr.com/package/npm/unlimited-machine-works\"\u003e\n    \u003cimg alt=\"JSDelivr\" src=\"https://data.jsdelivr.com/v1/package/npm/unlimited-machine-works/badge\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/unlimited-machine-works\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/unlimited-machine-works.svg?style=flat-square\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ♥ by \u003ca href=\"https://github.com/johnpaulada\"\u003eJohn Paul Ada\u003c/a\u003e.\u003c/sub\u003e\n\u003c/div\u003e\n\n## Table of Contents\n- [Rationale](#rationale)\n- [How to import](#how-to-import)\n- [Quickstart](#quickstart)\n- [Roadmap](#roadmap)\n- [Inspired by](#inspired-by)\n- [License](#license)\n\n## Rationale\nWhen you think about it, web applications can be modeled as state machines. You should only jump from one state to another and not magically end up in another in an unpredictable manner. You should only make transitions that are possible for your current state. Modeling your web application as a state machine makes managing the flow of your application much easier as it makes your application more predictable. This is the main driving force of building this library.\n\n## How to import\n### Import on the browser\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/unlimited-machine-works@1.1.5/umw.min.js\" async\u003e\u003c/script\u003e\n```\n### Import on Node\n```js\nconst UMW = require('unlimited-machine-works')\n```\n\n## Quickstart\n- [Creating a machine](#creating-a-machine)\n  - [Creating a machine explained](#creating-a-machine-explained)\n- [Checking what actions you can do](#checking-what-actions-you-can-do)\n- [Doing a transition](#doing-a-transition)\n- [Reacting to transitions](#reacting-to-transitions)\n\n### Creating a machine\nYou can use the `summon` or `make` methods to create a machine.\n```js\nconst machine = UMW.summon({name: 'Attack Helicopter', speed: 0}, {\n  'INITIAL': {\n    'MOVE': {\n      to: 'MOVING',\n      action: (data, args) =\u003e {\n        return Object.assign({}, data, {speed: 1})\n      }\n    }\n  },\n  'MOVING': {\n    'ACCELERATE': {\n      to: 'MOVING',\n      action: (data, args) =\u003e {\n        return Object.assign({}, data, {speed: data.speed + 1})\n      }\n    },\n    'ACCELERATE_BY': {\n      to: 'MOVING',\n      action: (data, args) =\u003e {\n        return Object.assign({}, data, {speed: data.speed + args.speed})\n      }\n    },\n    'STOP': {\n      to: 'INITIAL',\n      action: (data, args) =\u003e {\n        return Object.assign({}, data, {speed: 0})\n      }\n    }\n  }\n})\n```\n#### Creating a Machine Explained\nThe first argument of creating a machine is an object that contains the initial data that you want to manage alongside your state and transitions. The second argument is optional if you don't want to add states upon machine creation. The second argument allows you to add states and transitions upon creating the machine.\n\nTake a look at this snippet from the above code:\n```js\n'INITIAL': {\n  'MOVE': {\n    to: 'MOVING',\n    action: (data, args) =\u003e {\n      return Object.assign({}, state, {speed: 1})\n    }\n  }\n}\n```\nThe `INITIAL` key is a state. Each state should have at least transition or else you won't be able to state. In this case, `MOVE` is the transition of the `INITIAL` state. The `to` key of a transition specifies to which state to go to after the transition. The `action` key of a transition should be a function that accepts the current data and the arguments given when the transition is called. The return value will replace the `data` that was originally given.\n\n### Checking what transitions you can do\nYou can use the `actions` method of your machine to check. This will return the transition names as an array of strings.\n```js\nconsole.log(machine.actions); // [ 'MOVE' ]\n```\n\n### Doing a transition\nYou can use the `do` method of your machine to execute a transition.\n```js\nmachine.do('MOVE')\n```\nIf the transition defined requires additional arguments, you can add an object with the arguments as the second argument.\n```js\nmachine.do('ACCELERATE_BY', {speed: 4})\n```\n`speed` can be accessed from the `args` object. Check the snippet above.\n\n### Reacting to transitions\nYou can react to transitions by adding a subscriber to the machine using the `addSubscriber` method. The method takes a function which receives the new state and data after the transition. You can then do things like rendering elements in this function.\n\nThis piece of code will log the current speed data everytime a transition occurs.\n```js\nmachine.addSubscriber((state, data) =\u003e {\n  console.log(`Speed: ${data.speed}`)\n})\n```\n\n## Graphics Credits\n\nLogo by my sister Jade Ada ([@blondiewiththebadhair](https://www.instagram.com/blondiewiththebadhair/)).\n\n### Other Icons\n\u003cdiv\u003eIcons made by \u003ca href=\"http://www.freepik.com\" title=\"Freepik\"\u003eFreepik\u003c/a\u003e from \u003ca href=\"https://www.flaticon.com/\" title=\"Flaticon\"\u003ewww.flaticon.com\u003c/a\u003e is licensed by \u003ca href=\"http://creativecommons.org/licenses/by/3.0/\" title=\"Creative Commons BY 3.0\" target=\"_blank\"\u003eCC 3.0 BY\u003c/a\u003e\u003c/div\u003e\n\n## Roadmap\n- [x] Create [react-umw](https://github.com/johnpaulada/react-umw)\n- [x] Using asynchronous functions for subscribers and other things\n- [ ] Using Proxy objects to detect change\n- [ ] Data diffing\n- [ ] Adding `summon()` flag for verbose errors\n- [ ] Adding subscribers as a part of the spec\n- [ ] Move `addSubscribers()` in to an *Adding Subscribers Dynamically* section\n- [ ] Add tests\n- [ ] Add status badges\n- [ ] Add Flow\n- [ ] Add visualization\n\n## Inspired By\n- Stent\n- Hyperapp\n\n## License\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpaulada%2Funlimited-machine-works","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnpaulada%2Funlimited-machine-works","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpaulada%2Funlimited-machine-works/lists"}