devextreme-cli 1.3.2 → 1.3.3

package/index.js

@@ -2,6 +2,7 @@
 const args = require('minimist')(process.argv.slice(2), {
     alias: { v: 'version' }
 });
+
 const commands = args['_'];
 delete args['_'];
 const themeBuilder = require('./src/themebuider');
@@ -34,9 +35,10 @@ if(args.help) {
     process.exit();
 }
 
-const run = (commands, options) => {
+
+const run = async(commands, options) => {
     if(application.isApplicationCommand(commands[0])) {
-        application.run(commands, options, devextremeConfig.read());
+        await application.run(commands, options, devextremeConfig.read());
     } else if(themeBuilder.isThemeBuilderCommand(commands[0])) {
         options.command = commands[0];
         themeBuilder.run(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -49,13 +49,16 @@
     "strip-bom": "^4.0.0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.0.1",
     "babel-eslint": "^10.1.0",
     "cross-env": "^5.2.0",
     "eslint": "^7.8.0",
     "eslint-config-angular": "^0.5.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-angular": "^4.0.1",
     "eslint-plugin-jest": "^22.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
     "eslint-plugin-unused-imports": "^1.1.5",
@@ -63,11 +66,13 @@
     "eslint-stylish": "^0.2.0",
     "jest": "^27.3.1",
     "jest-image-snapshot": "^4.5.0",
+    "prettier": "^2.6.2",
     "puppeteer": "^2.1.1",
     "rimraf": "^2.6.3",
     "tree-kill": "^1.2.1",
     "tree-kill-promise": "^1.0.3",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.2",
+    "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "bab9c1bd00964b2f33258bf0b5a5a68107b68fb4"
+  "gitHead": "023ac50deaac92bd44a283079f55491f4db30049"
 }

package/src/application.js

@@ -4,10 +4,10 @@ const vueApplication = require('./applications/application.vue');
 const printHelp = require('./help').printHelp;
 
 const isApplicationCommand = (command) => {
-    return [ 'new', 'add' ].indexOf(command) > -1;
+    return [ 'new', 'add' ].includes(command);
 };
 
-const run = (commands, options, devextremeConfig) => {
+const run = async(commands, options, devextremeConfig) => {
     if(!commands[1]) {
         console.error('Command is incomplete. Please specify parameters.');
         printHelp(commands[0]);
@@ -15,23 +15,23 @@ const run = (commands, options, devextremeConfig) => {
     }
 
     if(commands[0] === 'new') {
-        if(commands[1] === 'angular-app') {
-            angularApplication.create(commands[2] || 'my-app', options);
-            return;
-        }
-
-        if(commands[1] === 'react-app') {
-            reactApplication.create(commands[2] || 'my-app', options);
-            return;
-        }
+        const app = commands[1];
+        const appName = commands[2] || 'my-app';
 
-        if(commands[1] === 'vue-app') {
-            vueApplication.create(commands[2] || 'my-app', options);
-            return;
+        switch(app) {
+            case 'angular-app':
+                await angularApplication.create(appName, options);
+                return;
+            case 'react-app':
+                await reactApplication.create(appName, options);
+                return;
+            case 'vue-app':
+                await vueApplication.create(appName, options);
+                return;
+            default:
+                console.error(`The '${app}' application type is not valid`);
+                printHelp(commands[0]);
         }
-
-        console.error(`The '${commands[1]}' application type is not valid`);
-        printHelp(commands[0]);
     } else {
         if(commands[0] === 'add') {
             if(commands[1] === 'devextreme-angular') {

package/src/applications/application.angular.js

@@ -1,4 +1,4 @@
-const getLayoutInfo = require('../utility/prompts/layout').getLayoutInfo;
+const getLayoutInfo = require('../utility/prompts/layout');
 const path = require('path');
 const moduleWorker = require('../utility/module');
 const runCommand = require('../utility/run-command');
@@ -32,10 +32,14 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
 }
 
 async function runNgCommand(commandArguments, evaluatingOptions) {
-    const ngCommandArguments = await hasSutableNgCli() ? [] : ['-p', '@angular/cli'];
-
-    ngCommandArguments.push('ng', ...commandArguments);
-    return runCommand('npx', ngCommandArguments, evaluatingOptions);
+    const hasNg = await hasSutableNgCli();
+    const npmCommandName = hasNg ? 'ng' : 'npx';
+    const ngCommandArguments = hasNg
+        ? []
+        : ['-p', '@angular/cli@13.3.7', 'ng'];
+
+    ngCommandArguments.push(...commandArguments);
+    return runCommand(npmCommandName, ngCommandArguments, evaluatingOptions);
 }
 
 function localPackageExists(packageName) {
@@ -50,9 +54,24 @@ function localPackageExists(packageName) {
 
 function hasSutableNgCli() {
     return new Promise((resolve, reject) => {
+        if(globalNgCliVersion !== '') {
+            resolve(true);
+        }
+
         exec('ng v', (err, stdout, stderr) => {
-            const parsingResult = !stderr && parseNgCliVersion(stdout);
-            if(parsingResult && parsingResult.compare(minNgCliVersion) < 0) {
+            if(!!err) {
+                resolve(false);
+                return;
+            }
+
+            const parsingResult = parseNgCliVersion(stdout);
+            if(!parsingResult) {
+                resolve(false);
+            }
+
+            const isSupportVersion = parsingResult.compare(minNgCliVersion) >= 0
+                && parsingResult.compare(new semver('14.0.0')) < 0;
+            if(isSupportVersion) {
                 globalNgCliVersion = parsingResult.version;
                 resolve(true);
             } else {
@@ -70,7 +89,9 @@ const install = (options) => {
     runSchematicCommand('install', { ...options, globalNgCliVersion });
 };
 
-const create = (appName, options) => {
+const create = async(appName, options) => {
+    const layout = await getLayoutInfo(options.layout);
+
     const commandArguments = [
         'new',
         appName,
@@ -80,22 +101,18 @@ const create = (appName, options) => {
         '--skip-install=true',
     ];
 
-    getLayoutInfo(options.layout).then(layoutInfo => {
-        runNgCommand(commandArguments).then(() => {
-            const appPath = path.join(process.cwd(), appName);
+    await runNgCommand(commandArguments);
 
-            options.resolveConflicts = 'override';
-            options.updateBudgets = true;
-            options.layout = layoutInfo.layout;
-            addTemplate(appName, options, {
-                cwd: appPath
-            });
+    const appPath = path.join(process.cwd(), appName);
 
-            changeMainTs(appPath);
-        }).catch((e) => {
-            console.log(e);
-        });
+    options.resolveConflicts = 'override';
+    options.updateBudgets = true;
+    options.layout = layout;
+    addTemplate(appName, options, {
+        cwd: appPath
     });
+
+    changeMainTs(appPath);
 };
 
 const addTemplate = (appName, options, evaluatingOptions) => {

package/src/applications/application.react.js

@@ -1,7 +1,8 @@
 const runCommand = require('../utility/run-command');
 const path = require('path');
 const fs = require('fs');
-const getLayoutInfo = require('../utility/prompts/layout').getLayoutInfo;
+const getLayoutInfo = require('../utility/prompts/layout');
+const getTemplateTypeInfo = require('../utility/prompts/typescript');
 const templateCreator = require('../utility/template-creator');
 const packageManager = require('../utility/package-manager');
 const packageJsonUtils = require('../utility/package-json-utils');
@@ -9,25 +10,39 @@ const modifyJson = require('../utility/modify-json-file');
 const insertItemToArray = require('../utility/file-content').insertItemToArray;
 const moduleUtils = require('../utility/module');
 const stringUtils = require('../utility/string');
+const typescriptUtils = require('../utility/typescript-extension');
 const removeFile = require('../utility/file-operations').remove;
-const pathToPagesIndex = path.join(process.cwd(), 'src', 'pages', 'index.js');
 const latestVersions = require('../utility/latest-versions');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css',
     'devextreme/dist/css/dx.common.css'
 ];
 
-const preparePackageJsonForTemplate = (appPath, appName) => {
+const getExtension = (appPath) => {
+    return fs.existsSync(path.join(appPath, 'src', 'App.tsx')) ? '.tsx' : '.js';
+};
+
+const pathToPagesIndex = () => {
+    const extension = getExtension(process.cwd());
+    return path.join(process.cwd(), 'src', 'pages', `index${extension}`);
+};
+
+const preparePackageJsonForTemplate = (appPath, appName, isTypeScript) => {
     const dependencies = [
         { name: 'sass', version: '^1.34.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
-        { name: 'react-router-dom', version: '^5.0.0' },
+        { name: 'react-router-dom', version: '^6.3.0' },
     ];
     const scripts = [
         { name: 'build-themes', value: 'devextreme build' },
         { name: 'postinstall', value: 'npm run build-themes' }
     ];
 
+    if(isTypeScript) {
+        dependencies.push({ name: '@types/react-router-dom', version: '^5.1.5' });
+        dependencies.push({ name: '@types/react', version: '^17.0.39' });
+    }
+
     packageJsonUtils.addDependencies(appPath, dependencies);
     packageJsonUtils.updateScripts(appPath, scripts);
     packageJsonUtils.updateName(appPath, appName);
@@ -41,48 +56,66 @@ const updateJsonPropName = (path, name) => {
     });
 };
 
-const create = (appName, options) => {
-    const commandArguments = ['-p=create-react-app', 'create-react-app', appName];
+const create = async(appName, options) => {
+    const templateType = await getTemplateTypeInfo(options.template);
+    const layoutType = await getLayoutInfo(options.layout);
 
-    getLayoutInfo(options.layout).then((layoutInfo) => {
-        runCommand('npx', commandArguments).then(() => {
-            const appPath = path.join(process.cwd(), appName);
-            const humanizedName = stringUtils.humanize(appName);
-            const templateOptions = Object.assign({}, options, {
-                project: humanizedName,
-                layout: stringUtils.classify(layoutInfo.layout)
-            });
-            modifyIndexHtml(appPath, humanizedName);
-            addTemplate(appPath, appName, templateOptions);
-        });
+    const templateOptions = Object.assign({}, options, {
+        project: stringUtils.humanize(appName),
+        layout: stringUtils.classify(layoutType),
+        isTypeScript: typescriptUtils.isTypeScript(templateType)
     });
+
+    const commandArguments = ['-p=create-react-app', 'create-react-app', appName];
+    if(templateOptions.isTypeScript) {
+        commandArguments.push('--template typescript');
+    }
+
+    await runCommand('npx', commandArguments);
+
+    const appPath = path.join(process.cwd(), appName);
+
+    modifyIndexHtml(appPath, templateOptions.project);
+    addTemplate(appPath, appName, templateOptions);
 };
 
 const modifyIndexHtml = (appPath, appName) => {
     const indexHtmlPath = path.join(appPath, 'public', 'index.html');
-    let htmlContent = fs.readFileSync(indexHtmlPath).toString();
 
+    let htmlContent = fs.readFileSync(indexHtmlPath).toString();
     htmlContent = htmlContent.replace(/<title>(\w+\s*)+<\/title>/, `<title>${appName}<\/title>`);
     htmlContent = htmlContent.replace('<body>', '<body class="dx-viewport">');
+
     fs.writeFileSync(indexHtmlPath, htmlContent);
 };
 
+const getCorrectPath = (extension, pathToApp, isTypeScript) => {
+    return extension === '.ts' || extension === '.tsx' ? typescriptUtils.setFileExtension(pathToApp, isTypeScript) : pathToApp;
+};
+
 const addTemplate = (appPath, appName, templateOptions) => {
-    const templateSourcePath = path.join(__dirname, '..', 'templates', 'react', 'application');
+    const applicationTemplatePath = path.join(
+        templateCreator.getTempaltePath('react'),
+        'application'
+    );
+
     const manifestPath = path.join(appPath, 'public', 'manifest.json');
-    const indexPath = path.join(appPath, 'src', 'index.js');
+    const indexPath = path.join(appPath, 'src', templateOptions.isTypeScript ? 'index.tsx' : 'index.js');
+
     const styles = [
         './themes/generated/theme.additional.css',
         './themes/generated/theme.base.css',
         'devextreme/dist/css/dx.common.css'
     ];
 
-    templateCreator.moveTemplateFilesToProject(templateSourcePath, appPath, templateOptions);
+    templateCreator.moveTemplateFilesToProject(applicationTemplatePath, appPath, templateOptions, getCorrectPath);
     removeFile(path.join(appPath, 'src', 'App.css'));
+    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.js'));
     if(!templateOptions.empty) {
-        addSamplePages(appPath);
+        addSamplePages(appPath, templateOptions);
     }
-    preparePackageJsonForTemplate(appPath, appName);
+
+    preparePackageJsonForTemplate(appPath, appName, templateOptions.isTypeScript);
     updateJsonPropName(manifestPath, appName);
     addPolyfills(packageJsonUtils.getPackageJsonPath(), indexPath);
     install({}, appPath, styles);
@@ -90,7 +123,8 @@ const addTemplate = (appPath, appName, templateOptions) => {
 
 const install = (options, appPath, styles) => {
     appPath = appPath ? appPath : process.cwd();
-    const pathToMainComponent = path.join(appPath, 'src', 'App.js');
+
+    const pathToMainComponent = path.join(appPath, 'src', `App${getExtension(appPath)}`);
     addStylesToApp(pathToMainComponent, styles || defaultStyles);
     packageJsonUtils.addDevextreme(appPath, options.dxversion, 'react');
 
@@ -119,7 +153,7 @@ const getComponentPageName = (viewName) => {
 const getNavigationData = (viewName, componentName, icon) => {
     const pagePath = stringUtils.dasherize(viewName);
     return {
-        route: `\n  {\n    path: \'/${pagePath}\',\n    component: ${componentName}\n  }`,
+        route: `\n  {\n    path: \'/${pagePath}\',\n    element: ${componentName}\n  }`,
         navigation: `\n  {\n    text: \'${stringUtils.humanize(viewName)}\',\n    path: \'/${pagePath}\',\n    icon: \'${icon}\'\n  }`
     };
 };
@@ -130,7 +164,7 @@ const createPathToPage = (pageName) => {
 
     if(!fs.existsSync(pagesPath)) {
         fs.mkdirSync(pagesPath);
-        createPagesIndex();
+        fs.writeFileSync(pathToPagesIndex(), '');
     }
 
     if(!fs.existsSync(newPagePath)) {
@@ -140,27 +174,37 @@ const createPathToPage = (pageName) => {
     return newPagePath;
 };
 
-const createPagesIndex = () => {
-    fs.writeFileSync(pathToPagesIndex, '');
-};
+const addSamplePages = (appPath, templateOptions) => {
+    const samplePageTemplatePath = path.join(
+        templateCreator.getTempaltePath('react'),
+        'sample-pages'
+    );
 
-const addSamplePages = (appPath) => {
-    const templateSourcePath = path.join(__dirname, '..', 'templates', 'react', 'sample-pages');
     const pagesPath = path.join(appPath, 'src', 'pages');
     fs.mkdirSync(pagesPath);
-    templateCreator.moveTemplateFilesToProject(templateSourcePath, pagesPath, {});
+    templateCreator.moveTemplateFilesToProject(samplePageTemplatePath, pagesPath, {
+        isTypeScript: templateOptions.isTypeScript
+    }, getCorrectPath);
 };
 
 const addView = (pageName, options) => {
+    const pageTemplatePath = path.join(
+        templateCreator.getTempaltePath('react'),
+        'page'
+    );
+    const extension = getExtension(process.cwd());
+
     const componentName = getComponentPageName(pageName);
     const pathToPage = createPathToPage(pageName);
-    const pageTemplatePath = path.join(__dirname, '..', 'templates', 'react', 'page');
-    const routingModulePath = path.join(process.cwd(), 'src', 'app-routes.js');
-    const navigationModulePath = path.join(process.cwd(), 'src', 'app-navigation.js');
+    const routingModulePath = path.join(process.cwd(), 'src', `app-routes${extension}`);
+    const navigationModulePath = path.join(process.cwd(), 'src', `app-navigation${extension}`);
     const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder');
 
-    templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath);
-    moduleUtils.insertExport(pathToPagesIndex, componentName, `./${pageName}/${pageName}`);
+    const getCorrectExtension = (fileExtension) => {
+        return fileExtension === '.tsx' ? extension : fileExtension;
+    };
+    templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);
+    moduleUtils.insertExport(pathToPagesIndex(), componentName, `./${pageName}/${pageName}`);
     moduleUtils.insertImport(routingModulePath, './pages', componentName);
     insertItemToArray(routingModulePath, navigationData.route);
     insertItemToArray(navigationModulePath, navigationData.navigation);

package/src/applications/application.vue.js

@@ -1,7 +1,8 @@
 const path = require('path');
 const fs = require('fs');
-const getLayoutInfo = require('../utility/prompts/layout').getLayoutInfo;
-const getVersionInfo = require('../utility/prompts/vue-version').getVersionInfo;
+const getLayoutInfo = require('../utility/prompts/layout');
+const getVersionInfo = require('../utility/prompts/vue-version');
+const getTemplateTypeInfo = require('../utility/prompts/typescript');
 const templateCreator = require('../utility/template-creator');
 const packageManager = require('../utility/package-manager');
 const packageJsonUtils = require('../utility/package-json-utils');
@@ -9,6 +10,7 @@ const runCommand = require('../utility/run-command');
 const insertItemToArray = require('../utility/file-content').insertItemToArray;
 const moduleUtils = require('../utility/module');
 const stringUtils = require('../utility/string');
+const typescriptUtils = require('../utility/typescript-extension');
 const latestVersions = require('../utility/latest-versions');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css',
@@ -53,32 +55,42 @@ const preparePackageJsonForTemplate = (appPath, appName, version) => {
     packageJsonUtils.updateName(appPath, appName);
 };
 
-async function createVueApp(name, version) {
+async function createVueApp(name, templateOptions) {
+    const { version, isTypeScript } = templateOptions;
     const argList = ['-p', '@vue/cli', 'vue', 'create', name];
 
-    if(version === 'v2') {
-        argList.push('-p "Default (Vue 2)"');
+    if(isTypeScript) {
+        const presetPath = path.join(__dirname, '..', 'templates-ts', `vue-${version}`);
+
+        argList.push(`-p "${presetPath}"`);
     } else {
-        argList.push('-p "Default (Vue 3)"');
+        if(version === 'v2') {
+            argList.push('-p "Default (Vue 2)"');
+        } else {
+            argList.push('-p "Default (Vue 3)"');
+        }
     }
 
     return runCommand('npx', argList);
 }
 
 const create = async(appName, options) => {
-    const versionInfo = await getVersionInfo(options.version);
-    const layoutInfo = await getLayoutInfo(options.layout);
+    const version = await getVersionInfo(options.version);
+    const templateType = await getTemplateTypeInfo(options.template);
+    const layout = await getLayoutInfo(options.layout);
+
+    const templateOptions = {
+        project: stringUtils.humanize(appName),
+        layout: layout,
+        version: version,
+        isTypeScript: typescriptUtils.isTypeScript(templateType)
+    };
 
-    await createVueApp(appName, versionInfo.version);
+    await createVueApp(appName, templateOptions);
 
     const appPath = path.join(process.cwd(), appName);
-    const humanizedName = stringUtils.humanize(appName);
-    const templateOptions = Object.assign({}, options, {
-        project: humanizedName,
-        layout: layoutInfo.layout
-    });
-    modifyIndexHtml(appPath, humanizedName);
-    addTemplate(appPath, appName, templateOptions, versionInfo.version);
+    modifyIndexHtml(appPath, templateOptions.project);
+    addTemplate(appPath, appName, templateOptions);
 };
 
 const modifyIndexHtml = (appPath, appName) => {
@@ -90,27 +102,30 @@ const modifyIndexHtml = (appPath, appName) => {
     fs.writeFileSync(indexHtmlPath, htmlContent);
 };
 
-const getMainModulePath = (appPath) => {
-    const jsModule = path.join(appPath, 'src', 'main.js');
-
-    return fs.existsSync(jsModule) ? jsModule : path.join(appPath, 'src', 'main.ts');
+const getCorrectPath = (extension, pathToApp) => {
+    return pathToApp;
 };
 
-const addTemplate = (appPath, appName, templateOptions, version) => {
+const addTemplate = (appPath, appName, templateOptions) => {
+    const { version, isTypeScript } = templateOptions;
+
     if(!version) {
         version = getVueVersion();
     }
 
-    const templateSourcePath = path.join(__dirname, '..', 'templates', `vue-${version}`, 'application');
+    const applicationTemplatePath = path.join(
+        templateCreator.getTempaltePath(`vue-${version}`, isTypeScript),
+        'application'
+    );
     const styles = [
         './themes/generated/theme.additional.css',
         './themes/generated/theme.base.css',
         'devextreme/dist/css/dx.common.css'
     ];
 
-    templateCreator.moveTemplateFilesToProject(templateSourcePath, appPath, templateOptions);
+    templateCreator.moveTemplateFilesToProject(applicationTemplatePath, appPath, templateOptions, getCorrectPath);
     if(!templateOptions.empty) {
-        addSamplePages(appPath, version);
+        addSamplePages(appPath, templateOptions);
     }
     preparePackageJsonForTemplate(appPath, appName, version);
     install({}, appPath, styles);
@@ -125,21 +140,31 @@ const install = (options, appPath, styles) => {
 };
 
 const addStylesToApp = (appPath, styles) => {
-    const mainModulePath = getMainModulePath(appPath);
+    const isTypeScript = typescriptUtils.isTypeScript(typescriptUtils.getTemplateType('vue'));
+
+    const mainModulePath = typescriptUtils.setFileExtension(
+        path.join(appPath, 'src', 'main.js'),
+        isTypeScript
+    );
 
     styles.forEach(style => {
         moduleUtils.insertImport(mainModulePath, style);
     });
 };
 
-const addSamplePages = (appPath, version) => {
+const addSamplePages = (appPath, templateOptions) => {
+    const { version, isTypeScript } = templateOptions;
+
     if(!version) {
         version = getVueVersion();
     }
 
-    const templateSourcePath = path.join(__dirname, '..', 'templates', `vue-${version}`, 'sample-pages');
+    const samplePageTemplatePath = path.join(
+        templateCreator.getTempaltePath(`vue-${version}`, isTypeScript),
+        'sample-pages'
+    );
     const pagesPath = createPathToPage(appPath);
-    templateCreator.moveTemplateFilesToProject(templateSourcePath, pagesPath, {});
+    templateCreator.moveTemplateFilesToProject(samplePageTemplatePath, pagesPath, {}, getCorrectPath);
 };
 
 const getComponentPageName = (viewName) => {
@@ -191,14 +216,26 @@ const createPathToPage = (appPath) => {
 
 const addView = (pageName, options) => {
     const version = getVueVersion();
+    const isTypeScript = typescriptUtils.isTypeScript(typescriptUtils.getTemplateType('vue'));
+
+    const pageTemplatePath = path.join(
+        templateCreator.getTempaltePath(`vue-${version}`, isTypeScript),
+        'page'
+    );
+
     const componentName = getComponentPageName(pageName);
     const pathToPage = createPathToPage(process.cwd());
-    const pageTemplatePath = path.join(__dirname, '..', 'templates', `vue-${version}`, 'page');
-    const routingModulePath = path.join(process.cwd(), 'src', 'router.js');
-    const navigationModulePath = path.join(process.cwd(), 'src', 'app-navigation.js');
+    const routingModulePath = typescriptUtils.setFileExtension(
+        path.join(process.cwd(), 'src', 'router.js'),
+        isTypeScript
+    );
+    const navigationModulePath = typescriptUtils.setFileExtension(
+        path.join(process.cwd(), 'src', 'app-navigation.js'),
+        isTypeScript
+    );
     const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder', version);
-
-    templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath);
+    const getCorrectExtension = (fileExtension) => fileExtension;
+    templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);
     moduleUtils.insertImport(routingModulePath, `./views/${pageName}`, componentName, true);
     insertItemToArray(routingModulePath, navigationData.route);
     insertItemToArray(navigationModulePath, navigationData.navigation);

package/src/commands.json

@@ -18,6 +18,9 @@
             }, {
                 "name": "--version",
                 "description": "Specifies whether to generate a Vue 2 or Vue 3 application. Available values: 2 (default) and 3"
+            }, {
+                "name": "--template",
+                "description": "Create template with typescsript support. Specifies for React & Vue application"
             }]
         }]
     }, {

package/src/templates/react/application/src/{Content.js → Content.tsx}

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Switch, Route<%=^empty%>, Redirect<%=/empty%> } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import appInfo from './app-info';
 import routes from './app-routes';
 import { <%=layout%> as SideNavBarLayout } from './layouts';
@@ -8,17 +7,19 @@ import { Footer } from './components';
 export default function Content() {
   return (
     <SideNavBarLayout title={appInfo.title}>
-      <Switch>
-        {routes.map(({ path, component }) => (
+      <Routes>
+        {routes.map(({ path, element }) => (
           <Route
-            exact
             key={path}
             path={path}
-            component={component}
+            element={element}
           />
-        ))}<%=^empty%>
-        <Redirect to={'/home'} /><%=/empty%>
-      </Switch>
+        ))}
+        <Route
+          path='*'
+          element={<Navigate to='/home' />}
+        />
+      </Routes>
       <Footer>
         Copyright © 2011-{new Date().getFullYear()} {appInfo.title} Inc.
         <br />
@@ -28,3 +29,4 @@ export default function Content() {
     </SideNavBarLayout>
   );
 }
+