search

frontarm / navi

🧭 Declarative, asynchronous routing for React.
https://frontarm.com/navi/
MIT License
2.07k stars 71 forks source link

Dev Tools #52

Open jamesknelson opened 5 years ago

jamesknelson commented 5 years ago

Navi needs some dev tools. As a result of Navi's architecture, they should be able to support time travel and give you a window into what's going on under the hood.

I'd really appreciate any help putting them together. I'd be happy to contribute to and link to a quality project that's maintained by someone else.

How Navi Works (the 2 minute version)

When you pass Navi a new URL or Context, it will map them to an array of simple objects called Chunks, which are then reduced into your Route object with a Redux-like configurable reducer.

The array of chunks corresponding to a single URL/context grows over time. Each Matcher (i.e. mount(), route(), withView(), etc.) maps a URL/context pair to an arbitrary number of chunks to the route during each iteration.

There's one special type of chunk: "busy". When Navi encounters a busy chunk (which will contain a promise), it'll wait until that promise resolves or is rejected, and then it'll recompute the list of chunks from scratch (thus allowing it to grow over time). Once there are no busy chunks, the route is considered "steady".

Dev Tools

Due to Navi's architecture, it should be possible to visualize how each Route is computed in response to a Request or Context change, possibly as a list of actions.

Request(/members)
- Chunks [view, busy]
- Chunks [view, redirect(/login), status(302)]

Request(/login)
- Chunks [view, status(200]

Context({ isAuthenticated: true })
- Chunks [view, status(200]

Request(/members)
- Chunks [view, busy]
- Chunks [view, data, busy]
- Chunks [view, data, status(200)]

Being able to see at a glance the information that is mapped to the current URL, and the process used to fetch it, should be useful for debugging routing issues. It would also allow for developers to pick a previous state and use that instead, i.e. time travel.

nshoes commented 5 years ago

I'm very interested in this!

jamesknelson commented 5 years ago

Okay :-)

Any ideas on the approach you'd take to putting this together?

nshoes commented 5 years ago

Not at all! 🤡But I have really been enjoying Navi at work and want to help out. This sounds like a fun project to tackle. Maybe we could start by chatting somewhere that's not GitHub?

jamesknelson commented 5 years ago

Glad to hear that you're enjoying Navi at work :D Where do you think would be a good place to chat? Perhaps I should start a Spectrum?

nshoes commented 5 years ago

Yeah, Spectrum, Slack, Gitter, what every you're digging!

jamesknelson commented 5 years ago

Ok! Just created a spectrum: https://spectrum.chat/navi