aico-image-editor/src/components/canvasControls/colorTab/colorTab.js

Combine multiple image into and create single combined image

const loadColorTabHTML = () => import(/* webpackMode: "eager" */'./colorTab.html')

import colorSubTab from '../colorSubTab/colorSubTab';
import gradientSubTab from '../gradientSubTab/gradientSubTab';
import { hotReloadAlpineComponent } from '../../../hotReloader';


// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../../initStyles';
import initHTML from '../../../initHTML';
initHTML('color-tab',  loadColorTabHTML)

document.addEventListener('alpine:init', function() { 
    Alpine.data('colorSubTab', colorSubTab)
    Alpine.data('gradientSubTab', gradientSubTab)
})

export default () => ({
    init() {
        if(module.hot) {
            module.hot.accept('./colorTab.html', function() {
                console.log('change detected')
                hotReloadAlpineComponent(this.$el.getRootNode().host ,loadColorTabHTML)
            }.bind(this));
        }
    },
    activeSubTab: 'color'
})