In this section, you will find the release notes for each version we release under this major version. If you are looking for the release notes of previous major versions use the version switcher at the top left of this documentation book.

Git Repository

In addition to the examples above, we have a GitHub repo that contains more examples of CBWIRE. Each example includes both the code to generate the example and a section where you can see the results in real-time.

https://github.com/grantcopley/cbwire-examples

01/09/2022

Added

CBWIRE-99: Implement lifecycle hook onHydrate().

CBWIRE-100: Implement lifecycle hook onHydrate[Property]().

CBWIRE-103: Implement an automatic trim() for all data properties.

CBWIRE-124: Implement the ability to interact with CBWIRE component from JavaScript using cbwire.find( '#args._id#' ).

CBWIRE-125: Add configuration setting 'enableTurbo' to automatically include everything needed to work with Turbo for single page applications.

CBWIRE-130: Add ability to call reset() without passing a key to reset all data properties to their original values.

Changed

: Implement onMount() method instead of mount().

: DocBox generated docs are failing because of file structure.

: Listeners are being fired immediately when calling emit() when the listener is defined on the same component, which they shouldn't.

: onHydrate() is firing after actions are performed.

: Computed properties are not being rendered before actions are called.

CBWIRE-24: File Uploads

CBWIRE-55: Ability to write unit tests for components

CBWIRE-59: Ability to override the default 'wires' folder location

CBWIRE-60: noRender() method to prevent template rendering during actions

CBWIRE-61: Implement dirty property tracking

CBWIRE-65: Invoke computed properties during template rendering and only execute once per request

CBWIRE-70: Ability to specify a 'moduleRootURI' setting to change the URI path for cbwire

It can be useful at times to update the browser's query string when your state changes.

Let's say you are building a to search articles, and want the query string to reflect the current search value like so:

This way, when a user hits the back button or bookmarks the page, you can get the initial state out of the query string rather than resetting the every time.

You can add a queryString variable to your and CBWIRE will update the query string every time the property value changes and also update the property when the query string changes.

You can add a wire:poll directive to your elements to poll for changes using a set interval. The default interval is set to poll every 2 seconds.

You can append a different interval time to your directive as well.

If you would like to invoke a method during each poll interval, you can do so by specifying a method name.

If you want stop polling, you can simply no longer render the HTML element that has the wire:poll directive.

have available for injecting dependencies such as service objects, session storage, you name it!

If you want to act immediately after dependency injection has been completed, you can define an onDIComplete method.

You can use the wire:init to execute an action as soon as your component is initially rendered.

You can prefetch an results on mouseOver using the .prefetch modifier.

You can use wire:offline to display elements when Livewire detects that the user is offline.

<div wire:offline><!-- Oh no, you're offline --></div>

You can also append .class to your wire:offline Directive and specify a CSS class to toggle when the user is offline.

<div wire:offline.class="online" class="online"></div>

Use .remove to specify classes you want to be removed when offline.

<div wire:offline.class.remove="im-online" class="im-online"></div>

Requirements

• Adobe ColdFusion 2018+ or Lucee 5+

• ColdBox 6+

Installation

Install CommandBox.

Within the root of your project, run:

box install cbwire

If you want the latest bleeding edge, run:

You need to add references for wireStyles() and wireScripts() to your layout file.

You can insert anywhere in your layout or ColdBox views using wire( componentName ).

Are you tired of the challenges that come with building modern CFML apps? ColdBox makes server-side app development a breeze, but sometimes the client-side is a whole different story. With powerful JavaScript frameworks like Vue and React, it can be a difficult and time-consuming process to create your web apps.

But what if you could have the best of both worlds: the power of Vue and React with the simplicity of CFML? Impossible, you say? Think again!

Introducing CBWIRE: Power up your CFML and make your app dreams a reality!

Let's create a counter...

Install CommandBox, then from our terminal, run:

mkdir cbwire-demo
cd cbwire-demo
box coldbox create app
box install cbwire@be
box server start

Next, add wireStyles() and wireScripts() to our layout. This is required for CBWIRE to do it's magic.

Let's also insert a counter element into the page using wire( "Counter" ).

Let's define our counter .

Finally, let's create a for our counter Wire. Notice that we've added a wire:click to our button.

Refresh the page. You now have a reactive counter that increments when you click the plus button without any page refreshing!

1. CBWIRE renders our Counter Wire template. Our counter value defaults to 0.

2. When a user clicks the plus button, CBWIRE detects the event and makes an XHR request to the server.

3. CBWIRE picks up the XHR request and invokes the increment action.

• We built a reactive counter with no page refreshing.

• We didn't write any JavaScript.

• We didn't use webpack or mess with JavaScript compilation.

CBWIRE is transforming the way we build CFML applications, and we think you're going to love it also!

CBWIRE is built on and wouldn't exist without ( creator of , ) and the PHP community.

The CBWIRE module for ColdBox is written and maintained by , , and .

Please consider becoming one of our lovingly esteemed .

• CBWIRE Examples:

• ForgeBox:

• GitHub Repository:

11/26/2022

Added

CBWIRE-111 Ability to output component template direct from onRender() method instead of defining a .cfm template in wire/views.

Fixed

CBWIRE-119 Computed properties that do not return a value result in the error 'variable [VALUE] doesn't exist

CBWIRE-118 Nested components are causing the template rendering only to render the last nested template

CBWIRE-117 Struct values are not being passed to the template and are instead being replaced with an empty string

CBWIRE-116 CBWIRE doesn't work when the ColdBox app is in a subdirectory

CBWIRE-115 Getting errors when rendering component templates in the latest version of ColdBox

Nested components are not rendering

You can alter any default behavior by overriding settings in your config/ColdBox.cfc file.

Set as true to enable , which causes any clicked links or form submissions to be performed in the background via AJAX and updates the DOM without reloading the page. Great when developing single-page, VueJS-like applications. Defaults to false.

The maximum amount of time allowed for uploads to complete.

Set as true to throw a WireSetterNotFound exception if the incoming wire request tries to update a property without a setter on our . Otherwise, missing setters are ignored. Defaults to false.

When set to true, any data properties that contain strings will be automatically trimmed. Great for form inputs.

You can emit events from , , and JavaScript.

Using the emit method:

You can provide arguments to all listeners by passing an array as the second argument.

Using the $emit() method:

Using the global cbwire.emit():

You can redirect users in your using relocate().

Redirects a user to a different URI, URL, or event.

CBWIRE's relocate() method signature is nearly identical to ColdBox's internal relocate() method, with the exception that status codes cannot be set. Otherwise, most of the arguments that ColdBox accepts can be used.

There are cases where it may be helpful to provide feedback that content has changed and is not yet in sync with the back-end. For input that uses wire:model, or wire:model.lazy, you can display that a field is 'dirty' until CBWIRE has fully updated.

Adding the .class modifier allows you to add a class to the element when dirty.

You can perform the inverse and remove classes by adding the .remove modifier.

The default behavior of the wire:dirty

We recommend you use for most of your JavaScript needs, but you can use <script> tags directly inside your .

Wires primarily consist of the following:

• Data Properties Reactive properties that we can easily change.

• Computed Properties Properties that are computed every time our template is rendered.

• Methods that make state changes to our data properties.

• Listen for emitted events within Wires or client-side JavaScript.

• HTML to render our Wire.

You can scaffold Wires quickly using the module.

From our CommandBox shell, type:

Let's create a Counter Wire that we will use to list our favorite movies.

You can provide named arguments as well.

Wires include powerful validations that you can use to validate your Data Properties.

Defining Constraints

You can define constraints within your wires using this.constraints.

component extends="cbwire.models.Component"{

    this.constraints = {
        "task": { required: true }
    };
    
    // Data Properties
    data = {
        "task": ""
    };
}

Validating

Actions can validate against the defined constraints using validate() or validateOrFail().

validate

Returns a ValidateResult object.

component extends="cbwire.models.Component"{
    // Action
    function addTask() {
        var result = validate(); // ValidateResult object
        
        if ( !result.hasErrors() ) {
            queryExecute( ... );
        }
    }
}

validateOrFail

Silently fails and prevents further processing of the current .

You can get a new ValidationManager object to work with, just call getValidationManager();

can access the ValidationResults object using args.validation. This includes helpful methods you can use for displaying error messages.

Implicit Path

If you haven't specified your template file name inside your Wire using template, a template will be implicitly loaded based on the Wire's file name.

component extends="cbwire.models.Component" {
    // No template defined.
}

For the example above, the template ./views/wires/tasklist.cfm will be rendered.

Explicit Path

You can specify the path to your Template using template.

component extends="cbwire.models.Component" {
    template = "wires/tasklist"; // This will look for ./views/wires/tasklist.cfm

    // template = "path/to/tasklist"; <--- Can use folders
    
    // template = "tasklist.cfm"; <--- Can use .cfm if you like
}

onRender

Instead of creating a .cfm template, you can define an onRender() method on your Wire.

See the Wire Lifecycle page for additional details.

Prevent Rendering

Within your , you can call the method noRender() to prevent your template from re-rendering. This can reduce the returned payload size for actions that do not change the UI.

Be sure your template includes a single outer element such as<div>.

Similar to Vue.js and other frontend JavaScript frameworks, you can define reactive properties on your .

You can define and initialize properties on your using data.

You can reference a property using data.[propertyName].

Getter methods are automatically available for your properties based on the property's name. You to access the property within your Wire using this.get[propertyName]().

Computed Properties are dynamic properties and help derive values from a database or another persistent store like a cache.

Computed Properties are similar to with some key differences:

• They are declared as inline functions using computed.

Basic File Upload

CBWIRE makes uploading and storing files easy.

Here's an example of a simple Wire that handles uploading a photo:

component extends="cbwire.models.Component" {

    data = {
        "photo": "",
        "error": ""
    };
    
    function save() {
        // 'photo' is now an instance of FileUpload@cbwire
        if ( data.photo.getSize() > "100000" ) {
            data.error = "Photo upload too big!";
        } else {
            // Store our file locally
            fileWrite( expandPath( "./somewhere.jpg" ), data.photo.get() );
            
            // Delete our file from CBWIRE's temporary storage and reset 'photo' data property
            data.photo.destroy();
        }
    }
}

<form wire:submit.prevent="save">
    File: <input type="file" wire:model="photo">
    <div><button type="submit">Save</button></div>
    
    <!--- Show thumbnail --->
    <cfif isObject( args.photo ) and args.photo.isImage()>
        <div><img src="#args.photo.getPreviewURL()#"></div>
    </cfif>
    
    <cfif len( args.error ) >
        <div class="error">#args.error#</div>
    </cfif>
</form>

Handling file inputs is no different than handling any other input type with CBWIRE. Add wire:model to the <input> tag and CBWIRE will take care of the rest.

There are several things happening under the hood to make file uploads work:

1. CBWIRE makes an initial request to the server to get a temporary "signed" upload URL.

2. Once the URL is received, JavaScript then does the actual "upload" to the signed URL, storing the upload in a temporary directory designated by CBWIRE and returning the new temporary file's unique hash ID.

3. Once the file is uploaded, and the unique hash ID is generated, CBWIRE makes a final request to the server, telling it to "set" the desired data property to the upload file as an instance of FileUpload ( see below ).

4. Now the data property (in this case photo ) is set to an instance of FileUpload@cbwire and is ready to be stored or validated at any point.

CBWIRE will automatically upload your files and set your associated data property to an instance of FileUpload@cbwire. Here are some of the methods you can use that can get quite helpful.

You can display a loading indicator scoped to the file input during upload like so:

The "Uploading..." message will be shown as the file is uploading and then hidden when the upload is finished.

This works with the entire .

Computed Properties are dynamic properties and are helpful for deriving values from a database or another persistent store like a cache.

Computed Properties are similar to Data Properties with some key differences:

• They are declared as inline functions using computed.

• They can return any type of CFML value or object, not just values that can be serialized and parsed by JavaScript like Data Properties.

You can define Computed Properties on your using computed. Each Computed Property is invoked only once during a single request cycle.

You can access your Computed Properties from within your using computed.[propertyName].

Getters are automatically created based on the property's name.

In the example below, you to access the property using this.getAllTasks(). You can use this as an alternative to using computed.

You can access Computed Properties in your via the args scope.

Order of Operations

When a Wire is initially loaded (before any background AJAX requests are performed), the Lifecycle Methods are executed in the following order.

1. onMount()

2. Render Computed Properties

3. onRender() or implicit rendering

For background AJAX requests, lifecycle methods are executed in this order.

1. onHydrate[DataProperty]()

2. onHydrate()

3. Render

Runs only once when the Wire is initially wired.

Runs on subsequent requests, after the Wire is hydrated, but before are rendered, before an is performed, or before onRender() is called.

Runs on subsequent requests, after a specific is hydrated, but before are rendered, before an is performed, or before onRender() is called.

Runs during the rendering of a . If onRender() is defined on the Wire, CBWIRE will use what is returned as the component's template, otherwise it will perform a lookup for a view template. The args parameter is provided which contains both the and any rendered .

Lifecycle Hooks

CBWIRE gives you the opportunity to execute JavaScript during various events.

You can interact with your , calling , setting , and more, using cbwire.find from within your . Once you have a reference to the Wire, you can interact with it using the methods below.

Actions may involve a long-running process (such as completing a cart checkout) and HTML may not re-render instantly. You can help your users during the wait using Loading States. Loading States allow you to show/hide elements, add/remove classes, or toggle HTML attributes until the server responds.

Toggling Elements

Let's look at an action that takes too long.

component extends="cbwire.models.Component"{

    function addTask(){
        sleep( 5000 ); // Optimize this code yo!
    }

}

We can annotate our <div> with wire:loading to display Adding Task while the checkout action is running.

<div>
    <button wire:click="addTask">Add Task</button>

    <div wire:loading>
        Adding Task...
    </div>
</div>

After the action completes, the Adding Task... output will disappear. 👋

Toggling Attributes

<div>
    <button wire:click="addTask" wire:loading.attr="disabled">
        Add Task
    </button>
</div>

Targeting Specific Actions

You can target a specific action so that the element is only visible is a specific action is loading using wire:target.

If you want to avoid flickering because loading is very fast, you can add a .delay modifier, and it will only show up if loading takes longer than 200ms.

If you wish, you can customize the delay duration with the following modifiers:

Loading State elements are set with a CSS property of display: inline-block; by default. You can override this behavior by using various directive modifiers.

If you would like to display an element except during a loading state, you can apply the wire:loading.remove directive.

ContentBox is a professional open source hybrid modular CMS (Content Management System) that allows you to easily build websites, blogs, wikis, complex web applications and even power mobile or cloud applications. Built with a secure and flexible modular core, designed to scale, and combined with world-class support, ContentBox will get your projects out the door in no time.

Installation

In the root of your ContentBox application, install CBWIRE using CommandBox. The example below installs the latest bleeding-edge version.

box install cbwire@be

Theme Integration

You will need to use a custom theme in order to integrate with CBWIRE.

If you are wanting to use a theme that is included with ContentBox or one that you've pulled down from ForgeBox, you can copy the theme code over to the folder modules_app/contentbox-custom/_themes.

Once CBWIRE is installed, you should have access to the three core included methods and should be able to reference these within your layout and theme templates.

• wireStyles() - Pulls in required styling for CBWIRE

• wireScripts() - Pulls in required JavaScript assets for CBWIRE/Livewire

• wires() - Includes a (reactive UI element) you create

In your theme layout, you need to place wireStyles() within your <head> tags, wireScripts() before the end of </body>, and you can call wire() to include your reactive UI Wires where needed.

You can also reference the wire() method within your views.

You can easily test your Wires by extending cbwire.models.BaseWireTest and using our fluent testing API in your TestBox specs.

Test Example

You can invoke your Wires for testing by using wire().

component extends="cbwire.models.BaseWireTest" {

    function run(){

        describe( "TaskList.cfc", function(){
	
	    it( "calling 'clearTasks' removes the tasks", function() {
        
                wire( "TaskList" )
                    // Sets our data properties
                    .data( "tasks", [ "task1" ] )
                    // Verifies output in our template rendering
                    .see( "<li>task 1</li>" )
                    // Runs the 'clearTasks' action
                    .call( "clearTasks" )
                    // Verifies updated template rendering
		    .dontSee( "<li>task 1</li>" );
		} );
	
	} );
    }
}

Test Methods

data

Set a Data Property to the specified value.

wire( "TaskList" )
    .data( "tasks", [ "task1", "task2" ] ) // one property at a time
    .data( { "tasks" : [ "task1", "task2" ] } ); // struct of properties

computed

Set a Computed Property to the specified closure.

wire( "TaskList" )
    .computed( "count", function() { return 3; } ) // one property at a time
    .computed( { "count" : function() { return 3; } } ); // struct of properties

toggle

Toggles a Data Property between true and false.

wire( "TaskList" ).toggle( "showModal" );

call

Calls an . Optional array of parameters can be provided.

Emits an and fires any that are defined on the . Optional array of parameters can be provided, which will be passed on to listeners.

Verifies a value can be found in the current rendering. Otherwise, test fails.

Verifies a value is not found in the current rendering. Otherwise, test fails.

Verifies a matches a specified value. Otherwise, test fails.

Verifies a does not match a specified value. Otherwise, test fails.

Many page interactions don't warrant a full server roundtrip, such as toggling a modal or a hidden element. In these instances, we recommend using AlpineJS.

Installation

<head>
    <script src="//unpkg.com/alpinejs" defer></script>
    <!-- The "defer" attribute is important to ensure Alpine waits for CBWIRE to load first. -->
</head>

For more installation information, visit the Alpine Docs.

Templates

Below is an example of using AlpineJS to toggle a list on the page.

<div>
    <div x-data="{ open: false }">
        <button @click="open = true">Show More...</button>
 
        <ul x-show="open" @click.away="open = false">
            <li><button wire:click="archive">Archive</button></li>
            <li><button wire:click="delete">Delete</button></li>
        </ul>
    </div>
</div>

Entangle: Share State Between CBWIRE And AlpineJS

CBWIRE has a powerful entangle() method that allows you to "entangle" a CBWIRE and AlpineJS data property. With entanglement, both client-side and server-side properties are instantly synchronized, regardless of whether the value was changed server-side in CFML or client-side using JavaScript.

Consider this simple Counter Wire:

// wires/Counter.cfc
component extends="cbwire.models.Component" {

    data = {
        "counter": 0
    };

    function increment() {
        data.counter += 1;
    }
}

And now, our template:

We define an AlpineJS property named counter and then call the built-in CBWIRE method entangle(), passing it the name of the server-side data property we want to bind with.

Next, we are incrementing our Counter in two separate ways:

• Incrementing the counter by calling the increment using CBWIRE

• Incrementing the AlpineJS property counter value in JavaScript, triggering an immediate update to the server and re-rendering of the Counter .

Updating CBWIRE server-side on every AlpineJS property change is optional. You can also delay the server-side updates until the next CBWIRE request that goes out by chaining a .defer modifier like so.

Turbo is an open-source library that accelerates links and form submissions by negating the need for full page reloads. With Turbo, you get all the following included:

• Links and form submissions are performed in the background using AJAX instead of performing full page reloads

• Browse history management, so clicking the back and forward buttons in the browser work as expected

Actions provide an effortless way to track page interactions and invoke methods on your Wires, resulting in a re-render of the Wire's Template.

Here is a basic example of how to use it:

component extends="cbwire.model.Component"{
  
    // Actions
    function addTask(){
      queryExecute( ... );
    }
}

<!--- Template --->
<div>
    <button wire:click="addTask">Add Task</button>
</div>

Invoking Actions

You can listen for browser events and invoke actions using a selection of various Directives. The directives follow the format: wire:[browser event]=[action].

Some examples of events you can listen for include:

Here are a few examples of each in HTML:

You can listen for any browser events on elements by using the wire:[event] directive, where [event] is the event's name. For example, to listen for a "foo" event on a button element, you would use the following code:

You can pass parameters to your actions, such as here using addTask('Some Task').

The parameter is then passed through to your via function arguments.

You can access data properties inside your actions directly using data.

You can access Computed Properties inside your actions directly using computed.

In CBWIRE, there are some "magic" actions that are usually prefixed with a "$" symbol:

Consider the example below.

You can instead call $set and avoid the need to create an Action named setMessageToHello.

It can also be used in the backend when listening for an event. For example, if you have one component that emits an event like this:

Then in another component you can use a magic action for example $refresh() instead of having to point the listener to a method:

Core Directives

The following Directives can be added to your Templates and instruct CBWIRE how and when to update the Wire.

wire:key

<div wire:key="foo"></div>

Define a key name foo for the element. This provides a reference point for the Livewire DOM diffing system. Useful for adding/removing elements and keeping track of lists.

wire:click

<button wire:click="foo">...</button>

<a href="" wire:click.prevent="foo">Click here</a>

Listens for a click event and invokes the foo Action.

wire:click.prefetch

<button wire:click.prefetch="foo">...</button>

Listens for a mouseEnter event and then prefetches the result of the foo . If the element is then clicked, it will swap in the prefetched result without any extra request. If it's not clicked, the cached results will be thrown away.

Listeners for a submit event on a form.

Listens for a keyDown event and invokes the foo .

Listens for a keyDown event when the user hits enter and invokes the foo .

Listens for a foo event and invokes the bar .

Provided you have data[ "foo" ] defined in your , this creates a one-to-one model binding. Any time the element is updated, the value is synchronized.

The same as wire:model="foo" except that all input events to the element will be debounced for the specified duration. Defaults to 150 milliseconds. Useful for reducing XHR background requests during user input. You can set the milliseconds value to any numeric value.

Creates a one-to-one model binding with data[ "foo" ] in your but defers any XHR updates until an is performed. Useful for reducing XHR requests.

Creates a one-to-one model binding with data[ "foo" ] in your but will not perform an XHR updates until an onBlur event is emitted. Useful for reducing XHR requests.

Performs an XHR request to re-render the elements based on a set interval. An interval can be specified in both seconds or milliseconds. You can also specify an that you want to invoke.

Invokes the foo on your immediately after it's rendered on the page.

Hides the HTML element by default and makes it visible when XHR requests are performed.

Adds the foo class to the HTML element while XHR requests are in transit.

Removes the foo class from the HTML element while XHR requests are in transit.

Adds the disabled="true" attribute while XHR requests are in transit.

Hides the HTML element by default and makes it visible when the element's state has changed since the latest XHR request.

Adds the foo class to the HTML element when the element's state has changed since the latest XHR request.

Removes the foo class from the HTML element when the element's state has changed since the latest XHR request.

Adds the disabled="true" attribute when the element's state has changed since the latest XHR request. Used in addition to wire:target.

Provides scoping for wire:loading and wire:dirty references, scoped to a specific .

Instructs Livewire to not update the element or any child elements when updating the DOM. Useful when using third-party JavaScript libraries.

Instructs Livewire to not update the element but DOES allow updates to any child elements when updating the DOM.

See

CBWIRE Directives sometimes offer "modifiers" to add extra functionality to an event. Here are the available modifiers that can be used with any event.

To listen for specific keys on keydown events, you can provide the name of the key as a modifier. You can use any valid key names exposed via as modifiers by converting them to kebab-case.

Here is a quick list of some common ones you may need:

In the above example, the foo will only be called if event.key is equal to 'PageDown'.