Class decorators for TFRP

Transparent Functional Reactive Programming

prop - reactive value marker decorator. Each reactive value has an immutable state. If the immutable state will update, all who depend on It will refresh.

import { prop } from 'tfrp';
import { on } from 'remini';

class Todos {
  @prop items = [];

  constructor() {
    on(() => this.items, () => console.log('items changed'));
  }

  add(todo: string) {
    this.items = this.items.concat(todo); // an immutable modification
  }
}

cache - is the decorator for define selector on class getter.

import { prop, cache } from 'tfrp';

class Todos {
  @prop items = [];

  @cache get completed() {
    return this.items.filter(item => item.completed);
  }
}

You can configure babel jsx wrapper for automatic observation arrow function components if you want.