From 512f3aabdcc631b73690f7dd8956a12f9e4a4cac Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Fri, 28 Dec 2018 09:14:58 -1000 Subject: [PATCH] fix(infrastructure): condense webpack configuration build step into one json file (#571) BREAKING CHANGE: Remove .es.js files. The alternate is now to use the index.tsx files. --- README.md | 11 +++++++- packages/webpack.config.js | 57 +++++++++++++++++++++++++------------- scripts/release/cp-pkgs.js | 17 ++++++++++++ tsconfig.json | 8 +----- 4 files changed, 65 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index aa2ac025a..beaa9e42d 100644 --- a/README.md +++ b/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 diff --git a/packages/webpack.config.js b/packages/webpack.config.js index f4db3f492..79fe2afc1 100644 --- a/packages/webpack.config.js +++ b/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(); diff --git a/scripts/release/cp-pkgs.js b/scripts/release/cp-pkgs.js index 820da1ec0..f54c1a7d8 100644 --- a/scripts/release/cp-pkgs.js +++ b/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}`)); } diff --git a/tsconfig.json b/tsconfig.json index b9cabed0e..a42e2b395 100644 --- a/tsconfig.json +++ b/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/"], - } + ] }