aico-image-editor/src/components/pictureTab/pictureTab.js

Combine multiple image into and create single combined image

//import Alpine from 'alpinejs';
const loadPictureTabHTML = () => import(/* webpackMode: "eager" */'./pictureTab.html');


// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../initStyles';
import initHTML from '../../initHTML';
initHTML('picture-tab',  loadPictureTabHTML)
import { hotReloadAlpineComponent } from '../../hotReloader';

import productPicturesSubTab from './subtabs/productPicturesSubTab/productPicturesSubTab';





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

export default () => ({
    
    activeSubTab: 'productpictures',
    init() {
        initStyles(this.$el.shadowRoot);

        if(module.hot) {
                
            module.hot.accept('./pictureTab.html', function() {
                console.log('change detected')
                hotReloadAlpineComponent(this.$el.getRootNode().host ,loadPictureTabHTML)
            }.bind(this));
          }
    },
    
    
})