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 content = this.innerHTML.replace(/^\s*\n/, "").replace(/\n\s*$/, "")
|
||||||
let prefix = new RegExp(`${content.match(/^\t*/)}`, "g")
|
let prefix = new RegExp(`${content.match(/^\t*/)}`, "g")
|
||||||
content = content.replace(prefix, "").replace(/&.*;/g, str => escapes[str] ?? str)
|
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))))
|
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">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
<script type="module" src="codeblock.js"></script>
|
<script type="module" src="codeblock.js"></script>
|
||||||
|
<script type="module" src="filesize.js"></script>
|
||||||
|
|
||||||
<h1>Skooma.js</h1>
|
<h1>Skooma.js</h1>
|
||||||
|
|
||||||
|
@ -14,9 +15,10 @@
|
||||||
|
|
||||||
<h3>What are the benefits of Skooma?</h3>
|
<h3>What are the benefits of Skooma?</h3>
|
||||||
<p>
|
<p>
|
||||||
Skooma is only a small ES6 module that uses meta-programming to
|
Skooma is only a small <file-size file="../skooma.js"></file-size> ES6
|
||||||
turn JavaScript into a <span title="Domain-Specific Language">DSL</span>
|
module that uses meta-programming to turn JavaScript into a
|
||||||
that generates HTML and XML subtrees.
|
<span title="Domain-Specific Language">DSL</span> that generates HTML
|
||||||
|
and XML subtrees.
|
||||||
<br>
|
<br>
|
||||||
This means you're writing plain JavaScript code that needs no additional
|
This means you're writing plain JavaScript code that needs no additional
|
||||||
transpilation steps and runs directly in the browser.
|
transpilation steps and runs directly in the browser.
|
||||||
|
|
Loading…
Reference in a new issue