devextreme-cli 1.3.1 → 1.4.0

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.1",
+  "version": "1.4.0",
   "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": "4f9873f14724ac858b6d0e73bacc124c147a7eb5"
+  "gitHead": "555ce7269749c1c6586a09062044da0477505bc9"
 }

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,27 +15,27 @@ 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') {
-                angularApplication.install(options);
+                await angularApplication.install(options);
                 return;
             }
 
@@ -50,7 +50,7 @@ const run = (commands, options, devextremeConfig) => {
             }
 
             if(commands[1] === 'angular-template') {
-                angularApplication.addTemplate(commands[2], options);
+                await angularApplication.addTemplate(commands[2], options);
                 return;
             }
 

package/src/applications/application.angular.js

@@ -1,14 +1,15 @@
-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');
 const semver = require('semver').SemVer;
 const fs = require('fs');
-const exec = require('child_process').exec;
-const minNgCliVersion = new semver('8.0.0');
+const dasherize = require('../utility/string').dasherize;
+const ngVersion = require('../utility/ng-version');
 const latestVersions = require('../utility/latest-versions');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
-let globalNgCliVersion = '';
+
+const minNgCliVersion = new semver('12.0.0');
 
 async function runSchematicCommand(schematicCommand, options, evaluatingOptions) {
     const collectionName = 'devextreme-schematics';
@@ -20,22 +21,26 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
     }
 
     if(!localPackageExists(collectionName)) {
-        await runNgCommand(['add', collectionPath, '--skipConfirmation=true'], evaluatingOptions);
+        await runNgCommand(['add', collectionPath, '--skip-confirmation=true'], evaluatingOptions);
     }
 
     const commandArguments = ['g', `${collectionName}:${schematicCommand}`];
     for(let option in options) {
-        commandArguments.push(`--${option}=${options[option]}`);
+        commandArguments.push(`--${dasherize(option)}=${options[option]}`);
     }
 
     runNgCommand(commandArguments, 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', 'ng'];
+
+    ngCommandArguments.push(...commandArguments);
+    return runCommand(npmCommandName, ngCommandArguments, evaluatingOptions);
 }
 
 function localPackageExists(packageName) {
@@ -48,29 +53,26 @@ function localPackageExists(packageName) {
     return fs.existsSync(packageJsonPath);
 }
 
-function hasSutableNgCli() {
-    return new Promise((resolve, reject) => {
-        exec('ng v', (err, stdout, stderr) => {
-            const parsingResult = !stderr && parseNgCliVersion(stdout);
-            if(parsingResult && parsingResult.compare(minNgCliVersion) < 0) {
-                globalNgCliVersion = parsingResult.version;
-                resolve(true);
-            } else {
-                resolve(false);
-            }
-        });
-    });
-}
+const hasSutableNgCli = async() => {
+    const localVersion = ngVersion.getLocalNgVersion();
+    if(!localVersion) {
+        return false;
+    }
 
-function parseNgCliVersion(stdout) {
-    return new semver(/angular.cli:\s*(\S+)/ig.exec(stdout.toString())[1]);
-}
+    const isSupportVersion = localVersion.compare(minNgCliVersion) >= 0;
+    return isSupportVersion;
+};
 
-const install = (options) => {
-    runSchematicCommand('install', { ...options, globalNgCliVersion });
+const install = async(options) => {
+    runSchematicCommand('install', {
+        ...options,
+        globalNgCliVersion: ngVersion.getNgCliVersion().version
+    });
 };
 
-const create = (appName, options) => {
+const create = async(appName, options) => {
+    const layout = await getLayoutInfo(options.layout);
+
     const commandArguments = [
         'new',
         appName,
@@ -80,26 +82,26 @@ const create = (appName, options) => {
         '--skip-install=true',
     ];
 
-    getLayoutInfo(options.layout).then(layoutInfo => {
-        runNgCommand(commandArguments).then(() => {
-            const appPath = path.join(process.cwd(), appName);
-
-            options.resolveConflicts = 'override';
-            options.updateBudgets = true;
-            options.layout = layoutInfo.layout;
-            addTemplate(appName, options, {
-                cwd: appPath
-            });
-
-            changeMainTs(appPath);
-        }).catch((e) => {
-            console.log(e);
-        });
+    await runNgCommand(commandArguments);
+
+    const appPath = path.join(process.cwd(), appName);
+
+    options.resolveConflicts = 'override';
+    options.updateBudgets = true;
+    options.layout = layout;
+    addTemplate(appName, options, {
+        cwd: appPath
     });
+
+    changeMainTs(appPath);
 };
 
-const addTemplate = (appName, options, evaluatingOptions) => {
-    const schematicOptions = { ...(appName && { project: appName }), ...options };
+const addTemplate = async(appName, options, evaluatingOptions) => {
+    const schematicOptions = {
+        ...(appName && { project: appName }),
+        ...options,
+        globalNgCliVersion: ngVersion.getNgCliVersion().version
+    };
     runSchematicCommand('add-app-template', schematicOptions, 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,21 +10,28 @@ 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', version: '^17.0.0' },
-        { name: 'react-dom', version: '^17.0.0' },
-        { name: 'react-router-dom', version: '^5.0.0' },
+        { name: 'react-router-dom', version: '^6.3.0' },
     ];
     const scripts = [
         { name: 'build-themes', value: 'devextreme build' },
@@ -43,48 +51,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);
@@ -92,7 +118,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');
 
@@ -121,7 +148,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  }`
     };
 };
@@ -132,7 +159,7 @@ const createPathToPage = (pageName) => {
 
     if(!fs.existsSync(pagesPath)) {
         fs.mkdirSync(pagesPath);
-        createPagesIndex();
+        fs.writeFileSync(pathToPagesIndex(), '');
     }
 
     if(!fs.existsSync(newPagePath)) {
@@ -142,27 +169,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, { windowsVerbatimArguments: false });
+    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);