Get the Newsletter
Today, we're excited to announce the beta of Aurelia's Web Components plugin, enabling you to use your Aurelia custom elements as Web Component standard custom elements, easily inter-operating with other frameworks.
Aurelia has always valued strong web standards usage. That's why when we launched Aurelia over four years ago we leveraged native HTML templates and Shadow DOM, two of the three major features under the Web Components umbrella at the time. However, we didn't feel that for application development there was a benefit to utilizing the emerging custom element API of the browser. In fact, in common application scenarios, it had a negative effect. This stems from initial use cases the W3C had for Web Component custom elements, which were mostly oriented around sharing of individual widgets, rather than building out full apps. However, we still wanted to support this standard. To that end, our plan was always to provide a plugin that would enable seamless sharing by transforming Aurelia elements into Web Component custom elements via a simple API. It's that plugin that we're announcing today.
To use the Aurelia Web Components plugin, first install it via NPM:
npm install aurelia-web-components --save
With that in place, we can configure the plugin:
import { CustomElementRegistry } from 'aurelia-web-components';
export async function configure(aurelia) {
aurelia.use
.basicConfiguration()
.globalResources('resources/my-component');
await aurelia.start();
const registry = aurelia.container.get(CustomElementRegistry);
registry.useGlobalElements();
}
The code above tells Aurelia to register a global element located in the resources folder, named my-component. It then uses our new plugin to make all of our known global Aurelia elements into standard Web Component custom elements. That's done with the registry's call to useGlobalElements().
Using this technique you can bundle up your Aurelia elements as Web Components for anyone to use. That's all there is to it.
For more information on this plugin, have a read through the readme file on the repo. As we move through the beta period, we'll be adding this documentation to the official plugins section of the site.
This month we also had a number of other releases to Aurelia's core, plugins, and tools. There are two items of particular note:
- Aurelia CLI - With the latest CLI release (1.0.0-beta.15), we now have an option to scaffold a plugin project, in addition to scaffolding an application. To create a plugin project, simply execute
au new --plugin. - Virtual Scrolling - We've been working hard on our virtual scrolling plugin to make it ever more versatile, allowing it handle different dom structures, CSS, and edge case rendering.
Details on these update and all other libraries are available below.
Cheers!
Minor Releases
Minor updates include new features, updates to bugs, and performance improvements.
aurelia-cli 1.0.0-beta.14
Bug Fixes
- bundler: avoid unnecessary rewrite of index.html ( 9faea2f ), closes #1049
- bundler: enable tracing @babel/polyfill ( 1bef893 )
- bundler: improve compatibility with legacy libs that depends on jquery or momentjs ( cd079a0 )
- bundler: improve compatibility with nodejs global var "global" ( 02d1cd0 )
- bundler: isolate cache between systemjs and requirejs apps ( 5466ceb )
- bundler: skip deps cleanup (remove .js) for UMD file ( a4731da ), closes #1054
- cypress task: Return error when tests fail ( ea43b59 )
- cypress task: Return error when tests fail ( 7fa7e9e ), closes #1057
- generate-skeletons: add missing httpProtocal to project definitions ( bab0e39 )
- jest task: Return error when tests fail ( bfbe072 ), closes #1052
- jest task: Return error when tests fail ( 830bda8 )
- skeleton: fix navigation scaffold with alameda ( 9413239 )
- sourcemaps: strip path from bundle sourcemap ( 8601622 )
- webpack: correctly exclude spec/test files from coverage report ( b2582f9 )
Features
- generate-skeletons: add alameda to generate-skeletons ( 0147567 )
- integration-test-runner: Add Cypress ( 4b5919a )
- integration-test-runner: Add Cypress ( 77c6f60 )
- integration-test-runner: Add Cypress ( 1ece72e )
- integration-test-runner: Add Cypress ( f2eb6c5 )
- integration-test-runner: Add Cypress ( 21ac3db )
- new-application: fix format on log messages ( 6d6fcea )
- test: Add Cypress integration test runner ( cabe6ce ), closes #943
- ui: add Enquirer as UI lib ( f05da1a )
- unattended mode, descriptive skeleton ( 0123c58 )
aurelia-cli 1.0.0-beta.15
Bug Fixes
- jest mock: Add stub for static content ( 9268d5c )
- karam: ensure the element under testing is traced by webpack ( d6bab9d )
- new-application: add missing dep clean-webpack-plugin to dotnet-core+webpack app ( 7534244 ), closes #1072
Features
- all: use core-js v3 to replace deprecated @babel/polyfill ( 990af96 ), closes /babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
- scaffolding aurelia plugin project ( f5b2367 ), closes #658
- generate-skeletons: add plugin skeletons to "au generate-skeletons" ( 245ce7e )
- release-check: add release-check on plugin projects ( 05c5980 )
aurelia-validation 1.4.0
Bug Fixes
Features
aurelia-templating-resources 1.9.0
Bug Fixes
Features
aurelia-ui-virtualization 1.0.0-beta.5
Bug Fixes
- array-repeat: properly check when to ignore update views ( 9b9d5b7 )
- array-repeat: properly handle end of array instanceChanged() ( f44eb98 )
- interfaces: properly handle first/last element gets ( eb6e4a3 )
- repeat: add sizing handler ( 7f41efa )
- repeat: correct calculate distance to scroller for top buffer ( 75b6ad5 )
- repeat: correctly handle mutation ( 2a9eaf5 )
- repeat: handle mutation properly ( eafbfe1 )
- repeat: keep scroll up/down states when handling scroll ( a6d6bfa )
- repeat-scrolling: correctly determine scrolltop when scrollr el is not documentElement ( e8e14a1 )
- tests: adjust tbodies/tr tests, better description ( 6610116 )
- tests: adjust tbodies/tr tests, better description ( 6d77586 )
- tests: update/add tests, add comments, rename variables for better readability ( fe9f433 )
- virtual repeat: prepare new tests, add examples ( fd45928 )
- virtual-repeat: properly calc for fixheight ct ( 5171740 )
- utilities-dom: use window.getComputedStyle for hasOverflowScroll ( 4b015d2 )
Features
Patch Releases
Patch updates include only fixes to bugs and performance improvements.
aurelia-binding 2.2.2
Bug Fixes
- all: change es2015 back to native-modules ( 13dd661 )
- build: don't build declaration ( d359e83 )
- connectable-binding: remove the silent limit of 100 observers per expression ( 56ba36d ), closes #742
aurelia-fetch-client 1.8.2
Bug Fixes
- all: change es2015 back to native-modules ( 14245e8 )
- build: adjust build script, add umd es2015, fix unpkg field ( b62089f )
- retry-interceptor: conform to Interceptor interface ( daae14b )
aurelia-templating 1.10.2
Bug Fixes
- all: change es2015 back to native-modules ( ea50719 )
- ElementEvents: ElementEvents.defaultListenerOptions allows to set default options when subscribing to events ( f7e8e32 ), closes #657