@pega/custom-dx-components 0.0.1

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

@@ -0,0 +1,334 @@
+import { createRequire } from 'module';
+
+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';
+
+const require = createRequire(import.meta.url);
+
+// const appPackageJson = require(paths.appPackageJson);
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+
+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 }
+};
+
+let shouldUseSourceMap = process.env.SOURCE_MAP;
+
+const imageInlineSizeLimit = Number.parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000', 10);
+
+// style files regex
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+export default (
+  webpackEnv,
+  // eslint-disable-next-line no-unused-vars
+  { inputFile, outputFile, componentKey, externals, globals, sourceMap, devBuild }
+) => {
+  const isEnvDevelopment = webpackEnv === 'development' || devBuild;
+  const isEnvProduction = webpackEnv === 'production';
+  sourceMap = sourceMap === 'true';
+  shouldUseSourceMap = shouldUseSourceMap || sourceMap;
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          postcssOptions: {
+            plugins: [
+              [
+                'postcss-preset-env',
+                {
+                  // Options
+                }
+              ]
+            ]
+          },
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+        }
+      }
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push(
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+            root: paths.appSrc
+          }
+        },
+        {
+          loader: require.resolve(preProcessor),
+          options: {
+            sourceMap: true
+          }
+        }
+      );
+    }
+    return loaders;
+  };
+  return {
+    mode: isEnvDevelopment ? 'development' : 'production',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: inputFile,
+    devtool: shouldUseSourceMap ? 'source-map' : false,
+    output: {
+      // The build folder.
+      path: paths.appBuild,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? `${componentKey}/${componentKey}.js`
+        : isEnvDevelopment && `${componentKey}/${componentKey}.js`,
+      chunkFilename: isEnvProduction
+        ? `${componentKey}/js/[name].[contenthash:8].chunk.js`
+        : isEnvDevelopment && `${componentKey}/js/[name].chunk.js`,
+      library: {
+        name: componentKey,
+        type: 'umd',
+        export: 'default'
+      }
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
+    },
+    resolve: {
+      plugins: [],
+      extensions: ['.tsx', '.ts', '.js']
+    },
+    resolveLoader: {
+      plugins: []
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // TODO: Merge this config once `image/avif` is in the mime-db
+            // https://github.com/jshttp/mime-db
+            {
+              test: [/\.avif$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                mimetype: 'image/avif',
+                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.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                name: `${componentKey}/media/[name].[hash:8].[ext]`
+              }
+            },
+            // Process application JS with TS-Loader.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx)$/,
+              include: paths.appSrc,
+              loader: 'ts-loader',
+              options: {
+                configFile: 'tsconfig.build.json'
+              },
+              exclude: /node_modules/
+            },
+
+            {
+              test: /\.(ts|tsx)$/,
+              loader: 'ts-loader',
+              options: {
+                configFile: 'tsconfig.build.json'
+              },
+              exclude: /node_modules/
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                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
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                modules: {
+                  getLocalIdent: getCSSModuleLocalIdent
+                }
+              })
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
+                },
+                '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
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent
+                  }
+                },
+                'sass-loader'
+              )
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve('file-loader'),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpack's internal loaders.
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              options: {
+                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
+      // 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
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      isEnvProduction &&
+        new webpack.DefinePlugin({
+          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`
+        }),
+      // 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
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/
+      }),
+      /* Ignore cosmos icons */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/icons$/,
+        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$/
+      }),
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 5
+      }),
+      new webpack.optimize.MinChunkSizePlugin({
+        minChunkSize: 100000 // Minimum number of characters
+      }),
+      isEnvProduction && new CompressionPlugin(compressionBRConfObj)
+
+      /* Dont generate gzip file */
+      /* isEnvProduction && new CompressionPlugin(compressionGZConfObj) */
+    ].filter(Boolean),
+    performance: {
+      hints: 'warning'
+    },
+    externals
+  };
+};

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

@@ -0,0 +1,65 @@
+import path from 'path';
+import fs from 'fs';
+import { stat } from 'fs/promises';
+
+import { BUILD_CONFIG_JSON_FILENAME } from '../../../constants.js';
+import { getComponentDirectoryPath } from '../../../util.js';
+
+import buildComponent from './builder/index.js';
+
+const extensions = ['ts', 'tsx', 'js', 'jsx'];
+
+const bundleComponent = async (componentKey, sourceMap, devBuild) => {
+  const componentDirectory = await getComponentDirectoryPath(componentKey);
+
+  const idx = (
+    await Promise.all(
+      extensions.map(ext =>
+        stat(path.join(componentDirectory, `index.${ext}`))
+          .then(() => true)
+          .catch(() => false)
+      )
+    )
+  ).findIndex(exists => exists);
+
+  if (idx === -1) throw new Error('Index file not found.');
+
+  const inputFile = path.join(componentDirectory, `index.${extensions[idx]}`);
+  const outputFile = `${componentKey}.js`;
+
+  let buildConfig = {};
+
+  if (fs.existsSync(BUILD_CONFIG_JSON_FILENAME)) {
+    buildConfig = JSON.parse(fs.readFileSync(BUILD_CONFIG_JSON_FILENAME, 'utf8'));
+  }
+
+  let externals = buildConfig.externals || [];
+  externals = {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    PCore: 'PCore',
+    ...buildConfig.externals
+  };
+
+  let globals = buildConfig.globals || {};
+
+  const defaultGlobals = {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    PCore: 'PCore',
+    ...buildConfig.globals
+  };
+
+  globals = { ...globals, ...defaultGlobals };
+  await buildComponent({
+    inputFile,
+    outputFile,
+    componentKey,
+    externals,
+    globals,
+    sourceMap,
+    devBuild
+  });
+};
+
+export default bundleComponent;

package/src/tasks/publish/helper.js

@@ -0,0 +1,145 @@
+import fs from 'fs';
+import path from 'path';
+import https from 'https';
+
+import fetch from 'node-fetch';
+import AdmZip from 'adm-zip';
+import chalk from 'chalk';
+
+import {
+  constructCompleteUrl,
+  getComponentDirectoryPath,
+  getComponents,
+  getPegaServerConfig,
+  validateRulesetVersion
+} from '../../util.js';
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
+
+export const getPublishComponentQuestions = async () => {
+  const components = await getComponents();
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  return [
+    {
+      name: 'componentKey',
+      type: 'rawlist',
+      message: 'Select component to publish',
+      choices: components
+    },
+    {
+      name: 'rulesetName',
+      message: 'Enter ruleset name',
+      default: defaultPegaConfig.rulesetName,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'Ruleset name cannot be empty';
+      }
+    },
+    {
+      name: 'rulesetVersion',
+      message: 'Enter ruleset version',
+      default: defaultPegaConfig.rulesetVersion,
+      validate: value => {
+        if (validateRulesetVersion(value)) {
+          return true;
+        }
+        return 'Please provide compatible version e.g 01-01-01';
+      }
+    },
+    {
+      name: 'sourceMap',
+      message: 'Generate source map ?',
+      default: defaultPegaConfig.sourceMap,
+      when: () => false && !process.env.SOURCE_MAP
+    },
+    {
+      name: 'devBuild',
+      message: 'Generate development build ?',
+      default: defaultPegaConfig.devBuild
+    }
+  ];
+};
+
+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 zip = new AdmZip();
+
+  zip.addLocalFolder(srcDirectory, 'src/');
+  zip.addLocalFile(configJson);
+  zip.addLocalFolder(buildDirectory);
+  const zipContent = zip.toBuffer().toString('base64');
+
+  const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
+  fs.rmdir('dist', { recursive: true }, err => {
+    if (err) {
+      throw err;
+    }
+  });
+  return { zipContent, configContent };
+};
+
+export const publishComponentToServer = async data => {
+  const { configContent, zipContent, componentKey, rulesetName, rulesetVersion } = data;
+
+  const apiBody = {
+    configContent,
+    zipContent,
+    componentKey: JSON.parse(configContent).componentKey,
+    publishFor: 'constellation',
+    rulesetName,
+    rulesetVersion,
+    category: ''
+  };
+  const defaultPegaConfig = await getPegaServerConfig();
+  const url = constructCompleteUrl(
+    defaultPegaConfig.server,
+    PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT
+  );
+  try {
+    const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
+    if (OauthData) {
+      const {
+        access_token: accessToken,
+        token_type: tokenType,
+        refresh_token: refreshToken
+      } = JSON.parse(OauthData);
+      let status = 500;
+      fetch(url, {
+        method: 'POST',
+        agent: new https.Agent({ rejectUnauthorized: false }),
+        headers: {
+          Authorization: `${tokenType} ${accessToken}`
+        },
+        body: JSON.stringify(apiBody)
+      })
+        .then(response => {
+          status = response.status;
+          return response.text();
+        })
+        .then(resp => {
+          const respData = JSON.parse(resp);
+          if (status === 401) {
+            throw new Error(
+              'Error occured in authentication. Please regenerate using authenticate'
+            );
+            // console.log(accessTokenUri, refreshToken);
+            /* TODO - Handle refresh_token */
+          } else if (status == 200) {
+            console.log(chalk.bold.green(`Success : ${respData.message}`));
+          } else {
+            throw new Error(`${respData.message}`);
+          }
+        })
+        .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
+    } else {
+      throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+    }
+  } catch (err) {
+    throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+  }
+};

package/src/tasks/publish/index.js

@@ -0,0 +1,55 @@
+import inquirer from 'inquirer';
+import Listr from 'listr';
+import chalk from 'chalk';
+
+import validate from '../validator/index.js';
+
+import bundleComponent from './bundle/index.js';
+import { getPublishComponentQuestions, publishComponentToServer, zipComponent } from './helper.js';
+
+export default async options => {
+  const questions = await getPublishComponentQuestions();
+  const answers = await inquirer.prompt(questions);
+  const { componentKey, sourceMap, devBuild } = answers;
+
+  let content = {
+    ...answers
+  };
+
+  const tasks = new Listr(
+    [
+      {
+        title: 'Validate config schema',
+        task: async () => {
+          await validate(componentKey);
+        }
+      },
+      {
+        title: 'Bundle Component',
+        task: async () => await bundleComponent(componentKey, sourceMap, devBuild),
+        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);
+        }
+      }
+    ],
+    {
+      exitOnError: true
+    }
+  );
+
+  await tasks.run().catch(err => {
+    console.log(chalk.bold.red(err.toString()));
+  });
+  return true;
+};

package/src/tasks/update/index.js

@@ -0,0 +1,5 @@
+import publishComponent from '../publish/index.js';
+
+export default options => {
+  return publishComponent(options);
+};

package/src/tasks/upgrade/index.js

@@ -0,0 +1,31 @@
+import { promisify } from 'util';
+import { exec } from 'child_process';
+
+import Listr from 'listr';
+
+const execPromise = promisify(exec);
+
+export default async options => {
+  const installDependenciesText = `Upgrading package to latest version.`;
+
+  const tasks = new Listr(
+    [
+      {
+        title: installDependenciesText,
+        task: async () => {
+          await execPromise('npm uninstall --save-dev @pega/custom-dx-components', {
+            cwd: options.targetDirectory
+          });
+          await execPromise('npm install --save-dev @pega/custom-dx-components', {
+            cwd: options.targetDirectory
+          });
+        }
+      }
+    ],
+    {
+      exitOnError: false
+    }
+  );
+
+  await tasks.run();
+};