Let me tell you about all the new Livewire stuff!
Happy Monday morning!
I have good news and bad news...
Bad news: The keys on my keyboard are worn down to nubs, my eyes are dry as a walnut, and my wrists hurt like the dickens.
Good news: It was well worth it. There is a pile of new Livewire features and announcements I can't WAIT to share with you. Let's do it 🚀
First, let's cover the more "product" side of things, then we'll cover all the new features that are waiting for you next time you run "composer update".
First, the "product" stuff 🤑
🔥🔥🔥 All New Livewire Screencasts
I've finally finished recording three new beasts of a screencast series:
- Introduction to Livewire 3
- Forms Essentials
- Modals
The intro series is live right now, and you can watch it here for free →
The next two will be released this week 👀 (with a fat Black Friday deal of course).
There are over four hours of content, and of course, you get access to all the code to go along with them.
The videos are fun and consumable but DEEP. We cover all sorts of ins and outs of Livewire along the way.
Honestly, even if you don't watch a single screencast, the components and snippets themselves are worth it. I've already been copying and pasting components from them into my own apps.
Look out on Twitter and in your inbox this week for the drop.
Breaking ground on Livewire UI
Since the early Livewire days, people have requested some kind of Livewire component library. Things like dialogs, dropdowns, tabs, select pickers, and such.
We built Alpine Components to solve this problem. However, that project is targeted at Alpine developers regardless of whether they use Livewire or not.
There's still a need to be filled. Therefore, I'm partnering up with Keith Damiani (The directory of engineering at Tighten) to build "Livewire UI".
This project is going to be jam-packed with all the little UI components you need in your apps. We're gonna tackle form inputs, UI widgets, and ton more.
The project is still SUPER early stages, but just wanted to let you know it's in the works. Stay tuned...
Wirebox is launching TODAY
If you haven't heard of Wirebox, it's an online playground to build and test out Livewire components in a browser.
The creator, Philo Hermans, did a fantastic job and is launching it free to the public today.
By the time you get this email, it's already live and ready for you.
Live streaming on YouTube
Most Fridays around 10am EST I've been trying to hop on YouTube Live and hang out with folks, fix bugs, brainstorm features, etc. It's been kind of like a Livewire "office hours".
You can watch previous ones here or follow me on Twitter for a heads-up when I start streaming.
Lots of good improvements have come out of these streams. It's really fun to connect with the community and hear from everyone. Come chill next time!
It's "new feature" time baby 👷
For me, there's nothing that drives new features like recording screencasts and encountering things in Livewire I think could be better.
This round of screencasts is no different. Here's the heap of things that have come out of the recent videos...
Listening for events on nested Livewire components
I have no idea how I've made it this far without adding this feature. I use it all the time now. In Livewire you now have the ability to easily run an action from a parent when a child dispatches an event. No need for adding "#[On]" listeners!
Read more on the Livewire docs →
New @script and @assets directives
For a long time, it's felt like there's no good way to load JavaScript files and inline scripts inside Livewire components.
You end up needing to push to stacks and register annoying event listeners. Not to mention, it all completely breaks if you want to lazy load your component after the initial page load.
Welp, those days are behind us. Livewire now ships with two convenient new directives, @assets and @script.
Now you can easily load third-party libraries for a single component or execute JavaScript to enhance your components. Even better, these can be used inside your re-usable Blade components. Livewire handles all the hard parts like making sure your assets only load once per page and your scripts execute at just the right time.
Learn more about @script/assets here →
Easily position dropdowns with x-anchor
Positioning dropdowns and tooltips is no small task (making sure they dynamically open in the opposite direction if there's not enough room on the page). To make the experience as simple as possible, I created a new Alpine plugin called "x-anchor".
Just slap it onto a div and everything else is taken care of for you.
Check out the x-anchor docs →
(x-anchor now ships with Livewire by default; you can use it inside your app whenever you want!)
Changing the "Rule" attribute to "Validate"
When writing complex validation for Livewire components, you often need to use Laravel's "Rule" objects. However, Livewire has an attribute that's ALSO called "Rule". This has been starting to feel more and more annoying to me.
Of course, you can alias one of the classes when you import them, but it feels a little gross to me. To prevent this confusion, we've renamed "Rule" in Livewire to "Validate":
If you're concerned about breaking changes, rest assured we've kept "Rule" around for backward compatibility.
See more about "Validate" in the docs →
Easily show confirmation dialogs with "wire:confirm"
Have you ever wanted to show a user some kind of confirmation dialog before they do something dangerous, like "delete" a model in your app?
If you're like me, you've built these modals by hand and wired up all the behavior yourself.
That's all great, however, showing users a simple browser alert to confirm an action is much easier AND lots of big sites like GitHub already do this, so you don't have to feel bad.
Introducing: wire:confirm. A stupid-simple way to prompt users for confirmation before they do something they'll regret.
Check it all out on the wire:confirm docs →
New wire:model.boolean for radio inputs
This is one of those quality-of-life things I encountered while recording the "Radio buttons" episode in the new forms series.
When you have radio buttons in HTML and want to toggle a boolean value in your Livewire component simply, you can now use "wire:model.boolean".
All sorts of documentation improvements
One shortcoming of mine with Livewire in the past is sparse documentation lacking real-life examples.
With Livewire 3 it's become my mission to do better.
Recently I've been looking through Algolia's search analytics for the docs site and have been able to identify common searches and write dedicated documentation for those.
For example, "alpine" is the most searched term on the docs and after seeing that I searched it myself. Turns out there still isn't "one" place to read all about using Alpine in Livewire. The documentation is scattered around.
That morning, I cranked out a new "Alpine" documentation page in the docs. (Check it out here if you care)
Another example is a Live stream I did recently where someone mentioned there was no docs for "wire:stream". So I spent the next week writing dedicated documentation pages for every single "wire:" directive in Livewire. You can take a look here.
If you haven't read through the docs recently, there's probably lots more there for you since you last checked.
Oodles of bug fixes
This is kind of a non-sexy update, admittedly, but I've recently dove deep into a handful of areas in the Livewire codebase to make them as rock solid as possible. I'm just going to list a few with no context lol. Enjoy...
- The x-teleport system
- Livewire's morphing algorithm
- Form Object's validation system
- The network request bus
- A zillion other little areas of the codebase 😛
Aaaand that's a wrap
There you have it, folks. A giant pile of new stuff for you to gnaw on.
As always, thank you so much for caring and using these tools. I pour my heart and soul into them; all your support and encouragement mean the world to me. Seriously.
Oh yeah, did I mention I'm launching new paid Livewire content this week? I did? K, just checking.
Peace,
-Caleb
Comments
Post a Comment