Inferno: Add an `inferno-router` package

[trueadm]

As per recent work on this:

https://github.com/trueadm/inferno/tree/inferno-router

A new package called inferno-router will be supported by the core team and will be maintained in the Inferno monorepo along with other core tools/packages.

[Keats]

Is there some kind of docs/rfcs on how it's going to work and what's different from the other js routers?

[trueadm]

@Keats it's essentially a lightweight react-router equivalent. I'd appreciate PRs/feedback :)

It also has an example in the examples folder, where I added an example of using hashbangs as an option. It will all be documented once the API is established and everyone who might use it has had their input/feedback put back into the module.

[Keats]

I think the main thing missing for me in react-router is some kind of preload fn that is called and only resolves the routes once the fn is done/promise is finished.
Having to use 3rd party for that with react-router when it's such a basic feature of a router

[trueadm]

@Keats can you go into detail on the API for preload? Is this assuming the routes are only async? The router I built was only sync, I need to build in async functionality.

[Svjard]

Was using the new router yesterday, looking good. Is there going to injection of params into the components in a similar way react-router does it?

E.g.
/foo/:id

class MyComponent {
// this.props.params.id ?
}

[trueadm]

@Svjard it's my next task to work on :)

[trueadm]

@Svjard just pushed param support to the inferno-router branch. :)

[Svjard]

Thanks @trueadm, looks good.

[Keats]

The idea for async is that some routes can be async, not necessarily all of them.
You need access to the current url and the one we want to transition to and the devs can handle all the cases themselves.
Right now in our react/redux app we use react-router, https://github.com/Rezonans/redux-async-connect and https://github.com/reactjs/react-router-redux which is kind of mess.

I'm not sure how the api should look like (and I don't care about server-side rendering so my ideas might not even work in that context). Maybe have a look at the ember router? From what i recall it's very magical but quite powerful

[trueadm]

@Keats I've added async functionality to inferno-router on dev. Example of how to use it:

const async = params => new Promise(resolve => setTimeout(resolve.bind(null, 'Hello world!'), 10));

<Router url={ url } history={ browserHistory }>
  <Route path={ path } component={ component } async={ async } />
</Router>

[trueadm]

Released in 0.7.10

[hguillermo]

Hey @trueadm. Was the async option removed from route? I don't see it in the code.

[durango]

https://github.com/infernojs/inferno/blob/8a878f3e1ecc7468e14dc059c48a3b5c69ad578f/packages/inferno-router/src/Route.ts#L10

might be what you're looking for, although I'm not sure if it's exactly async... but because of this

https://github.com/infernojs/inferno/blob/8a878f3e1ecc7468e14dc059c48a3b5c69ad578f/packages/inferno-router/src/Route.ts#L36

you might be able to make a workaround in that component's hook (before rendering), not exactly sure.. in any case if I need to authorize/hide something I generally have a component just for that and hide the children until I get what I want.

<ManagerArea>
  <div>
    <p>will hide until user && user.manager === true</p>
    <form>...</form>
  </div>
</ManagerArea>

and ManageArea..

render() {
  const state = this.context.state.getState()
  const { user } = state
  if (! user || user.manager !== true)
    return <div></div>

 return <div>{ ...this.props.children }</div>
}

Not sure if it's this.children or this.props.children.. not exactly a copy/paste but you get the idea