CFC Method Outline/Structure View?

[homestar9]

It would be great if there was a way to view the structure/outline of a CFC's methods like IntelliJ IDEA or CF Builder. I would like to throw that idea out there as a feature suggestion. Thanks for your hard work on this plugin!

Screenshot of "structure" view of a CFC from IntelliJ IDEA https://imgur.com/jxrqfI6

[David-Polehonski]

This is a good idea, do you know of any other atom projects that do anything similar which we could use as a jumping off point?

I can find these three, plus plenty more.

• https://atom.io/packages/document-outline
• https://atom.io/packages/symbols-tree-view
• https://atom.io/packages/atom-lupa

[homestar9]

Thanks David P,

Unfortunately I am relatively new to Atom. My guess is that the plugin should parse the document similarly to how libraries like jSoup would parse HTML and then extract the top level of cffunction tags. Alternatively you could probably also use a series of regex to extract cffunction or function() declarations. I'm not sure which method would be more efficient.

I wonder if there is a way to take a peek at how other IDEs do it (like IntelliJ IDEA) and come up with something similar?

[David-Polehonski]

I thought I'd have a stab at this; I've got a panel opening whenever a .cfc file is the currently active editor.

Is anyone else interested in having this? Or is it just us?

I had a brief look. It might be possible to use the classes added for tokenisation for the syntax highligher to quickly grab all the elements that are function names. I experimented with:

[].forEach.call(document.querySelectorAll('.syntax--meta.syntax--function.syntax--cfml'), function(f){
    var item = document.querySelector('.componentOutlineView__container').appendChild( document.createElement('li') );
    item.textContent = f.textContent;
    item.classList.add('list-item');
});

And got the following:

[homestar9]

Wow that is awesome progress! Nice Work!

I know for sure that a few other developers on my team that would be interested in this so we could use Atom for our component heavy projects. It might also be a cool thing to show off at the ColdFusion summit in a few weeks.

If we want to mimic the behavior in other IDEs we might want the component outline to start with the method name instead of the public/private returnType. Perhaps we could use icons to denote whether the method is public/private (IDEA uses a small lock icon)

Additionally we would want clicking on the outline list item to take the user directly to the line of code where the method starts. This would make jumping around your component lightning fast.

Finally, it would be cool if the currently active method (depending on where your cursor resides) could be highlighted in some way. IntelliJ IDEA does that. Here's an example: https://imgur.com/a/sPRyx

[David-Polehonski]

Well, that's a shopping list and a half.. Let's start at the bottom.. I added a flag in the settings this morning to enable/disable the feature to prevent it interefering with my work when I'm not developing it. This will be useful if we intergrate this feature we won't be forcing it upong users.

Now I think it's important to write out some specs for the feature so we have some tests to validate the development against for the existing work as well as new features. This will also give us the option to review whether we can use the grammar tokenization to pick out the components and function or if we'll need to do our own parsing. If you want to get involed I could request a pull from my fork into a feature branch.