import * as riot from 'riot';
import TinyFade from './src/tiny-fade.riot';

riot.install((component) => {

    const {
        onBeforeMount,
        onMounted
    } = component

    // patch the onBeforeMount to create slots in runtime
    component.onBeforeMount = (...args) => {

        const html = component.root.innerHTML

        if (html) {

            // empty the component html
            component.root.innerHTML = ''

            // define slot-html to runtime
            Object.defineProperty(component, 'slot-html', {
                value: html,
                enumerable: false,
                writable: false,
                configurable: true,
            })
        }

        // call the original onBeforeMount
        onBeforeMount.apply(component, ...args)
    }

    component.onMounted = (...args) => {
        component.$('slot-html').outerHTML = component['slot-html']

        // call the original onMounted
        onMounted.apply(component, ...args)
    }

    return component
})

riot.register('tiny-fade', TinyFade);
riot.mount('tiny-fade');