Skip to content

Vue 3 migration: Phase 1 — core infrastructure (#1033)#1037

Open
Tim020 wants to merge 2 commits into
feature/vue3-migrationfrom
feature/vue3-migration-phase-1
Open

Vue 3 migration: Phase 1 — core infrastructure (#1033)#1037
Tim020 wants to merge 2 commits into
feature/vue3-migrationfrom
feature/vue3-migration-phase-1

Conversation

@Tim020
Copy link
Copy Markdown
Contributor

@Tim020 Tim020 commented May 13, 2026

Summary

  • Adds all plumbing required before any real Vue 3 page can function
  • Pinia stores: user.ts (auth, current user, RBAC, settings), system.ts (global settings, RBAC roles, available shows, permission getters), websocket.ts (WS connection state, persists internalUUID only)
  • useWebSocket() composable: module-level singleton replacing vue-native-websocket; handles WS lifecycle, OP routing, exponential-backoff reconnect
  • js/http-interceptor.ts: port of Vue 2 interceptor; calls useUserStore() inside the fetch override (not at module scope) to respect Pinia lifecycle
  • js/platform/ (browser.ts, electron.ts, index.ts): verbatim copies — no Vue 2 APIs
  • js/utils.ts, js/logger.ts, js/customValidators.ts: framework-agnostic ports
  • types/api/ + types/index.ts + constants/: verbatim copies from client/src/
  • router/index.ts: full route list with Vue Router 5 /:pathMatch(.*)* catch-all + async beforeEach guard
  • App.vue: full BVN navbar port (<script setup>, storeToRefs, useVuelidate, onMounted)
  • Stub views: NotFoundView.vue, PlaceholderView.vue, LoginView.vue, ServerSelector.vue

Key design decisions

  • Auth token not in Pinia: stored directly in localStorage under digiscript_auth_token (same key as Vue 2) — authToken getter reads localStorage directly
  • Cross-store circular imports: all cross-store references use await import() inside action bodies or module-level lazy accessor functions (getUserRbac()) inside getter bodies
  • WS send from stores: wsStore.registerSend(sendObj) called by composable on init so stores can send WS messages without circular imports
  • Show store stub: currentShow stored in system.ts for Phase 1; migrates to stores/show.ts in Phase 6
  • window.confirm() for destructive actions: temporary; replaced by BVN modal in Phase 6

Test plan

  • npm run build — no errors
  • npm run typecheck — passes
  • npm run ci-lint — passes
  • npm run test:run — passes
  • Navigate to /ui-new/ — BVN navbar renders, unauthenticated routes redirect to /ui-new/login
  • Set valid auth token in DevTools localStorage, refresh — WS connects and authenticates (check Network → WS tab for SET_UUID / WS_AUTH_SUCCESS)

🤖 Generated with Claude Code

Pinia stores (user/auth, system/RBAC, websocket), useWebSocket() composable,
HTTP interceptor, full router with beforeEach guard, platform/utils/logger
ports, API types, constants, full BVN navbar App.vue, and stub views.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Tim020 Tim020 added the claude Issues created by Claude label May 13, 2026
@github-actions github-actions Bot added client Pull requests changing front end code xlarge-diff labels May 13, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 13, 2026

Client V3 Test Results

0 tests  ±0   0 ✅ ±0   0s ⏱️ ±0s
0 suites ±0   0 💤 ±0 
0 files    - 1   0 ❌ ±0 

Results for commit 2a0bafe. ± Comparison against base commit c06efed.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 13, 2026

Client Test Results

128 tests  ±0   128 ✅ ±0   0s ⏱️ ±0s
  6 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 2a0bafe. ± Comparison against base commit c06efed.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 13, 2026

Python Test Results

  1 files  ±0    1 suites  ±0   1m 29s ⏱️ -6s
603 tests ±0  603 ✅ ±0  0 💤 ±0  0 ❌ ±0 
608 runs  ±0  608 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit 2a0bafe. ± Comparison against base commit c06efed.

♻️ This comment has been updated with latest results.

- Switch to BApp wrapper + unplugin-vue-components/BootstrapVueNextResolver
  for automatic per-component tree-shaken imports (no global plugin needed)
- Add bootstrap-vue-next/dist/bootstrap-vue-next.css import in main.ts
- Add data-bs-theme="dark" to BNavbar so text renders white on info background
  (Bootstrap 5 equivalent of Bootstrap 4's type="dark")
- Add components.d.ts to tsconfig includes for GlobalComponents type augmentation
- Gitignore components.d.ts (auto-generated by unplugin-vue-components on build)
- Fix NotFoundView copy and centering to match Vue 2 404View exactly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions github-actions Bot added the git label May 14, 2026
@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
1 Security Hotspot
23.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

claude Issues created by Claude client Pull requests changing front end code git xlarge-diff

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant