Plugins

Perhaps you are ready to take your components to the next level and allow other developers to use and reference them. You would accomplish this by creating a plugin so that any developer can use the package manager to install your components. As we have been using WebPack throughout this book, I will walk you through registering your plugin with Node Package Manager so that it can be installed on a developer’s box.

Plugins require a little more work with the third-party package managers, but once in place, using a plugin is a breeze. One thing to consider is that you should ensure the names of your components are unique and do not conflict with an Aurelia component or another third party. A common approach to solving this is to provide a prefix in front of all of your components to help keep their names unique. Let’s pretend that we are going to use the bs prefix and have the names bs-input and bs-attach-focus for our components.

We will want to have a separate project for our plugin repository. We will use GitHub for our repository. Let’s take a look at what the package.json would look like in our new project:

Code Listing 132

Please provide your own pertinent information from name down to repository. Under the section aurelia/build/resources, you will want to identify all of your components you wish to publish. Finally, provide whatever devDependencies and jspm entries you like.

The file structure for your project should look like the following:

Code Listing 133

This structure follows what you would see in the skeleton navigation example, with the exception that you only have your components in the src/ folder. The build/ folder handles all the building and bundling of the source code. The dist/ folder is what you get when you bundle your source for ready for deployment. The doc/ folder is where you would have your change log. The node_modules/ folder is what you get when you run npm install. The src/ folder is where all of your components reside. The test/ folder is where you would provide any tests for your components. The rest is pretty much standard.

A typical workflow is to have a separate project where you test your components in an existing application as a feature. This will allow you to rapidly correct any issues and then transfer any changes to this project. You will need to save your changes to your Git repository. Finally, you can publish your repository to the Node Package Manager with the following command:

Code Listing 134

If you haven’t already set up your npm author info, you will need to have following before you can publish:

Code Listing 135

You will be able to make changes to your Git repository and commit, but you will need to update the version in your package.json file before you try and publish again, as it will complain that you already have that version published.

The last step would be to consume the plugin from another project. You will first want to install the plugin using the following command:

Code Listing 136

Finally, you will want to be sure that your main.js file includes the plugin as follows:

Code Listing 137

This is a lot more complicated than just working with a feature, but once you have all the pieces in place, third-party developers will simply be able to install your plugin and update their main.js file, and they are ready to go.