Update CLI to use version 24.1 (#893)

Author: tomodasheesh

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

@@ -40,9 +40,10 @@ async function runNgCommand(commandArguments, commandOptions, commandConfig) {
     const hasNg = await hasSutableNgCli();
     const toolingVersion = extractToolingVersion(commandOptions);
     const npmCommandName = hasNg && !toolingVersion ? 'ng' : 'npx';
+    const [minCliLtsVersion] = minNgCliVersion.version.split('.');
     const ngCommandArguments = hasNg && !toolingVersion
         ? []
-        : ['-p', '@angular/cli@v15-lts', 'ng'];
+        : ['-p', `@angular/cli@v${minCliLtsVersion}-lts`, 'ng'];
 
     ngCommandArguments.push(...commandArguments);
     return runCommand(npmCommandName, ngCommandArguments, commandConfig);

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useCallback, useMemo } from 'react';
-import TreeView from 'devextreme-react/tree-view';
+import { TreeView<%=#isTypeScript%>, TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';
@@ -32,7 +32,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
 
   const { navigationData: { currentPath } } = useNavigation();
 
-  const treeViewRef = useRef<%=#isTypeScript%><TreeView><%=/isTypeScript%>(null);
+  const treeViewRef = useRef<%=#isTypeScript%><TreeViewRef><%=/isTypeScript%>(null);
   const wrapperRef = useRef<%=#isTypeScript%><HTMLDivElement><%=/isTypeScript%>();
   const getWrapperRef = useCallback((element<%=#isTypeScript%>: HTMLDivElement<%=/isTypeScript%>) => {
     const prevElement = wrapperRef.current;
@@ -47,7 +47,7 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
   }, [openMenu]);
 
   useEffect(() => {
-    const treeView = treeViewRef.current && treeViewRef.current.instance;
+    const treeView = treeViewRef.current && treeViewRef.current.instance();
     if (!treeView) {
       return;
     }

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

@@ -0,0 +1,16 @@
+import './polyfills';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root')<%=#isTypeScript%> as HTMLElement<%=/isTypeScript%>
+);
+root.render(<App />);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.tsx

@@ -1,6 +1,6 @@
 import Button from 'devextreme-react/button';
 import Drawer from 'devextreme-react/drawer';
-import ScrollView from 'devextreme-react/scroll-view';
+import { ScrollView<%=#isTypeScript%>, ScrollViewRef<%=/isTypeScript%> } from 'devextreme-react/scroll-view';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import React, { useState, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router';
@@ -14,7 +14,7 @@ import { useMenuPatch } from '../../utils/patches';
 <%=#isTypeScript%>import { ButtonTypes } from 'devextreme-react/button';<%=/isTypeScript%>
 
 export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
-  const scrollViewRef = useRef<%=#isTypeScript%><ScrollView><%=/isTypeScript%>(null);
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollViewRef><%=/isTypeScript%>(null);
   const navigate = useNavigate();
   const { isXSmall, isLarge } = useScreenSize();
   const [patchCssClass, onMenuReady] = useMenuPatch();
@@ -55,7 +55,7 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
     }
 
     navigate(itemData.path);
-    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance().scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);

packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.tsx

@@ -1,5 +1,5 @@
 import Drawer from 'devextreme-react/drawer';
-import ScrollView from 'devextreme-react/scroll-view';
+import { ScrollView<%=#isTypeScript%>, ScrollViewRef<%=/isTypeScript%> } from 'devextreme-react/scroll-view';
 import React, { useState, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router';
 import { Header, SideNavigationMenu, Footer } from '../../components';
@@ -12,7 +12,7 @@ import { useMenuPatch } from '../../utils/patches';
 <%=#isTypeScript%>import type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
 
 export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
-  const scrollViewRef = useRef<%=#isTypeScript%><ScrollView><%=/isTypeScript%>(null);
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollViewRef><%=/isTypeScript%>(null);
   const navigate = useNavigate();
   const { isXSmall, isLarge } = useScreenSize();
   const [patchCssClass, onMenuReady] = useMenuPatch();
@@ -53,7 +53,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
     }
 
     navigate(itemData.path);
-    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance().scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);

packages/devextreme-cli/src/utility/latest-versions.js

@@ -1,8 +1,8 @@
 const packageJson = require('../../package.json');
 module.exports = {
-    'devextreme': '23.2.6',
-    'devextreme-react': '23.2.6',
-    'devextreme-vue': '23.2.6',
+    'devextreme': '24.1.3',
+    'devextreme-react': '24.1.3',
+    'devextreme-vue': '24.1.3',
     'devextreme-cli': packageJson.version,
     'devextreme-schematics': 'latest'
 };

packages/devextreme-cli/src/utility/ng-version.js

@@ -15,7 +15,7 @@ const getLocalNgVersion = () => {
 };
 
 const getPublicNgVersion = () => {
-    const version = execSync('npm view @angular/cli@v15-lts version').toString();
+    const version = execSync('npm view @angular/cli@v16-lts version').toString();
     return new semver(version);
 };
 

packages/devextreme-schematics/src/add-app-template/schema.json

@@ -39,7 +39,7 @@
     "dxversion": {
       "type": "string",
       "description": "The DevExtreme version",
-      "default": "23.2.6"
+      "default": "24.1.3"
     },
     "globalNgCliVersion": {
       "type":"string",

packages/devextreme-schematics/src/install/schema.json

@@ -7,7 +7,7 @@
     "dxversion": {
       "type": "string",
       "description": "The DevExtreme version",
-      "default": "23.2.6"
+      "default": "24.1.3"
     },
     "project": {
       "type": "string",

packages/devextreme-schematics/src/utility/latest-versions.ts

@@ -1,6 +1,6 @@
 // TODO: implement
 export const latestVersions = {
-  'devextreme': '23.2.6',
-  'devextreme-angular': '23.2.6',
+  'devextreme': '24.1.3',
+  'devextreme-angular': '24.1.3',
   'devextreme-cli': 'latest'
 };