Create a plugin

Setup

The name of your package should start with webdash-. For example, webdash-npm-scripts, or webdash-pwa-manifest.

For this tutorial, I'm going to assume the plugin is called my-plugin, so we'll need to create a folder called webdash-my-plugin

npm install -g yo generator-webdash-plugin polymer-cli bower
mkdir webdash-my-plugin
cd $_
yo webdash-plugin
# Use the automatically generated package name

Front-end

Open the newly generated project in your favorite editor

You can write your front-end logic in webdash-my-plugin.html as a Polymer 2 Web Component!

You can take inspiration from webdash-npm-script's front-end

If you decided to use ready made Web Components from webcomponents.org, make sure to always start your path with /bower_components/... For example: <link rel="import" href="/bower_components/paper-button/paper-button.html">

Back-end

• api.js at the root folder has a boilerplate that lets you extend the main webdash api by adding your own routes.

module.exports = {
  routes: {
    get: {
      'your-endpoint-name-here': (req, res) => {
          //...
      }
    }
  }
}

Here's an example that creates a GET your-endpoint-name-here that's only accessible for your plugin. You can also create post, put and delete endpoints as well.

Checkout webdash-pwa-manifest for inspiration.

Using the Back-end

Connecting the front-end to the back-end is easy. They're already connected through new instance of Backend as shown below

ready() {
  super.ready();
  this.backend = new Backend(WebdashMyPlugin.is);
}

and then you can query your API by simply running:

this.backend.get('scripts').then(data => {
    console.log(data);
})
.catch(error => {
    console.log('there was an error', error);
});

You also have access to .post, .put & .delete which work similarly. Checkout webdash-npm-scripts for inspiration.

Package setup

Webdash plugins are node modules published to npm. Update your package.json as needed

It is important to use the same package name that we've used along the way (e.g.: webdash-my-package).

Test

In order to test your plugin inside webdash, follow these steps:

1. Inside your webdash plugin, run npm link
2. Install the latest version of webdash inside a new folder (outside of your project)
3. Inside the webdash project (not the plugin), run npm link webdash-my-plugin which will now create a symlink to your plugin. Any change that you make in your plugin will be directly reflected in your webdash folder.
4. Notify webdash about your plugin by manually editing your package.json and adding "webdash-my-plugin": "*" to the devDependencies.

Design guidelines

If you plan on submitting your plugin to be verified & listed on webdash.xyz, please make sure to follow the below design guidelines:

• Only use colors defined on the :root element of the webdash application. You can see them here: https://github.com/jadjoubran/webdash/blob/master/index.html
• You can access these colors from JavaScript, for example:
• Please use the <empty-state-webdash> plugin that's already included if you'd like to show an empty state for the plugin. It helps you maintain a consistent design with other webdash plugins.

this.accent = getComputedStyle(this).getPropertyValue('--accent');

Code to go answer: How to get CSS custom property in JavaScript

Release

npm version patch or npm version minor or npm version major and then npm publish.

Done!

• Submit your plugin to be listed on the official plugins list.
• Create a new issue if you need help!