Upgrading from CBWIRE 2.x
Last updated
Was this helpful?
Last updated
Was this helpful?
CBWIRE has dramatically improved since its v2.x days. Here, we will outline the core differences between CBWIRE 2 and CBWIRE 4 to assist you with upgrading.
Here's a quick list of features in 4.x you'll get when upgrading:
Easier access to data properties, component methods, and computed properties from your templates.
Single-file components
Define your component in a single .CFM file
Upgraded DOM diffing engine via Livewire.js
Ability to pass keys with your wires to control when CBWIRE renders your components.
#wire( name="MyForm", key="my-form" )#
New HTML Directives
is included
$wire object allows you to access and interact with your wire from JavaScript directly
with placeholders
In 2.x, you had to place wireStyles() and wireScripts() in your layout like this to include CBWIRE's JavaScript and CSS assets.
This is now automatically handled for you by default.
In 2.x, you had to include Alpine.js into your project via CDN or Webpak manually.
Alpine.js is now automatically included with CBWIRE 4.
CBWIRE and Alpine.js have such a deep integration together that automatically including the two makes sense, and this follows the direction that Livewire 3 took. There is no longer a need to pull Alpine.js into your project.
Removing any previous installations or references to Alpine.js is important since it is now included with CBWIRE. Otherwise, you will run into various rendering errors, and your Alpine components will likely run twice.
In 4.x, you can fully interact with your components using Alpine and the magical $wire object.
In 2.x, you defined your components with a .CFC file and .cfm template.
You can still use separate files in 4.x, but you can also place everything in a single .cfm file. Use whichever pattern you prefer.
You still render your components using the wire() method, but the signature has changed.
In 2.x, the signature was:
In 4.x, the signature is:
Key differences:
The arguments componaneName and parameters were given shorter names.
In 2.x, data properties were referenced in your templates using #args.prop#.
In 4.x, you can access the data property without args.
You can still reference your props using args for backward compatibility, but it's optional.
Any methods you define in your component you can access from the template.
In 2.x, computed properties were defined with a computed struct in your component.
And you would access them in your templates like this:
In 4.x, we define computed properties like this:
And we access them in our templates like this:
In 2.x, you could communicate with your components using emit().
In 4.x, this has been replaced with dispatch().
You can also dispatch from JavaScript using $wire.$dispatch and cbwire.dispatch().
Official support for Adobe CF 2018 was dropped.
In 2.x, you defined your validation constraints using this.constraints.
In 4.x, you use constraints or variables.constraints.
In 2.x, relocating was done with the relocate() method. It's been replaced with redirect();
We no longer recommend using the Turbolinks library for SPA-style applications.
If you still want to use these methods in your layout manually, you are welcome to do so, but you will need to update your ColdBox.cfc module settings. See .
See the section of these docs. Learn more about Alpine at .
You can provide a key, which is essential for correct rendering when nesting components ( See )
You can lazy load components ( See )
See .
TurboLinks has been replaced with . By adding a simple wire:navigate to your links, you can quickly load pages in the background and prevent re-rendering all your JS and CSS assets.