@pega/custom-dx-components/src/tasks/bundle/index.js

Utility for building custom UI components

import path from 'path';
import fs from 'fs';
import { stat } from 'fs/promises';

import { BUILD_CONFIG_JSON_FILENAME } from '../../constants.js';
import { getComponentDirectoryPath, addDebugLog } from '../../util.js';

import buildComponent from './builder/index.js';

const extensions = ['ts', 'tsx', 'js', 'jsx'];

const bundleComponent = async (componentKey, sourceMap, devBuild, showStats = true) => {
addDebugLog("bundleComponent", `componentKey: ${componentKey}, sourceMap: ${sourceMap}, devBuild: ${devBuild}, showStats: ${showStats}`, "");

  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,
    showStats
  });
};

export default bundleComponent;