revive CI tasks that test against latest scaffolder and framework versions (#930)

Author: VasilyStrelyaev

.github/workflows/applications.yml

@@ -5,9 +5,9 @@ on:
   pull_request:
   workflow_call:
     inputs:
-      external-tools-version:
-        description: 'Version of external tools'
-        default: latest
+      deps-version-tag:
+        description: 'Version tag of scaffolder and framework'
+        default: ''
         required: false
         type: string
 
@@ -32,7 +32,7 @@ jobs:
     runs-on: ${{ matrix.OS }}
     env:
       VUE_CLI_CONFIG_PATH: $GITHUB_WORKSPACE/.vuerc
-      TOOLING_VERSION_PARAM: ${{ inputs.external-tools-version != '' && format('--tooling-version {0}', inputs.external-tools-version) || '' }}
+      DEPS_VERSION_TAG_PARAM: ${{ inputs.deps-version-tag != '' && format('--deps-version-tag {0}', inputs.deps-version-tag) || '' }}
 
     name: ${{ matrix.APPROACH }}, node ${{ matrix.NODE }}, ${{ matrix.OS }}
 
@@ -54,7 +54,7 @@ jobs:
       run: npm config set legacy-peer-deps true
 
     - name: Create ${{ matrix.APPROACH }} application
-      run: npm run create-template -- -- -e ${{ matrix.APPROACH }} ${{ env.TOOLING_VERSION_PARAM }}
+      run: npm run create-template -- -- -e ${{ matrix.APPROACH }} ${{ env.DEPS_VERSION_TAG_PARAM }}
       timeout-minutes: 30
 
     - name: Install Internal Packages
@@ -64,14 +64,14 @@ jobs:
 
     - name: Lint created application
       if: ${{ matrix.OS != 'windows-latest' }}
-      run: npm run lint-template -- -- -e ${{ matrix.APPROACH }} ${{ env.TOOLING_VERSION_PARAM }}
+      run: npm run lint-template -- -- -e ${{ matrix.APPROACH }} ${{ env.DEPS_VERSION_TAG_PARAM }}
 
     - name: Run template tests
       if: ${{ matrix.OS != 'windows-latest' }}
       env:
         LAUNCH_BROWSER: true
         CHROME_PATH: ${{ steps.setup-chrome.outputs.chrome-path }}
-      run: npm run test-template -- -- -e ${{ matrix.APPROACH }} ${{ env.TOOLING_VERSION_PARAM }}
+      run: npm run test-template -- -- -e ${{ matrix.APPROACH }} ${{ env.DEPS_VERSION_TAG_PARAM }}
       timeout-minutes: 40
 
     - name: Archive artifacts

.github/workflows/schedule-cli-tests-latest-version.yml

@@ -10,7 +10,7 @@ jobs:
     name: Run CLI tests
     uses: ./.github/workflows/applications.yml
     with:
-      external-tools-version: latest
+      external-tools-version-tag: latest
 
   teams_notification_on_failure:
     name: Send Teams notification

.github/workflows/schedule-cli-tests-next-version.yml

@@ -2,15 +2,15 @@ name: Schedule tests for next versions of external CLIs
 
 on:
   workflow_dispatch:
-  schedule:
-    - cron: "0 1 * * 1"
+  # schedule:
+  #   - cron: "0 1 * * 1"
 
 jobs:
   call_tests_workflow:
     name: Run CLI tests
     uses: ./.github/workflows/applications.yml
     with:
-      external-tools-version: next
+      external-tools-version-tag: next
 
   teams_notification_on_failure:
     name: Send Teams notification

packages/devextreme-cli/src/applications/application.angular.js

@@ -7,7 +7,9 @@ const fs = require('fs');
 const dasherize = require('../utility/string').dasherize;
 const ngVersion = require('../utility/ng-version');
 const latestVersions = require('../utility/latest-versions');
-const { extractToolingVersion, toolingVersionOptionName } = require('../utility/extract-tooling-version');
+const { extractDepsVersionTag, depsVersionTagOptionName } = require('../utility/extract-deps-version-tag');
+const { getPackageJsonPath } = require('../utility/package-json-utils');
+const modifyJson = require('../utility/modify-json-file');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
 const minNgCliVersion = new semver('17.0.0');
@@ -27,7 +29,7 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
 
     const commandArguments = ['g', `${collectionName}:${schematicCommand}`];
 
-    const { [toolingVersionOptionName]: _, ...optionsToArguments } = options; // eslint-disable-line no-unused-vars
+    const { [depsVersionTagOptionName]: _, ...optionsToArguments } = options; // eslint-disable-line no-unused-vars
     for(let option in optionsToArguments) {
         commandArguments.push(`--${dasherize(option)}=${options[option]}`);
     }
@@ -37,12 +39,13 @@ async function runSchematicCommand(schematicCommand, options, evaluatingOptions)
 
 async function runNgCommand(commandArguments, commandOptions, commandConfig) {
     const hasNg = await hasSutableNgCli();
-    const toolingVersion = extractToolingVersion(commandOptions);
-    const npmCommandName = hasNg && !toolingVersion ? 'ng' : 'npx';
+    const depsVersionTag = extractDepsVersionTag(commandOptions);
+    const npmCommandName = hasNg && !depsVersionTag ? 'ng' : 'npx';
     const [minCliLtsVersion] = minNgCliVersion.version.split('.');
-    const ngCommandArguments = hasNg && !toolingVersion
+
+    const ngCommandArguments = hasNg && !depsVersionTag
         ? []
-        : ['-p', `@angular/cli@v${minCliLtsVersion}-lts`, 'ng'];
+        : ['-p', `@angular/cli@${depsVersionTag || `v${minCliLtsVersion}-lts`}`, 'ng'];
 
     ngCommandArguments.push(...commandArguments);
     return runCommand(npmCommandName, ngCommandArguments, commandConfig);
@@ -74,8 +77,26 @@ const install = async(options) => {
     });
 };
 
+const bumpAngular = (appPath, versionTag) => {
+    modifyJson(getPackageJsonPath(appPath), ({ dependencies, devDependencies, ...rest }) => {
+        const bump = (section) => {
+            for(const depName in section) {
+                section[depName] = depName.startsWith('@angular') ? versionTag : section[depName];
+            }
+        };
+
+        return {
+            dependencies: bump(dependencies),
+            devDependencies: bump(devDependencies),
+            ...rest,
+        };
+    });
+
+};
+
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const depsVersionTag = extractDepsVersionTag(options);
 
     const commandArguments = [
         'new',
@@ -92,6 +113,10 @@ const create = async(appName, options) => {
 
     const appPath = path.join(process.cwd(), appName);
 
+    if(depsVersionTag) {
+        bumpAngular(appPath, depsVersionTag);
+    }
+
     options.resolveConflicts = 'override';
     options.updateBudgets = true;
     options.layout = layout;

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

@@ -14,6 +14,7 @@ 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 defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
@@ -51,6 +52,17 @@ const updateJsonPropName = (path, name) => {
     });
 };
 
+const bumpReact = (appPath, versionTag) => {
+    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 },
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+};
+
 const create = async(appName, options) => {
     const templateType = await getTemplateTypeInfo(options.template);
     const transpiler = await getTranspilerTypeInfo(options.transpiler);
@@ -61,8 +73,9 @@ const create = async(appName, options) => {
         layout: stringUtils.classify(layoutType),
         isTypeScript: typescriptUtils.isTypeScript(templateType)
     });
+    const depsVersionTag = extractDepsVersionTag(options);
 
-    const commandArguments = [`-p=create-vite@${latestVersions['create-vite']}`, 'create-vite', appName];
+    const commandArguments = [`-p=create-vite@${depsVersionTag || latestVersions['create-vite']}`, 'create-vite', appName];
 
     commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
 
@@ -72,6 +85,10 @@ const create = async(appName, options) => {
 
     modifyIndexHtml(appPath, templateOptions.project);
 
+    if(depsVersionTag) {
+        bumpReact(appPath, depsVersionTag);
+    }
+
     addTemplate(appPath, appName, templateOptions);
 };
 

packages/devextreme-cli/src/applications/application.vue.js

@@ -9,7 +9,7 @@ const insertItemToArray = require('../utility/file-content').insertItemToArray;
 const moduleUtils = require('../utility/module');
 const stringUtils = require('../utility/string');
 const latestVersions = require('../utility/latest-versions');
-const { toolingVersionOptionName, extractToolingVersion } = require('../utility/extract-tooling-version');
+const { depsVersionTagOptionName, extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
@@ -37,25 +37,42 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
     packageJsonUtils.updateName(appPath, appName);
 };
 
-async function createVueApp(name, templateOptions) {
-    const toolingVersion = extractToolingVersion(templateOptions);
-    const argList = ['-p', `@vue/cli${toolingVersion}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
+async function createVueApp(name, depsVersionTag) {
+    const argList = ['-p', `@vue/cli@${depsVersionTag}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
 
     return runCommand('npx', argList);
 }
 
+const bumpVue = (appPath, versionTag) => {
+    const dependencies = [
+        { name: 'vue', version: versionTag },
+        { name: 'vue-router', version: versionTag },
+        { name: '@vue/cli-plugin-babel', version: versionTag, dev: true },
+        { name: '@vue/cli-plugin-eslint', version: versionTag, dev: true },
+        { name: '@vue/cli-service', version: versionTag, dev: true },
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+};
+
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const depsVersionTag = extractDepsVersionTag(options);
 
     const templateOptions = {
         project: stringUtils.humanize(appName),
         layout: layout,
-        [toolingVersionOptionName]: options[toolingVersionOptionName]
+        [depsVersionTagOptionName]: options[depsVersionTagOptionName]
     };
 
-    await createVueApp(appName, templateOptions);
+    await createVueApp(appName, depsVersionTag);
 
     const appPath = path.join(process.cwd(), appName);
+
+    if(depsVersionTag) {
+        bumpVue(appPath, depsVersionTag);
+    }
+
     modifyIndexHtml(appPath, templateOptions.project);
     addTemplate(appPath, appName, templateOptions);
 };

packages/devextreme-cli/src/utility/extract-deps-version-tag.js

@@ -0,0 +1,13 @@
+const depsVersionTagOptionName = 'deps-version-tag';
+
+const extractDepsVersionTag = (commandOptions) => {
+    if(commandOptions && commandOptions[depsVersionTagOptionName]) {
+        return commandOptions[depsVersionTagOptionName];
+    }
+    return '';
+};
+
+module.exports = {
+    depsVersionTagOptionName,
+    extractDepsVersionTag,
+};

packages/devextreme-cli/src/utility/extract-tooling-version.js

@@ -1,5 +1,5 @@
 const minimist = require('minimist');
-const { toolingVersionOptionName } = require('../src/utility/extract-tooling-version');
+const { depsVersionTagOptionName } = require('../src/utility/extract-deps-version-tag');
 const envs = require('./constants').envs;
 
 const args = minimist(process.argv.slice(2), {
@@ -17,10 +17,10 @@ const args = minimist(process.argv.slice(2), {
         ? envs
         : envs.filter(e => e.engine === args.e);
 
-    const toolingVersion = args[toolingVersionOptionName];
+    const depsVersionTag = args[depsVersionTagOptionName];
     filteredEnvs.forEach(async env => {
         try {
-            await env.createApp(toolingVersion);
+            await env.createApp(depsVersionTag);
         } catch(e) {
             process.exit(1);
         }

packages/devextreme-cli/testing/creating.js

@@ -4,7 +4,7 @@ const path = require('path');
 const packageManager = require('../src/utility/package-manager');
 const rimraf = require('./utils/rimraf-async');
 const runCommand = require('../src/utility/run-command');
-const { toolingVersionOptionName } = require('../src/utility/extract-tooling-version');
+const { depsVersionTagOptionName } = require('../src/utility/extract-deps-version-tag');
 
 const appName = 'my-app';
 const sandboxPath = path.join(process.cwd(), './testing/sandbox/angular');
@@ -31,12 +31,12 @@ exports.deployPath = path.join(appPath, 'dist', 'my-app', 'browser');
 exports.npmArgs = ['run', 'build', '--', '--configuration', 'development'];
 exports.fileExtension = 'ts';
 
-exports.createApp = async(toolingVersion) => {
+exports.createApp = async(depsVersionTag) => {
     await rimraf(sandboxPath);
     fs.mkdirSync(sandboxPath, { recursive: true });
 
     await prepareSchematics();
-    const additionalArguments = toolingVersion && [`--${toolingVersionOptionName} ${toolingVersion}`] || [];
+    const additionalArguments = depsVersionTag && [`--${depsVersionTagOptionName} ${depsVersionTag}`] || [];
     await runCommand('node', [
         path.join(process.cwd(), './index.js'),
         'new',