${user.bio}
- ${item.name}
- ${user.name}
Content
Styled
Details here
Visible content
- ${item.name}
```
```typescript
// Computed properties needed @computedFrom
import { computedFrom } from 'aurelia-framework';
export class UserProfile {
firstName: string;
lastName: string;
@computedFrom('firstName', 'lastName')
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
```
{% endtab %}
{% tab title="Aurelia 2" %}
```html
```
```typescript
// Computed properties - no decorator needed!
export class UserProfile {
firstName: string;
lastName: string;
// Automatically computed - Aurelia 2 figures it out
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
// Complex computations work automatically
get filteredItems() {
return this.items
.filter(item => item.isActive)
.sort((a, b) => a.name.localeCompare(b.name));
}
}
```
**Key improvements:**
* **`.class` binding**: Clean conditional CSS classes
* **Automatic computation**: No need for `@computedFrom` decorator
* **Lambda expressions**: Filter and transform data in templates
* **Better ref binding**: `component.ref` for accessing component instances
* **Function return in events**: Event handlers can return functions
{% endtab %}
{% endtabs %}
***
## What's New in Aurelia 2
Beyond the improvements to existing features, Aurelia 2 introduces several entirely new capabilities:
### Shadow DOM Support
```typescript
import { useShadowDOM } from '@aurelia/runtime-html';
@useShadowDOM({ mode: 'open' })
@customElement({
name: 'isolated-component',
template: '
Default Header
Default Content
`,
style: `
.card { border: 1px solid #ccc; border-radius: 4px; }
.card-header { background: #f5f5f5; padding: 1rem; }
.card-body { padding: 1rem; }
`
})
export class EnhancedCard {
// Advanced component features
}
```
### Watch Decorator for Advanced Observation
```typescript
import { watch } from '@aurelia/runtime-html';
export class SearchComponent {
searchTerm: string = '';
results: SearchResult[] = [];
@watch('searchTerm')
async searchTermChanged(newValue: string, oldValue: string) {
if (newValue.length > 2) {
this.results = await this.searchService.search(newValue);
} else {
this.results = [];
}
}
}
```
***
## Migration Checklist
Use this checklist to ensure you've covered all aspects of your migration:
### 🏗️ **Project Setup**
* [ ] Update HTML entry point (remove `aurelia-app`, add root component)
* [ ] Rewrite main.ts bootstrapping code
* [ ] Update package.json dependencies
* [ ] Configure bundler for Aurelia 2 (no `PLATFORM.moduleName` needed)
* [ ] Set up TypeScript configuration for better type checking
### 🧩 **Components**
* [ ] Convert `` to `` in templates
* [ ] Remove `` wrappers (optional)
* [ ] Update component lifecycle hooks (`canActivate` → `canLoad`, etc.)
* [ ] Add CSS files with matching names for auto-loading
* [ ] Update any custom element/attribute decorators
### 🔗 **Data Binding**
* [ ] Replace complex class binding with `.class` syntax
* [ ] Remove `@computedFrom` decorators
* [ ] Test lambda expressions in templates
* [ ] Update any custom value converters or binding behaviors
### 🚦 **Routing**
* [ ] Convert router configuration to declarative `@route` syntax
* [ ] Update lifecycle hooks: `canActivate` → `canLoad`, `activate` → `loading`, etc.
* [ ] Update `` to ``
* [ ] Test navigation and parameter passing
* [ ] Update any router hooks/guards
### 💉 **Dependency Injection**
* [ ] Convert `@autoinject` to `resolve()` or `@inject()`
* [ ] Update service registration to use new `Registration` API
* [ ] Create interface tokens with `DI.createInterface()`
* [ ] Update resolver usage (`Lazy` → `lazy`, etc.)
* [ ] Test all dependency injection scenarios
### 📝 **Logging**
* [ ] Replace LogManager setup with LoggerConfiguration
* [ ] Convert custom appenders to sinks
* [ ] Update components to use injected ILogger
* [ ] Test logging output and configuration
### 🎨 **Templates and Features**
* [ ] Test all template binding scenarios
* [ ] Verify custom elements/attributes work correctly
* [ ] Update any template controllers
* [ ] Test conditionals, repeaters, and value converters
* [ ] Verify event binding and handling
### 🧪 **Testing**
* [ ] Update test setup for Aurelia 2
* [ ] Update component testing approach
* [ ] Test lifecycle hooks in test environment
* [ ] Verify dependency injection in tests
* [ ] Update any integration tests
### 🔧 **Advanced Features**
* [ ] Consider adding Shadow DOM where appropriate
* [ ] Implement any custom attribute patterns needed
* [ ] Set up enhanced state management if needed
* [ ] Add watch decorators for complex observation scenarios
***
## Conclusion
Migrating from Aurelia 1 to Aurelia 2 brings significant benefits: better performance, improved developer experience, enhanced type safety, and modern JavaScript features. While there are changes to learn, the core concepts remain familiar, and the improvements make building applications more enjoyable and maintainable.
The enhanced DI system, redesigned router, automatic observation, and new template features make Aurelia 2 a powerful platform for building modern web applications. Take your time with the migration, test thoroughly, and don't hesitate to leverage the new features that make development more productive.
Remember that Aurelia 2 maintains the same philosophy of convention over configuration and stays out of your way, while providing powerful tools when you need them. The migration effort will be rewarded with a more maintainable, performant, and developer-friendly application.
Content
Styled
Details here
Visible content
- ${user.name}
Total: ${items.reduce((sum, item) => sum + item.price, 0)}
${date | dateFormat:'MM/dd/yyyy'}