How to Submit Element to Visual Composer Hub

In this article, I'm going to cover the steps you need to know if you want to submit your custom element to Visual Composer Hub.

Once you've created a custom element you have an option to submit it to Visual Composer in order to showcase it in the Hub. If you decided to do so, there are some code-style rules you have to follow.

Overview

Visual Composer dev team sticks to a certain set of code style rules in order to keep the code clean, more readable and reduce the number of bugs. The general code style rules are listed in the official GitHub repository under the contributing guide.

Every element in the Hub undergoes a test, build and deploy process in the CI pipeline. During this process, element files get validated for certain code style rules. Thus the submitted element has to match all of these rules.

Where to begin

First off you need to download the example plugin if you haven't already. The code that comes within this plugin is already formatted to match the defined code style.

Once you've installed the example plugin you are now ready to edit it.

Setup code style

JavaScript

To validate JavaScript code we use standardjs.com. It is a:

JavaScript style guide, linter, and formatter

All of the code style rules are listed at standardjs.com/rules.html. No need to remember them all, the standardjs will format the code for you.

To start using it, inside the terminal enter the elements' folder (if you are working inside the example plugin):

cd elements/logoSuperTest

then run:

yarn install

Now you are able to check JavaScript code style with the command:

yarn standard

This command will output any errors with description and location in a file. In order to automatically format the code, run:

yarn standard --fix

To see formatting errors instantly inside your files you should install the appropriate plugin for your editor. Check if your editor has such a plugin at standardjs.

I'm going to show you how to set up a StandardJS plugin for Visual Studio Code editor.

1. Open Visual Studio Code editor;
2. Click on the Extensions icon in the Activity Bar; 
   
3. In search field enter StandardJS - JavaScript Standard Style;
4. Look for the right one and click install; 
   
5. Disable built-in JavaScript code validator by opening Settings;
6. Inside Settings click on the Workspace tab, to apply these settings only for this workspace;
7. In search field type javascript validate;
8. Uncheck the Enable/disable JavaScript validation;
   
9. That's it, you're all set.

Now, the editor will instantly highlight the code that doesn't pass the code style rules.

In some cases, there could be exceptions to the rules. For instance the public JavaScript files - the ones that are loaded in the View Page like a 3rd party library. To avoid conflicts add this comment to the start of the JavaScript file:

/* eslint-disable */

And at the end of the file, on the last row add:

/* eslint-enable */

These commands will prevent standardjs from validating these files.

Note: We encourage you to use this approach only in uttermost cases.

PHP

For the PHP we use PSR-2 Code style and CodeSniffer that is configured in elementName/ci/ruleset.xml file, to check PSR2 rules http://www.php-fig.org/psr/psr-2/.

NOTE: element folder should contain ci folder just like in the example plugin.

To validate PHP code style, inside terminal enter the elements' folder (if you are working inside the example plugin):

cd elements/logoSuperTest

Then to validate PHP code run (change logoSuperTest to your elements' name):

php ci/phpcs.phar --standard=ci/ruleset.xml logoSuperTest

This command will output any errors with description and location in the file.

Just like with JavaScript, in PHP you might have cases when you need to prevent validation of code style. To do so there's a command for that, add it before the line you don't want to validate:

// @codingStandardsIgnoreLine

Note: Again, we encourage you to use this approach only in uttermost cases.

Other files (JSON, CSS, etc.)

As for the other files formats like .json or .css, there are not any strict rules, but still, there are some general guidelines you should follow:

• Use 2 spaces for indentation;
• Use a space between a CSS selector and an opening bracket;
• Use a space after the colon in JSON files.

You always can use existing Visual Composer elements files as a reference. These elements come with a Free version and are available at the GitHub repository.

Submit

Once you've finished developing your element and prepared a zip file of your element as per Visual Composer element boilerplate, you are ready to submit it to us.

To do so, please create a new ticket in our demo element repository with the title "Submit Element To Visual Composer Hub", label 'Enhancement' and attach the archive with your elements there.

After element submission, our development team will carefully review the code and include your element in the Hub to run tests against it. If any errors will be found we will provide you with a descriptive list of thing that needs to be fixed. After that, the submission process has to be repeated.

When your element will pass review and testing process, we will notify you about that and include your element in the Hub.