We create package for Atom

Below I give an example of writing my own package for Atom.
We will create a package to generate marionettejs files based on the library I wrote about earlier .
To create a package, I suggest using package-generator (should be installed as a package in your Atom):

Go to the menu item Packages->Package Generator->Generate Atom Package
Enter the name. In my case atom-marionettejs-cli
Enter

Open our package for editing.
Preferences->Packages -> find your package, open it, View Code
Fine. Now edit the menu.
Go to ./menus/package-generator.cson , look into the documentation and customize for yourself.

My package-generator.cson

 'context-menu': 'atom-text-editor': [ { 'label': 'Generate marionettejs application' 'command': 'atom-marionettejs-cli:generate-app' } ] 'menu': [ { 'label': 'Packages' 'submenu': [ 'label': 'MarionetteJS CLI' 'submenu': [ { 'label': 'Generate marionettejs application' 'command': 'atom-marionettejs-cli:generate-app' } { 'label': 'Generate marionettejs file' 'command': 'atom-marionettejs-cli:generate-file' } { 'label': 'Set type' 'command': 'atom-marionettejs-cli:set-type' } ] ] } ]

And so, we want the user to be able to select the file that he wants to generate from the list. To do this, use the SelectListView :

View code itself

 {SelectListView} = require 'atom-space-pen-views' items = 'type': [ { label: 'ES6' command: 'es6' }, { label: 'CommonJS' command: 'cjs' }, { label: 'RequireJS' command: 'rjs' } ], 'file': [ { label: 'Layout' command: '--layout' }, { label: 'Collection' command: '--collection' }, { label: 'Model' command: '--model' }, { label: 'Router' command: '--router' }, { label: 'Object' command: '--object' }, { label: 'Item View' command: '--itemView' }, { label: 'Collection View' command: '--collectionView' }, { label: 'Composite View' command: '--compositeView' }, { label: 'Behavior' command: '--behavior' }, ] module.exports = class AtomMarionettejsCliView extends SelectListView mode: null viewForItem: (item) -> "<li data-command='#{item.command}'>#{item.label}</li>" showModalPanel: (@mode) -> @panel ?= atom.workspace.addModalPanel(item: this, visible: false) @addClass('overlay from-top') @setItems(items[@mode]) @panel.show() @focusFilterEditor() cancelled: -> @panel.hide() getCommand: -> selectedItem = this.getSelectedItemView(); return selectedItem.data().command;

Here is the live view.

Now consider our main file ( ./lib/atom-marionettejs-cli ). By the way, if you want everything to work, and the main file is in a different place or contains a different name, just change the line in your package.json
"main": "./lib/atom-marionettejs-cli"
During package activation, we will create our view and attach subscriptions to events that will triggered when clicking on a menu item:

 ... { 'label': 'Generate marionettejs application' 'command': 'atom-marionettejs-cli:generate-app' } ...

 activate: () -> @modalPanel = new AtomMarionettejsCliView() @subscriptions = new CompositeDisposable @subscriptions = atom.commands.add 'atom-workspace', 'atom-marionettejs-cli:generate-app': => @attach('app') 'atom-marionettejs-cli:generate-file': => @attach('file') 'atom-marionettejs-cli:set-type': => @attach('type')

Now we need to somehow handle the event per click in our list.

 @modalPanel.confirmed = -> path = getPath() command = @getCommand(); if @mode is 'file' fileName = filePrefix + command args = ['g', command, fileName, path] else args = ['s', command]; cli.run(args); @panel.hide()

The confirmed method is our SelectListView method. It is brought here, so as not to spread the CLI call ( cli.run() ) across different files.

Main file code

 AtomMarionettejsCliView = require './atom-marionettejs-cli-view' {CompositeDisposable, BufferedNodeProcess} = require 'atom' filePrefix = 'marionette-' cli = require 'marionette-cli/lib/cli' getPath = -> editor = atom.workspace.getActivePaneItem() file = editor?.buffer.file projectPath = atom.project.getPaths()[0] # if opened file or project doesn't exist if !file && !projectPath throw new Error ('Create project or open some file') # get path of opened file path = editor?.buffer.file.path # if no opened tabs if !path return projectPath regexp = /(.*\/).*/g # get path to file regexp.exec(path)[1] module.exports = modalPanel: null mode: null subscriptions: null activate: () -> @modalPanel = new AtomMarionettejsCliView() @subscriptions = new CompositeDisposable @subscriptions = atom.commands.add 'atom-workspace', 'atom-marionettejs-cli:generate-app': => @attach('app') 'atom-marionettejs-cli:generate-file': => @attach('file') 'atom-marionettejs-cli:set-type': => @attach('type') @modalPanel.confirmed = -> path = getPath() command = @getCommand(); if @mode is 'file' fileName = filePrefix + command args = ['g', command, fileName, path] else args = ['s', command]; cli.run(args); @panel.hide() deactivate: -> @modalPanel.destroy() @subscriptions.dispose() attach: (@mode) -> switch @mode when 'app' @generateApp() when 'file', 'type' @modalPanel.showModalPanel(@mode) generateApp: -> appPath = getPath() + '/app' cli.run(['new', appPath]);

Some small tips:

use the console for debugging ( View->Developer->Toggle Developer Tools )
After making changes to the files, reload the window ( View->Developer->Reload Window ), then check the performance of the code
when using third-party libraries, an error like Refused to evaluate a string as JavaScript because 'unsafe-eval'... Loophole can be used to combat it.

We write documentation, put in order package.json and can be released.

 git commit -am 'first release' apm publish --tag v0.1.0 minor

Repository on Github
Package at atom.io
Thanks for attention.
PS Do not judge strictly, it was my first experience with coffeescript .

Source: https://habr.com/ru/post/280057/

All Articles

We create package for Atom

More articles: