From 975903708e4b5883c5b7e2abb5890a4e4f29e050 Mon Sep 17 00:00:00 2001 From: emanuele Date: Wed, 26 Feb 2020 12:03:59 +0000 Subject: [PATCH 1/8] fix(webpack-cli): fixed support for SCSS entry points --- packages/webpack-cli/lib/utils/Compiler.js | 6 -- .../webpack-cli/lib/utils/CompilerOutput.js | 66 ++++++++++--------- test/entry/scss/.gitignore | 5 ++ test/entry/scss/home.js | 1 + test/entry/scss/home.scss | 3 + test/entry/scss/package.json | 9 +++ test/entry/scss/webpack.config.js | 29 ++++++++ 7 files changed, 81 insertions(+), 38 deletions(-) create mode 100644 test/entry/scss/.gitignore create mode 100644 test/entry/scss/home.js create mode 100644 test/entry/scss/home.scss create mode 100644 test/entry/scss/package.json create mode 100644 test/entry/scss/webpack.config.js diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js index 98081c6807f..2d22f29d9d4 100644 --- a/packages/webpack-cli/lib/utils/Compiler.js +++ b/packages/webpack-cli/lib/utils/Compiler.js @@ -81,12 +81,6 @@ class Compiler { this.output.generateRawOutput(stats); } else { const statsObj = stats.toJson(outputOptions); - if (statsObj.children && statsObj.children.length) { - statsObj.children.forEach(child => { - this.output.generateFancyOutput(child, statsErrors, processingMessageBuffer); - }); - return; - } this.output.generateFancyOutput(statsObj, statsErrors, processingMessageBuffer); } process.stdout.write('\n'); diff --git a/packages/webpack-cli/lib/utils/CompilerOutput.js b/packages/webpack-cli/lib/utils/CompilerOutput.js index 916e42d0bf1..d3683480611 100644 --- a/packages/webpack-cli/lib/utils/CompilerOutput.js +++ b/packages/webpack-cli/lib/utils/CompilerOutput.js @@ -32,38 +32,40 @@ class CompilerOutput { const asset = assets.find(asset => { return asset.name === assetName; }); - const entrypointChunks = entrypoint.chunks.map(id => { - return chunks.find(chunk => chunk.id === id); - }); - - const chunksOutput = this._createChunksOutput(entrypointChunks); - const kbSize = `${(asset.size / 1000).toFixed(2)} kb`; - const hasBeenCompiled = asset.comparedForEmit; - const bundleTbl = new Table({ - chars: { - top: '', - 'top-mid': '', - 'top-left': '', - 'top-right': '', - bottom: '', - 'bottom-mid': '', - 'bottom-left': '', - 'bottom-right': '', - left: '', - 'left-mid': '', - mid: '', - 'mid-mid': '', - right: '', - 'right-mid': '', - }, - style: { compact: true }, - }); - bundleTbl.push({ 'Bundle Name': asset.name }); - bundleTbl.push({ 'Compared For Emit': hasBeenCompiled }); - bundleTbl.push({ 'Bundle size': kbSize }); - const bundleOutput = bundleTbl.toString() + `\n\nModules:\n${chunksOutput}`; - assetsTble.push([entrypoint.name, bundleOutput]); - compilationTableEmpty = false; + if (asset) { + const entrypointChunks = entrypoint.chunks.map(id => { + return chunks.find(chunk => chunk.id === id); + }); + + const chunksOutput = this._createChunksOutput(entrypointChunks); + const kbSize = `${(asset.size / 1000).toFixed(2)} kb`; + const hasBeenCompiled = asset.comparedForEmit; + const bundleTbl = new Table({ + chars: { + top: '', + 'top-mid': '', + 'top-left': '', + 'top-right': '', + bottom: '', + 'bottom-mid': '', + 'bottom-left': '', + 'bottom-right': '', + left: '', + 'left-mid': '', + mid: '', + 'mid-mid': '', + right: '', + 'right-mid': '', + }, + style: { compact: true }, + }); + bundleTbl.push({ 'Bundle Name': asset.name }); + bundleTbl.push({ 'Compared For Emit': hasBeenCompiled }); + bundleTbl.push({ 'Bundle size': kbSize }); + const bundleOutput = bundleTbl.toString() + `\n\nModules:\n${chunksOutput}`; + assetsTble.push([entrypoint.name, bundleOutput]); + compilationTableEmpty = false; + } }); }); diff --git a/test/entry/scss/.gitignore b/test/entry/scss/.gitignore new file mode 100644 index 00000000000..8f4fcdeff50 --- /dev/null +++ b/test/entry/scss/.gitignore @@ -0,0 +1,5 @@ +yarn.lock +package-lock.json +node_modules/ +*.js +*.js.map diff --git a/test/entry/scss/home.js b/test/entry/scss/home.js new file mode 100644 index 00000000000..2c794ff0941 --- /dev/null +++ b/test/entry/scss/home.js @@ -0,0 +1 @@ +console.log('home'); diff --git a/test/entry/scss/home.scss b/test/entry/scss/home.scss new file mode 100644 index 00000000000..9a0075d1465 --- /dev/null +++ b/test/entry/scss/home.scss @@ -0,0 +1,3 @@ +body { + font-size: 100%; +} diff --git a/test/entry/scss/package.json b/test/entry/scss/package.json new file mode 100644 index 00000000000..2ddfa5b1c12 --- /dev/null +++ b/test/entry/scss/package.json @@ -0,0 +1,9 @@ +{ + "dependencies": { + "css-loader": "^3.4.2", + "style-loader": "^1.1.3", + "sass-loader": "^8.0.2", + "mini-css-extract-plugin": "^0.9.0", + "node-sass": "^4.13.1" + } +} diff --git a/test/entry/scss/webpack.config.js b/test/entry/scss/webpack.config.js new file mode 100644 index 00000000000..f54bd6b5851 --- /dev/null +++ b/test/entry/scss/webpack.config.js @@ -0,0 +1,29 @@ +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + mode: 'production', + entry: { + home: ['./home.js', './home.scss'], + }, + output: { + filename: '[name].js', + }, + module: { + rules: [ + { + test: /\.scss$/, + use: [ + // fallback to style-loader in development + MiniCssExtractPlugin.loader, + 'css-loader', + 'sass-loader', + ], + }, + ], + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css', + }), + ], +}; From a4e07625e45854a52c682f05d37b825e2228fd7f Mon Sep 17 00:00:00 2001 From: emanuele Date: Wed, 26 Feb 2020 12:15:50 +0000 Subject: [PATCH 2/8] fix(webpack-cli): use children only when configuration is an array --- packages/webpack-cli/lib/utils/Compiler.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js index 2d22f29d9d4..d35a9f3157a 100644 --- a/packages/webpack-cli/lib/utils/Compiler.js +++ b/packages/webpack-cli/lib/utils/Compiler.js @@ -6,6 +6,7 @@ const { CompilerOutput } = require('./CompilerOutput'); class Compiler { constructor() { this.output = new CompilerOutput(); + this.compilerOptions = {}; } setUpHookForCompilation(compilation, outputOptions, options) { const { ProgressPlugin } = webpack; @@ -81,6 +82,12 @@ class Compiler { this.output.generateRawOutput(stats); } else { const statsObj = stats.toJson(outputOptions); + if (statsObj.children && Array.isArray(statsObj.children) && this.compilerOptions && Array.isArray(this.compilerOptions)) { + statsObj.children.forEach(child => { + this.output.generateFancyOutput(child, statsErrors, processingMessageBuffer); + }); + return; + } this.output.generateFancyOutput(statsObj, statsErrors, processingMessageBuffer); } process.stdout.write('\n'); @@ -140,6 +147,7 @@ class Compiler { async createCompiler(options) { try { this.compiler = await webpack(options); + this.compilerOptions = options; } catch (err) { process.stdout.write('\n'); logger.error(`${err.name}: ${err.message}`); From b112e1ac5a6847278770887da6816052701629c4 Mon Sep 17 00:00:00 2001 From: emanuele Date: Wed, 26 Feb 2020 12:41:52 +0000 Subject: [PATCH 3/8] fix(webpack-cli): added tests correctly --- test/entry/scss/.gitignore | 2 -- test/entry/scss/scss.test.js | 13 +++++++++++++ test/entry/scss/webpack.config.js | 1 + test/typescript/.gitignore | 2 -- test/typescript/typescript.test.js | 5 +++-- 5 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 test/entry/scss/scss.test.js diff --git a/test/entry/scss/.gitignore b/test/entry/scss/.gitignore index 8f4fcdeff50..9716e5f1673 100644 --- a/test/entry/scss/.gitignore +++ b/test/entry/scss/.gitignore @@ -1,5 +1,3 @@ yarn.lock package-lock.json node_modules/ -*.js -*.js.map diff --git a/test/entry/scss/scss.test.js b/test/entry/scss/scss.test.js new file mode 100644 index 00000000000..9e924b6f058 --- /dev/null +++ b/test/entry/scss/scss.test.js @@ -0,0 +1,13 @@ +/* eslint-disable node/no-missing-require */ +/* eslint-disable node/no-unpublished-require */ +const { run, runInstall } = require('../../utils/test-utils'); + +describe('entry point', () => { + it('should support SCSS files', async () => { + await runInstall(); + const { stdout } = run(__dirname); + expect(stdout).toBeTruthy(); + expect(stdout).toContain('home.css'); + expect(stdout).toContain('home.js'); + }, 30000); +}); diff --git a/test/entry/scss/webpack.config.js b/test/entry/scss/webpack.config.js index f54bd6b5851..64514583482 100644 --- a/test/entry/scss/webpack.config.js +++ b/test/entry/scss/webpack.config.js @@ -1,3 +1,4 @@ +/* eslint-disable node/no-missing-require */ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { diff --git a/test/typescript/.gitignore b/test/typescript/.gitignore index 8f4fcdeff50..9716e5f1673 100644 --- a/test/typescript/.gitignore +++ b/test/typescript/.gitignore @@ -1,5 +1,3 @@ yarn.lock package-lock.json node_modules/ -*.js -*.js.map diff --git a/test/typescript/typescript.test.js b/test/typescript/typescript.test.js index 0d328a3e418..1bc936f952c 100644 --- a/test/typescript/typescript.test.js +++ b/test/typescript/typescript.test.js @@ -1,4 +1,5 @@ -// eslint-disable-next-line node/no-unpublished-require +/* eslint-disable node/no-missing-require */ +/* eslint-disable node/no-unpublished-require */ const { run, runInstall } = require('../utils/test-utils'); const { stat } = require('fs'); const { resolve } = require('path'); @@ -13,5 +14,5 @@ describe('webpack cli', () => { expect(err).toBe(null); expect(stats.isFile()).toBe(true); }); - }); + }, 30000); }); From f4ce2489dcfae370b82801398ab0fb09021ea6f1 Mon Sep 17 00:00:00 2001 From: emanuele Date: Wed, 26 Feb 2020 12:50:26 +0000 Subject: [PATCH 4/8] fix(webpack-cli): increased time out for installing deps --- test/entry/scss/scss.test.js | 18 +++++++++++------- test/typescript/typescript.test.js | 24 ++++++++++++++---------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/test/entry/scss/scss.test.js b/test/entry/scss/scss.test.js index 9e924b6f058..bbe4180eab6 100644 --- a/test/entry/scss/scss.test.js +++ b/test/entry/scss/scss.test.js @@ -3,11 +3,15 @@ const { run, runInstall } = require('../../utils/test-utils'); describe('entry point', () => { - it('should support SCSS files', async () => { - await runInstall(); - const { stdout } = run(__dirname); - expect(stdout).toBeTruthy(); - expect(stdout).toContain('home.css'); - expect(stdout).toContain('home.js'); - }, 30000); + it( + 'should support SCSS files', + async () => { + await runInstall(); + const { stdout } = run(__dirname); + expect(stdout).toBeTruthy(); + expect(stdout).toContain('home.css'); + expect(stdout).toContain('home.js'); + }, + 1000 * 60 * 5, + ); }); diff --git a/test/typescript/typescript.test.js b/test/typescript/typescript.test.js index 1bc936f952c..f59dd1e6945 100644 --- a/test/typescript/typescript.test.js +++ b/test/typescript/typescript.test.js @@ -5,14 +5,18 @@ const { stat } = require('fs'); const { resolve } = require('path'); describe('webpack cli', () => { - it('should support typescript file', async () => { - await runInstall(__dirname); - const { stderr, stdout } = run(__dirname, ['-c', './webpack.config.ts']); - expect(stderr).toBeFalsy(); - expect(stdout).toBeTruthy(); - stat(resolve(__dirname, 'bin/foo.bundle.js'), (err, stats) => { - expect(err).toBe(null); - expect(stats.isFile()).toBe(true); - }); - }, 30000); + it( + 'should support typescript file', + async () => { + await runInstall(__dirname); + const { stderr, stdout } = run(__dirname, ['-c', './webpack.config.ts']); + expect(stderr).toBeFalsy(); + expect(stdout).toBeTruthy(); + stat(resolve(__dirname, 'bin/foo.bundle.js'), (err, stats) => { + expect(err).toBe(null); + expect(stats.isFile()).toBe(true); + }); + }, + 1000 * 60 * 5, + ); }); From 34d5f5373813acb33192e89a21c3211c4502f814 Mon Sep 17 00:00:00 2001 From: emanuele Date: Wed, 26 Feb 2020 13:00:04 +0000 Subject: [PATCH 5/8] tests(webpack-cli): enforced time out --- yarn.lock | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 17cef28e9f5..dc5ebe192b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7984,7 +7984,20 @@ jest-validate@^25.1.0: leven "^3.1.0" pretty-format "^25.1.0" -jest-watcher@^24.9.0: +jest-watch-typeahead@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.2.tgz#e5be959698a7fa2302229a5082c488c3c8780a4a" + integrity sha512-f7VpLebTdaXs81rg/oj4Vg/ObZy2QtGzAmGLNsqUS5G5KtSN68tFcIsbvNODfNyQxU78g7D8x77o3bgfBTR+2Q== + dependencies: + ansi-escapes "^4.2.1" + chalk "^2.4.1" + jest-regex-util "^24.9.0" + jest-watcher "^24.3.0" + slash "^3.0.0" + string-length "^3.1.0" + strip-ansi "^5.0.0" + +jest-watcher@^24.3.0, jest-watcher@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b" integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw== From 56935659d5cdefe178adf05aea7364b777ee341a Mon Sep 17 00:00:00 2001 From: emanuele Date: Wed, 26 Feb 2020 13:27:31 +0000 Subject: [PATCH 6/8] tests(webpack-cli): fix correct cwd when installing deps --- jest.config.js | 1 + package.json | 1 + test/entry/scss/scss.test.js | 9 ++++++--- test/typescript/typescript.test.js | 2 ++ 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/jest.config.js b/jest.config.js index 283c86e44d3..78fe2d79b92 100644 --- a/jest.config.js +++ b/jest.config.js @@ -9,4 +9,5 @@ module.exports = { }, testRegex: ['/__tests__/.*\\.(test.js|test.ts)$', '/test/.*\\.(test.js|test.ts)$'], moduleFileExtensions: ['ts', 'js', 'json'], + watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'], }; diff --git a/package.json b/package.json index 4ccb420b7d6..f41af90a8e4 100644 --- a/package.json +++ b/package.json @@ -150,6 +150,7 @@ "jest": "^25.1.0", "jest-junit": "^10.0.0", "jest-serializer-ansi": "^1.0.3", + "jest-watch-typeahead": "^0.4.2", "lerna": "^3.20.2", "lint-staged": "^9.4.2", "nyc": "^14.1.1", diff --git a/test/entry/scss/scss.test.js b/test/entry/scss/scss.test.js index bbe4180eab6..3d1de1a7f09 100644 --- a/test/entry/scss/scss.test.js +++ b/test/entry/scss/scss.test.js @@ -2,14 +2,17 @@ /* eslint-disable node/no-unpublished-require */ const { run, runInstall } = require('../../utils/test-utils'); +jest.setTimeout(1000 * 60 * 5); + describe('entry point', () => { it( 'should support SCSS files', async () => { - await runInstall(); - const { stdout } = run(__dirname); + await runInstall(__dirname); + const { stdout, stderr } = run(__dirname); + console.log(stderr); expect(stdout).toBeTruthy(); - expect(stdout).toContain('home.css'); + expect(stdout).toContain('home.scss'); expect(stdout).toContain('home.js'); }, 1000 * 60 * 5, diff --git a/test/typescript/typescript.test.js b/test/typescript/typescript.test.js index f59dd1e6945..5c097d25b3e 100644 --- a/test/typescript/typescript.test.js +++ b/test/typescript/typescript.test.js @@ -4,6 +4,8 @@ const { run, runInstall } = require('../utils/test-utils'); const { stat } = require('fs'); const { resolve } = require('path'); +jest.setTimeout(1000 * 60 * 5); + describe('webpack cli', () => { it( 'should support typescript file', From 60bcd0aa63fe0d29fe9f98339a669b98dd388d4f Mon Sep 17 00:00:00 2001 From: emanuele Date: Wed, 26 Feb 2020 13:27:58 +0000 Subject: [PATCH 7/8] tests(webpack-cli): fix correct cwd when installing deps --- test/entry/scss/scss.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/entry/scss/scss.test.js b/test/entry/scss/scss.test.js index 3d1de1a7f09..a5f36ee7de4 100644 --- a/test/entry/scss/scss.test.js +++ b/test/entry/scss/scss.test.js @@ -9,8 +9,7 @@ describe('entry point', () => { 'should support SCSS files', async () => { await runInstall(__dirname); - const { stdout, stderr } = run(__dirname); - console.log(stderr); + const { stdout } = run(__dirname); expect(stdout).toBeTruthy(); expect(stdout).toContain('home.scss'); expect(stdout).toContain('home.js'); From 7ddac8e91d256afd55d2db11dbbdf6e5e2bc9c2c Mon Sep 17 00:00:00 2001 From: emanuele Date: Fri, 28 Feb 2020 10:49:12 +0000 Subject: [PATCH 8/8] tests(webpack-cli): install all packages before launching the tests --- package.json | 3 +- scripts/prepareSuite.js | 53 ++++++++++++++++++++++++++++++++++++ test/entry/scss/home.scss | 3 ++ test/entry/scss/scss.test.js | 18 +++++------- 4 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 scripts/prepareSuite.js diff --git a/package.json b/package.json index f41af90a8e4..e7cfbfd065f 100644 --- a/package.json +++ b/package.json @@ -25,13 +25,14 @@ "scripts": { "bootstrap": "lerna bootstrap", "build": "node scripts/buildPackages.js", + "prepsuite": "node scripts/prepareSuite.js", "clean:all": "rimraf node_modules packages/*/{node_modules}", "commit": "git-cz", "docs": "typedoc", "format": "eslint --fix . --ext .js,.ts", "lint": "eslint . --ext .js,.ts", "lint:fix": "eslint . --ext .js,.ts --fix", - "pretest": "yarn build && yarn lint", + "pretest": "yarn build && yarn lint && yarn prepsuite", "reportCoverage": "nyc report --reporter=json && codecov -f coverage/coverage-final.json --disable=gcov", "smoketest": "smoketests/smoketests.sh", "test": "nyc jest --maxWorkers=4 --reporters=default --reporters=jest-junit", diff --git a/scripts/prepareSuite.js b/scripts/prepareSuite.js new file mode 100644 index 00000000000..c2846a0221a --- /dev/null +++ b/scripts/prepareSuite.js @@ -0,0 +1,53 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +// eslint-disable-next-line node/no-unpublished-require +const execa = require('execa'); +// eslint-disable-next-line node/no-unpublished-require +const chalk = require('chalk'); + +const BASE_DIR = 'test/'; +const PACKAGE = 'package.json'; + +function collectTestingFoldersWithPackage() { + const testFolder = path.resolve(path.join(process.cwd(), BASE_DIR)); + + return extractFolder(testFolder); +} + +function extractFolder(folderToRead, folders = []) { + const files = fs.readdirSync(folderToRead); + + files.forEach(file => { + const filePath = path.resolve(path.join(folderToRead, file)); + const stats = fs.statSync(filePath); + if (stats.isFile() && file === PACKAGE) { + folders.push(folderToRead); + } + if (stats.isDirectory() && file !== 'node_modules') { + extractFolder(filePath, folders); + } + }); + + return folders; +} + +{ + Promise.all( + collectTestingFoldersWithPackage().map(async folder => { + return execa('yarn', { + cwd: folder, + stdio: 'inherit', + }); + }), + ) + .then(() => { + console.log(chalk.inverse.green(' Successfully prepared the test suite ')); + }) + .catch(e => { + console.error(chalk.inverse.red(' Unable to prepare the test suite ')); + console.error(e.stack); + process.exitCode = 1; + }); +} diff --git a/test/entry/scss/home.scss b/test/entry/scss/home.scss index 9a0075d1465..55923ddda12 100644 --- a/test/entry/scss/home.scss +++ b/test/entry/scss/home.scss @@ -1,3 +1,6 @@ body { font-size: 100%; + body { + background-color: red; + } } diff --git a/test/entry/scss/scss.test.js b/test/entry/scss/scss.test.js index a5f36ee7de4..ee44f4cbb77 100644 --- a/test/entry/scss/scss.test.js +++ b/test/entry/scss/scss.test.js @@ -5,15 +5,11 @@ const { run, runInstall } = require('../../utils/test-utils'); jest.setTimeout(1000 * 60 * 5); describe('entry point', () => { - it( - 'should support SCSS files', - async () => { - await runInstall(__dirname); - const { stdout } = run(__dirname); - expect(stdout).toBeTruthy(); - expect(stdout).toContain('home.scss'); - expect(stdout).toContain('home.js'); - }, - 1000 * 60 * 5, - ); + it('should support SCSS files', async () => { + await runInstall(__dirname); + const { stdout } = run(__dirname); + expect(stdout).toBeTruthy(); + expect(stdout).toContain('home.scss'); + expect(stdout).toContain('home.js'); + }); });