Make filesize component nicer
This commit is contained in:
parent
5795439ae1
commit
2b0e698e8d
2 changed files with 7 additions and 3 deletions
|
@ -1,4 +1,4 @@
|
|||
import {text, html} from '../skooma.js'
|
||||
import {text, html, fragment} from '../skooma.js'
|
||||
import element from "../element.js"
|
||||
|
||||
element(class FileSize extends HTMLElement {
|
||||
|
@ -17,13 +17,17 @@ element(class FileSize extends HTMLElement {
|
|||
this.update()
|
||||
}
|
||||
|
||||
cloneChildren(deep=true) {
|
||||
return Array.from(this.childNodes).map(node => node.cloneNode(deep))
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.file) {
|
||||
fetch(this.file)
|
||||
.then(response=>response.arrayBuffer())
|
||||
.then(buffer => buffer.byteLength)
|
||||
.then(length => {
|
||||
this.shadowRoot.replaceChildren(text`(${length} Bytes unminified)`)
|
||||
this.shadowRoot.replaceChildren(text`${fragment(...this.cloneChildren())} (${length} Bytes unminified)`)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<h3>What are the benefits of Skooma?</h3>
|
||||
<p>
|
||||
Skooma is only a small <file-size file="../skooma.js"></file-size> ES6
|
||||
Skooma is only a <file-size file="../skooma.js">small</file-size> ES6
|
||||
module that uses meta-programming to turn JavaScript into a
|
||||
<span title="Domain-Specific Language">DSL</span> that generates HTML
|
||||
and XML subtrees.
|
||||
|
|
Loading…
Reference in a new issue