ReviewOS

stacks/ts-analytics

Migrate STX components to current syntax (match trailbuddy)

#41
Closed glennmichael123 opened this 9 days ago ·
9 days ago

Context

The stx components in resources/components/ use an older syntax (Alpine-style directives, $props.x access, derived(), no <template> wrapper). Trailbuddy's components use the current convention (defineProps<T>() + withDefaults, <template> wrapper, PascalCase component imports).

ts-analytics is meant to be a reference implementation of an analytics dashboard built in the Stacks/STX stack — its component code should reflect the current best practice, not legacy syntax.

Reference

Scope

Migrate every file under resources/components/*.stx:

  • EventLog.stx
  • EventBar.stx
  • FlowLink.stx
  • InsightCard.stx
  • SiteCard.stx
  • StatCard.stx
  • SessionModal.stx
  • SessionCard.stx
  • ErrorCard.stx
  • (any others)

For each:

  • <script client> → <script server> (or whichever fits — match trailbuddy's choice)
  • $props.x → typed defineProps<T>() + withDefaults
  • derived(() => ...) → idiomatic equivalent in the new syntax
  • @if / @class / x-id directives → <template> wrapper + standard binding syntax
  • PascalCase component references where applicable

Verification

  • bun run build succeeds
  • Dashboard renders with no visual regressions
  • No console warnings about deprecated syntax

Sign in to comment on this issue.