@pega/custom-dx-components 24.1.11 → 24.2.10

package/README.md

@@ -8,7 +8,7 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 24 or later
+- Pega Infinity Server version 24.2 or later
 
 - Git version 2.30 or later
 
@@ -16,6 +16,8 @@ Ensure you have access to the following in your system:
 
 - System npm version 8, 10 (9 is not supported)
 
+- Recommended (node 20, npm 10)
+
 ## Latest Documentation
 
-Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/whats-new-constellation-dx-components-pega-infinity-23.html)
+Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/whats-new-constellation-dx-component-builder.html)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "24.1.11",
+  "version": "24.2.10",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -18,10 +18,11 @@
     "@babel/core": "^7.23.7",
     "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
-    "@pega/auth": "^0.1.6",
-    "adm-zip": "^0.5.10",
+    "@pega/auth": "^0.2.19",
+    "@pega/constellation-dx-components-build-utils": "^1.0.1",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
+    "archiver": "^7.0.1",
     "arg": "^5.0.2",
     "babel-loader": "^9.1.3",
     "chalk": "^5.3.0",
@@ -35,6 +36,7 @@
     "fs-extra": "^11.2.0",
     "gitignore": "^0.7.0",
     "inquirer": "^9.2.12",
+    "jwt-decode": "^4.0.0",
     "listr2": "^8.0.1",
     "mini-css-extract-plugin": "2.7.6",
     "mustache": "^4.2.0",
@@ -53,9 +55,11 @@
     "sass-loader": "^13.3.3",
     "terser-webpack-plugin": "5.3.10",
     "ts-loader": "^9.5.1",
-    "typescript": "^4.9.5",
+    "typescript": "~5.3.3",
+    "unarchive": "^1.1.3",
     "url-loader": "4.1.1",
-    "webpack": "5.89.0"
+    "webpack": "5.74.0",
+    "webpack-cli": "^5.1.4"
   },
   "author": "Custom component dev",
   "license": "SEE LICENSE IN LICENSE",

package/src/cli.js

@@ -5,17 +5,39 @@ import {
   authenticate,
   buildComponent,
   buildAllComponents,
+  buildLibrary,
   createComponent,
   createAllComponents,
+  createLibrary,
+  switchLibrary,
+  createVersion,
+  switchVersion,
   deleteComponent,
   deleteAllComponents,
+  deleteLibrary,
+  deletePublished,
+  deleteVersion,
+  importArchive,
+  exportArchive,
+  importComponent,
   initProject,
   listComponents,
+  listLibrary,
+  listPublished,
   publishComponent,
   publishAllComponents,
+  publishLibrary,
+  quarantine,
   renameComponent,
+  moveComponent,
+  renameLibrary,
+  restoreConfig,
   revertWebPack,
   promoteWebPack,
+  showStatus,
+  showHelp,
+  setPermanent,
+  storeComponents,
   updateComponent,
   validate,
   upgrade,
@@ -26,18 +48,40 @@ const TASKS = {
   INIT: 'init',
   CREATE: 'create',
   CREATE_ALL: 'createAll',
+  CREATE_LIB: 'createLibrary',
+  SWITCH_LIB: 'switchLibrary',
+  CREATE_VERSION: 'createVersion',
+  SWITCH_VERSION: 'switchVersion',
   BUILD: 'buildComponent',
   BUILD_ALL: 'buildAllComponents',
+  BUILD_LIB: 'buildLibrary',
   PROMOTE_WEBPACK: 'promoteWebPack',
   REVERT_WEBPACK: 'revertWebPack',
   PUBLISH: 'publish',
-  PUBLISH_All: 'publishAll',
+  PUBLISH_ALL: 'publishAll',
+  PUBLISH_LIB: 'publishLibrary',
   RENAME: 'rename',
+  RENAME_LIB: 'renameLibrary',
+  RESTORE_CONFIG: 'restoreConfig',
+  QUARANTINE: 'quarantine',
+  MOVE: 'moveComponent',
   LIST: 'list',
+  LIST_LIB: 'listLibrary',
+  LIST_PUB: 'listPublished',
+  SHOW_STATUS: 'showStatus',
+  SHOW_HELP: 'showHelp',
+  SET_PERM: 'setPermanent',
+  STORE: 'storeComponents',
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
   DELETE: 'delete',
-  DELETE_ALL: "deleteAll",
+  DELETE_ALL: 'deleteAll',
+  DELETE_LIBRARY: 'deleteLibrary',
+  DELETE_PUB: 'deletePublished',
+  DELETE_VERSION: 'deleteVersion',
+  IMPORT_ARCHIVE: 'importArchive',
+  EXPORT_ARCHIVE: 'exportArchive',
+  IMPORT_COMP: 'importComponent',
   AUTHENTICATE: 'authenticate',
   UPGRADE: 'upgrade',
   BUILD_JEST_ASSETS: 'buildJestAssets'
@@ -78,6 +122,22 @@ export default async (args = []) => {
       createAllComponents(options);
       break;
     }
+    case TASKS.CREATE_LIB: {
+      createLibrary(options);
+      break;
+    }
+    case TASKS.SWITCH_LIB: {
+      switchLibrary(options);
+      break;
+    }
+    case TASKS.CREATE_VERSION: {
+      createVersion(options);
+      break;
+    }
+    case TASKS.SWITCH_VERSION: {
+      switchVersion(options);
+      break;
+    }
     case TASKS.PROMOTE_WEBPACK: {
       promoteWebPack(options);
       break;
@@ -90,14 +150,34 @@ export default async (args = []) => {
       publishComponent(options);
       break;
     }
-    case TASKS.PUBLISH_All: {
+    case TASKS.PUBLISH_ALL: {
       publishAllComponents(options);
       break;
     }
+    case TASKS.PUBLISH_LIB: {
+      publishLibrary(options);
+      break;
+    }
     case TASKS.RENAME: {
       renameComponent(options);
       break;
     }
+    case TASKS.RENAME_LIB: {
+      renameLibrary(options);
+      break;
+    }
+    case TASKS.RESTORE_CONFIG: {
+      restoreConfig(options);
+      break;
+    }
+    case TASKS.QUARANTINE: {
+      quarantine(options);
+      break;
+    }
+    case TASKS.MOVE: {
+      moveComponent(options);
+      break;
+    }
     case TASKS.BUILD: {
       buildComponent(options);
       break;
@@ -106,10 +186,50 @@ export default async (args = []) => {
       buildAllComponents(options);
       break;
     }
+    case TASKS.BUILD_LIB: {
+      buildLibrary(options);
+      break;
+    }
     case TASKS.LIST: {
       listComponents(options);
       break;
     }
+    case TASKS.LIST_LIB: {
+      listLibrary(options);
+      break;
+    }
+    case TASKS.LIST_PUB: {
+      listPublished(options);
+      break;
+    }
+    case TASKS.SHOW_STATUS: {
+      showStatus(options);
+      break;
+    }
+    case TASKS.SHOW_HELP: {
+      showHelp(options);
+      break;
+    }
+    case TASKS.SET_PERM: {
+      setPermanent(options);
+      break;
+    }
+    case TASKS.STORE: {
+      storeComponents(options);
+      break;
+    }
+    case TASKS.IMPORT_ARCHIVE: {
+      importArchive(options);
+      break;
+    }
+    case TASKS.EXPORT_ARCHIVE: {
+      exportArchive(options);
+      break;
+    }
+    case TASKS.IMPORT_COMP: {
+      importComponent(options);
+      break;
+    }
     case TASKS.VALIDATE_SCHEMA: {
       validate(options);
       break;
@@ -126,6 +246,18 @@ export default async (args = []) => {
       deleteAllComponents(options);
       break;
     }
+    case TASKS.DELETE_LIBRARY: {
+      deleteLibrary(options);
+      break;
+    }
+    case TASKS.DELETE_PUB: {
+      deletePublished(options);
+      break;
+    }
+    case TASKS.DELETE_VERSION: {
+      deleteVersion(options);
+      break;
+    }
     case TASKS.AUTHENTICATE: {
       authenticate(options);
       break;

package/src/constants.js

@@ -6,9 +6,19 @@ export const WEBPACK_CONFIG_JS_FILENAME = 'webpack.config.js';
 export const WEBPACK_PATHS_JS_FILENAME = 'paths.js';
 export const USE_PROMOTED_WEB_PACK = 'usePromotedWebPack';
 export const COMPONENTS_DIRECTORY_PATH = 'components-directory-path';
+export const IMPORT_RELATIVE_PATH = 'import-relative-path';
+export const EXPORT_RELATIVE_PATH = 'export-relative-path';
 export const COMPONENTS_PATH = 'component';
 export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token';
 export const OOTB_COMPONENTS = 'node_modules/@pega/custom-dx-components/.ootb_components';
+export const LIBRARY_BASED = 'libraryMode';
+export const SHARED_DIRECTORY = 'shared';
+export const SHOW_DEBUG = 'showDebug';
+export const ARCHIVES_PATH = 'store';
+export const TEMP_PATH = 'store/temp';
+export const COMPONENTS_CONFIG_FILE_NAME = 'componentsconfig.json';
+
+
 
 /* REST end points */
 export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
@@ -39,7 +49,11 @@ export const BUILDER_DIR_FILE_PATH = '../bundle/builder';
 
 export const CATEGORY_CONSTELLATION = 'constellation';
 
-export const JEST_ASSETS_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/components/';
+export const BOOTSTRAP_CONFIG = 'PRRestService/api/application/v2/data_views/D_pxBootstrapConfig';
+
+export const JEST_ASSETS_ORIGINAL_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/original/components/';
+export const JEST_ASSETS_LIBRARY_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/library/components/';
+export const JEST_TESTS_FUNCTIONAL_PATH = 'node_modules/@pega/custom-dx-components/tests/functional/';
 export const JEST_CREATE_PATH = 'create/';
 export const JEST_CREATE_ALL_CONSTELLATION_PATH = 'createAll/Constellation/';
 export const JEST_CREATE_ALL_LAUNCHPAD_PATH = 'createAll/Launchpad';
@@ -53,6 +67,14 @@ export const AUTHENTICATE_DEFAULTS = {
   redirectUri: 'https://localhost:4010/'
 };
 
+export const SHARED_FILE_NAMES = [
+  "suggestions-handler.ts",
+  "PConnProps.d.ts",
+  "create-nonce.ts",
+  "Operator.tsx",
+  "Avatar.tsx"
+];
+
 export const AUTHENTICATE_SCHEMA = {
   serverType: [
     {

package/src/tasks/authenticate/index.js

@@ -4,7 +4,7 @@ import fs from 'node:fs';
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 
-import { checkPathAccess, showVersion } from '../../util.js';
+import { checkPathAccess, showVersion, updateC11NB2SForInfinity } from '../../util.js';
 import {
   TOKEN_PATH,
   INF_TOKEN_URL_V1,
@@ -156,7 +156,7 @@ const generateAccessToken = async config => {
 export default async options => {
   let authOK = false;
 
-  showVersion();
+  await showVersion();
 
   await checkPathAccess(pegaConfigJsonPath);
 
@@ -250,5 +250,16 @@ export default async options => {
     } catch (e) {}
   }
 
+  if (authOK) {
+    // get C11B2S token
+    if (isLaunchPad) {
+
+    }
+    else {
+      // update B2N token in access token file
+      await updateC11NB2SForInfinity();
+    }
+  }
+
   process.exit();
 };

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

@@ -1,43 +1,21 @@
 import fs from 'fs';
 import path from 'path';
 
-import AdmZip from 'adm-zip';
+import archiver from 'archiver';
 import chalk from 'chalk';
 
-import {
-  getComponentDirectoryPath,
-  getComponents,
-  getPegaServerConfig
-} from '../../util.js';
-import { COMPONENT_SCHEMA } from '../../constants.js';
-
-export const cleanUp = async () => {
-  if (fs.existsSync('dist/components')) {
-    fs.rm('dist/components', { recursive: true }, err => {
-      if (err) {
-        throw err;
-      }
-    });
-  }
-
-  if (fs.existsSync('lib')) {
-    fs.rm('lib', { recursive: true }, err => {
-      if (err) {
-        throw err;
-      }
-    });
-  }
-}
+import { getComponentDirectoryPath, getComponents, getPegaServerConfig, addDebugLog } from '../../util.js';
 
 
+export const getBuildComponentQuestions = async () => {
+addDebugLog("getBuildComponentQuestions", "", "");
 
-export const getBuildComponentQuestions = async ()  => {
   const components = await getComponents();
   const defaultPegaConfig = await getPegaServerConfig();
 
   if (components.length == 0) {
-    console.log(chalk.redBright("No components to build"));
-    process.exit(1);
+    console.log(chalk.redBright('No components to build'));
+    process.exit();
   }
 
   return [
@@ -50,32 +28,41 @@ export const getBuildComponentQuestions = async ()  => {
   ];
 };
 
+export const zipComponent = async componentKey => {
+addDebugLog("zipComponent", `componentKey: ${componentKey}`, "");
 
-
-export const zipComponent = async (componentKey) => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
   const localizationJson = `${srcDirectory}/localizations.json`;
 
-  const zip = new AdmZip();
+  const archive = archiver('zip', { zlib: { level: 9 } });
+  const zipChunks = [];
+  archive.on('data', chunk => zipChunks.push(chunk));
 
-  zip.addLocalFolder(srcDirectory, 'src/');
-  zip.addLocalFile(configJson);
+  // Add src directory
+  archive.directory(srcDirectory, 'src');
 
+  // Add config.json file
+  if (fs.existsSync(configJson)) {
+    archive.file(configJson, { name: path.basename(configJson) });
+  }
+
+  // Add localizations.json file if it exists
   if (fs.existsSync(localizationJson)) {
-    zip.addLocalFile(localizationJson);
+    archive.file(localizationJson, { name: path.basename(localizationJson) });
   }
 
-  zip.addLocalFolder(buildDirectory);
-  const zipContent = zip.toBuffer().toString('base64');
+  // Add build directory
+  archive.directory(buildDirectory, false);
+
+  await archive.finalize();
+
+  const zipBuffer = Buffer.concat(zipChunks);
+  console.log(chalk.green(`component zipped with size: ${Math.ceil(zipBuffer.length / 1024)} KB`));
+  const zipContent = zipBuffer.toString('base64');
+
+  const configContent = Buffer.from(fs.readFileSync(configJson)).toString();
 
-  const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-  // clean up now happens in function cleanUp
-  // fs.rmd('dist/components', { recursive: true }, err => {
-  //   if (err) {
-  //     throw err;
-  //   }
-  // });
   return { zipContent, configContent };
 };

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

@@ -5,11 +5,23 @@ import chalk from 'chalk';
 import validate from '../validator/index.js';
 import bundleComponent from '../bundle/index.js';
 import { lintComponent } from '../linter/index.js';
-import { getComponentDirectoryPath, showVersion, getComponents } from '../../util.js';
+import {
+  getComponentDirectoryPath,
+  showVersion,
+  getComponents,
+  addDebugLog,
+  cleanUp,
+  getLibraryBased,
+  checkLibraryAndArchives,
+  getConfigDefaults,
+  zipVersionAndArchive } from '../../util.js';
 
-import { getBuildComponentQuestions, cleanUp } from './helper.js';
+import { getBuildComponentQuestions } from './helper.js';
+
+
+export function getCustomTasks(componentKey, sourceMap, devBuild, options, showStats, skipBuild) {
+addDebugLog("getCustomTasks", `componentKey: ${componentKey}, sourceMap: ${sourceMap}, devBuild: ${devBuild}, skipBuild: ${skipBuild}`, "");
 
-export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
   const sDevBuild = devBuild ? '(dev build)' : '';
   return new Listr(
     [
@@ -29,8 +41,8 @@ export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
       },
       {
         title: `Bundle component ${sDevBuild}`,
-        task: async () => bundleComponent(componentKey, sourceMap, devBuild),
-        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
+        task: async () => await bundleComponent(componentKey, sourceMap, devBuild, showStats),
+        enabled: () => !skipBuild
       }
     ],
     { concurrent: false, exitOnError: true }
@@ -38,25 +50,45 @@ export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
 }
 
 export default async options => {
-  showVersion();
+  await showVersion();
+  await checkLibraryAndArchives();
 
+  const isLibraryBased = getLibraryBased();
+
+addDebugLog("buildAllComponents", "", "+");
   const components = await getComponents();
   let sourceMap;
   let devBuild;
+  let showStats = false;
+  let skipBuild = true;
+  let firstComponent = null;
 
   if (options.params.length >= 4) {
     const dBuild = options.params[3];
     devBuild = !!(dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true');
   } else {
-    const questions = await getBuildComponentQuestions();
-    const answers = await inquirer.prompt(questions);
-    ({ sourceMap, devBuild } = answers);
+    if (!isLibraryBased) {
+      const questions = await getBuildComponentQuestions();
+      const answers = await inquirer.prompt(questions);
+      ({ sourceMap, devBuild } = answers);
+      showStats = true;
+      skipBuild = false;
+    }
+    else {
+      devBuild = false;
+    }
+
   }
 
   for await (const componentKey of components) {
     console.log(chalk.bold.green(`Building ${componentKey}`));
 
-    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, options);
+    // capture first component
+    if (firstComponent == null) {
+      firstComponent = componentKey;
+    }
+
+    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, options, showStats, skipBuild);
 
     try {
       await myCustomTasks.run();
@@ -66,8 +98,23 @@ export default async options => {
     }
   }
 
+  // if skipBuild, then do a build here as opposed to every step (v1 is every step, v2, just once)
+  if (skipBuild && firstComponent) {
+    console.log();
+    console.log(chalk.bold.green("Validation compile..."));
+    await bundleComponent(firstComponent, sourceMap, devBuild, showStats);
+    const confDef = getConfigDefaults();
+    await zipVersionAndArchive(confDef.currentOrgLib, confDef.buildVersion);
+  }
+
+
+
   // once done, remove leftover directories
   await cleanUp();
 
+  console.log();
+  console.log(chalk.bold.green("Done."));
+
+addDebugLog("buildAllComponents", "END", "-");
   return true;
 };