• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Build Aurelia 2 Plugins and Bundling With Only TypeScript

Aurelia 2 · September 29, 2022

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.

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
kevmeister68
kevmeister68
6 months ago

Gee that looks ugly. Will the import work if the HTML or CSS is spread over multiple lines?

You state a solution here — but what is the actual problem you are solving? Why are you trying to avoid webpack in the first place?

0
Dwayne
Dwayne
Author
6 months ago

@kevmeister68

The problem is without a bundler, Aurelia’s conventions do not apply to plugins in v2. Which means assets like HTML and CSS will not be loaded if you don’t have a bundle step which inlines the code or you do the inlining manually. I’m choosing to inline manually because Webpack is a nightmare to keep up to date, it’s a mess of loaders and breaking configuration changes.

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • Wild Natural Deodorant Review
  • How To Install Eufy Security Cameras Without Drilling or Using Screws

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz