How to create plugins

The best way to create plugins is using the create-project script to initialize a project from an up-to-date template with some basic plugin examples in order to use them as a reference to develop your own plugins.

At this moment, there is only a default template available, but we hope to add new ones in a near future. In any case, it is recommended to use the one the script generates.

Once you run the command you can create your repository from this template and change, add and remove the files as you need.

Template overview

The template can be divided into two different parts, the plugins/ folder and the rest. And the template can be considered as a repository that can have one or more plugins.

It's obvious that inside the plugins/ folder is where the plugins will be located. Plugins are explained here.

And, understanding that the rest are all those other files and folders which are not inside the plugins/ folder.

Special mention:

• .check-size.js has a configuration about the size-limit bundle of the plugins.

• .eslintrc.js has a default configuration for ESLint linter.

• .npmrc has the npm configuration to connect to the private registry. It's required to set the environment variable VSTS_NPM_AUTH_TOKEN which stores your auth token.

• .prettierrc has the default configuration for Prettier.

• .yarnrc contains rules to ensure that dependencies are modified properly when using yarn.

• babel.config.js has a default configuration for Babel compiler.

• commitlint-rules.js and commitlint.config.js configures commitlint to ensure that commits follow conventional commits guidelines.

• lerna.json configures lerna. It is important to understand that the repository is managed as a monorepo where each plugin is a package.

• Root package.json

• README.md and CONTRIBUTING.md explain the documentation and patterns to guide other developers to contribute on your plugins.

• renovate.json has basic configuration to update dependencies automatically with Renovate.

Root package.json

The package.json at the root of the repository (there are others for each plugins) contains:

• Information related to the repository, such as the name, repository, license, contributors, etc.

• dependencies and devDependencies required to work on the plugins. It is important to distinguish between the dependencies required by the plugins and the required by the repository (compare the root package.json and a plugin's package.json).

• Several scripts to use for development, pipelines, etc.

scripts

• build, build:prod, build:dev, and build:watch are used to generate the compiled bundles for each plugin. It relies on lerna to run the respective scripts for each plugin.

• check-size analyzes the bundle sizes of the packages and shows an error if the limit is exceeded. More info.

• commitmsg ensures conventional commits are followed before commiting.

• format and format:check use Prettier to format and check respectively the code.

• lint analyzes the code using ESLint.

• pack-plugins packs the plugins to prepare the deployment to the CDN. More info.

• preinstall, preuninstall, and preupdate ensure that yarn is used when managing dependencies.

• start will build all the plugins and watch for changes on them; serves the built bundles by a webserver.

• test, test:watch, and test --coverage run the tests using Jest.

• tunnel opens a tunnel to use the DevMode.

Usage

Setup

We use yarn to manage the dependencies of the project:

$ yarn

Run

This project requires of the DevMode to be used.

$ yarn start

and

$ yarn tunnel

Build

To build the solution, run the following command:

$ yarn build

Only production bundles:

$ yarn build:prod

Only development bundles:

$ yarn build:dev

Keep watching files to re-compile automatically (development):

$ yarn build:watch

Tests

Tests are coded an run using Jest. To run tests, run the following command:

$ yarn test

If you'd like to run them in watch mode, run this other command:

$ yarn test:watch

To check the code coverage given by the tests suites, just run:

$ yarn test --coverage

Linting

ESLint is used as linting tool. To run the linting, run:

$ yarn lint

Prettier

Use prettier to format the code. To format all the code, run:

$ yarn format

To check if all the code is well-formated:

$ yarn format:check

Update dependencies

In order to support upgrading dependencies, we recommend to use:

yarn upgrade-interactive --latest