Delete LATER
Refactor remaining mutations to use typed payloads and RootState Updated the remaining mutations (including vehicle, damage, service location, customer, schedule, line items, payment, referral, application user, RESET, external params, updateStateWithOrderInformation, updateExperiments, updateTriggeredSiteEntry, updateAffiliateCookies, updateHasTriggeredError) to ensure they utilize typed payloads and RootState for improved type safety.
This commit is contained in:
Matt Sykes
parent
10357cb4a6
commit
075138dfc8
1 changed files with 112 additions and 0 deletions
112
TYPESCRIPT-CONVERSION-STATUS.md
Normal file
112
TYPESCRIPT-CONVERSION-STATUS.md
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
# TypeScript Conversion Status
|
||||
|
||||
**Last updated:** March 9, 2026
|
||||
**Branch:** `feature/page-prereqs-refactor`
|
||||
|
||||
This document summarizes the Vue/Vuex → TypeScript conversion work done so far and what remains. Use it as context when resuming the conversion.
|
||||
|
||||
---
|
||||
|
||||
## Completed Work
|
||||
|
||||
### 1. TypeScript Setup
|
||||
- **package.json:** Added `@vue/cli-plugin-typescript`, `@typescript-eslint/parser`, `@babel/preset-typescript`, `@popperjs/core` (Bootstrap peer dep)
|
||||
- **tsconfig.json:** Created with Vue/JS compatibility
|
||||
- **jest.config.js:** Configured to transform `.ts` files
|
||||
- **babel.config.js:** Added `@babel/preset-typescript`
|
||||
- **vue.config.js:** Entry override removed so Vue CLI uses `main.ts`
|
||||
|
||||
### 2. Store Conversion
|
||||
- **src/store/index.js → src/store/index.ts:** Full conversion with `createStore<RootState>({...})`
|
||||
- **src/store/types.ts:** New file defining:
|
||||
- `RootState`, `OrderState`, `VehicleState`, `DamageState`, `ServiceLocationState`, `ScheduleState`, `CustomerState`, `LineItemsState`, `PaymentState`, `ApplicationUserState`, etc.
|
||||
- `FlexibleRecord` = `{ [key: string]: any }` — used for dynamic API responses (e.g. `updateStateWithOrderInformation`) where structure is not fully known
|
||||
- `LineItemWithTax` and related types for line-item mapping
|
||||
|
||||
### 3. Vue Module Augmentation
|
||||
- **src/shims-vue.d.ts:** Declares `this.$store` as `Store<RootState>` and extends `Window` for `$`/`jQuery`
|
||||
|
||||
### 4. Main Entry
|
||||
- **src/main.js → src/main.ts:** Converted; Vue CLI entry points to `main.ts`
|
||||
|
||||
### 5. Mutations Typed
|
||||
All mutations now use `(state: RootState, payload?: TypedPayload)`:
|
||||
- Vehicle: `updateYear`, `updateMake`, `updateModel`, `updateStyle`, `updateVehicleVin`, `updateVehicle`, `updateRegistration`, `resetVehicleState`, etc.
|
||||
- Damage: `updateIsRepair`, `updateNumberOfChips`, `updateGlassToReplace`, `updatePartQuestionAnswers`, etc.
|
||||
- Service location, customer, schedule: `updateServiceZip`, `updateServiceLocation`, `updateSchedule`, `updateCustomerDetails`, etc.
|
||||
- Line items, payment, referral, application user: `updateGlassParts`, `updateVaps`, `updatePageData`, etc.
|
||||
- RESET mutations: `resetState`, `resetVehicleState`, `resetDamageState`, `resetSchedule`, etc.
|
||||
- Misc: `updateStateWithOrderInformation`, `updateExperiments`, `updateTriggeredSiteEntry`, `updateAffiliateCookies`, `updateHasTriggeredError`
|
||||
|
||||
### 6. Other Fixes
|
||||
- **src/global-methods.js:** `additionalSuccessEventDataHandler = undefined`, `payload = {}` as defaults for optional params
|
||||
- **store/index.ts:** Fixed `methods` → `method` in four `callHttpClient` calls
|
||||
- **store/types.ts:** `savedSessionTimeout` typed as `string | null` (matches `getDateForSavedSessionTimeout()`)
|
||||
- **store/types.ts:** `cashPriceSubTotal` added to `OrderState`
|
||||
- **store/index.ts:** `updateBillToAcctNumber` parameter typed
|
||||
- **store/index.ts:** `updateStateWithOrderInformation` uses `FlexibleRecord` for `order` and `applicationUser` from session API
|
||||
- **store/index.ts:** `resetSchedule` callback typed as `(item: { partType?: string }) => ...`
|
||||
|
||||
### 7. Test Status
|
||||
- **Store tests:** 139 passing (`npm run test:unit:lite -- --testPathPattern=store.spec --runInBand`)
|
||||
|
||||
---
|
||||
|
||||
## Remaining Work
|
||||
|
||||
### Phase 3e — Type Actions
|
||||
- Add `ActionContext<RootState, RootState>` to store actions
|
||||
- Add payload types for action parameters
|
||||
- Typed return values where applicable
|
||||
|
||||
### Step 4 — Fix Remaining Test Failures
|
||||
- Some specs may have import issues (e.g. `base-input-button`)
|
||||
- Run full test suite and fix any failures
|
||||
|
||||
### Build Verification
|
||||
- Confirm `npm run build` completes successfully
|
||||
- Last run was still in progress; verify no TypeScript errors
|
||||
|
||||
### Optional / Future
|
||||
- Convert more `.js` files to `.ts` (e.g. `global-methods.js`, `constants/store-actions.js`, `constants/store-mutations.js`, mixins)
|
||||
- Add stricter typing where beneficial
|
||||
- Consider converting Vue SFCs to `<script lang="ts">` incrementally
|
||||
|
||||
---
|
||||
|
||||
## Key Files
|
||||
|
||||
| File | Notes |
|
||||
|------|-------|
|
||||
| `src/store/index.ts` | Main Vuex store (converted) |
|
||||
| `src/store/types.ts` | RootState and sub-state types, FlexibleRecord |
|
||||
| `src/shims-vue.d.ts` | Vue module augmentation for $store |
|
||||
| `src/main.ts` | App entry point |
|
||||
| `tsconfig.json` | TypeScript config |
|
||||
|
||||
---
|
||||
|
||||
## Useful Commands
|
||||
|
||||
```bash
|
||||
# Run store tests
|
||||
npm run test:unit:lite -- --testPathPattern=store.spec --runInBand
|
||||
|
||||
# Full build
|
||||
npm run build
|
||||
|
||||
# Type check only (if vue-tsc available)
|
||||
npx vue-tsc --noEmit
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Gotchas
|
||||
|
||||
1. **FlexibleRecord:** Uses `any` for nested values to allow assigning dynamic API responses to typed state. ESLint disable for `no-explicit-any` is intentional on that type.
|
||||
|
||||
2. **Session API:** `updateStateWithOrderInformation` receives `sessionInformation.order` and `sessionInformation.applicationUser` from the Session API. Structure is dynamic; casting to `FlexibleRecord` enables property access without dozens of explicit casts.
|
||||
|
||||
3. **PowerShell:** Use `;` not `&&` for chaining commands.
|
||||
|
||||
4. **Store actions:** Still untyped; they use `context` and payloads without `ActionContext` or payload interfaces.
|
||||
Loading…
Reference in a new issue