@jscutlery/microwave brings simplified and performant reactivity to Angular.

⚡️ Less change detection: Microwave will only trigger change detection when properties change.

😌 Less RxJS Spaghetti: Focus on your features without sacrificing performance.

🚦 Coalescing: regroup changes and trigger change detection once per component.

✅ Microwave is ZoneJS agnostic so it will work with or without it.

👯‍♀️ Don't trigger useless change detections when a property's value has been set to the same value.

• Microwave
• 🪄 Features
• Table of Contents
• 👾 Demo
• 📝 Usage
  • @Microwave
  • @Microwave + watch
  • Change detection strategies
    • Custom strategies.
  • Upcoming features
• Acknowledgements
  • Nuke it

https://stackblitz.com/edit/game-of-life-microwave?file=src%2Fapp%2Fcell.component.ts

Just add the @Microwave decorator and let it nuke your component!

import { Microwave } from '@jscutlery/microwave';

@Microwave()
@Component({
  template: `...`,
})
class GreetingsComponent {
  /* ⚠️ Important: properties should be initialized, otherwise they won't be detected by Microwave. */
  name?: string = undefined;
}

Watch property changes.

@Microwave()
@Component({
  template: `<h1>Welcome {{ upperCaseName }}</h1>`,
})
class GreetingsComponent {
  @Input() name?: string = undefined;
  upperCaseName?: string = undefined;

  constructor() {
    /* Note that you don't have to handle the subscription as the returned observable
     * will be unsubscribed from when the component is destroyed.
     * Though, if you add operators, you will have to handle subscriptions. */
    watch(this, 'name').subscribe((name) => {
      this.upperCaseName = name.toUpperCase();
    });
  }
}

You can customize the change detection strategy using the strategy parameter.

@Microwave({
  strategy: asyncStrategy,
})
export class MyComponent {}

Here are the current strategies.

You can implement your own strategy using the Strategy<T> signature.

• [ ] provide multiple Microwave strategies
• [ ] watch multiple properties
• [ ] automatically unsubscribe even when using operators with watch(...).pipe(...)

The RxAngular team for the inspiration. In fact, the first prototype was built during the creation of the RxState Marmicode Tasting video: https://youtu.be/CcQYj4V2IKw

Wordplay by @AlyssaNicoll & @schwarty.

Cf. Angular Air https://youtu.be/CmspcYY6jjU