Fix vite HMR whith multi exports in jsx or tsx files (#74)

Signed-off-by: achour94 <berrahmaachour@gmail.com>

Author: achour94

.eslintrc.json

@@ -5,8 +5,13 @@
         // node_modules is implicitly always ignored
         "build"
     ],
+    "plugins": ["react-refresh"],
     "rules": {
         "prettier/prettier": "warn",
-        "curly": "error"
+        "curly": "error",
+        "react-refresh/only-export-components": [
+            "error",
+            { "allowConstantExport": true }
+        ]
     }
 }

package-lock.json

@@ -81,6 +81,7 @@
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.19",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",

package.json

@@ -27,8 +27,8 @@ import GridAdminLogoLight from '../../images/GridAdmin_logo_light.svg?react';
 import GridAdminLogoDark from '../../images/GridAdmin_logo_dark.svg?react';
 import AppPackage from '../../../package.json';
 import { AppState } from '../../redux/reducer';
-import { MainPaths } from '../../routes';
 import { AppDispatch } from '../../redux/store';
+import { MainPaths } from '../../routes/utils';
 
 const tabs = new Map<MainPaths, ReactElement>([
     [

src/components/App/app-top-bar.tsx

@@ -17,7 +17,7 @@ import { store } from '../../redux/store';
 import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { SnackbarProvider } from '@gridsuite/commons-ui';
 import { CssBaseline } from '@mui/material';
-import { appRoutes } from '../../routes';
+import { appRoutes } from '../../routes/utils';
 
 let container: HTMLElement | null = null;
 

src/components/App/app.test.tsx

@@ -24,7 +24,7 @@ import { UserAdminSrv, UserProfile } from '../../../services';
 import { UUID } from 'crypto';
 
 // TODO remove FetchStatus when exported in commons-ui (available soon)
-export enum FetchStatus {
+enum FetchStatus {
     IDLE = 'IDLE',
     FETCHING = 'FETCHING',
     FETCH_SUCCESS = 'FETCH_SUCCESS',

src/pages/profiles/modification/profile-modification-dialog.tsx

@@ -6,11 +6,9 @@
  */
 
 import { FunctionComponent, PropsWithChildren, useEffect, useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { AuthenticationRouter, getPreLoginPath, initializeAuthenticationProd } from '@gridsuite/commons-ui';
+import { AuthenticationRouter, initializeAuthenticationProd } from '@gridsuite/commons-ui';
 import {
     createBrowserRouter,
-    Navigate,
     Outlet,
     RouteObject,
     RouterProvider,
@@ -22,67 +20,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from '../redux/reducer';
 import { AppsMetadataSrv, UserAdminSrv } from '../services';
 import { App } from '../components/App';
-import { Profiles, Users, Groups } from '../pages';
-import ErrorPage from './ErrorPage';
 import { updateUserManagerDestructured } from '../redux/actions';
-import HomePage from './HomePage';
 import { getErrorMessage } from '../utils/error';
 import { AppDispatch } from '../redux/store';
-
-export enum MainPaths {
-    users = 'users',
-    profiles = 'profiles',
-    groups = 'groups',
-}
-
-export function appRoutes(): RouteObject[] {
-    return [
-        {
-            path: '/',
-            errorElement: <ErrorPage />,
-            children: [
-                {
-                    index: true,
-                    element: <HomePage />,
-                },
-                {
-                    path: `/${MainPaths.users}`,
-                    element: <Users />,
-                    handle: {
-                        appBar_tab: MainPaths.users,
-                    },
-                },
-                {
-                    path: `/${MainPaths.profiles}`,
-                    element: <Profiles />,
-                    handle: {
-                        appBar_tab: MainPaths.profiles,
-                    },
-                },
-                {
-                    path: `/${MainPaths.groups}`,
-                    element: <Groups />,
-                    handle: {
-                        appBar_tab: MainPaths.groups,
-                    },
-                },
-            ],
-        },
-        {
-            path: '/sign-in-callback',
-            element: <Navigate replace to={getPreLoginPath() || '/'} />,
-        },
-        {
-            path: '/logout-callback',
-            element: <FormattedMessage tagName="h1" id="logoutFailed" />,
-        },
-        {
-            path: '*',
-            element: <FormattedMessage tagName="h1" id="pageNotFound" />,
-            errorElement: <ErrorPage />,
-        },
-    ];
-}
+import { appRoutes } from './utils';
 
 const AuthRouter: FunctionComponent<{
     userManager: Parameters<typeof AuthenticationRouter>[0]['userManager'];

src/routes/router.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Navigate, RouteObject } from 'react-router-dom';
+import { Profiles, Users, Groups } from '../pages';
+import ErrorPage from './ErrorPage';
+import HomePage from './HomePage';
+import { getPreLoginPath } from '@gridsuite/commons-ui';
+import { FormattedMessage } from 'react-intl';
+
+export enum MainPaths {
+    users = 'users',
+    profiles = 'profiles',
+    groups = 'groups',
+}
+
+export function appRoutes(): RouteObject[] {
+    return [
+        {
+            path: '/',
+            errorElement: <ErrorPage />,
+            children: [
+                {
+                    index: true,
+                    element: <HomePage />,
+                },
+                {
+                    path: `/${MainPaths.users}`,
+                    element: <Users />,
+                    handle: {
+                        appBar_tab: MainPaths.users,
+                    },
+                },
+                {
+                    path: `/${MainPaths.profiles}`,
+                    element: <Profiles />,
+                    handle: {
+                        appBar_tab: MainPaths.profiles,
+                    },
+                },
+                {
+                    path: `/${MainPaths.groups}`,
+                    element: <Groups />,
+                    handle: {
+                        appBar_tab: MainPaths.groups,
+                    },
+                },
+            ],
+        },
+        {
+            path: '/sign-in-callback',
+            element: <Navigate replace to={getPreLoginPath() || '/'} />,
+        },
+        {
+            path: '/logout-callback',
+            element: <FormattedMessage tagName="h1" id="logoutFailed" />,
+        },
+        {
+            path: '*',
+            element: <FormattedMessage tagName="h1" id="pageNotFound" />,
+            errorElement: <ErrorPage />,
+        },
+    ];
+}