@jscutlery/microwave

Microwave

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

🪄 Features

⚡️ 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.

Table of Contents

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

👾 Demo

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

📝 Usage

@Microwave

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;
}

@Microwave + watch

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();
    });
  }
}

Change detection strategies

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

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

Here are the current strategies.

Custom strategies.

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

Strategy	Description
asapStrategy	This is the default strategy. It will trigger change detection independently for each component while coalescing changes and scheduling the change detection on the microtask queue.
asyncStrategy	Local strategy coalescing using macrotasks
rafStrategy	Local strategy coalescing using requestAnimationFrame
syncStrategy	Local strategy without coalescing so it will trigger change detection each time a property changes.

Upcoming features

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

Acknowledgements

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

Nuke it

Wordplay by @AlyssaNicoll & @schwarty.

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