# frint-component-utils

> Component utils package for Frint

Latest version **5.7.2** (published 2018-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install frint-component-utils
pnpm add frint-component-utils
yarn add frint-component-utils
bun add frint-component-utils
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.7.2 |
| Published | 2018-09-11 |
| First published | 2017-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 41.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | FrintJS Authors |
| Maintainers | fahad19, froskie, jbaudin, markvincze, mmirandaalex, rbardini, rmachado-travix, viacheslaff |
| Keywords | frint |

## Links

- npm: https://www.npmjs.com/package/frint-component-utils
- Repository: https://github.com/frintjs/frint
- Homepage: https://github.com/frintjs/frint/tree/master/packages/frint-component-utils
- Issues: https://github.com/frintjs/frint/issues
- npm.io page: https://npm.io/package/frint-component-utils

## Dependencies (2)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.0
- [lodash](https://npm.io/package/lodash.md) ^4.13.1

## Recent versions

- 5.7.2 (latest) — 2018-09-11
- 2.9.0-alpha.2d26e4d7 (canary) — 2017-09-26
- 5.7.1 — 2018-09-05
- 5.7.0 — 2018-08-06
- 5.6.1 — 2018-07-16
- 5.6.0 — 2018-07-13
- 5.5.0 — 2018-07-10
- 5.4.5 — 2018-06-25
- 5.4.4 — 2018-05-30
- 5.4.3 — 2018-04-06
- 5.4.2 — 2018-03-26
- 5.4.1 — 2018-02-21
- 5.4.0 — 2018-02-14
- 5.3.0 — 2018-01-16
- 5.2.1 — 2018-01-03
- … 24 more at https://npm.io/package/frint-component-utils/versions

## README

# frint-component-utils

[![npm](https://img.shields.io/npm/v/frint-component-utils.svg)](https://www.npmjs.com/package/frint-component-utils)

> Component utils package of Frint

<!-- MarkdownTOC autolink=true bracket=round -->

- [Guide](#guide)
  - [Installation](#installation)
  - [Handlers](#handlers)
- [API](#api)
  - [DefaultHandler](#defaulthandler)
  - [composeHandlers](#composehandlers)
  - [streamProps](#streamprops)

<!-- /MarkdownTOC -->

---

# Guide

This package is aimed at enabling other reactive rendering/templating libraries integrate with FrintJS, and not to be used directly by developers in their applications.

For example, take a look at `frint-react` for its implementation using this package internally.

## Installation

With [npm](https://www.npmjs.com/):

```
$ npm install --save frint-component-utils
```

## Handlers

Handlers concept follows a spec for the lifecycle of a reactive component, without tying itself to any specific library (like React or Vue). They are basically just objects with functions, which will be exposed as methods when composed together into a single instance.

This enables other libraries to integrate with FrintJS as easily as possible. The monorepo here will always provide the handlers logic for maintaining the same behaviour, while others can start implementing these handlers with their preferred rendering library (Vue or Preact for example).

Within the monorepo, we will be consuming these handlers ourselves too to create React-specific packages.

### Handler spec

This is the default handler interface which other handlers are expected to implement as needed:

```js
{
  // options
  app: null,
  component: null,

  // lifecycle: creation
  initialize() {},
  beforeDestroy() {},

  // data
  getInitialData() {},
  setData(key, value) {},
  setDataWithCallback(key, value, cb) {},
  getData(key) {},

  // props
  getProp(key) {},
  getProps() {},

  // lifecycle: mounting
  beforeMount() {},
  afterMount() {},

  // lifecycle: re-rendering
  beforeUpdate() {},
  shouldUpdate(nextProps, nextData) {},
  afterUpdate() {},

  // other
  getMountableComponent(app) {}
}
```

### Handler implementation

For example, [`frint-react`](../frint-react) has an implementation of the handler targeting React. And it was done as follows:

```js
{
  setData(key, value) {
    this.component.setState({
      [key]: value,
    });
  },
  setDataWithCallback(key, value, cb) {
    this.component.setState({
      [key]: value,
    }, cb);
  },
  getData(key) {
    return this.component.state[key];
  },
  getProps() {
    return this.component.props;
  },
  getProp(key) {
    return this.component.props[key];
  }
}
```

You can also see how multiple handlers are composed together and implemented in `Region` and `observe` Components in [`frint-component-handlers`](../frint-component-handlers) and [`frint-react`](../frint-react) packages.

# API

## DefaultHandler

> DefaultHandler

The interface of a default handler object, that other handlers are expected to override.

## composeHandlers

> composeHandlers(...handlers)

### Arguments

1. `handler` (`Object`): with functions to override from default/previous handlers.

### Returns

`Handler`: Instance of handler after composing with all handlers.

## streamProps

> streamProps(defaultProps = {})

Helper function, for composing your props inside `observe`, and then generating and returning an single `Observable`.

### Arguments

1. `defaultProps` (`Object` [optional]): Default props to start with.

### Returns

`Streamer` instance that implements these methods below:

All `set*` methods return the same `Streamer` instance so multiple set calls can be chained in one go.

#### set

> set(key, value)

> set(plainObject)

> set(observable$, ...mapperFunctions)

#### setKey

> setKey('key', 'value')

#### setPlainObject

> setPlainObject({ key: 'value' })

#### setObservable

> setObservable(observable$, ...mapperFunctions)

You can set as many mapper functions until you reach a value of your needs.

```js
setObservable(
  observable$,
  props => props, // no modification
  propsAgain => modifiedProps // with modification
)
```

#### setDispatch

> setDispatch(actionCreators, store)

```js
setDispatch({
  incrementCounter: incrementCounter,
  decrementCounter: decrementCounter,
}, store)
```

#### get$

> get$()

Returns an `Observable`.

---
_Source: https://npm.io/package/frint-component-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._