{"id":15375985,"url":"https://github.com/thepassle/atom","last_synced_at":"2025-08-28T06:18:41.788Z","repository":{"id":54939387,"uuid":"321128911","full_name":"thepassle/atom","owner":"thepassle","description":"A flexible state manager","archived":false,"fork":false,"pushed_at":"2021-01-28T13:00:02.000Z","size":1311,"stargazers_count":17,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-01T13:31:46.761Z","etag":null,"topics":["lit-element","lit-html","state","state-management","webcomponents"],"latest_commit_sha":null,"homepage":"https://klaxon-atom.netlify.app/","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/thepassle.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":"2020-12-13T18:11:41.000Z","updated_at":"2024-04-04T19:42:19.000Z","dependencies_parsed_at":"2022-08-14T07:10:12.865Z","dependency_job_id":null,"html_url":"https://github.com/thepassle/atom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thepassle/atom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fatom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fatom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fatom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fatom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thepassle","download_url":"https://codeload.github.com/thepassle/atom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fatom/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272452898,"owners_count":24937467,"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","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["lit-element","lit-html","state","state-management","webcomponents"],"created_at":"2024-10-01T14:05:28.553Z","updated_at":"2025-08-28T06:18:41.767Z","avatar_url":"https://github.com/thepassle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Atom\n\nA flexible state manager\n\n## Quickstart 👇\n\n### Install\n\nInstall with npm:\n\n```bash\nnpm i -S @klaxon/atom\n```\n\n### Atoms\n\nAtoms represent small pieces of reusable state, and maintain their own internal store. Whenever an update is triggered (by calling the setter function of that Atom), the Atom store dispatches an event. All components that are subscribed to that Atom will get the event, trigger an update, and cause only the relevant components to update and rerender.\n\n```js\nimport { atom } from '@klaxon/atom';\n\nconst [count, setCount] = atom({\n  key: 'count',\n  default: 1\n});\n\nconsole.log(count.getState()); // 1\n\nsetCount(2);\n\nsetCount(old =\u003e old + 1);\n\nconsole.log(count.getState()); // 3\n```\n\n### Selectors\n\nSelectors _don't_ maintain their own internal store, instead they are dependent on Atoms. Whenever an Atom changes, any Selector that depends on that Atom will be notified, and execute the Selectors `get` function to return a new value. Selectors can be thought of as pieces of _derived_ state, or _computed_ state.\n\n```js\nimport { atom, selector } from '@klaxon/atom';\n\nconst [count, setCount] = atom({\n  key: 'count',\n  default: 1\n});\n\nconst doubleCount = selector({\n  key: 'doubleCount',\n  get: ({getAtom}) =\u003e {\n    const originalCount = getAtom(count);\n    return originalCount * 2;\n  }\n});\n```\n\n### Basic usage with LitElement\n\nYou can use Atoms by registering them to a component in the static `atoms` getter, this will subscribe the component to updates for that Atom. Whenever an update for the Atom has occured, your component will set the new value of the Atom on the component, and cause the element to update.\n\n```js\n  import { LitElement, html } from \"lit-element\";\n  import { LitAtom, atom } from \"@klaxon/atom\";\n\n  const [count, setCount] = atom({\n    key: 'count',\n    default: 0\n  });\n\n  export class MyCounter extends LitAtom(LitElement) {\n    static atoms = [count];\n\n    render() {\n      return html`\n        \u003cbutton @click=\"${() =\u003e setCount(old =\u003e old - 1)}\"\u003e-\u003c/button\u003e\n        \u003cspan\u003e${this.count}\u003c/span\u003e\n        \u003cbutton @click=\"${() =\u003e setCount(old =\u003e old + 1)}\"\u003e+\u003c/button\u003e\n      `;\n    }\n  }\n\n  customElements.define(\"my-counter\", MyCounter);\n```\n\n### Todo app demo\n\n```js\n  import { LitElement, html } from 'lit-element';\n  import { LitAtom, atom, selector } from '@klaxon/atom';\n\n  export const [todoListFilter, setTodoListFilter] = atom({\n    key: 'todoListFilter',\n    default: 'Show All',\n  });\n\n  export const [todoList, setTodoList] = atom({\n    key: 'todoList',\n    default: [\n      {text: 'not done', isComplete: false, id: 0},\n      {text: 'done', isComplete: true, id: 1},\n    ]\n  });\n\n  const filteredTodoList = selector({\n    key: 'filteredTodoList',\n    get: ({getAtom}) =\u003e {\n      const filter = getAtom(todoListFilter);\n      const list = getAtom(todoList);\n\n      switch (filter) {\n        case 'Show Completed':\n          return list.filter((item) =\u003e item.isComplete);\n        case 'Show Uncompleted':\n          return list.filter((item) =\u003e !item.isComplete);\n        default:\n          return list;\n      }\n    },\n  });\n\n  class TodoList extends LitAtom(LitElement) {\n    static atoms = [todoListFilter];\n    static selectors = [filteredTodoList];\n    \n    render() {\n      return html`\n        \u003cdiv\u003e\n          \u003ch1\u003e${this.todoListFilter}\u003c/h1\u003e\n          \u003cbutton @click=${() =\u003e setTodoListFilter(\"Show All\")}\u003eshow all\u003c/button\u003e\n          \u003cbutton @click=${() =\u003e setTodoListFilter(\"Show Completed\")}\u003eshow completed\u003c/button\u003e\n          \u003cbutton @click=${() =\u003e setTodoListFilter(\"Show Uncompleted\")}\u003eshow uncompleted\u003c/button\u003e\n        \u003c/div\u003e\n        \u003cbr/\u003e\n        \u003cdiv\u003e\n          \u003cbutton @click=${() =\u003e setTodoList((oldTodoList) =\u003e [...oldTodoList, {text: 'New todo', isComplete: false, id: 1}])}\u003eadd\u003c/button\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003cul\u003e\n            ${this.filteredTodoList?.map(todo =\u003e html`\u003cli\u003e${todo.text}\u003c/li\u003e`)}\n          \u003c/ul\u003e\n        \u003c/div\u003e\n      `;\n    }\n  }\n\n  customElements.define('todo-app', TodoList);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Fatom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthepassle%2Fatom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Fatom/lists"}