I try to keep it really simple because I'm primarily a php developer. I mean, I probably write more JavaScript these days than php, but I'm more comfortable with php. So when I'm source diving projects on GitHub, JavaScript projects, I'm generally just bewildered. Like I can't even track what's going on between TypeScript and build, bundle, whatever. It's just hard for me. So I try to keep it as simple as possible. They're just plain JS files with plain JavaScript. Here's a directives directory and this is all the code for each directive, like X-text, all the code lives in there.

Here's a directives directory and this is all the code for each directive, like X text, all the code lives in there. X show, X on, X model, X if, stuff like that. And then this is component. This is where basically the entire thing lives. This is where all the Alpine component stuff happens. X just boots it up. polyfills is for old browsers and utils is just little utilities I use throughout. Okay. So that's kind of a broad overview.

And here's really the meat of it. This start, this kind of explains everything. It's like get the root, suck the data out of the root, observe the data, register the listeners on the page, and then refresh the DOM. Those are the basic functions of Alpine. And right now they're encapsulated perfectly. So I think we should walk through one by one and find where the stuff exists in Alpine. So let's switch over to Alpine's code base. And here it is. We'll start with index.js.

And here it is. We'll start with index.js. This is where everything starts. And we have an Alpine object, just like we just built. And there's a start method, just like we built. But it looks a little bit different. So I'm going to make a disclaimer right up front. Alpine has been out there for a while. It meets a ton of use cases, it has a lot of features. We built a very, very stripped down version.

It meets a ton of use cases, it has a lot of features. We built a very, very stripped down version. So as I sort of source dive this with you, there's of course, lots of extra code that does lots of extra things, solves edge cases, extra features we didn't cover. So it's not going to feel the same, but I just want to show you the parts of it that are the same. So this is the same, we have .start. And then somewhere we do this initializeComponent. So let's go to initializeComponent. And then here we do new Component.

So let's go to initializeComponent. And then here we do new Component. So this component object is the thing that boots up the component, gets the data, observes it, all that stuff. So from now on, we're going to be diving Component. This is where basically everything lives, this component.js. Okay, back to our Alpine. So we got the root, now we're initializing it. Here's rawData equals getInitialData. Let's find where we get the rawData.

Here's raw data equals get initial data. Let's find where we get the raw data. So here it is, this.$moneySign, which is the element, get attribute x-data. So now we have the data attribute, data-expression, don't have to worry about that. And then we pass in the data-expression into the saferEval, which is the same thing as eval. It's just a better eval. Like I told you, eval is actually bad. We'll take a peek at this. You can use this function constructor to actually kind of accomplish the same thing as eval.

We'll take a peek at this. You can use this function constructor to actually kind of accomplish the same thing as eval. But here's the width that you saw from before. It's basically the same exact stuff. So now I have the unobserved data, which we called rawData. Then we wrap it in an observable. So let's see where that happens. Scroll a little bit farther down and it says wrap data in observable, we pass in the unobserved data, and we get back some stuff. But basically, this is the same thing, this this.data equals data.

So walk and skip nested components. Because if you think about it, Alpine, you can nest components. And when you're walking, you want to leave the components to walk themselves. So it's basically a walk with some extra juice. But look at this. Here's the walk function. And let's, let's dive that function walk. This is in my utilities, JavaScript. So utils, walk, and check it out, callback, node, firstElement, child, walk, node, nextElement, sibling.

There's register listeners, we get all the attributes that are of interest. And then we do a switch case statement where we say if it's on register listener, if it's a modelRegister, modelListener, and then you know, it just goes on from there. If we dive in here, if we scroll far enough, you'll eventually see this, nope, not that that's removeEventListener, this, this is it when all said and done, listenerTarget at eventListener. So you saw that, obviously, there's a lot more going on here. But you get the gist. All right, so there's register listeners. Now refreshDOM.

All right, so there's register listeners. Now refresh DOM. Here is the part where it actually goes through and find something like x-text. Okay, so register listeners, then resolve bound attributes, I called it resolve bound attributes, we don't have to worry about the name, it's not great, whatever, okay, resolve bound attributes, take the element, we loop through the attributes, just like we did. And we have a switch case where we're saying if the attribute is model, bind, text, HTML, there's lots of axes x-show, x-if, x-cloak, these are all those things. Some of them sub out to a separate file like x-if, take a look at x-if. So in x-if I say handleIfDirective, which lives inside of if because if is big enough.

Some of them sub out to a separate file like x.php, take a look at x.php. So in x.php I say handle if directive, which lives inside of if because if is big enough that it needs its own file. Okay, so where is x.text? Here's x.text, check it out, evaluate the expression. So get the actual data, pretend this doesn't exist. And look at this l.innerText equals output. Exactly that show is a little bit more complicated. But at the core of it is look at this l.style.display equals none. It's the same thing.