From 342457f05ffd81e86c1ee4a3d20b0c3e3ee56bf5 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Wed, 30 Apr 2025 19:11:06 +0400 Subject: [PATCH 01/11] add prompt for create new react-app --- packages/devextreme-cli/src/application.js | 11 ++++++++++- .../src/utility/prompts/react-tool.js | 17 +++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 packages/devextreme-cli/src/utility/prompts/react-tool.js diff --git a/packages/devextreme-cli/src/application.js b/packages/devextreme-cli/src/application.js index 22186055a..4e5fb7990 100644 --- a/packages/devextreme-cli/src/application.js +++ b/packages/devextreme-cli/src/application.js @@ -2,6 +2,7 @@ const angularApplication = require('./applications/application.angular'); const reactApplication = require('./applications/application.react'); const nextjsApplication = require('./applications/application.nextjs'); const vueApplication = require('./applications/application.vue'); +const getReactScaffoldToolInfo = require('./utility/prompts/react-tool'); const printHelp = require('./help').printHelp; const isApplicationCommand = (command) => { @@ -16,9 +17,17 @@ const run = async(commands, options, devextremeConfig) => { } if(commands[0] === 'new') { - const app = commands[1]; + let app = commands[1]; const appName = commands[2] || 'my-app'; + if(app === 'react-app') { + const reactAppType = await getReactScaffoldToolInfo(options['scaffold-tool']); + + if(reactAppType === 'nextjs') { + app = 'nextjs-app'; + } + } + switch(app) { case 'angular-app': await angularApplication.create(appName, options); diff --git a/packages/devextreme-cli/src/utility/prompts/react-tool.js b/packages/devextreme-cli/src/utility/prompts/react-tool.js new file mode 100644 index 000000000..01aeaf70d --- /dev/null +++ b/packages/devextreme-cli/src/utility/prompts/react-tool.js @@ -0,0 +1,17 @@ +const prompts = require('./prompts'); + +const choices = [ + { value: 'vite', title: 'Vite' }, + { value: 'nextjs', title: 'Next.js' } +]; + +const question = { + message: 'How would you like to scaffold your React application', + choices: choices +}; + +const getScaffoldToolInfo = async(defaultValue) => { + return await prompts(question, choices, defaultValue); +}; + +module.exports = getScaffoldToolInfo; From e364b63e1045ef2d994992e5290996140ff404ed Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Fri, 2 May 2025 09:57:11 +0400 Subject: [PATCH 02/11] fix react for testing --- packages/devextreme-cli/testing/env.react.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devextreme-cli/testing/env.react.js b/packages/devextreme-cli/testing/env.react.js index 5dcf44a28..45c42594e 100644 --- a/packages/devextreme-cli/testing/env.react.js +++ b/packages/devextreme-cli/testing/env.react.js @@ -33,6 +33,7 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi '--layout=side-nav-outer-toolbar', `--template=${template}`, `--transpiler=${transpiler}`, + '--scaffold-tool=vite', ...additionalArguments ], { cwd: sandboxPath, From d1c9fb7867af797ab30d4495c71440e3648a0db6 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Fri, 2 May 2025 10:45:48 +0400 Subject: [PATCH 03/11] fix prompt --- packages/devextreme-cli/src/utility/prompts/react-tool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devextreme-cli/src/utility/prompts/react-tool.js b/packages/devextreme-cli/src/utility/prompts/react-tool.js index 01aeaf70d..52aabd9c3 100644 --- a/packages/devextreme-cli/src/utility/prompts/react-tool.js +++ b/packages/devextreme-cli/src/utility/prompts/react-tool.js @@ -6,7 +6,7 @@ const choices = [ ]; const question = { - message: 'How would you like to scaffold your React application', + message: 'How would you like to scaffold your React application?', choices: choices }; From af7aa6f9cb5ebd718861c2fa4f204dae0cc2e287 Mon Sep 17 00:00:00 2001 From: Vasily Strelyaev Date: Fri, 2 May 2025 13:58:09 +0300 Subject: [PATCH 04/11] tweak prompt --- packages/devextreme-cli/src/utility/prompts/react-tool.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-cli/src/utility/prompts/react-tool.js b/packages/devextreme-cli/src/utility/prompts/react-tool.js index 52aabd9c3..c5cb3ea6d 100644 --- a/packages/devextreme-cli/src/utility/prompts/react-tool.js +++ b/packages/devextreme-cli/src/utility/prompts/react-tool.js @@ -1,12 +1,12 @@ const prompts = require('./prompts'); const choices = [ - { value: 'vite', title: 'Vite' }, - { value: 'nextjs', title: 'Next.js' } + { value: 'vite', title: 'React+Vite' }, + { value: 'nextjs', title: 'Next.js-based' } ]; const question = { - message: 'How would you like to scaffold your React application?', + message: 'Specify the desired application type:', choices: choices }; From 5986360661f03f05e64fd3675bb1d9bb4b52fb4b Mon Sep 17 00:00:00 2001 From: Vasily Strelyaev Date: Fri, 2 May 2025 16:25:25 +0300 Subject: [PATCH 05/11] refactor --- packages/devextreme-cli/src/application.js | 10 +++------- .../prompts/{react-tool.js => react-app-type.js} | 4 ++-- packages/devextreme-cli/testing/env.react.js | 3 +-- 3 files changed, 6 insertions(+), 11 deletions(-) rename packages/devextreme-cli/src/utility/prompts/{react-tool.js => react-app-type.js} (75%) diff --git a/packages/devextreme-cli/src/application.js b/packages/devextreme-cli/src/application.js index 4e5fb7990..d869edec9 100644 --- a/packages/devextreme-cli/src/application.js +++ b/packages/devextreme-cli/src/application.js @@ -2,7 +2,7 @@ const angularApplication = require('./applications/application.angular'); const reactApplication = require('./applications/application.react'); const nextjsApplication = require('./applications/application.nextjs'); const vueApplication = require('./applications/application.vue'); -const getReactScaffoldToolInfo = require('./utility/prompts/react-tool'); +const getReactAppType = require('./utility/prompts/react-app-type'); const printHelp = require('./help').printHelp; const isApplicationCommand = (command) => { @@ -21,18 +21,14 @@ const run = async(commands, options, devextremeConfig) => { const appName = commands[2] || 'my-app'; if(app === 'react-app') { - const reactAppType = await getReactScaffoldToolInfo(options['scaffold-tool']); - - if(reactAppType === 'nextjs') { - app = 'nextjs-app'; - } + app = await getReactAppType(options['react-app-type']); } switch(app) { case 'angular-app': await angularApplication.create(appName, options); return; - case 'react-app': + case 'vite-app': await reactApplication.create(appName, options); return; case 'nextjs-app': diff --git a/packages/devextreme-cli/src/utility/prompts/react-tool.js b/packages/devextreme-cli/src/utility/prompts/react-app-type.js similarity index 75% rename from packages/devextreme-cli/src/utility/prompts/react-tool.js rename to packages/devextreme-cli/src/utility/prompts/react-app-type.js index c5cb3ea6d..8efcb2fbf 100644 --- a/packages/devextreme-cli/src/utility/prompts/react-tool.js +++ b/packages/devextreme-cli/src/utility/prompts/react-app-type.js @@ -1,8 +1,8 @@ const prompts = require('./prompts'); const choices = [ - { value: 'vite', title: 'React+Vite' }, - { value: 'nextjs', title: 'Next.js-based' } + { value: 'vite-app', title: 'React+Vite' }, + { value: 'nextjs-app', title: 'Next.js-based' } ]; const question = { diff --git a/packages/devextreme-cli/testing/env.react.js b/packages/devextreme-cli/testing/env.react.js index 45c42594e..abf45fb1d 100644 --- a/packages/devextreme-cli/testing/env.react.js +++ b/packages/devextreme-cli/testing/env.react.js @@ -29,11 +29,10 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi await runCommand('node', [ path.join(process.cwd(), './index.js'), 'new', - 'react-app', + 'vite-app', '--layout=side-nav-outer-toolbar', `--template=${template}`, `--transpiler=${transpiler}`, - '--scaffold-tool=vite', ...additionalArguments ], { cwd: sandboxPath, From 71ce468264f90b0dfec8add707bc3ec3f999d600 Mon Sep 17 00:00:00 2001 From: Vasily Strelyaev Date: Fri, 2 May 2025 16:26:39 +0300 Subject: [PATCH 06/11] refactor 2 --- .../devextreme-cli/src/utility/prompts/react-app-type.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-cli/src/utility/prompts/react-app-type.js b/packages/devextreme-cli/src/utility/prompts/react-app-type.js index 8efcb2fbf..0a1866464 100644 --- a/packages/devextreme-cli/src/utility/prompts/react-app-type.js +++ b/packages/devextreme-cli/src/utility/prompts/react-app-type.js @@ -6,12 +6,12 @@ const choices = [ ]; const question = { - message: 'Specify the desired application type:', + message: 'Specify the desired React application type:', choices: choices }; -const getScaffoldToolInfo = async(defaultValue) => { +const getReactAppType = async(defaultValue) => { return await prompts(question, choices, defaultValue); }; -module.exports = getScaffoldToolInfo; +module.exports = getReactAppType; From 5c69a1156f7fe31c06e9887421e5febae57c61ec Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Mon, 5 May 2025 12:24:52 +0400 Subject: [PATCH 07/11] replace vite lint by nextjs link on home page --- .../src/templates/nextjs/sample-pages/home/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx b/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx index ffd680ad3..1b76cc188 100644 --- a/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx +++ b/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx @@ -69,7 +69,7 @@ export default function Page() {

Thanks for using the DevExtreme React App Template.

This application was built using - create-vite + NextJs and DevExtreme CLI and includes the following DevExtreme components: From 76d205384461eafbc9d95c70d7577a0131651bc7 Mon Sep 17 00:00:00 2001 From: Vasily Strelyaev Date: Mon, 5 May 2025 18:24:45 +0300 Subject: [PATCH 08/11] apply PMs remarks --- packages/devextreme-cli/src/application.js | 34 ++++++++++++------- .../{react-app-type.js => app-type.js} | 4 +-- 2 files changed, 24 insertions(+), 14 deletions(-) rename packages/devextreme-cli/src/utility/prompts/{react-app-type.js => app-type.js} (75%) diff --git a/packages/devextreme-cli/src/application.js b/packages/devextreme-cli/src/application.js index d869edec9..8ecc05a7b 100644 --- a/packages/devextreme-cli/src/application.js +++ b/packages/devextreme-cli/src/application.js @@ -2,7 +2,7 @@ const angularApplication = require('./applications/application.angular'); const reactApplication = require('./applications/application.react'); const nextjsApplication = require('./applications/application.nextjs'); const vueApplication = require('./applications/application.vue'); -const getReactAppType = require('./utility/prompts/react-app-type'); +const getReactAppType = require('./utility/prompts/app-type'); const printHelp = require('./help').printHelp; const isApplicationCommand = (command) => { @@ -17,30 +17,40 @@ const run = async(commands, options, devextremeConfig) => { } if(commands[0] === 'new') { - let app = commands[1]; + const app = commands[1]; const appName = commands[2] || 'my-app'; - if(app === 'react-app') { - app = await getReactAppType(options['react-app-type']); - } + const handleWrongAppType = (input) => { + console.error(`The '${input}' application type is not valid`); + printHelp(commands[0]); + }; switch(app) { case 'angular-app': await angularApplication.create(appName, options); return; - case 'vite-app': - await reactApplication.create(appName, options); - return; - case 'nextjs-app': - await nextjsApplication.create(appName, options); + case 'react-app': + const appType = await getReactAppType(options['app-type']); + + switch(appType) { + case 'vite': + await reactApplication.create(appName, options); + return; + case 'nextjs': + await nextjsApplication.create(appName, options); + return; + default: + handleWrongAppType(appType); + } + return; case 'vue-app': await vueApplication.create(appName, options); return; default: - console.error(`The '${app}' application type is not valid`); - printHelp(commands[0]); + handleWrongAppType(app); } + } else { if(commands[0] === 'add') { if(commands[1] === 'devextreme-angular') { diff --git a/packages/devextreme-cli/src/utility/prompts/react-app-type.js b/packages/devextreme-cli/src/utility/prompts/app-type.js similarity index 75% rename from packages/devextreme-cli/src/utility/prompts/react-app-type.js rename to packages/devextreme-cli/src/utility/prompts/app-type.js index 0a1866464..6f400696c 100644 --- a/packages/devextreme-cli/src/utility/prompts/react-app-type.js +++ b/packages/devextreme-cli/src/utility/prompts/app-type.js @@ -1,8 +1,8 @@ const prompts = require('./prompts'); const choices = [ - { value: 'vite-app', title: 'React+Vite' }, - { value: 'nextjs-app', title: 'Next.js-based' } + { value: 'vite', title: 'React+Vite' }, + { value: 'nextjs', title: 'Next.js-based' } ]; const question = { From ec6e0f06abf6465699c9e9fd24076405fa346c6b Mon Sep 17 00:00:00 2001 From: Vasily Strelyaev Date: Mon, 5 May 2025 18:30:36 +0300 Subject: [PATCH 09/11] prettier --- packages/devextreme-cli/src/application.js | 41 ++++++++++++---------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/devextreme-cli/src/application.js b/packages/devextreme-cli/src/application.js index 8ecc05a7b..02c11c40b 100644 --- a/packages/devextreme-cli/src/application.js +++ b/packages/devextreme-cli/src/application.js @@ -9,6 +9,26 @@ const isApplicationCommand = (command) => { return [ 'new', 'add' ].includes(command); }; +const handleWrongAppType = (input, command) => { + console.error(`The '${input}' application type is not valid`); + printHelp(command); +}; + +const createReact = async(appName, options, command) => { + const appType = await getReactAppType(options['app-type']); + + switch(appType) { + case 'vite': + await reactApplication.create(appName, options); + return; + case 'nextjs': + await nextjsApplication.create(appName, options); + return; + default: + handleWrongAppType(appType, command); + } +}; + const run = async(commands, options, devextremeConfig) => { if(!commands[1]) { console.error('Command is incomplete. Please specify parameters.'); @@ -20,35 +40,18 @@ const run = async(commands, options, devextremeConfig) => { const app = commands[1]; const appName = commands[2] || 'my-app'; - const handleWrongAppType = (input) => { - console.error(`The '${input}' application type is not valid`); - printHelp(commands[0]); - }; - switch(app) { case 'angular-app': await angularApplication.create(appName, options); return; case 'react-app': - const appType = await getReactAppType(options['app-type']); - - switch(appType) { - case 'vite': - await reactApplication.create(appName, options); - return; - case 'nextjs': - await nextjsApplication.create(appName, options); - return; - default: - handleWrongAppType(appType); - } - + await createReact(appName, options, commands[0]); return; case 'vue-app': await vueApplication.create(appName, options); return; default: - handleWrongAppType(app); + handleWrongAppType(app, commands[0]); } } else { From fe1acccaabee41c10c19fbf98a76e299af18d840 Mon Sep 17 00:00:00 2001 From: Vasily Strelyaev Date: Mon, 5 May 2025 18:34:44 +0300 Subject: [PATCH 10/11] . --- packages/devextreme-cli/src/application.js | 12 ++++++------ .../prompts/{app-type.js => react-app-type.js} | 0 2 files changed, 6 insertions(+), 6 deletions(-) rename packages/devextreme-cli/src/utility/prompts/{app-type.js => react-app-type.js} (100%) diff --git a/packages/devextreme-cli/src/application.js b/packages/devextreme-cli/src/application.js index 02c11c40b..a5a65228b 100644 --- a/packages/devextreme-cli/src/application.js +++ b/packages/devextreme-cli/src/application.js @@ -2,22 +2,22 @@ const angularApplication = require('./applications/application.angular'); const reactApplication = require('./applications/application.react'); const nextjsApplication = require('./applications/application.nextjs'); const vueApplication = require('./applications/application.vue'); -const getReactAppType = require('./utility/prompts/app-type'); +const getReactAppType = require('./utility/prompts/react-app-type'); const printHelp = require('./help').printHelp; const isApplicationCommand = (command) => { return [ 'new', 'add' ].includes(command); }; -const handleWrongAppType = (input, command) => { - console.error(`The '${input}' application type is not valid`); +const handleWrongAppType = (appType, command) => { + console.error(`The '${appType}' application type is not valid`); printHelp(command); }; const createReact = async(appName, options, command) => { - const appType = await getReactAppType(options['app-type']); + const reactAppType = await getReactAppType(options['app-type']); - switch(appType) { + switch(reactAppType) { case 'vite': await reactApplication.create(appName, options); return; @@ -25,7 +25,7 @@ const createReact = async(appName, options, command) => { await nextjsApplication.create(appName, options); return; default: - handleWrongAppType(appType, command); + handleWrongAppType(reactAppType, command); } }; diff --git a/packages/devextreme-cli/src/utility/prompts/app-type.js b/packages/devextreme-cli/src/utility/prompts/react-app-type.js similarity index 100% rename from packages/devextreme-cli/src/utility/prompts/app-type.js rename to packages/devextreme-cli/src/utility/prompts/react-app-type.js From 8d363c6f56bf6bc16ad04354250c405e81d97432 Mon Sep 17 00:00:00 2001 From: Vasily Strelyaev Date: Mon, 5 May 2025 18:37:56 +0300 Subject: [PATCH 11/11] tests --- packages/devextreme-cli/testing/env.nextjs.js | 3 ++- packages/devextreme-cli/testing/env.react.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/devextreme-cli/testing/env.nextjs.js b/packages/devextreme-cli/testing/env.nextjs.js index a187b582a..5c76e2c20 100644 --- a/packages/devextreme-cli/testing/env.nextjs.js +++ b/packages/devextreme-cli/testing/env.nextjs.js @@ -29,7 +29,8 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi await runCommand('node', [ path.join(process.cwd(), './index.js'), 'new', - 'nextjs-app', + 'react-app', + '--app-type=nextjs', `--template=${template}`, '--layout=side-nav-outer-toolbar', ...additionalArguments diff --git a/packages/devextreme-cli/testing/env.react.js b/packages/devextreme-cli/testing/env.react.js index abf45fb1d..52971525c 100644 --- a/packages/devextreme-cli/testing/env.react.js +++ b/packages/devextreme-cli/testing/env.react.js @@ -29,7 +29,8 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi await runCommand('node', [ path.join(process.cwd(), './index.js'), 'new', - 'vite-app', + 'react-app', + '--app-type=vite', '--layout=side-nav-outer-toolbar', `--template=${template}`, `--transpiler=${transpiler}`,