Merge pull request #632 from rvsia/antTreeshaking

fix(ant): treeshake ANT mapper

Author: Hyperkid123

packages/ant-component-mapper/demo/index.js

@@ -20,7 +20,7 @@ const App = () => (
       componentMapper={componentMapper}
       FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
       onSubmit={console.log}
-      schema={wizardSchema}
+      schema={demoSchema}
     />
   </div>
 );

packages/ant-component-mapper/package.json

@@ -7,13 +7,18 @@
   "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"
   },
+  "files": [
+    "dist/"
+  ],
   "repository": "[email protected]:data-driven-forms/react-forms.git",
   "devDependencies": {
-    "@ant-design/icons": "^4.0.2",
     "@babel/core": "^7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.2.3",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",

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

@@ -12,7 +12,7 @@ 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 antExternals = createFilter(
   [
@@ -32,7 +32,8 @@ const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
   '@data-driven-forms/react-form-renderer': '@data-driven-forms/react-form-renderer',
-  'antd': 'antd'
+  'antd': 'antd',
+  'prop-types': 'prop-types'
 };
 
 const babelOptions = {
@@ -83,31 +84,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/ant-component-mapper',
-      exports: 'named',
-      globals,
-      sourcemap: true
-    },
-    external: antExternals,
-    plugins
-  })),
-  {
-    input: './src/index.js',
-    output: {
-      file: `./dist/umd/index.js`,
-      format: 'umd',
-      name: '@data-driven-forms/ant-component-mapper',
-      exports: 'named',
-      globals,
-      sourcemap: true
-    },
-    external: antExternals,
-    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/ant-component-mapper',
+    exports: 'named',
+    globals,
+    sourcemap: true
+  },
+  external: antExternals,
+  plugins
+};

packages/ant-component-mapper/src/files/component-mapper.js

@@ -39,7 +39,9 @@ const componentMapper = {
   [componentTypes.PLAIN_TEXT]: PlainText,
   [componentTypes.SWITCH]: Switch,
   [componentTypes.WIZARD]: Wizard,
-  [componentTypes.SLIDER]: <div>Not Implemented</div>
+  [componentTypes.SLIDER]: () => <div>Not Implemented</div>,
+  [componentTypes.DUAL_LIST_SELECT]: () => <div>Not Implemented</div>,
+  [componentTypes.FIELD_ARRAY]: () => <div>Not Implemented</div>
 };
 
 export default componentMapper;

packages/common/babel.config.js

@@ -67,7 +67,7 @@ const createMuiTransform = (env) => [
       transform: (importName) => (env ? `@material-ui/lab/${env}/${importName}` : `@material-ui/lab/${importName}`),
       preventFullImport: false,
       skipDefaultConversion: false
-    },            
+    },
     '@material-ui/core': {
       transform: (importName) => env ? `@material-ui/core/${env}/${importName}` : `@material-ui/core/${importName}`,
       preventFullImport: false,
@@ -98,7 +98,7 @@ const createPfReactTransform = (env) => [
       },
       preventFullImport: false,
       skipDefaultConversion: true
-    },            
+    },
     '@patternfly/react-icons': {
       transform: (importName) =>
         `@patternfly/react-icons/dist/${env}/icons/${importName
@@ -142,6 +142,32 @@ const createBluePrintTransform = (env) => [
   `BLUEPRINT-${env}`
 ]
 
+const createAntTransform = (env) => [
+  'transform-imports',
+  {
+    'antd': {
+      transform: (importName) => {
+        let res;
+        const files = glob.sync(
+          path.resolve(__dirname, `../../node_modules/antd/${env === 'cjs' ? 'lib' : 'es' }/${importName.split(/(?=[A-Z])/)
+            .join('-')
+            .toLowerCase()}/index.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;
+      },
+    },
+  },
+  `ant-${env}`
+]
+
 module.exports = {
   extends: '../../babel.config.js',
   env: {
@@ -150,15 +176,17 @@ module.exports = {
         createSuirCJSTransform('commonjs'),
         createMuiTransform(),
         createPfReactTransform('js'),
-        createBluePrintTransform('cjs')
+        createBluePrintTransform('cjs'),
+        createAntTransform('cjs')
       ]
     },
     esm: {
       plugins: [
         createSuirCJSTransform('es'),
         createMuiTransform('esm'),
         createPfReactTransform('esm'),
-        createBluePrintTransform('esm')
+        createBluePrintTransform('esm'),
+        createAntTransform('esm')
       ]
     }
   }

yarn.lock

@@ -61,7 +61,7 @@
   resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
   integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
 
-"@ant-design/icons@^4.0.2", "@ant-design/icons@^4.2.1":
+"@ant-design/icons@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.2.1.tgz#6f3ea5d98ab782072e4e9cbb70f25e4403ae1a6b"
   integrity sha512-245ZI40MOr5GGws+sNSiJIRRoEf/J2xvPSMgwRYf3bv8mVGQZ6XTQI/OMeV16KtiSZ3D+mBKXVYSBz2fhigOXQ==