How can I get a custom blueprint to modify router.js?

Ember CLI
1

It seems as though the last thing I need to do with my custom ember blueprint is to add the declared routes into app/router.js. I can’t see anything in the docs or API spec to indicate this is even possible.

I asked this on SO as well, and was pointed to the (undocumented) ember-router-generator:

2

It seems GitHub - ember-admin/ember-cli-admin: Ember-cli-admin is a powerful admin dashboard for ember-cli projects does this but not sure how.

3

What’s your use case for this? If it made sense, Ember Engines has functionality for creating routes in an addon, so that might be worth looking at too!

4

The requirement is to dynamically create a route as a part of a custom generate process. It’s really just the base use case described in the Ember CLI user guide:

If I can create route/* files using ember-cli adding them to the main router.js seems like a logical extension of that functionality.

5

Ohhhh — got it.

You can do this. There’s actually a small project called ember-router-generator which is used by ember-cli internally to add/remove routes to that file. (See the usage here). Having not used it, I don’t know how flexible it is, but it looks like it creates an AST for your router.js file, so you can dynamically add/remove things as necessary. I think this might be what you’re looking for!

6

Thanks, I’ve been going through that code for the past day or two trying to understand how it’s supposed to be set up. There’s a lot of nesting in there and it’s a bit of a maze decoding what goes where. I’ve entered an issue on GitHub asking for documentation, too.

Out of curiosity, what is an AST in this context?

7

In this case AST = Abstract Syntax Tree. I think a good video to start is the really super awesome talk James Kyle gave at Ember Conf about compilers: EmberConf 2016: How to Build a Compiler by James Kyle - YouTube

In short, you can think of an AST as a really large JSON-like Object that describes the syntax in a given javascript file. An AST usually provides a way of traversing or walking along that tree so you can modify it. I think the ember-router-generator does most of that work under-the-hood, so you may not need to worry about it.

So, I think with this library you could do something like this:

var EmberRouterGenerator = require('ember-router-generator');

var router = new EmberRouterGenerator(`
  // Or the contents of router.js
  import Ember from 'ember';
  const Router = Ember.Router.extend();
  Router.map(function() {});  
  export default Router;
`);

var newRouter = router.add('home', {});

console.log(newRouter.code());
/*
Outputs:
  import Ember from 'ember';
  const Router = Ember.Router.extend();
  Router.map(function() {
    this.route('home');
  });  
  export default Router;
*/
8

Interesting, funnily enough that was the workaround I’ve already been thinking of - writing code that parses app/router.js in the beforeInstall function then rewrites it in the afterInstall function once everything else has completed successfully. To really clean it up I’d need to add some form of invesrse logic in the beforeUninstall/afterUninstall functions too, of course.

Given that ember-router-generator is undocumented I think I can create a custom parser quicker than burning more time trying to figure out exactly how it works. Under the covers I know ember-router-generator is using recast which does have documentation.

Needless to say, I’m frustrated :disappointed: