Merge pull request #2296 from oasisprotocol/lw/refresh-lint

Detect hot-reload issues with eslint (as a warning for now)

Author: lukaw3d

.changelog/2296.internal.md

@@ -0,0 +1 @@
+Detect hot-reload issues with eslint

.eslintrc.js

@@ -9,6 +9,8 @@ const config = {
     'react-app', // https://github.com/facebook/create-react-app/blob/main/packages/eslint-config-react-app/index.js
     'plugin:prettier/recommended', // See .prettierrc
   ],
+  plugins: ['react-refresh'],
+
   parser: '@typescript-eslint/parser',
 
   settings: {},
@@ -68,6 +70,8 @@ const config = {
     'react/display-name': 'off', // TODO: Maybe enable
     'react/self-closing-comp': ['error', { component: true, html: true }],
 
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true /* vite */ }],
+
     '@typescript-eslint/no-empty-function': 'off', // Allow empty reducers for saga
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
@@ -77,7 +81,7 @@ const config = {
   overrides: [
     {
       files: ['**/*.ts?(x)'],
-      rules: { 'prettier/prettier': 'warn' },
+      rules: { 'prettier/prettier': process.env.CI ? 'error' : 'warn' },
     },
     {
       files: ['internals/**'],

.github/workflows/ci-lint.yml

@@ -77,7 +77,7 @@ jobs:
         if: always()
       - name: ESLint
         # Disallow warnings and always throw errors.
-        run: yarn lint --max-warnings 0
+        run: yarn lint
         # Always run this step so that all linting errors can be seen at once.
         if: always()
       - name: Validate TypeScript

package.json

@@ -98,6 +98,7 @@
     "eslint-plugin-prettier": "5.2.6",
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "events": "^3.1.0",
     "jsdom": "^26.1.0",
     "markdownlint-cli": "0.44.0",

src/app/components/ConsensusTransactionMethod/index.tsx

@@ -30,7 +30,7 @@ type MethodIconProps = {
   truncate?: boolean
 }
 
-export const colorMap = {
+const colorMap = {
   blue: {
     primary: COLORS.brandMedium,
     secondary: COLORS.brandLightBlue,

src/app/components/ErrorDisplay/index.tsx

@@ -102,7 +102,7 @@ const errorMap: Record<
   [AppErrors.InvalidVote]: t => ({ title: t('errors.invalidVote'), message: null }),
 }
 
-export const errorFormatter = (t: TFunction, error: ErrorPayload, scope: SearchScope | undefined) => {
+const errorFormatter = (t: TFunction, error: ErrorPayload, scope: SearchScope | undefined) => {
   return errorMap[error.code](t, error, scope)
 }
 

src/app/components/StatusIcon/index.tsx

@@ -29,7 +29,7 @@ const statusFgColor: Record<TxStatus, string> = {
   pending: COLORS.warningColor,
 }
 
-export const statusIcon: Record<TxStatus, ReactNode> = {
+const statusIcon: Record<TxStatus, ReactNode> = {
   unknown: <LockIcon color="inherit" fontSize="inherit" />,
   success: <CheckCircleIcon color="inherit" fontSize="inherit" />,
   partialsuccess: <CheckCircleIcon color="success" fontSize="inherit" />,

src/app/components/UptimeStatus/__tests__/index.test.tsx

@@ -18,7 +18,7 @@ const getUptimeItemColor = (value: number | undefined) => {
   return COLORS.errorIndicatorBackground
 }
 
-export const ensureTwelveElements = (inputArray: number[] = []) => {
+const ensureTwelveElements = (inputArray: number[] = []) => {
   return [...inputArray, ...new Array(12).fill(undefined)].slice(0, 12)
 }
 

src/app/components/UptimeStatus/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '../../utils/chart-utils'
 import { SearchScope } from '../../../types/searchScope'
 
-export const getActiveAccountsWindows = (duration: ChartDuration, windows: Windows[]) => {
+const getActiveAccountsWindows = (duration: ChartDuration, windows: Windows[]) => {
   switch (duration) {
     case ChartDuration.TODAY:
       return filterHourlyActiveAccounts(windows)
@@ -27,7 +27,7 @@ export const getActiveAccountsWindows = (duration: ChartDuration, windows: Windo
   }
 }
 
-export const getChartLabelFormatParams = (duration: ChartDuration) => {
+const getChartLabelFormatParams = (duration: ChartDuration) => {
   switch (duration) {
     case ChartDuration.TODAY:
       return {