@pega/custom-dx-components 0.25.24 → 0.25.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.25.24",
+  "version": "0.25.25",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/init/template/package.json.mustache

@@ -29,7 +29,7 @@
     "publishAll": "custom-dx-components publishAll",
     "promoteWebPack": "custom-dx-components promoteWebPack",
     "revertWebPack": "custom-dx-components revertWebPack",
-    "_***Library_mode_only***": "Library mode only commands, Beta capability and subject to change.  Developer experimental.  Do not use in a Production Deployment",
+    "_***Library_mode_only***": "Library CL mode only commands",
     "createLib": "custom-dx-components createLibrary",
     "switchLib": "custom-dx-components switchLibrary",
     "createLibVersion": "custom-dx-components createVersion",
@@ -49,6 +49,10 @@
     "exportLibVersion": "custom-dx-components exportArchive",
     "validate": "custom-dx-components buildComponent",
     "validateAll": "custom-dx-components buildAllComponents",
+    "_***Local component server***": "Commands to lauch local component server for debugging of run time",
+    "localDev": "node scripts/esbuild.dev.js",
+    "localGenerate": "node scripts/main.js",
+    "localStart": "npm run localGenerate && npm run localDev",
     "_***Internal_only***": "Internal usage only",
     "_internal-test-coverage": "node --input-type=module  --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand node_modules/@pega/custom-dx-component --ci --testResultsProcessor='jest-junit' --coverage",
     "_internal-test": "echo 'Running functional and unit tests will DELETE existing local components, proceed (y/n)?' && read proceed && if test \"$proceed\" = \"y\"; then npm run _internal-test-full; fi ",
@@ -107,7 +111,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@pega/configs": "^0.16.2",
-    "@pega/custom-dx-components": "~0.25.24",
+    "@pega/custom-dx-components": "~0.25.25",
     "@pega/pcore-pconnect-typedefs": "^4.1.0-alpha.1",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/addon-essentials": "^7.6.19",
@@ -153,6 +157,7 @@
     "storybook": "^7.6.19",
     "stylelint": "^16.10.0",
     "ts-jest": "^29.2.5",
-    "typescript": "~5.5.4"
+    "typescript": "~5.5.4",
+    "esbuild": "^0.25.0"
   }
 }

package/src/tasks/init/template/scripts/components.json

@@ -0,0 +1,3 @@
+{
+  "components": []
+}

package/src/tasks/init/template/scripts/esbuild.dev.js

@@ -0,0 +1,34 @@
+import esbuild from 'esbuild';
+
+async function startDevServer() {
+  const ctx = await esbuild.context({
+    entryPoints: ['scripts/index.ts'],
+    bundle: true,
+    outdir: 'dist',
+    sourcemap: true,
+    loader: { '.js': 'jsx' },
+    platform: 'browser',
+    logLevel: 'info',
+  });
+
+  // Initial build
+  await ctx.rebuild();
+  console.log('✨ Initial build complete');
+
+  // Watch for changes
+  await ctx.watch();
+  console.log('👀 Watching for changes...');
+
+  let { host, port } = await ctx.serve({
+    servedir: 'dist',
+    port: 3030,
+    host: 'localhost'
+  });
+
+  console.log(`🚀 Development server running at http://${host}:${port}`);
+}
+
+startDevServer().catch((err) => {
+  console.error('Error:', err);
+  process.exit(1);
+});

package/src/tasks/init/template/scripts/index.mustache

@@ -0,0 +1,26 @@
+export const loadable = (importFn: () => Promise<any>, componentName: string) => {
+  return async () => {
+    if (!PCore.getComponentsRegistry().lazyMap[componentName]) {
+      const component = await importFn();
+      PCore.getComponentsRegistry().lazyMap[componentName] = component.default;
+    }
+  };
+};
+
+const reactComponentsMap = {
+  {{#components}}
+  {{name}}: {
+    modules: [
+      loadable(
+        () =>
+          import(
+            /* webpackChunkName: "{{name}}" */ "../src/components/{{name}}/index"
+          ),
+        "{{name}}"
+      ),
+    ],
+    scripts: [],
+  },
+  {{/components}}
+};
+PCore.getComponentsRegistry().mergeComponentsMap(reactComponentsMap);

package/src/tasks/init/template/scripts/index.ts

@@ -0,0 +1 @@
+/* entry point for component map */

package/src/tasks/init/template/scripts/main.js

@@ -0,0 +1,75 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import Mustache from 'mustache';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const componentsDir = path.join(__dirname, '../src/components');
+const componentsJsonPath = path.join(__dirname, './components.json');
+
+async function populateComponents() {
+  try {
+    if (!fs.existsSync(componentsDir)) {
+      throw new Error(`Components directory not found: ${componentsDir}`);
+    }
+
+    const componentNames = fs.readdirSync(componentsDir)
+      .filter(file => {
+        const componentPath = path.join(componentsDir, file);
+        const configPath = path.join(componentPath, 'config.json');
+        return fs.statSync(componentPath).isDirectory() && fs.existsSync(configPath);
+      })
+      .map(dir => {
+        const configPath = path.join(componentsDir, dir, 'config.json');
+        const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+        return config.componentKey || dir;
+      });
+
+    const data = { components: componentNames };
+    fs.writeFileSync(componentsJsonPath, JSON.stringify(data, null, 2));
+    console.log('Components list updated:', componentNames);
+    return componentNames;
+  } catch (err) {
+    console.error('Error populating components:', err.message);
+    process.exit(1);
+  }
+}
+
+async function generateIndex(components) {
+  try {
+    const templatePath = path.join(__dirname, './index.mustache');
+    const outputPath = path.join(__dirname, './index.ts');
+
+    if (!fs.existsSync(templatePath)) {
+      throw new Error('Template file missing: index.mustache');
+    }
+
+    const template = fs.readFileSync(templatePath, 'utf-8');
+    const templateData = {
+      components: components.map(name => ({ name }))
+    };
+
+    const output = Mustache.render(template, templateData);
+
+    // Ensure src directory exists
+    const srcDir = path.dirname(outputPath);
+    if (!fs.existsSync(srcDir)) {
+      fs.mkdirSync(srcDir, { recursive: true });
+    }
+
+    fs.writeFileSync(outputPath, output, 'utf-8');
+    console.log('Generated exports for components:', components);
+  } catch (err) {
+    console.error('Error generating index:', err.message);
+    process.exit(1);
+  }
+}
+
+async function main() {
+  const components = await populateComponents();
+  await generateIndex(components);
+}
+
+main();

package/src/util.js

@@ -337,6 +337,8 @@ if (showDebug) addDebugLog("applyPegaData", "", "");
 
 export const checkJWTExpiration = async () => {
   const tokenAndStaticServer = await getC11NB2STokenAndStaticServer();
+  const isLibraryBased = getLibraryBased();
+  const isLibraryBasedCL = getLibraryBasedCL();
 
   if (tokenAndStaticServer.C11NB2S === undefined) {
     console.log(chalk.redBright("Need to authenticate, missing services token.\nBuilding a library requires authentication to acquire a token to build."));
@@ -350,13 +352,19 @@ export const checkJWTExpiration = async () => {
     process.exit(1);
   }
 
-  // check that there is customer_org
-  if (!customer_org || customer_org === "") {
-    console.log(chalk.red(`PegaInfinity server DSS setting ${chalk.redBright.bold(`C11nCCv2CustomerOrg`)} is NOT set.`));
-    console.log(chalk.red("Please update DSS setting, save and then reauthenticate."));
-    process.exit(1);
+
+  // only check if older isLibraryBased
+  if (!isLibraryBasedCL && isLibraryBased) {
+    // check that there is customer_org
+    if (!customer_org || customer_org === "") {
+      console.log(chalk.red(`PegaInfinity server DSS setting ${chalk.redBright.bold(`C11nCCv2CustomerOrg`)} is NOT set.`));
+      console.log(chalk.red("Please update DSS setting, save and then reauthenticate."));
+      process.exit(1);
+    }
+
   }
 
+
 }
 
 export const checkAccessTokenExpiration = async() => {