devextreme-cli 1.5.2 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -30,7 +30,7 @@
     "test-template": "node ./testing/testing.js",
     "test-dev": "cross-env TEST_MODE=dev jest",
     "test-themebuilder": "jest --config=./jest-themebuilder.config.js --runInBand",
-    "docker:build": "docker build --rm -f \"testing/docker/Dockerfile\" -t devextreme-cli:latest \"testing/docker\"",
+    "docker:build": "docker build --rm -f \"testing/docker/Dockerfile\" -t devextreme-cli:latest \"testing/docker\" --progress=plain",
     "docker:run": "docker run --rm -d  -p 9222:9222/tcp devextreme-cli:latest"
   },
   "author": "Developer Express Inc.",
@@ -49,8 +49,8 @@
     "strip-bom": "^4.0.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "babel-eslint": "^10.1.0",
     "cross-env": "^5.2.1",
     "eslint": "^7.32.0",
@@ -62,17 +62,16 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^1.1.5",
-    "eslint-plugin-vue": "^7.0.0-beta.2",
+    "eslint-plugin-vue": "^7.20.0",
     "eslint-stylish": "^0.2.0",
-    "jest": "^27.3.1",
-    "jest-image-snapshot": "^5.1.1",
+    "jest": "^29.5.0",
+    "jest-image-snapshot": "^6.1.0",
     "prettier": "^2.6.2",
-    "puppeteer": "^2.1.1",
-    "rimraf": "^2.6.3",
-    "tree-kill": "^1.2.1",
-    "tree-kill-promise": "^1.0.3",
+    "rimraf": "^2.7.1",
+    "tree-kill": "^1.2.2",
+    "tree-kill-promise": "^1.0.12",
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "5ee9255ab8afb5d38770b2cc74c798c5c549f629"
+  "gitHead": "a18bca062ee354ea47ad90df2c18e87e03d0db7e"
 }

package/src/applications/application.vue.js

@@ -56,7 +56,7 @@ const preparePackageJsonForTemplate = (appPath, appName, version) => {
 async function createVueApp(name, templateOptions) {
     const { version } = templateOptions;
     const toolingVersion = extractToolingVersion(templateOptions);
-    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name];
+    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/'];
 
     if(version === 'v2') {
         argList.push('-p "Default (Vue 2)"');

package/src/templates/react/application/src/components/change-password-form/ChangePasswordForm.tsx

@@ -10,7 +10,7 @@ import Form, {
 } from 'devextreme-react/form';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
-<%=#isTypeScript%>import { ValidationType } from '../../types';<%=/isTypeScript%>
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
 import { changePassword } from '../../api/auth';
 
 export default function ChangePasswordForm() {
@@ -35,7 +35,7 @@ export default function ChangePasswordForm() {
   }, [navigate, recoveryCode]);
 
   const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationType<%=/isTypeScript%>) => value === formData.current.password,
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
     []
   );
 

package/src/templates/react/application/src/components/create-account-form/CreateAccountForm.tsx

@@ -12,7 +12,7 @@ import Form, {
 import notify from 'devextreme/ui/notify';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import { createAccount } from '../../api/auth';
-<%=#isTypeScript%>import { ValidationType } from '../../types';<%=/isTypeScript%>
+<%=#isTypeScript%>import { ValidationCallbackData } from 'devextreme-react/common';<%=/isTypeScript%>
 import './CreateAccountForm.scss';
 
 export default function CreateAccountForm() {
@@ -36,7 +36,7 @@ export default function CreateAccountForm() {
   }, [navigate]);
 
   const confirmPassword = useCallback(
-    ({ value }<%=#isTypeScript%>: ValidationType<%=/isTypeScript%>) => value === formData.current.password,
+    ({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
     []
   );
 

package/src/templates/react/application/src/components/user-panel/UserPanel.tsx

@@ -47,7 +47,7 @@ export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps
           width={210}
           cssClass={'user-menu'}
         >
-          <Position my={'top center'} at={'bottom center'} />
+          <Position my={{ x: 'center', y: 'top' }} at={{ x: 'center', y: 'bottom' }} />
         </ContextMenu>
       )}
       {menuMode === 'list' && (

package/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.tsx

@@ -9,9 +9,9 @@ import './side-nav-inner-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
 import { useMenuPatch } from '../../utils/patches';
-<%=#isTypeScript%>import { ItemClickEvent } from 'devextreme/ui/tree_view';<%=/isTypeScript%>
+<%=#isTypeScript%>import { TreeViewTypes } from 'devextreme-react/tree-view';<%=/isTypeScript%>
 <%=#isTypeScript%>import type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
-<%=#isTypeScript%>import { ClickEvent } from 'devextreme/ui/button';<%=/isTypeScript%>
+<%=#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);
@@ -22,7 +22,7 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
     isLarge ? MenuStatus.Opened : MenuStatus.Closed
   );
 
-  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ClickEvent<%=/isTypeScript%>) => {
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ButtonTypes.ClickEvent<%=/isTypeScript%>) => {
     setMenuStatus(
       prevMenuStatus => prevMenuStatus === MenuStatus.Closed
         ? MenuStatus.Opened
@@ -48,7 +48,7 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
     return menuStatus === MenuStatus.Closed ? true : false;
   }, [isLarge]);
 
-  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: TreeViewTypes.ItemClickEvent<%=/isTypeScript%>) => {
     if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
       event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
       return;

package/src/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.tsx

@@ -7,8 +7,8 @@ import './side-nav-outer-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
 import { useMenuPatch } from '../../utils/patches';
-<%=#isTypeScript%>import { ClickEvent } from 'devextreme/ui/button';<%=/isTypeScript%>
-<%=#isTypeScript%>import { ItemClickEvent } from 'devextreme/ui/tree_view';<%=/isTypeScript%>
+<%=#isTypeScript%>import { ButtonTypes } from 'devextreme-react/button';<%=/isTypeScript%>
+<%=#isTypeScript%>import { TreeViewTypes } from 'devextreme-react/tree-view';<%=/isTypeScript%>
 <%=#isTypeScript%>import type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
 
 export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
@@ -20,7 +20,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
     isLarge ? MenuStatus.Opened : MenuStatus.Closed
   );
 
-  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ClickEvent<%=/isTypeScript%>) => {
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ButtonTypes.ClickEvent<%=/isTypeScript%>) => {
     setMenuStatus(
       prevMenuStatus => prevMenuStatus === MenuStatus.Closed
         ? MenuStatus.Opened
@@ -46,7 +46,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
     return menuStatus === MenuStatus.Closed ? true : false;
   }, [isLarge]);
 
-  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: TreeViewTypes.ItemClickEvent<%=/isTypeScript%>) => {
     if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
       event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
       return;

package/src/templates/react/application/src/types.tsx

@@ -1,19 +1,18 @@
-import dxTreeView, { ItemClickEvent } from 'devextreme/ui/tree_view';
-import { ClickEvent } from 'devextreme/ui/button';
-import { EventInfo } from 'devextreme/events';
+import { TreeViewTypes } from 'devextreme-react/tree-view';
+import { ButtonTypes } from 'devextreme-react/button';
 import React from 'react';
 
 export interface HeaderProps {
     menuToggleEnabled: boolean;
     title?: string;
-    toggleMenu: (e: ClickEvent) => void;
+    toggleMenu: (e: ButtonTypes.ClickEvent) => void;
 }
 
 export interface SideNavigationMenuProps {
-    selectedItemChanged: (e: ItemClickEvent) => void;
+    selectedItemChanged: (e: TreeViewTypes.ItemClickEvent) => void;
     openMenu: (e: React.PointerEvent) => void;
     compactMode: boolean;
-    onMenuReady: (e: EventInfo<dxTreeView>) => void;
+    onMenuReady: (e: TreeViewTypes.ContentReadyEvent) => void;
 }
 
 export interface UserPanelProps {

package/src/templates/vue-v2/application/src/components/side-nav-menu.vue

@@ -20,17 +20,17 @@
 </template>
 
 <script>
-import DxTreeView from "devextreme-vue/ui/tree-view";
+import DxTreeView from 'devextreme-vue/tree-view';
 import { sizes } from '../utils/media-query';
 import navigation from '../app-navigation';
 
 const treeViewRef = "treeViewRef";
 const isLargeScreen = sizes()['screen-large'];
 const items = navigation.map((item) => {
-      if(item.path && !(/^\//.test(item.path))){ 
+      if(item.path && !(/^\//.test(item.path))){
         item.path = `/${item.path}`;
       }
-      return {...item, expanded: isLargeScreen} 
+      return {...item, expanded: isLargeScreen}
     });
 
 export default {

package/src/templates/vue-v3/application/src/components/side-nav-menu.vue

@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import DxTreeView from "devextreme-vue/ui/tree-view";
+import DxTreeView from 'devextreme-vue/tree-view';
 import { sizes } from '../utils/media-query';
 import navigation from '../app-navigation';
 import { onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router'; 
+import { useRoute, useRouter } from 'vue-router';
 
 export default {
   props: {
@@ -36,10 +36,10 @@ export default {
 
     const isLargeScreen = sizes()['screen-large'];
     const items = navigation.map((item) => {
-      if(item.path && !(/^\//.test(item.path))){ 
+      if(item.path && !(/^\//.test(item.path))){
         item.path = `/${item.path}`;
       }
-      return {...item, expanded: isLargeScreen} 
+      return {...item, expanded: isLargeScreen}
     });
 
     const treeViewRef = ref(null);
@@ -67,13 +67,13 @@ export default {
       treeViewRef.value.instance.expandItem(route.path);
     }
 
-    onMounted(() => { 
+    onMounted(() => {
       updateSelection();
       if (props.compactMode) {
         treeViewRef.value.instance.collapseAll();
       }
     });
-    
+
 
     watch(
       () => route.path,
@@ -81,7 +81,7 @@ export default {
         updateSelection();
       }
     );
-    
+
     watch(
       () => props.compactMode,
       () => {

package/src/themebuider.js

@@ -131,7 +131,7 @@ const installThemeBuilder = async version => {
         cwd: process.cwd(),
         stdio: 'inherit'
     }, {
-        npm: ['--no-save', '--fund=false', '--package-lock=false', '--omit=dev', '--omit=optional']
+        npm: ['--no-save', '--fund=false', '--package-lock=false', '--omit=dev']
     });
 };
 

package/src/utility/latest-versions.js

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