Artifact
fd66dabbd3ab318b51af2704ef80e7a80ea6c164b1eb41e403a7785b2f128cec:
/**
*
* You can check the live example on here http://jsfiddle.net/gianlucaguarini/ftoLgfg3/
*
*/
var riot = require('../../../dist/riot/riot'),
jsdom = require('jsdom').JSDOM,
myComponent = 'my-component',
myComponentHTML = `
'<h1>{ opts.title }</h1>',
'<p>{ opts.description }</p>',
'<my-list-item ref='itm' each="{ opts.items }">'
`,
result,
myListItem = 'my-list-item',
myListItemHTML = `
'<input ref='input' type="checkbox" onchange="{ onChange }">',
'<span if="{ opts.isActive }">I am active</span>'
`
/**
* Helper function to generate custom array
* @param { int } amount amount of entries in the array
* @param { * } data
* @return array
*/
function generateItems (amount) {
var items = []
while (--amount) {
items.push({
isActive: false
})
}
return items
}
/**
* Check the memory usage analizing the heap
* @param { function } fn
* @return { array } memory used + duration
*/
function measure(fn) {
var startTime = Date.now()
fn()
global.gc()
return [process.memoryUsage().heapUsed, Date.now() - startTime]
}
/**
* Adding the custom tags to the riot internal cache
*/
function setupTags() {
riot.tag(myComponent, myComponentHTML, function(opts) {
var self = this
function loop () {
opts.items = generateItems(1000, {
isActive: false
})
result = measure(self.update.bind(self))
console.log(
(result[0] / 1024 / 1024).toFixed(2) + ' MiB',
result[1] + ' ms'
)
setTimeout(loop, 50)
}
loop()
})
riot.tag(myListItem, myListItemHTML, function (opts) {
this.onChange = function (e) {
opts.isActive = e.target.checked
}
})
}
/**
*
* Mount the custom tags passing some fake values
*
*/
function mount() {
riot.mount(myComponent, {
title: 'hello world',
description: 'mad world',
items: generateItems(1000, {
isActive: false
})
})
}
// Initialize the test
var doc = new jsdom(`<${myComponent}/>`)
global.window = doc.defaultView
global.document = doc.window.document
setupTags()
mount()