Creating an aurelia custom element as an npm package (using the Aurelia CLI)

Question

I am using the Aurelia CLI for creating a SPA and it makes everything a lot easier compared to using Jspm.

However now we have some custom elements like: <my-custom-element></my-custom-element> that we want to package into an npm package so we can use it in multiple/other Aurelia CLI projects.

How would I go about creating it? I can't find any examples or documentation about this.

My guess is that I need to transpile my custom element files so that I end up with an npm package containing .js files (we use typescript) and the correct module loader synax (CommonJS?)?

My understanding is that I can't simply create an npm package that contains my my-custom.element.ts + my-custom-element.html file since it all needs to be transpiled, bundled and so on.

I am also guessing that I can't simply do an au build and use my bundles since that would bundle the entire SPA and not just my custom element files?

So what steps do I need to perform to create an npm package that contains a custom element that can be added to my Aurelia CLI project?

Any help or samples would be very welcome! Thank you!

Answer 1

There are a heap of ways you can do this. However, to keep things simple I am going to recommend the official Aurelia plugin skeleton for developing plugins, which you can get on Github here. If you venture into the src folder, you'll see a very basic example of a custom element and how you can make it global. The plugin skeleton uses Gulp for build tasks, which can be found in the build/tasks directory.

At present, you cannot use the Aurelia CLI to create a plugin. But in the future, you will most likely see this feature added into the CLI as it becomes more than just a CLI for creating applications.