Proposal: trigger event on all callbacks in htmx extension

[davidjr82]

Since the default way to use this extension in htmx is importing directly the js file, I propose to trigger an event in all morphed callbacks, so the user can listen to them in their code/libraries and react without modifying anything by default:

htmx.defineExtension('morph', {
    isInlineSwap: function (swapStyle) {
        return swapStyle === 'morph';
    },
    handleSwap: function (swapStyle, target, fragment) {
        return Idiomorph.morph(
            target,
            fragment.children,
            {
                morphStyle: (swapStyle === 'morph' || swapStyle === 'morph:outerHTML') ? 'outerHTML' : 'innerHTML',
                callbacks: {
                    beforeNodeAdded: (node) => node.dispatchEvent(new Event('idiomorph:beforeNodeAdded')),
                    afterNodeAdded: (node) => node.dispatchEvent(new Event('idiomorph:afterNodeAdded')),
                    beforeNodeMorphed: (node) => node.dispatchEvent(new Event('idiomorph:beforeNodeMorphed')),
                    afterNodeMorphed: (node) => node.dispatchEvent(new Event('idiomorph:afterNodeMorphed')),
                    beforeNodeRemoved: (node) => node.dispatchEvent(new Event('idiomorph:beforeNodeRemoved')),
                    afterNodeRemoved: (node) => node.dispatchEvent(new Event('idiomorph:afterNodeRemoved')),
                },
            }
        );
    }
});

[1cg]

This will be very heavyweight from a perf perspective. I can see making this an option though.