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