Using COLT annotations in front-end development

COLT / JS (Code Orchestra Livecoding Tool) is a JavaScript pre-processor. This means that to achieve the effect of “live coding”, the application needs to convert the source code to JavaScript in a special way so that you can do a “hot-swap” implementation of any function as soon as the user changes its source code and saves it. The power of such transformations can be used not only for the “live coding” task, but also for other, simpler tasks.

In order to use the COLT code transformations for simple and everyday tasks that any JavaScript developer faces, we added this feature as annotations.
')
COLT annotations allow you to use special labels, in the form of comments that prompt the COLT pre-processor, where to add something to your code during the livecoding session.

A livecodig session is a process that starts when a user clicks on the green lightning in COLT. During such a session, COLT “observes” the source code of the project and, if it is changed, it is transformed, transformed and put into another folder (output). A live session also implies opening at least one application (HTML page) of a project and communication between COLT and such a page (Live-connection) for delivering changes in Run-time.

Annotations have the form of a comment that begins with the character "@", for example /*@edit*/ or //@log . Depending on which form of comment you use, single-line or multi-line, the behavior of the annotation may change.

Let's go over the annotations.

Inspectable Annotations

Often in the process of Livecoding, you have to “tyunit”, adjust the values ​​of arguments and properties. Sometimes you want to have a visual tool, a form for editing such properties right in the running application. To add such forms is simple - to the left of a numeric or string constant add a comment /*@edit*/ . Go to the page window in Live mode and press the ctrl + I combination.



Move the "slider" and find the value that suits you as much as possible.

Using Inspectable annotations is also useful when you need to connect a designer — you need to “give tuning” to another page. Since COLT launches the application via a network address, you can add such annotations to the code and send a link. When you change property values, your code will be changed.

Thus, Inspectable annotations can be a good help for your team - you can create blanks for visual work and give to designers who could set the values ​​themselves.

Developing this idea, we added additional parameters to the Inspectable annotation.

name - you can name your parameter.

min - the minimum value.

max - the maximum value.

target - jquery code that shows which object you are working with. Visually, it looks like a “rope” that stretches from the form to some element of the page.

type (in development) - we will add different controls for editing properties.

enum (in development) - a list of values.

group (in development) - the ability to combine forms into groups.

To add parameters to the annotation you need to add parentheses -

 /*@edit(name="",min=0,max=10)*/ 

Values ​​are separated by a comma, and have the form of normal JavaScript - assign values ​​to variables.

It is also worth noting that annotations have Live behavior, and as soon as you add / change the annotation parameter in the code, the form of the parameter input will change.

Annotation @log

Very simple, but extremely useful annotation. Now instead of console.log () you only need to mark the expressions of this annotation.

For example, you need to output the variable b to the console.

 var b = 2; var a = /*@log*/ b + 1; // -> 2 

If you need to display the entire expression, then @log must be put using the comment line -

 var b = 2; var a = b + 1; //@log // -> 3 

Annotations for livecoding

To handle and manage life-cycle lifecoding events — code and file updates, you can annotate JavaScript functions, and such functions will be performed when the desired event occurs.

@ live-update - update code or file
@ code-update - update code only
@ asset-update - update any file png, jpg, gif, etc.
@ css-update - style update
@ disable-livecoding - disable livecoding for some function

Conclusion

We hope that our idea to use JS comments as annotations will be to your taste. Using tags for console output or editing constants right on the page seems to be a good reason to "play." Maybe this toy can become a real tool in your work.

If you have ideas, what other annotations can be added to JS with the help of COLT, or how to develop the functionality of existing ones - throw ideas in the comments or in our tracker .

Download COLT on codeorchestra.com