# What's New With 3.1
09/25/2023
## New Features
### Auto-Include CBWIRE Assets
CBWIRE 3.1 introduces automatic inclusion of styles and scripts, eliminating the need to manually call `wireScripts()` and `wireStyles()` in your templates.
```javascript
// config/ColdBox.cfc
moduleSettings = {
"cbwire" = {
"autoIncludeAssets" = true // Default: true
}
};
```
Previously required manual inclusion:
```html
#wireStyles()#
#wireScripts()#
```
Now assets are automatically included when components are rendered.
### Enhanced Lifecycle Hooks
New `onUpdate()` and `onUpdateProperty()` lifecycle methods provide granular control over component updates.
```javascript
// wires/UserProfile.cfc
component extends="cbwire.models.Component" {
data = {
"name" = "John Doe",
"email" = "john@example.com",
"lastUpdated" = now()
};
function onUpdate() {
// Called after any component update
data.lastUpdated = now();
logActivity("Profile updated");
}
function onUpdateProperty(propertyName, newValue, oldValue) {
// Called when specific properties change
if (propertyName == "email") {
sendEmailVerification(newValue);
}
}
function updateProfile() {
// This will trigger onUpdate() and onUpdateProperty()
data.name = "Jane Doe";
data.email = "jane@example.com";
}
}
```
### Child Component Refresh
Parent components can now refresh all child components using the new refresh functionality.
```javascript
// wires/Dashboard.cfc
component extends="cbwire.models.Component" {
data = {
"stats" = {},
"notifications" = []
};
function refreshAllData() {
// Refresh parent data
data.stats = getLatestStats();
data.notifications = getNotifications();
// Refresh all child components
refresh();
}
}
```
```html
#wire("StatsComponent")#
#wire("NotificationComponent")#
```
### UDF Access in Templates
Components can now call CBWIRE User Defined Functions directly from templates, expanding beyond computed properties.
```javascript
// wires/ProductCatalog.cfc
component extends="cbwire.models.Component" {
data = {
"products" = [],
"category" = "all"
};
function onMount() {
data.products = getProducts();
}
function formatPrice(price) {
return dollarFormat(price);
}
function isOnSale(product) {
return product.salePrice < product.regularPrice;
}
function getCategoryName(categoryId) {
return getCategory(categoryId).name;
}
}
```
```html