Refactor angular wrappers popupService files generation (#28761)

Co-authored-by: alexlavrov <alex.s.lavrov@gmail.com>

Author: GoodDayForSurf

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.2",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.2.0",
+    "devextreme-internal-tools": "16.3.0",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-angular/build.config.js

@@ -1,82 +1,81 @@
 module.exports = {
-    tools: {
-        metadataGenerator: {
-            sourceMetadataFilePath: './metadata/NGMetaData.json',
-            imdMetadataFilePath: './metadata/integration-data.json',
-            outputFolderPath: './metadata/generated',
-            nestedPathPart: 'nested',
-            basePathPart: 'base',
-            widgetPackageName: "devextreme",
-            wrapperPackageName: 'devextreme-angular',
-            generateReexports: true,
-        },
-        componentGenerator: {
-            metadataFolderPath: './metadata/generated/',
-            outputFolderPath: './src/ui/',
-            nestedPathPart: 'nested',
-            basePathPart: 'base'
-        },
-        facadeGenerator: {
-            facades: {
-                './src/index.ts': {
-                    sourceDirectories: [
-                        './metadata/generated'
-                    ]
-                }
-            },
-            commonImports: [
-                './common',
-                './common/grids',
-                './common/charts',
-            ]
-        },
-        moduleFacadeGenerator: {
-            moduleFacades: {
-                './src/ui/all.ts': {
-                    sourceComponentDirectories: [
-                        './src/ui'
-                    ],
-                    additionalImports: {
-                        'DxTemplateModule': 'import { DxTemplateModule } from \'devextreme-angular/core\''
-                    }
-                }
-            }
-        },
-        componentNamesGenerator: {
-            componentFilesPath: './src/ui/',
-            excludedFileNames: [
-                'nested',
-                'validation-group',
-                'validation-summary',
-                'validator',
-                'button-group',
-                'drop-down-button',
-                'file-manager' ],
-            outputFileName: 'tests/src/server/component-names.ts'
-        },
-        commonReexportsGenerator: {
-            imdMetadataFilePath: './metadata/integration-data.json',
-            outputPath: './src/'
+  tools: {
+    metadataGenerator: {
+      sourceMetadataFilePath: './metadata/NGMetaData.json',
+      imdMetadataFilePath: './metadata/integration-data.json',
+      outputFolderPath: './metadata/generated',
+      nestedPathPart: 'nested',
+      basePathPart: 'base',
+      widgetPackageName: 'devextreme',
+      wrapperPackageName: 'devextreme-angular',
+      generateReexports: true,
+    },
+    componentGenerator: {
+      metadataFolderPath: './metadata/generated/',
+      outputFolderPath: './src/ui/',
+      entryFileNames: {
+        popup: 'component.ts',
+      },
+      nestedPathPart: 'nested',
+      basePathPart: 'base',
+    },
+    facadeGenerator: {
+      facades: {
+        './src/index.ts': {
+          sourceDirectories: [
+            './metadata/generated',
+          ],
         },
+      },
+      commonImports: [
+        './common',
+        './common/grids',
+        './common/charts',
+      ],
     },
-    afterGenerate: {
-        preserveComponentFiles: ['popup/service', 'popup/index.ts'],
-        renameGeneratedFiles: [{ path: 'popup/index.ts', newName: 'component.ts' }],
-        temporaryFolderForPreserved: './tmp-preserved/'
+    moduleFacadeGenerator: {
+      moduleFacades: {
+        './src/ui/all.ts': {
+          sourceComponentDirectories: [
+            './src/ui',
+          ],
+          additionalImports: {
+            DxTemplateModule: 'import { DxTemplateModule } from \'devextreme-angular/core\'',
+          },
+        },
+      },
     },
-    components: {
-        srcFilesPattern: '**/*.ts',
-        tsTestSrc: ['tests/src/**/*.spec.ts', 'tests/src/**/component-names.ts'],
-        testsPath: 'tests/dist',
-        sourcesGlobs: ['src/**/*.*', './package.json', './ng-package.json'],
-        tsSourcesGlob: 'src/**/*.ts',
-        outputPath: 'dist'
+    componentNamesGenerator: {
+      componentFilesPath: './src/ui/',
+      excludedFileNames: [
+        'nested',
+        'validation-group',
+        'validation-summary',
+        'validator',
+        'button-group',
+        'drop-down-button',
+        'file-manager'],
+      outputFileName: 'tests/src/server/component-names.ts',
     },
-    tests: {
-        tsConfigPath: "tsconfig.tests.json"
+    commonReexportsGenerator: {
+      imdMetadataFilePath: './metadata/integration-data.json',
+      outputPath: './src/',
     },
-    npm: {
-        distPath: "npm/dist",
-        content: [ "./LICENSE", "./README.md" ]
-    }
+  },
+  components: {
+    srcFilesPattern: '**/*.ts',
+    tsTestSrc: ['tests/src/**/*.spec.ts', 'tests/src/**/component-names.ts'],
+    testsPath: 'tests/dist',
+    sourcesGlobs: ['src/**/*.*', './package.json', './ng-package.json'],
+    skipFromCleaningFiles: ['popup/service/**', 'popup/index.ts'],
+    tsSourcesGlob: 'src/**/*.ts',
+    outputPath: 'dist',
+  },
+  tests: {
+    tsConfigPath: 'tsconfig.tests.json',
+  },
+  npm: {
+    distPath: 'npm/dist',
+    content: ['./LICENSE', './README.md'],
+  },
 };

packages/devextreme-angular/gulpfile.js

@@ -41,7 +41,30 @@ gulp.task('generate.metadata', gulp.series('clean.metadata', (done) => {
 
 gulp.task('clean.generatedComponents', (done) => {
   const { outputFolderPath } = buildConfig.tools.componentGenerator;
-  del.sync([`${outputFolderPath}/**`]);
+  const { skipFromCleaningFiles } = buildConfig.components;
+
+  del.sync([
+    `${outputFolderPath}/*/**`,
+    ...skipFromCleaningFiles.flatMap(keepPattern => {
+      const pathParts = keepPattern.match(/[\*\/]$/) ? keepPattern.split('/') : [keepPattern];
+
+      const patternsToKeep = pathParts.reduce((acc, pathPart) => {
+
+        if(pathPart) {
+          acc.path += '/' + pathPart;
+          acc.patterns.push(`!${acc.path}`);
+        }
+
+        return acc;
+      }, {
+        patterns: [],
+        path: outputFolderPath.replace(/\/$/,'')
+      }).patterns;
+
+      return patternsToKeep;
+    })
+  ]);
+
   done();
 });
 
@@ -109,51 +132,6 @@ gulp.task('generate.common-reexports', (done) => {
   done();
 });
 
-gulp.task('after-generate.rename-files', (done) => {
-  const { outputFolderPath } = buildConfig.tools.componentGenerator;
-  const { renameGeneratedFiles } = buildConfig.afterGenerate;
-  const rename = require('gulp-rename');
-
-  const actions = (renameGeneratedFiles || []).map(({ path, newName }) =>
-      () =>  gulp
-          .src(outputFolderPath + path)
-          .pipe(rename(newName))
-          .pipe(gulp.dest((file) => file.base))
-  );
-
-  gulp.parallel(...actions)(done);
-});
-
-gulp.task('after-generate.restore-preserved', (done) => {
-  const { outputFolderPath } = buildConfig.tools.componentGenerator;
-  const { preserveComponentFiles, temporaryFolderForPreserved } = buildConfig.afterGenerate;
-
-  const actions = preserveComponentFiles.map((folderOrFile) => {
-    let src = temporaryFolderForPreserved + folderOrFile;
-    let dest = outputFolderPath + folderOrFile;
-    const isFile = fs.statSync(src).isFile();
-
-    if (isFile) {
-      dest = path.dirname(dest);
-    } else {
-      src += `/**/*`;
-    }
-
-    return () => gulp.src(src).pipe(gulp.dest(dest));
-  });
-
-  gulp.parallel(...actions)(() => fs.rm(
-      temporaryFolderForPreserved,
-      { recursive: true, force: true },
-      (err) => done(err)
-  ));
-});
-
-gulp.task('after-generate', gulp.series(
-    'after-generate.rename-files',
-    'after-generate.restore-preserved',
-));
-
 gulp.task('build.license-headers', () => {
   const config = buildConfig.components;
   const pkg = require('./package.json');
@@ -264,10 +242,8 @@ const buildTask = gulp.series('build.components');
 gulp.task('build', buildTask);
 gulp.task('default', buildTask);
 gulp.task('generate', gulp.series(
-  'before-generate.preserve-component-files',
   'generate.facades',
   'generate.common-reexports',
-  'after-generate',
 ));
 
 // ------------Testing------------