Skip to content

Update to eslint.config.js#890

Open
glass-ships wants to merge 45 commits intomainfrom
update-linting
Open

Update to eslint.config.js#890
glass-ships wants to merge 45 commits intomainfrom
update-linting

Conversation

@glass-ships
Copy link
Collaborator

@glass-ships glass-ships commented Nov 11, 2024

eslint has migrated from the .eslintrc.json to the new "flat config", eslint.config.js style.

This PR:

  • updates to the new config style
  • addresses a number of linting/formatting/typing errors that were (for some reason) caught with the new version but not previously
  • updates some dependencies and make necessary usage changes
  • updates usage of UAParser, as there have been some changes from v1 to v2 (locally tested, should still correctly parse browser/cpu/etc)

@netlify
Copy link

netlify bot commented Nov 11, 2024

Deploy Preview for monarch-app failed.

Name Link
🔨 Latest commit 1619e14
🔍 Latest deploy log https://app.netlify.com/projects/monarch-app/deploys/696fd7aadb6df800086d6b7a

@codecov
Copy link

codecov bot commented Nov 11, 2024

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.62%. Comparing base (6b15e4c) to head (1619e14).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #890   +/-   ##
=======================================
  Coverage   72.62%   72.62%           
=======================================
  Files          93       93           
  Lines        3306     3306           
=======================================
  Hits         2401     2401           
  Misses        905      905           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@glass-ships
Copy link
Collaborator Author

@vincerubinetti Hope you're doing well, long time no see!
Sorry to drag you back, feel free to ignore.

But do you have any idea why axe.test.ts would be throwing type issues as a result of this PR?
I've tried digging around a bit but playwright is an..interesting package and it's not super clear to me what, if anything, has changed here.

@vincerubinetti
Copy link
Contributor

vincerubinetti commented Jan 9, 2025

The issue seems to be with this line:

type Test = Parameters<typeof test>[1];

I assume I wrote it like this originally because Playwright did not conveniently export a (e.g.) TestFunction type we could use to define the shape of the async ({ page, browserName }) => { function, so I had to extract it manually from the test() function like that.

My guess is that in upgrading the version of @playwright/test, somewhere along the line they added a function overload to the test() function. Now it can be:

test("some name", () => {});
// OR
test("some name", { someTestDetail: "abc" }, () => {});

which made Parameters<typeof test>[1]; read the wrong parameter number, i.e. the middle arg of the second overload there, TestDetails.

I've found that this works (for now), where these types are just imported from playwright, and this union is defined under-the-hood in node_modules/playwright/types/test.d.ts:

/** test func args */
type TestArgs = PlaywrightTestArgs &
  PlaywrightTestOptions &
  PlaywrightWorkerArgs &
  PlaywrightWorkerOptions;
// it'd be nice if they had a type for this union and exported it for us so we could just use it forever

/** generic page axe test */
const checkPage =
  (path: string, selector?: string) =>
  async ({ page, browserName }: TestArgs) => {

Or a better long term solution is to refactor it into this:

const checkPage = (title: string, path: string, selector?: string) =>
  test(title, async ({ page, browserName }) => {})

checkPage("Accessibility check " + path, path);

@glass-ships
Copy link
Collaborator Author

Nice, that last refactor seems to have done it!

Thanks so much for taking a look, I'm not sure I'd have ever figured that out haha

@glass-ships glass-ships changed the title [Experimental] Update to eslint.config.js Update to eslint.config.js Jan 10, 2025
@glass-ships
Copy link
Collaborator Author

@kevinschaper sorry for the ping - thoughts on this?

@glass-ships glass-ships requested a review from varun-divya May 20, 2025 18:15
@glass-ships glass-ships requested a review from Copilot June 12, 2025 15:33
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR updates the project to use ESLint’s new flat config, addresses various linting/formatting/typing issues, and brings dependency and usage updates (including UAParser and analytics) in line with newer versions.

  • Updated ESLint configuration and removal of deprecated config files
  • Dependency updates and adjustments to UAParser usage and analytics initialization
  • Minor accessibility and code style improvements in Vue components

Reviewed Changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
frontend/src/pages/aboutV2/PageContact.vue Updated UAParser import and usage; ensure consistency across components
frontend/src/pages/about/PageCite.vue Added ESLint inline disable comments for long lines
frontend/src/pages/PageTestbed.vue Added accessibility label and ESLint disable/enable comments
frontend/src/main.ts Revised GA initialization with createGtag
frontend/src/data/downloads.ts Added ESLint inline disable for max-len
frontend/src/composables/use-param.ts Removed ts-expect-error comments in favor of clearer type handling
frontend/src/components/TheFeedbackForm.vue Updated UAParser usage to use instantiation with getResult()
frontend/src/components/AppTextbox.vue Added “for” attribute to improve accessibility
Comments suppressed due to low confidence (1)

frontend/src/composables/use-param.ts:73

  • The removal of the @ts-expect-error comments suggests that type issues have been addressed; please verify that the updated type checks and guards ensure proper type safety for accessing url.value.
if (typeof url.value[key] === "string") newValue = url.value[key];

@claude
Copy link

claude bot commented Jan 20, 2026

Code Review: PR #890 - ESLint Flat Config Migration

Overall Assessment: 7.5/10 ⭐

This PR successfully migrates from ESLint's legacy .eslintrc to the new flat config (eslint.config.js), updates numerous dependencies, and improves type safety. The migration is mostly sound, but there are some issues that should be addressed before merging.


🟢 Strengths

1. ESLint Configuration Quality

  • Proper flat config structure using defineConfigWithVueTs
  • Correct ignores handling - properly migrated from .eslintignore to ignores array
  • Good use of FlatCompat for legacy configs that haven't migrated yet
  • Comprehensive file targeting for JS/TS/Vue files

2. Type Safety Improvements

AppLink.vue (frontend/src/components/AppLink.vue:9)

// Better typing with specific VNode[] instead of unknown
type Slots = {
  default: () => VNode[];
};

AppNodeText.vue (frontend/src/components/AppNodeText.vue:89,93)

// Correct use of primitive boolean instead of Boolean object wrapper
createSurroundingEl(isSvg: boolean) { ... }

use-param.ts (frontend/src/composables/use-param.ts:42-46)

  • Removed multiple @ts-expect-error comments, suggesting better type inference

3. Accessibility Improvements

  • ✅ Added proper for attributes to labels in AppTextbox.vue and PageTestbed.vue
  • ✅ Better screen reader support

4. Modernization

  • ua-parser-js v2 migration correctly implemented with constructor pattern
  • Import assertions using modern with { type: "json" } syntax
  • Sass modern API in vite.config.mjs
  • Cleaner test structure in axe.test.ts

🟡 Issues & Concerns

1. 🚨 ESLint Configuration Error (frontend/eslint.config.js:18)

Critical Issue:

languageOptions: {
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "script",  // ← INCORRECT
  },
},

Problem: Setting sourceType: "script" conflicts with the ES module setup. The package.json has "type": "module", and this is a modern Vue 3 project using ES modules.

Fix:

languageOptions: {
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",  // or just omit this line
  },
},

2. Missing Accessibility Configuration (frontend/eslint.config.js:46-52)

The old config had a controlComponents option that's missing:

// Old config had:
"vuejs-accessibility/label-has-for": [
  "error",
  {
    "controlComponents": ["AppInput"],  // ← Missing in new config
    ...
  },
]

Impact: This could miss accessibility issues with the custom AppInput component.

3. Disabled Linting Rules (frontend/eslint.config.js:56-63)

Several strict rules are disabled:

"prefer-const": "off",
"@typescript-eslint/no-unused-vars": ["off"],
"@typescript-eslint/no-unused-expressions": ["off"],

Recommendation: Consider using "warn" instead of "off" for gradual improvement, or fix the underlying issues rather than disabling rules.

4. 🚨 gtag Router Tracking (frontend/src/main.ts:60-62)

Before:

app.use(VueGtag, { config: { id: "G-TWM5ED4QJB" } }, router);

After:

const gtag = createGtag({ tagId: "G-TWM5ED4QJB" });
app.use(gtag);
// Router is no longer passed! ⚠️

Concern: The router parameter was removed. This might affect automatic page view tracking. Please verify that route changes are still being tracked in Google Analytics.


⚠️ Dependency Update Risks

High Risk - Requires Testing:

  1. Sentry v7→v10 (@sentry/vue, @sentry/browser)

    • 3 major versions jump
    • Error tracking configuration may need updates
    • Could break silently
  2. Vite v5→v7

    • Build process changes
    • Dev server behavior changes
    • May affect build times or output
  3. FontAwesome v6→v7

    • Icon names or rendering might change
    • Check for visual regressions
  4. ApexCharts v3→v5

    • 2 major versions
    • Chart rendering/config breaking changes possible

Medium Risk:

  • @vueuse/core v10→v13 (3 major versions)
  • @vitejs/plugin-vue v4→v6 (2 major versions)
  • vue-router v4.3→v4.5

Low Risk (Properly Handled):

  • ua-parser-js v1→v2 - Correctly migrated and locally tested
  • Vue 3.4→3.5 - Minor version bump
  • TypeScript 5.3→5.8 - Patch updates

📋 Recommendations

Before Merging:

  1. Fix sourceType: "script" to "module" in eslint.config.js
  2. Verify gtag router tracking - Test that page views are tracked on route changes
  3. Restore controlComponents: ["AppInput"] in accessibility rules
  4. 🤔 Consider converting disabled rules to warnings for gradual improvement

Testing Requirements:

  1. Analytics Verification:

    • Test that Google Analytics tracks page navigation correctly
  2. Error Tracking:

    • Verify Sentry is still capturing errors properly
    • Check Sentry dashboard for any configuration warnings
  3. Visual Regression:

    • Verify FontAwesome v7 icons render correctly
    • Check ApexCharts v5 visualizations
  4. User Agent Parsing:

    • Test feedback forms that use UAParser
    • Verify OS/browser detection still works
  5. Build Process:

    • Confirm dev server starts without issues
    • Verify production build succeeds
    • Compare bundle sizes (Vite v7 may have optimizations)

📝 Additional Notes

What Was Done Well:

  • Clear commit history showing iterative fixes
  • Local testing of ua-parser-js changes (mentioned in PR description)
  • Comprehensive dependency updates in one PR (easier to track)
  • Improved type safety throughout the codebase

Areas for Improvement:

  • Document major dependency migrations (Sentry, Vite, FontAwesome, ApexCharts)
  • Add comments explaining why certain ESLint rules are disabled
  • Consider breaking up large dependency updates into separate PRs for easier rollback

✅ Conclusion

This is a solid modernization PR that brings the codebase up to date with current tooling standards. The ESLint flat config migration is well-executed, and the type safety improvements are excellent. However, the sourceType configuration error needs to be fixed, and the gtag router tracking should be verified before merging.

Required Changes:

  1. Fix sourceType: "script""module"
  2. Verify Google Analytics tracking works

Recommended Changes:

  1. Restore controlComponents: ["AppInput"] in accessibility rules
  2. Test all major dependency updates (Sentry, FontAwesome, ApexCharts)

Once these issues are addressed, this PR will significantly improve the project's code quality and maintainability. Great work on tackling this substantial migration! 🎉


Review generated by Claude Code

@claude
Copy link

claude bot commented Jan 20, 2026

Code Review: PR #890 - Update to eslint.config.js

Summary

This PR successfully migrates from the legacy .eslintrc configuration to the modern ESLint flat config (eslint.config.js), addresses numerous linting/formatting/typing errors, and updates several dependencies including a major version bump for ua-parser-js from v1 to v2. The changes span 346 additions and 209 deletions across 27 files.

✅ Positive Aspects

  1. Modern ESLint Configuration: The migration to flat config is well-structured and uses the recommended approach with defineConfigWithVueTs from @vue/eslint-config-typescript.

  2. Proper Ignore Patterns: The new config properly uses the ignores array instead of .eslintignore, maintaining the same exclusions.

  3. Type Safety Improvements:

    • Removed unnecessary @ts-expect-error comments in use-param.ts (lines 73, 75-76)
    • Fixed type annotation from Boolean to boolean in AppNodeText.vue
    • Improved slot typing in AppLink.vue with proper VNode[] type
  4. Test Improvements: The refactoring of axe.test.ts is cleaner, removing the intermediate Test type and making the test definition more straightforward.

  5. Dependency Updates: Multiple dependencies updated to latest versions, addressing potential security vulnerabilities and compatibility issues.

  6. API Updates: Correctly updated to modern APIs:

    • vue-gtag: Changed from default export to named createGtag export
    • ua-parser-js v2: Updated from default export to named UAParser class
    • SCSS: Added api: "modern" for modern Dart Sass API

⚠️ Issues & Concerns

Critical: Test Failures

The CI shows two test failures that need to be addressed:

  1. test-types: Type checking is failing (frontend/src/main.ts:18:20)
  2. test-e2e: E2E tests are failing

These must be resolved before merging.

Code Quality Issues

  1. AppLink.vue (lines 66-67):
const slots = useSlots();

type Slots = {
  default: () => VNode[];
};

defineSlots<Slots>();

The useSlots() call appears unused. Either remove it or use it consistently with defineSlots().

  1. use-param.ts (lines 73, 75-76, 105-106):
    While the @ts-expect-error comments were removed, the code still uses array indexing without proper type checking:
if (typeof url.value[key] === "string") newValue = url.value[key];
if (Array.isArray(url.value[key]) && url.value[key][0])
  newValue = url.value[key][0];

The TypeScript errors were likely valid. Consider proper type guards or assertions instead of just removing the suppressions.

  1. eslint.config.js (line 56):
"prefer-const": "off"

Disabling prefer-const is generally not recommended. This rule helps prevent accidental mutations. Consider addressing the specific cases that trigger this rule instead of disabling it globally.

  1. Rule Severity Downgrade (lines 58, 61):
"@typescript-eslint/no-explicit-any": ["warn"],
"prettier/prettier": ["warn", {}, { usePrettierrc: true }]

These rules are downgraded from "error" to "warn". While this may be pragmatic for a migration, ensure there's a plan to address these warnings systematically.

Potential Bugs

  1. main.ts (lines 45-47):
const gtag = createGtag({
  tagId: "G-TWM5ED4QJB",
});

The router parameter is no longer being passed to gtag. Verify that page tracking still works correctly without explicitly passing the router. The v3 API may handle this differently, but this should be tested.

  1. vite.config.mjs (line 62):
    The unused URL import was removed, but verify that no other code depended on it being available in the module scope.

Security Considerations

  1. ua-parser-js: This library has had security vulnerabilities in the past. The update from v1 to v2 is good, but verify that v2.0.8 is the latest secure version.

  2. Dependency Updates: Multiple major version bumps. Ensure all breaking changes are accounted for:

    • eslint: 8.x → 9.x (major breaking changes in flat config)
    • vue-gtag: 2.x → 3.x
    • ua-parser-js: 1.x → 2.x
    • Various @vue/* packages

🔍 Missing Test Coverage

  1. UA Parser Changes: The migration to new UAParser().getResult() affects browser detection in multiple components (AppHighlight.vue, TheFeedbackForm.vue, PageContact.vue). Add unit tests to verify the parser output format hasn't changed.

  2. Google Analytics: The gtag integration change should have integration tests to ensure tracking events still fire correctly.

  3. Type Checking: The failing type check suggests missing test coverage for type correctness.

📝 Recommendations

Before Merging (Required)

  1. Fix test-types failure: Investigate and resolve the TypeScript compilation error
  2. Fix test-e2e failure: Ensure E2E tests pass
  3. Address type safety: Properly fix the type issues in use-param.ts instead of removing error suppressions
  4. Remove unused code: Clean up the unused useSlots() in AppLink.vue

Future Improvements (Optional)

  1. Re-enable prefer-const and fix the violations
  2. Create a plan to address @typescript-eslint/no-explicit-any warnings
  3. Add regression tests for UA parser and gtag changes
  4. Consider using import type for type-only imports where applicable
  5. Document the breaking changes from dependency updates in the PR description

🎯 Overall Assessment

This is a significant infrastructure upgrade that modernizes the linting setup and addresses technical debt. The approach is sound, but the test failures must be resolved before merging. The PR represents substantial work over many months of keeping up with main branch merges.

Status: ⏸️ Changes Requested - Address test failures and type safety concerns.


Generated by Claude Code Review

@claude
Copy link

claude bot commented Jan 20, 2026

Pull Request Review: Update to eslint.config.js

Summary

This PR successfully migrates from ESLint's legacy .eslintrc configuration to the new flat config format (eslint.config.js). The migration includes necessary dependency updates and fixes for linting/typing issues that were exposed by the newer tooling versions.

✅ Positive Aspects

1. Configuration Migration

  • Clean migration from .eslintrc to eslint.config.js using the flat config format
  • Proper use of FlatCompat for backward compatibility with plugins that don't yet support flat config
  • All previous eslint rules have been preserved and properly migrated
  • Ignore patterns correctly migrated from .eslintignore to the new config format

2. Dependency Updates

The dependency updates are well-structured and address important areas:

  • ESLint 8.57.0 → 9.39.2 (major version upgrade)
  • Vue ecosystem updates (Vue 3.4.21 → 3.5.27, Vue Router, etc.)
  • TypeScript 5.3.3 → 5.9.3
  • Build tooling updates (Vite 5.1.4 → 7.3.1, Vitest, Playwright)
  • Security monitoring tools (@sentry updates)

3. Code Quality Improvements

  • Fixed TypeScript type issues (e.g., Booleanboolean in frontend/src/components/AppNodeText.vue:764-816)
  • Removed unnecessary @ts-expect-error suppressions in use-param.ts:863-878
  • Better type annotations (e.g., VNode[] instead of unknown in AppLink.vue:752)
  • Improved test structure in axe.test.ts:77-127 - cleaner test function composition

4. Package Manager Cleanup

  • Removed bun.lockb binary file (frontend/bun.lockb:66) - this should be regenerated locally

5. Modern JavaScript Standards

  • Added "type": "module" to package.json:3
  • Updated JSON import syntax to use import assertions (with { type: "json" }) in test files:137, 244
  • Updated UAParser usage to match v2 API (instantiation required: new UAParser())

6. Build Configuration Updates

  • Added SCSS api: "modern" setting in vite.config.mjs:62 for modern Sass API
  • Updated to @tsconfig/node24 from node20 (tsconfig.json:1057)
  • Proper Google Analytics integration update (vue-gtag v3 API in main.ts:897-910)

⚠️ Areas of Concern

1. Disabled ESLint Rules

The new config disables several important rules in frontend/eslint.config.js:53-61:

"prefer-const": "off",
"@typescript-eslint/no-unused-expressions": ["off"],
"@typescript-eslint/no-unused-vars": ["off"],

Concern: These rules help catch common bugs and improve code quality. Disabling them entirely is not ideal.

Recommendation:

  • Consider using "warn" instead of "off" for these rules
  • If there are specific cases that need exceptions, consider using inline eslint-disable comments
  • prefer-const in particular helps prevent accidental reassignments
  • Unused variables can indicate dead code or incomplete refactoring

2. Debug Console Log

Added a debug console.log in frontend/src/pages/about/PageContact.vue:975:

const response = {
  browser: concat(browser.name, browser.version),
  // ... 
};
console.debug({ response });

return {
  Page: route.fullPath,
  Browser: concat(browser.name, browser.version),
  // ...
}

Issues:

  • The response variable is created but never used (aside from the debug log)
  • This appears to be debugging code that should be removed
  • The actual return statement duplicates the same data

Recommendation: Remove the response variable and the console.debug call, or explain why this debugging is needed in production.

3. VSCode Settings Change

Added Biome formatter configuration in frontend/.vscode/settings.json:59-61:

"[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
  "editor.defaultFormatter": "biomejs.biome"
}

Concerns:

  • This changes the default formatter from Prettier to Biome for team members
  • The PR description doesn't mention this change or the reasoning
  • Biome is not listed in package.json as a dependency
  • This could cause inconsistent formatting if Biome isn't installed

Recommendation:

  • Either remove this change if Biome isn't being adopted
  • Or add Biome to devDependencies if it is being adopted
  • Document this change in the PR description

4. MockServiceWorker.js Updates

The mockServiceWorker.js file shows significant changes (frontend/public/mockServiceWorker.js:379-704). This is an auto-generated file from MSW.

Recommendation: Ensure this file is ignored in version control or document that it should be regenerated by running npx msw init public/ locally.

5. Missing Test for UAParser Changes

UAParser API changes from v1 to v2 (instantiation now required) in components:

  • frontend/src/components/AppHighlight.vue:726-730
  • frontend/src/components/TheFeedbackForm.vue:841-851
  • frontend/src/pages/about/PageContact.vue:951-980

Recommendation: The PR description mentions "locally tested," but it would be valuable to add unit tests for these components to ensure the browser/device/os parsing continues to work correctly.

6. Long Line Comments

Several instances of /* eslint-disable max-len */ and <!-- eslint-disable max-len --> added for specific lines:

  • frontend/src/data/downloads.ts:887
  • frontend/src/pages/PageTestbed.vue:922-930
  • frontend/unit/associationColumns.test.ts:1083, 1091

Minor Concern: While these are acceptable, some of these could be refactored to avoid needing the disable comment. For example, long descriptions in PageGetInvolved.vue:988-1006 and PageAbout.vue:1016-1034 were reformatted to multiline strings, which is better than disabling the rule.

🔒 Security Considerations

  1. Dependency Updates: The major version bumps for Sentry (@sentry/vue: 7.105.0 → 10.35.0) and other security-related packages are good for security.

  2. MSW Update: Mock Service Worker updated (2.2.2 → 2.12.7) - ensure the new version's security improvements are in place.

  3. No New Security Risks: No apparent introduction of security vulnerabilities in the code changes.

🎯 Performance Considerations

  1. Vite 7.x: Major version upgrade should provide performance improvements for builds
  2. Vue 3.5: Performance improvements in the Vue framework itself
  3. Sass Modern API: Using the modern Sass API (vite.config.mjs:62) should improve build performance

✅ Test Coverage

The PR updates test files appropriately:

  • Test refactoring in axe.test.ts improves clarity
  • Import assertions added where needed
  • Test infrastructure updated to match new tooling

Recommendation: Consider running the full test suite to ensure all tests pass with the new dependency versions.

📝 Overall Recommendations

Critical

  1. Remove debug code: Remove the unused response variable and console.debug from PageContact.vue:968-976
  2. Clarify Biome formatter: Either remove the VSCode Biome config or add Biome as a dev dependency

Important

  1. Reconsider disabled ESLint rules: Use "warn" instead of "off" for prefer-const, no-unused-vars, etc.
  2. Regenerate bun.lockb: After merging, team members should regenerate the lockfile locally

Nice to Have

  1. Add tests for UAParser: Unit tests for components using UAParser would increase confidence
  2. Refactor long lines: Consider refactoring remaining long lines to avoid eslint-disable comments
  3. Document breaking changes: Add a note about any breaking changes for local development setup

✅ Approval Status

This PR represents a solid migration to modern tooling with appropriate dependency updates. The code quality improvements are valuable, and the configuration migration is well-executed.

Status: Approved with minor requested changes

The concerns raised are relatively minor and primarily around code cleanliness (debug code) and configuration clarity (Biome formatter). Once those are addressed, this PR is ready to merge.

Great work on a comprehensive upgrade! 🎉

@claude
Copy link

claude bot commented Jan 20, 2026

Pull Request Review: Update to eslint.config.js

This is a comprehensive ESLint migration PR that updates from the deprecated .eslintrc format to the modern flat config (eslint.config.js). Overall, this is a well-executed modernization effort. Here's my detailed review:


✅ Strengths

1. Configuration Migration

  • Successfully migrated to ESLint v9's flat config format using defineConfigWithVueTs
  • Properly uses FlatCompat for backward compatibility with legacy plugins (vuejs-accessibility)
  • Maintains all previous rules and accessibility configurations
  • Ignores patterns now properly integrated into the config file

2. Dependency Updates

Major version bumps are substantial and well-coordinated:

  • ESLint: v8 → v9 (major ecosystem upgrade)
  • Vue: v3.4 → v3.5
  • TypeScript: v5.3 → v5.9
  • Vite: v5 → v7
  • Many FontAwesome packages: v6 → v7
  • Sentry: v7 → v10

3. Code Quality Improvements

  • Fixed type safety issues throughout (proper use of ! non-null assertions instead of @ts-ignore)
  • Added JSON import assertions (with { type: "json" }) - modern ES standard
  • Fixed array access patterns with proper null checks
  • UAParser v2 migration correctly implemented

4. Test Improvements

  • Refactored axe accessibility test structure to be more maintainable
  • Better error handling in array access patterns
  • More explicit type definitions

⚠️ Issues & Concerns

1. Critical: Disabled Type Safety Rules

Location: frontend/eslint.config.js:60

"@typescript-eslint/no-unused-vars": ["off"],

Issue: This disables detection of unused variables, which can lead to:

  • Dead code accumulation
  • Harder-to-maintain codebase
  • Missed bugs where variables are defined but never used

Recommendation:

  • Change to "warn" to surface issues without breaking builds
  • Or add specific ignore patterns: { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }

2. Prefer-const Disabled

Location: frontend/eslint.config.js:56

"prefer-const": "off",

Issue: This allows let when const would suffice, which:

  • Makes code intent less clear
  • Reduces immutability benefits
  • Goes against modern JavaScript best practices

Recommendation: Re-enable this rule. If there are legitimate cases, use inline // eslint-disable-next-line comments.

3. Debugging Code Left In

Location: frontend/src/pages/about/PageContact.vue:1053

const response = {
  browser: concat(browser.name, browser.version),
  // ...
};
console.debug({ response });  // ← Debug code

Issue: Debug logging left in production code

Recommendation: Remove the unused response const and console.debug call (lines 1046-1053).

4. VSCode Settings Change

Location: frontend/.vscode/settings.json:59-61

"[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
  "editor.defaultFormatter": "biomejs.biome"
}

Issue: This changes the formatter from Prettier to Biome, but:

  • Biome is not in the dependencies
  • This conflicts with the ESLint+Prettier setup in the PR
  • May cause inconsistent formatting across team members

Recommendation: Either remove this or add Biome to devDependencies if that's the intended direction.

5. Type Safety Regression

Location: frontend/src/composables/use-param.ts:72-77

Removed TypeScript error suppressions without fixing the underlying types:

if (typeof url.value[key] === "string") newValue = url.value[key];
if (Array.isArray(url.value[key]) && url.value[key][0])
  newValue = url.value[key][0];

Issue: These lines likely still have TypeScript errors that were previously suppressed. The suppressions were removed but the type issues weren't addressed.

Recommendation: Properly type the url.value[key] accessor or add runtime type guards.

6. Bun Lockfile Removed

Location: Removal of frontend/bun.lockb

Issue: This affects reproducible builds if the project uses Bun as a package manager.

Recommendation: Clarify if this is intentional. If moving away from Bun, ensure CI/CD is updated accordingly.


🔍 Security Considerations

1. Dependency Version Jumps

Several major version updates merit security review:

  • Sentry v7→v10: Review for breaking changes in error tracking
  • Vite v5→v7: Check for any security-related changes in dev server
  • MSW v2.2→v2.12: Service worker security updates

Recommendation: Review CHANGELOGs for security fixes, especially for Sentry and Vite.

2. UAParser v2 Migration

The migration from v1 to v2 looks correct:

// Old: import parser from "ua-parser-js"; const { os } = parser();
// New: import { UAParser } from "ua-parser-js"; const { os } = new UAParser().getResult();

Note: UAParser v2 has a different API structure. This change is correctly implemented in all 3 locations.


🎯 Testing Concerns

1. Test Coverage

The PR includes test updates, but verify:

  • All tests pass with the new ESLint/TypeScript configuration
  • E2E tests work with updated Playwright (v1.39 → v1.55)
  • Unit tests work with Vitest v3 (from v1)

2. Breaking Changes Potential

  • Vue v3.5 has composition API improvements that might affect component behavior
  • Vitest v3 has significant breaking changes from v1
  • Playwright v1.55 may have different browser behaviors

Recommendation: Ensure full test suite passes before merging.


📊 Performance Considerations

  1. Positive: ESLint v9 has better performance than v8
  2. Positive: Vite v7 has improved build speeds
  3. Concern: Multiple major dependency updates at once make it harder to isolate performance regressions if they occur

✏️ Minor Issues

  1. Inconsistent comments: Some max-len disables use inline comments, others use multi-line (lines 1000-1008 in PageTestbed.vue)
  2. Type annotation changes: Booleanboolean is correct (lowercase is TypeScript primitive)
  3. Import organization: Good use of JSON import assertions

🎯 Recommendations Summary

Must Fix Before Merge:

  1. ❗ Remove debug code in PageContact.vue:1053
  2. ❗ Fix or document the Biome formatter config in .vscode/settings.json
  3. ❗ Re-enable prefer-const rule or document why it's disabled
  4. ❗ Change no-unused-vars from "off" to "warn" or add ignore patterns

Should Consider:

  1. Review and test all major dependency updates thoroughly
  2. Fix underlying type issues in use-param.ts instead of just removing suppressions
  3. Verify bun.lockb removal is intentional
  4. Add migration notes for UAParser v2 API changes

Nice to Have:

  1. Split this PR into smaller chunks (config migration, dependency updates, code fixes) for easier review
  2. Add changelog or migration notes for the team

Overall Assessment

Code Quality: ⭐⭐⭐⭐ (4/5)
Security: ⭐⭐⭐⭐ (4/5) - Needs dependency review
Testing: ⭐⭐⭐ (3/5) - Needs verification
Best Practices: ⭐⭐⭐ (3/5) - Some linting rules too permissive

This is a solid modernization PR that successfully migrates to ESLint flat config and updates many dependencies. The main concerns are around disabled type safety rules and the need for thorough testing given the scope of dependency updates.

With the critical issues addressed, this PR will significantly improve the project's tooling infrastructure.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

Comments