Blog

CBWIRE 3.0.0 Released

Grant Copley May 22, 2023

Spread the word

Grant Copley

May 22, 2023

Spread the word


Share your thoughts

CBWIRE v3 is here!

We are very excited to announce the release of version 3 of CBWIRE, our ColdBox module that makes building modern, reactive apps a breeze. This version brings with it a new component syntax, 19 enhancements and bug fixes, and improved documentation. Our biggest goal with this release was to improve the developer experience and to provide a low barrier to entry to getting started with CBWIRE.

New Syntax

CBWIRE v3 now supports a simplified component syntax which makes building reactive UI components that much easier. In previous versions, creating a UI component required for you to create both a .CFC and .CFM file. The .CFC file was a CFML component where data properties, computed properties, actions, and more were placed, and the .CFM file is where the template was placed.

Now, components are completely self-contained in a single .CFM file.

Consider this contact form below, which is defined in the file ./wires/emailSignup.cfm. The template is defined within a tag and the component blueprint ( data properties, computed properties, etc ) are defined within tags.

// Render our contact form somewhere
wire( "ContactForm" );
<!--- ./wires/emailSignup.cfm --->
<!--- Template --->
<cfoutput>
    <form wire:submit.prevent="submitForm" id="contactForm">
        <div class="form-floating">
            <input wire:model.lazy="email" class="form-control" type="email" placeholder="Enter your email..." />
            <label for="email">Email address</label>
            <cfif validation.hasErrors( "email" )>
                <div class="text-danger">
                    #validation.getAllErrors( "email" ).first()#
                </div>
            </cfif>
        </div>
        
        <!--- Show if the form submit is successful --->
        <cfif success>
            <div id="submitSuccessMessage">
                <div class="text-center mb-3">
                    <div class="fw-bolder">Form submission successful!</div>
                </div>
            </div>
        </cfif>
        <button
            class="btn btn-primary text-uppercase <cfif validation.hasErrors()>disabled</cfif>"
            id="submitButton"
            type="submit">Send</button>
    </form>
</cfoutput>

<!--- Component Blueprint --->
<cfscript>
    // Validation constraints
    constraints = {
        "email": {
            "required": true,
            "type": "email"
        }
    };

    // Data properties
    data = {
        "email": "",
        "success": false
    };

    // Actions
    function submitForm() {
        // Maybe send an email here
        data.success = true;
    }
</cfscript>

Here are some other improvements you may have not noticed.

  • Data properties are now accessible in the template using #propertyName#. Before you had to scope the variables using #args.propertyName#.
  • Computed properties are now accessible using #propertyName()#. Before you had to scope using #args.computed.propertyName#.

Module Awareness

Your UI components are now module-aware, meaning that they understand what module they originate from. If you are using ColdBox modules to separate your application into various concerns, you can also place your CBWIRE components there.

Consider this application structure:

- handlers
- models
- modules_app
    - ContactForm
        - wires
            - contactForm.cfm
    - Common
        - wires
            - alert.cfm
            - button.cfm
- wires
    - globalComponent.cfm
Application.cfc
index.cfm

If you are working on your contact form and want to include a reactive alert ( let's say that the form submitted successfully ), you can reference the wire from the other module using

wire( "alert@Common" );

Also if you want to include a button component inside your alert component ( Nested Components ), you could reference it without specifying a module since both the alert and button component are in the same module.

<!--- ./wires/alert.cfm --->
<cfoutput>
    <div class="alert alert-info">
        An alert to the user.
        <cfif showCloseButton>
            #wire( "Button", { buttonText: "Close" } )#
        </cfif>
    </div>
</cfoutput>

<cfscript>
    data = {
        "showCloseButton": true
    };
</cfscript>

Improved Docs

All documentation examples have been updated to use the new syntax. https://cbwire.ortusbooks.com/

Other Changes

You can see a full list of the v3 changes here: https://cbwire.ortusbooks.com/release-history/whats-new-with-3.0

Summary

We really hope you are enjoying CBWIRE and find that it's helping you build applications faster, with less boilerplate and unnecessary JavaScript. As always, we appreciate any and all feedback and look forward to hear how you are using CBWIRE.

Add Your Comment

(1)

May 27, 2023 16:22:10 UTC

by John Farrar

Why is the first file above referencing, `wire( "ContactForm" );` and the file beneath it is `./wires/emailSignup.cfm`. I don't follow the conventions there.

Recent Entries

Ortus Solutions Returns to CFCamp as Platinum Sponsor – Join Us to Redefine the Future with BoxLang!

Ortus Solutions Returns to CFCamp as Platinum Sponsor – Join Us to Redefine the Future with BoxLang!

We’re thrilled to announce that Ortus Solutions and BoxLang will once again join CFCamp as Platinum Sponsors for the 2025 edition. As passionate advocates of innovation in the CFML and modern JVM space, we’re proud to keep pushing boundaries—and this year is shaping up to be our biggest presence yet.

Day 1 Keynote by Luis Majano

CFCamp 2025 will kick off with a keynote delivered by none other than our CEO and BoxLang creator, Luis Majano. Join...

Cristobal Escobar
Cristobal Escobar
April 25, 2025
Must-See Into the Box 2025 Sessions for CommandBox Users!

Must-See Into the Box 2025 Sessions for CommandBox Users!

Power Up your CommandBox experience and practices at Into the Box 2025

Want to get hands-on with the new CommandBox features or learn how others are pushing it to the next level? These are the must-see sessions at ITB 2025 if you're a CommandBox user:

Maria Jose Herrera
Maria Jose Herrera
April 21, 2025
Must-See ITB 2025 Sessions for TestBox Users!

Must-See ITB 2025 Sessions for TestBox Users!

Are you a fan of TestBox or looking to level up your testing game in 2025? Whether you're just getting started with unit testing or you're already building advanced specs for ColdBox and BoxLang apps, Into the Box 2025 has an exciting lineup tailored just for you. Into the Box 2025 has an exciting lineup tailored just for you. With the recent launch of TestBox 6.3.0 we have amazing new tools, features and tips and tricks to get your testing experience to the next level, review our sessions and test like a pro efficiently and easy!

From hands-on testing strategies to BoxLang innovations, here are the sessions you won’t want to miss this May — and why they matter to you as a TestBox user.

Maria Jose Herrera
Maria Jose Herrera
April 17, 2025