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

: Implement lifecycle hook onHydrate().

: Implement lifecycle hook onHydrate[Property]().

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

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

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

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

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:

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:

• Adobe ColdFusion 2018+ or Lucee 5+

• ColdBox 6+

Install .

Within the root of your project, run:

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 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.

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

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

08/30/2022

Added

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

CBWIRE-71: Upgrade Livewire JS to v2.10.6

CBWIRE-81: Option to specify the component's template path using this.template instead of defining renderIt() method.

CBWIRE-82: Disable browser caching on XHR responses

CBWIRE-83: Reduce payload bloat by removing unnecessary data in XHR requests and responses

CBWIRE-84: Move internal methods to a separate Engine object to avoid collisions with user-defined methods

CBWIRE-85: Reject incoming XHR request if 'X-Livewire' HTTP Header is not present

CBWIRE-86: Specify null values for data properties

CBWIRE-87: Dependency injection capabilities to cbwire components

CBWIRE-90: Update to match Livewire's current incoming and outgoing HTTP responses

CBWIRE-91: Ability to use Turbo to create Single-page Applications ( SPAs )

CBWIRE-73: Calling reset( "someProperty" ) throws error

CBWIRE-74: Browser back history doesn't work

CBWIRE-80: On subsequent renderings of components, it's changing the unique id and causing DOM diff issues

CBWIRE-88: Livewire expects params to be an array

CBWIRE-89: Not passing parameters when calling update methods

include powerful validations that you can use to validate your .

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

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

Returns a ValidateResult object.

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.

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

You can specify the path to your Template using template.

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

See the

Wires primarily consist of the following:

• Reactive properties that we can easily change.

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

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 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.

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.

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 .

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.

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.

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

Defining Properties

You can define and initialize properties on your Wires using data.

component extends="cbwire.models.Component"{
    data = {
        "task": ""
    };
}

Accessing Properties

Data Variable

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

component extends="cbwire.models.Component"{

    property name="taskService" inject="TaskService@myapp";
    
    // Data properties
    data = {
        "task": ""
    };
    
    // Action
    function addTask(){
        taskService.create( data.task );
    }
}

Getters

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]().

component extends="cbwire.models.Component"{
    
    property name="taskService" inject="TaskService@myapp";

    // Data properties
    data = {
        "task": ""
    };
    
    // Action
    function addTask(){
        taskService.create( this.getTask() );
    }
}

Templates

You can reference data properties within your Wire's template using args.[propertyName].

You can reset properties back to their original value using reset().

There are several ways to use reset.

Your component's private variables scope will hold your data property definitions and current values, but it's necessary to be cautious about what you store.

Computed Properties are dynamic properties and help derive 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 CFML value or object.

Define Computed Properties in your using computed.

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

You can access Computed Properties in your using args.computed.[computedProperty]().

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.

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

1. onMount()

2. Render

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.

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

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

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

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.

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

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.

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

Here is a basic example of how to use it:

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

Some examples of events you can listen for include:

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.

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'.

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.

Toggle Dirty Elements

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

<div>
    <input wire:dirty.class="border-red-500" wire:model.lazy="foo">
</div>

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

<div>
    <input wire:dirty.class.remove="bg-green-200" class="bg-green-200" wire:model.lazy="foo">
</div>

Toggle Elements

The default behavior of the wire:dirty directive without modifiers is that the element is hidden until dirty. This can create a paradox if used on the input itself, but like loading states, the dirty directive can be used to toggle the appearance of other elements using wire:target.

In this example, the span is hidden by default and only visible when the input element is dirty.

Use the class and attribute modifiers in the same way for referenced elements.

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.

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

You can redirect users in your Actions using relocate().

relocate

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

component extends="cbwire.models.Component"{

    // Action
    function clickButton() {
        // Relocate to Google
        relocate( url="https://www.google.com" );
        
        // Relocate using URI
        relocate( uri="/some/relative/path" );
        
        // Relocate using event and set variables in Flash Ram
        relocate( event="example.index", persistStruct={
            success: true
        } );
    }

}

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.

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

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

Nested components are not rendering

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

• Internal caching that improves perceived performance by showing temporary previews during network requests and while the page is updated

• And much more!

CBWIRE and Turbo together allow you to quickly build single-page applications in record time.

You can enable Turbo with the enableTurbo , which automatically wires up everything needed to start using Turbo. Once enabled, links and form submissions will automatically be performed in the background via AJAX instead of performing full page reloads.

You can alternatively perform a of Turbo instead.

You can install Turbo by running the following npm command in the root of your project.

Then you can require or import Turbo.

To avoid manual installation, there is also a available which you can add to the <head></head> of your layout.

For Turbo to work properly with Livewire (and therefore CBWIRE), you will also need to include the Turbo plugin below your wireScripts() call in your layout.

During Turbo navigation, the browser will not display its native progress indicator. Turbo installs a CSS-based progress bar to provide feedback while issuing a request.

The progress bar is enabled by default. It appears automatically for any page that takes longer than 500ms to load.

The progress bar is a <div> element with the class name turbo-progress-bar. Its default styles appear first in the document and can be overridden by rules that come later.

For example, the following CSS will result in a thick green progress bar:

In your layout file, you can include the progress bar like so:

Preload links into Turbo Drive’s cache using data-turbo-preload.

This will make page transitions feel lightning fast by providing a preview of a page even before the first visit. Use it to preload the most important pages in your application.

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.

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.