https://github.com/re-js/tfrp

Transparent Functional Reactive Programming
https://github.com/re-js/tfrp

decorators functional reactive remini trfp

Last synced: about 2 months ago
JSON representation

Transparent Functional Reactive Programming

• Host: GitHub
• URL: https://github.com/re-js/tfrp
• Owner: re-js
• License: mit
• Created: 2022-07-17T13:58:07.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-15T13:32:17.000Z (over 2 years ago)
• Last Synced: 2024-10-12T18:16:16.518Z (3 months ago)
• Topics: decorators, functional, reactive, remini, trfp
• Language: TypeScript
• Homepage:
• Size: 6.84 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Class decorators for TFRP

[![npm version](https://img.shields.io/npm/v/tfrp?style=flat-square)](https://www.npmjs.com/package/tfrp)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/tfrp?style=flat-square)](https://bundlephobia.com/result?p=tfrp)

[![code coverage](https://img.shields.io/coveralls/github/re-js/tfrp?style=flat-square)](https://coveralls.io/github/re-js/tfrp)

[![typescript supported](https://img.shields.io/npm/types/typescript?style=flat-square)](./src/index.d.ts)

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.

```javascript

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.

```javascript

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](https://github.com/betula/babel-plugin-jsx-wrapper) for automatic observation arrow function components if you want.