Skip to content

Commit 0612c0f

Browse files
GoodDayForSurfGoodDayForSurf
committed
Added a version of the react with a SWC transpiler
1 parent 25d5003 commit 0612c0f

File tree

11 files changed

+134
-56
lines changed

11 files changed

+134
-56
lines changed

‎packages/devextreme-cli/src/applications/application.react.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const path = require('path');
33
const fs = require('fs');
44
const getLayoutInfo = require('../utility/prompts/layout');
55
const getTemplateTypeInfo = require('../utility/prompts/typescript');
6+
const getTranspilerTypeInfo = require('../utility/prompts/transpiler');
67
const templateCreator = require('../utility/template-creator');
78
const packageManager = require('../utility/package-manager');
89
const packageJsonUtils = require('../utility/package-json-utils');
@@ -52,6 +53,7 @@ const updateJsonPropName = (path, name) => {
5253

5354
const create = async(appName, options) => {
5455
const templateType = await getTemplateTypeInfo(options.template);
56+
const transpiler = await getTranspilerTypeInfo(options.transpiler);
5557
const layoutType = await getLayoutInfo(options.layout);
5658

5759
const templateOptions = Object.assign({}, options, {
@@ -62,7 +64,7 @@ const create = async(appName, options) => {
6264

6365
const commandArguments = [`-p=create-vite@${latestVersions['create-vite']}`, 'create-vite', appName];
6466

65-
commandArguments.push(`--template react${templateOptions.isTypeScript ? '-ts' : ''}`);
67+
commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
6668

6769
await runCommand('npx', commandArguments);
6870

‎packages/devextreme-cli/src/utility/prompts/transpiler.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const prompts = require('./prompts');
2+
3+
const choices = [
4+
{ value: 'babel', title: 'Babel (default)' },
5+
{ value: 'swc', title: 'SWC' }
6+
];
7+
8+
const question = {
9+
message: 'Specify desired transpiler type:',
10+
choices: choices
11+
};
12+
13+
const getTranspilerTypeInfo = async(defaultValue) => {
14+
return await prompts(question, choices, defaultValue);
15+
};
16+
17+
module.exports = getTranspilerTypeInfo;

‎packages/devextreme-cli/testing/__tests__/react-ts.test.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
const reactEnv = require('../env.react-ts');
1+
const { reactTs, reactSwcTs } = require('../env.react');
22
const testAppTemplate = require('../app-template.test.shared.js');
3-
testAppTemplate(reactEnv);
3+
testAppTemplate(reactTs);
4+
testAppTemplate(reactSwcTs);

‎packages/devextreme-cli/testing/__tests__/react.test.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
const reactEnv = require('../env.react');
1+
const { reactJs, reactSwcJs } = require('../env.react');
22
const testAppTemplate = require('../app-template.test.shared.js');
3-
testAppTemplate(reactEnv);
3+
testAppTemplate(reactJs);
4+
testAppTemplate(reactSwcJs);

‎packages/devextreme-cli/testing/constants.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// NOTE: All puppeteer devices: https://github.com/GoogleChrome/puppeteer/blob/master/lib/DeviceDescriptors.js
2+
const reactConfigs = require('./env.react');
23

34
exports.envs = [
45
require('./env.angular'),
5-
require('./env.react'),
6-
require('./env.react-ts'),
6+
...Object.values(reactConfigs),
77
require('./env.vue-v3'),
88
];
99

‎packages/devextreme-cli/testing/creating.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const minimist = require('minimist');
22
const { toolingVersionOptionName } = require('../src/utility/extract-tooling-version');
33
const envs = require('./constants').envs;
44

5+
console.log('-------envs--->', envs);
56
const args = minimist(process.argv.slice(2), {
67
default: {
78
envirorment: 'all'

‎packages/devextreme-cli/testing/env.angular.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ exports.appPath = appPath;
2929
exports.deployPath = path.join(appPath, 'dist', 'my-app', 'browser');
3030
// disable optimization due to https://github.com/angular/angular-cli/issues/20760
3131
exports.npmArgs = ['run', 'build', '--', '--configuration', 'development'];
32-
exports.fileExtention = 'ts';
32+
exports.fileExtension = 'ts';
3333

3434
exports.createApp = async(toolingVersion) => {
3535
await rimraf(sandboxPath);

‎packages/devextreme-cli/testing/env.react-ts.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports.engine = 'react-ts';
1616
exports.appPath = appPath;
1717
exports.deployPath = path.join(appPath, 'dist');
1818
exports.npmArgs = ['run', 'build'];
19-
exports.fileExtention = 'ts';
19+
exports.fileExtension = 'ts';
2020

2121
exports.createApp = async(toolingVersion) => {
2222
await rimraf(sandboxPath);
@@ -29,6 +29,7 @@ exports.createApp = async(toolingVersion) => {
2929
'react-app',
3030
'--layout=side-nav-outer-toolbar',
3131
'--template=typescript',
32+
'--transpiler=babel',
3233
...additionalArguments
3334
], {
3435
cwd: sandboxPath,

‎packages/devextreme-cli/testing/env.react.js‎

Lines changed: 100 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,51 +7,106 @@ const runCommand = require('../src/utility/run-command');
77
const { toolingVersionOptionName } = require('../src/utility/extract-tooling-version');
88
const classify = require('../src/utility/string').classify;
99

10-
const appName = 'my-app';
11-
const sandboxPath = path.join(process.cwd(), './testing/sandbox/react');
12-
const appPath = path.join(sandboxPath, appName);
13-
const appLayoutPath = path.join(sandboxPath, appName, 'src/Content.jsx');
14-
15-
exports.engine = 'react';
16-
exports.appPath = appPath;
17-
exports.deployPath = path.join(appPath, 'dist');
18-
exports.npmArgs = ['run', 'build'];
19-
exports.fileExtention = 'jsx';
20-
21-
exports.createApp = async(toolingVersion) => {
22-
await rimraf(sandboxPath);
23-
fs.mkdirSync(sandboxPath, { recursive: true });
24-
25-
const additionalArguments = toolingVersion && [`--${toolingVersionOptionName} ${toolingVersion}`] || [];
26-
await runCommand('node', [
27-
path.join(process.cwd(), './index.js'),
28-
'new',
29-
'react-app',
30-
'--layout=side-nav-outer-toolbar',
31-
'--template=javascript',
32-
...additionalArguments
33-
], {
34-
cwd: sandboxPath,
35-
forceNoCmd: true
36-
});
37-
38-
await runCommand('node', [
39-
path.join(process.cwd(), './index.js'),
40-
'add',
41-
'view',
42-
'new-page'
43-
], {
44-
cwd: appPath,
45-
forceNoCmd: true
46-
});
47-
48-
fs.writeFileSync(path.join(appPath, '.env'), 'SKIP_PREFLIGHT_CHECK=true' + EOL + 'BROWSER=none');
10+
function getConfig({ engine, template, fileExtension, templateExtension, transpiler }) {
11+
const appName = 'my-app';
12+
const sandboxPath = path.join(process.cwd(), `./testing/sandbox/${engine}`);
13+
const appPath = path.join(sandboxPath, appName);
14+
const appLayoutPath = path.join(sandboxPath, appName, `src/Content.${templateExtension}`);
15+
16+
const config = {
17+
engine: engine,
18+
appPath: appPath,
19+
deployPath: path.join(appPath, 'dist'),
20+
npmArgs: ['run', 'build'],
21+
fileExtension,
22+
};
23+
24+
config.createApp = async(toolingVersion) => {
25+
await rimraf(sandboxPath);
26+
fs.mkdirSync(sandboxPath, { recursive: true });
27+
28+
const additionalArguments = toolingVersion && [`--${toolingVersionOptionName} ${toolingVersion}`] || [];
29+
await runCommand('node', [
30+
path.join(process.cwd(), './index.js'),
31+
'new',
32+
'react-app',
33+
'--layout=side-nav-outer-toolbar',
34+
`--template=${template}`,
35+
`--transpiler=${transpiler}`,
36+
...additionalArguments
37+
], {
38+
cwd: sandboxPath,
39+
forceNoCmd: true
40+
});
41+
42+
await runCommand('node', [
43+
path.join(process.cwd(), './index.js'),
44+
'add',
45+
'view',
46+
'new-page'
47+
], {
48+
cwd: appPath,
49+
forceNoCmd: true
50+
});
51+
52+
fs.writeFileSync(path.join(appPath, '.env'), 'SKIP_PREFLIGHT_CHECK=true' + EOL + 'BROWSER=none');
53+
};
54+
55+
config.setLayout = (layoutName) => {
56+
const regexToFind = /SideNav\w+Toolbar as SideNavBarLayout/g;
57+
const newSubStr = `${classify(layoutName)} as SideNavBarLayout`;
58+
const data = fs.readFileSync(appLayoutPath, 'utf8');
59+
const result = data.replace(regexToFind, newSubStr);
60+
fs.writeFileSync(appLayoutPath, result, 'utf8');
61+
};
62+
63+
return config;
64+
}
65+
66+
67+
const reactJs = {
68+
...getConfig({
69+
engine: 'react',
70+
template: 'javascript',
71+
templateExtension: 'jsx',
72+
fileExtension: 'jsx',
73+
transpiler: 'babel',
74+
}),
75+
};
76+
77+
const reactSwcJs = {
78+
...getConfig({
79+
engine: 'react-swc',
80+
template: 'javascript',
81+
templateExtension: 'jsx',
82+
fileExtension: 'jsx',
83+
transpiler: 'swc',
84+
}),
85+
};
86+
87+
const reactTs = {
88+
...getConfig({
89+
engine: 'react-ts',
90+
template: 'typescript',
91+
templateExtension: 'tsx',
92+
fileExtension: 'ts',
93+
transpiler: 'babel',
94+
})
95+
};
96+
97+
const reactSwcTs = {
98+
...getConfig({
99+
engine: 'react-swc-ts',
100+
template: 'typescript',
101+
templateExtension: 'tsx',
102+
fileExtension: 'ts',
103+
transpiler: 'swc',
104+
})
49105
};
50106

51-
exports.setLayout = (layoutName) => {
52-
const regexToFind = /SideNav\w+Toolbar as SideNavBarLayout/g;
53-
const newSubStr = `${classify(layoutName)} as SideNavBarLayout`;
54-
const data = fs.readFileSync(appLayoutPath, 'utf8');
55-
const result = data.replace(regexToFind, newSubStr);
56-
fs.writeFileSync(appLayoutPath, result, 'utf8');
107+
module.exports = {
108+
reactJs,
109+
reactTs,
110+
reactSwcJs,
111+
reactSwcTs,
57112
};

‎packages/devextreme-cli/testing/env.vue-v3.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ exports.engine = 'vue-v3';
1414
exports.appPath = path.join(sandboxPath, appName);
1515
exports.deployPath = path.join(appPath, 'dist');
1616
exports.npmArgs = ['run', 'build'];
17-
exports.fileExtention = 'js';
17+
exports.fileExtension = 'js';
1818

1919
exports.createApp = async(toolingVersion) => {
2020
await rimraf(sandboxPath);

0 commit comments

Comments
 (0)