Show a graphic representation of the dependencies involved

[jrburke]

Ideally, hook into the new Module code as well as onResourceLoad, to show what was requested/known and what got executed.

Call out circular dependencies.

Do a pretty graph. https://github.com/pahen/node-madge might be good to consult, but do something that can be generated in the browser.

[cybear]

I'm looking into generating an image using the webservice http://yuml.me - stop me if this is a bad idea ;)

[jrburke]

@cybear: @dustinboston did something like that in this gist:

https://gist.github.com/3288778

so that might be useful to look at. For something included in xrayquire.js, I would like to see a more native way to generate the images, so that we do not have to rely on an external service. I'm not sure how that would look yet though. Maybe it still makes sense to generate the data in the UML-consumable form.

[dustinboston]

My comment - revision 3:

@jrburke I just realized what this project is. Looks like you already have a dependency tree going. The biggest problem with using onResourceLoad is that all of the modules may not be used. So the resulting graph may be partial. I'm thinking that this is the same limitation as with xrayquire?

r.js may be the key here. Possibly doing it in some sort of build process. Are there any interesting hooks that I could use there? Maybe alternative approaches to using r.js that could get me started?

[jrburke]

Ah right, onResourceLoad does not give a full picture. xrayquire.js plugs in deeper to the Module object used internally, mainly hooking into its enable prototype method:

https://github.com/requirejs/xrayquire/blob/master/xrayquire.js#L110

(warning, those are deep internals, subject to change at any time)

So you could probably juse use xrayquire, but then look at its showTree() function to know how to pull out the xrayquire, and transform it to the data structure that is used by your viz of choice:

https://github.com/requirejs/xrayquire/blob/master/xrayquire.js#L312

[cybear]

Will it be accepted if I refactor the code into one data export function getTree2D and leave just the formatting in showTree?

That way we would achieve what you're talking about, separating data from UI and being able to easily have other rendering methods.

(On a side note: I'm not going for YUML.me anymore - it does not suffice.)

[jrburke]

Sure. I expect it would just be getTree() and be something like:

getTree: function (contexName) {
    var context = requirejs.s.contexts[contextName || '_'],
                xray = getX(context),
                traced = xray.traced;

    sortTraceOrder(xray.traceOrder);
    return xray.traceOrder;
}

if you think the data structure itself should be changed, it would be worth hashing that out more before doing the pull request.

[dustinboston]

@jrburke I updated my original gist to use xrayquire: https://gist.github.com/3351410

It's definitely coming back with better results.

What are the _@ modules? I just excluded them. I'm guessing it has something to do with CoffeeScript.

Also, I've got this little gem in my data-main file (bootstrap.js):

define(['cs!compat'], function () {
  // App depends on some compat stuff
  require(['cs!app'], function (ApplicationController) {
    ApplicationController.run();
  });
});

Problem is that app doesn't get included in the traced files list. Any thoughts on why?

@cybear My updated gist will just return a tree with dependencies if you do xrayquire.getTree(). Do you have something else in mind for generating your tree UI? I'd love to hear about it if you do---sounds like we're trying to solve the same problem.

[jrburke]

@dustinboston the modules whose IDs start with _@r are require calls -- they are not modules with names. So, they can be ignored for mapping out actual modules.

As for the 'cs!app', it will not be bound as a dependency on the bootstrap.js file, since it is loaded via a callback-require -- those are not seen as direct dependencies. Or, do you mean that even after waiting for that require() call to execute and the ApplicationController.run() to run, then calling the getTree(), you do not see it in the xrayquire data?

[dustinboston]

@jrburke That makes sense about the _@r stuff. For the cs!app, I do not see it in the xrayquire data - it is definitely being loaded though.

[cybear]

@dustinboston Nice! This is almost identical to what I had in mind. I'll post my comments directly to the gist.

[dustinboston]

@cybear As for the generation of the UI, I've started this repo. It takes a JSON tree and turns it into a basic UML diagram. It doesn't arrange anything intelligently at this point. Would love to get your take on it.

[jrburke]

@dustinboston sorry for the delayed response. If you have an example app I can try with the nested require for 'cs!app' then I can do a debugging session on it, figure out where we lose it.

[dustinboston]

@jrburke I'll see what I can do, it's a low priority for me right now so it will probably be a few days. Thanks for checking in to it!

[trusktr]

Yes. Yes. Yes. Visuals would be extremely helpful for learning large projects.