#11 · stacks/system-cleaner

Background

stx historically required x-text/:text for dynamic content inside client-reactive :for/:if/:show subtrees, because interpolation rendered as literal text there — the loop/signal variable was undefined at server-render time, so shipped empty. This repo adopted :text=/x-text= as the workaround throughout.

That bug is fixed as of stx 0.2.72 — server-side preservation of that references loop/signal vars (stacksjs/stx#1748) plus the multi-root setup hydration fix. Verified empirically in a real browser (headless Chrome via CDP): inside <li :for> and inside <div :if> hydrate to the exact same output as their x-text equivalents and update reactively when the signal changes. 5/5 framework regression tests pass.

So is now the cleaner, idiomatic choice and the x-text/:text workaround is no longer needed.

⚠️ Prerequisite — bump stx first

This repo is on @stacksjs/stx 0.2.48. The fix shipped in 0.2.71, so bump to ^0.2.72 and reinstall before migrating — converting on the current version will leave these bindings empty.

Candidate sites: ~136 across the repo

Top files:

41  pages/updates.stx
17  components/DiskPanel.stx
13  pages/system.stx
13  components/ProcessesPanel.stx
11  components/DashboardCards.stx
10  components/ExtensionsPanel.stx

Live enumeration:

grep -rEn --include='*.stx' '(\s|")(x-text|:text)=' pages/ components/ \
  | grep -vE 'node_modules|/\.stx/|/dist/|storage/framework/defaults'

(The count is a grep upper bound — confirm each hit actually sits on/under a client reactive directive before swapping.)

What to do

For each binding that sits on or under a client :for / x-for / :if / x-if / :show:

:text="expr" → — e.g. <span :text="user.name"></span> becomes <span></span>
x-text="expr" →

What NOT to migrate

:html= / x-html= — the raw-HTML escape hatch; escapes, so leave them. No :html/x-html sites.
Bindings whose only enclosing loop/conditional is a server @foreach / @if — those are server-evaluated, not reactive; not a "workaround," don't touch.

Note for this repo: This app is built on the Alpine-style x-data reactive bridge (x-data/x-for/x-show). Confirm each x-text reads an x-data/signal scope value before swapping to .

Verify before bulk

Migrate one file, run the app + tests, visually confirm the values render and update on state change, then proceed across the rest. The canonical "done right" reference is the ts-http devtools UI, which already uses inside reactive subtrees.

_{Filed after a framework-wide audit that confirmed the fix in stx 0.2.72 — real-browser CDP verification + 5/5 regression tests. The -under-:if/:for path is confirmed working.}