Calcium plugin

We developed an IDE plugin that uses calcium to provide content assist for JavaScript, which you can find at calcium plugin for webida.

Overall architecture

The previous diagram is simplified for calcium from hyukmin-kwon's bigger diagram. Let us briefly explain each of the components.

• CodeEditorViewer is the class for editor instances of Webida IDE. In principle, content assists are executed as commands of CodeEditorViewer.
• ContentAssistDelegator knows all the registered assist controllers. When an assist command is executed by the editor viewer, it handles the command by one of the controllers that support the command.
• CalciumControl is the controller for calcium. It implements the interface IContentAssist whose abstract methods are canExecute and execCommand. Using these APIs, the ContentAssistDelegator can find out its assist commands and execute them.
• Assist Worker is the entry point of the web worker for content assist. When receiving a message induced by an assist command, it first finds out the appropriate engine module to process the message. When the message is for calcium, it executes the corresponding method of CalciumEngine.
• CalciumEngine is basically an object that contains methods to process the messages. The object is created in the module calcium-server.js. CalciumEngine internally invokes calcium's APIs to make the responses for the messages.

Assist features

There are the assist features of the calcium plugin that you can use on Webida IDE.

• Rename variables : When the cursor is at a variable, we can rename all the occurrences of the variable via a simple dialog.

• Select same variables: When the cursor is at a variable, we can select all the occurrences of the variable using multiple selection. See the following screenshot for the result of selecting occurrences of variable clear.

• 

• Highlight same variables : When the cursor is a variable, the plugin automatically highlights all the occurrences of the variable. It helps find the variable when scope gets complicated. For example, see

• 

• Highlight same this keywords : When the cursor is at this keyword, the plugin automatically highlights all the occurrences of the same this and the owning function's function keyword. Especially when ordinary function and arrow functions are mixed, this feature helps find the equivalent thiss and the owning function of this. For example, see

• 

• Jump to function definition : When the cursor is at an expression and the analysis has found that the expression can have a function value, we can jump to the definition site of the function by pressing Alt-.. For example, in the following screenshot, we can jump from the call site to the definition site.

• 

• Currently, we jump only within a single file.

• Highlight escaping statements : The plugin highlights escaping statements for a function block or a try block when the cursor is at throw, function or return keywords. This feature helps examine the overall execution flow related to such keywords. Though this feature is taken from WebStorm, we tried to be more precise on throw statements and catch blocks. For example, see

• 

• Auto-completion : Calcium plugin provides auto-completion of variable names and property names. When the cursor is at a position of property, it looks into the types of receiver and shows the property names as the completion candidate. At other position, it looks into the scope structure and provides the valid variables as the candidate.

• 

• Show type information : When we select a region and press ctrl-I, the plugin shows the type of the selected expression.

• 

• Show argument hints : Calcium plugin automatically shows argument hints when the cursor is at arguments of call expression. It additionally emphasizes n-th parameter name when the cursor is at the position of n-th argument.

•