{"id":15314479,"url":"https://github.com/barelyhuman/mage","last_synced_at":"2025-10-09T00:31:13.814Z","repository":{"id":56753875,"uuid":"523242447","full_name":"barelyhuman/mage","owner":"barelyhuman","description":"stateful + logical abstraction layer for react","archived":true,"fork":false,"pushed_at":"2022-09-07T10:16:56.000Z","size":74,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-26T22:32:59.483Z","etag":null,"topics":["abstraction","react","react-hooks","state"],"latest_commit_sha":null,"homepage":"https://barelyhuman.github.io/mage/","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/barelyhuman.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-10T07:21:28.000Z","updated_at":"2023-01-27T21:33:03.000Z","dependencies_parsed_at":"2022-08-16T01:40:38.185Z","dependency_job_id":null,"html_url":"https://github.com/barelyhuman/mage","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/barelyhuman/mage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fmage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fmage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fmage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fmage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barelyhuman","download_url":"https://codeload.github.com/barelyhuman/mage/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barelyhuman%2Fmage/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000654,"owners_count":26082879,"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-10-08T02:00:06.501Z","response_time":56,"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":["abstraction","react","react-hooks","state"],"created_at":"2024-10-01T08:45:40.169Z","updated_at":"2025-10-09T00:31:13.561Z","avatar_url":"https://github.com/barelyhuman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e **Warning**: This repo has been archived because a better more cleaner implementation of the event based re-render has been implemented with [@preact/signals](https://preactjs.com/blog/introducing-signals/)\n\n\u003e **Note**: Please fork the repo if you wish to extend on this or use this instead. A final version of the same as been released in case people are using it.\n\n# @barelyhuman/mage\n\n\u003e stateful + logical abstraction layer for react\n\n\u003ca class=\"badge\" href=\"https://bundlephobia.com/package/@barelyhuman/mage\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/@barelyhuman/mage?label=bundle%20size\u0026amp;style=flat\u0026amp;colorA=000000\u0026amp;colorB=000000\" alt=\"\"\u003e\u003c/a\u003e\n\n## Highlights\n\n- Tiny\n- 0 Deps\n\n## Usage\n\n\u003e **Note**: The library depends on `valtio`, so please install valtio as well\n\u003e (ignore if already installed)\n\n```sh\nnpm install @barelyhuman/mage valtio\n# or\nyarn add @barelyhuman/mage valtio\n# or\npnpm add @barelyhuman/mage valtio\n```\n\n### Quick Copy\n\n```js\nimport {createState, makeReactive} from '@barelyhuman/mage'\n\nconst state = createState({\n\tcount: 0,\n})\n\nfunction inc() {\n\tstate.count += 1\n}\n\nfunction CounterImpl() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cp\u003e{state.count}\u003c/p\u003e\n\t\t\t\u003cbutton onClick={inc}\u003e+\u003c/button\u003e\n\t\t\u003c/\u003e\n\t)\n}\n\nconst Component = makeReactive(state)(CounterImpl)\n\nexport default Component\n```\n\n## About\n\n\u003e **Note**: This library isn't a mandatory requirement, most of what it does can\n\u003e be done by using something like [valtio](https://valtio.pmnd.rs) or\n\u003e [jotai](http://jotai.org) and maintaining local state in the component file\n\u003e and not inside the component and side effects being thrown out of your head\n\u003e and using manual action based triggers inside other actions. (how you'd write\n\u003e normal javascript)\n\nThe reason for mage to exist was to abstract and block the usage of hooks in\nfunctional components. This became necessary after libraries dropping support\nfor class based components and specifically writing stuff for hooks (I'm also\nsomeone who's done this). So, this library is just to help you avoid writing\nhooks by giving a better way to write just javascript in react\n\nHooks, inherently aren't bad but the usage abuse of everything having to be a\nhook and libraries polluting this space ends up creating code where a functional\ncomponent has more hooks than it has rendering logic.\n\nThis also ends up with mix and match between hooks that aren't composable.\n\nFor example, custom hooks that use redux and then manipulated hooks that use\nthat redux state can cause a lot of re-renders, which can be avoided by using\n`refs` and a bit of diffing logic but that's not supposed to be that\ncomplicated.\n\nThis is where it's necessary for that abstraction to be taken up by a utility.\n\n## Docs\n\nYou can read more about the usage and API by checking the\n[docs/pages](docs/pages) folder in the repo or by visiting the\n[web version \u0026rarr;](https://barelyhuman.github.io/mage/)\n\n## Disclaimer\n\nI have nothing against react, I like the library, I'm just not satisfied by the\ndirection of how things are done when using it, so this is a disciplinary\nabstraction that forces you to write functional components as just that. A\nfunction that returns a component based on props.\n\n## License\n\n[MIT](license)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarelyhuman%2Fmage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarelyhuman%2Fmage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarelyhuman%2Fmage/lists"}