Add a version of the react with a SWC transpiler (#929)

GoodDayForSurf · web-flow · commit 0f7392601e3f · 2025-03-28T12:33:07.000+04:00
* replace create-react-app by create-vite for creating React App template
diff --git a/.github/workflows/applications.yml b/.github/workflows/applications.yml
@@ -20,7 +20,9 @@ jobs:
           - angular
           - vue-v3
           - react
+          - react-swc
           - react-ts
+          - react-swc-ts
         NODE:
           - 18
         OS:
diff --git a/packages/devextreme-cli/src/applications/application.react.js b/packages/devextreme-cli/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');
@@ -52,6 +53,7 @@ const updateJsonPropName = (path, name) => {
 
 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, {
@@ -62,7 +64,7 @@ const create = async(appName, options) => {
 
     const commandArguments = [`-p=create-vite@${latestVersions['create-vite']}`, 'create-vite', appName];
 
-    commandArguments.push(`--template react${templateOptions.isTypeScript ? '-ts' : ''}`);
+    commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
 
     await runCommand('npx', commandArguments);
 
diff --git a/packages/devextreme-cli/src/utility/prompts/transpiler.js b/packages/devextreme-cli/src/utility/prompts/transpiler.js
@@ -0,0 +1,17 @@
+const prompts = require('./prompts');
+
+const choices = [
+    { value: 'babel', title: 'Babel' },
+    { value: 'swc', title: 'SWC' }
+];
+
+const question = {
+    message: 'Specify desired transpiler type:',
+    choices: choices
+};
+
+const getTranspilerTypeInfo = async(defaultValue) => {
+    return await prompts(question, choices, defaultValue);
+};
+
+module.exports = getTranspilerTypeInfo;
diff --git a/packages/devextreme-cli/testing/__tests__/react-swc-ts.test.js b/packages/devextreme-cli/testing/__tests__/react-swc-ts.test.js
@@ -0,0 +1,3 @@
+const { reactSwcTs } = require('../env.react');
+const testAppTemplate = require('../app-template.test.shared.js');
+testAppTemplate(reactSwcTs);
diff --git a/packages/devextreme-cli/testing/__tests__/react-swc.test.js b/packages/devextreme-cli/testing/__tests__/react-swc.test.js
@@ -0,0 +1,3 @@
+const { reactSwcJs } = require('../env.react');
+const testAppTemplate = require('../app-template.test.shared.js');
+testAppTemplate(reactSwcJs);
diff --git a/packages/devextreme-cli/testing/__tests__/react-ts.test.js b/packages/devextreme-cli/testing/__tests__/react-ts.test.js
@@ -1,3 +1,3 @@
-const reactEnv = require('../env.react-ts');
+const { reactTs } = require('../env.react');
 const testAppTemplate = require('../app-template.test.shared.js');
-testAppTemplate(reactEnv);
+testAppTemplate(reactTs);
diff --git a/packages/devextreme-cli/testing/__tests__/react.test.js b/packages/devextreme-cli/testing/__tests__/react.test.js
@@ -1,3 +1,3 @@
-const reactEnv = require('../env.react');
+const { reactJs } = require('../env.react');
 const testAppTemplate = require('../app-template.test.shared.js');
-testAppTemplate(reactEnv);
+testAppTemplate(reactJs);
diff --git a/packages/devextreme-cli/testing/constants.js b/packages/devextreme-cli/testing/constants.js
@@ -1,9 +1,9 @@
 // NOTE: All puppeteer devices: https://github.com/GoogleChrome/puppeteer/blob/master/lib/DeviceDescriptors.js
+const reactConfigs = require('./env.react');
 
 exports.envs = [
     require('./env.angular'),
-    require('./env.react'),
-    require('./env.react-ts'),
+    ...Object.values(reactConfigs),
     require('./env.vue-v3'),
 ];
 
diff --git a/packages/devextreme-cli/testing/env.angular.js b/packages/devextreme-cli/testing/env.angular.js
@@ -29,7 +29,7 @@ exports.appPath = appPath;
 exports.deployPath = path.join(appPath, 'dist', 'my-app', 'browser');
 // disable optimization due to https://github.com/angular/angular-cli/issues/20760
 exports.npmArgs = ['run', 'build', '--', '--configuration', 'development'];
-exports.fileExtention = 'ts';
+exports.fileExtension = 'ts';
 
 exports.createApp = async(toolingVersion) => {
     await rimraf(sandboxPath);
diff --git a/packages/devextreme-cli/testing/env.react-ts.js b/packages/devextreme-cli/testing/env.react-ts.js
diff --git a/packages/devextreme-cli/testing/env.react.js b/packages/devextreme-cli/testing/env.react.js
@@ -7,51 +7,106 @@ const runCommand = require('../src/utility/run-command');
 const { toolingVersionOptionName } = require('../src/utility/extract-tooling-version');
 const classify = require('../src/utility/string').classify;
 
-const appName = 'my-app';
-const sandboxPath = path.join(process.cwd(), './testing/sandbox/react');
-const appPath = path.join(sandboxPath, appName);
-const appLayoutPath = path.join(sandboxPath, appName, 'src/Content.jsx');
-
-exports.engine = 'react';
-exports.appPath = appPath;
-exports.deployPath = path.join(appPath, 'dist');
-exports.npmArgs = ['run', 'build'];
-exports.fileExtention = 'jsx';
-
-exports.createApp = async(toolingVersion) => {
-    await rimraf(sandboxPath);
-    fs.mkdirSync(sandboxPath, { recursive: true });
-
-    const additionalArguments = toolingVersion && [`--${toolingVersionOptionName} ${toolingVersion}`] || [];
-    await runCommand('node', [
-        path.join(process.cwd(), './index.js'),
-        'new',
-        'react-app',
-        '--layout=side-nav-outer-toolbar',
-        '--template=javascript',
-        ...additionalArguments
-    ], {
-        cwd: sandboxPath,
-        forceNoCmd: true
-    });
-
-    await runCommand('node', [
-        path.join(process.cwd(), './index.js'),
-        'add',
-        'view',
-        'new-page'
-    ], {
-        cwd: appPath,
-        forceNoCmd: true
-    });
-
-    fs.writeFileSync(path.join(appPath, '.env'), 'SKIP_PREFLIGHT_CHECK=true' + EOL + 'BROWSER=none');
+function getConfig({ engine, template, fileExtension, templateExtension, transpiler }) {
+    const appName = 'my-app';
+    const sandboxPath = path.join(process.cwd(), `./testing/sandbox/${engine}`);
+    const appPath = path.join(sandboxPath, appName);
+    const appLayoutPath = path.join(sandboxPath, appName, `src/Content.${templateExtension}`);
+
+    const config = {
+        engine: engine,
+        appPath: appPath,
+        deployPath: path.join(appPath, 'dist'),
+        npmArgs: ['run', 'build'],
+        fileExtension,
+    };
+
+    config.createApp = async(toolingVersion) => {
+        await rimraf(sandboxPath);
+        fs.mkdirSync(sandboxPath, { recursive: true });
+
+        const additionalArguments = toolingVersion && [`--${toolingVersionOptionName} ${toolingVersion}`] || [];
+        await runCommand('node', [
+            path.join(process.cwd(), './index.js'),
+            'new',
+            'react-app',
+            '--layout=side-nav-outer-toolbar',
+            `--template=${template}`,
+            `--transpiler=${transpiler}`,
+            ...additionalArguments
+        ], {
+            cwd: sandboxPath,
+            forceNoCmd: true
+        });
+
+        await runCommand('node', [
+            path.join(process.cwd(), './index.js'),
+            'add',
+            'view',
+            'new-page'
+        ], {
+            cwd: appPath,
+            forceNoCmd: true
+        });
+
+        fs.writeFileSync(path.join(appPath, '.env'), 'SKIP_PREFLIGHT_CHECK=true' + EOL + 'BROWSER=none');
+    };
+
+    config.setLayout = (layoutName) => {
+        const regexToFind = /SideNav\w+Toolbar as SideNavBarLayout/g;
+        const newSubStr = `${classify(layoutName)} as SideNavBarLayout`;
+        const data = fs.readFileSync(appLayoutPath, 'utf8');
+        const result = data.replace(regexToFind, newSubStr);
+        fs.writeFileSync(appLayoutPath, result, 'utf8');
+    };
+
+    return config;
+}
+
+
+const reactJs = {
+    ...getConfig({
+        engine: 'react',
+        template: 'javascript',
+        templateExtension: 'jsx',
+        fileExtension: 'jsx',
+        transpiler: 'babel',
+    }),
+};
+
+const reactSwcJs = {
+    ...getConfig({
+        engine: 'react-swc',
+        template: 'javascript',
+        templateExtension: 'jsx',
+        fileExtension: 'jsx',
+        transpiler: 'swc',
+    }),
+};
+
+const reactTs = {
+    ...getConfig({
+        engine: 'react-ts',
+        template: 'typescript',
+        templateExtension: 'tsx',
+        fileExtension: 'ts',
+        transpiler: 'babel',
+    })
+};
+
+const reactSwcTs = {
+    ...getConfig({
+        engine: 'react-swc-ts',
+        template: 'typescript',
+        templateExtension: 'tsx',
+        fileExtension: 'ts',
+        transpiler: 'swc',
+    })
 };
 
-exports.setLayout = (layoutName) => {
-    const regexToFind = /SideNav\w+Toolbar as SideNavBarLayout/g;
-    const newSubStr = `${classify(layoutName)} as SideNavBarLayout`;
-    const data = fs.readFileSync(appLayoutPath, 'utf8');
-    const result = data.replace(regexToFind, newSubStr);
-    fs.writeFileSync(appLayoutPath, result, 'utf8');
+module.exports = {
+    reactJs,
+    reactTs,
+    reactSwcJs,
+    reactSwcTs,
 };
diff --git a/packages/devextreme-cli/testing/env.vue-v3.js b/packages/devextreme-cli/testing/env.vue-v3.js
@@ -14,7 +14,7 @@ exports.engine = 'vue-v3';
 exports.appPath = path.join(sandboxPath, appName);
 exports.deployPath = path.join(appPath, 'dist');
 exports.npmArgs = ['run', 'build'];
-exports.fileExtention = 'js';
+exports.fileExtension = 'js';
 
 exports.createApp = async(toolingVersion) => {
     await rimraf(sandboxPath);
diff --git a/packages/devextreme-cli/testing/linting.js b/packages/devextreme-cli/testing/linting.js
@@ -34,7 +34,7 @@ const customLint = async(env) => {
     const lintFiles = isTypeScript(env.engine)
         ? [`./testing/sandbox/${env.engine}/my-app/src/**/*.ts`,
             `./testing/sandbox/${env.engine}/my-app/src/**/*.tsx`]
-        : [`./testing/sandbox/${env.engine}/my-app/src/**/*.${env.fileExtention}`];
+        : [`./testing/sandbox/${env.engine}/my-app/src/**/*.${env.fileExtension}`];
 
     const report = await eslint.lintFiles(lintFiles);
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+const { reactSwcTs } = require('../env.react');`
	`2`	`+const testAppTemplate = require('../app-template.test.shared.js');`
	`3`	`+testAppTemplate(reactSwcTs);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+const { reactSwcJs } = require('../env.react');`
	`2`	`+const testAppTemplate = require('../app-template.test.shared.js');`
	`3`	`+testAppTemplate(reactSwcJs);`