xaviervia / react-dream Goto Github PK

https://twitter.com/joaomilho/status/896044982263566337

Not a fan of Constant as suffix but it communicates the idea well.

Right now to compose the React Dream objects the best way is through higher-order components and using .ap. To make using that smoother the higher-order component combinators need to be easily available in some way.

I thought about adding some .parent and .children functions that wrap common patterns to ReactDream itself, but I’m not yet completely sold on what the default semantics for splitting the props between the elements should be, so I don’t want to commit to any specific approach.

My best idea so far is so in some way expose the combinators already created in https://github.com/xaviervia/playing-react-fantasy-land-types/blob/master/src/helpers/combinators.js and add some other more.

For example for style:

This:

H1.style(({hovered}) => ({
  color: hovered ? 'red' : 'blue'
}))

is equivalent to:

H1.contramap(props => ({
  style: {
    color: props.hovered ? 'red' : 'blue',
    ...props.style
  },
  ...props
}))

The lists used are from MDN resources, but some tags might not be supported by React. Still, for completion it probably doesn’t harm to have them.

The reason it has not been implemented yet is that the semantics of .concat are somewhat insatisfactory.

1. Concat with the Empty object needs a hack to avoid putting an element called Empty side by side with it.
2. Spreading props equally in both siblings is a strange behavior, rather unexpected.

.log()

Maps with:

import React from 'react'
import { getDisplayName, setDisplayName } from 'recompose'

export default toLog => Target =>
  setDisplayName(getDisplayName(Target))(props => {
    const displayName = getDisplayName(Target)
    const args = [...(toLog ? [toLog, displayName] : [displayName]), props]
    console.log(...args)

    return <Target {...props} />
  })

.debug()

Maps with

import React from 'react'
import { getDisplayName, setDisplayName } from 'recompose'

export default Target =>
  setDisplayName(getDisplayName(Target))(props => {
    debugger

    return <Target {...props} />
  })

• Monoid: Using Fragment it should be implementable. Caveats in #4 still apply but are ignorable.
• Profunctor: Current implementation does not follow the laws, since map is implemented as-if ReactDream is the identity functor. To properly implement it, we need to introduce a map2 that composes on the React Element output instead of the React Component, then promap will follow the laws.

It can be pretty useful to be able to set the transform style property with a shorthand:

Path.transform('rotate(180deg)')

No reason not to, I just forgot.

Header.pickProps('title', 'tagline')

…would be equivalent to

Header.contramap(({title, tagline}) => ({title, tagline}))

From the higher-order components:

const withChildren = getChildProps => Parent => Child => props =>
  <Parent {...props}>
    <Child {...getChildProps(props)} />
  </Parent>

const withSiblingBefore = getSiblingBeforeProps => Current => SiblingBefore => props =>
  [
    <SiblingBefore key={0} {...getSiblingBeforeProps(props)} />,
    <Current key={1} {...props} />
  ]

const withSiblingAfter = getSiblingAfterProps => Current => SiblingAfter => props =>
  [
    <Current key={1} {...props} />,
    <SiblingAfter key={1} {...getSiblingAfterProps(props)} />
  ]

const withParent = getParentProps => Child => Parent => props =>
  <Parent {...getParentProps(props)>
    <Child {...props} />
  </Parent>