@pega/custom-dx-components 26.1.11 → 26.1.12-alpha.0.2

package/src/tasks/promote-webpack/webpack.config.js

@@ -15,15 +15,7 @@ const compressionBRConfObj = {
   filename: '[path][base].br',
   algorithm: 'brotliCompress',
   test: /\.(js|css|html|svg|png|jpg|woff|woff2)$/,
-  compressionOptions: { level: 11 }
-};
-
-/* For gzip use below */
-const compressionGZConfObj = {
-  filename: '[path][base].gz',
-  algorithm: 'gzip',
-  test: /\.(js|css|html|svg|png|jpg|woff|woff2)$/,
-  compressionOptions: { level: 9 }
+  compressionOptions: { level: 11 },
 };
 
 let shouldUseSourceMap = process.env.SOURCE_MAP;
@@ -39,22 +31,9 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-buildPath = 'dist/components';
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
-const moduleFileExtensions = ['web.mjs', 'mjs', 'web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx'];
-
-// Resolve file paths in the same order as webpack
-const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find(ext => fs.existsSync(resolveFn(`${filePath}.${ext}`)));
-
-  if (extension) {
-    return resolveFn(`${filePath}.${extension}`);
-  }
-
-  return resolveFn(`${filePath}.js`);
-};
+const buildPath = 'dist/components';
 
 // config after eject: we're in ./config/
 
@@ -64,11 +43,10 @@ const appSrc = resolveApp('src');
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-//export default (
 module.exports = (
   webpackEnv,
   // eslint-disable-next-line no-unused-vars
-  { inputFile, outputFile, componentKey, externals, globals, sourceMap, devBuild }
+  { inputFile, outputFile, componentKey, externals, globals, sourceMap, devBuild },
 ) => {
   const isEnvDevelopment = webpackEnv === 'development' || devBuild;
   const isEnvProduction = webpackEnv === 'production';
@@ -79,11 +57,11 @@ module.exports = (
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
       isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader
+        loader: MiniCssExtractPlugin.loader,
       },
       {
         loader: require.resolve('css-loader'),
-        options: cssOptions
+        options: cssOptions,
       },
       {
         // Options for PostCSS as we reference these options twice
@@ -97,13 +75,13 @@ module.exports = (
                 'postcss-preset-env',
                 {
                   // Options
-                }
-              ]
-            ]
+                },
+              ],
+            ],
           },
-          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
-        }
-      }
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      },
     ].filter(Boolean);
     if (preProcessor) {
       loaders.push(
@@ -111,15 +89,15 @@ module.exports = (
           loader: require.resolve('resolve-url-loader'),
           options: {
             sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-            root: appSrc
-          }
+            root: appSrc,
+          },
         },
         {
           loader: require.resolve(preProcessor),
           options: {
-            sourceMap: true
-          }
-        }
+            sourceMap: true,
+          },
+        },
       );
     }
     return loaders;
@@ -134,8 +112,6 @@ module.exports = (
     devtool: devBuild ? 'eval-cheap-module-source-map' : false,
     output: {
       // The build folder.
-      //path: paths.appBuild,
-      //path: resolveApp('dist/components'),
       path: appBuild,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
@@ -146,20 +122,16 @@ module.exports = (
       library: {
         name: componentKey,
         type: 'umd',
-        export: 'default'
+        export: 'default',
       },
-      publicPath: ''
+      publicPath: '',
     },
     optimization: {
       minimize: isEnvProduction,
-      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
+      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
     },
     resolve: {
-      plugins: [],
-      extensions: ['.tsx', '.ts', '.js']
-    },
-    resolveLoader: {
-      plugins: []
+      extensions: ['.tsx', '.ts', '.js'],
     },
     module: {
       strictExportPresence: true,
@@ -177,8 +149,8 @@ module.exports = (
               options: {
                 limit: imageInlineSizeLimit,
                 mimetype: 'image/avif',
-                name: `${componentKey}/media/[name].[hash:8].[ext]`
-              }
+                name: `${componentKey}/media/[name].[hash:8].[ext]`,
+              },
             },
             // "url" loader works like "file" loader except that it embeds assets
             // smaller than specified limit in bytes as data URLs to avoid requests.
@@ -188,8 +160,8 @@ module.exports = (
               loader: require.resolve('url-loader'),
               options: {
                 limit: imageInlineSizeLimit,
-                name: `${componentKey}/media/[name].[hash:8].[ext]`
-              }
+                name: `${componentKey}/media/[name].[hash:8].[ext]`,
+              },
             },
             // Process application JS with TS-Loader.
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
@@ -198,18 +170,18 @@ module.exports = (
               include: appSrc,
               loader: 'ts-loader',
               options: {
-                configFile: 'tsconfig.build.json'
+                configFile: 'tsconfig.build.json',
               },
-              exclude: /node_modules/
+              exclude: /node_modules/,
             },
 
             {
               test: /\.(ts|tsx)$/,
               loader: 'ts-loader',
               options: {
-                configFile: 'tsconfig.build.json'
+                configFile: 'tsconfig.build.json',
               },
-              exclude: /node_modules/
+              exclude: /node_modules/,
             },
             // "postcss" loader applies autoprefixer to our CSS.
             // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -223,13 +195,13 @@ module.exports = (
               exclude: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
               // Remove this when webpack adds a warning or an error for this.
               // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true
+              sideEffects: true,
             },
             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
             // using the extension .module.css
@@ -239,9 +211,9 @@ module.exports = (
                 importLoaders: 1,
                 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                 modules: {
-                  getLocalIdent: getCSSModuleLocalIdent
-                }
-              })
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+              }),
             },
             // Opt-in support for SASS (using .scss or .sass extensions).
             // By default we support SASS Modules with the
@@ -252,15 +224,15 @@ module.exports = (
               use: getStyleLoaders(
                 {
                   importLoaders: 3,
-                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                 },
-                'sass-loader'
+                'sass-loader',
               ),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
               // Remove this when webpack adds a warning or an error for this.
               // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true
+              sideEffects: true,
             },
             // Adds support for CSS Modules, but using SASS
             // using the extension .module.scss or .module.sass
@@ -271,11 +243,11 @@ module.exports = (
                   importLoaders: 3,
                   sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                   modules: {
-                    getLocalIdent: getCSSModuleLocalIdent
-                  }
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
                 },
-                'sass-loader'
-              )
+                'sass-loader',
+              ),
             },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
@@ -290,14 +262,14 @@ module.exports = (
               // by webpack's internal loaders.
               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
               options: {
-                name: `${componentKey}/media/[name].[hash:8].[ext]`
-              }
-            }
+                name: `${componentKey}/media/[name].[hash:8].[ext]`,
+              },
+            },
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
-          ]
-        }
-      ]
+          ],
+        },
+      ],
     },
     plugins: [
       // This gives some necessary context to module not found errors, such as
@@ -310,14 +282,14 @@ module.exports = (
       // Otherwise React will be compiled in the very slow development mode.
       isEnvProduction &&
         new webpack.DefinePlugin({
-          PRODUCTION: JSON.stringify(true)
+          PRODUCTION: JSON.stringify(true),
         }),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
           filename: `${componentKey}/css/${componentKey}.[contenthash:8].css`,
-          chunkFilename: `${componentKey}/css/${componentKey}.[contenthash:8].chunk.css`
+          chunkFilename: `${componentKey}/css/${componentKey}.[contenthash:8].chunk.css`,
         }),
       // Moment.js is an extremely popular library that bundles large locale files
       // by default due to how webpack interprets its code. This is a practical
@@ -326,44 +298,44 @@ module.exports = (
       // You can remove this if you don't use Moment.js:
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/locale$/,
-        contextRegExp: /moment$/
+        contextRegExp: /moment$/,
       }),
       /* cosmos 4.x and below */
       /* Ignore cosmos icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
-        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/,
       }),
 
       /* Ignore cosmos icons - windows */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
-        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/,
       }),
 
       /* Ignore cosmos streamline-icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/streamline-icons$/,
-        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/,
       }),
 
       /* Ignore cosmos streamline-icons - windows */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/streamline-icons$/,
-        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/,
       }),
 
       /* cosmos 6.x and above */
       /* Ignore cosmos icons */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/.*\/.*\.icon$/,
-        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
+        contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/,
       }),
 
       /* Ignore cosmos icons - windows */
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/.*\/.*\.icon$/,
-        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
+        contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/,
       }),
 
       // This configuration works on both Windows and Unix-like systems (Linux, macOS).
@@ -378,25 +350,22 @@ module.exports = (
       new webpack.ContextReplacementPlugin(new RegExp('@pega[\\\\/]cosmos-react-core[\\\\/]lib[\\\\/]components[\\\\/]Icon$'), /^$/),
       new webpack.ContextReplacementPlugin(
         new RegExp('@pega[\\\\/]cosmos-react-core[\\\\/]lib[\\\\/]components[\\\\/]Icon[\\\\/]streamline-icons$'),
-        /^$/
+        /^$/,
       ),
 
       new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1
+        maxChunks: 1,
       }),
       new webpack.optimize.MinChunkSizePlugin({
-        minChunkSize: 100000 // Minimum number of characters
+        minChunkSize: 100000, // Minimum number of characters
       }),
-      !devBuild && new CompressionPlugin(compressionBRConfObj)
-
-      /* Don't generate gzip file */
-      /* isEnvProduction && new CompressionPlugin(compressionGZConfObj) */
+      !devBuild && new CompressionPlugin(compressionBRConfObj),
     ].filter(Boolean),
     performance: {
       hints: false,
       maxEntrypointSize: 512000,
-      maxAssetSize: 512000
+      maxAssetSize: 512000,
     },
-    externals
+    externals,
   };
 };

package/src/tasks/publish/helper.js

@@ -13,16 +13,16 @@ import {
   getFetchAgent,
   addDebugLog,
   collectSvgFiles,
-  isLaunchpadVanity
+  isLaunchpadVanity,
 } from '../../util.js';
 import {
   PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT,
   LP_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT,
   LP_VANITY_PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT,
-  TOKEN_PATH
+  TOKEN_PATH,
 } from '../../constants.js';
 
-export const getPublishComponentQuestions = async componentKey => {
+export const getPublishComponentQuestions = async (componentKey) => {
   addDebugLog('getPublishComponentQuestions', `componentKey: ${componentKey}`, '');
   const components = await getComponents();
 
@@ -40,13 +40,13 @@ export const getPublishComponentQuestions = async componentKey => {
       message: 'Select component to publish',
       choices: components,
       default: componentKey,
-      when: () => !componentKey
+      when: () => !componentKey,
     },
     {
       name: 'rulesetName',
       message: 'Enter ruleset name',
       default: defaultPegaConfig.rulesetName,
-      validate: value => {
+      validate: (value) => {
         if (value.trim()) {
           return true;
         }
@@ -54,13 +54,13 @@ export const getPublishComponentQuestions = async componentKey => {
       },
       when: () => {
         return defaultPegaConfig.serverType === 'infinity';
-      }
+      },
     },
     {
       name: 'rulesetVersion',
       message: 'Enter ruleset version',
       default: defaultPegaConfig.rulesetVersion,
-      validate: value => {
+      validate: (value) => {
         if (validateRulesetVersion(value)) {
           return true;
         }
@@ -68,26 +68,26 @@ export const getPublishComponentQuestions = async componentKey => {
       },
       when: () => {
         return defaultPegaConfig.serverType === 'infinity';
-      }
+      },
     },
     {
       name: 'sourceMap',
       message: 'Generate source map ?',
       default: defaultPegaConfig.sourceMap,
 
-      when: () => false && !process.env.SOURCE_MAP
+      when: () => false,
     },
     {
       name: 'devBuild',
       type: 'confirm',
       message: 'Generate development build ?',
       default: defaultPegaConfig.devBuild,
-      when: () => componentKey !== 'LibraryMode'
-    }
+      when: () => componentKey !== 'LibraryMode',
+    },
   ];
 };
 
-export const zipComponent = async componentKey => {
+export const zipComponent = async (componentKey) => {
   addDebugLog('zipComponent', `componentKey: ${componentKey}`, '');
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
@@ -96,7 +96,7 @@ export const zipComponent = async componentKey => {
 
   const archive = archiver('zip', { zlib: { level: 9 } });
   const zipChunks = [];
-  archive.on('data', chunk => zipChunks.push(chunk));
+  archive.on('data', (chunk) => zipChunks.push(chunk));
 
   // Add src directory
   archive.directory(srcDirectory, 'src');
@@ -126,7 +126,7 @@ export const zipComponent = async componentKey => {
   const svgContent = collectSvgFiles(srcDirectory);
 
   if (fs.existsSync('dist')) {
-    fs.rm('dist', { recursive: true }, err => {
+    fs.rm('dist', { recursive: true }, (err) => {
       if (err) {
         throw err;
       }
@@ -154,7 +154,7 @@ export const publishComponentToServer = async (data, doFetch) => {
       zipContent,
       componentName: JSON.parse(configContent).componentKey,
       pxUpdateDateTime: '',
-      environmentID: defaultPegaServerConfig.isolationId
+      environmentID: defaultPegaServerConfig.isolationId,
     };
   } else {
     apiBody = {
@@ -165,7 +165,7 @@ export const publishComponentToServer = async (data, doFetch) => {
       rulesetName,
       rulesetVersion,
       category: '',
-      svgContent: svgContent || []
+      svgContent: svgContent || [],
     };
   }
 
@@ -178,7 +178,7 @@ export const publishComponentToServer = async (data, doFetch) => {
       if (OauthData) {
         const {
           access_token: accessToken,
-          token_type: tokenType
+          token_type: tokenType,
           // refresh_token: refreshToken
         } = JSON.parse(OauthData);
         let status = 500;
@@ -195,7 +195,7 @@ export const publishComponentToServer = async (data, doFetch) => {
           method: 'POST',
           dispatcher: getFetchAgent(defaultPegaConfig),
           headers,
-          body: JSON.stringify(apiBody)
+          body: JSON.stringify(apiBody),
         });
 
         status = response.status;
@@ -225,9 +225,9 @@ export const publishComponentToServer = async (data, doFetch) => {
           console.log(chalk.bold.green(`Success : ${isLaunchpad ? respData : respData.message}`));
         } catch (err) {
           if (status === 500) {
-            throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
+            throw new Error(`Error occurred in authentication. Please regenerate using authenticate`, { cause: err });
           } else if (status === 999) {
-            throw Error(err);
+            throw Error(err, { cause: err });
           }
         }
       } else {
@@ -235,7 +235,7 @@ export const publishComponentToServer = async (data, doFetch) => {
       }
     } catch (err) {
       // throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
-      throw Error(err);
+      throw Error(err, { cause: err });
     }
   }
 };

package/src/tasks/publish/index.js

@@ -25,7 +25,7 @@ import {
   checkForBranch,
   getApplicationAndVersionFromToken,
   zipVersionAndArchive,
-  applyPegaData
+  applyPegaData,
 } from '../../util.js';
 
 import { getPublishComponentQuestions, publishComponentToServer, zipComponent } from './helper.js';
@@ -34,7 +34,7 @@ import { default as publishLibrary } from '../publish-lib/index.js';
 
 import { TOKEN_PATH } from '../../constants.js';
 
-export default async options => {
+export default async (options) => {
   await showVersion();
   await checkLibraryAndArchives();
   const isLibraryBased = getLibraryBased();
@@ -97,8 +97,8 @@ export default async options => {
           name: 'confirmPublish',
           type: 'confirm',
           message: `Publish ${chalk.bold.green(`${orgLib.displayLibVersion}`)}, proceed ?`,
-          default: true
-        }
+          default: true,
+        },
       ]);
 
       if (publishThisVersion.confirmPublish) {
@@ -141,8 +141,8 @@ export default async options => {
           name: 'confirmPublish',
           type: 'confirm',
           message: `You are about to publish a ${chalk.bold.yellow('PRODUCTION')} version which can ${chalk.bold.yellow('NOT')} be deleted, proceed ?`,
-          default: false
-        }
+          default: false,
+        },
       ]);
       if (publishAnswers.confirmPublish) {
         okToPublish = true;
@@ -218,7 +218,7 @@ export default async options => {
     ({ componentKey = paramComponentKey, sourceMap, devBuild } = answers);
 
     content = {
-      ...answers
+      ...answers,
     };
   }
 
@@ -236,7 +236,7 @@ export default async options => {
         title: 'Validate config schema',
         task: async () => {
           await validate(componentKey);
-        }
+        },
       },
       {
         title: 'Lint component',
@@ -244,33 +244,33 @@ export default async options => {
           const targetDirectory = await getComponentDirectoryPath(componentKey);
           // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
           await lintComponent(targetDirectory);
-        }
+        },
       },
       {
         title: `Bundle Component ${sDevBuild}`,
         task: async () => bundleComponent(componentKey, sourceMap, devBuild),
-        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
+        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined),
       },
       {
         title: 'Zip Component',
         task: async () => {
           const output = await zipComponent(componentKey);
           content = { ...content, ...output };
-        }
+        },
       },
       {
         title: 'Publish Component',
         task: async () => {
           await publishComponentToServer(content, doFetch);
-        }
-      }
+        },
+      },
     ],
     {
-      exitOnError: true
-    }
+      exitOnError: true,
+    },
   );
 
-  await tasks.run().catch(err => {
+  await tasks.run().catch((err) => {
     console.log(chalk.bold.red(err.toString()));
     process.exit(1);
   });