#119 · stacks/ts-analytics

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.70. 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: ~161 across the repo

Top files:

20  resources/components/tabs/SettingsTab.stx
18  resources/components/dashboard/ErrorDetail.stx
11  resources/components/tabs/ErrorsTab.stx
8   resources/components/tabs/FlowTab.stx
8   resources/components/dashboard/SiteSelector.stx
8   resources/components/dashboard/AccountSettings.stx

Live enumeration:

grep -rEn --include='*.stx' '(\s|")(x-text|:text)=' resources/ \
  | 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 repo already uses inside some reactive tables/views — migrating the remaining x-text/:text brings the whole codebase onto one convention. (Exclude the already sitting under server @foreach, e.g. in the full-dashboard/alert cards — those are server-evaluated, not reactive.)

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.}