devextreme-cli 1.11.0-alpha.0 → 1.11.0

package/src/templates/react/sample-pages/home/home.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './home.scss';
 
-export default function Home() {
+export function Home() {
   return (
     <React.Fragment>
       <h2 className={'content-block'}>Home</h2>

package/src/templates/react/sample-pages/index.tsx

@@ -1,3 +1,3 @@
-export { default as HomePage } from './home/home';
-export { default as ProfilePage } from './profile/profile';
-export { default as TasksPage } from './tasks/tasks';
+export { Home as HomePage } from './home/home';
+export { Profile as ProfilePage } from './profile/profile';
+export { Tasks as TasksPage } from './tasks/tasks';

package/src/templates/react/sample-pages/profile/profile.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import './profile.scss';
 import Form from 'devextreme-react/form';
 
-export default function Profile() {
+export function Profile() {
   const [notes, setNotes] = useState(
     'Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you`ve not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.'
   );

package/src/templates/react/sample-pages/tasks/tasks.tsx

@@ -9,7 +9,7 @@ import DataGrid, {
 } from 'devextreme-react/data-grid';
 import './tasks.scss';
 
-export default function Task() {
+export function Tasks() {
   return (
     <React.Fragment>
       <h2>Tasks</h2>

package/src/templates/vue-v3/application/eslint.config.js

@@ -0,0 +1,32 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+
+export default defineConfig([
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+
+  {
+    name: 'disable-unused-vars-in-vue',
+    files: ['**/*.vue'],
+    rules: {
+      'no-unused-vars': 'off',
+    },
+  },
+])

package/src/templates/vue-v3/application/src/App.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import AppFooter from "./components/app-footer";
+import AppFooter from "./components/app-footer.vue";
 import { sizes, subscribe, unsubscribe } from "./utils/media-query";
 import {
   getCurrentInstance,

package/src/templates/vue-v3/application/src/components/header-toolbar.vue

@@ -52,7 +52,7 @@ import auth from "../auth";
 import { useRouter, useRoute } from 'vue-router';
 import { ref } from 'vue';
 
-import UserPanel from "./user-panel";
+import UserPanel from "./user-panel.vue";
 import ThemeSwitcher from './theme-switcher.vue';
 
 export default {
@@ -143,7 +143,7 @@ header {
 }
 
 .dx-theme-generic {
-  .dx-toolbar {
+  .header-toolbar {
     padding: 10px 0;
   }
 

package/src/templates/vue-v3/application/src/dx-styles.scss

@@ -40,12 +40,13 @@ $side-panel-min-width: 60px;
     margin-top: 20px;
   }
 
+
   .responsive-paddings {
     padding: 20px;
+  }
 
-    .screen-large & {
-      padding: 40px;
-    }
+  .screen-large .responsive-paddings {
+    padding: 40px;
   }
 
   .dx-card.wide-card {

package/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue

@@ -57,8 +57,8 @@ import DxDrawer from "devextreme-vue/drawer";
 import DxScrollView from "devextreme-vue/scroll-view";
 import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
 
-import HeaderToolbar from "../components/header-toolbar";
-import SideNavMenu from "../components/side-nav-menu";
+import HeaderToolbar from "../components/header-toolbar.vue";
+import SideNavMenu from "../components/side-nav-menu.vue";
 import menuItems from "../app-navigation";
 import { ref, watch, computed } from 'vue';
 import { useRoute } from 'vue-router';

package/src/templates/vue-v3/application/src/layouts/side-nav-outer-toolbar.vue

@@ -39,8 +39,8 @@ import DxDrawer from "devextreme-vue/drawer";
 import DxScrollView from "devextreme-vue/scroll-view";
 
 import menuItems from "../app-navigation";
-import HeaderToolbar from "../components/header-toolbar";
-import SideNavMenu from "../components/side-nav-menu";
+import HeaderToolbar from "../components/header-toolbar.vue";
+import SideNavMenu from "../components/side-nav-menu.vue";
 import { computed, ref, watch} from 'vue';
 import { useRoute } from 'vue-router';
 

package/src/templates/vue-v3/application/src/main.js

@@ -2,7 +2,7 @@ import { createApp }  from "vue";
 import router from "./router";
 import themes from "devextreme/ui/themes";
 
-import App from "./App";
+import App from "./App.vue";
 import appInfo from "./app-info";
 
 themes.initialized(() => {

package/src/templates/vue-v3/application/src/router.js

@@ -1,11 +1,11 @@
 import auth from "./auth";
 import { createRouter, createWebHashHistory } from "vue-router";
 
-<%=^empty%>import Home from "./views/home-page";
-import Profile from "./views/profile-page";
-import Tasks from "./views/tasks-page";
-<%=/empty%>import defaultLayout from "./layouts/<%=layout%>";
-import simpleLayout from "./layouts/single-card";
+<%=^empty%>import Home from "./views/home-page.vue";
+import Profile from "./views/profile-page.vue";
+import Tasks from "./views/tasks-page.vue";
+<%=/empty%>import defaultLayout from "./layouts/<%=layout%>.vue";
+import simpleLayout from "./layouts/single-card.vue";
 
 function loadView(view) {
   return () => import (/* webpackChunkName: "login" */ `./views/${view}.vue`)

package/src/utility/latest-versions.js

@@ -1,9 +1,12 @@
 const packageJson = require('../../package.json');
 module.exports = {
-    'devextreme': '25.1.1-alpha',
-    'devextreme-react': '25.1.1-alpha',
-    'devextreme-vue': '25.1.1-alpha',
-    'create-vite': '6.3.1',
+    'devextreme': '25.1.3',
+    'devextreme-react': '25.1.3',
+    'devextreme-vue': '25.1.3',
+    'create-vite': '7.0.0',
+    'create-vue': '3.17.0',
+    'create-next-app': '15.3.4',
+    'jose': '6.0.11',
     'devextreme-cli': packageJson.version,
     'devextreme-schematics': 'latest'
 };

package/src/utility/module.js

@@ -11,23 +11,31 @@ const addImportValueToExisting = (fileContent, importName, index) => {
 };
 
 const insertImport = (filePath, moduleName, importName, isDefault) => {
-    const fileContent = fs.readFileSync(filePath).toString();
+    const hasUseClientRegExp = /^\s*['"]use client['"];?\s*\n*/;
+    let fileContent = fs.readFileSync(filePath).toString();
+    const hasUseClient = hasUseClientRegExp.test(fileContent);
+    const useClientStr = hasUseClient ? '\'use client\';\n' : '';
+
+    if(hasUseClient) {
+        fileContent = fileContent.replace(hasUseClientRegExp, '');
+    }
+
     const indexEndOfImport = findImportModule(fileContent, moduleName);
 
     if(indexEndOfImport !== -1) {
         fs.writeFileSync(filePath, addImportValueToExisting(fileContent, importName, indexEndOfImport));
     } else if(importName) {
         const importValue = isDefault ? importName : `{ ${importName} }`;
-        fs.writeFileSync(filePath, `import ${importValue} from \'${moduleName}\';\n${fileContent}`);
+        fs.writeFileSync(filePath, `${useClientStr}import ${importValue} from \'${moduleName}\';\n${fileContent}`);
     } else {
-        fs.writeFileSync(filePath, `import \'${moduleName}\';\n${fileContent}`);
+        fs.writeFileSync(filePath, `${useClientStr}import \'${moduleName}\';\n${fileContent}`);
     }
 };
 
-const insertExport = (filePath, exportName, modulePath) => {
+const insertExport = (filePath, exportName, modulePath, importName = 'default') => {
     const fileContent = fs.readFileSync(filePath).toString();
 
-    fs.writeFileSync(filePath, `${fileContent}export { default as ${exportName} } from \'${modulePath}\';\n`);
+    fs.writeFileSync(filePath, `${fileContent}export { ${importName} as ${exportName} } from \'${modulePath}\';\n`);
 };
 
 module.exports = {

package/src/utility/prompts/react-app-type.js

@@ -0,0 +1,17 @@
+const prompts = require('./prompts');
+
+const choices = [
+    { value: 'vite', title: 'React+Vite' },
+    { value: 'nextjs', title: 'Next.js-based' }
+];
+
+const question = {
+    message: 'Specify the desired React application type:',
+    choices: choices
+};
+
+const getReactAppType = async(defaultValue) => {
+    return await prompts(question, choices, defaultValue);
+};
+
+module.exports = getReactAppType;

package/src/utility/run-command.js

@@ -17,8 +17,16 @@ module.exports = function(commandName, args = [], customConfig = {}) {
 
     console.log(`> ${command} ${args.join(' ')}`);
 
+    const proc = spawn(command, args, config);
+
     return new Promise((resolve, reject) => {
-        spawn(command, args, config)
-            .on('exit', (code) => code ? reject(code) : resolve());
+        proc.on('exit', (code) => {
+            code ? reject(code) : resolve({ proc });
+        });
+
+        if(config.detached) {
+            proc.unref();
+            resolve({ proc });
+        }
     });
 };

package/src/utility/template-creator.js

@@ -7,14 +7,18 @@ const Mustache = require('mustache');
 const applyTemplateToFile = (filePath, templateOptions) => {
     const tags = ['<%=', '%>'];
     const fileContent = fs.readFileSync(filePath);
-    const content = Mustache.render(fileContent.toString(), templateOptions, {}, tags);
 
-    return content;
+    if(fileContent.includes(tags[0])) {
+        return Mustache.render(fileContent.toString(), templateOptions, {}, tags);
+    }
+
+    return fileContent;
 };
 
-const addPageToApp = (pageName, pageDir, templatePagesPath, getCorrectExtension) => {
+const addPageToApp = (pageName, pageDir, templatePagesPath, getCorrectExtension, { getPageFileName = () => pageName } = {}) => {
     fs.readdirSync(templatePagesPath).forEach((pageItem) => {
-        const pagePath = path.join(pageDir, `${pageName}${getCorrectExtension(extname(pageItem))}`);
+        const pagePath = path.join(pageDir, `${getPageFileName(pageName, pageItem)}${getCorrectExtension(extname(pageItem))}`);
+
         if(fs.existsSync(pagePath)) {
             console.error('The page already exists');
             process.exit();

package/src/templates/vue-v3/application/vue.config.js

@@ -1 +0,0 @@
-module.exports = {};