Atom plugin

[tomitrescak]

I was thinking of creating an atom plugin that would work closely with your future yeoman functionality. The plugin would suplement the standard treeview and facilitate creation of Mantra components and navigation in a Mantra application. It would display the project in a Modular way and provide new dedicated buttons and menus for Mantra. It would also allow to search and navigate easily between module's components just by using specific keystrokes (e.g. switch from actions to routes in a module just by pressing CMD+SHIFT+R). Do you think that this will have any added functionality for Mantra devs, or is it just a waste of time? Thanks for your comments.

[jiku]

@tomitrescak sounds like a great idea to me. Along with snippets etc. Community-driven integrations like these for the most common IDE's would definitely not be a waste of time, and using Atom I'm sure I'd use this. In time maybe MantraJS could either officially link to or host their repo's.

[arunoda]

@tomitrescak This is not a waste of time. This is just great. We can couple this with the yeoman generator and the Mantra Linter.

Let me know when you started to work on this. I'm happy to do a guess post on Kadira Voice when it's the time for the first release.

[tomthebuzz]

Definitely worth the while from my perspective. Strong snippet support would likely help to embrace the more cumbersome (but architecturally sound) Mantra approaches faster. And it would help noobs (like me) to adopt the Mantra a principles and best practices.

[rolfnl]

@tomitrescak Sounds great, didn't even know you could display projects in a different way than the default dir structure tree view. I like Atom a lot, and it seems Mantra is in it for the long run, so it doesn't sound like a waste of time.

[zmilan]

@tomitrescak Sound great

[bearcanrun]

@tomitrescak I'm just getting into modules and mantra, but the easier navigation + search between components would already be a huge helper.

[tomitrescak]

Dears, below you find a simple demo of the plugin. Please consider it only as a proof of concept rather than alpha. I seek collaborators and ideas to deliver a nice and stable package:

Quickstart

1. Install the package in the Atom package manager (name is mantrajs)
2. Start the plugin with "ctrl+alt+o" (you may need to press it twice)

Functionality:

• custom pane to display Mantra modules and components
• automatically generate a module
• automatically generate module components from the menu
• generate server components
• several snippets for mantra components ()
• init a new mantra app automatically

Known errors

• many, but the most pressing is that context menu does not work properly as the treeview does not contain desired elements. I think I will disable it.

[arunoda]

@tomitrescak Wow. This is great. I'd love to try this tonight.

[zmilan]

@tomitrescak Great. Can't wait to try this.

[tomitrescak]

Few things on my todo

• automatically generate index.js on actions as proposed by mantra specification
• automatically generate main.js where we load modules

Both items are prepared in snippets but need to be implemented

What I need help with

• new ideas on what to implement
• design and implement tests for the package
• about anything else ;)

[Koleok]

Yes and yes. I would love to pull this down and try to help out.

[Koleok]

Also wow, this repo just opened my eyes to wallaby, amazing

[tomitrescak]

Guys, there is a new version. Thanks for reporting the issues. I guess the most dangerous part was deleting files and directories from the mantra pane which led to unexpected results. In the new version, this context menu is disabled. I added the possibility for using typescript instead of javascript, what is configured in the plugin preferences.

I would love your feedback on what would you like to have there or possibly change.

Arunoda reported that module list is not populating after a new module is created, did anyone else have this problem?

[tomitrescak]

Dears, not sure if the initial version was such a disappointment, as I got no feedback here, but I kept working on it and making it stable and more usable. There are several things that have been added and noted below. Please, give me any feedback if possible and advices for imporvements.

1. Code generation - It is possible now to modify the generated code based on placeholders (here I would like feedback on possible template structure and placeholders). Also, please not, how components are automatically registered inside index.js

   

2. Similar functionality for modifying placeholders works for module components

   

3. When new module is created it automatically creates all necessary directories and register module in main.js of the mantra app

   

4. It is possible to initialise all directories and mantra files in the empty Meteor project just by toggling the mantra plugin

   

5. Mantra plugin settings are kept in the mantra.json file
6. Context menu was disabled in mantra pane, as this led to problems with file deletion, which often led to unexpected deletes.

Please let me know.

[jiku]

Great stuff @tomitrescak. Not disappointed, just processing. Init from empty looks very intuitive from the gifs. Tried very quickly and had some issue with missing mantra.json. Sending a PR if I can figure it out.

For ideas, based on your Mantra/Webpack boilerplate, etc, I think you already have some ideas about extending your Atom package modularly, to cover integrations between X and Mantra? X being something like Meteor-Webpack, and assuming it offers enough past just using and doesn't conflict too much with Mantra.

Personally, I'm interested in how to convert existing Meteor < 1.2 projects. When the dust settles a bit on Meteor 1.3 and subsequently Mantra (and Meteor-Webpack), I'm hoping to use it and your Atom package to help upgrade a 1.2 project (http://github.com/jiku/again) which partly uses Meteor-Webpack. Until then trying to keep some healthy distance. Thanks for all your hard work on it!

[fakenickels]

Seems awesome

[tomitrescak]

@jiku actually, that is what the whole mantra.json is all about, to get webpack working with mantra. You need to specify whether you use typescript or JavaScript, then you set the root of you mantra project, e.g. modules/MantraTS for webpack app and you set the libFolder to 'common' for the same project as webpack has issues processing files from the lib folder and boilerplate is configured for it. Test it out and let me know. Works well on my configuration.

[tomitrescak]

There is a new commit solving the mantra.json issue.

@arunoda what do you think, I hope that first version did not mess your modules too much :/ Now I think it can be called alpha. But I could use some feedback on templates and their processing for code generations. Actually current idea is to use mantra.cson in which I would keep the copy of all mantra templates which can be modified by user if need be.

[tomitrescak]

Dears, to make stuff easier for you to try this plugin, I published it to Atom repository and tested it. Now you can simply install the plugin by searching for "mantrajs" in Atom editor plugins. Thanks

[arunoda]

@tomitrescak great. I'll give it a try this weekend.

[rolfnl]

@tomitrescak

1. When I'm in a existing project and I hit ctrl+alt+o and create a new component it doesn't create the containers directory. Is that correct behaviour?
2. For me I prefer the ES2015 syntax instead of keeping function, like export default () => { ... I don't know, maybe it could be switched our with a checkbox? I don't know if that's technical possible easily ;)
3. Tab doesn't work in the 'modals' when creating a new part (component, action, whatever) so you manually have to go to the next field. Maybe it's left out because it's an alpha release, or maybe it (should) work?
4. Another nitpick, the default serif font in the dropdown select menu is ugly :)

[tomitrescak]

@rolfnl I will create an issue on the project page so we can discuss it there, thanks for reporting back!

[arunoda]

@tomitrescak Now it's work great generally expect for the issues mentioned by @rolfnl And the automatic composer generation is great!

If we can improve the + Icon in some way. I hope that would be great. You can try this:

• Use NEW in bold capital letters
• add light grey background to that

[tomitrescak]

Just an update. Version 0.2.0 has a possibility to define custom templates, so everyone can adopt their mantra files to their own liking. There are some other perk displayed on the project page. Also, in combination with file-icons plugin you can get a pretty cool look such as this one :)

Feedback welcome.

[arunoda]

@tomitrescak We are not required to use typescript right?

[tomitrescak]

@arunoda of course not. It's just that I am working on a mantra project where I use typescript, therefore, screenshots and examples show typescript. I understand that can scare people. Once all will settle, I will replace all examples with javascript. But, the plugin already fully supports JS and it is its default option.

[arunoda]

@tomitrescak Thanks for the clarification. Nice work on the new update. Can't wait to try it out.

[tizol]

This is great. I am definitely going to use it. Thanks!@tomitrescak!

[tonyxiao]

For some reason when I hit toggle nothing happens. I'm not sure if that has anything to do with my also using Facebook's Nucleus. Has anybody else run into that?

[smooJitter]

The problems i with Nucleus. Nucleus takes over Atom's core tree view. I had to uninstall Nucleus.