Some impressions from my first time using CBWire

Box Modules CBWIRE
1

I had sometime to put together a small demo app. I decided to try out CBWire, Quick and Tailwind + DaisyUI. This was the first time I had used that particular set of tools and I was honestly really impressed. Even without any prior experience with CBWire or livewire it felt very natural and easy to pickup.

That being said I did notice a few things I wanted to bring up/get some feedback on.

Documentation
A lot of the component examples start with <!-- Template -->, which is unfortunate because that prevents the component from loading. At first I thought it was a bug until I came across this github issue. If I can make a suggestion it would be to either resolve the issue and allow comments on the first line or at least change the documentation so it doesn’t cause people to error when they copy/paste.

Conditional Components
I was able to create nested components just fine. That was easy. After a bit I wanted to try and create conditional components, something like

<cfoutput>
<div>
  <cfif loggedIn>
    #wire("secureCompnent")#
  <cfelse>
    #wire("loginForm")#
  </cfif>
</div>
</cfoutput>

No matter what I tried it would always render the component that was first loaded - either secureComponent or loginForm depending on what the value of loggedIn was at the first load. Eventually I decided to refactor my code to use separate views and eliminate the condition. That worked fine. Is conditional rendering a thing and I just couldn’t get it right?

Security
I was curious about how one might go about securing CBWire components. It isn’t obvious to me how you would secure individual components. Sure the pages they are loaded on would be easy to secure but since the module registers a single endpoint it seems like it would be easy to secure your pages but forget to secure your CBWire components. Would you recommend creating CBSecurity rules based on component names?

Lots of questions! No rush! Like I said, just working on a personal project and trying out new things. Thanks for the work you put into CBWire. It’s awesome! Looking forward to using it on something that sees the light of production deployment :grinning:

2 Likes
2

@Jacob_Beers I can’t tell you how much I appreciate the feedback! Great points on all fronts, and the <!— Template —> comments I added to all the code examples, I never realized wouldn’t actually run. :scream:

Just this morning I’ve pushed a bunch of fixes and improvements to what will be released as 3.1 if you want an early preview, you can pull those down and give them a try. You’ll need to reinit afterward.

box install cbwire@3.1.0-snapshot --force

As for the conditional components, you can do conditional renders but unfortunately, you have to call refresh() on the component.

For example:

<cfscript>
    data = {
        toggle: true
    };

    function toggleComponent() {
        data.toggle = !data.toggle;
        refresh();
    }
</cfscript>

<cfoutput>
    <div>
        <cfif toggle>
            #wire( "Component1" )#
        <cfelse>
            #wire( "Component2" )#
        </cfif>

        <button wire:click="toggleComponent" type="button">Toggle</button>
    </div>
</cfoutput>

I’m hoping to come up with a better way to handle this but currently, you have to create an Action that calls refresh().

The security issue I’ve been meaning to address. You can place security checks in your onDIComplete() method, but I’d like to introduce something much more elegant.

<cfscript>
    // This is lame
    function onDIComplete() {
        var sessionService = getInstance( "SessionService" );
        if ( !sessionService.userLoggedIn() ) {
            throw( type='NotLoggedIn' );
        }
    }
</cfscript>

I’ll try to work in some features with security before the official 3.1 launch.

Thanks!

3

@Jacob_Beers I’ve pushed up a fix to 3.1.0-snapshot that is preventing components from rendering if there are HTML comments in the template.

<!--- This is a template with multiple comments --->
<cfoutput>
    <!-- we have single line comments -->
    <!-- multi
            line
                comments -->
    <div>
        Template with comments
        #now()#
    </div>
</cfoutput>

Would you mind pulling down the changes and testing them out for me? I would much appreciate it!

box install cbwire@3.1.0-snapshot --force
4

@gcopley everything looks good! I was able to test both the comments and using refresh() to render conditional components.

1 Like