devextreme-cli 1.4.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -52,20 +52,20 @@
     "@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",
+    "cross-env": "^5.2.1",
+    "eslint": "^7.32.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-angular": "^4.1.0",
+    "eslint-plugin-jest": "^22.21.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0",
+    "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-stylish": "^0.2.0",
     "jest": "^27.3.1",
-    "jest-image-snapshot": "^4.5.0",
+    "jest-image-snapshot": "^5.1.1",
     "prettier": "^2.6.2",
     "puppeteer": "^2.1.1",
     "rimraf": "^2.6.3",
@@ -74,5 +74,5 @@
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "aacf3c58c9b7996c6a19467ef1eeb4d9be949128"
+  "gitHead": "60feb5c896aefd4f7b717b844547cd30f86b313e"
 }

package/src/applications/application.angular.js

@@ -7,6 +7,7 @@ const fs = require('fs');
 const dasherize = require('../utility/string').dasherize;
 const ngVersion = require('../utility/ng-version');
 const latestVersions = require('../utility/latest-versions');
+const { extractToolingVersion, toolingVersionOptionName } = require('../utility/extract-tooling-version');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
 const minNgCliVersion = new semver('12.0.0');
@@ -21,26 +22,29 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
     }
 
     if(!localPackageExists(collectionName)) {
-        await runNgCommand(['add', collectionPath, '--skip-confirmation=true'], evaluatingOptions);
+        await runNgCommand(['add', collectionPath, '--skip-confirmation=true'], options, evaluatingOptions);
     }
 
     const commandArguments = ['g', `${collectionName}:${schematicCommand}`];
-    for(let option in options) {
+
+    const { [toolingVersionOptionName]: _, ...optionsToArguments } = options; // eslint-disable-line no-unused-vars
+    for(let option in optionsToArguments) {
         commandArguments.push(`--${dasherize(option)}=${options[option]}`);
     }
 
-    runNgCommand(commandArguments, evaluatingOptions);
+    runNgCommand(commandArguments, options, evaluatingOptions);
 }
 
-async function runNgCommand(commandArguments, evaluatingOptions) {
+async function runNgCommand(commandArguments, commandOptions, commandConfig) {
     const hasNg = await hasSutableNgCli();
-    const npmCommandName = hasNg ? 'ng' : 'npx';
-    const ngCommandArguments = hasNg
+    const toolingVersion = extractToolingVersion(commandOptions);
+    const npmCommandName = hasNg && !toolingVersion ? 'ng' : 'npx';
+    const ngCommandArguments = hasNg && !toolingVersion
         ? []
-        : ['-p', '@angular/cli', 'ng'];
+        : ['-p', `@angular/cli${toolingVersion}`, 'ng'];
 
     ngCommandArguments.push(...commandArguments);
-    return runCommand(npmCommandName, ngCommandArguments, evaluatingOptions);
+    return runCommand(npmCommandName, ngCommandArguments, commandConfig);
 }
 
 function localPackageExists(packageName) {
@@ -81,7 +85,7 @@ const create = async(appName, options) => {
         '--skip-install=true',
     ];
 
-    await runNgCommand(commandArguments);
+    await runNgCommand(commandArguments, options);
 
     const appPath = path.join(process.cwd(), appName);
 

package/src/applications/application.react.js

@@ -13,9 +13,9 @@ const stringUtils = require('../utility/string');
 const typescriptUtils = require('../utility/typescript-extension');
 const removeFile = require('../utility/file-operations').remove;
 const latestVersions = require('../utility/latest-versions');
+const { extractToolingVersion } = require('../utility/extract-tooling-version');
 const defaultStyles = [
-    'devextreme/dist/css/dx.light.css',
-    'devextreme/dist/css/dx.common.css'
+    'devextreme/dist/css/dx.light.css'
 ];
 
 const getExtension = (appPath) => {
@@ -60,8 +60,9 @@ const create = async(appName, options) => {
         layout: stringUtils.classify(layoutType),
         isTypeScript: typescriptUtils.isTypeScript(templateType)
     });
+    const toolingVersion = extractToolingVersion(options);
+    const commandArguments = [`-p=create-react-app${toolingVersion}`, 'create-react-app', appName];
 
-    const commandArguments = ['-p=create-react-app', 'create-react-app', appName];
     if(templateOptions.isTypeScript) {
         commandArguments.push('--template typescript');
     }

package/src/applications/application.vue.js

@@ -2,7 +2,6 @@ const path = require('path');
 const fs = require('fs');
 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');
@@ -10,11 +9,10 @@ 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 { toolingVersionOptionName, extractToolingVersion } = require('../utility/extract-tooling-version');
 const defaultStyles = [
-    'devextreme/dist/css/dx.light.css',
-    'devextreme/dist/css/dx.common.css'
+    'devextreme/dist/css/dx.light.css'
 ];
 const defaultVueVersion = 'v3';
 
@@ -56,19 +54,14 @@ const preparePackageJsonForTemplate = (appPath, appName, version) => {
 };
 
 async function createVueApp(name, templateOptions) {
-    const { version, isTypeScript } = templateOptions;
-    const argList = ['-p', '@vue/cli', 'vue', 'create', name];
+    const { version } = templateOptions;
+    const toolingVersion = extractToolingVersion(templateOptions);
+    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name];
 
-    if(isTypeScript) {
-        const presetPath = path.join(__dirname, '..', 'templates-ts', `vue-${version}`);
-
-        argList.push(`-p "${presetPath}"`);
+    if(version === 'v2') {
+        argList.push('-p "Default (Vue 2)"');
     } else {
-        if(version === 'v2') {
-            argList.push('-p "Default (Vue 2)"');
-        } else {
-            argList.push('-p "Default (Vue 3)"');
-        }
+        argList.push('-p "Default (Vue 3)"');
     }
 
     return runCommand('npx', argList);
@@ -76,14 +69,13 @@ async function createVueApp(name, templateOptions) {
 
 const create = async(appName, options) => {
     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)
+        [toolingVersionOptionName]: options[toolingVersionOptionName]
     };
 
     await createVueApp(appName, templateOptions);
@@ -107,16 +99,13 @@ const getCorrectPath = (extension, pathToApp) => {
 };
 
 const addTemplate = (appPath, appName, templateOptions) => {
-    const { version, isTypeScript } = templateOptions;
+    let { version } = templateOptions;
 
     if(!version) {
         version = getVueVersion();
     }
 
-    const applicationTemplatePath = path.join(
-        templateCreator.getTempaltePath(`vue-${version}`, isTypeScript),
-        'application'
-    );
+    const applicationTemplatePath = path.join(templateCreator.getTempaltePath(`vue-${version}`), 'application');
     const styles = [
         './themes/generated/theme.additional.css',
         './themes/generated/theme.base.css',
@@ -140,12 +129,7 @@ const install = (options, appPath, styles) => {
 };
 
 const addStylesToApp = (appPath, styles) => {
-    const isTypeScript = typescriptUtils.isTypeScript(typescriptUtils.getTemplateType('vue'));
-
-    const mainModulePath = typescriptUtils.setFileExtension(
-        path.join(appPath, 'src', 'main.js'),
-        isTypeScript
-    );
+    const mainModulePath = path.join(appPath, 'src', 'main.js');
 
     styles.forEach(style => {
         moduleUtils.insertImport(mainModulePath, style);
@@ -153,16 +137,13 @@ const addStylesToApp = (appPath, styles) => {
 };
 
 const addSamplePages = (appPath, templateOptions) => {
-    const { version, isTypeScript } = templateOptions;
+    let { version } = templateOptions;
 
     if(!version) {
         version = getVueVersion();
     }
 
-    const samplePageTemplatePath = path.join(
-        templateCreator.getTempaltePath(`vue-${version}`, isTypeScript),
-        'sample-pages'
-    );
+    const samplePageTemplatePath = path.join(templateCreator.getTempaltePath(`vue-${version}`), 'sample-pages');
     const pagesPath = createPathToPage(appPath);
     templateCreator.moveTemplateFilesToProject(samplePageTemplatePath, pagesPath, {}, getCorrectPath);
 };
@@ -216,23 +197,13 @@ 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 pageTemplatePath = path.join(templateCreator.getTempaltePath(`vue-${version}`), 'page');
 
     const componentName = getComponentPageName(pageName);
     const pathToPage = createPathToPage(process.cwd());
-    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 routingModulePath = path.join(process.cwd(), 'src', 'router.js');
+    const navigationModulePath = path.join(process.cwd(), 'src', 'app-navigation.js');
     const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder', version);
     const getCorrectExtension = (fileExtension) => fileExtension;
     templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);

package/src/templates/react/application/src/App.test.tsx

@@ -0,0 +1,12 @@
+import './matchMediaMock';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+import { act } from 'react-dom/test-utils';
+
+describe("App", () => {
+  test('renders learn react link', async () => {
+    await act( async () => { render(<App/>) });
+    const linkElement = screen.getByText(/create react app/i);
+    expect(linkElement).toBeInTheDocument();
+  });
+})

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

@@ -45,7 +45,7 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
         ? MenuStatus.Closed
         : prevMenuStatus
     );
-    return true;
+    return menuStatus === MenuStatus.Closed ? true : false;
   }, [isLarge]);
 
   const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {

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

@@ -43,7 +43,7 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         ? MenuStatus.Closed
         : prevMenuStatus
     );
-    return true;
+    return menuStatus === MenuStatus.Closed ? true : false;
   }, [isLarge]);
 
   const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {

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

@@ -0,0 +1,14 @@
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+export {};

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

@@ -1,4 +1,5 @@
 import Vue from "vue";
+import themes from "devextreme/ui/themes";
 
 import App from "./App";
 import router from "./router";
@@ -7,7 +8,9 @@ import appInfo from "./app-info";
 Vue.config.productionTip = false;
 Vue.prototype.$appInfo = appInfo;
 
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount("#app");
+themes.initialized(() => {
+  new Vue({
+    router,
+    render: h => h(App)
+  }).$mount("#app");
+});

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

@@ -1,3 +1 @@
-module.exports = {
-  publicPath: "/devextreme-vue-template"
-};
+module.exports = {};

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

@@ -1,10 +1,13 @@
 import { createApp }  from "vue";
 import router from "./router";
+import themes from "devextreme/ui/themes";
 
 import App from "./App";
 import appInfo from "./app-info";
 
-const app = createApp(App);
-app.use(router);
-app.config.globalProperties.$appInfo = appInfo;
-app.mount('#app');
+themes.initialized(() => {
+    const app = createApp(App);
+    app.use(router);
+    app.config.globalProperties.$appInfo = appInfo;
+    app.mount('#app');
+});

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

@@ -1,3 +1 @@
-module.exports = {
-  publicPath: "/devextreme-vue-template"
-};
+module.exports = {};

package/src/utility/extract-tooling-version.js

@@ -0,0 +1,13 @@
+const toolingVersionOptionName = 'tooling-version';
+
+const extractToolingVersion = (commandOptions) => {
+    if(commandOptions && commandOptions[toolingVersionOptionName]) {
+        return `@${commandOptions[toolingVersionOptionName]}`;
+    }
+    return '';
+};
+
+module.exports = {
+    toolingVersionOptionName,
+    extractToolingVersion,
+};

package/src/utility/latest-versions.js

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

package/src/utility/prompts/typescript.js

@@ -11,7 +11,6 @@ const question = {
 };
 
 const getTemplateTypeInfo = async(defaultValue) => {
-    if(defaultValue === undefined) return 'javascript';
     return await prompts(question, choices, defaultValue);
 };