Define the .siblingAfter, .siblingBefore, .child and .parent helpers

[xaviervia]

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>

[xaviervia]

For example, using this would look like:

const Header = props =>
  <header>
    {children}
  </header>


const Title = ({title}) => <h1>{title}</h1>

export default compose(
  withChildren(({title}) => ({title})(Title)
)(Header)

const Subtitle = ...

…and in React Dream

const HeaderContents = Title
  .siblingAfter()
  .ap(Subtitle)

Header
  .children(({title}) => ({title}))
  .ap(HeaderContents)

ping @deepsweet

[xaviervia]

Composing components like this would lead to the ability to bimap and bicontramap. With that, props could be filtered for any of the inner components.

This will mean we will assume any component to be always a composition of other two components. In the case of a component without a second component, it would be the identity component.

In an use case:

const Header = Html.H1
    .parent(Html.Header)
    .bicontramap(
        ({title}) => ({children: title}), 
        ({hovered}) => ({style: {background: 'red'}})
    )

The question then would be, is this .parent function know a concatenation of sorts? How does the internal structure of the object looks like? How does it know how to compose the contramap functions together?

[xaviervia]

Possibly the answer is that a component is a structure with more complexity inside:

• A target Component
• A function from props to props
• A collection of children

This would make the fork function all the more important, since it would be always necessary to pull them out the right way, otherwise the structure inside will be lost.

If this internal representation is kept separated, then it is possible to make bicontramap or map on children. I wonder what the impact in the React tree in the DevTools would be.