What's New With 4.1

09/29/2024

New Features

BoxLang Support

CBWIRE 4.1 introduces full BoxLang support, allowing you to build components and templates using BoxLang's powerful, modular, and modern feature set. This opens up a whole new world of possibilities for CBWIRE development with BoxLang's enhanced syntax and capabilities.

Requirements:

bx-compat-cfml BoxLang module
bx-esapi BoxLang module

// wires/UserDashboard.bx
class extends="cbwire.models.Component" {
    data = {
        "users": [],
        "searchTerm": "",
        "selectedRole": "all"
    };
    
    function onMount() {
        data.users = getUserService().getAllUsers();
    }
    
    function filterUsers() {
        var filteredUsers = data.users
            .filter(function(user) {
                return data.selectedRole == "all" || user.role == data.selectedRole;
            })
            .filter(function(user) {
                return !data.searchTerm.len() || 
                       user.name.findNoCase(data.searchTerm) || 
                       user.email.findNoCase(data.searchTerm);
            });
        
        return filteredUsers;
    }
}

// wires/UserDashboard.cfc
component extends="cbwire.models.Component" {
    data = {
        "users" = [],
        "searchTerm" = "",
        "selectedRole" = "all"
    };
    
    function onMount() {
        data.users = getUserService().getAllUsers();
    }
    
    function filterUsers() {
        var filteredUsers = data.users
            .filter(function(user) {
                return data.selectedRole == "all" || user.role == data.selectedRole;
            })
            .filter(function(user) {
                return !len(data.searchTerm) || 
                       findNoCase(data.searchTerm, user.name) || 
                       findNoCase(data.searchTerm, user.email);
            });
        
        return filteredUsers;
    }
}

<!-- wires/userDashboard.bxm -->
<bx:output>
<div class="user-dashboard">
    <div class="filters">
        <input wire:model.live="searchTerm" placeholder="Search users...">
        <select wire:model.live="selectedRole">
            <option value="all">All Roles</option>
            <option value="admin">Admin</option>
            <option value="user">User</option>
        </select>
    </div>
    
    <div class="users-grid">
        <bx:loop array="#filterUsers()#" item="user">
            <div class="user-card">
                <h3>#user.name#</h3>
                <p>#user.email#</p>
                <span class="role">#user.role#</span>
            </div>
        </bx:loop>
    </div>
</div>
</bx:output>

<!-- wires/userDashboard.cfm -->
<cfoutput>
<div class="user-dashboard">
    <div class="filters">
        <input wire:model.live="searchTerm" placeholder="Search users...">
        <select wire:model.live="selectedRole">
            <option value="all">All Roles</option>
            <option value="admin">Admin</option>
            <option value="user">User</option>
        </select>
    </div>
    
    <div class="users-grid">
        <cfloop array="#filterUsers()#" index="user">
            <div class="user-card">
                <h3>#user.name#</h3>
                <p>#user.email#</p>
                <span class="role">#user.role#</span>
            </div>
        </cfloop>
    </div>
</div>
</cfoutput>

BoxLang brings modern language features like enhanced member functions, improved syntax, and better type handling to your CBWIRE components.

Assets Management

CBWIRE 4.1 introduces <cbwire:script> and <cbwire:assets> functionality for better control over component-specific assets. These assets are automatically tracked throughout the request and appended to the <head> tag during page load.

<!-- wires/dashboard.bxm -->
<bx:output>
<cbwire:script>
    console.log('Dashboard component loaded');
    // Component-specific JavaScript
</cbwire:script>

<cbwire:assets>
    <link rel="stylesheet" href="/css/dashboard.css">
    <script src="/js/chart-library.js"></script>
</cbwire:assets>

<div>
    <h1>Dashboard</h1>
    <!-- Component content -->
</div>
</bx:output>

<!-- wires/dashboard.cfm -->
<cfoutput>
<cbwire:script>
    console.log('Dashboard component loaded');
    // Component-specific JavaScript
</cbwire:script>

<cbwire:assets>
    <link rel="stylesheet" href="/css/dashboard.css">
    <script src="/js/chart-library.js"></script>
</cbwire:assets>

<div>
    <h1>Dashboard</h1>
    <!-- Component content -->
</div>
</cfoutput>

Locked Data Properties

Protect sensitive data properties from client-side modifications by defining a locked variable in your component. This prevents certain properties from being updated via wire:model or other client interactions.

// wires/UserProfile.bx
class extends="cbwire.models.Component" {
    // Lock single property
    locked = "userId";
    
    // Or lock multiple properties
    locked = ["userId", "role", "permissions"];
    
    data = {
        "userId": 123,
        "name": "John Doe",
        "email": "[email protected]",
        "role": "admin",
        "permissions": ["read", "write"]
    };
}

// wires/UserProfile.cfc
component extends="cbwire.models.Component" {
    // Lock single property
    locked = "userId";
    
    // Or lock multiple properties
    locked = ["userId", "role", "permissions"];
    
    data = {
        "userId" = 123,
        "name" = "John Doe",
        "email" = "[email protected]",
        "role" = "admin",
        "permissions" = ["read", "write"]
    };
}

<!-- Template can bind to name/email but userId/role are protected -->
<input wire:model="name" placeholder="Name">
<input wire:model="email" placeholder="Email">
<!-- These would throw "Locked properties cannot be updated" if attempted -->

Module Root URL Configuration

Configure custom module root URLs for better control over CBWIRE routing in complex applications.

// config/ColdBox.bx
moduleSettings = {
    "cbwire": {
        "moduleRootURL": "/custom/cbwire/path"
    }
};

File Upload Enhancement

New getTemporaryStoragePath() method in FileUpload components provides access to temporary file storage locations.

// wires/FileManager.bx
class extends="cbwire.models.Component" {
    function processUpload() {
        if (data.upload) {
            var tempPath = data.upload.getTemporaryStoragePath();
            // Process file at temporary location
        }
    }
}

// wires/FileManager.cfc
component extends="cbwire.models.Component" {
    function processUpload() {
        if (structKeyExists(data, "upload")) {
            var tempPath = data.upload.getTemporaryStoragePath();
            // Process file at temporary location
        }
    }
}

Progress Bar Customization

Enhanced progress bar configuration with proper color setting and disable functionality.

// config/ColdBox.bx
moduleSettings = {
    "cbwire": {
        "showProgressBar": false,           // Disable completely
        "progressBarColor": "##00ff00"      // Custom color (fixed)
    }
};

// config/ColdBox.cfc
moduleSettings = {
    "cbwire" = {
        "showProgressBar" = false,          // Disable completely
        "progressBarColor" = "##00ff00"     // Custom color (fixed)
    }
};

String Trimming

Automatically trim whitespace from string values in form inputs.

// Global setting
moduleSettings = {
    "cbwire": {
        "trimStringValues": true
    }
};

// Or per component
class extends="cbwire.models.Component" {
    function shouldTrimStringValues() {
        return true;
    }
}

// Global setting
moduleSettings = {
    "cbwire" = {
        "trimStringValues" = true
    }
};

// Or per component
component extends="cbwire.models.Component" {
    function shouldTrimStringValues() {
        return true;
    }
}

External Module Support

Load CBWIRE components from external module locations for better code organization.

Update Endpoint Configuration

Customize the CBWIRE update endpoint for advanced routing scenarios.

// config/ColdBox.bx
moduleSettings = {
    "cbwire": {
        "updateEndpoint": "/custom/cbwire/update"
    }
};

Enhancements

Asset Rendering Optimization

Assets are now tracked throughout the request and only rendered once
Component-specific assets are automatically injected into the <head> tag
Prevents duplicate asset loading for better performance

Performance Improvements

CBWIRE rendering speed improvements
Enhanced child/nested component tracking
Optimized asset management and injection

Bug Fixes

Component Lifecycle

Fixed onRender() method: Restored missing onRender() method from previous versions
Fixed onUpdate() behavior: Resolved issue where onUpdate() was called when no updates occurred

Component Management

Child/nested component tracking: Improved tracking of child components in Livewire
Component isolation: Better handling of component isolation and lazy loading

Asset Management

Duplicate asset prevention: Assets that have already been rendered are not returned again
Asset injection: Component assets are properly tracked and injected into page head

External Module Support

Module loading: Fixed issues loading wires from external module locations
Path resolution: Improved component path resolution for complex module structures

PreviousReleases NextWhat's New With 4.0

Last updated 7 months ago

Was this helpful?

hashtagNew Features

hashtagBoxLang Support

hashtagAssets Management

hashtagLocked Data Properties

hashtagModule Root URL Configuration

hashtagFile Upload Enhancement

hashtagProgress Bar Customization

hashtagString Trimming

hashtagExternal Module Support

hashtagUpdate Endpoint Configuration

hashtagEnhancements

hashtagAsset Rendering Optimization

hashtagPerformance Improvements

hashtagBug Fixes

hashtagComponent Lifecycle

hashtagComponent Management

hashtagAsset Management

hashtagExternal Module Support

New Features

BoxLang Support

Assets Management

Locked Data Properties

Module Root URL Configuration

File Upload Enhancement

Progress Bar Customization

String Trimming

External Module Support

Update Endpoint Configuration

Enhancements

Asset Rendering Optimization

Performance Improvements

Bug Fixes

Component Lifecycle

Component Management

Asset Management

External Module Support