import elm from '@guilala/elm';

const styleSheet = /* css */ `
    .span-bold {
        font-weight: bold;
    }
`;

// child component
function childComponent(elm) {
    const styleSheet = /* css */ `
        .span-class {
            font-style: italic;
        }
    `;

    const shadow = elm(
        [['div', {class: 'span-class', txt: 'Child component'}]],
        styleSheet
    );

    setTimeout(() => {
        elm(
            [['div', {class: 'span-class', txt: 'Child added later'}]],
            styleSheet
        );
    }, 1000);
}

// root component
elm([
    ['span', { class: 'span-bold',  txt: 'World'}],
    childComponent,
    ['div', { txt: 'footer'}]
], document.body, styleSheet);

import { state } from '@guilala/elm';

const store = new state();

// dispatch new state of someData
store.dispatch('someData', { test: 1 });

// someData on change
store.subscribe('someData', newState => {
    console.log('someData', newState);
}, false);