babel.config.js

/* global module, __dirname, require */
require.extensions['.css'] = () => undefined;
const path = require('path');
const glob = require('glob');

const mapper = {
    TextVariants: 'Text',
    DropdownPosition: 'dropdownConstants',
    EmptyStateVariant: 'EmptyState',
    TextListItemVariants: 'TextListItem',
    TextListVariants: 'TextList',
    PaginationVariant: 'Pagination'
};

const FECMapper = {
    SkeletonSize: 'Skeleton',
    PageHeaderTitle: 'PageHeader',
    conditionalFilterType: 'ConditionalFilter'
};

const NotificationMapper = {
    REMOVE_NOTIFICATION: 'actionTypes',
    ADD_NOTIFICATION: 'actionTypes',
    NotificationsPortal: 'NotificationPortal',
    addNotification: 'actions'
};

const IconMapper = {
    CloudServerIcon: 'cloudServer-icon',
    AnsibeTowerIcon: 'ansibeTower-icon'
};

const StyledSystemMapper = {
    StyledConstants: 'StyledTheme'
};

const patternflyTransformImports = (env) => [
    'transform-imports',
    {
        '@patternfly/react-table': {
            skipDefaultConversion: true,
            transform: `@patternfly/react-table/dist/${env}`
        },
        '@patternfly/react-core': {
            transform: (importName) => {
                let res;
                const files = glob.sync(
                    path.resolve(
                        __dirname,
                        `./node_modules/@patternfly/react-core/dist/${env}/**/${mapper[
                        importName
                        ] || importName}.js`
                    )
                );
                if (files.length > 0) {
                    res = files[0];
                } else {
                    throw `File with importName ${importName} does not exist`;
                }

                res = res.replace(path.resolve(__dirname, './node_modules/'), '');
                res = res.replace(/^\//, '');
                return res;
            },
            preventFullImport: true,
            skipDefaultConversion: true
        },
        '@patternfly/react-icons': {
            transform: (importName) =>
                `@patternfly/react-icons/dist/${env}/icons/${IconMapper[importName] || importName
                .split(/(?=[A-Z])/)
                .join('-')
                .toLowerCase()}.js`,
            preventFullImport: true
        }
    },
    'patternfly-react'
];

const fecTransformImports = (env) => [
    'transform-imports',
    {
        '@redhat-cloud-services/frontend-components': {
            transform: (importName) => `@redhat-cloud-services/frontend-components/components/${
                env
            }/${
                FECMapper[importName] || importName
            }.js`,
            preventFullImport: false,
            skipDefaultConversion: true
        },
        '@redhat-cloud-services/frontend-components-notifications': {
            transform: (importName) =>
                `@redhat-cloud-services/frontend-components-notifications/${
                    env
                }/${
                    NotificationMapper[importName] || importName
                }.js`,
            preventFullImport: true
        },
        '@redhat-cloud-services/frontend-components-remediations': {
            transform: (importName) => `@redhat-cloud-services/frontend-components-remediations/${
                env
            }/${
                importName === 'RemediationButton' ? 'RemediationButton.js' : 'index.js'
            }`,
            preventFullImport: false,
            skipDefaultConversion: false
        }
    },
    'frontend-components'
];

module.exports = {
    presets: [
        '@babel/env', '@babel/react'
    ],
    plugins: [
        ['transform-inline-environment-variables', {
            include: [
                'NODE_ENV'
            ]
        }],
        '@babel/plugin-transform-runtime',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-proposal-nullish-coalescing-operator',
        '@babel/plugin-proposal-optional-chaining',
        'lodash',
        'transform-class-properties'
    ],
    env: {
        cjs: {
            plugins: [
                patternflyTransformImports('js'),
                fecTransformImports('cjs')
            ]
        },
        esm: {
            plugins: [
                patternflyTransformImports('esm'),
                fecTransformImports('esm')
            ]
        },
        production: {
            plugins: [
                patternflyTransformImports('esm'),
                fecTransformImports('esm')
            ]
        },
        development: {
            plugins: [
                patternflyTransformImports('esm'),
                fecTransformImports('esm')
            ]
        },
        test: {
            plugins: [
                patternflyTransformImports('js'),
                fecTransformImports('cjs')
            ]
        }
    }
};