make typings of children/render prop optional to allow composition

[alidcast]

Right now you either have to have a render or children prop

export type ValueProps<T> =
  | { initial: T; onChange?: ValueChange<T>; render: ValueRender<T> }
  | { initial: T; onChange?: ValueChange<T>; children: ValueRender<T> }

So you can't do this:

const Container = adopt({
  state: <State initial={{ foo: '' }} />,
})

[TrySound]

Yep composition with types sucks. But I wouldn't like to provide leaky types to solve this problem.

[alidcast]

It worked with react-apollo, so maybe use the types they use?

[TrySound]

I don't see they use anything special.

@pedronauck could you clarify how adopt can work with apollo and not work with powerplug?

[alidcast]

Ah you're right, they basically enforce children prop as well

 children: (result: QueryResult<TData, TVariables>) => React.ReactNode;

I was wrapping my queries/mutations which is why the error wasn't appearing

Hmm I wonder if anything can be done about this

[TrySound]

React team works on this problem. They probably will suggest a custom syntax like this, so type systems could solve the problem on syntax level.

const counter = adopt <plug.Value initial={0} />

[pedronauck]

We don't care about the component type definition, this should be a components concern. When something like this happens to me, usually I change the children to be an optional type:

children?: (RenderProps: WhateverType) => React.ReactNode

So, of course, this can be leaky for powerplug!

What you can do is use the render prop on mapper:

const Composed = adopt({
  toggle: ({ render }) => <Toggle>{render}</Toggle>
})

[alidcast]

Ok, so wrapping them or passing render prop is way to go given limitations of typings