From 2b0e698e8d98d09ea07f6fbacc00c8208ad26eb5 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Wed, 22 Jun 2022 15:53:14 +0200
Subject: [PATCH] Make filesize component nicer

---
 page/filesize.js | 8 ++++++--
 page/skooma.html | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/page/filesize.js b/page/filesize.js
index 0c593f9..c45ecb4 100644
--- a/page/filesize.js
+++ b/page/filesize.js
@@ -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)`)
 				})
 		}
 	}
diff --git a/page/skooma.html b/page/skooma.html
index b5d1840..01182a9 100644
--- a/page/skooma.html
+++ b/page/skooma.html
@@ -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.