Repository navigation
[DevEx]: Migrate FourDialog and SpectatorListMenu to script setup + TS #1412
Description
Note
Status update 2026-10-07. Four of the six are merged (#1416 AwardCard, #1417 BaseLineChart, #1418 ThreeDialog, #1419 StatsLeaderboardCell), SpectatorListMenu is in flight as #1415, and only FourDialog.vue is unclaimed.
The migrations did not change the error count. Measured: main was at 420 frontend errors before those four PRs and is at 420 after — confirming the correction below. Their type errors are untyped props and are now tracked in #1428, which types them with <script setup lang="ts">.
Important
Corrected 2026-10-06. This issue originally claimed migrating these six files would clear their type errors. That was wrong — measured with vue-tsc, only 1 of the 6 has a migration-fixable error. The other five are untyped props, which <script setup> does not touch.
Summary
Convert the remaining small Options API components to <script setup lang="ts">. The value here is AGENTS.md compliance, not type-error reduction — only FourDialog.vue has an error the migration actually fixes.
Remaining scope
| File | Lines | Status |
|---|---|---|
src/routes/game/components/dialogs/components/FourDialog.vue |
118 | unclaimed — its TS2339: Property 'gameStore' does not exist is genuinely Options-API-caused, so migration fixes it |
src/routes/game/components/SpectatorListMenu.vue |
68 | in flight — #1415 |
Note #1384 (fours rework) touches FourDialog.vue and is open. Coordinate or let it land first.
Target the TS form
New and migrated components should use <script setup lang="ts"> with typed props:
defineProps<{ modelValue: boolean }>();Vite transpiles this today via esbuild with no new dependency — verified, exit 0. See #1399.
What migration actually fixes
Measured against main with vue-tsc:
| File | Error | Fixed by migration? |
|---|---|---|
FourDialog.vue |
TS2339: Property 'gameStore' does not exist on ... |
Yes — mapStores / this |
SpectatorListMenu.vue |
TS2322: Type 'unknown' is not assignable to type 'PropertyKey' |
No — untyped Array prop |
AwardCard.vue (merged) |
TS2345: 'unknown' not assignable to 'string' |
No — now in #1428 |
BaseLineChart.vue (merged) |
TS2322: '{ labels: unknown[]; ... }' not assignable to 'ChartData<...>' |
No — now in #1428 |
ThreeDialog.vue (merged) |
TS2339: Property 'rank' does not exist on type 'unknown' |
No — now in #1428 |
StatsLeaderboardCell.vue (merged) |
TS2345: 'unknown' not assignable to 'string | number' |
No — now in #1428 |
For FourDialog.vue the cause is the Options API: under checkJs, this has no usable type, so this.gameStore fails. There is no config-level workaround — defineComponent() was tested on MoveChoiceOverlay.vue and changed nothing (10 before, 10 after).
Acceptance
FourDialog.vueuses<script setup lang="ts">with typed props- Frontend error count drops by 1
- Full Cypress suite passes —
tests/e2e/specs/in-game/one-offs/4_fours.spec.jsis the relevant spec - No behavior change
Activity
Haviles04 commentedon Oct 7, 2026
Looks like the only remaining Component that needs a PR is FourDialog
[-][DevEx]: Migrate six small components to script setup (one type error each)[/-][+][DevEx]: Migrate FourDialog and SpectatorListMenu to script setup + TS[/+]