You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
45 lines
1.1 KiB
4 years ago
|
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');
|