Bug while separating route declarations into several modules

[bompi88]

I have a main layout that renders a navigation bar and the content related to each route. The navigation bar is animated when rendered for the first time (Using Animate.css). When the user first goes to /, the index page is rendered and the navigation bar should animate down from the top of the window.

This works perfectly if I declare all my routes inside a single routes.js, but it seems not to work if I declare some routes in one module and the rest in another module. It seems that switching between routes that are not declared in the same file, re-renders the whole main layout (including the top bar). This behaviour results in the navigation bar animating "up" and down in some cases. I though maybe this behaviour comes from how mantra-core (or FlowRouter) handles things behind the scenes, correct me if I'm wrong.

Example illustrating the behaviour is seen below (The image is a GIF, try clicking on it if it is behaving like a static image). The route linked to the GrandView button is declared within an index module and the rest are declared within a core module.

[bompi88]

Immediately after posting this issue, I understood why I get this behaviour. It's because of this particular code-snippet:

export default function (injectDeps, {FlowRouter}) {
  const MainLayoutCtx = injectDeps(MainLayout);

I'm doing this for each of my routes.js files. For this to work as I want, the MainLayoutCtx must be shared between both files, and declared in an upper scope. Is there a way of doing this with the current implementation? Let's say you want to share the main layout context between modules. How would I do this? Does this contradict with the mantra concept?

[HaareeKrishna]

@bompi88 As I understood the problem, You might need to have root level component acting as parent for all modules and do injectDeps to root parent component. It doesn't contradict mantra concept.
const RootComponentCtx = injectDeps(RootComponent); <RootComponentCtx> <Module1 /> <Module2 /> </RootComponent>

[macrozone]

run into the same issue, switching from one route of module A to route of module B results in a flicker, because the dom-tree gets emptied in the transition from one route of the other.

@bompi88 could you solve this issue?

I also do not understand your solution @HaareeKrishna. We have to call injectDeps in every route-file and the problem is, that we cannot share the resulting component between the routes.

[HaareeKrishna]

@macrozone We should not have multiple route files, routes are app specific. So only routes.js at root level and call injectDeps in that. We should not have module level route files, thus we will not encounter the problem.

[bompi88]

@HaareeKrishna Adding all routes to the core module would fix this, but the mantra specs states that routes could be module specific. I think each module should be isolated as much as possible, so you could possibly drop modules from one app to another.

[englishtom]

I agree with @bompi88 it would be better to keep the modules decoupled as much as possible. I just ran into this issue today and as far as I can see the only workable solution at the moment is to move all routes into core.

When thinking about a long term solution to this problem it's worth noting this also affects FlowRouter group definitions. To use groups defined in a different routes file you have to redeclare them.