Artifact
fd66dabbd3ab318b51af2704ef80e7a80ea6c164b1eb41e403a7785b2f128cec:
0000: 2f 2a 2a 0a 20 2a 0a 20 2a 20 59 6f 75 20 63 61 /**. *. * You ca
0010: 6e 20 63 68 65 63 6b 20 74 68 65 20 6c 69 76 65 n check the live
0020: 20 65 78 61 6d 70 6c 65 20 6f 6e 20 68 65 72 65 example on here
0030: 20 68 74 74 70 3a 2f 2f 6a 73 66 69 64 64 6c 65 http://jsfiddle
0040: 2e 6e 65 74 2f 67 69 61 6e 6c 75 63 61 67 75 61 .net/gianlucagua
0050: 72 69 6e 69 2f 66 74 6f 4c 67 66 67 33 2f 0a 20 rini/ftoLgfg3/.
0060: 2a 0a 20 2a 2f 0a 0a 76 61 72 20 72 69 6f 74 20 *. */..var riot
0070: 3d 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 2e 2e = require('../..
0080: 2f 2e 2e 2f 64 69 73 74 2f 72 69 6f 74 2f 72 69 /../dist/riot/ri
0090: 6f 74 27 29 2c 0a 20 20 6a 73 64 6f 6d 20 3d 20 ot'),. jsdom =
00a0: 72 65 71 75 69 72 65 28 27 6a 73 64 6f 6d 27 29 require('jsdom')
00b0: 2e 4a 53 44 4f 4d 2c 0a 20 20 6d 79 43 6f 6d 70 .JSDOM,. myComp
00c0: 6f 6e 65 6e 74 20 3d 20 27 6d 79 2d 63 6f 6d 70 onent = 'my-comp
00d0: 6f 6e 65 6e 74 27 2c 0a 20 20 6d 79 43 6f 6d 70 onent',. myComp
00e0: 6f 6e 65 6e 74 48 54 4d 4c 20 3d 20 60 0a 20 20 onentHTML = `.
00f0: 20 20 27 3c 68 31 3e 7b 20 6f 70 74 73 2e 74 69 '<h1>{ opts.ti
0100: 74 6c 65 20 7d 3c 2f 68 31 3e 27 2c 0a 20 20 20 tle }</h1>',.
0110: 20 27 3c 70 3e 7b 20 6f 70 74 73 2e 64 65 73 63 '<p>{ opts.desc
0120: 72 69 70 74 69 6f 6e 20 7d 3c 2f 70 3e 27 2c 0a ription }</p>',.
0130: 20 20 20 20 27 3c 6d 79 2d 6c 69 73 74 2d 69 74 '<my-list-it
0140: 65 6d 20 72 65 66 3d 27 69 74 6d 27 20 65 61 63 em ref='itm' eac
0150: 68 3d 22 7b 20 6f 70 74 73 2e 69 74 65 6d 73 20 h="{ opts.items
0160: 7d 22 3e 27 0a 20 20 60 2c 0a 20 20 72 65 73 75 }">'. `,. resu
0170: 6c 74 2c 0a 20 20 6d 79 4c 69 73 74 49 74 65 6d lt,. myListItem
0180: 20 3d 20 27 6d 79 2d 6c 69 73 74 2d 69 74 65 6d = 'my-list-item
0190: 27 2c 0a 20 20 6d 79 4c 69 73 74 49 74 65 6d 48 ',. myListItemH
01a0: 54 4d 4c 20 3d 20 60 0a 20 20 20 20 27 3c 69 6e TML = `. '<in
01b0: 70 75 74 20 72 65 66 3d 27 69 6e 70 75 74 27 20 put ref='input'
01c0: 74 79 70 65 3d 22 63 68 65 63 6b 62 6f 78 22 20 type="checkbox"
01d0: 6f 6e 63 68 61 6e 67 65 3d 22 7b 20 6f 6e 43 68 onchange="{ onCh
01e0: 61 6e 67 65 20 7d 22 3e 27 2c 0a 20 20 20 20 27 ange }">',. '
01f0: 3c 73 70 61 6e 20 69 66 3d 22 7b 20 6f 70 74 73 <span if="{ opts
0200: 2e 69 73 41 63 74 69 76 65 20 7d 22 3e 49 20 61 .isActive }">I a
0210: 6d 20 61 63 74 69 76 65 3c 2f 73 70 61 6e 3e 27 m active</span>'
0220: 0a 20 20 60 0a 0a 0a 2f 2a 2a 0a 20 2a 20 48 65 . `.../**. * He
0230: 6c 70 65 72 20 66 75 6e 63 74 69 6f 6e 20 74 6f lper function to
0240: 20 67 65 6e 65 72 61 74 65 20 63 75 73 74 6f 6d generate custom
0250: 20 61 72 72 61 79 0a 20 2a 20 40 70 61 72 61 6d array. * @param
0260: 20 20 7b 20 69 6e 74 20 7d 20 61 6d 6f 75 6e 74 { int } amount
0270: 20 61 6d 6f 75 6e 74 20 6f 66 20 65 6e 74 72 69 amount of entri
0280: 65 73 20 69 6e 20 74 68 65 20 61 72 72 61 79 0a es in the array.
0290: 20 2a 20 40 70 61 72 61 6d 20 20 7b 20 2a 20 7d * @param { * }
02a0: 20 64 61 74 61 0a 20 2a 20 40 72 65 74 75 72 6e data. * @return
02b0: 20 61 72 72 61 79 0a 20 2a 2f 0a 0a 0a 66 75 6e array. */...fun
02c0: 63 74 69 6f 6e 20 67 65 6e 65 72 61 74 65 49 74 ction generateIt
02d0: 65 6d 73 20 28 61 6d 6f 75 6e 74 29 20 7b 0a 20 ems (amount) {.
02e0: 20 76 61 72 20 69 74 65 6d 73 20 3d 20 5b 5d 0a var items = [].
02f0: 20 20 77 68 69 6c 65 20 28 2d 2d 61 6d 6f 75 6e while (--amoun
0300: 74 29 20 7b 0a 20 20 20 20 69 74 65 6d 73 2e 70 t) {. items.p
0310: 75 73 68 28 7b 0a 20 20 20 20 20 20 69 73 41 63 ush({. isAc
0320: 74 69 76 65 3a 20 66 61 6c 73 65 0a 20 20 20 20 tive: false.
0330: 7d 29 0a 20 20 7d 0a 20 20 72 65 74 75 72 6e 20 }). }. return
0340: 69 74 65 6d 73 0a 7d 0a 0a 2f 2a 2a 0a 20 2a 20 items.}../**. *
0350: 43 68 65 63 6b 20 74 68 65 20 6d 65 6d 6f 72 79 Check the memory
0360: 20 75 73 61 67 65 20 61 6e 61 6c 69 7a 69 6e 67 usage analizing
0370: 20 74 68 65 20 68 65 61 70 0a 20 2a 20 40 70 61 the heap. * @pa
0380: 72 61 6d 20 20 7b 20 66 75 6e 63 74 69 6f 6e 20 ram { function
0390: 7d 20 66 6e 0a 20 2a 20 40 72 65 74 75 72 6e 20 } fn. * @return
03a0: 7b 20 61 72 72 61 79 20 7d 20 6d 65 6d 6f 72 79 { array } memory
03b0: 20 75 73 65 64 20 2b 20 64 75 72 61 74 69 6f 6e used + duration
03c0: 0a 20 2a 2f 0a 0a 66 75 6e 63 74 69 6f 6e 20 6d . */..function m
03d0: 65 61 73 75 72 65 28 66 6e 29 20 7b 0a 20 20 76 easure(fn) {. v
03e0: 61 72 20 73 74 61 72 74 54 69 6d 65 20 3d 20 44 ar startTime = D
03f0: 61 74 65 2e 6e 6f 77 28 29 0a 20 20 66 6e 28 29 ate.now(). fn()
0400: 0a 20 20 67 6c 6f 62 61 6c 2e 67 63 28 29 0a 20 . global.gc().
0410: 20 72 65 74 75 72 6e 20 5b 70 72 6f 63 65 73 73 return [process
0420: 2e 6d 65 6d 6f 72 79 55 73 61 67 65 28 29 2e 68 .memoryUsage().h
0430: 65 61 70 55 73 65 64 2c 20 44 61 74 65 2e 6e 6f eapUsed, Date.no
0440: 77 28 29 20 2d 20 73 74 61 72 74 54 69 6d 65 5d w() - startTime]
0450: 0a 7d 0a 0a 2f 2a 2a 0a 20 2a 20 41 64 64 69 6e .}../**. * Addin
0460: 67 20 74 68 65 20 63 75 73 74 6f 6d 20 74 61 67 g the custom tag
0470: 73 20 74 6f 20 74 68 65 20 72 69 6f 74 20 69 6e s to the riot in
0480: 74 65 72 6e 61 6c 20 63 61 63 68 65 0a 20 2a 2f ternal cache. */
0490: 0a 0a 66 75 6e 63 74 69 6f 6e 20 73 65 74 75 70 ..function setup
04a0: 54 61 67 73 28 29 20 7b 0a 20 20 72 69 6f 74 2e Tags() {. riot.
04b0: 74 61 67 28 6d 79 43 6f 6d 70 6f 6e 65 6e 74 2c tag(myComponent,
04c0: 20 6d 79 43 6f 6d 70 6f 6e 65 6e 74 48 54 4d 4c myComponentHTML
04d0: 2c 20 66 75 6e 63 74 69 6f 6e 28 6f 70 74 73 29 , function(opts)
04e0: 20 7b 0a 20 20 20 20 76 61 72 20 73 65 6c 66 20 {. var self
04f0: 3d 20 74 68 69 73 0a 20 20 20 20 66 75 6e 63 74 = this. funct
0500: 69 6f 6e 20 6c 6f 6f 70 20 28 29 20 7b 0a 20 20 ion loop () {.
0510: 20 20 20 20 6f 70 74 73 2e 69 74 65 6d 73 20 3d opts.items =
0520: 20 67 65 6e 65 72 61 74 65 49 74 65 6d 73 28 31 generateItems(1
0530: 30 30 30 2c 20 7b 0a 20 20 20 20 20 20 20 20 69 000, {. i
0540: 73 41 63 74 69 76 65 3a 20 66 61 6c 73 65 0a 20 sActive: false.
0550: 20 20 20 20 20 7d 29 0a 20 20 20 20 20 20 72 65 }). re
0560: 73 75 6c 74 20 3d 20 6d 65 61 73 75 72 65 28 73 sult = measure(s
0570: 65 6c 66 2e 75 70 64 61 74 65 2e 62 69 6e 64 28 elf.update.bind(
0580: 73 65 6c 66 29 29 0a 20 20 20 20 20 20 63 6f 6e self)). con
0590: 73 6f 6c 65 2e 6c 6f 67 28 0a 20 20 20 20 20 20 sole.log(.
05a0: 20 20 28 72 65 73 75 6c 74 5b 30 5d 20 2f 20 31 (result[0] / 1
05b0: 30 32 34 20 2f 20 31 30 32 34 29 2e 74 6f 46 69 024 / 1024).toFi
05c0: 78 65 64 28 32 29 20 2b 20 27 20 4d 69 42 27 2c xed(2) + ' MiB',
05d0: 0a 20 20 20 20 20 20 20 20 72 65 73 75 6c 74 5b . result[
05e0: 31 5d 20 2b 20 27 20 6d 73 27 0a 20 20 20 20 20 1] + ' ms'.
05f0: 20 29 0a 20 20 20 20 20 20 73 65 74 54 69 6d 65 ). setTime
0600: 6f 75 74 28 6c 6f 6f 70 2c 20 35 30 29 0a 20 20 out(loop, 50).
0610: 20 20 7d 0a 20 20 20 20 6c 6f 6f 70 28 29 0a 20 }. loop().
0620: 20 7d 29 0a 20 20 72 69 6f 74 2e 74 61 67 28 6d }). riot.tag(m
0630: 79 4c 69 73 74 49 74 65 6d 2c 20 6d 79 4c 69 73 yListItem, myLis
0640: 74 49 74 65 6d 48 54 4d 4c 2c 20 66 75 6e 63 74 tItemHTML, funct
0650: 69 6f 6e 20 28 6f 70 74 73 29 20 7b 0a 20 20 20 ion (opts) {.
0660: 20 74 68 69 73 2e 6f 6e 43 68 61 6e 67 65 20 3d this.onChange =
0670: 20 66 75 6e 63 74 69 6f 6e 20 28 65 29 20 7b 0a function (e) {.
0680: 20 20 20 20 20 20 6f 70 74 73 2e 69 73 41 63 74 opts.isAct
0690: 69 76 65 20 3d 20 65 2e 74 61 72 67 65 74 2e 63 ive = e.target.c
06a0: 68 65 63 6b 65 64 0a 20 20 20 20 7d 0a 20 20 7d hecked. }. }
06b0: 29 0a 7d 0a 0a 2f 2a 2a 0a 20 2a 0a 20 2a 20 4d ).}../**. *. * M
06c0: 6f 75 6e 74 20 74 68 65 20 63 75 73 74 6f 6d 20 ount the custom
06d0: 74 61 67 73 20 70 61 73 73 69 6e 67 20 73 6f 6d tags passing som
06e0: 65 20 66 61 6b 65 20 76 61 6c 75 65 73 0a 20 2a e fake values. *
06f0: 0a 20 2a 2f 0a 0a 66 75 6e 63 74 69 6f 6e 20 6d . */..function m
0700: 6f 75 6e 74 28 29 20 7b 0a 20 20 72 69 6f 74 2e ount() {. riot.
0710: 6d 6f 75 6e 74 28 6d 79 43 6f 6d 70 6f 6e 65 6e mount(myComponen
0720: 74 2c 20 7b 0a 20 20 20 20 74 69 74 6c 65 3a 20 t, {. title:
0730: 27 68 65 6c 6c 6f 20 77 6f 72 6c 64 27 2c 0a 20 'hello world',.
0740: 20 20 20 64 65 73 63 72 69 70 74 69 6f 6e 3a 20 description:
0750: 27 6d 61 64 20 77 6f 72 6c 64 27 2c 0a 20 20 20 'mad world',.
0760: 20 69 74 65 6d 73 3a 20 67 65 6e 65 72 61 74 65 items: generate
0770: 49 74 65 6d 73 28 31 30 30 30 2c 20 7b 0a 20 20 Items(1000, {.
0780: 20 20 20 20 69 73 41 63 74 69 76 65 3a 20 66 61 isActive: fa
0790: 6c 73 65 0a 20 20 20 20 7d 29 0a 20 20 7d 29 0a lse. }). }).
07a0: 7d 0a 0a 0a 2f 2f 20 49 6e 69 74 69 61 6c 69 7a }...// Initializ
07b0: 65 20 74 68 65 20 74 65 73 74 0a 76 61 72 20 64 e the test.var d
07c0: 6f 63 20 3d 20 6e 65 77 20 6a 73 64 6f 6d 28 60 oc = new jsdom(`
07d0: 3c 24 7b 6d 79 43 6f 6d 70 6f 6e 65 6e 74 7d 2f <${myComponent}/
07e0: 3e 60 29 0a 67 6c 6f 62 61 6c 2e 77 69 6e 64 6f >`).global.windo
07f0: 77 20 3d 20 64 6f 63 2e 64 65 66 61 75 6c 74 56 w = doc.defaultV
0800: 69 65 77 0a 67 6c 6f 62 61 6c 2e 64 6f 63 75 6d iew.global.docum
0810: 65 6e 74 20 3d 20 64 6f 63 2e 77 69 6e 64 6f 77 ent = doc.window
0820: 2e 64 6f 63 75 6d 65 6e 74 0a 0a 73 65 74 75 70 .document..setup
0830: 54 61 67 73 28 29 0a 6d 6f 75 6e 74 28 29 0a 0a Tags().mount()..