From c9b85b112c51f32aa578b3132d584b72269f2f15 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer
Date: Thu, 13 Jan 2022 22:02:20 +0100
Subject: [PATCH] Add further documentation for skooma.js
---
page/codeblock.js | 2 +-
page/skooma.html | 141 +++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 141 insertions(+), 2 deletions(-)
diff --git a/page/codeblock.js b/page/codeblock.js
index 714082f..63ead23 100644
--- a/page/codeblock.js
+++ b/page/codeblock.js
@@ -13,7 +13,7 @@ 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)
- this.replaceChildren(html.pre(html.code(template(hljs.highlightAuto(content).value))))
+ this.replaceChildren(html.pre(html.code(template(hljs.highlight(content, {language: 'javascript'}).value))))
}
}
diff --git a/page/skooma.html b/page/skooma.html
index 65403ce..85a1936 100644
--- a/page/skooma.html
+++ b/page/skooma.html
@@ -94,7 +94,7 @@
return button
- Adding a shadow-root to the new element can be done witht he shadowRoot
property.
+ Adding a shadow-root to the new element can be done with the magic shadowRoot
property.
return html.div({
@@ -109,5 +109,144 @@
div.innerText = "Light-DOM text content"
return div
+
+ Object can be styled inline via the magic style
property.
+ Meanwhile in Vanilla JS styling properties have to be added one by one
+
+ return html.div("Hello, World!" {
+ class: 'button', style: {
+ color, // some constant
+ border: '1px solid currentcolor
+ }
+ })
+
+
+ let div = document.createElement("div")
+ div.innerHTML = "Hello, World!"
+ div.style.color: color // some constant
+ div.style.border: '1px solid currentcolor'
+ return div
+
+
+ Custom elements with hyphenated names can be created easily
+
+
+ return html.myComponent()
+
+
+ return document.createElement("my-component")
+
+
+
+ The text
helper
+
+
The text
helper provides a convenient wrapper around the
+ document.createTextNode
function
+
In its simplest form, it's only a shorthand for its vanilla counterpart
+
+ return text("Hello, World!")
+
+
+ return document.createTextNode("Hello, World!")
+
+
+
However, you don't need to pass an argument to it.
+
+
+ return text()
+
+
+ return document.createTextNode("")
+
+
+
It also acts as a tag function for template literals, returning a
+ document fragment containing a list of text nodes.
+
+
+ return text`Hello, ${name}!`
+
+
+ let fragment = new DocumentFragment()
+ fragment.append("Hello, ")
+ fragment.append(name)
+ fragment.append("!")
+ return fragment
+
+
+
You can even interpolate actual DOM nodes in the string
+
+
+ return text`Hello, ${html.b(name)}!`
+
+
+ let fragment = new DocumentFragment()
+ fragment.append("Hello, ")
+ let bold = document.createElement("b")
+ bold.innerHTML = name
+ fragment.append(bold)
+ fragment.append("!")
+ return fragment
+
+
+
+
+
+ The bind
helper
+
+
+
+ - Callback registration function
+ -
+ A function that takes a callback as its single argument and returns
+ an initial state as an array of elements. The inital state will be
+ used to generate the bound element for the first time. The callback
+ function should be called whenever an update in the UI is desired
+ and the new state should be passed as its argument.
+
+ - Transform function
+ -
+ A function that takes the initial or updated state and returns a new
+ HTML element.
+
Planned feature
+ When no HTML element is returned, nothing happens. This can be
+ used to update the existing element instead; however, the
+ function currently provides no means to access the old element in
+ the transform function.
+
+
+
+
+
+
+ Imagine counter
to be an object with a count
+ attribute representing the current count and onIncrement
to
+ be a function to register a callback to be called whenever the counter
+ gets updated.
+
+
+
Creating a new Element
+ Updating the old Element
+
+ let counterMessage = count =>
+ text`Current count: ${html.b(count)}`
+ // onIncrement doesn't return an initial
+ // state, so we have to wrap it:
+ let onIncrement = bind(callback =>
+ counter.onIncrement(callback) || counter.count)
+
+ return boundElement = onIncrement(counterMessage)
+
+
+ // Not yet implemented
+
+
+
+
+ When an element gets replaced with a newer version of itself, any variable
+ containing the old element will become "stale". For this reason, the
+ function injects a current
property into every element it
+ creates that will always point to the newest version of the element.
+
+