fix(infrastructure): condense webpack configuration build step into one json file (#571)

BREAKING CHANGE: Remove <package-name>.es.js files. The alternate is now to use the index.tsx files.

Author: Matt Goo

README.md

@@ -60,6 +60,8 @@ If you're using an older version (v1) of `create-react-app`, please refer to our
 
 #### Step 1: Install create-react-app
 
+> _NOTE:_ all npm commands can be replaced with yarn
+
 Install `create-react-app`:
 
 ```
@@ -68,7 +70,14 @@ cd my-app
 npm start
 ```
 
-> _NOTE:_ all npm commands can be replaced with yarn
+##### Use with Typescript
+
+It is recommended to use Typescript with our components. You will need to add a few more modules for this to work"
+
+```
+npm i @types/react @types/react-dom @types/classnames @types/node typescript
+npm start
+```
 
 #### Step 2: Install Components
 

packages/webpack.config.js

@@ -44,30 +44,34 @@ const getAbsolutePath = (url) => path.resolve(__dirname, url);
 const filename = '[name]';
 
 function getWebpackConfigs() {
-  const webpackConfigs = [];
+  const webpackEntries = {};
+  const cssWebpackEntries = {};
+  const cssWebpackEntriesMin = {};
+  const webpackConfig = getJavaScriptWebpackConfig();
+  const webpackConfigCss = getCssWebpackConfig();
+  const webpackConfigCssMin = getCssWebpackConfig(true);
 
   chunks.forEach((chunk) => {
     const tsxPath = getAbsolutePath(`${chunk}/index.tsx`);
     const cssPath = getAbsolutePath(`${chunk}/index.scss`);
-
-    webpackConfigs.push(getJavaScriptWebpackConfig(tsxPath, chunk, 'commonjs'));
-    webpackConfigs.push(getJavaScriptWebpackConfig(tsxPath, chunk, false));
-    webpackConfigs.push(getJavaScriptWebpackConfig(tsxPath, `${chunk}.min`, 'commonjs'));
-
-    webpackConfigs.push(getCssWebpackConfig(cssPath, chunk));
-    webpackConfigs.push(getCssWebpackConfig(cssPath, `${chunk}.min`));
+    webpackEntries[chunk] = tsxPath;
+    webpackEntries[`${chunk}.min`] = tsxPath;
+    cssWebpackEntries[chunk] = cssPath;
+    cssWebpackEntriesMin[`${chunk}.min`] = cssPath;
   });
 
-  return webpackConfigs;
+  webpackConfig.entry = webpackEntries;
+  webpackConfigCss.entry = cssWebpackEntries;
+  webpackConfigCssMin.entry = cssWebpackEntriesMin;
+
+  return [webpackConfig, webpackConfigCss, webpackConfigCssMin];
 }
 
-function getCommonWebpackParams(entryPath, chunk, {isCss, modules}) {
-  const entry = {[chunk]: entryPath};
+function getCommonWebpackParams({isCss} = {}) {
   return {
-    entry,
     output: {
       path: getAbsolutePath('../build'),
-      filename: `${filename}${isCss ? '.css' : ''}${modules === false ? '.es' : ''}.js`,
+      filename: `${filename}${isCss ? '.css' : ''}.js`,
       libraryTarget: 'umd',
     },
     resolve: {
@@ -97,21 +101,36 @@ function getMaterialExternals() {
   return externals;
 }
 
-function getJavaScriptWebpackConfig(entryPath, chunk, modules) {
+const materialExternals = getMaterialExternals();
+
+function getJavaScriptWebpackConfig() {
   return Object.assign(
-    getCommonWebpackParams(entryPath, chunk, {modules}), {
+    getCommonWebpackParams(), {
       externals: Object.assign(
         {
           'react': 'react',
           'classnames': 'classnames',
           'prop-types': 'prop-types',
+          '@material/textfield/constants': `@material/textfield/constants.js`,
         },
-        getMaterialExternals(),
+        materialExternals,
       ),
       module: {
         rules: [{
           test: /\.ts(x)?$/,
           loader: 'ts-loader',
+        }, {
+          test: /\.js$/,
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            compact: true,
+            presets: [['es2015', {modules: false}], 'react'],
+            plugins: [
+              'transform-class-properties',
+              'transform-object-rest-spread',
+            ],
+          },
         }],
       },
       plugins: [
@@ -122,10 +141,9 @@ function getJavaScriptWebpackConfig(entryPath, chunk, modules) {
     });
 }
 
-function getCssWebpackConfig(entryPath, chunk) {
-  const shouldMinify = chunk.includes('.min');
+function getCssWebpackConfig(shouldMinify) {
   return Object.assign(
-    getCommonWebpackParams(entryPath, chunk, {isCss: true}), {
+    getCommonWebpackParams({isCss: true}), {
       module: {
         rules: [{
           test: /\.scss$/,
@@ -155,5 +173,4 @@ function getCssWebpackConfig(entryPath, chunk) {
     });
 }
 
-
 module.exports = getWebpackConfigs();

scripts/release/cp-pkgs.js

@@ -80,6 +80,22 @@ function cpAsset(asset) {
     .then(() => console.log(`cp ${asset} -> ${destDir}`));
 }
 
+// this takes a file path to an index.d.ts file and adds an //@ts-ignore comment
+// above the MDC Web imports (any line that includes `/dist/`). We need to ignore
+// these lines since MDC Web does not have typing files
+// TODO: https://github.com/material-components/material-components-web-react/issues/574
+function addTsIgnore(filePath) {
+  const data = fs.readFileSync(filePath).toString().split('\n');
+  const lineNumber = data.findIndex((lineText) => lineText.includes('/dist/'));
+  if (lineNumber <= -1) return;
+
+  data.splice(lineNumber, 0, '// @ts-ignore');
+  const text = data.join('\n');
+  fs.writeFile(filePath, text, function(err) {
+    if (err) return console.log(err);
+  });
+}
+
 // takes assetPath, computes the destination file directory path
 // and copies file into destination directory
 function cpTypes(typeAsset) {
@@ -88,6 +104,7 @@ function cpTypes(typeAsset) {
   destDir = destDir.split('/');
   destDir.splice(2, 0, 'dist');
   destDir = `${destDir.join('/')}/${base}`;
+  addTsIgnore(typeAsset);
   return cpFile(typeAsset, destDir)
     .then(() => console.log(`cp ${typeAsset} -> ${destDir}`));
 }

tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "gts/tsconfig-google.json",
   "compilerOptions": {
     "outDir": "./types/",
-    "declaration": true,
     "sourceMap": true,
     "strictNullChecks": true,
     "module": "commonjs",
@@ -17,10 +16,5 @@
   "exclude": [
     "node_modules",
     "build"
-  ],
-  "baseUrl": ".",
-  "paths": {
-    "@material/react-ripple": ["packages/ripple/"],
-    "@material/react-material-icon": ["packages/material-icon/"],
-  }
+  ]
 }