aico-image-editor/src/hotReloader.js

Combine multiple image into and create single combined image

export function hotReloadAlpineComponent(componentEL, updateComponentHTML) {
    
    

    updateComponentHTML().then(componentHTML => {


        const alpineInitPointEl = componentEL.shadowRoot ? componentEL.shadowRoot : componentEL;

        

        //console.log(componentHTML.default)
        const replacedComponent = new DOMParser().parseFromString(
            componentHTML.default,
            'text/html'
          ).body.firstChild;


        alpineInitPointEl.innerHTML = '';
        alpineInitPointEl.appendChild(replacedComponent);
        Alpine.destroyTree(alpineInitPointEl)
        Alpine.initTree(alpineInitPointEl);
        alpineInitPointEl.alpinereInit = true

        // // Clear existing component elements (optional)
        // if (shadowRoot) {
        //   shadowRoot.innerHTML = ''; // Or use a more targeted removal strategy
        // } else {
        //   // Handle non-shadow DOM scenarios (if applicable)
        // }

        // // Re-initialize Alpine with updated HTML
        // const componentTemplate = new DOMParser().parseFromString(updatedHTML, 'text/html').body.firstChild;
        // // Optionally update styles or data before re-initializing Alpine
        // Alpine.initTree(componentTemplate);
    });
}