[V2] Stream line build output files structure.

babel.config.js

@@ -1,16 +1,42 @@
-const createIconsTransformPlugin = [
-    'transform-imports',
-    {
-        '@patternfly/react-icons': {
-            transform: (importName) =>
-                `@patternfly/react-icons/dist/js/icons/${importName.split(/(?=[A-Z])/).join('-').toLowerCase()}`,
-            preventFullImport: true,
-        },
-    },
-];
-
+const camelToSnake = (string) => {
+    return string
+      .replace(/[\w]([A-Z])/g, function(m) {
+        return m[0] + '-' + m[1];
+      })
+      .toLowerCase();
+  };
 
 module.exports = {
-    "presets": ["@babel/preset-env", "@babel/preset-react"],
-    "plugins": ["@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties", createIconsTransformPlugin ]
+    presets: ["@babel/preset-env", "@babel/preset-react"],
+    plugins: ["@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties" ],
+    env: {
+        cjs: {
+            plugins: [
+                [
+                    'transform-imports',
+                    {
+                    '@data-driven-forms/react-form-renderer': {
+                        transform: (importName) => `@data-driven-forms/react-form-renderer/dist/cjs/${camelToSnake(importName)}`,
+                        preventFullImport: true
+                    }
+                    },
+                    '@data-driven-forms/react-form-renderer-CJS'
+                ],
+            ]
+        },
+        esm: {
+            plugins: [
+                [
+                  'transform-imports',
+                  {
+                    '@data-driven-forms/react-form-renderer': {
+                      transform: (importName) => `@data-driven-forms/react-form-renderer/dist/esm/${camelToSnake(importName)}`,
+                      preventFullImport: true
+                    }
+                  },
+                  '@data-driven-forms/react-form-renderer-ESM'
+                ],
+            ]
+        }
+    }
 }

package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.4.0",
+    "glob": "^7.1.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",
     "lerna": "^3.13.1",

packages/common/babel.config.js

@@ -1,3 +1,172 @@
+require.extensions['.css'] = () => undefined;
+const path = require('path');
+const glob = require('glob');
+
+const mapper = {
+  TextVariants: 'Text',
+  ButtonVariant: 'Button',
+  DropdownPosition: 'dropdownConstants',
+  TextListVariants: 'TextList',
+  TextListItemVariants: 'TextListItem'
+};
+
 module.exports = {
   extends: '../../babel.config.js',
+  env: {
+    cjs: {
+      plugins: [
+        [
+          'transform-imports',
+          {
+            '@patternfly/react-core': {
+              transform: (importName) => {
+                let res;
+                const files = glob.sync(
+                  path.resolve(__dirname, `../../node_modules/@patternfly/react-core/dist/js/**/${mapper[importName] || importName}.js`)
+                );
+                if (files.length > 0) {
+                  res = files[0];
+                } else {
+                  throw new Error(`File with importName ${importName} does not exist`);
+                }
+
+                res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
+                res = res.replace(/^\//, '');
+                return res;
+              },
+              preventFullImport: false,
+              skipDefaultConversion: true
+            }
+          },
+          'react-core-CJS'
+        ],
+        [
+          'transform-imports',
+          {
+            '@patternfly/react-icons': {
+              transform: (importName) =>
+                `@patternfly/react-icons/dist/js/icons/${importName
+                  .split(/(?=[A-Z])/)
+                  .join('-')
+                  .toLowerCase()}`,
+              preventFullImport: true
+            }
+          },
+          'react-icons-CJS'
+        ],
+        [
+          'transform-imports',
+          {
+            'patternfly-react': {
+              transform: (importName) => {
+                let res;
+                const files = glob.sync(path.resolve(__dirname, `../../node_modules/patternfly-react/dist/js/**/${importName}.js`));
+                if (files.length > 0) {
+                  res = files[0];
+                } else {
+                  throw new Error(`File with importName ${importName} does not exist`);
+                }
+
+                res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
+                res = res.replace(/^\//, '');
+                return res;
+              },
+              preventFullImport: false,
+              skipDefaultConversion: false
+            }
+          },
+          'pf3-react-CJS'
+        ],
+        [
+          'transform-imports',
+          {
+            '@material-ui/core': {
+              transform: (importName) => `@material-ui/core/${importName}`,
+              preventFullImport: false,
+              skipDefaultConversion: false
+            }
+          },
+          'MUI-CJS'
+        ]
+      ]
+    },
+    esm: {
+      plugins: [
+        [
+          'transform-imports',
+          {
+            '@patternfly/react-core': {
+              transform: (importName) => {
+                let res;
+                const files = glob.sync(
+                  path.resolve(__dirname, `../../node_modules/@patternfly/react-core/dist/esm/**/${mapper[importName] || importName}.js`)
+                );
+                if (files.length > 0) {
+                  res = files[0];
+                } else {
+                  throw new Error(`File with importName ${importName} does not exist`);
+                }
+
+                res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
+                res = res.replace(/^\//, '');
+                return res;
+              },
+              preventFullImport: false,
+              skipDefaultConversion: true
+            }
+          },
+          'react-core-ESM'
+        ],
+
+        [
+          'transform-imports',
+          {
+            '@patternfly/react-icons': {
+              transform: (importName) =>
+                `@patternfly/react-icons/dist/esm/icons/${importName
+                  .split(/(?=[A-Z])/)
+                  .join('-')
+                  .toLowerCase()}`,
+              preventFullImport: true
+            }
+          },
+          'react-icons-ESM'
+        ],
+        [
+          'transform-imports',
+          {
+            'patternfly-react': {
+              transform: (importName) => {
+                let res;
+                const files = glob.sync(path.resolve(__dirname, `../../node_modules/patternfly-react/dist/esm/**/${importName}.js`));
+                if (files.length > 0) {
+                  res = files[0];
+                } else {
+                  throw new Error(`File with importName ${importName} does not exist`);
+                }
+
+                res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
+                res = res.replace(/^\//, '');
+                return res;
+              },
+              preventFullImport: false,
+              skipDefaultConversion: false
+            }
+          },
+          'pf3-react-ESM'
+        ],
+        [
+          'transform-imports',
+          {
+            '@material-ui/core': {
+              transform: (importName) => `@material-ui/core/esm/${importName}`,
+              preventFullImport: false,
+              skipDefaultConversion: false
+            }
+          },
+          'MUI-ESM'
+        ]
+      ]
+    }
+  }
 };

packages/mui-component-mapper/package.json

@@ -7,7 +7,10 @@
   "license": "Apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --env dev --config ./config/webpack.config.js --open --hot",
-    "build": "rollup -c ./rollup.config.js",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:umd",
+    "build:cjs": "BABEL_ENV=cjs rollup -c ./rollup.config.js --format=cjs --environment FORMAT:cjs",
+    "build:esm": "BABEL_ENV=esm rollup -c ./rollup.config.js --format=esm --environment FORMAT:esm",
+    "build:umd": "rollup -c ./rollup.config.js --format=umd --environment FORMAT:umd",
     "vendor": "webpack --env vendor --config ./config/webpack.config.js",
     "release": "semantic-release"
   },

packages/mui-component-mapper/rollup.config.js

@@ -12,14 +12,16 @@ import sourcemaps from 'rollup-plugin-sourcemaps';
 import glob from 'glob';
 import path from 'path';
 
-const outputPaths = glob.sync(path.resolve(__dirname, './src/components/*.js'));
+const outputPaths = glob.sync(path.resolve(__dirname, './src/files/*.js'));
 
 const muiExternals = createFilter(
   [
     'react',
     'react-dom',
     'prop-types',
     '@data-driven-forms/react-form-renderer',
+    '@data-driven-forms/react-form-renderer/**',
+    '@material-ui/core',
     '@material-ui/core/**',
     '@material-ui/styles/**',
     '@material-ui/icons/**'
@@ -39,7 +41,7 @@ const globals = {
 const babelOptions = {
   exclude: /node_modules/,
   runtimeHelpers: true,
-  configFile: '../../babel.config.js'
+  configFile: './babel.config.js'
 };
 
 const commonjsOptions = {
@@ -84,31 +86,19 @@ const plugins = [
   sourcemaps()
 ];
 
-export default [
-  ...['cjs', 'esm'].map((env) => ({
-    input: ['./src/index.js', ...outputPaths],
-    output: {
-      dir: `./dist/${env}`,
-      format: env,
-      name: '@data-driven-forms/mui-component-mapper',
-      exports: 'named',
-      globals,
-      sourcemap: true
-    },
-    external: muiExternals,
-    plugins
-  })),
-  {
-    input: './src/index.js',
-    output: {
-      file: `./dist/umd/index.js`,
-      format: 'umd',
-      name: '@data-driven-forms/mui-component-mapper',
-      exports: 'named',
-      globals,
-      sourcemap: true
-    },
-    external: muiExternals,
-    plugins
-  }
-];
+export default {
+  input: process.env.FORMAT === 'umd' ? './src/index.js' : ['./src/index.js', ...outputPaths],
+  output: {
+    ...(process.env.FORMAT === 'umd'
+      ? {
+          file: `./dist/umd/index.js`
+        }
+      : { dir: `./dist/${process.env.FORMAT}` }),
+    name: '@data-driven-forms/mui-component-mapper',
+    exports: 'named',
+    globals,
+    sourcemap: true
+  },
+  external: muiExternals,
+  plugins
+};

packages/mui-component-mapper/src/common/form-field-grid.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Grid from '@material-ui/core/Grid';
+import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useFinalFormFieldStyles = makeStyles({

packages/mui-component-mapper/src/common/multiple-choice-list.js

@@ -1,13 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Grid from '@material-ui/core/Grid';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import { Grid, Checkbox, FormControlLabel, FormLabel, FormGroup, FormControl, FormHelperText } from '@material-ui/core';
 
 import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 import { validationError } from './helpers';

packages/mui-component-mapper/src/components/checkbox.js → packages/mui-component-mapper/src/files/checkbox.js

@@ -1,11 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MUICheckbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormLabel from '@material-ui/core/FormLabel';
+import { Checkbox as MUICheckbox, FormControl, FormControlLabel, FormHelperText, FormGroup, FormLabel } from '@material-ui/core';
 import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
 
 import FormFieldGrid from '../common/form-field-grid';

packages/mui-component-mapper/src/components/form-template.js → packages/mui-component-mapper/src/files/form-template.js

@@ -1,8 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import MUIButton from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import { Grid, Button as MUIButton, Typography } from '@material-ui/core';
 
 import FormTemplate from '@data-driven-forms/common/src/form-template';
 

packages/mui-component-mapper/src/components/plain-text.js → packages/mui-component-mapper/src/files/plain-text.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
+import { Typography } from '@material-ui/core';
 import PropTypes from 'prop-types';
 
 const PlainText = ({ label, name }) =>

packages/mui-component-mapper/src/components/radio.js → packages/mui-component-mapper/src/files/radio.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MUIRadio from '@material-ui/core/Radio';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import { Radio as MUIRadio, FormControlLabel, FormControl, FormLabel, FormHelperText } from '@material-ui/core';
 import { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 
 import FormFieldGrid from '../common/form-field-grid';