Repository files navigation

Observable state with ease. ⚡️

Bring your React components to the next level. ⚛️

• Transparent proxies (no special classes)
• Implicit observation (use your objects like normal)
• Observable objects, arrays, sets, and maps (even custom classes)
• Automatic reactions to observable changes (see theauto/useAuto/withAuto functions)
• Support for deep observation (see thewatch function)
• Memoized derivations (see theo/useDerived functions)
• Prevent unnecessary renders
• 80% less SLOC than MobX

Why build this? The goal of this library is to explore the MobX approach ofwriting React components by designing a new API from the ground up with React inmind from the get-go. Another goal is to keep a lean core by writing an observabilityengine from scratch.

Who built this?Alec Larson, the co-author ofreact-spring andimmer. You can support his work bybecoming a patron.

• o() for making observable objects
• auto() for reactive effects
• when() for reactive promises
• no() for unobserved objects
• noto() for unobserved scopes
• watch() for listening to deep changes
• shallowChanges() for listening to shallow changes
• withAuto() for reactive components
• useAuto() for easyauto calls in components
• useO() for observable component state
• useDerived() for observable getters
• useChanges() for change listeners
• useEffects() for reactive mounting/unmounting of effects
• useBinding() for situations wherewithAuto is too invasive

The API reference can be found here:
https://github.com/alloc/wana/wiki/API-Reference

Many ofwana's exports are tree-shakeable. 🌲

• @wana/babel-plugin-with-auto
  For development only. It ensures thatwithAuto 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.

• @wana/babel-plugin-add-react-displayname
  A fork ofbabel-plugin-add-react-displayname that works with Babel 7 and up. It also provides acallees option, which means HOCs likewithAuto are supported. Basically, this plugin sets thedisplayName of your components for you, which makes React Devtools a better experience. It's recommended to use this plugin in both development and production.