frintjs / frintjs/frint

Proposal: Drop `streamProps` helper function

Open
#405 3 comments 3 reactions 0 assignees View on GitHub
proposal
Dominant language
JavaScript
Stars
756
Forks
33
PR merge metrics
No merged PRs in 30d

Description

## Background

* We have an `observe` higher-order component that is shipped from `frint-react`
* The HoC allows us to return an Observable of props, that can change over time
* To make things easier, we included a helper function called `streamProps`
* The helper function can generate a stream of props without needing advanced RxJS knowledge

## Introducing `frint-props`

We also developed `frint-props` and `frint-props-react` recently, which is done in a separate repository here: https://github.com/frintjs/frint-props

The features that they provide makes existing `streamProps` redundant.

We can of course have a safe migration path for this.

## Examples

Same result, one with `streamProps`, the other with `frint-props`.

### With `streamProps`

```js
import React from 'react';
import { observe, streamProps } from 'frint-react';

import { incrementCounter, decrementCounter } from '../actions/counter';

function MyComponent(props) {
// `props.counter` (`Integer`)
// `props.increment` (`Function`)
// `props.decrement` (`Function`)
// `props.foo` (`String`)
return

;
}

export default observe(function (app) {
const defaultProps = { counter: 0 };
const store = app.get('store');

return streamProps(defaultProps)
.set({ foo: 'foo value' })
.set(
store.getState$(),
state => ({ counter: state.counter.value })
),
.setDispatch({
increment: incrementCounter,
decrement: decrementCounter,
}, store)
.get$();
})(MyComponent);
```

### With `frint-props`

```js
import React from 'react';
import { withDefaults, withStore } from 'frint-props';
import { compose } from 'frint-props-react';

import { incrementCounter, decrementCounter } from '../actions/counter';

function MyComponent(props) {
return

;
}

export default compose(
withDefaults({
foo: 'foo value',
counter: 0,
}),
withStore(
state => ({ counter: state.counter.value }),
{
increment: incrementCounter,
decrement: decrementCounter,
},
)
)(MyComponent);
```

## Further reading

* https://frint.js.org/guides/higher-order-components/
* https://frint.js.org/docs/packages/frint-react/#helper-function-for-streaming-props
* https://github.com/frintjs/frint-props
* https://github.com/frintjs/frint-props/tree/master/packages/frint-props

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.