Add file-size to skooma.js introduction
This commit is contained in:
parent
085f014d9e
commit
b088905988
3 changed files with 34 additions and 4 deletions
|
@ -13,7 +13,6 @@ class CodeBlock extends HTMLElement {
|
|||
let content = this.innerHTML.replace(/^\s*\n/, "").replace(/\n\s*$/, "")
|
||||
let prefix = new RegExp(`${content.match(/^\t*/)}`, "g")
|
||||
content = content.replace(prefix, "").replace(/&.*;/g, str => escapes[str] ?? str)
|
||||
console.log(template(hljs.highlightAuto(content).value))
|
||||
this.replaceChildren(html.pre(html.code(template(hljs.highlightAuto(content).value))))
|
||||
}
|
||||
}
|
||||
|
|
29
page/filesize.js
Normal file
29
page/filesize.js
Normal file
|
@ -0,0 +1,29 @@
|
|||
import {text, html} from '../skooma.js'
|
||||
import {Better} from '../better.js'
|
||||
|
||||
class FileSize extends Better {
|
||||
static attributes = {file: true}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({mode: "open"})
|
||||
this.connected.then(self => self.update())
|
||||
}
|
||||
|
||||
fileChanged() {
|
||||
this.update()
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.file) {
|
||||
fetch(this.file)
|
||||
.then(response=>response.arrayBuffer())
|
||||
.then(buffer => buffer.byteLength)
|
||||
.then(length => {
|
||||
this.shadowRoot.replaceChildren(text`(${length} Bytes unminified)`)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FileSize.initialise()
|
|
@ -1,6 +1,7 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script type="module" src="codeblock.js"></script>
|
||||
<script type="module" src="filesize.js"></script>
|
||||
|
||||
<h1>Skooma.js</h1>
|
||||
|
||||
|
@ -14,9 +15,10 @@
|
|||
|
||||
<h3>What are the benefits of Skooma?</h3>
|
||||
<p>
|
||||
Skooma is only a small ES6 module that uses meta-programming to
|
||||
turn JavaScript into a <span title="Domain-Specific Language">DSL</span>
|
||||
that generates HTML and XML subtrees.
|
||||
Skooma is only a small <file-size file="../skooma.js"></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.
|
||||
<br>
|
||||
This means you're writing plain JavaScript code that needs no additional
|
||||
transpilation steps and runs directly in the browser.
|
||||
|
|
Loading…
Reference in a new issue