Dev Tools: Show what a slot update changed, and where

[marcoroth]

This pull request announces every write the slot index makes, and draws it in the browser.

document.addEventListener("herb:slot-update", (event) => event.detail)
// { file, occurrence, index, operation, key, slot, row }

The event carries the slot and not a rectangle, because measuring costs a layout and only a listener knows whether it wants one. Dev Tools uses it to flash what changed, coloured by operation, labelled with the file, the index, the row key and, for an attribute slot, which attribute was written. An element can carry several, and an attribute is the hardest kind of slot to tell apart by looking at the page, since nothing about a class or an id changing is visible in the way text changing is.

Four fixes came out of using it.

A removal was announced after the row had gone, so there was nothing left to measure and nothing to draw a box around, and it reported the collection instead of the row. Removing the only row made both faults visible at once. The event carries the row now, and is said before the row is taken out.

A slot given the value it already has is left alone. Writing it would cost a re-parse, destroy whatever the slot contained, and announce a change that did not happen, so a payload matching the page reports { applied: 0, deferred: [] } and touches nothing.

class="card <%= state %>" marks the interpolated word while setAttribute writes the whole attribute, so applying the value dropped the card the template wrote beside it. A demo put its whole footer on one line the first time its layout was updated. A marker says which attribute a slot is, not which stretch of it, so refusing and saying so is the only honest answer until a marker carries the statics around the value.

And the last row out of a collection leaves its shape behind. The server parks a row only for a collection that rendered empty, so emptying one in the browser left neither a row to copy nor a parked one, and a table with one row in it deleted is two clicks away from needing another.

CleanShot.2026-08-17.at.03.52.35.mp4

[nx-cloud]

View your CI Pipeline Execution ↗ for commit cb36434

Command	Status	Duration	Result
nx run-many -t test --all --parallel --exclude=...	✅ Succeeded	2m 58s	View ↗
nx run-many -t build --all --exclude=herb-langu...	✅ Succeeded	18s	View ↗
nx build @herb-tools/tailwind-class-sorter	✅ Succeeded	1s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-08-18 03:12:48 UTC

[github-actions]

🌿 Interactive Playground and Documentation Preview

A preview deployment has been built for this pull request. Try out the changes live in the interactive playground:

• Playground Preview
• Documentation Preview
• Website Preview

---

_{🌱 Grown from commit 386ab90}

---

✅ Preview deployment has been cleaned up.

[pkg-pr-new]

npx https://pkg.pr.new/@herb-tools/formatter@2277

npx https://pkg.pr.new/@herb-tools/language-server@2277

npx https://pkg.pr.new/@herb-tools/linter@2277

commit: 386ab90