{"id":13511317,"url":"https://github.com/peterluhub/xsm","last_synced_at":"2025-04-09T18:24:25.792Z","repository":{"id":34969812,"uuid":"192124513","full_name":"peterluhub/xsm","owner":"peterluhub","description":"State Management made eXtraordinarily simple and effective for Angular, React, and Vue","archived":false,"fork":false,"pushed_at":"2023-01-04T00:55:05.000Z","size":1502,"stargazers_count":138,"open_issues_count":18,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T12:43:32.836Z","etag":null,"topics":["angular","mobx","ngrx","react","redux","state-management","svelte","vue","vuex"],"latest_commit_sha":null,"homepage":"","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/peterluhub.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":"2019-06-15T21:15:42.000Z","updated_at":"2024-01-04T16:34:57.000Z","dependencies_parsed_at":"2023-01-15T11:12:52.613Z","dependency_job_id":null,"html_url":"https://github.com/peterluhub/xsm","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/peterluhub%2Fxsm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterluhub%2Fxsm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterluhub%2Fxsm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterluhub%2Fxsm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterluhub","download_url":"https://codeload.github.com/peterluhub/xsm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248086279,"owners_count":21045313,"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":["angular","mobx","ngrx","react","redux","state-management","svelte","vue","vuex"],"created_at":"2024-08-01T03:00:47.229Z","updated_at":"2025-04-09T18:24:25.766Z","avatar_url":"https://github.com/peterluhub.png","language":"JavaScript","funding_links":[],"categories":["cross framework"],"sub_categories":[],"readme":" ![XSM](/docs/xsmlogo.png)\n\u003cp\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=xsm\"\u003e\n    \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/xsm\" alt=\"Minified + gzip package size for xsm in KB\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/peterluhub/xsm\"\u003e\n    \u003cimg src=\"https://travis-ci.com/peterluhub/xsm.svg?branch=master\" alt=\"Build Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/xsm\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/xsm.svg\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://packagephobia.now.sh/result?p=xsm\"\u003e\n    \u003cimg src=\"https://packagephobia.now.sh/badge?p=xsm\" alt=\"install size\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/peterluhub/usm/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e XSM - State Management made eXtraordinarily simple and effective for Angular, React, Vue, and Svelte.\n\n### 🏠 [Homepage](https://github.com/peterluhub/usm)\n\n### Demos\n[Angular](https://codesandbox.io/s/angular-xsm-demo-1j9j0)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; [React](https://codesandbox.io/s/xsm-react-3v3fg)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; [Svelte](https://codesandbox.io/s/svelte-xsm-x4o6r)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; [Vue](https://codesandbox.io/s/vuexsmdemo-2152h)\n\n[Realworld Example App with react-xsm](https://codesandbox.io/s/realworld-example-app-with-react-xsm-xelx1)\n### Highlights\n\n  -   Incredibly easy to use, developer friendly and minimum learning curve\n  -   Reactive, unintrusive\n  -   Automatic re-rendering and state data removal, efficient memory management\n  -   Super simple async handling\n  -   Same API for Angular, React, Vue, and Svelte, code reuse, framework agnostic\n  -   Small size for fast download, no framework specific plugins needed.\n\n\u003ctable border=\"0\"\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eLibrary\u003c/th\u003e\n            \u003cth\u003eMinzipped Size\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eXSM\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/xsm\" alt=\"Minified + gzip package size for xsm in KB\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eRedux\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/redux\" alt=\"Minified + gzip package size for redux in KB\" class=\"badge--in-table\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ereact-Redux\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/react-redux\" alt=\"Minified + gzip package size for react-redux in KB\" class=\"badge--in-table\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emobx\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/mobx\" alt=\"Minified + gzip package size for mobx in KB\" class=\"badge--in-table\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emobx-react\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/mobx-react\" alt=\"Minified + gzip package size for mobx-react in KB\" class=\"badge--in-table\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eVuex\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/vuex\" alt=\"Minified + gzip package size for vuex in KB\" class=\"badge--in-table\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eRXJS\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/rxjs\" alt=\"Minified + gzip package size for rxjs in KB\" class=\"badge--in-table\"\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003ctbody\u003e\n\u003c/table\u003e\n\n### Benchmark Results\nXSM is performant according to Stefan Krause's [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark).  As shown below,\n ![Benchmarks](/docs/jfb-benchmarks.png).\n\nThe code for the benchmarks is in [this repo](https://github.com/peterluhub/jfb).\n\n### How-to's\n\n##### Install\n```sh\nnpm install xsm\n```\n\n##### Usage in Brief\n\n-   Tell XSM which framework to use\n\n  ```javascript\n    setup({'framework': 'React'})\n  ```\n\n-   Bind the component state to XSM\n\n  ```javascript\n    bindState(this, {key: val, key2: val2, ...})\n  ```\n\n-   When you are ready to update the state(sync or async)\n\n  ```javascript\n    set('key', val)\n  ```\n\nComponent will be re-rendered automatically.\n\n##### Debug and Trace\n\nBoth debug and trace can be selectively turn on and off at any point\n\n  ```javascript\n  setup({debug: true})  //debug on\n  setup({debug: false}) //debug off\n  setup({trace: true})  //trace on\n  setup({trace: false}) //trace off\n  ```\n\n### Why XSM\n\nTo answer why, let's start by answering another question, what is XSM?  It consists of a global store and the machinary to re-render the component when the state is updated.  The store is just a javascript object with key and value pairs.  By binding the instance reference, *this*, to the store, each component can react to the changes of the store whether it is re-render or unmount.  It is really *this* simple, no need to use HOC, provider, reducer, decorator, observer, action, dispatcher, etc.  Hence, all the three most popular frameworks work the same way in XSM and that's why we can keep the code size very small and support the three frameworks without framework specific modules.  Svelte is very different from other frameworks.  It is *this* less.  The state object becomes *this*. \n\n### API\n\n**bindState** - binds a component's *this* and optionally state to the store.  The state is an object with key and value pairs. For Svelte, the value is a fuction that wraps the assignment of the value.\n```javascript\n bindState(this, state) //Angular, React, Vue\n bindState(state) //Svelte is this less, state is {key: val =\u003e stateVariable = val}\n```\n\n**unbindState** - If a component is mounted and unmounted repeatedly, you need to unbind the component state from the store when the component unmounts to prevent memory leak.  This is needed for Svelte only.  The unbinding is done aotumatically with the other frameworks by XSM.\n```javascript\n unbindState(state) //Svelte only\n```\n\n**get** - gets the value of a given key from the store.\n```javascript\n get(key)\n```\n\n**set** - updates the store with the value for a given key and re-renders the component(s).\n```javascript\n set(key, value)\n```\n\n**setMany** - updates the store for the given key and value pairs and re-renders the component(s).\n```javascript\n setMany({key1: value1, key2, value2, ...})\n```\n\n**setup** - It takes an object as an argument and is used for telling XSM which framework you app uses and optionally for binding the state of all components of the app to the store as well as turning the debug and trace on and off.\n```javascript\n setup(\n    {framework: frameworkValue, \n     bindings: {ComponentName: {key1: value1,...},\n             ComponentName1: {key1: value1,...},\n            ...},\n     debug: true/false,\n     trace: true/false\n    }\n )\n```\n-   frameworkValue: Angular, React, Vue, or Svelte\n-   ComponentName: It is the class name for React and Angular.  It is the registered component name for Vue.  Does not apply to Svelte.\n-   bindings: It serves two purposes.  One is to bind the state of each component to the store and you don't need to binState in this case.  Another is to tell XSM that which piece of data is shared by more than one components and the shared data will not be deleted even if the the components are unmounted.  Does not apply to Svelte.\n\n**setcfg** - It is an alias of *setup*.\n\n\n\n## User Guide\n\nTo use XSM to manage you app state, here are the steps to follow:\n\n- Use *setup* to bind XSM to a framework.  Currently, XSM supports Angular, Reatc, Vue, and Svelte.\n- Bind the component state to the store with *bindState* to enble the auto re-rendering when the state is updated.  The value of each bound key can be accessed in the component with *this.keyname*.  For example, you want to bind a key and value pair of {title: 'XSM'} to a component,\n- For Angular and React, it is done in the constructor.\n  ```javascript\n  constructor() {\n      super()\n      bindState(this, {title: 'XSM'})\n  }\n  ```\n- For Vue, it can be done in the *created* life cycle hook.\n  ```javascript\n  created() {\n      bindState(this, {title: 'XSM'})\n  }\n  ```\n- For Svelte, it can be done inside the script tag of a component.\n  ```javascript\n  let title;\n  let bindings = {title: val =\u003e title = val};\n  bindState(bindings);\n  //if needed\n  onDestroy(() =\u003e unbindState(bindings));\n  ```\n\n- When it's time to update the state, use *set* when and where your state data is available whether it's in the await function, promise.then callback, plain old callback, or anywhere in your code path. XSM does not get in the way.\n\n- Besides the demos, you can find more code examples in [this repository](https://github.com/peterluhub/xsm-code-examples).  A realworld example(implementing the [Realworld Example Specs](https://github.com/gothinkster/realworld) using XSM with React is in [this repo](https://github.com/peterluhub/realworld-example).  Angular and Vue verions will be implemented soon.\n\n## Author\n\n👤 **Peter Lu**\n\n* Github: [@peterluhub](https://github.com/peterluhub)\n\n### Show your support\n\nGive a ⭐️ if this project helped you !\n\n### 📝 License\n\nThis project is [MIT](https://github.com/peterluhub/usm/blob/master/LICENSE) licensed.\n\n***\n_This README was originally generated with [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterluhub%2Fxsm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterluhub%2Fxsm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterluhub%2Fxsm/lists"}