{"id":13901373,"url":"https://github.com/heluxjs/helux","last_synced_at":"2025-05-14T00:07:29.620Z","repository":{"id":41570999,"uuid":"186519945","full_name":"heluxjs/helux","owner":"heluxjs","description":"A reactive atomic state engine for React(including React 18) and all React like, carrying dependency collection feature, supporting fine-grained updates.","archived":false,"fork":false,"pushed_at":"2025-05-08T10:15:14.000Z","size":24063,"stargazers_count":1373,"open_issues_count":8,"forks_count":70,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-08T10:15:20.023Z","etag":null,"topics":["atom","better-redux","better-than-recoil","concent","dependency-collection","fine-grained-responsive-updates","helux","high-performance","immutable","mutable","proxy","react","reactive","replace-recoil","signal","state","state-management"],"latest_commit_sha":null,"homepage":"https://heluxjs.github.io/helux/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heluxjs.png","metadata":{"files":{"readme":"README.en.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://github.com/heluxjs/helux/issues/141","https://tnfe.gtimg.com/image/5a2u6arzpo_1705217036205.png"]}},"created_at":"2019-05-14T01:14:51.000Z","updated_at":"2025-05-08T10:15:18.000Z","dependencies_parsed_at":"2023-11-20T06:51:30.496Z","dependency_job_id":"f7dbad79-a846-4486-9ba9-210d2c24240a","html_url":"https://github.com/heluxjs/helux","commit_stats":{"total_commits":1707,"total_committers":8,"mean_commits":213.375,"dds":0.4182776801405975,"last_synced_commit":"e35ede8eb507c1c9e9133c818bd02b4b848661cb"},"previous_names":["concentjs/concent"],"tags_count":339,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heluxjs%2Fhelux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heluxjs%2Fhelux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heluxjs%2Fhelux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heluxjs%2Fhelux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heluxjs","download_url":"https://codeload.github.com/heluxjs/helux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253645441,"owners_count":21941315,"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":["atom","better-redux","better-than-recoil","concent","dependency-collection","fine-grained-responsive-updates","helux","high-performance","immutable","mutable","proxy","react","reactive","replace-recoil","signal","state","state-management"],"created_at":"2024-08-06T21:01:17.698Z","updated_at":"2025-05-14T00:07:29.595Z","avatar_url":"https://github.com/heluxjs.png","language":"TypeScript","readme":"[简体中文](./README.md) | English\n\n# Introducing helux\n\n[helux](https://github.com/heluxjs/helux) is a state engine integrates `atom`, `signal`,`derive`, `watch` and `dep tracking`, supports fine-grained responsive updates, it is compatible with all react like libs (including React 18)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://heluxjs.github.io/helux\" target=\"__blink\"\u003e\n    \u003cimg width=\"680px\" src=\"https://tnfe.gtimg.com/image/fp78ya1et7_1703769973306.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n- [Doc](https://heluxjs.github.io/helux)\n- [Playground](https://heluxjs.github.io/helux/playground)\n- [Helux-react-starter](https://codesandbox.io/p/sandbox/helux-react-starter-ts-539scq)\n- [Helux-preact-starter](https://codesandbox.io/p/sandbox/helux-preact-starter-dnyzpy)\n- [Helux-nextjs-starter](https://github.com/heluxjs/helux-nextjs-starter)\n\nIt has the following features:\n\n- Developed based on the fastest immutable js library [limu](https://github.com/tnfe/limu), with super performance\n- Atom supports dependency collection, which means that atom does not need to be split into details. Atom can be equivalent to model, which is naturally friendly to `DDD` domain-driven design.\n- Built-in signal response mechanism, which can achieve 0 hook encoding + DOM granular update\n- Built-in loading module, which can manage the running status and error capture of all asynchronous tasks\n- Support variable derivation and update data with minimum granularity\n- Supports full derivation, which is more appropriate when fine-grained updates to data are not required.\n- Both full derivation and variable derivation support asynchronous tasks\n- In addition to data change-driven execution at full derivation and variable derivation, it also supports manual re-triggering of execution.\n- Built-in event system\n- Supports middleware and plug-in systems, and can seamlessly connect with redux ecological related tool libraries\n- 100% ts encoding, type hint optimization\n\n\u003e In order to facilitate users to understand the core logic of `helux`, we provide the [how-helux-was-born](https://github.com/fantasticsoul/how-helux-was-born) project to assist users in making helux source code debug.\n\n## Quick start\n\n### atom\n\n```tsx\nimport { atom, useAtom } from 'helux';\nconst [numAtom] = atom(1); // { val: 1 }\n\nfunction Demo() {\n  const [num, setAtom] = useAtom(numAtom); // num is automatically unboxed\n  return \u003ch1 onClick={setAtom(Math.random())}\u003e{num}\u003c/h1\u003e;\n}\n```\n\n### dep collection\n\n**Dependency collection**, data dependencies will be collected in real time during component rendering\n\n```tsx\nimport { useAtom } from 'helux';\nconst [objAtom, setObj] = atom({ a: 1, b: { b1: 1 } });\n\n// Modify the draft and generate a new state with shared data structure. The current modification will only trigger the rendering of the Demo1 component.\nsetObj((draft) =\u003e (draft.a = Math.random()));\n\nfunction Demo1() {\n  const [obj] = useAtom(objAtom);\n  // Trigger re-rendering only when obj.a changes\n  return \u003ch1\u003e{obj.a}\u003c/h1\u003e;\n}\n\nfunction Demo2() {\n  const [obj] = useAtom(objAtom);\n  // Trigger re-rendering only when obj.b.b1 changes\n  return \u003ch1\u003e{obj.b.b1}\u003c/h1\u003e;\n}\n```\n\n### signal\n\n**Signal response**, which binds the shared state original value directly to the view\n\nraw value response\n\n```tsx\n// This will only cause internal re-rendering of the h1 tag.\n\u003ch1\u003e${numAtom}\u003c/h1\u003e\n```\n\nblock response\n\n```tsx\nimport { block } from 'helux';\nconst [objAtom] = atom({ a: 1, b: { b1: 1 } });\n\nconst UserBlock = block(() =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003e{objAtom.a}\u003c/h1\u003e\n    \u003ch1\u003e{objAtom.b.b1}\u003c/h1\u003e\n  \u003c/div\u003e\n));\n\n// Dependencies are obj.val.a, obj.val.b.b1\n\u003cUserBlock /\u003e;\n\n// If you use share to create a shared object, the dependencies of the UserBlock instance are obj.a, obj.b.b1\nconst [objAtom] = share({ a: 1, b: { b1: 1 } });\n```\n\n### mutate derive\n\n**Variable derivation**, responds to changes in some nodes of the shared state itself, and derives the results of other nodes of itself.\n\n```ts\nimport { share, mutate } from 'helux';\nconst [shared] = share({ a: 1, b: 0, c: 0 });\n\nmutate(shared)({\n  changeB: (draft) =\u003e (draft.b = shared.a + 1),\n  changeC: (draft) =\u003e (draft.c = shared.a + 2),\n});\n```\n\nRespond to changes in certain nodes in other shared states and derive other node results of its own\n\n```ts\nimport { share, mutate } from 'helux';\nconst [shared] = share({ a: 1 });\nconst [sharedB] = share({ b: 0, c: 0 });\n\nmutate(sharedB)({\n  changeB: (draft) =\u003e (draft.b = shared.a + 1),\n  changeC: (draft) =\u003e (draft.c = shared.a + 2),\n});\n```\n\n### full derive\n\n**Full derivation**, in response to certain node changes in other shared states, fully derivation of new results\n\n```ts\nimport { share, derive, deriveAtom, useDerived, useDerivedAtom } from 'helux';\nconst [shared] = share({ a: 1 });\n\nconst resultDict = derive(() =\u003e ({ num: shared.a + 100 })); // { num: number }\nconst resultAtom = deriveAtom(() =\u003e shared.a + 100); // Autoboxing: { val: number }\n\nconst [result] = useDerived(resultDict); // { num: number}\nconst [result] = useDerivedAtom(resultAtom); // Automatic unboxing: number\n```\n\n### watch\n\nObserve data changes through watch\n\nActively define dependencies and do not execute them for the first time\n\n```ts\nimport { watch } from 'helux';\n\n// Only when changes in a are observed, the callback execution is notified\nwatch(() =\u003e {\n  console.log('a change');\n}, [shared.a]);\n\n//Notify callback execution when any shared node changes\nwatch(() =\u003e {\n  console.log('shared change');\n}, [shared]);\n```\n\nSet `immediate=true` to execute immediately and automatically collect dependencies.\n\n```ts\nwatch(\n  () =\u003e {\n    console.log('a change', shared.a);\n  },\n  { immediate: true },\n);\n```\n","funding_links":["https://github.com/heluxjs/helux/issues/141","https://tnfe.gtimg.com/image/5a2u6arzpo_1705217036205.png"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheluxjs%2Fhelux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheluxjs%2Fhelux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheluxjs%2Fhelux/lists"}