@pega/custom-dx-components 26.1.12-alpha.0.4 → 26.1.12-alpha.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "26.1.12-alpha.0.4",
+  "version": "26.1.12-alpha.0.6",
   "description": "Utility for building custom UI components",
   "bin": {
     "custom-dx-components": "./bin/index.js"
@@ -37,7 +37,7 @@
     "@pega/constellation-dx-components-build-utils": "^2.0.18",
     "@pega/inquirer-fuzzy-path": "^4.0.0",
     "ajv": "^8.20.0",
-    "archiver": "^7.0.1",
+    "archiver": "^8.0.0",
     "arg": "^5.0.2",
     "chalk": "^6.0.1",
     "compression-webpack-plugin": "^12.0.0",
@@ -57,7 +57,6 @@
     "postcss": "^8.5.32",
     "postcss-loader": "8.2.1",
     "postcss-preset-env": "11.6.2",
-    "react-dev-utils": "^12.0.1",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^17.1.0",
     "terser-webpack-plugin": "5.6.1",

package/src/tasks/build-all/helper.js

@@ -1,7 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 
-import archiver from 'archiver';
+// archiver v8 has no default export; ZipArchive replaces the archiver('zip') factory.
+import { ZipArchive } from 'archiver';
 import chalk from 'chalk';
 
 import { getComponentDirectoryPath, getComponents, getPegaServerConfig, addDebugLog } from '../../util.js';
@@ -35,7 +36,7 @@ export const zipComponent = async (componentKey) => {
   const configJson = `${srcDirectory}/config.json`;
   const localizationJson = `${srcDirectory}/localizations.json`;
 
-  const archive = archiver('zip', { zlib: { level: 9 } });
+  const archive = new ZipArchive({ zlib: { level: 9 } });
   const zipChunks = [];
   archive.on('data', (chunk) => zipChunks.push(chunk));
 

package/src/tasks/build-comp/helper.js

@@ -1,7 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 
-import archiver from 'archiver';
+// archiver v8 has no default export; ZipArchive replaces the archiver('zip') factory.
+import { ZipArchive } from 'archiver';
 import chalk from 'chalk';
 
 import { constructCompleteUrl, getComponentDirectoryPath, getComponents, getPegaServerConfig, getFetchAgent, getLibraryBased } from '../../util.js';
@@ -55,7 +56,7 @@ export const zipComponent = async (componentKey) => {
 
   const localizationJson = `${srcDirectory}/localizations.json`;
 
-  const archive = archiver('zip', { zlib: { level: 9 } });
+  const archive = new ZipArchive({ zlib: { level: 9 } });
   const zipChunks = [];
   archive.on('data', (chunk) => zipChunks.push(chunk));
 

package/src/tasks/bundle/builder/index.js

@@ -1,7 +1,5 @@
 import chalk from 'chalk';
 import webpack from 'webpack';
-import FileSizeReporter from 'react-dev-utils/FileSizeReporter.js';
-import printBuildError from 'react-dev-utils/printBuildError.js';
 import { getUseWebPackPromotion, addDebugLog, emptyDirSync } from '../../../util.js';
 
 import paths from './paths.js';
@@ -27,22 +25,11 @@ process.on('unhandledRejection', (err) => {
   // process.exit(1);
 });
 
-const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-
 let compilationErrors = null;
 
 // Create the build and print the deployment instructions.
-function build(config, previousFileSizes, showStats = true) {
-  addDebugLog(
-    'bundle build',
-    `config: ${JSON.stringify(config)}, \npreviousFileSizes: ${JSON.stringify(previousFileSizes)}, showStats: ${showStats}`,
-    '',
-  );
+function build(config, showStats = true) {
+  addDebugLog('bundle build', `config: ${JSON.stringify(config)}, showStats: ${showStats}`, '');
 
   if (showStats) {
     console.log(`Creating a ${Env} build...`);
@@ -108,7 +95,6 @@ function build(config, previousFileSizes, showStats = true) {
 
       const resolveArgs = {
         stats,
-        previousFileSizes,
         warnings: messages.warnings,
       };
       return resolve(resolveArgs);
@@ -137,16 +123,16 @@ export default async ({ inputFile, outputFile, componentKey, externals, globals,
   }
 
   return new Promise((resolve, reject) => {
-    measureFileSizesBeforeBuild(paths.appBuild)
-      .then((previousFileSizes) => {
+    Promise.resolve()
+      .then(() => {
         // Remove all content but keep the directory so that
         // if you're in it, you don't end up in Trash
         emptyDirSync(paths.appBuild);
         // Start the webpack build
-        return build(config, previousFileSizes, showStats);
+        return build(config, showStats);
       })
       .then(
-        ({ stats, previousFileSizes, warnings }) => {
+        ({ warnings }) => {
           if (showStats) {
             if (warnings.length) {
               // console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
@@ -157,9 +143,6 @@ export default async ({ inputFile, outputFile, componentKey, externals, globals,
             } else {
               console.log(chalk.green('Compiled successfully.\n'));
             }
-
-            console.log('File sizes after gzip:\n');
-            printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild, WARN_AFTER_BUNDLE_GZIP_SIZE, WARN_AFTER_CHUNK_GZIP_SIZE);
           }
 
           resolve('done emitting');
@@ -169,7 +152,7 @@ export default async ({ inputFile, outputFile, componentKey, externals, globals,
           const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
           if (tscCompileOnError) {
             console.log(chalk.yellow('Compiled with the following type errors (you may want to check these before deploying your app):\n'));
-            printBuildError(err);
+            console.log(err);
           } else if (compilationErrors != null) {
             if (compilationErrors.length == undefined) {
               console.log(chalk.red('Error...'), compilationErrors.message);
@@ -182,7 +165,7 @@ export default async ({ inputFile, outputFile, componentKey, externals, globals,
             // process.exit(1);
           } else {
             console.log(chalk.red('Failed to compile.\n'));
-            printBuildError(JSON.stringify(err));
+            console.log(JSON.stringify(err));
           }
         },
       )

package/src/tasks/bundle/builder/webpack.config.js

@@ -4,8 +4,6 @@ import webpack from 'webpack';
 import TerserPlugin from 'terser-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
-import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent.js';
-import ModuleNotFoundPlugin from 'react-dev-utils/ModuleNotFoundPlugin.js';
 import CompressionPlugin from 'compression-webpack-plugin';
 
 import paths from './paths.js';
@@ -200,9 +198,6 @@ export default (
               use: getStyleLoaders({
                 importLoaders: 1,
                 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-                modules: {
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
               }),
             },
             // Opt-in support for SASS (using .scss or .sass extensions).
@@ -232,9 +227,6 @@ export default (
                 {
                   importLoaders: 3,
                   sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-                  modules: {
-                    getLocalIdent: getCSSModuleLocalIdent,
-                  },
                 },
                 'sass-loader',
               ),
@@ -262,9 +254,6 @@ export default (
       ],
     },
     plugins: [
-      // This gives some necessary context to module not found errors, such as
-      // the requesting resource.
-      new ModuleNotFoundPlugin(paths.appPath),
       // Makes some environment variables available to the JS code, for example:
       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
       // It is absolutely essential that NODE_ENV is set to production

package/src/tasks/create/index.js

@@ -4,6 +4,9 @@ import fs from 'fs';
 
 import inquirer from 'inquirer';
 import chalk from 'chalk';
+import { execa } from 'execa';
+
+import { SHARED_DIRECTORY } from '../../constants.js';
 
 import {
   convertIntoPascalCase,
@@ -147,6 +150,25 @@ const compileMustacheTemplates = async (
   });
 };
 
+// Formats the generated files with the project's own Prettier so they pass the project's `prettier -c .` check.
+// Skipped when the project has no local Prettier. A formatting failure is reported but does not fail the create.
+const formatGeneratedFiles = async (componentDirectory) => {
+  const projectDirectory = process.cwd();
+  if (!fs.existsSync(path.join(projectDirectory, 'node_modules', 'prettier'))) return;
+
+  // The shared folder only exists in library-based mode and holds files generated by this task.
+  const directories = [componentDirectory, path.join(path.dirname(componentDirectory), SHARED_DIRECTORY)].filter((directory) =>
+    fs.existsSync(directory),
+  );
+  const result = await execa('npx', ['--no-install', 'prettier', '--write', '--log-level', 'warn', ...directories], {
+    cwd: projectDirectory,
+    reject: false,
+  });
+  if (result.exitCode !== 0) {
+    console.log(chalk.yellow(`Generated files could not be formatted with Prettier: ${result.stderr || result.stdout}`));
+  }
+};
+
 const validateCompile = async ({ componentName, componentLabel, library, version, framework, type, subtype, description, organization }, options) => {
   const isLibraryBased = getLibraryBased();
   let sSubType = subtype;
@@ -231,6 +253,7 @@ const validateCompile = async ({ componentName, componentLabel, library, version
     description,
     organization,
   });
+  await formatGeneratedFiles(targetDirectory);
 
   console.log(chalk.green(`${componentKey} component is created in ${targetDirectory}`));
 };

package/src/tasks/export-archive/index.js

@@ -40,8 +40,8 @@ export const updateConfig = async ({ oldComponentKey, newComponentKey, library,
   configData.library = library;
   configData.version = version;
 
-  // stringify "4", makes the json string look like JSON in the file, formatted instead of a single line
-  fs.writeFileSync(join(targetDirectory, '/config.json'), JSON.stringify(configData, null, 4), {
+  // stringify "2", makes the json string look like JSON in the file, formatted instead of a single line
+  fs.writeFileSync(join(targetDirectory, '/config.json'), JSON.stringify(configData, null, 2), {
     encoding: 'utf8',
     flag: 'w',
   });

package/src/tasks/export-rc/helper.js

@@ -1,7 +1,8 @@
 import chalk from 'chalk';
 import path from 'path';
 import { join } from 'path';
-import archiver from 'archiver';
+// archiver v8 has no default export; ZipArchive replaces the archiver('zip') factory.
+import { ZipArchive } from 'archiver';
 import fs from 'fs';
 import {
   addDebugLog,
@@ -200,7 +201,7 @@ export const zipComponent = async (componentKey) => {
   const configJson = `${srcDirectory}/config.json`;
   const localizationJson = `${srcDirectory}/localizations.json`;
 
-  const archive = archiver('zip', { zlib: { level: 9 } });
+  const archive = new ZipArchive({ zlib: { level: 9 } });
   const zipChunks = [];
   archive.on('data', (chunk) => zipChunks.push(chunk));
 
@@ -263,7 +264,7 @@ export const zipRC = async (content, archiveDirectory, archiveFileName) => {
   const archiveFile = join(archiveDirectory, archiveFileName);
 
   const output = fs.createWriteStream(archiveFile);
-  const archive = archiver('zip', {
+  const archive = new ZipArchive({
     zlib: { level: 9 }, // Sets the compression level.
   });
 

package/src/tasks/import-archive/helper.js

@@ -42,8 +42,8 @@ export const setTasksConfig = async (libraryName, version, devBuild, currDir) =>
   compConfig.version = version;
 
   // update file
-  // stringify "4", makes the json string look like JSON in the file, formatted instead of a single line
-  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(configData, null, 4), { encoding: 'utf8', flag: 'w' });
+  // stringify "2", makes the json string look like JSON in the file, formatted instead of a single line
+  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(configData, null, 2), { encoding: 'utf8', flag: 'w' });
 };
 
 export const setPackageOrg = async (organization, currDir) => {
@@ -55,8 +55,8 @@ export const setPackageOrg = async (organization, currDir) => {
   packageData.organization = organization;
 
   // update file
-  // stringify "4", makes the json string look like JSON in the file, formatted instead of a single line
-  fs.writeFileSync(packageJsonPath, JSON.stringify(packageData, null, 4), { encoding: 'utf8', flag: 'w' });
+  // stringify "2", makes the json string look like JSON in the file, formatted instead of a single line
+  fs.writeFileSync(packageJsonPath, `${JSON.stringify(packageData, null, 2)}\n`, { encoding: 'utf8', flag: 'w' });
 };
 
 export const updateConfig = async ({ oldComponentKey, newComponentKey, organization, library, version, currentDirectory }) => {
@@ -71,8 +71,8 @@ export const updateConfig = async ({ oldComponentKey, newComponentKey, organizat
   configData.library = library;
   configData.version = version;
 
-  // stringify "4", makes the json string look like JSON in the file, formatted instead of a single line
-  fs.writeFileSync(join(currentDirectory, '/config.json'), JSON.stringify(configData, null, 4), {
+  // stringify "2", makes the json string look like JSON in the file, formatted instead of a single line
+  fs.writeFileSync(join(currentDirectory, '/config.json'), `${JSON.stringify(configData, null, 2)}\n`, {
     encoding: 'utf8',
     flag: 'w',
   });

package/src/tasks/import-archive/index.js

@@ -62,8 +62,8 @@ export const updateConfig = async ({ oldComponentKey, newComponentKey, library,
   configData.library = library;
   configData.version = version;
 
-  // stringify "4", makes the json string look like JSON in the file, formatted instead of a single line
-  fs.writeFileSync(join(targetDirectory, '/config.json'), JSON.stringify(configData, null, 4), {
+  // stringify "2", makes the json string look like JSON in the file, formatted instead of a single line
+  fs.writeFileSync(join(targetDirectory, '/config.json'), `${JSON.stringify(configData, null, 2)}\n`, {
     encoding: 'utf8',
     flag: 'w',
   });

package/src/tasks/import-comp/index.js

@@ -48,8 +48,8 @@ export const updateConfig = async ({ oldComponentKey, newComponentKey, library,
     configData.description = newLabel;
   }
 
-  // stringify "4", makes the json string look like JSON in the file, formatted instead of a single line
-  fs.writeFileSync(join(targetDirectory, '/config.json'), JSON.stringify(configData, null, 4), { encoding: 'utf8' });
+  // stringify "2", makes the json string look like JSON in the file, formatted instead of a single line
+  fs.writeFileSync(join(targetDirectory, '/config.json'), `${JSON.stringify(configData, null, 2)}\n`, { encoding: 'utf8' });
 };
 
 export const updateFile = async (fileName, oldComponentKeyPC, newComponentKeyPC, targetDirectory) => {

package/src/tasks/init/template/.prettierignore

@@ -0,0 +1,17 @@
+# Docs and templates that are not formatted with Prettier
+**/*.md
+**/*.mustache
+**/*.txt
+**/*.npmrc
+**/*.gitignore
+**/LICENSE
+
+# CLI-managed state, rewritten by the CLI with its own formatting
+/store/
+/tasks.config.json
+
+# Library build output (one folder per org_library, e.g. PegaQa_DxTestLib/)
+/*_*/
+/build/
+/dist/
+/coverage/