Get the Newsletter

Aurelia 2 Update - Alpha 12

Posted by bigopon on July 12, 2021

There have been a few improvements since our last update for Aurelia 2 alpha 8. The focus of our progress has been introducing various missing powerful features from v1, namely template compilation hooks, caching control of [if]/[else] and DI factory resolution.

It's now possible to hook into compilation with compiling, there is also a powerful @factory decorator for instantiating services. An example of registering a compiling hook globally is as follows:

    
  import { templateCompilerHooks } from 'aurelia';

  @templateCompilerHooks
  export class A11yScanner {
    compiling(template) {
      template.content.querySelectorAll('img').forEach(img => {
        if (!img.hasAttribute('alt')) {
          console.warn('no alt on img');
        }
      });
    }
  }

  Aurelia.register(A11yScanner);
    
  

The hydration story of v2 also got better with the introduction of an injectable IHydrationContext, which allows an application to capture the hydration hierarchy, which helps components learn about the context of their usage, empowering devtool integration.

Another v1 feature that is now in v2 is the caching control ability of if/else. An example is as follows:

    
  <my-component if="value.bind: condition; cache: false">Created every time {condition} changes false -> true<my-component>
  <my-other-component else>Created every time {condition} changes true -> false<my-component>
    
  

Thanks @rzasinets for the issue at https://github.com/aurelia/aurelia/issues/1230

In addition, <au-compose> got some ergonomic enhancement: containerless now works with <au-compose>, which should help remove unnecessary wrapper code while dynamically composing components.

<au-render> also got some new capability: it's now possible to use component name to render, instead of definition. An example is as follows:

    
  <import from="./weekly-report"></import>
  <import from="./monthly-report"></import>
  <import from="./annually-report"></import>

  Select report:
  <select value.bind="reportType">
    <option>weekly</option>
    <option>monthy</option>
    <option>yearly</option>
  </select>
  <au-render if.bind="reportType" component="${reportType}-report">
    
  

It's a small change that should improve the ergonomic and usefulness of the <au-render>.

Aside from the features, the core is also getting cleaned up to be leaner and faster. These updates also lead us to the following news about the distributable story: there are now three variants for development, production with bundler and vanilla usages.

The dist files of each package now look like this:

    
  📁 esm
    📜 index.dev.js
    📜 index.js
    📜 index.prod.js
    
  

The difference between the dist can be summarized per the following table:

Aurelia distributable comparison table

Until next time

Thank you to everyone for their continued support, especially those who have contributed to Aurelia 2 and helped get it to its current point. If you ever have any questions or issues, please don't hesitate to reach out. The best place to ask questions is on the Aurelia Discourse and any bugs or feature requests on the Aurelia GitHub . Or maybe just come over to the Aurelia Discord channel for some chat