@pega/custom-dx-components 0.242.17 → 0.242.19

package/README.md

@@ -18,4 +18,4 @@ Ensure you have access to the following in your system:
 
 ## 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": "0.242.17",
+  "version": "0.242.19",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@pega/auth": "^0.1.6",
-    "@pega/constellation-dx-components-build-utils": "^1.0.1-dev-0.13",
+    "@pega/constellation-dx-components-build-utils": "^1.0.1-dev-0.15",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
     "archiver": "^7.0.1",

package/src/constants.js

@@ -43,7 +43,8 @@ export const CATEGORY_CONSTELLATION = 'constellation';
 
 export const BOOTSTRAP_CONFIG = 'PRRestService/api/application/v2/data_views/D_pxBootstrapConfig';
 
-export const JEST_ASSETS_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/components/';
+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_CREATE_PATH = 'create/';
 export const JEST_CREATE_ALL_CONSTELLATION_PATH = 'createAll/Constellation/';
 export const JEST_CREATE_ALL_LAUNCHPAD_PATH = 'createAll/Launchpad';
@@ -59,7 +60,8 @@ export const AUTHENTICATE_DEFAULTS = {
 
 export const SHARED_FILE_NAMES = [
   "suggestions-handler.ts",
-  "PConnProps.d.ts"
+  "PConnProps.d.ts",
+  "create-nonce.ts"
 ];
 
 export const AUTHENTICATE_SCHEMA = {

package/src/tasks/build-jest-assets/index.js

@@ -5,11 +5,11 @@ import inquirer from 'inquirer';
 import { Listr } from 'listr2';
 import chalk from 'chalk';
 
-import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents } from '../../util.js';
+import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents, getLibraryBased, setLibraryBased } from '../../util.js';
 import createAll from '../create-all/index.js';
 import create from '../create/index.js';
 
-import { JEST_ASSETS_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
+import { JEST_ASSETS_ORIGINAL_PATH, JEST_ASSETS_LIBRARY_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
 
 
 const getBuildAssetsQuestions = async ()  => {
@@ -92,7 +92,7 @@ const deleteAssets = async() => {
   }
 }
 
-const createJestAssets = async(isLaunchPad = false) => {
+const createJestOriginalAssets = async(isLaunchPad = false) => {
 
   // initially delete local assets
   await deleteAssets();
@@ -108,7 +108,7 @@ const createJestAssets = async(isLaunchPad = false) => {
 
   // goto Constellation
   // get current test assets and delete them
-  let createAllPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestCreateAllPath);
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_ORIGINAL_PATH, jestCreateAllPath);
   const fileList = await getSubComponents(createAllPath, '');
 
   for (const index in fileList) {
@@ -127,7 +127,56 @@ const createJestAssets = async(isLaunchPad = false) => {
 
   await create(myOptions);
 
-  let createPath = path.join(path.resolve(), JEST_ASSETS_PATH, JEST_CREATE_PATH);
+  let createPath = path.join(path.resolve(), JEST_ASSETS_ORIGINAL_PATH, JEST_CREATE_PATH);
+  const myFileList = await getSubComponents(createPath, '');
+
+  for (const index in myFileList) {
+    const componentToDelete = myFileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createPath, componentToDelete);
+  }
+
+  await copyAssets(createPath);
+  await deleteAssets();
+}
+
+const createJestLibraryAssets = async(isLaunchPad = false) => {
+
+  // initially delete local assets
+  await deleteAssets();
+
+  // const framework = await getFramework();
+  let args  = [ '','', '', 'My', '0.0.1', 'DXIL', '', 'Pega'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await createAll(myOptions);
+
+  const jestCreateAllPath = isLaunchPad ? JEST_CREATE_ALL_LAUNCHPAD_PATH : JEST_CREATE_ALL_CONSTELLATION_PATH;
+
+  // goto Constellation
+  // get current test assets and delete them
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_LIBRARY_PATH, jestCreateAllPath);
+  const fileList = await getSubComponents(createAllPath, '');
+
+  for (const index in fileList) {
+    const componentToDelete = fileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createAllPath, componentToDelete);
+  }
+
+  await copyAssets(createAllPath);
+  await deleteAssets();
+
+  args  = [ '','', '', 'Field', 'Text', 'MyTestText', 'My Test Text', '0.0.1','DXIL', '', 'My Test Text Description', 'Pega'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await create(myOptions);
+
+  let createPath = path.join(path.resolve(), JEST_ASSETS_LIBRARY_PATH, JEST_CREATE_PATH);
   const myFileList = await getSubComponents(createPath, '');
 
   for (const index in myFileList) {
@@ -152,18 +201,32 @@ export default async options => {
   if (buildAssets) {
     // get current server type
     const savedServerType = await getServerType();
+    const savedLibraryBased = await getLibraryBased();
+
+    await setLibraryBased(false);
 
     // Constellation
     await setServerType("infinity");
-    await createJestAssets(false);
+    await createJestOriginalAssets(false);
 
     //Launchpad
     await setServerType("launchpad");
-    await createJestAssets(true);
+    await createJestOriginalAssets(true);
+
+    // Constellation Library
+    await setLibraryBased(true);
+    await setServerType("infinity");
+    await createJestLibraryAssets(false);
+
+    //Launchpad
+    // await setServerType("launchpad");
+    // await createJestLibraryAssets(true);
 
 
     // restore serverType
     await setServerType(savedServerType);
+    await setLibraryBased(savedLibraryBased);
+
   }
 
 

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

@@ -1,54 +1,55 @@
-import inquirer from 'inquirer';
-import { Listr } from 'listr2';
-import chalk from 'chalk';
 import path from 'path';
 import fs from 'fs';
 
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+import { buildLib } from '@pega/constellation-dx-components-build-utils/index.js';
 
 import validate from '../validator/index.js';
 import { lintComponent } from '../linter/index.js';
-import { getComponentDirectoryPath, showVersion, getComponents, getLibraryBased, getC11NB2STokenAndStaticServer, updateComponentDefaultVersion, deleteLocalLibrary } from '../../util.js';
+import {
+  getComponentDirectoryPath,
+  showVersion,
+  getComponents,
+  getLibraryBased,
+  getC11NB2STokenAndStaticServer,
+  updateComponentDefaultVersion
+} from '../../util.js';
+import bundleComponent from '../bundle/index.js';
 
 import { getBuildComponentQuestions, getOrgLib } from './helper.js';
-import { buildLib } from '@pega/constellation-dx-components-build-utils/index.js';
 
 const isLibraryBased = await getLibraryBased();
 
 export const updateConfigVersion = async (componentKey, buildVersion) => {
   const componentDirectory = await getComponentDirectoryPath(componentKey);
-  let configFileName = "config.json";
+  const configFileName = 'config.json';
 
   const configFile = path.join(componentDirectory, configFileName);
   let configData;
   try {
     configData = fs.readFileSync(path.resolve(configFile), 'utf8');
-  }
-  catch (err) {
-
+  } catch (err) {
     // for now, if now file just end
-    console.log(`${chalk.bold.yellow('Config file not availabe for: ' + componentToValidate)}`);
+    console.log(`${chalk.bold.yellow(`Config file not available for: ${componentKey}`)}`);
     return;
-
   }
 
   let data;
   try {
     data = JSON.parse(configData);
-  }
-  catch (er) {
+  } catch (er) {
     throw new Error(`Invalid schema json in config.json: ${er}`);
   }
 
   data.version = buildVersion;
 
   // write back file
-  fs.writeFileSync(configFile, JSON.stringify(data, null, 4),  { encoding: 'utf8' });
-}
-
-
-export function getCustomTasks(componentKey, devBuild, buildVersion, options) {
+  fs.writeFileSync(configFile, JSON.stringify(data, null, 4), { encoding: 'utf8' });
+};
 
-  const sDevBuild = devBuild ? '(dev build)' : '';
+export function getCustomTasks(componentKey, devBuild, buildVersion) {
   return new Listr(
     [
       {
@@ -57,7 +58,7 @@ export function getCustomTasks(componentKey, devBuild, buildVersion, options) {
           await updateConfigVersion(componentKey, buildVersion);
           await validate(componentKey);
         },
-        skip: () => (componentKey === "shared" ? true : false)
+        skip: () => componentKey === 'shared'
       },
       {
         title: 'Lint component',
@@ -67,32 +68,25 @@ export function getCustomTasks(componentKey, devBuild, buildVersion, options) {
           await lintComponent(targetDirectory);
         }
       }
-
     ],
     { concurrent: false, exitOnError: true }
   );
-
-
 }
 
-
-
-
-export default async (options) => {
+export default async options => {
   if (!isLibraryBased) {
-    console.log(`Command only supported for ${chalk.bold.green('library based')} components.`)
+    console.log(`Command only supported for ${chalk.bold.green('library based')} components.`);
     process.exit();
   }
 
   showVersion();
 
-
   const components = await getComponents();
 
   const compDef = await getOrgLib();
   const organization = compDef.organization;
   const library = compDef.library;
-  const currentOrgLib = organization.concat("_").concat(library);
+  const currentOrgLib = organization.concat('_').concat(library);
 
   let version;
   let devBuild;
@@ -100,66 +94,65 @@ export default async (options) => {
   if (options.params.length >= 5) {
     version = options.params[3];
     const dBuild = options.params[4];
-    devBuild = (dBuild === 'Y' ||
-    dBuild === 'y' ||
-    dBuild === true ||
-    dBuild === 'true') ? true : false;
-  }
-  else {
-
-
-
-    console.log(`\nLibrary ${chalk.bold.green(currentOrgLib)} `)
+    devBuild = !!(dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true');
+  } else {
+    console.log(`\nLibrary ${chalk.bold.green(currentOrgLib)} `);
     const questions = await getBuildComponentQuestions(compDef.version);
     const answers = await inquirer.prompt(questions);
     ({ version, devBuild } = answers);
   }
 
-
   const tokenAndStaticServer = await getC11NB2STokenAndStaticServer();
 
   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."));
+    console.log(
+      chalk.redBright(
+        'Need to authenticate, missing services token.\nBuilding a library requires authentication to acquire a token to build.'
+      )
+    );
     process.exit(1);
-
   }
 
-  const buildLibName = organization.concat("_").concat(library);
+  const buildLibName = organization.concat('_').concat(library);
 
   await updateComponentDefaultVersion(version);
 
-  const buildVersion = devBuild && version.indexOf("-dev") < 0 ? version.concat("-dev") : version;
+  const buildVersion = devBuild && version.indexOf('-dev') < 0 ? version.concat('-dev') : version;
 
   for await (const componentKey of components) {
     console.log(chalk.bold.green(`Building ${componentKey}`));
 
-    const myCustomTasks = getCustomTasks(componentKey, devBuild, buildVersion, options );
+    // eslint-disable-next-line sonarjs/no-extra-arguments
+    const myCustomTasks = getCustomTasks(componentKey, devBuild, buildVersion, options);
 
     try {
       await myCustomTasks.run();
-    }
-    catch (err) {
+    } catch (err) {
       console.log(chalk.bold.red(err.toString()));
       process.exit(1);
     }
-
-    console.log(""); // line break
-
+    console.log(''); // line break
   }
 
-  console.log(chalk.green.bold("Building Library... "));
+  // bundling the first component will actually compile all.  We should
+  // compile to see if any errors, as buildLib doesn't catch all errors.
+  // Turning off stats (last param), so won't show warnings, as
+  // warnings are part of buildLib
+  console.log(chalk.green.bold('Compile check...'));
+  await bundleComponent(components[0], null, devBuild, false);
+  console.log('');
 
-  // delete and rebuild library
-  try {
-    // await deleteLocalLibrary(currentOrgLib);
-  }
-  catch (ex) {}
+  console.log(chalk.green.bold('Building Library... '));
 
   // call constellation-dx-components-build-utils build library, which will create a directory of the "buildLibName"
   // with subdirectories for each version.
   // If "buildDev", we append to version "-dev".  Currently, only "-dev" versions, when published, can be deleted.
-  buildLib(buildLibName, buildVersion, tokenAndStaticServer.C11NB2S, tokenAndStaticServer.appStaticContentServer);
-
+  buildLib(
+    buildLibName,
+    buildVersion,
+    tokenAndStaticServer.C11NB2S,
+    tokenAndStaticServer.appStaticContentServer
+  );
 
   return true;
 };

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

@@ -47,7 +47,7 @@ const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 let compilationErrors = null;
 
 // Create the build and print the deployment instructions.
-function build(config, previousFileSizes) {
+function build(config, previousFileSizes, showStats = true) {
   console.log(`Creating a ${Env} build...`);
 
 
@@ -72,7 +72,10 @@ function build(config, previousFileSizes) {
           //store and print elsewhere
           compilationErrors = stats.compilation.errors;
 
-          console.log("stats:" + stats);
+          if (showStats) {
+            console.log("stats:" + stats);
+          }
+
         }
 
        }
@@ -137,7 +140,8 @@ export default ({
   externals,
   globals,
   sourceMap,
-  devBuild
+  devBuild,
+  showStats
 }) => {
   // Generate configuration
   const config = configFactory(Env, {
@@ -161,28 +165,31 @@ export default ({
         // if you're in it, you don't end up in Trash
         fs.emptyDirSync(paths.appBuild);
         // Start the webpack build
-        return build(config, previousFileSizes);
+        return build(config, previousFileSizes, showStats);
       })
       .then(
         ({ stats, previousFileSizes, warnings }) => {
-          if (warnings.length) {
-            //console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
-            console.log(chalk.yellow('Compiled with warnings.\n'));
-            for (let warning in warnings) {
-              console.log(chalk.yellow("Warning.."), warnings[warning].message);
+          if (showStats) {
+            if (warnings.length) {
+              //console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
+              console.log(chalk.yellow('Compiled with warnings.\n'));
+              for (let warning in warnings) {
+                console.log(chalk.yellow("Warning.."), warnings[warning].message);
+              }
+            } else {
+              console.log(chalk.green('Compiled successfully.\n'));
             }
-          } 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
+            );
           }
 
-          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');
         },
         err  => {

package/src/tasks/bundle/index.js

@@ -9,7 +9,7 @@ import buildComponent from './builder/index.js';
 
 const extensions = ['ts', 'tsx', 'js', 'jsx'];
 
-const bundleComponent = async (componentKey, sourceMap, devBuild) => {
+const bundleComponent = async (componentKey, sourceMap, devBuild, showStats = true) => {
   const componentDirectory = await getComponentDirectoryPath(componentKey);
 
   const idx = (
@@ -58,7 +58,8 @@ const bundleComponent = async (componentKey, sourceMap, devBuild) => {
     externals,
     globals,
     sourceMap,
-    devBuild
+    devBuild,
+    showStats
   });
 };
 

package/src/tasks/create/index.js

@@ -32,7 +32,7 @@ const copyComponentTemplate = async options => {
   });
 };
 
-const isLibraryBased = await getLibraryBased();
+let isLibraryBased = await getLibraryBased();
 
 const compileMustacheTemplates = async (
   componentDirectory,
@@ -186,6 +186,7 @@ const validateCompile = async (
     framework = "Constellation";
   }
 
+  isLibraryBased = await getLibraryBased();
 
   // check of library or version has changed from default, if so, update componentDefaults
   const componentDefaults = await getComponentDefaults();

package/src/tasks/create/templates/Constellation/Field/Boolean/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache

@@ -8,6 +8,7 @@ import {
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Date/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Date/index.tsx.mustache

@@ -3,6 +3,7 @@ import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } f
 import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/Field/DateTime/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/DateTime/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import DateTimeFormatter from "./date-time";

package/src/tasks/create/templates/Constellation/Field/Decimal/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.tsx.mustache

@@ -11,6 +11,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -35,23 +35,23 @@ const statelistData = {
   ]
 };
 
-window.PCore.getDataPageUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(statelistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(statelistData);
-      });
-    }
-  };
-};
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
+  window.PCore.getDataPageUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      },
+      getDataAsync: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      }
+    };
+  };
+
   const props = {
     countryCode: configProps.countryCode,
     getPConnect: () => {

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
   URLDisplay
 } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // IMPORTANT
 // To use Icons, need to individually import the icon file form @pega/cosmos-react-core (see path below)

package/src/tasks/create/templates/Constellation/Field/Integer/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}