Proposal: frint-props

[fahad19]

(Intended to be done outside of the monorepo)

Currently

We have frint-react package that ships with observe HoC and streamProps helper function that enables you to stream props to your base component.

It also gives you access to app instance, allowing you to generate your props having access to your providers too.

Problem

The streaming concept requires developers to understand RxJS and Observables, which is becoming a barrier to entry for beginners.

We can do more to make things easier.

Proposal

Given FrintJS aims to be rendering library agnostic, I propose two packages that can help developers write mostly pure functions and help avoid direct RxJS usage unless really needed for complicated use cases:

• frint-utils: Exports pure functions for composing your props
• frint-utils-react: Composes all functions to create a React HoC

Example usage

This code snippet is just for showing an example, do not take the API too seriously:

import React from 'react';

// just functions
import { 
  startWith,
  withStore,
  withApp,
  shouldUpdate,
} from 'frint-props';

// this would use `observe` from `frint-react` interally
import { hoc } from 'frint-props-react';

// some action creators (Redux or frint-store)
import { incrementCounter } from '../actions/counter';

// your base stateless component
function MyComponent(props) {
  return <p>...</p>;
}

// compose as needed, and export
export default hoc(
  // defaultProps
  startWith({
    foo: 'foo value',
  }),

  // store (frint-store or Redux)
  withStore(
    state => ({ todos: state.counter.value }), // mapStateToProps
    { incrementCounter }, // mapDispatchToProps
    'store' // provider name (optional),
  ),

  // app
  withApp((app, props$) => {
    // return Object or Observable
  }),

  // should update or not
  shouldUpdate((prevProps, nextProps) => {
    return true;
  })
)(MyComponent);

Implentation

frint-react and RxJS will be used by the compose HoC internally, and should not result in adding to the bundle size significantly.

I am looking at a size around 1kb to 2kB max for the initial release.

Dependencies

• [x] #390 would make it easier for this proposal to be implemented

[fahad19]

Development has begun in this repository: https://github.com/frintjs/frint-props

Proposal will be closed once we have our first release on npm. We can then take it from there.

[fahad19]

Delivered in https://github.com/frintjs/frint-props