> For the complete documentation index, see [llms.txt](https://cbwire.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cbwire.ortusbooks.com/releases/whats-new-with-2.2.md).

# What's New With 2.2

01/09/2022

## New Features

### Hydration Lifecycle Hooks

CBWIRE 2.2 introduces new hydration lifecycle methods that run when components are restored from their serialized state.

```javascript
// wires/UserForm.cfc
component extends="cbwire.models.Component" {
    data = {
        "user" = {},
        "originalEmail" = ""
    };
    
    function onMount(params = {}) {
        data.user = getUser(params.userId);
        data.originalEmail = data.user.email;
    }
    
    function onHydrate() {
        // Called every time component is hydrated from state
        logActivity("Form hydrated for user: " & data.user.name);
    }
    
    function onHydrateEmail(value, oldValue) {
        // Called when 'email' property is hydrated
        if (value != data.originalEmail) {
            data.emailChanged = true;
        }
    }
}
```

### Auto-Trim Data Properties

All string data properties are now automatically trimmed of whitespace, ensuring cleaner data handling.

```javascript
// wires/ContactForm.cfc
component extends="cbwire.models.Component" {
    data = {
        "name" = "",
        "email" = "",
        "message" = ""
    };
    
    function submitForm() {
        // All properties are automatically trimmed
        // "  John Doe  " becomes "John Doe"
        // "  test@email.com  " becomes "test@email.com"
        
        if (len(data.name) && len(data.email)) {
            sendContactMessage(data);
        }
    }
}
```

### JavaScript Component Access

Components can now be accessed directly from JavaScript using the global `cbwire.find()` method.

```html
<!-- wires/dashboard.cfm -->
<cfoutput>
<div id="dashboard-#args._id#">
    <h2>Dashboard</h2>
    <p>Counter: #counter#</p>
    <button wire:click="increment">Increment</button>
    <button onclick="resetFromJS('#args._id#')">Reset via JS</button>
</div>
</cfoutput>

<script>
function resetFromJS(componentId) {
    // Access component directly from JavaScript
    var component = cbwire.find(componentId);
    component.call('reset');
}

// You can also access component data
var dashboard = cbwire.find('#args._id#');
console.log('Current counter:', dashboard.data.counter);
</script>
```

### Turbo SPA Support

New `enableTurbo` setting provides single-page application functionality for faster navigation.

```javascript
// config/ColdBox.cfc
moduleSettings = {
    "cbwire" = {
        "enableTurbo" = true  // Enable SPA-like navigation
    }
};
```

When enabled, page navigation becomes faster with JavaScript-powered transitions instead of full page reloads.

### Enhanced Reset Functionality

The `reset()` method can now reset all data properties when called without parameters.

```javascript
// wires/MultiStepForm.cfc
component extends="cbwire.models.Component" {
    data = {
        "step" = 1,
        "firstName" = "",
        "lastName" = "",
        "email" = "",
        "phone" = ""
    };
    
    function resetForm() {
        // Reset all data properties to their initial values
        reset();
    }
    
    function resetContactInfo() {
        // Reset only specific properties
        reset(["email", "phone"]);
    }
    
    function nextStep() {
        data.step += 1;
    }
    
    function previousStep() {
        data.step -= 1;
    }
}
```

## Enhancements

### Lifecycle Method Standardization

Updated lifecycle method naming for consistency - `mount()` is now `onMount()`.

```javascript
// Old syntax (2.1 and earlier)
component extends="cbwire.models.Component" {
    function mount(params = {}) {
        // Component initialization
    }
}

// New syntax (2.2+)
component extends="cbwire.models.Component" {
    function onMount(params = {}) {
        // Component initialization
    }
}
```

### Improved Performance

* Faster hydration process with optimized component restoration
* Better memory management for long-running applications
* Streamlined event handling and data binding

## Bug Fixes

### Event System Improvements

* **Fixed immediate listener firing**: Event listeners no longer fire immediately when emitting from the same component
* **Proper event ordering**: Ensured `onHydrate()` runs before component actions
* **Computed property timing**: Fixed computed properties not rendering correctly before actions execute

### Documentation and Structure

* **Fixed DocBox integration**: Resolved documentation generation issues caused by file structure changes
* **Better error handling**: Improved error messages and debugging information

### Component Lifecycle

* **Hydration timing**: Ensured proper order of hydration lifecycle methods
* **State restoration**: Fixed issues with component state not being properly restored in certain scenarios

## Breaking Changes

### Lifecycle Method Names

Update component lifecycle methods from `mount()` to `onMount()`:

```javascript
// Before (2.1)
function mount(params = {}) {
    // initialization code
}

// After (2.2)
function onMount(params = {}) {
    // initialization code
}
```

This change provides better consistency with other lifecycle methods and clearer naming conventions.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://cbwire.ortusbooks.com/releases/whats-new-with-2.2.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.