hyper-html-api 0.5.1 → 0.6.1

package/src/engine/diff.js

@@ -48,14 +48,18 @@ export function listDiff(adapter, parentCtx, selector, shape, newItems, trace, a
   const anchorIdx = oldNodes.length > 0
     ? indexInParent(adapter, parent, referenceNode)
     : 0
+  const contiguous = isContiguousRun(adapter, oldNodes)
 
   const used = new Set()
+  const fresh = []
   const finalNodes = newItems.map((_, i) => {
     const oldIdx = matches[i]
     if (oldIdx >= 0) {
       used.add(oldIdx)
+      fresh.push(false)
       return oldNodes[oldIdx]
     }
+    fresh.push(true)
     const cloned = adapter.clone(template)
     adapter.stripIds(cloned)
     return cloned
@@ -67,20 +71,36 @@ export function listDiff(adapter, parentCtx, selector, shape, newItems, trace, a
     if (!used.has(i)) adapter.remove(n)
   })
 
-  // Place each final node at its target index. If the node is already
-  // there, do nothing (no-op apply on unchanged data drops zero state).
-  // Otherwise insertAt moves an attached node (DOM/cheerio both treat
-  // insertBefore on an attached node as "move to here").
-  finalNodes.forEach((node, i) => {
-    const targetIdx = anchorIdx + i
-    const siblings = adapter.children(parent)
-    const currentIdx = siblings.findIndex((s) => adapter.sameNode(s, node))
-    if (currentIdx === targetIdx) return
-    adapter.insertAt(parent, node, targetIdx)
-  })
+  if (contiguous) {
+    // Place each final node at its target index. If the node is already
+    // there, do nothing (no-op apply on unchanged data drops zero state).
+    // Otherwise insertAt moves an attached node (DOM/cheerio both treat
+    // insertBefore on an attached node as "move to here").
+    finalNodes.forEach((node, i) => {
+      const targetIdx = anchorIdx + i
+      const siblings = adapter.children(parent)
+      const currentIdx = siblings.findIndex((s) => adapter.sameNode(s, node))
+      if (currentIdx === targetIdx) return
+      adapter.insertAt(parent, node, targetIdx)
+    })
+    writeItems(adapter, finalNodes, shape, newItems, trace, applyItem, opts)
+    return
+  }
+
+  // The matched nodes are not a contiguous run of siblings, so this list has no
+  // DOM order to restore: any repositioning would move elements the list does
+  // not own. Anchoring every node to parent(oldNodes[0]) is what reparents a
+  // cross-parent list into its first container and compacts past unowned
+  // siblings, and both destroy content on a write that changed nothing. Leave
+  // every surviving node exactly where the author put it and only place the
+  // grown ones.
+  placeGrownItems(adapter, finalNodes, fresh, parent, anchorIdx)
+  writeItems(adapter, finalNodes, shape, newItems, trace, applyItem, opts)
+}
 
-  // Apply per-item content. Skip when the existing value already matches
-  // — saves a write on no-op applies and avoids spurious mutation events.
+// Apply per-item content. Skip when the existing value already matches
+// — saves a write on no-op applies and avoids spurious mutation events.
+function writeItems(adapter, finalNodes, shape, newItems, trace, applyItem, opts) {
   finalNodes.forEach((node, i) => {
     if (shape === null) {
       const v = newItems[i]
@@ -167,3 +187,40 @@ function findFallbackTemplate(adapter, parentCtx, selector, opts) {
   }
   return null
 }
+
+// Repositioning only means something when the list occupies a contiguous run of
+// element siblings under one parent. Two containers, or an unowned sibling
+// sitting between two owned nodes, has no list order to restore.
+function isContiguousRun(adapter, nodes) {
+  if (nodes.length <= 1) return true
+  const parent = adapter.parent(nodes[0])
+  if (!parent) return false
+  const siblings = adapter.children(parent)
+  const indices = []
+  for (const node of nodes) {
+    const i = siblings.findIndex((s) => adapter.sameNode(s, node))
+    if (i === -1) return false
+    indices.push(i)
+  }
+  indices.sort((a, b) => a - b)
+  return indices[indices.length - 1] - indices[0] === indices.length - 1
+}
+
+// Grown items follow the surviving node before them, so a new row lands next to
+// its neighbour rather than being teleported into the first container. With no
+// surviving node before it, fall back to where the list started.
+function placeGrownItems(adapter, finalNodes, fresh, fallbackParent, fallbackIdx) {
+  let anchor = null
+  let nextFallbackIdx = fallbackIdx
+  for (let i = 0; i < finalNodes.length; i++) {
+    if (!fresh[i]) {
+      anchor = finalNodes[i]
+      continue
+    }
+    const parent = anchor ? adapter.parent(anchor) : fallbackParent
+    if (!parent) continue
+    const at = anchor ? indexInParent(adapter, parent, anchor) + 1 : nextFallbackIdx++
+    adapter.insertAt(parent, finalNodes[i], at)
+    anchor = finalNodes[i]
+  }
+}

package/src/engine/extract.js

@@ -1,5 +1,6 @@
 import { DOM_PROPERTIES_SET } from './dom-properties.js'
 import { MaxRuleDepthExceeded, MAX_RULE_DEPTH } from './errors.js'
+import { ruleAttrIndex } from './rule-syntax.js'
 
 export function extract(adapter, root, rules, opts = {}) {
   return extractAt(adapter, root, rules, { depth: 0, path: [] }, opts)
@@ -45,8 +46,8 @@ function extractScalar(adapter, ctx, rule, opts) {
     return readPropOrAttr(adapter, ctx, rule.slice(1))
   }
 
-  if (rule.includes('@')) {
-    const at = rule.lastIndexOf('@')
+  const at = ruleAttrIndex(rule)
+  if (at !== -1) {
     const selector = rule.slice(0, at)
     const name = rule.slice(at + 1)
     const matches = selector ? adapter.find(ctx, selector, opts) : [ctx]

package/src/engine/index.js

@@ -6,6 +6,7 @@ export { extract } from './extract.js'
 export { apply } from './apply.js'
 export { findRulesIn } from './rules-tag.js'
 export { parseStrict, parseRelaxed } from './rules.js'
+export { ruleAttrIndex, splitRule } from './rule-syntax.js'
 export * as errors from './errors.js'
 export { DOM_PROPERTIES, DOM_PROPERTIES_SET } from './dom-properties.js'
 

package/src/engine/rule-syntax.js

@@ -0,0 +1,43 @@
+// The scalar rule grammar: "<selector>@<prop>", plus a trailing "[]" for a list
+// of values, a leading "@" for a prop on the context node, and "." for its text.
+//
+// Locating the "@" is the only subtle part of it. It is the LAST one, because a
+// prop name never contains "@" but a selector often does: a mailto link
+// (a[href="mailto:hi@example.com"]), a container query, a Tailwind arbitrary
+// variant. Every one of those carries its "@" inside brackets, parens or
+// quotes, so a separator is an "@" at bracket depth zero and outside any quote.
+// Scanning with a plain lastIndexOf finds the one in the mailto and splits the
+// rule into `a[href="mailto:hi` and `example.com"]`, which reads downstream as
+// an invalid selector when the rule the author wrote was correct.
+
+// Index of the separator "@", or -1 when the rule has no prop part.
+export function ruleAttrIndex(rule) {
+  let depth = 0
+  let quote = null
+  let found = -1
+  for (let i = 0; i < rule.length; i++) {
+    const ch = rule[i]
+    if (ch === '\\') {
+      i++
+    } else if (quote) {
+      if (ch === quote) quote = null
+    } else if (ch === '"' || ch === "'") {
+      quote = ch
+    } else if (ch === '[' || ch === '(') {
+      depth++
+    } else if (ch === ']' || ch === ')') {
+      if (depth > 0) depth--
+    } else if (ch === '@' && depth === 0) {
+      found = i
+    }
+  }
+  return found
+}
+
+// "<selector>@<prop>" split at that separator. selector is "" for a leading "@"
+// (the context node itself); prop is null when the rule names no prop.
+export function splitRule(rule) {
+  const at = ruleAttrIndex(rule)
+  if (at === -1) return { selector: rule, prop: null }
+  return { selector: rule.slice(0, at), prop: rule.slice(at + 1) || null }
+}