devextreme-cli 1.3.3 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.3.3",
+  "version": "1.4.2",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -52,12 +52,12 @@
     "@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",
@@ -74,5 +74,5 @@
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "023ac50deaac92bd44a283079f55491f4db30049"
+  "gitHead": "b48e36220ea219b061fb6db3aa58f48dbae70e5a"
 }

package/src/application.js

@@ -35,7 +35,7 @@ const run = async(commands, options, devextremeConfig) => {
     } else {
         if(commands[0] === 'add') {
             if(commands[1] === 'devextreme-angular') {
-                angularApplication.install(options);
+                await angularApplication.install(options);
                 return;
             }
 
@@ -50,7 +50,7 @@ const run = async(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

@@ -4,11 +4,12 @@ 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,12 +21,12 @@ 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);
@@ -36,7 +37,7 @@ async function runNgCommand(commandArguments, evaluatingOptions) {
     const npmCommandName = hasNg ? 'ng' : 'npx';
     const ngCommandArguments = hasNg
         ? []
-        : ['-p', '@angular/cli@13.3.7', 'ng'];
+        : ['-p', '@angular/cli', 'ng'];
 
     ngCommandArguments.push(...commandArguments);
     return runCommand(npmCommandName, ngCommandArguments, evaluatingOptions);
@@ -52,41 +53,20 @@ function localPackageExists(packageName) {
     return fs.existsSync(packageJsonPath);
 }
 
-function hasSutableNgCli() {
-    return new Promise((resolve, reject) => {
-        if(globalNgCliVersion !== '') {
-            resolve(true);
-        }
-
-        exec('ng v', (err, stdout, stderr) => {
-            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 {
-                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
+    });
 };
 
 const create = async(appName, options) => {
@@ -115,8 +95,12 @@ const create = async(appName, options) => {
     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

@@ -38,11 +38,6 @@ const preparePackageJsonForTemplate = (appPath, appName, isTypeScript) => {
         { 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);

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/components/change-password-form/ChangePasswordForm.tsx

@@ -10,6 +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%>
 import { changePassword } from '../../api/auth';
 
 export default function ChangePasswordForm() {
@@ -18,7 +19,7 @@ export default function ChangePasswordForm() {
   const formData = useRef({ password: '' });
   const { recoveryCode } = useParams();
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { password } = formData.current;
     setLoading(true);
@@ -34,7 +35,7 @@ export default function ChangePasswordForm() {
   }, [navigate, recoveryCode]);
 
   const confirmPassword = useCallback(
-    ({ value }) => value === formData.current.password,
+    ({ value }<%=#isTypeScript%>: ValidationType<%=/isTypeScript%>) => value === formData.current.password,
     []
   );
 

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

@@ -12,6 +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%>
 import './CreateAccountForm.scss';
 
 export default function CreateAccountForm() {
@@ -19,7 +20,7 @@ export default function CreateAccountForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);
@@ -35,7 +36,7 @@ export default function CreateAccountForm() {
   }, [navigate]);
 
   const confirmPassword = useCallback(
-    ({ value }) => value === formData.current.password,
+    ({ value }<%=#isTypeScript%>: ValidationType<%=/isTypeScript%>) => value === formData.current.password,
     []
   );
 

package/src/templates/react/application/src/components/login-form/LoginForm.tsx

@@ -20,7 +20,7 @@ export default function LoginForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);

package/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.tsx

@@ -20,7 +20,7 @@ export default function ResetPasswordForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
     e.preventDefault();
     const { email } = formData.current;
     setLoading(true);

package/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.tsx

@@ -33,8 +33,8 @@ export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsW
   const { navigationData: { currentPath } } = useNavigation();
 
   const treeViewRef = useRef<%=#isTypeScript%><TreeView><%=/isTypeScript%>(null);
-  const wrapperRef = useRef();
-  const getWrapperRef = useCallback((element) => {
+  const wrapperRef = useRef<%=#isTypeScript%><HTMLDivElement><%=/isTypeScript%>();
+  const getWrapperRef = useCallback((element<%=#isTypeScript%>: HTMLDivElement<%=/isTypeScript%>) => {
     const prevElement = wrapperRef.current;
     if (prevElement) {
       events.off(prevElement, 'dxclick');

package/src/templates/react/application/src/contexts/navigation.tsx

@@ -16,7 +16,7 @@ function NavigationProvider(props<%=#isTypeScript%>: React.PropsWithChildren<unk
 }
 
 function withNavigationWatcher(Component<%=#isTypeScript%>: React.ElementType<%=/isTypeScript%>, path<%=#isTypeScript%>: string<%=/isTypeScript%>) {
-  const WrappedComponent = function (props<%=#isTypeScript%>: unknown<%=/isTypeScript%>) {
+  const WrappedComponent = function (props<%=#isTypeScript%>: Record<string, unknown><%=/isTypeScript%>) {
     const { setNavigationData } = useNavigation();
 
     useEffect(() => {

package/src/templates/react/application/src/dx-styles.scss

@@ -5,26 +5,38 @@
   display: flex;
   height: 100%;
   width: 100%;
-}
 
-.side-nav-outer-toolbar .dx-drawer {
-  height: calc(100% - 56px)
-}
+  .content {
+    line-height: 1.5;
+    flex-grow: 1;
 
-.app .content {
-  line-height: 1.5;
+    h2 {
+      font-size: 30px;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
 
-  h2 {
-    font-size: 30px;
+  .container {
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .layout-body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .content-block {
+    margin-left: 40px;
+    margin-right: 40px;
     margin-top: 20px;
-    margin-bottom: 20px;
   }
 }
 
-.app .content-block {
-  margin-left: 40px;
-  margin-right: 40px;
-  margin-top: 20px;
+.side-nav-outer-toolbar .dx-drawer {
+  height: calc(100% - 56px)
 }
 
 .screen-x-small .content-block {

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

@@ -2,21 +2,6 @@
   width: 100%;
 }
 
-.container {
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-}
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
-
 #navigation-header {
   @import "../../themes/generated/variables.additional.scss";
   background-color: $base-accent;
@@ -29,7 +14,7 @@
   .screen-x-small & {
     padding-left: 20px;
   }
-    
+
   .dx-theme-generic & {
     padding-top: 10px;
     padding-bottom: 10px;

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

@@ -9,7 +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 type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
+<%=#isTypeScript%>import { ClickEvent } from 'devextreme/ui/button';<%=/isTypeScript%>
 
 export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
   const scrollViewRef = useRef<%=#isTypeScript%><ScrollView><%=/isTypeScript%>(null);
@@ -20,13 +22,13 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
     isLarge ? MenuStatus.Opened : MenuStatus.Closed
   );
 
-  const toggleMenu = useCallback(({ event }) => {
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ClickEvent<%=/isTypeScript%>) => {
     setMenuStatus(
       prevMenuStatus => prevMenuStatus === MenuStatus.Closed
         ? MenuStatus.Opened
         : MenuStatus.Closed
     );
-    event.stopPropagation();
+    event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
   }, []);
 
   const temporaryOpenMenu = useCallback(() => {
@@ -46,18 +48,18 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
     return true;
   }, [isLarge]);
 
-  const onNavigationChanged = useCallback(({ itemData: { path }, event, node }) => {
-    if (menuStatus === MenuStatus.Closed || !path || node.selected) {
-      event.preventDefault();
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {
+    if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
       return;
     }
 
-    navigate(path);
+    navigate(itemData.path);
     scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);
-      event.stopPropagation();
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
     }
   }, [navigate, menuStatus, isLarge]);
 

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

@@ -8,12 +8,3 @@
 .layout-header {
   z-index: 1501;
 }
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}

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

@@ -7,6 +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 type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
 
 export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
@@ -18,13 +20,13 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
     isLarge ? MenuStatus.Opened : MenuStatus.Closed
   );
 
-  const toggleMenu = useCallback(({ event }) => {
+  const toggleMenu = useCallback(({ event }<%=#isTypeScript%>: ClickEvent<%=/isTypeScript%>) => {
     setMenuStatus(
       prevMenuStatus => prevMenuStatus === MenuStatus.Closed
         ? MenuStatus.Opened
         : MenuStatus.Closed
     );
-    event.stopPropagation();
+    event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
   }, []);
 
   const temporaryOpenMenu = useCallback(() => {
@@ -44,18 +46,18 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
     return true;
   }, [isLarge]);
 
-  const onNavigationChanged = useCallback(({ itemData: { path }, event, node }) => {
-    if (menuStatus === MenuStatus.Closed || !path || node.selected) {
-      event.preventDefault();
+  const onNavigationChanged = useCallback(({ itemData, event, node }<%=#isTypeScript%>: ItemClickEvent<%=/isTypeScript%>) => {
+    if (menuStatus === MenuStatus.Closed || !itemData<%=#isTypeScript%>?<%=/isTypeScript%>.path || node<%=#isTypeScript%>?<%=/isTypeScript%>.selected) {
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.preventDefault();
       return;
     }
 
-    navigate(path);
+    navigate(itemData.path);
     scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);
-      event.stopPropagation();
+      event<%=#isTypeScript%>?<%=/isTypeScript%>.stopPropagation();
     }
   }, [navigate, menuStatus, isLarge]);
 

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/react/application/src/types.tsx

@@ -50,4 +50,8 @@ interface NavigationData {
 export type NavigationContextType = {
     setNavigationData?: ({ currentPath }: NavigationData) => void;
     navigationData: NavigationData;
+}
+
+export type ValidationType = {
+    value: string;
 }

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

@@ -1,5 +1,6 @@
 .content {
   line-height: 1.5;
+  flex-grow: 1;
 
   h2 {
     font-size: 30px;
@@ -8,6 +9,17 @@
   }
 }
 
+.container {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+
+.layout-body {
+  flex: 1;
+  min-height: 0;
+}
+
 .side-nav-outer-toolbar .dx-drawer {
   height: calc(100% - 56px)
 }

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

@@ -137,21 +137,6 @@ export default {
   width: 100%;
 }
 
-.container {
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-}
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
-
 #navigation-header {
   @import "../themes/generated/variables.additional.scss";
   background-color: $base-accent;

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

@@ -119,13 +119,4 @@ export default {
 .layout-header {
   z-index: 1501;
 }
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
 </style>

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

@@ -1,5 +1,6 @@
 .content {
   line-height: 1.5;
+  flex-grow: 1;
 
   h2 {
     font-size: 30px;
@@ -8,6 +9,17 @@
   }
 }
 
+.container {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+
+.layout-body {
+  flex: 1;
+  min-height: 0;
+}
+
 .side-nav-outer-toolbar .dx-drawer {
   height: calc(100% - 56px)
 }

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

@@ -69,7 +69,7 @@ export default {
   },
   setup(props) {
     const route = useRoute();
-    
+
     const scrollViewRef = ref(null);
     const menuOpened = ref(props.isLarge);
     const menuTemporaryOpened = ref(false);
@@ -117,7 +117,7 @@ export default {
         }
       }
     );
-    
+
     watch(
       () => route.path,
       () => {
@@ -156,21 +156,6 @@ export default {
   width: 100%;
 }
 
-.container {
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-}
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
-
 #navigation-header {
   @import "../themes/generated/variables.additional.scss";
   background-color: $base-accent;

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

@@ -132,13 +132,4 @@ export default {
 .layout-header {
   z-index: 1501;
 }
-
-.layout-body {
-  flex: 1;
-  min-height: 0;
-}
-
-.content {
-  flex-grow: 1;
-}
 </style>

package/src/themebuider.js

@@ -14,7 +14,7 @@ const commands = {
 
 const themeBuilderPackagePath = path.join(process.cwd(), 'node_modules', 'devextreme-themebuilder');
 
-const scssCompiler = {
+const scssCompilerDart = {
     render: (scss) => {
         return new Promise((resolve, reject) => {
             require('dart-sass').render({
@@ -30,6 +30,16 @@ const scssCompiler = {
     }
 };
 
+const scssCompiler = {
+    render: (scss) => {
+        return new Promise((resolve, reject) => {
+            require('sass-embeded').compileStringAsync(scss)
+                .then((data) => resolve(data.css.toString()))
+                .catch((error) => reject(error.message));
+        });
+    }
+};
+
 const createPath = filePath => {
     const directoryName = path.dirname(filePath);
 
@@ -144,9 +154,16 @@ const getVarsFilter = (options) => {
 
 const runThemeBuilder = async rawOptions => {
     const options = await readInput(camelize(rawOptions));
+    const version = options.version || getInstalledPackageVersion('devextreme') || 'latest';
     const initialItems = options.items ? [...options.items] : [];
+
     options.reader = readFile;
-    options.sassCompiler = scssCompiler;
+    options.sassCompiler = scssCompilerDart;
+
+    if(version === 'latest' || semver.gte(version, '22.1.3')) {
+        options.sassCompiler = scssCompiler;
+    }
+
     options.lessCompiler = require('less/lib/less-node');
 
     options.lessCompiler.options = options.lessCompiler.options || {};
@@ -157,8 +174,6 @@ const runThemeBuilder = async rawOptions => {
         options.lessCompiler.options['rootpath'] = options.assetsBasePath;
     }
 
-    const version = options.version || getInstalledPackageVersion('devextreme') || 'latest';
-
     await lock.acquire();
 
     try {

package/src/utility/latest-versions.js

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

package/src/utility/ng-version.js

@@ -0,0 +1,35 @@
+const semver = require('semver').SemVer;
+const execSync = require('child_process').execSync;
+
+function parseNgCliVersion(stdout) {
+    return /angular.cli:\s*(\S+)/ig.exec(stdout)[1];
+}
+
+const getLocalNgVersion = () => {
+    try {
+        const version = parseNgCliVersion(execSync('ng v').toString());
+        return new semver(version);
+    } catch(e) {
+        return '';
+    }
+};
+
+const getPublicNgVersion = () => {
+    const version = execSync('npm view @angular/cli version').toString();
+    return new semver(version);
+};
+
+const getNgCliVersion = () => {
+    let ngCliVersion = getLocalNgVersion();
+    if(!ngCliVersion) {
+        ngCliVersion = getPublicNgVersion();
+    }
+
+    return ngCliVersion;
+};
+
+module.exports = {
+    getLocalNgVersion,
+    getPublicNgVersion,
+    getNgCliVersion
+};