{"id":13448667,"url":"https://github.com/alloc/wana","last_synced_at":"2025-04-08T03:18:58.645Z","repository":{"id":57169308,"uuid":"193721263","full_name":"alloc/wana","owner":"alloc","description":"Easy observable state for React ⚡️","archived":false,"fork":false,"pushed_at":"2023-08-03T06:31:07.000Z","size":908,"stargazers_count":178,"open_issues_count":11,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T11:05:39.352Z","etag":null,"topics":["hooks","observable","react","transparent"],"latest_commit_sha":null,"homepage":"","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/alloc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2019-06-25T14:14:14.000Z","updated_at":"2024-11-27T12:43:33.000Z","dependencies_parsed_at":"2024-01-21T04:40:30.652Z","dependency_job_id":"b9f9b2fd-5dac-4705-92ea-eefc310eb4c9","html_url":"https://github.com/alloc/wana","commit_stats":null,"previous_names":[],"tags_count":94,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fwana","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fwana/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fwana/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fwana/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alloc","download_url":"https://codeload.github.com/alloc/wana/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767239,"owners_count":20992548,"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":["hooks","observable","react","transparent"],"created_at":"2024-07-31T05:01:52.170Z","updated_at":"2025-04-08T03:18:58.609Z","avatar_url":"https://github.com/alloc.png","language":"TypeScript","funding_links":["https://paypal.me/alecdotbiz","https://www.patreon.com/aleclarson"],"categories":["TypeScript"],"sub_categories":[],"readme":"# wana\n\n[![npm](https://img.shields.io/npm/v/wana.svg)](https://www.npmjs.com/package/wana)\n[![Build status](https://travis-ci.org/alloc/wana.svg?branch=master)](https://travis-ci.org/alloc/wana)\n[![codecov](https://codecov.io/gh/alloc/wana/branch/master/graph/badge.svg)](https://codecov.io/gh/alloc/wana)\n[![Bundle size](https://badgen.net/bundlephobia/min/wana)](https://bundlephobia.com/result?p=wana)\n[![Code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/alecdotbiz)\n\nObservable state with ease. ⚡️\n\nBring your React components to the next level. ⚛️\n\n- **Transparent proxies** (no special classes)\n- **Implicit observation** (use your objects like normal)\n- **Observable objects, arrays, sets, and maps** (even custom classes)\n- **Automatic reactions to observable changes** (see the `auto/useAuto/withAuto` functions)\n- **Support for deep observation** (see the `watch` function)\n- **Memoized derivations** (see the `o/useDerived` functions)\n- **Prevent unnecessary renders**\n- **80% less SLOC than MobX**\n\n\u0026nbsp;\n\n**Why build this?** The goal of this library is to explore the MobX approach of\nwriting React components by designing a new API from the ground up with React in\nmind from the get-go. Another goal is to keep a lean core by writing an observability\nengine from scratch.\n\n**Who built this?** [Alec Larson](https://twitter.com/alecdotbiz), the co-author of\n`react-spring` and `immer`. You can support his work by [becoming a patron](https://www.patreon.com/aleclarson).\n\n\u0026nbsp;\n\n## Exports\n\n- `o()` for making observable objects\n- `auto()` for reactive effects\n- `when()` for reactive promises\n- `no()` for unobserved objects\n- `noto()` for unobserved scopes\n- `watch()` for listening to deep changes\n- `shallowChanges()` for listening to shallow changes\n- `withAuto()` for reactive components\n- `useAuto()` for easy `auto` calls in components\n- `useO()` for observable component state\n- `useDerived()` for observable getters\n- `useChanges()` for change listeners\n- `useEffects()` for reactive mounting/unmounting of effects\n- `useBinding()` for situations where `withAuto` is too invasive\n\nThe API reference can be found here:  \nhttps://github.com/alloc/wana/wiki/API-Reference\n\nMany of `wana`'s exports are tree-shakeable. 🌲\n\n\u0026nbsp;\n\n## Babel Plugins\n\n- `@wana/babel-plugin-with-auto`  \n  **For development only.** It ensures that `withAuto` components appear in the \"component stack\" printed by React when an error is thrown while rendering. **This makes debugging a lot easier,** but also inflates the size of your application. This plugin produces broken code when used on a production bundle, because it relies on an API that exists only in development.\n\n- `@wana/babel-plugin-add-react-displayname`  \n  A fork of [babel-plugin-add-react-displayname](https://www.npmjs.com/package/babel-plugin-add-react-displayname) that works with Babel 7 and up. It also provides a `callees` option, which means HOCs like `withAuto` are supported. Basically, this plugin sets the `displayName` of your components for you, which makes React Devtools a better experience. It's recommended to use this plugin in both development and production.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Fwana","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falloc%2Fwana","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Fwana/lists"}