Merge branch 'master' of https://github.com/DevExpress/devextreme-cli

# Conflicts: # lerna.json # packages/devextreme-cli/package-lock.json # packages/devextreme-cli/package.json # packages/devextreme-schematics/package-lock.json # packages/devextreme-schematics/package.json
DevExpress · Jul 19, 2024 · c42e900 · c42e900
2 parents cf43216 + 755ad92
commit c42e900
Show file tree

Hide file tree

Showing 18 changed files with 59 additions and 34 deletions.
diff --git a/.github/workflows/applications.yml b/.github/workflows/applications.yml
@@ -53,6 +53,11 @@ jobs:
       run: npm run create-template -- -- -e ${{ matrix.APPROACH }} ${{ env.TOOLING_VERSION_PARAM }}
       timeout-minutes: 30
 
+    - name: Install Internal Packages
+      uses: DevExpress/github-actions/install-internal-package@main
+      with:
+        working-directory: packages/devextreme-cli/testing/sandbox/${{ matrix.APPROACH }}/my-app
+
     - name: Lint created application
       if: ${{ matrix.OS != 'windows-latest' }}
       run: npm run lint-template -- -- -e ${{ matrix.APPROACH }} ${{ env.TOOLING_VERSION_PARAM }}

diff --git a/lerna.json b/lerna.json
@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.6.9"
+  "version": "1.7.0"
 }
diff --git a/packages/devextreme-cli/package-lock.json b/packages/devextreme-cli/package-lock.json
diff --git a/packages/devextreme-cli/package.json b/packages/devextreme-cli/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"
   },

diff --git a/packages/devextreme-cli/src/applications/application.angular.js b/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);
@@ -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);

diff --git a/...rc/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.tsx b/...rc/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;
     }

diff --git a/packages/devextreme-cli/src/templates/react/application/src/index.tsx b/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();
diff --git a/...templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.tsx b/...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);

diff --git a/...templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.tsx b/...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);

diff --git a/packages/devextreme-cli/src/utility/latest-versions.js b/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'
 };
diff --git a/packages/devextreme-cli/src/utility/ng-version.js b/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);
 };
 

diff --git a/packages/devextreme-schematics/package-lock.json b/packages/devextreme-schematics/package-lock.json
diff --git a/packages/devextreme-schematics/package.json b/packages/devextreme-schematics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-schematics",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "description": "DevExtreme schematics",
   "scripts": {
     "build": "tsc -p tsconfig.json",

diff --git a/packages/devextreme-schematics/src/add-app-template/schema.json b/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",

diff --git a/packages/devextreme-schematics/src/add-layout/index.ts b/packages/devextreme-schematics/src/add-layout/index.ts
@@ -181,6 +181,7 @@ function updateAppModule(host: Tree, sourcePath: string) {
   };
 
   const rules = [
+    modifyFileRule(appModulePath, importSetter('DxHttpModule', 'devextreme-angular/http')),
     modifyFileRule(appModulePath, importSetter('SideNavOuterToolbarModule', './layouts')),
     modifyFileRule(appModulePath, importSetter('SideNavInnerToolbarModule', './layouts')),
     modifyFileRule(appModulePath, importSetter('SingleCardModule', './layouts')),

diff --git a/packages/devextreme-schematics/src/add-layout/index_spec.ts b/packages/devextreme-schematics/src/add-layout/index_spec.ts
@@ -99,6 +99,7 @@ describe('layout', () => {
     expect(styles[2]).toBe('src/themes/generated/theme.additional.css');
 
     const moduleContent = tree.readContent('/src/app/app.module.ts');
+    expect(moduleContent).toContain('import { DxHttpModule }');
     expect(moduleContent)
       .toContain('import { SideNavOuterToolbarModule, SideNavInnerToolbarModule, SingleCardModule }');
     expect(moduleContent)

diff --git a/packages/devextreme-schematics/src/install/schema.json b/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",

diff --git a/packages/devextreme-schematics/src/utility/latest-versions.ts b/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'
 };