mantrajs / mantra-core Goto Github PK

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.

I've been trying to apply mantra architecture to one of my meteor apps, but I've my context is returning as undefined when wrapping my component with injectDeps...

Other apps I've worked on have all had Meteor versions < 1.6, so has anyone had any luck working with mantra-core with Meteor 1.6?

I was running the Meteor 1.3-beta.11 and using mantra-core just fine. Recently the official 1.3 build was released. When I do meteor update it seems to break. I'm getting this error:

Unable to resolve some modules:

  "lib/CSSTransitionReplace.js" in            
/Users/hl/web-dev/meteor/olis-mantra/node_modules/react-css-transition-replace/package.json
(web.browser)
  ".dist/browser.js" in                       
/Users/hl/web-dev/meteor/olis-mantra/node_modules/mantra-core/node_modules/react-komposer/package.json
(web.browser)

Consider running: meteor npm install --save lib

And in my browser console

Uncaught Error: Cannot find module 'react-komposer'

I did try doing meteor npm install --save lib, but still getting the same errors.

I have a proposition on how mantra could support react-router (as discussed here) while maintaining modularity and not changing the mantra API at all.

We can use the "huge apps" pattern to do the route setup inside the mantra modules (routes.jsx as it is now).

The only thing we'd need to do is return the resulting route configuration here like this:

const routes = this._routeFns.map(routeFn => {
  const inject = comp => {
    return injectDeps(this.context, this.actions)(comp);
  };
  return routeFn(inject, this.context, this.actions);
});

this._routeFns = [];
this.__initialized = true;

return routes;

Or, if you plan to use to return something else from init() in the future:

return { routes };

Then one could use the react route objects to build up the react-router root like this:

const {routes} = app.init();

const rootRoute = {
  childRoutes: [ {
    path: '/',
    component: require('./components/App'),
    childRoutes: routes
  } ]
}

render((
  <Router
    history={browserHistory}
    routes={rootRoute}
  />
), document.getElementById('react-root'))

I think this would provide a great deal of flexibility and open the way for users who want to use react-router (or any other routing library for that matter) using a minimal invasive change.

I'd be happy to discuss this further and also eventually provide a PR for this. Let me know what you think.

For example, I have a projects action in core module for following/commenting projects, I also have a projects action in admin module for adding/editing projects

However, if I export these actions with same name from two different modules, one of them will be overwritten. Probably the better way is to merge them, not to overwrite one of them.

If this is considered as a bug, I can submit a PR to fix it.

I'm wondering if the pulled in imports from react-simple-di and react-komposer should perhaps be deprecated?

Right now react-komposer is on version 1.9.0 and there are some pending pr's for react-simple-di. I'm concerned this repo that imports them into mantra-core package will always be slightly outdated unless an automated build is setup. Since this is the case, I'm wondering if these wrapper functions should be deprecated.

The react-komposer version is very behind, and newer composeWithMobx isn't included.

Hi,

it would be interesting to note that the load method is mandatory (must be at least declared even without body) in the module definition file if we want to pass context by DI.

In your sample :

const module = {
routes(injectDeps) {
const InjectedComp = injectDeps(MyComp);
// load routes and put InjectedComp to the screen.
},
load(context) {
// don't forget this declaration or you won't be able to have your context in your containers !.
},
actions: {
myNamespace: {
doSomething: (context, arg1) => {}
}
}
};

Best regards,
Lawrence.