Include Alpinejs

[tiger360]

Hey,
Is it possible to include Alpinejs library to handle the DOM and inject elements on it ?

Thanks

[7nik]

Of course. Use @require.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://github.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
// @require      https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js
// @grant        none
// ==/UserScript==

// repository name
const el = document.querySelector("main #repository-container-header h2");
console.log(el);
el.insertAdjacentHTML("beforeend", `<span x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></span>`);

[mfaizsyahmi]

The example worked, but I'm having trouble getting alpinejs' elements to teleport to places on the base website, which is being created/destroyed based on the url pathnames. basically the framework the site uses renders the main part of the site based on routes.

Any suggestions to make alpine latch onto the other framework's dom properly, and survive the parent dom being created/destroyed?

[7nik]

I usually make wrappers around MutationSummary: example 1, example 2