Add file-size to skooma.js introduction

This commit is contained in:
Talia 2022-01-04 14:21:38 +01:00
parent 085f014d9e
commit b088905988
3 changed files with 34 additions and 4 deletions

View file

@ -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
View 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()

View file

@ -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.