Alpine code on a template that is injected by javascript breaks when a plugin is installed that also uses alpine.

[BramMortier]

This "bug" or lack of knowledge by me has had me running against a wall for days. I build mostly Craft CMS websites (twig based templating) and use AlpineJS for interactivity. I love how easy it makes everything!

Recently I've also dabbled in building custom Craft CMS plugins where I was again hoping to use AlpineJS for the javascript stuff. First issue I had to solve was how Alpine reacts to multiple instances on the same page. A quick google search gave me this issue on the Alpine repository itself

#3016

This solved the issue for me with the downside of losing shorthands and the Alpine global window object. Not bad especially since plugins really don't get as complex as websites. It worked fine until i installed my plugin on a site that has javascript filters. Everytime a filter is clicked this alpine method is executed. It fetches a twig template that has two view modes list and grid.

async renderResults() {
	this.loading = true;
	this.$refs.results.innerHTML = "";

	const delay = () => new Promise((resolve) => setTimeout(resolve, 500));

	const queryString = buildQueryString([{ key: "services", value: this.services.join(",") }]);
	const requestUrl = `/requests/projects/filtered?${queryString}`;

	try {
		const [{ content }] = await Promise.all([templateRequest(requestUrl), delay()]);

		this.$refs.results.innerHTML = content;
	} catch (error) {
		console.error("error fetching projects");
	} finally {
		this.loading = false;
	}
},

{% set class = class|default("") %}
{% set attributes = attributes|default({}) %}

{% set projects = projects|default([]) %}

<div class="c-project-results {{ class }}" {{ attr(attributes) }}>
    <div class="c-project-results-info">
        <p class="typo-body-md">{{ projects|length }} Resultaten</p>

        {% include "_components/projectResultsViewControls" %}
    </div>

    {% if projects|length %}
        <div x-show="view === 'grid'" class="c-project-results-grid">
            {% for project in projects %}
                {% set image = project.featuredImageField.one|default("") %}
                {% set title = project.title|default("") %}
                {% set dateOfCompletion = project.dateOfCompletionField|default("") %}
                {% set services = project.servicesProvidedField|default([]) %}
                {% set description = project.descriptionField|default("") %}
                {% set url = project.url|default("") %}

                {% include "_components/projectCard" with {
                    image,
                    title,
                    dateOfCompletion,
                    services,
                    description,
                    url
                } only %}
            {% endfor %}
        </div>

        <ul x-show="view === 'list'" class="c-project-results-list">
            {% for project in projects %}
                {% set image = project.featuredImageField.one|default("") %}
                {% set title = project.title|default("") %}
                {% set dateOfCompletion = project.dateOfCompletionField|default("") %}
                {% set services = project.servicesProvidedField|default([]) %}
                {% set description = project.descriptionField|default("") %}
                {% set url = project.url|default("") %}

                {% include "_components/projectListItem" with {
                    image,
                    title,
                    dateOfCompletion,
                    services,
                    description,
                    url
                } only %}
            {% endfor %}
        </ul>
    {% endif %}
</div>

The state of this injected template is manages outside of itself

export function projects() {
	return {
		parser: new DOMParser(),
		loading: true,
		services: [],
		view: "grid",

		async init() {
			this.renderResults();
		},

For some reason this breaks the functionality only if the plugin is installed?

import Alpine from "alpinejs";

import { header } from "../components/header";
import { beforeAfter } from "../components/beforeAfter";
import { projects } from "../components/projects";
import { meetingRequestForm } from "../components/meetingRequestForm";
import { projectRequestForm } from "../components/projectRequestForm";
import { site } from "../components/site";

window.Alpine = Alpine;

Alpine.data("site", site);
Alpine.data("header", header);
Alpine.data("beforeAfter", beforeAfter);
Alpine.data("projects", projects);
Alpine.data("meetingRequestForm", meetingRequestForm);
Alpine.data("projectRequestForm", projectRequestForm);

Alpine.start();

this is the project alpine initialisation

import Alpine from "alpinejs";

import { toolbar } from "./toolbar.js";
import { menu } from "./menu.js";

Alpine.prefix("toolbar-");

Alpine.data("toolbar", toolbar);
Alpine.data("menu", menu);

Alpine.start();

and this is the initalisation within the plugin.

Do you see any reason why this would break stuff? I'm guessing alpine gets confused on which component the injected template should listen to but I get no errors in the console... Would love to get some help on this one!

[ekwoka]

I don't see what would cause an issue here. When you say it's "broken" what is broken?

[BramMortier]

        <div x-show="view === 'grid'" class="c-project-results-grid">
            {% for project in projects %}
                {% set image = project.featuredImageField.one|default("") %}
                {% set title = project.title|default("") %}
                {% set dateOfCompletion = project.dateOfCompletionField|default("") %}
                {% set services = project.servicesProvidedField|default([]) %}
                {% set description = project.descriptionField|default("") %}
                {% set url = project.url|default("") %}

                {% include "_components/projectCard" with {
                    image,
                    title,
                    dateOfCompletion,
                    services,
                    description,
                    url
                } only %}
            {% endfor %}
        </div>

        <ul x-show="view === 'list'" class="c-project-results-list">
            {% for project in projects %}
                {% set image = project.featuredImageField.one|default("") %}
                {% set title = project.title|default("") %}
                {% set dateOfCompletion = project.dateOfCompletionField|default("") %}
                {% set services = project.servicesProvidedField|default([]) %}
                {% set description = project.descriptionField|default("") %}
                {% set url = project.url|default("") %}

                {% include "_components/projectListItem" with {
                    image,
                    title,
                    dateOfCompletion,
                    services,
                    description,
                    url
                } only %}
            {% endfor %}
        </ul>

Sorry I should have been a bit more clear about what exactly is breaking. This template above which is injected via JS as mentioned above sort of ignores all alpine attributes. I noticed because both x-show templates where showing at the same time. First I tried debugging my own logic but the more and more I tested I realized that even adding a simple click handler @click="console.log('hello world')" or x-init="console.log('init')" to any element in the injected part would not work (only if the plugin is active which runs a second alpine as illustrated above in the two files where alpine gets initialized).

It's pretty hard to setup an example for u to tinker around with but if you don't mind spending some time trying to figure out the issue I could setup a testing environment with the plugin installed on the website that's causing the issue. I can also provide both repositories for you to reference.

Let me know if this extra info helps and if you want me to setup the test environment. Thanks in advance!

[ekwoka]

Oh, so this is partially an issue with x-show.

When x-show is added with an element, it doesn't hide/show the element on the first pass. It's been a tricky thing to figure out.

So ideally you should add your own style="display: none" on the one that shouldn't be shown.

[BramMortier]

Don't exactly think that's the whole issue. As I stated above all Alpine attributes stop working in this template. x-show works fine without the extra Alpine instance in the plugin.

[ekwoka]

Hmm...then it might be related to how different instances will mark an element as being processed...

[BramMortier]

Any way you see for mee to debug this further?