x-html directive: execute script tags after updating HTML

[iceleo-com]

Hi,

I am implementing a customer account panel with lazy load contents. In this panel, there are some social login buttons (Google, Facebook,...etc)

I want to load these libraries (social login SDKs) only when a user opens the customer account panel.

The contents for the x-html directive is loaded via AJAX.

After completing coding, the HTML is loaded & shown as expected. But the libraries (social login SDKs) in the script tag are not loaded.

I am struggling to find an alternative solution. If you can update the following few lines of code to the x-html directive in next version, that would be great.

import { directive } from '../directives'
import { initTree } from '../lifecycle'
import { mutateDom } from '../mutation'

const preservedScriptAttributes = ['type', 'src', 'nonce', 'noModule'];

function DOMeval(referentNode) {
    const doc = document;

    const script = doc.createElement('script');

    script.text = referentNode.textContent || '';

    for (let i = 0; i < preservedScriptAttributes.length; i++) {
        const attr = preservedScriptAttributes[i];
        if (referentNode[attr]) {
            script[attr] = referentNode[attr];
        }
    }

    doc.head.appendChild(script);
    script.remove();
}

directive('html', (el, { expression }, { effect, evaluateLater }) => {
    let evaluate = evaluateLater(expression)

    effect(() => {
        evaluate(value => {
            mutateDom(() => {
                el.innerHTML = value

                el._x_ignoreSelf = true
                initTree(el)
                delete el._x_ignoreSelf

                el.querySelectorAll('script').forEach(DOMeval)
            })
        })
    })
})

[ekwoka]

It would be extremely unwise for Alpine to add this to the core, as it opens the door for XSS which should be a more intentional choice.

You can easily use what you show here in your own project as a directive to evaluate the scripts.

I'd also recommend just replacing the existing script node with your duplicated one, not adding it to the head.

function DOMeval(referentNode) {
    const doc = document;

    const script = doc.createElement('script');

    script.textContent = referentNode.textContent || '';

    preservedScriptAttributes.forEach(attr => {
      script[attr] = referentNode[attr]
    })
    
    referentNode.replaceWith(script)
}