@abide/abide 0.111.0 → 0.112.0

package/src/ui/setStyleGroup.ts

@@ -0,0 +1,130 @@
+import { oneStyleValue } from '#shared/escapeText.ts'
+import { textOf } from '#shared/Raw.ts'
+import { WORK } from '#shared/WORK.ts'
+
+/**
+ * 32.71 — what a `style={expr}` and the `style:prop` directives beside it last wrote, as one
+ * group: the attribute's text, its declarations once they have been needed, and the directives'
+ * values in the order `names` gives them.
+ *
+ * KEYED BY ELEMENT rather than declared by the mount, because a row's `update` writes the same
+ * element from a function of its own and both have to read one record.
+ */
+const owned = new WeakMap<
+    Element,
+    {
+        text: string | undefined
+        declared: Map<string, [value: string, priority: string]> | undefined
+        values: readonly unknown[] | undefined
+        names: string[]
+    }
+>()
+
+// THE PARSE IS THE BROWSER'S OWN: a declaration list is not split on `;` by hand, since one can sit
+// inside `url()` or a string. A detached element's style is parsed and never laid out.
+let parsed: CSSStyleDeclaration | undefined
+
+/** A declaration list's properties, values and priorities, as the browser parses it. */
+function declarationsOf(
+    text: string,
+): Map<string, [value: string, priority: string]> {
+    parsed ??= document.createElement('div').style
+    parsed.cssText = text
+    const declared = new Map<string, [value: string, priority: string]>()
+    for (let index = 0; index < parsed.length; index += 1) {
+        const property = parsed.item(index)
+        declared.set(property, [
+            parsed.getPropertyValue(property),
+            parsed.getPropertyPriority(property),
+        ])
+    }
+    return declared
+}
+
+/**
+ * Writes a `style={expr}` and the `style:prop` directives beside it as one group, through the
+ * CSSOM: `plain` is the attribute's value, and `values` each directive's, in the order of `names`,
+ * its properties space-separated.
+ *
+ * 32.71 — ONLY ITS OWN PROPERTIES, in the server's cascade: the attribute's declarations, then
+ * each directive's in the tag's order (`styleValue`), a later one winning and one with no value
+ * declaring nothing. Only what moved is written. The attribute is parsed only when its text
+ * changed — never on the first run, whose value the served page or built row already carries —
+ * and every write is guarded by a compare. Where the attribute changed or a directive emptied,
+ * the cascade is laid again from the attribute, which is how a shorthand on one side and a
+ * longhand on the other resolve as they did in the server's list.
+ */
+export function setStyleGroup(
+    element: Element,
+    names: string,
+    plain: unknown,
+    values: readonly unknown[],
+): void {
+    WORK.bindingRuns += 1
+    let held = owned.get(element)
+    if (held === undefined) {
+        held = {
+            text: undefined,
+            declared: undefined,
+            values: undefined,
+            names: names.split(' '),
+        }
+        owned.set(element, held)
+    }
+    const style = (element as HTMLElement).style
+    const text = textOf(plain)
+    const was = held.values
+    // The first directive to write again, every one after it too: a later one wins.
+    let from = -1
+    if (held.text === undefined) held.text = text
+    else if (text !== held.text) {
+        const before = held.declared ?? declarationsOf(held.text)
+        const after = declarationsOf(text)
+        for (const property of before.keys())
+            if (!after.has(property) && style.getPropertyValue(property) !== '')
+                style.removeProperty(property)
+        lay(style, after)
+        held.text = text
+        held.declared = after
+        from = 0
+    }
+    for (let at = 0; at < held.names.length && from !== 0; at += 1) {
+        const value = directiveValue(values[at])
+        if (was !== undefined && directiveValue(was[at]) === value) continue
+        if (value !== '' || was === undefined) {
+            if (from === -1 && value !== '') from = at
+            continue
+        }
+        const name = held.names[at] as string
+        if (style.getPropertyValue(name) !== '') style.removeProperty(name)
+        held.declared ??= declarationsOf(held.text)
+        lay(style, held.declared)
+        from = 0
+    }
+    if (from !== -1)
+        for (let at = from; at < held.names.length; at += 1) {
+            const value = directiveValue(values[at])
+            const name = held.names[at] as string
+            if (value !== '' && style.getPropertyValue(name) !== value)
+                style.setProperty(name, value)
+        }
+    held.values = values
+}
+
+/** A directive's value, cut as the server cuts it; `''` declares nothing. */
+function directiveValue(value: unknown): string {
+    return oneStyleValue(textOf(value))
+}
+
+/** Writes each declaration the element does not already carry. */
+function lay(
+    style: CSSStyleDeclaration,
+    declared: Map<string, [value: string, priority: string]>,
+): void {
+    for (const [property, [value, priority]] of declared)
+        if (
+            style.getPropertyValue(property) !== value ||
+            style.getPropertyPriority(property) !== priority
+        )
+            style.setProperty(property, value, priority)
+}

package/src/ui/applyHead.ts

@@ -1,214 +0,0 @@
-// 39.6 — ON A CLIENT NAVIGATION THE INCOMING PAGE'S KEYED CONTRIBUTIONS REPLACE THE OUTGOING
-// PAGE'S BY KEY. The outgoing page's were written by a server on the first load and by this
-// function on every one after, so they are found the same way either time: by their key, read off
-// the document. Nothing is added to the head to mark ownership — a marker would be a fact about
-// the framework in a document an author writes, and the key is already what decides.
-//
-// 39.5 — A CONTRIBUTION WITH NO KEY APPENDS. It cannot replace anything ANOTHER contributor wrote,
-// because there is nothing it could be said to be the same as, and dropping it instead would lose
-// the one kind of contribution a page makes several of. What its OWN contributor wrote last is
-// another matter: a head written again puts its keyless nodes where the last ones stood (39.15),
-// and a head withdrawn takes them with it (39.16). Found the way a key is — off the document, by
-// the markup the contributor last wrote — so a head the server painted is found the same as one
-// written here.
-
-import { headKeyOf } from '#shared/headKeyOf.ts'
-import { markupNodes } from './parseMarkup.ts'
-
-/**
- * Writes `markup`'s contributions into the document head, a key `below` holds excepted.
- *
- * 39.4 — `below` is the head of every contributor deeper than the one writing, which a head
- * re-applied live (39.13) must not undo: the deepest contributor wins whichever of them moved last.
- *
- * 39.15 — `last` is what the same contributor wrote before, whose keyless nodes this replaces in
- * place, in order, rather than adding beside them. 39.14 — a key `last` held that `markup` does not
- * is withdrawn to `outer`'s value for it, as a leaving contributor's is; a key list that did not
- * move withdraws nothing and never asks `outer`.
- */
-export function applyHead(
-    markup: string,
-    below = '',
-    last = '',
-    outer: () => string = () => '',
-): void {
-    const head = document.head
-    if (markup === '') return
-    const incoming = markupNodes(head, markup)
-    const standingByKey = standingKeys(head)
-    const deeper = below === '' ? undefined : keyedIn(head, below)
-    const replaced: Node[] = []
-    const withdrawn = keyedIn(head, last, replaced)
-    let next = 0
-    for (const node of incoming) {
-        const key = node.nodeType === 1 ? headKey(node as Element) : undefined
-        if (key === undefined) {
-            const standing = replaced[next]
-            next += 1
-            if (standing === undefined) head.appendChild(runnable(node))
-            // The same node left standing, as a key's is: a `<style>` put back as itself is not
-            // re-parsed into the cascade, and a `<script>` is not run twice.
-            else if (!standing.isEqualNode(node))
-                head.replaceChild(runnable(node), standing)
-            continue
-        }
-        const element = node as Element
-        withdrawn.delete(key)
-        if (deeper?.has(key) === true) continue
-        const standing = standingByKey.get(key)
-        if (standing === undefined) {
-            head.appendChild(element)
-            standingByKey.set(key, element)
-            continue
-        }
-        // WHAT THE TWO PAGES SHARE IS NOT TOUCHED. `hydrate` skips `applyHead` outright because
-        // re-applying a `<link rel=stylesheet>` refetches it and flashes the document unstyled —
-        // and a navigation between two pages carrying the same stylesheet, viewport or icon walks
-        // into that same cost per contribution. An identical node is the one case where the
-        // cheaper arm is to do nothing at all.
-        if (standing.outerHTML === element.outerHTML) continue
-        head.replaceChild(element, standing)
-        standingByKey.set(key, element)
-    }
-    for (; next < replaced.length; next += 1)
-        (replaced[next] as Node).parentNode?.removeChild(replaced[next] as Node)
-    if (withdrawn.size === 0) return
-    if (deeper !== undefined)
-        for (const key of deeper.keys()) withdrawn.delete(key)
-    restoreKeys(head, withdrawn, outer())
-}
-
-/**
- * `node`, or — for a `<script>` — the same script made by the document rather than the parser.
- *
- * 39.17 — A PARSED SCRIPT NEVER RUNS. The fragment parser marks every `<script>` it makes "already
- * started", and `parseMarkup` is that parser, so a script it made and then moved into the head is
- * inert where the server's, made by the document's own parser, ran. One made by `createElement`
- * starts clear and runs on insertion. Keyless always (39.11 keys no `<script>`), so this is reached
- * only where a keyless contribution is actually written.
- */
-function runnable(node: Node): Node {
-    if (node.nodeName !== 'SCRIPT') return node
-    const parsed = node as HTMLScriptElement
-    const script = document.createElement('script')
-    const attributes = parsed.attributes
-    for (let index = 0; index < attributes.length; index += 1) {
-        const attribute = attributes[index] as Attr
-        script.setAttribute(attribute.name, attribute.value)
-    }
-    script.text = parsed.text
-    return script
-}
-
-/**
- * Puts back, or removes, what the leaving levels keyed and the arriving ones do not.
- *
- * 39.14 — THE NEXT-OUTER CONTRIBUTOR'S VALUE, OR NONE. `leaving` is the head of the levels a
- * navigation stopped; `around` answers `outer`, every contributor standing above them, and
- * `arriving`, the heads of the levels it mounted. `outer` runs outermost first — the shell's keyed
- * entries, then each kept layout's — so the LAST entry for a key in it is the one the server would
- * paint there (39.4). A component leaving its region is withdrawn the same way, its level's
- * contributors either side of it standing in for the two (`Level.headsAround`). What the arriving levels key they have
- * already written (39.6), so only the keys they are silent on are touched — and 39.16, the leaving
- * levels' keyless nodes leave with them.
- *
- * THE COMMON NAVIGATION WITHDRAWS NOTHING BY KEY: two pages that both key a `<title>` leave
- * `outer` built but never parsed, and a head keying nothing never asks `around`.
- */
-export function withdrawHead(
-    leaving: string,
-    around: () => [outer: string, arriving: string],
-): void {
-    if (leaving === '') return
-    const head = document.head
-    const keyless: Node[] = []
-    const withdrawn = keyedIn(head, leaving, keyless)
-    for (const node of keyless) node.parentNode?.removeChild(node)
-    if (withdrawn.size === 0) return
-    const [outer, arriving] = around()
-    for (const key of keyedIn(head, arriving).keys()) withdrawn.delete(key)
-    restoreKeys(head, withdrawn, outer)
-}
-
-/** 39.14 — each of `withdrawn`'s keys back to `outer`'s last value for it, or removed. */
-function restoreKeys(
-    head: HTMLHeadElement,
-    withdrawn: Map<string, Element>,
-    outer: string,
-): void {
-    if (withdrawn.size === 0) return
-    const restored = keyedIn(head, outer)
-    const standingByKey = standingKeys(head)
-    for (const key of withdrawn.keys()) {
-        const standing = standingByKey.get(key)
-        const next = restored.get(key)
-        if (next === undefined) standing?.remove()
-        else if (standing === undefined) head.appendChild(next)
-        // The same node as `applyHead`'s: a stylesheet put back as itself is not refetched.
-        else if (standing.outerHTML !== next.outerHTML)
-            head.replaceChild(next, standing)
-    }
-}
-
-/**
- * The keyed elements `markup` parses to, by key, the last holding each (39.4).
- *
- * Where `standing` is given, each keyless node is matched to the first node standing in the head
- * equal to it and not already matched, and the match pushed there (39.15, 39.16).
- */
-function keyedIn(
-    head: HTMLHeadElement,
-    markup: string,
-    standing?: Node[],
-): Map<string, Element> {
-    const keyed = new Map<string, Element>()
-    if (markup === '') return keyed
-    for (const node of markupNodes(head, markup)) {
-        const key = node.nodeType === 1 ? headKey(node as Element) : undefined
-        if (key !== undefined) keyed.set(key, node as Element)
-        else if (standing !== undefined)
-            for (let at = head.firstChild; at !== null; at = at.nextSibling)
-                if (at.isEqualNode(node) && !standing.includes(at)) {
-                    standing.push(at)
-                    break
-                }
-    }
-    return keyed
-}
-
-/**
- * The head's keyed elements by key, the first holding each.
- *
- * KEYED ONCE, NOT ONCE PER CONTRIBUTION. Walking the head per incoming node asked `headKey` — a
- * `toLowerCase` and a fresh closure per call — for every standing element times every arriving
- * one. One pass builds the index and each contribution is then a lookup.
- */
-function standingKeys(head: HTMLHeadElement): Map<string, Element> {
-    const standingByKey = new Map<string, Element>()
-    for (
-        let node = head.firstElementChild;
-        node !== null;
-        node = node.nextElementSibling
-    ) {
-        const key = headKey(node)
-        // 39.12 WITHIN THE STANDING HEAD: the FIRST element holding a key is the one a
-        // contribution replaces, which is the node the per-contribution walk returned.
-        if (key !== undefined && !standingByKey.has(key))
-            standingByKey.set(key, node)
-    }
-    return standingByKey
-}
-
-/**
- * The key a head element replaces by, or `undefined` for one that appends.
- *
- * 39.11 THROUGH THE ONE GRAMMAR (`headKeyOf`), asked with a RESOLVED attribute. The compiler
- * answers the same question for a STATIC one and appends where it cannot (`<meta name={x}>` has a
- * name only the run time knows) — here every attribute is resolved, so a contribution the compiler
- * had to append arrives with a key. That is the same rule reaching further, not a different one.
- */
-function headKey(element: Element): string | undefined {
-    return headKeyOf(element.tagName.toLowerCase(), (name) =>
-        element.getAttribute(name),
-    )
-}