migrate to create-vite from create-app for React app creating

DevExpress · Mar 5, 2025 · 009bda6 · 009bda6
1 parent 671084d
commit 009bda6
Show file tree

Hide file tree

Showing 43 changed files with 14 additions and 683 deletions.
diff --git a/packages/devextreme-cli/src/applications/application.react.js b/packages/devextreme-cli/src/applications/application.react.js
@@ -19,17 +19,17 @@ const defaultStyles = [
 ];
 
 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 = () => {
     const extension = getExtension(process.cwd());
     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' },
     ];
@@ -61,26 +61,24 @@ const create = async(appName, options) => {
         isTypeScript: typescriptUtils.isTypeScript(templateType)
     });
     const toolingVersion = extractToolingVersion(options);
-    const commandArguments = [`-p=create-react-app${toolingVersion}`, 'create-react-app', appName];
+    const commandArguments = [`-p=create-vite${toolingVersion}`, 'create-vite', appName];
 
-    const templateSuffix = templateOptions.isTypeScript ? '-typescript' : '';
-    const templatePath = path.resolve(__dirname, `../templates/cra-template${templateSuffix}`);
-
-    commandArguments.push(`--template file:${templatePath}`);
+    commandArguments.push(`--template react${templateOptions.isTypeScript ? '-ts' : ''}`);
 
     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');
+    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 +95,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 +105,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'));
+
     if(!templateOptions.empty) {
         addSamplePages(appPath, templateOptions);
     }
 
     preparePackageJsonForTemplate(appPath, appName, templateOptions.isTypeScript);
     updateJsonPropName(manifestPath, appName);
-    addPolyfills(packageJsonUtils.getPackageJsonPath(), indexPath);
     install({}, appPath, styles);
 };
 
@@ -130,15 +127,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);

diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/LICENSE b/packages/devextreme-cli/src/templates/cra-template-typescript/LICENSE
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/README.md b/packages/devextreme-cli/src/templates/cra-template-typescript/README.md
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/package.json b/packages/devextreme-cli/src/templates/cra-template-typescript/package.json
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template.json b/packages/devextreme-cli/src/templates/cra-template-typescript/template.json
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/README.md b/packages/devextreme-cli/src/templates/cra-template-typescript/template/README.md
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/gitignore b/packages/devextreme-cli/src/templates/cra-template-typescript/template/gitignore
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/public/index.html b/packages/devextreme-cli/src/templates/cra-template-typescript/template/public/index.html
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/App.css b/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/App.css
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/App.test.tsx b/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/App.test.tsx
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/App.tsx b/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/App.tsx
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/index.tsx b/packages/devextreme-cli/src/templates/cra-template-typescript/template/src/index.tsx