Build Aurelia 2 Plugins and Bundling With Only TypeScript

The Aurelia 2 makes command ships with the option to scaffold applications and plugins. However, the plugin scaffold uses Webpack and a bunch of dependencies for building plugins. There are reasons that the plugin skeleton uses Webpack.

Firstly, HTML imports need to be inlined in bundled code or you’ll encounter issues with HTML files not being supported by Aurelia conventions when you consume them in your plugins. The same thing applies to CSS styles, you’ll want to inline those as strings too.

I just wanted to build a plugin using TypeScript to compile the code and use a Node package to copy any static assets over.

Change your imports

For my HTML and CSS styles, I simply rename them to ts files. For example, if my component had a stylesheet called my-component.css, then I would rename it to be my-component.css.ts and inside I would use a default export with template literals.

export default `.my-class { color: red; }`;

The same thing for HTML. If I had my-component.html then I would rename it to be my-component.html.ts

export default `<button disabled.bind="disabled" class="button \${color} \${size}" title.bind="title" type.bind="type" part="button \${color} \${size}" click.trigger="innerCallback()"><slot></slot></button>`;

This is a real example from my Cardigan UI library.

The beautiful thing is inside of your components if you were previously importing your CSS and HTML files, the imports look the same.

import styles from './cardigan-button.css';
import template from './cardigan-button.html';

It appears we are importing a CSS and HTML file, but they’re TypeScript files with default exports. When your plugin is consumed inside of an Aurelia 2 application, the HTML and styles will also work.

There is some discussion about Aurelia supporting conventions in plugins so you don’t have to inline HTML and CSS, but for now, this is the most reliable way to do it if you want to avoid using a bundler like Webpack to build your plugins.

If you want to see the above put into practice, my Aurelia 2 Plugins repository uses this approach and showcases how to use TypeScript for compiling an Aurelia 2 plugin.