devextreme-cli 1.11.0-alpha.0 → 1.11.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.11.0-alpha.0",
+  "version": "1.11.0-beta.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -71,7 +71,8 @@
     "tree-kill": "^1.2.2",
     "tree-kill-promise": "^1.0.12",
     "typescript": "^4.0.2",
-    "typescript-eslint-parser": "^22.0.0"
+    "typescript-eslint-parser": "^22.0.0",
+    "wait-on": "8.0.0"
   },
-  "gitHead": "4c13206f0278c88053f62682fd2a6ca0a8ea5866"
+  "gitHead": "12a211ead8510e78eb1f33b6a34664823d73a4a7"
 }

package/src/application.js

@@ -1,12 +1,34 @@
 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 printHelp = require('./help').printHelp;
 
 const isApplicationCommand = (command) => {
     return [ 'new', 'add' ].includes(command);
 };
 
+const handleWrongAppType = (appType, command) => {
+    console.error(`The '${appType}' application type is not valid`);
+    printHelp(command);
+};
+
+const createReact = async(appName, options, command) => {
+    const reactAppType = await getReactAppType(options['app-type']);
+
+    switch(reactAppType) {
+        case 'vite':
+            await reactApplication.create(appName, options);
+            return;
+        case 'nextjs':
+            await nextjsApplication.create(appName, options);
+            return;
+        default:
+            handleWrongAppType(reactAppType, command);
+    }
+};
+
 const run = async(commands, options, devextremeConfig) => {
     if(!commands[1]) {
         console.error('Command is incomplete. Please specify parameters.');
@@ -23,15 +45,15 @@ const run = async(commands, options, devextremeConfig) => {
                 await angularApplication.create(appName, options);
                 return;
             case 'react-app':
-                await reactApplication.create(appName, options);
+                await createReact(appName, options, commands[0]);
                 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, commands[0]);
         }
+
     } else {
         if(commands[0] === 'add') {
             if(commands[1] === 'devextreme-angular') {
@@ -40,7 +62,12 @@ const run = async(commands, options, devextremeConfig) => {
             }
 
             if(commands[1] === 'devextreme-react') {
-                reactApplication.install(options);
+                if(nextjsApplication.isNextJsApp()) {
+                    nextjsApplication.install(options);
+                } else {
+                    reactApplication.install(options);
+                }
+
                 return;
             }
 
@@ -54,23 +81,16 @@ const run = async(commands, options, devextremeConfig) => {
                 return;
             }
 
-            if(devextremeConfig.applicationEngine === 'angular') {
-                if(commands[1] === 'view') {
-                    angularApplication.addView(commands[2], options);
-                } else {
-                    console.error('Invalid command');
-                    printHelp(commands[0]);
-                }
-            } else if(devextremeConfig.applicationEngine === 'react') {
-                if(commands[1] === 'view') {
-                    reactApplication.addView(commands[2], options);
-                } else {
-                    console.error('Invalid command');
-                    printHelp(commands[0]);
-                }
-            } else if(devextremeConfig.applicationEngine === 'vue') {
+            const app = {
+                'angular': angularApplication,
+                'react': reactApplication,
+                'nextjs': nextjsApplication,
+                'vue': vueApplication,
+            }[devextremeConfig.applicationEngine];
+
+            if(app) {
                 if(commands[1] === 'view') {
-                    vueApplication.addView(commands[2], options);
+                    app.addView(commands[2], options);
                 } else {
                     console.error('Invalid command');
                     printHelp(commands[0]);

package/src/applications/application.angular.js

@@ -13,6 +13,7 @@ const modifyJson = require('../utility/modify-json-file');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
 const minNgCliVersion = new semver('17.0.0');
+const ngCliWithZoneless = new semver('20.0.0');
 
 async function runSchematicCommand(schematicCommand, options, evaluatingOptions) {
     const collectionName = 'devextreme-schematics';
@@ -63,6 +64,7 @@ function localPackageExists(packageName) {
 
 const hasSutableNgCli = async() => {
     const localVersion = ngVersion.getLocalNgVersion();
+
     if(!localVersion) {
         return false;
     }
@@ -83,6 +85,7 @@ const bumpAngular = (appPath, versionTag) => {
             for(const depName in section) {
                 section[depName] = depName.startsWith('@angular') ? versionTag : section[depName];
             }
+            return section;
         };
 
         return {
@@ -97,6 +100,7 @@ const bumpAngular = (appPath, versionTag) => {
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
     const depsVersionTag = extractDepsVersionTag(options);
+    const currentNgVersion = ngVersion.getNgCliVersion().version;
 
     const commandArguments = [
         'new',
@@ -105,10 +109,14 @@ const create = async(appName, options) => {
         '--routing=false',
         '--skip-tests=true',
         '--skip-install=true',
-        '--standalone=false',
+        '--standalone=true',
         '--ssr=false'
     ];
 
+    if(ngCliWithZoneless.compare(currentNgVersion) <= 0) {
+        commandArguments.push('--zoneless=false');
+    }
+
     await runNgCommand(commandArguments, options);
 
     const appPath = path.join(process.cwd(), appName);
@@ -150,9 +158,9 @@ const changeMainTs = (appPath) => {
     moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
 
     const fileContent = fs.readFileSync(filePath).toString();
-    const bootstrapPattern = /platformBrowser(?:Dynamic)?\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
+    const bootstrapPattern = /bootstrapApplication\([^)]+\)/;
     const firstChaptStr = fileContent.match(bootstrapPattern)[0];
-    const lastChaptStr = '.catch(err => console.error(err));';
+    const lastChaptStr = '.catch((err) => console.error(err));';
 
     fs.writeFileSync(
         filePath,

package/src/applications/application.nextjs.js

@@ -0,0 +1,231 @@
+const runCommand = require('../utility/run-command');
+const path = require('path');
+const fs = require('fs');
+const getLayoutInfo = require('../utility/prompts/layout');
+const getTemplateTypeInfo = require('../utility/prompts/typescript');
+const templateCreator = require('../utility/template-creator');
+const packageManager = require('../utility/package-manager');
+const packageJsonUtils = require('../utility/package-json-utils');
+const insertItemToArray = require('../utility/file-content').insertItemToArray;
+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 { extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
+const {
+    updateJsonPropName,
+    bumpReact,
+    getCorrectPath,
+    addStylesToApp,
+    getComponentPageName,
+} = require('./application.react');
+
+const defaultStyles = [
+    'devextreme/dist/css/dx.light.css'
+];
+
+const isNextJsApp = () => {
+    const appPath = process.cwd();
+
+    return fs.existsSync(path.join(appPath, 'next.config.ts')) || fs.existsSync(path.join(appPath, 'next.config.mjs'));
+};
+
+const isTsApp = (appPath) => {
+    return fs.existsSync(path.join(appPath, 'next.config.ts'));
+};
+
+const getExtension = (appPath) => {
+    return fs.existsSync(path.join(appPath, 'src/app', 'layout.tsx')) ? '.tsx' : '.jsx';
+};
+
+const pathToPagesIndex = () => {
+    const extension = getExtension(process.cwd());
+    return path.join(process.cwd(), 'src', 'views', `index${extension}`);
+};
+
+const preparePackageJsonForTemplate = (appPath, appName) => {
+    const dependencies = [
+        { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
+        { name: 'jose', version: latestVersions['jose'] },
+    ];
+    const scripts = [
+        { name: 'build-themes', value: 'devextreme build' },
+        { name: 'postinstall', value: 'npm run build-themes' }
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+    packageJsonUtils.updateScripts(appPath, scripts);
+    packageJsonUtils.updateName(appPath, appName);
+};
+
+const create = async(appName, options) => {
+    const templateType = await getTemplateTypeInfo(options.template);
+    const layoutType = await getLayoutInfo(options.layout);
+
+    const templateOptions = Object.assign({}, options, {
+        project: stringUtils.humanize(appName),
+        layout: stringUtils.classify(layoutType),
+        isTypeScript: typescriptUtils.isTypeScript(templateType)
+    });
+    const depsVersionTag = extractDepsVersionTag(options);
+
+    let commandArguments = [`-p=create-next-app@${depsVersionTag || latestVersions['create-next-app']}`, 'create-next-app', appName];
+
+    commandArguments = [
+        ...commandArguments,
+        `${templateOptions.isTypeScript ? '--typescript' : '--javascript'}`,
+        '--eslint',
+        '--no-tailwind',
+        '--src-dir',
+        '--app',
+        '--no-turbopack',
+        '--import-alias "@/*"',
+    ];
+
+    await runCommand('npx', commandArguments);
+
+    const appPath = path.join(process.cwd(), appName);
+
+    if(depsVersionTag) {
+        bumpReact(appPath, depsVersionTag, templateOptions.isTypeScript);
+    }
+
+    addTemplate(appPath, appName, templateOptions);
+    modifyAppFiles(appPath, templateOptions);
+};
+
+const modifyAppFiles = (appPath, { project, isTypeScript }) => {
+    const entryFilePath = path.join(appPath, `src/app/layout.${isTypeScript ? 'tsx' : 'jsx'}`);
+
+    let content = fs.readFileSync(entryFilePath).toString();
+    content = content.replace(/<title>[^<]+<\/title>/, `<title>${project}<\/title>`);
+
+    fs.writeFileSync(entryFilePath, content);
+};
+
+const addTemplate = (appPath, appName, templateOptions) => {
+    const applicationTemplatePath = path.join(
+        templateCreator.getTempaltePath('nextjs'),
+        'application'
+    );
+
+    const manifestPath = path.join(appPath, 'public', 'manifest.json');
+
+    const styles = [
+        '../dx-styles.scss',
+        '../themes/generated/theme.additional.css',
+        '../themes/generated/theme.additional.dark.css',
+        '../themes/generated/theme.base.css',
+        '../themes/generated/theme.base.dark.css',
+        'devextreme/dist/css/dx.common.css'
+    ];
+
+    templateCreator.moveTemplateFilesToProject(applicationTemplatePath, appPath, templateOptions, getCorrectPath);
+
+    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.jsx'));
+    removeFile(path.join(appPath, 'src/app', 'page.js'));
+    removeFile(path.join(appPath, 'src/app', 'layout.js'));
+    removeFile(path.join(appPath, 'src/app', 'globals.scss'));
+
+    if(!templateOptions.empty) {
+        addSamplePages(appPath, templateOptions);
+    }
+
+    preparePackageJsonForTemplate(appPath, appName, templateOptions.isTypeScript);
+    updateJsonPropName(manifestPath, appName);
+    install({ isTypeScript: templateOptions.isTypeScript }, appPath, styles);
+};
+
+const getEntryFilePath = (options, appPath) => {
+    const extension = options.isTypeScript || isTsApp(appPath) ? 'ts' : 'js';
+    const srcFolder = fs.existsSync(path.join(appPath, 'src')) ? 'src' : '';
+    const isAppRouterApp = fs.existsSync(path.join(appPath, srcFolder, 'app')) && fs.lstatSync(appPath).isDirectory();
+
+    const entryFilePath = isAppRouterApp
+        ? path.join('app', `layout.${extension}`)
+        : path.join('pages', `_app.${extension}`);
+
+    const jsx = fs.existsSync(path.join(appPath, srcFolder, entryFilePath + 'x')) ? 'x' : '';
+
+    return path.join(srcFolder, entryFilePath + jsx);
+};
+
+const install = (options, appPath, styles) => {
+    appPath = appPath ? appPath : process.cwd();
+
+    const pathToMainComponent = path.join(appPath, getEntryFilePath(options, appPath));
+
+    addStylesToApp(pathToMainComponent, styles || defaultStyles);
+    packageJsonUtils.addDevextreme(appPath, options.dxversion, 'react');
+
+    packageManager.runInstall({ cwd: appPath });
+};
+
+const getNavigationData = (viewName, componentName, icon) => {
+    const pagePath = stringUtils.dasherize(viewName);
+    return {
+        navigation: `\n  {\n    text: \'${stringUtils.humanize(viewName)}\',\n    path: \'/pages/${pagePath}\',\n    icon: \'${icon}\'\n  }`
+    };
+};
+
+const createPathToPage = (pageName) => {
+    const pagesPath = path.join(process.cwd(), 'src', 'app/pages');
+    const newPageFolderPath = path.join(pagesPath, pageName);
+
+    if(!fs.existsSync(pagesPath)) {
+        fs.mkdirSync(pagesPath);
+        fs.writeFileSync(pathToPagesIndex(), '');
+    }
+
+    if(!fs.existsSync(newPageFolderPath)) {
+        fs.mkdirSync(newPageFolderPath);
+    }
+
+    return newPageFolderPath;
+};
+
+const addSamplePages = (appPath, templateOptions) => {
+    const samplePageTemplatePath = path.join(
+        templateCreator.getTempaltePath('nextjs'),
+        'sample-pages'
+    );
+
+    const pagesPath = path.join(appPath, 'src', 'app/pages');
+
+    templateCreator.moveTemplateFilesToProject(samplePageTemplatePath, pagesPath, {
+        isTypeScript: templateOptions.isTypeScript
+    }, getCorrectPath);
+};
+
+const addView = (pageName, options) => {
+    const pageTemplatePath = path.join(
+        templateCreator.getTempaltePath('nextjs'),
+        'page'
+    );
+    const extension = getExtension(process.cwd());
+
+    const componentName = getComponentPageName(pageName);
+    const pathToPage = createPathToPage(pageName);
+    const navigationModulePath = path.join(process.cwd(), 'src', `app-navigation${extension}`);
+    const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder');
+
+    const getCorrectExtension = (fileExtension) => {
+        return fileExtension === '.tsx' ? extension : fileExtension;
+    };
+
+    const getPageFileName = (pageName, pageItem) => {
+        return pageItem === 'page.tsx' ? 'page' : pageName;
+    };
+
+    templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension, { getPageFileName });
+
+    insertItemToArray(navigationModulePath, navigationData.navigation);
+};
+
+module.exports = {
+    isNextJsApp,
+    install,
+    create,
+    addTemplate,
+    addView
+};

package/src/applications/application.react.js

@@ -52,14 +52,19 @@ const updateJsonPropName = (path, name) => {
     });
 };
 
-const bumpReact = (appPath, versionTag) => {
+const bumpReact = (appPath, versionTag, isTypeScript) => {
     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 },
     ];
 
+    if(isTypeScript) {
+        dependencies.push(
+            { name: '@types/react', version: versionTag, dev: true },
+            { name: '@types/react-dom', version: versionTag, dev: true },
+        );
+    }
+
     packageJsonUtils.addDependencies(appPath, dependencies);
 };
 
@@ -86,7 +91,7 @@ const create = async(appName, options) => {
     modifyIndexHtml(appPath, templateOptions.project);
 
     if(depsVersionTag) {
-        bumpReact(appPath, depsVersionTag);
+        bumpReact(appPath, depsVersionTag, templateOptions.isTypeScript);
     }
 
     addTemplate(appPath, appName, templateOptions);
@@ -219,5 +224,10 @@ module.exports = {
     install,
     create,
     addTemplate,
-    addView
+    addView,
+    updateJsonPropName,
+    bumpReact,
+    getCorrectPath,
+    addStylesToApp,
+    getComponentPageName,
 };

package/src/templates/nextjs/application/.env

@@ -0,0 +1 @@
+SESSION_SECRET=<your_secret_key_goes_here>

package/src/templates/nextjs/application/devextreme.json

@@ -0,0 +1,63 @@
+{
+  "applicationEngine": "nextjs",
+  "build": {
+      "commands": [
+          {
+              "command": "build-theme",
+              "options": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "outputFile": "src/themes/generated/theme.base.css"
+              }
+          },
+          {
+            "command": "build-theme",
+            "options": {
+              "inputFile": "src/themes/metadata.base.dark.json",
+              "outputFile": "src/themes/generated/theme.base.dark.css"
+            }
+          },
+          {
+              "command": "build-theme",
+              "options": {
+                  "inputFile": "src/themes/metadata.additional.json",
+                  "outputFile": "src/themes/generated/theme.additional.css"
+              }
+          },
+          {
+            "command": "build-theme",
+            "options": {
+              "inputFile": "src/themes/metadata.additional.dark.json",
+              "outputFile": "src/themes/generated/theme.additional.dark.css"
+            }
+          },
+          {
+              "command": "export-theme-vars",
+              "options": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "outputFile": "src/themes/generated/variables.base.scss"
+              }
+          },
+          {
+            "command": "export-theme-vars",
+            "options": {
+              "inputFile": "src/themes/metadata.base.dark.json",
+              "outputFile": "src/themes/generated/variables.base.dark.scss"
+            }
+          },
+          {
+              "command": "export-theme-vars",
+              "options": {
+                  "inputFile": "src/themes/metadata.additional.json",
+                  "outputFile": "src/themes/generated/variables.additional.scss"
+              }
+          },
+          {
+            "command": "export-theme-vars",
+            "options": {
+              "inputFile": "src/themes/metadata.additional.dark.json",
+              "outputFile": "src/themes/generated/variables.additional.dark.scss"
+            }
+          }
+      ]
+  }
+}

package/src/templates/nextjs/application/next.config.mjs

@@ -0,0 +1,32 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/pages/home',
+        permanent: true,
+      },
+      {
+        source: '/login',
+        destination: '/auth/login',
+        permanent: true,
+      },
+      {
+        source: '/reset-password',
+        destination: '/auth/reset-password',
+        permanent: true,
+      },
+      {
+        source: '/create-account',
+        destination: '/auth/create-account',
+        permanent: true,
+      },
+    ]
+  },
+  images: {
+    remotePatterns: [new URL('https://js.devexpress.com/**')]
+  },
+}
+
+export default nextConfig;

package/src/templates/nextjs/application/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/src/templates/nextjs/application/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/templates/nextjs/application/src/app/actions/auth.ts

@@ -0,0 +1,76 @@
+'use server'
+import { redirect } from 'next/navigation'
+import defaultUser from '@/utils/default-user';
+import { createSession, deleteSession } from '@/app/lib/session'
+
+export async function signUp(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  try {
+    // 1. Check if the user exists in the database and return isOk: false if so;
+    // 2. Otherwise, add the user to the database.
+    console.log(email, password);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to create an account',
+    }
+  }
+}
+
+export async function signIn(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  try {
+    // Verify that a user exists
+    console.log(email, password);
+
+    await createSession(defaultUser.id);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to sign in',
+    }
+  }
+}
+
+export async function signOut() {
+  await deleteSession();
+  redirect('/login');
+}
+
+export async function changePassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>, recoveryCode<%=#isTypeScript%>?: string<%=/isTypeScript%>) {
+  try {
+    // Verify the recovery code
+    console.log(email, recoveryCode);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to change the password',
+    }
+  }
+}
+
+export async function resetPassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  try {
+    // Reset password
+    console.log(email);
+
+    return {
+      isOk: true,
+    }
+  } catch {
+    return {
+      isOk: false,
+      message: 'Unable to reset password',
+    }
+  }
+}