hyperapp-router icon indicating copy to clipboard operation
hyperapp-router copied to clipboard

Typescript: support for Element in RouteProps

Open dude333 opened this issue 6 years ago • 0 comments

The current interface for RouterProps.render is (props: RenderProps<P>) => VNode<RenderProps<P>>.

You can set an Element to be rendered as well (code below) but typescript compiler issues this warning message:

Type '() => (state: State, actions: Actions) => Element' is not assignable to type '(props: RenderProps<{}>) => VNode<RenderProps<{}>>'.

Type '(state: State, actions: Actions) => Element' is missing the following properties from type 'VNode<RenderProps<{}>>': nodeName, children, key

const Click = (props) => (state, actions) => (
  <div>
    <button onclick={() => actions.setMsg(`clicked ${state.n} times`)}>
      click
    </button>
    {state.msg}
    <br />
    {JSON.stringify(props)}
  </div>

const view = (state, actions) => (
  <div>
    <Link to="/click">Click</Link>
    <Route path="/click" render={Click} />
  </div>
)
);

I tried to extend RouterProps, but it didn't work. Does anyone know if there is a way to implement this on RouterProps.render?

Basically, today we have:

  const component = props => vnode

and I'd like to extend it to accept also this:

  const component = props => (state, actions) => element

dude333 avatar May 01 '19 15:05 dude333