diff --git a/page/skooma.html b/page/skooma.html
index f310dff..e03dfe6 100644
--- a/page/skooma.html
+++ b/page/skooma.html
@@ -195,49 +195,66 @@
The
+ bind
helper
+
+
+
+
-
+
text
+ as this would return a document fragment which cannot be replaced.
+
+
+ current
+ attribute into it.
- 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.
+ A simple self-contained incrementing counter button could be implemented like this:
- This can also be broken down to text nodes for more atomic updates.
+ The initial call of update
sets the initial count of the
+ button, and the attached event handler updates the button every time it
+ is clicked, thereby replacing it with a new one.
+
+ For this next example, imagine a counter
object that works like this:
+
counter.count
returns the current count
+ counter.onUpdate
lets the user register a callback that will be called with the new count whenever the counter updates
+ diff --git a/page/style.css b/page/style.css index a24b8ba..ffa8999 100644 --- a/page/style.css +++ b/page/style.css @@ -85,10 +85,30 @@ span[title] { border-bottom: dotted currentcolor .16em; } -.all-unset { - all: unset; +code-block:not(:defined) { + font-family: monospace; + white-space: pre-line; } +dl, dt, dd { all: unset; } +dt, dd { display: block; } +dl { + display: flex; + flex-flow: column; +} +dt { + font-weight: bold; + font-style: italic; +} +dl>*+dt { margin-top: .8em; } +dl>dt+* { margin-top: .6em; } +dl>*+* { margin-top: .4em; } + +code { font-size: 1.1em; } + +dl>code dt, dl>code dd { all: unset;} +dl>code dt::after { content: ' : ';} + .columns { display: grid; grid-template-columns: repeat(2, 1fr); @@ -96,17 +116,8 @@ span[title] { } .columns>* { margin: 0; -} - -.columns > * { flex: 100%; } -.full-width { - grid-column: 1/-1; -} - -code-block:not(:defined) { - font-family: monospace; - white-space: pre-line; -} +.all-unset { all: unset; } +.full-width { grid-column: 1/-1; } diff --git a/skooma.js b/skooma.js index 76d5591..bb093b2 100644 --- a/skooma.js +++ b/skooma.js @@ -83,21 +83,19 @@ const nameSpacedProxy = (options={}) => new Proxy(Window, { has: (target, prop) => true, }) -export const bind = register => transform => { +export const bind = transform => { let element - const addCurrent = current => Object.defineProperty(current, 'current', {get: () => element}) - element = transform(...register((...values) => { - try { - const next = transform(...values) - if (next) { - element.replaceWith(addCurrent(next)) - element = next - } - } catch (error) { - console.error(error) + const inject = next => Object.defineProperty(next, 'current', {get: () => element}) + const update = (...data) => { + const next = transform(...data) + if (next) { + console.log(element) + if (element) element.replaceWith(next) + element = inject(next) + return element } - })) - return addCurrent(element) + } + return update } export const handle = fn => event => { event.preventDefault(); return fn(event) } @@ -116,6 +114,6 @@ const textFromTemplate = (literals, items) => { } export const text = (data="", ...items) => - typeof data == "string" - ? document.createTextNode(data) - : textFromTemplate(data, items) + typeof data == "object" && "at" in data + ? textFromTemplate(data, items) + : document.createTextNode(data)