devextreme-cli 1.10.0 → 1.11.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.10.0",
+  "version": "1.11.0-alpha.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -43,7 +43,7 @@
     "minimist": "^1.2.8",
     "mustache": "^3.2.1",
     "prompts": "^2.4.2",
-    "sass": "^1.86.0",
+    "sass": "^1.85.1",
     "semver": "^5.7.2",
     "strip-bom": "^4.0.0"
   },
@@ -51,6 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-eslint": "^10.1.0",
+    "create-vite": "6.3.1",
     "cross-env": "^5.2.1",
     "eslint": "^7.32.0",
     "eslint-config-angular": "^0.5.0",
@@ -72,5 +73,5 @@
     "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
-  "gitHead": "a29437ade8ce07c75b0d7df33a54b0e42f7f57af"
+  "gitHead": "4c13206f0278c88053f62682fd2a6ca0a8ea5866"
 }

package/src/applications/application.angular.js

@@ -7,7 +7,9 @@ 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 { extractDepsVersionTag, depsVersionTagOptionName } = require('../utility/extract-deps-version-tag');
+const { getPackageJsonPath } = require('../utility/package-json-utils');
+const modifyJson = require('../utility/modify-json-file');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
 const minNgCliVersion = new semver('17.0.0');
@@ -27,7 +29,7 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
 
     const commandArguments = ['g', `${collectionName}:${schematicCommand}`];
 
-    const { [toolingVersionOptionName]: _, ...optionsToArguments } = options; // eslint-disable-line no-unused-vars
+    const { [depsVersionTagOptionName]: _, ...optionsToArguments } = options; // eslint-disable-line no-unused-vars
     for(let option in optionsToArguments) {
         commandArguments.push(`--${dasherize(option)}=${options[option]}`);
     }
@@ -37,12 +39,13 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
 
 async function runNgCommand(commandArguments, commandOptions, commandConfig) {
     const hasNg = await hasSutableNgCli();
-    const toolingVersion = extractToolingVersion(commandOptions);
-    const npmCommandName = hasNg && !toolingVersion ? 'ng' : 'npx';
+    const depsVersionTag = extractDepsVersionTag(commandOptions);
+    const npmCommandName = hasNg && !depsVersionTag ? 'ng' : 'npx';
     const [minCliLtsVersion] = minNgCliVersion.version.split('.');
-    const ngCommandArguments = hasNg && !toolingVersion
+
+    const ngCommandArguments = hasNg && !depsVersionTag
         ? []
-        : ['-p', `@angular/cli@v${minCliLtsVersion}-lts`, 'ng'];
+        : ['-p', `@angular/cli@${depsVersionTag || `v${minCliLtsVersion}-lts`}`, 'ng'];
 
     ngCommandArguments.push(...commandArguments);
     return runCommand(npmCommandName, ngCommandArguments, commandConfig);
@@ -74,8 +77,26 @@ const install = async(options) => {
     });
 };
 
+const bumpAngular = (appPath, versionTag) => {
+    modifyJson(getPackageJsonPath(appPath), ({ dependencies, devDependencies, ...rest }) => {
+        const bump = (section) => {
+            for(const depName in section) {
+                section[depName] = depName.startsWith('@angular') ? versionTag : section[depName];
+            }
+        };
+
+        return {
+            dependencies: bump(dependencies),
+            devDependencies: bump(devDependencies),
+            ...rest,
+        };
+    });
+
+};
+
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const depsVersionTag = extractDepsVersionTag(options);
 
     const commandArguments = [
         'new',
@@ -92,6 +113,10 @@ const create = async(appName, options) => {
 
     const appPath = path.join(process.cwd(), appName);
 
+    if(depsVersionTag) {
+        bumpAngular(appPath, depsVersionTag);
+    }
+
     options.resolveConflicts = 'override';
     options.updateBudgets = true;
     options.layout = layout;
@@ -125,7 +150,7 @@ const changeMainTs = (appPath) => {
     moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
 
     const fileContent = fs.readFileSync(filePath).toString();
-    const bootstrapPattern = /platformBrowserDynamic\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
+    const bootstrapPattern = /platformBrowser(?:Dynamic)?\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
     const firstChaptStr = fileContent.match(bootstrapPattern)[0];
     const lastChaptStr = '.catch(err => console.error(err));';
 

package/src/applications/application.react.js

@@ -3,6 +3,7 @@ const path = require('path');
 const fs = require('fs');
 const getLayoutInfo = require('../utility/prompts/layout');
 const getTemplateTypeInfo = require('../utility/prompts/typescript');
+const getTranspilerTypeInfo = require('../utility/prompts/transpiler');
 const templateCreator = require('../utility/template-creator');
 const packageManager = require('../utility/package-manager');
 const packageJsonUtils = require('../utility/package-json-utils');
@@ -13,13 +14,13 @@ 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 { extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
 
 const getExtension = (appPath) => {
-    return fs.existsSync(path.join(appPath, 'src', 'App.tsx')) ? '.tsx' : '.js';
+    return fs.existsSync(path.join(appPath, 'src', 'App.tsx')) ? '.tsx' : '.jsx';
 };
 
 const pathToPagesIndex = () => {
@@ -27,9 +28,9 @@ const pathToPagesIndex = () => {
     return path.join(process.cwd(), 'src', 'pages', `index${extension}`);
 };
 
-const preparePackageJsonForTemplate = (appPath, appName, isTypeScript) => {
+const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
-        { name: 'sass', version: '^1.34.1' },
+        { name: 'sass-embedded', version: '^1.85.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
         { name: 'react-router-dom', version: '^6.3.0' },
     ];
@@ -51,8 +52,20 @@ const updateJsonPropName = (path, name) => {
     });
 };
 
+const bumpReact = (appPath, versionTag) => {
+    const dependencies = [
+        { name: 'react', version: versionTag },
+        { name: 'react-dom', version: versionTag },
+        { name: '@types/react', version: versionTag, dev: true },
+        { name: '@types/react-dom', version: versionTag, dev: true },
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+};
+
 const create = async(appName, options) => {
     const templateType = await getTemplateTypeInfo(options.template);
+    const transpiler = await getTranspilerTypeInfo(options.transpiler);
     const layoutType = await getLayoutInfo(options.layout);
 
     const templateOptions = Object.assign({}, options, {
@@ -60,27 +73,30 @@ 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 depsVersionTag = extractDepsVersionTag(options);
 
-    const templateSuffix = templateOptions.isTypeScript ? '-typescript' : '';
-    const templatePath = path.resolve(__dirname, `../templates/cra-template${templateSuffix}`);
+    const commandArguments = [`-p=create-vite@${depsVersionTag || latestVersions['create-vite']}`, 'create-vite', appName];
 
-    commandArguments.push(`--template file:${templatePath}`);
+    commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
 
     await runCommand('npx', commandArguments);
 
     const appPath = path.join(process.cwd(), appName);
 
     modifyIndexHtml(appPath, templateOptions.project);
+
+    if(depsVersionTag) {
+        bumpReact(appPath, depsVersionTag);
+    }
+
     addTemplate(appPath, appName, templateOptions);
 };
 
 const modifyIndexHtml = (appPath, appName) => {
-    const indexHtmlPath = path.join(appPath, 'public', 'index.html');
+    const indexHtmlPath = path.join(appPath, 'index.html');
 
     let htmlContent = fs.readFileSync(indexHtmlPath).toString();
-    htmlContent = htmlContent.replace(/<title>(\w+\s*)+<\/title>/, `<title>${appName}<\/title>`);
+    htmlContent = htmlContent.replace(/<title>[^<]+<\/title>/, `<title>${appName}<\/title>`);
     htmlContent = htmlContent.replace('<body>', '<body class="dx-viewport">');
 
     fs.writeFileSync(indexHtmlPath, htmlContent);
@@ -97,7 +113,6 @@ const addTemplate = (appPath, appName, templateOptions) => {
     );
 
     const manifestPath = path.join(appPath, 'public', 'manifest.json');
-    const indexPath = path.join(appPath, 'src', templateOptions.isTypeScript ? 'index.tsx' : 'index.js');
 
     const styles = [
         './themes/generated/theme.additional.css',
@@ -108,15 +123,15 @@ const addTemplate = (appPath, appName, templateOptions) => {
     ];
 
     templateCreator.moveTemplateFilesToProject(applicationTemplatePath, appPath, templateOptions, getCorrectPath);
-    removeFile(path.join(appPath, 'src', 'App.css'));
-    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.js'));
+
+    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.jsx'));
+
     if(!templateOptions.empty) {
         addSamplePages(appPath, templateOptions);
     }
 
     preparePackageJsonForTemplate(appPath, appName, templateOptions.isTypeScript);
     updateJsonPropName(manifestPath, appName);
-    addPolyfills(packageJsonUtils.getPackageJsonPath(), indexPath);
     install({}, appPath, styles);
 };
 
@@ -130,15 +145,6 @@ const install = (options, appPath, styles) => {
     packageManager.runInstall({ cwd: appPath });
 };
 
-const addPolyfills = (packagePath, indexPath) => {
-    const packages = [
-        { name: 'react-app-polyfill', version: '^1.0.0' }
-    ];
-
-    packageJsonUtils.addDependencies(packagePath, packages);
-    moduleUtils.insertImport(indexPath, './polyfills');
-};
-
 const addStylesToApp = (filePath, styles) => {
     styles.forEach(style => {
         moduleUtils.insertImport(filePath, style);

package/src/applications/application.vue.js

@@ -9,7 +9,7 @@ const insertItemToArray = require('../utility/file-content').insertItemToArray;
 const moduleUtils = require('../utility/module');
 const stringUtils = require('../utility/string');
 const latestVersions = require('../utility/latest-versions');
-const { toolingVersionOptionName, extractToolingVersion } = require('../utility/extract-tooling-version');
+const { depsVersionTagOptionName, extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
@@ -37,25 +37,42 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
     packageJsonUtils.updateName(appPath, appName);
 };
 
-async function createVueApp(name, templateOptions) {
-    const toolingVersion = extractToolingVersion(templateOptions);
-    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
+async function createVueApp(name, depsVersionTag) {
+    const argList = ['-p', `@vue/cli@${depsVersionTag}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
 
     return runCommand('npx', argList);
 }
 
+const bumpVue = (appPath, versionTag) => {
+    const dependencies = [
+        { name: 'vue', version: versionTag },
+        { name: 'vue-router', version: versionTag },
+        { name: '@vue/cli-plugin-babel', version: versionTag, dev: true },
+        { name: '@vue/cli-plugin-eslint', version: versionTag, dev: true },
+        { name: '@vue/cli-service', version: versionTag, dev: true },
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+};
+
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const depsVersionTag = extractDepsVersionTag(options);
 
     const templateOptions = {
         project: stringUtils.humanize(appName),
         layout: layout,
-        [toolingVersionOptionName]: options[toolingVersionOptionName]
+        [depsVersionTagOptionName]: options[depsVersionTagOptionName]
     };
 
-    await createVueApp(appName, templateOptions);
+    await createVueApp(appName, depsVersionTag);
 
     const appPath = path.join(process.cwd(), appName);
+
+    if(depsVersionTag) {
+        bumpVue(appPath, depsVersionTag);
+    }
+
     modifyIndexHtml(appPath, templateOptions.project);
     addTemplate(appPath, appName, templateOptions);
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { HashRouter as Router } from 'react-router-dom';
 import './dx-styles.scss';
 import LoadPanel from 'devextreme-react/load-panel';

package/src/templates/react/application/src/components/change-password-form/ChangePasswordForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Form, {
   Item,
@@ -19,7 +19,7 @@ export default function ChangePasswordForm() {
   const formData = useRef({ password: '' });
   const { recoveryCode } = useParams();
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { password } = formData.current;
     setLoading(true);

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

@@ -1,5 +1,3 @@
-@import "../../themes/generated/variables.base.scss";
-
 .create-account-form {
   .policy-info {
     color: var(--base-text-color-alpha-7);

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -20,7 +20,7 @@ export default function CreateAccountForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);

package/src/templates/react/application/src/components/footer/Footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './Footer.scss';
 
 export default function Footer({ ...rest }) {

package/src/templates/react/application/src/components/header/Header.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import Button from 'devextreme-react/button';
 import UserPanel from '../user-panel/UserPanel';

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

@@ -1,5 +1,3 @@
-@import "../../themes/generated/variables.base.scss";
-
 .login-form {
   .link {
     text-align: center;

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -21,7 +21,7 @@ export default function LoginForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);

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

@@ -1,5 +1,3 @@
-@import "../../themes/generated/variables.base.scss";
-
 .reset-password-form {
   .submit-button {
     margin-top: 18px;

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from "react-router-dom";
 import Form, {
   Item,
@@ -20,7 +20,7 @@ export default function ResetPasswordForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email } = formData.current;
     setLoading(true);

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

@@ -1,4 +1,5 @@
-@use "../../dx-styles.scss" as *;
+@use "../../dx-styles" as *;
+@use  "../../utils/patches";
 
 .dx-swatch-additional, .dx-swatch-additional-dark {
   &.side-navigation-menu {
@@ -71,6 +72,5 @@
 }
 
 .dx-drawer-overlap.pre-init-blink-fix {
-  @import "../../utils/patches.scss";
-  @include menu-pre-init-patch;
+  @include patches.menu-pre-init-patch;
 }

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback, useMemo, useContext } from 'react';
 import { TreeView<%=#isTypeScript%>, TreeViewRef<%=/isTypeScript%> } from 'devextreme-react/tree-view';
-import * as events from 'devextreme/events';
+import * as events from 'devextreme-react/common/core/events';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';

package/src/templates/react/application/src/components/theme-switcher/ThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import Button from 'devextreme-react/button';
 import { ThemeContext } from '../../theme';
 

package/src/templates/react/application/src/components/user-panel/UserPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useNavigate } from "react-router-dom";
 import DropDownButton from 'devextreme-react/drop-down-button';
 import List from 'devextreme-react/list';

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

@@ -1,3 +1,5 @@
+@use "variables.scss" as *;
+
 $side-panel-min-width: 60px;
 
 html,

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

@@ -3,7 +3,7 @@ import Drawer from 'devextreme-react/drawer';
 import { ScrollView<%=#isTypeScript%>, ScrollViewRef<%=/isTypeScript%> } from 'devextreme-react/scroll-view';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import React, { useState, useCallback, useRef } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-inner-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
@@ -84,13 +84,19 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
           />
           <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type !== Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type !== Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type === Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
           </ScrollView>

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

@@ -1,7 +1,7 @@
 import Drawer from 'devextreme-react/drawer';
 import { ScrollView<%=#isTypeScript%>, ScrollViewRef<%=/isTypeScript%> } from 'devextreme-react/scroll-view';
 import React, { useState, useCallback, useRef } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-outer-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
@@ -83,13 +83,19 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         <div className={'container'}>
           <ScrollView ref={scrollViewRef} className={'with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type !== Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type !== Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type === Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
           </ScrollView>

package/src/templates/react/application/src/layouts/single-card/single-card.scss

@@ -1,5 +1,3 @@
-@import "../../themes/generated/variables.base.scss";
-
 .single-card {
   width: 100%;
   height: 100%;

package/src/templates/react/application/src/layouts/single-card/single-card.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ScrollView from 'devextreme-react/scroll-view';
 import './single-card.scss';
 <%=#isTypeScript%>import type { SingleCardProps } from '../../types';<%=/isTypeScript%>

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

@@ -1,6 +1,5 @@
 import { TreeViewTypes } from 'devextreme-react/tree-view';
 import { ButtonTypes } from 'devextreme-react/button';
-import React from 'react';
 
 export interface HeaderProps {
     menuToggleEnabled: boolean;
@@ -53,4 +52,4 @@ export type NavigationContextType = {
 
 export type ValidationType = {
     value: string;
-}
+}

package/src/templates/react/application/src/utils/media-query.tsx

@@ -44,7 +44,9 @@ const largeMedia = window.matchMedia('(min-width: 1280px)');
 
 [xSmallMedia, smallMedia, mediumMedia, largeMedia].forEach(media => {
   media.addListener((e) => {
-    e.matches && handlers.forEach(handler => handler());
+    if(e.matches) {
+      handlers.forEach(handler => handler())
+    }
   });
 });
 

package/src/templates/react/application/src/utils/patches.scss

@@ -1,12 +1,12 @@
-@import "../themes/generated/variables.additional.scss";
+@use "../themes/generated/variables.additional.scss" as *;
 
 @mixin menu-pre-init-patch {
     $menuMinSize: 60px;
-  
+
     .dx-drawer-content {
       padding-left: $menuMinSize;
     }
-  
+
     .dx-drawer-panel-content.dx-overlay::before {
       content: "";
       width: $menuMinSize;
@@ -15,7 +15,7 @@
       position: absolute;
       background-color: $base-bg;
     }
-  
+
     .dx-overlay-content {
       width: $menuMinSize !important;
     }

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

@@ -1,5 +1,3 @@
-@use "../../variables.scss" as *;
-
 .logos-container {
   margin: 0 0 40px 0;
 

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

@@ -68,7 +68,7 @@ export default function Home() {
           <p>Thanks for using the  DevExtreme React App Template.</p>
           <p>
             <span>This application was built using </span>
-            <a href={'https://create-react-app.dev/'} target={'_blank'} rel={'noopener noreferrer'}>Create React App</a>
+            <a href={'https://vite.dev/guide/'} target={'_blank'} rel={'noopener noreferrer'}>create-vite</a>
             <span> and </span>
             <a href={'https://js.devexpress.com/Documentation/Guide/Common/DevExtreme_CLI/'} target={'_blank'} rel={'noopener noreferrer'}>DevExtreme CLI</a>
             <span> and includes the following DevExtreme components:</span>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import 'devextreme/data/odata/store';
+import { DataSource } from 'devextreme-react/common/data';
 import DataGrid, {
   Column,
   Pager,
@@ -16,7 +16,7 @@ export default function Task() {
 
       <DataGrid
         className={'dx-card content-block'}
-        dataSource={dataSource<%=#isTypeScript%> as any<%=/isTypeScript%>}
+        dataSource={dataSource}
         showBorders={false}
         focusedRowEnabled={true}
         defaultFocusedRowIndex={0}
@@ -83,7 +83,7 @@ export default function Task() {
     </React.Fragment>
 )}
 
-const dataSource = {
+const dataSource = new DataSource({
   store: {
     version: 2,
     type: 'odata',
@@ -101,7 +101,7 @@ const dataSource = {
     'Task_Completion',
     'ResponsibleEmployee/Employee_Full_Name'
   ]
-};
+});
 
 const priorities = [
   { name: 'High', value: 4 },