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');
|