Skip to content

alloc/wana

Repository files navigation

wana

npm Build status codecov Bundle size Code style: Prettier Donate

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 the auto/useAuto/withAuto functions)
  • Support for deep observation (see the watch function)
  • Memoized derivations (see the o/useDerived functions)
  • Prevent unnecessary renders
  • 80% less SLOC than MobX

 

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

Who built this? Alec Larson, the co-author of react-spring and immer. You can support his work by becoming a patron.

 

Exports

  • 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 easy auto 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 where withAuto is too invasive

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

Many of wana's exports are tree-shakeable. 🌲

 

Babel Plugins

  • @wana/babel-plugin-with-auto
    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.

  • @wana/babel-plugin-add-react-displayname
    A fork of 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.