Laravel Mentions
This episode is for members only

Sign up to access "Laravel Mentions" right now.

Get started
Already a member? Sign in to continue
Playing
15. Solving duplication with an Alpine plugin

Episodes

0%
Your progress
  • Total: 1h 52m
  • Played: 0m
  • Remaining: 1h 52m
Join or sign in to track your progress

Transcript

00:00
Because our mentionable functionality is shared between this input here and the input when we edit stuff, which of course we now have it as completely out of date, we need to go ahead and find some way to share this functionality. So if we make a change to what we've done, it's reflected everywhere. To do this, we're going to go ahead and build out a really simple Alpine plugin to pull this in.
00:22
Okay, so how do we do this? Well, let's go over to our JavaScript directory under resources, and let's go ahead and create out a directory in here called plugins. Now we're going to create out the JavaScript plugin for this, which we're just going to call mentionable, and here we can define out a Alpine plugin. To do this, we go ahead and export a method or a function, and this will receive in Alpine when we use this exported function within Alpine.plugin when we register this later. Just to demo this, I'm going to go ahead and log out console.log Alpine plugin, and let's go ahead and register this over in app.js.
01:03
So let's import the mentionable plugin that we just created from mentionable, and in here we want to do something like Alpine.plugin, and then register our mentionable plugin. But because we're using Livewire here, we don't have immediate access to Alpine, so what we want to do is manually bundle this. So to do this, we are going to come over to something like app.blade.php, a common template that we're using, and just at the bottom here, we are going to say Alpine or Livewire script config, that's going to go ahead and manually pull that in for us.
01:38
So now what we can do is over here, go ahead and import Livewire and Alpine separately from, and let's go into vendor, livewire, livewire dist, and livewire.esm.js. Then we're going to go ahead and manually start Livewire, so we're going to say livewire.start. Now that shouldn't affect any of the functionality that we have in our app already, so we should be able to do everything as normal. And that's not working at the moment, let's just have a look here, and yeah, tribute's not defined.
02:19
So what we need to do is make sure we do this before we start Livewire. Let's do this just at the top here, and that should be good. Let's just check this out, and that looks okay to me. Okay, great, so we're back to how we were before, but now we have this Alpine import, we can do things like this.
02:39
Alpine plug-in, and we can register that mentionable plug-in that we've just pulled in. Now at the moment, all that plug-in is doing is logging out to the console, but now what we can do is just move all of the functionality that we have inside of xinit over to a directive and register this within our plug-in. So what do I mean by this? Well, let's just copy and paste everything within xinit, including tribute attach,
03:09
and let's just get rid of xdata and xinit, just so we don't have this as an Alpine plug-in. Next up, we go over to our mentionable plug-in, we're going to paste all of this in. Now at the moment, of course, this is just not going to work, everything's a little bit messy. Let's leave user search here, and then down here we're going to go ahead and register our directive.
03:28
So we'll use Alpine, which we get into the plug-in as we register it. We can continue to say things like Alpine directive in here. We'll register a directive which looks like this, x and then the name of the directive that we want. So in our case, let's call this mentionable, and as we register this, we get a callback in here
03:50
with the element that we're applying this directive to. So let's take all of what we've done here and put that inside of the directive register. So that's now registering the directive as part of this plug-in. User search could go inside of here if you wanted to, but we're just going to keep it outside.
04:07
Now L is the thing that we're applying this directive to, so this is what we need to figure out. So over in our comment index, rather than applying the plug-in to the overall wrapper, what we could do is get rid of this ref and we could just say x mentionable. Now what that's going to do is it's going to pass this text area as the element through to here.
04:29
Then we can just attach tribute to the element that we've applied the directive to. So this isn't customizable at all, but we don't really need this plug-in to be customizable. So now that we've got this, let's go and see what happens. So we have, if we think about it, let's go through the whole process of this now.
04:50
We import mentionable and register it as a plug-in. The responsibility of this plug-in is to register a directive that uses exactly the same functionality as we had before, including this user search. We're now using this directive directly on this text area, which takes that element and applies it.
05:09
So let's just see if this works and if there's anything broken, we'll fix it up. So let's say hey at, and yeah, there we go. Sure enough, we check out our network tab here as well. We are performing our search and that functionality is now tucked away behind a directive.
05:25
So with that in mind, what we can now do is we can come over to our comment items and we can get rid of all of this. We don't need to duplicate it anymore. And of course we didn't add in the HTTP searching functionality in here.
05:39
We can get rid of the ref in here and we can just apply the x-dimensional directive. So any changes we make now to that is going to be applied anywhere. So once again, let's just pull open our network tab here just so we can keep an eye on our requests. Hey, this works by making our searches.
05:57
And if we do the same here again, you can see that that also works as well. So very quickly and efficiently move this over to a plugin, which means any changes we make here now will be applied both to our initial comment form and each of the edit text areas as well.

Episode summary

In this episode, we tackle a bit of code duplication in our app. Right now, our mentionable functionality (you know, the little @-mention autocompletion) is sprinkled in multiple places—like the main input and the edit section. The problem? Whenever we tweak how mentions work, we need to change it everywhere, and things fall out of sync.

So, our solution: let's create a simple Alpine plugin! You'll see how we extract this shared logic, move it into a dedicated mentionable plugin under a new plugins directory, and then register it with Alpine using Alpine.plugin(). There’s a little trickiness because we’re using Livewire, so we have to manually bundle and import Alpine & Livewire, making sure the plugin registration runs before Livewire starts.

Once the plugin is set up, we move the core logic (previously inside x-init) into a custom Alpine directive—x-mentionable. This means we can now just slap x-mentionable on any <textarea> that needs mentions, and boom—no more duplicate logic! Plus, any tweaks to how mentioning works only need to be made in the plugin, instantly updating everywhere the directive is used.

By the end, we’ve refactored our mentionable logic to be DRY (Don’t Repeat Yourself). It’s tidier, easier to maintain, and sets the stage for future improvements. Nice!

Episode discussion

No comments, yet. Be the first!