devextreme-cli 1.6.9 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -43,7 +43,7 @@
     "minimist": "^1.2.8",
     "mustache": "^3.2.1",
     "prompts": "^2.4.2",
-    "sass": "^1.71.0",
+    "sass": "^1.77.6",
     "semver": "^5.7.2",
     "strip-bom": "^4.0.0"
   },
@@ -72,5 +72,5 @@
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "0c30efbf9951768497b5b4cb5b27ddab08f1f49d"
+  "gitHead": "5289a6c9aa525ea566b22a1e21a9782e434395f8"
 }

package/src/applications/application.angular.js

@@ -10,7 +10,7 @@ const latestVersions = require('../utility/latest-versions');
 const { extractToolingVersion, toolingVersionOptionName } = require('../utility/extract-tooling-version');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
-const minNgCliVersion = new semver('12.0.0');
+const minNgCliVersion = new semver('16.0.0');
 const ngCliWithStandalone = new semver('17.0.0');
 
 async function runSchematicCommand(schematicCommand, options, evaluatingOptions) {
@@ -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);
@@ -88,7 +89,7 @@ const create = async(appName, options) => {
     ];
 
     if(ngCliWithStandalone.compare(currentNgVersion) <= 0) {
-        commandArguments.push('--standalone=false');
+        commandArguments.push('--standalone=false', '--ssr=false');
     }
 
     await runNgCommand(commandArguments, options);
@@ -128,7 +129,8 @@ const changeMainTs = (appPath) => {
     moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
 
     const fileContent = fs.readFileSync(filePath).toString();
-    const firstChaptStr = 'platformBrowserDynamic().bootstrapModule(AppModule)';
+    const bootstrapPattern = /platformBrowserDynamic\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
+    const firstChaptStr = fileContent.match(bootstrapPattern)[0];
     const lastChaptStr = '.catch(err => console.error(err));';
 
     fs.writeFileSync(

package/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;
     }

package/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();

package/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);

package/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);

package/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'
 };

package/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);
 };