Poor man's Alpine SPA with HTML modules/components. How to initialize components better?

[hrr-amboss]

Hey,
I love Alpine and it made me turn away from learning React. I strongly believe in the "it must be possible in an easier way" attitude. My goal is to kind of circumvent any package managers or bloat - but to just build with Alpine and a text editor. I lack the skills and want to be rigid 💯 But when building projects, I noticed that the HTML grows very big. Also I like the benefits of an SPA in terms of managing my project and keeping single sources of truth.

So I was trying to modularize the code of an Alpine project to have it more like in e.g. React. I found a simple and stupid way of doing that here.

So what I do is put my Alpine "component" in a separate HTML file, e.g. content.html. It can contain all kind of Alpine code. Then I embed this component where needed like this:

<div component="content.html"></div>

Then I run this script when Alpine initializes.

function loadComponents() {
    var z, i, elmnt, file, xhttp;
    /* Loop through a collection of all HTML elements: */
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("component");
        if (file) {
            /* Make an HTTP request using the attribute value as the file name: */
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) { elmnt.innerHTML = this.responseText; }
                    if (this.status == 404) { elmnt.innerHTML = "Page or element not found."; }
                    /* Remove the attribute, and call this function once more: */
                    elmnt.removeAttribute("component");
                    loadComponents();
                }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
        }
    }
}

This really helps me keep my code clean and allows me to recycle components. I can even fake "pass props" like in React. Here's an example of this. I made a button component button.html that I'd like to recycle and flavor in different places in my app.

<button class="btn" :class="buttonType" @click="onClick">Remove Name</button>

I can embed this component wherever needed and pass in the props. As it will simply be rendered inside the calling div its x-data basically is available for the button and flavors it. Here's an example call passing in an onClick method and a buttonType prop.

<div component="button.html" x-data="{
                    onClick() {
                        firstName = ''
                        secondName = ''
                    },
                    buttonType: 'btn-info'
                }"></div>

I know this might seem quirky but it helps me and I want to experiment more.

So one big issue is: all the HTML of the entire page will be loaded all at once, then Alpine will do it's work. What I was thinking about was: could I basically initialize / load / mount such an HTML component only when it's needed, e.g. when a route is called or when a user clicks a button.

My idea was to change the above pattern like this. I would call the component like this:

<div x-data="{}" component="mountedComponent.html" x-init="mountComponent($el)"></div>

And I adapted the script like this - it will take in the current element and then add in the component HTML:

function mountComponent(element) {
    file = element.getAttribute("component");
    if (file) {
        /* Make an HTTP request using the attribute value as the file name: */
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200) { element.innerHTML = this.responseText; }
                if (this.status == 404) { element.innerHTML = "Page or element not found."; }
            }
        }
        xhttp.open("GET", file, true);
        xhttp.send();
        /* Exit the function: */
        return;
    }
}

This works fine with regular HTML. My problem:i t doesn't work with Alpine code inside the HTML component. I assume this is because Alpine is already initialized once the HTML is loaded and Alpine doesn't run over the components HTML anymore.

Is there anyway to re-initialize Alpine or let Alpine run over this code?

[danddanddand]

You can use initTree which is exposed on Alpine global.

I would say this approach would benefit with a server side templating language instead. Making the client fetch all the files for each component would be extremely expensive and won't scale. This feels more like an anti pattern. If you really want to stick with just JavaScript and break stuff into pieces/components you might as well use Vue if you like Alpine syntax.

[hrr-amboss]

Great, thanks for your input. I agree, this won't be scalable - will consider looking into Vue as well. Thanks!