try satisfy vite 7 linter

Author: VasilyStrelyaev

packages/devextreme-cli/src/applications/application.react.js

@@ -214,7 +214,7 @@ const addView = (pageName, options) => {
         return fileExtension === '.tsx' ? extension : fileExtension;
     };
     templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);
-    moduleUtils.insertExport(pathToPagesIndex(), componentName, `./${pageName}/${pageName}`);
+    moduleUtils.insertExport(pathToPagesIndex(), componentName, `./${pageName}/${pageName}`, 'Page');
     moduleUtils.insertImport(routingModulePath, './pages', componentName);
     insertItemToArray(routingModulePath, navigationData.route);
     insertItemToArray(navigationModulePath, navigationData.navigation);

packages/devextreme-cli/src/templates/react/application/src/App.tsx

@@ -2,7 +2,8 @@ import { HashRouter as Router } from 'react-router-dom';
 import './dx-styles.scss';
 import LoadPanel from 'devextreme-react/load-panel';
 import { NavigationProvider } from './contexts/navigation';
-import { AuthProvider, useAuth } from './contexts/auth';
+import { AuthProvider } from './contexts/auth';
+import { useAuth } from './contexts/auth-helpers';
 import { useScreenSizeClass } from './utils/media-query';
 import Content from './Content';
 import UnauthenticatedContent from './UnauthenticatedContent';

packages/devextreme-cli/src/templates/react/application/src/Content.tsx

@@ -1,6 +1,6 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import appInfo from './app-info';
-import routes from './app-routes';
+import { routes } from './app-routes';
 import { <%=layout%> as SideNavBarLayout } from './layouts';
 import { Footer } from './components';
 

packages/devextreme-cli/src/templates/react/application/src/app-routes.tsx

@@ -1,7 +1,7 @@
 import { HomePage, TasksPage, ProfilePage } from './pages';
-import { withNavigationWatcher } from './contexts/navigation';
+import { withNavigationWatcher } from './contexts/navigation-helpers';
 
-const routes = [<%=^empty%>
+const routeData = [<%=^empty%>
     {
         path: '/tasks',
         element: TasksPage
@@ -16,7 +16,7 @@ const routes = [<%=^empty%>
     }
 <%=/empty%>];
 
-export default routes.map(route => {
+export const routes = routeData.map(route => {
     return {
         ...route,
         element: withNavigationWatcher(route.element, route.path)

packages/devextreme-cli/src/templates/react/application/src/components/login-form/LoginForm.tsx

@@ -11,7 +11,7 @@ import Form, {
 import LoadIndicator from 'devextreme-react/load-indicator';
 import Button from 'devextreme-react/button';
 import notify from 'devextreme/ui/notify';
-import { useAuth } from '../../contexts/auth';
+import { useAuth } from '../../contexts/auth-helpers';
 
 import './LoginForm.scss';
 

packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useCallback, useMemo, useContext } from 'reac
 import { TreeView<%=#isTypeScript%>, type TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
 import * as events from 'devextreme-react/common/core/events';
 import { navigation } from '../../app-navigation';
-import { useNavigation } from '../../contexts/navigation';
+import { useNavigation } from '../../contexts/navigation-helpers';
 import { useScreenSize } from '../../utils/media-query';
 import './SideNavigationMenu.scss';
 <%=#isTypeScript%>import type { SideNavigationMenuProps } from '../../types';<%=/isTypeScript%>

packages/devextreme-cli/src/templates/react/application/src/components/user-panel/UserPanel.tsx

@@ -2,7 +2,7 @@ import { useMemo, useCallback } from 'react';
 import { useNavigate } from "react-router-dom";
 import DropDownButton from 'devextreme-react/drop-down-button';
 import List from 'devextreme-react/list';
-import { useAuth } from '../../contexts/auth';
+import { useAuth } from '../../contexts/auth-helpers';
 import './UserPanel.scss';
 <%=#isTypeScript%>import type { UserPanelProps } from '../../types';<%=/isTypeScript%>
 

packages/devextreme-cli/src/templates/react/application/src/contexts/auth-helpers.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { AuthContext } from './auth';
+
+const useAuth = () => useContext(AuthContext);
+
+export {
+  useAuth
+}

packages/devextreme-cli/src/templates/react/application/src/contexts/auth.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useEffect, createContext, useContext, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, createContext } from 'react';
 import { getUser, signIn as sendSignInRequest } from '../api/auth';
 <%=#isTypeScript%>import type { User, AuthContextType } from '../types';<%=/isTypeScript%>
 
+const AuthContext = createContext<%=#isTypeScript%><AuthContextType><%=/isTypeScript%>({ loading: false }<%=#isTypeScript%> as AuthContextType<%=/isTypeScript%>);
+
 function AuthProvider(props<%=#isTypeScript%>: React.PropsWithChildren<unknown><%=/isTypeScript%>) {
   const [user, setUser] = useState<%=#isTypeScript%><User><%=/isTypeScript%>();
   const [loading, setLoading] = useState(true);
@@ -36,7 +38,7 @@ function AuthProvider(props<%=#isTypeScript%>: React.PropsWithChildren<unknown><
   );
 }
 
-const AuthContext = createContext<%=#isTypeScript%><AuthContextType><%=/isTypeScript%>({ loading: false }<%=#isTypeScript%> as AuthContextType<%=/isTypeScript%>);
-const useAuth = () => useContext(AuthContext);
-
-export { AuthProvider, useAuth }
+export {
+  AuthProvider,
+  AuthContext,
+};

packages/devextreme-cli/src/templates/react/application/src/contexts/navigation-helpers.ts

@@ -0,0 +1,22 @@
+import React, { useContext, useEffect } from 'react';
+import { NavigationContext } from './navigation';
+
+const useNavigation = () => useContext(NavigationContext);
+
+function withNavigationWatcher(Component<%=#isTypeScript%>: React.ElementType<%=/isTypeScript%>, path<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  const WrappedComponent = function (props<%=#isTypeScript%>: Record<string, unknown><%=/isTypeScript%>) {
+    const { setNavigationData } = useNavigation();
+
+    useEffect(() => {
+      setNavigationData<%=#isTypeScript%>!<%=/isTypeScript%>({ currentPath: path });
+    }, [setNavigationData]);
+
+    return <Component {...props} />;
+  }
+  return <WrappedComponent />;
+}
+
+export {
+  useNavigation,
+  withNavigationWatcher
+}