React-styleguidist: Improve routing

[sapegin]

Right now all routing is hardcoded into index.js — it’s hard to maintain end extend. It also doesn’t support browser back / forward buttons (#467). We have to have several new features that would benefit from the proper router:

• Single-component mode (or single-component mode by default) — basically start style guide in isolated mode, do not have (or do not show by default) a page with all components.
• Split bundle by component or by section to make loading of large style guides faster (or make it possible at all).

I’m not sure what would be the best solution here. Should we use React Router or should we use something simpler?

Related issues: #467, #333.

[tizmagik]

This is an interesting problem. I think it _should_ be doable to make dynamic routes in RRv4. I'll think through this a bit and post back/create a PR when I get a chance.

[sapegin]

I’m not sure we need a RR here because we don’t really have real routes — we have a component filter. So we need a way to parse URL and call different filtering functions and react to URL changes. And allow extension by plugins.

[n1313]

Would having "real" routing make it easier to potentially split the bundle into lazily loaded chunks, one component per chunk?

[sapegin]

I’m not sure, probably not or it won’t be the hard part anyway.

[tizmagik]

So we need a way to parse URL and call different filtering functions and react to URL changes

Hmm but isn't that what a router such as RR essentially does? Would also take care of browser back button semantics, deep linking and isolation, no?

Happy to explore other approaches. What did you have in mind?

[sapegin]

RR is mostly used to render different components depending on a route which we don’t need — we alway render the same component but with different props. I think we need something like Navigo.

[tizmagik]

RR is mostly used to render different components depending on a route which we don’t need

Right, but I think that might be part of the perf problem when you have a large number of components. This is the refactor I was alluding to in #212

I'll take a look at Navigo though, it would probably be less of a refactor, I'm assuming.

[zecaptus]

As I wanted to have a single component / page, I have done something that probably can help you.
Take a look here : https://github.com/zecaptus/styleguide

[sapegin]

:tada: This issue has been resolved in version 6.5.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: