From 540409e197c76339b9708c894cb22918d1897154 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Thu, 4 Nov 2021 18:41:53 +0300 Subject: [PATCH 1/5] fix: infinity refresh on warnings --- client-src/index.js | 2 - package-lock.json | 91 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + 3 files changed, 93 insertions(+), 2 deletions(-) diff --git a/client-src/index.js b/client-src/index.js index 6ee246baef..414610b57a 100644 --- a/client-src/index.js +++ b/client-src/index.js @@ -183,8 +183,6 @@ const onSocketMessage = { if (needShowOverlayForWarnings) { show("warning", warnings); } - - reloadApp(options, status); }, errors(errors) { log.error("Errors while compiling. Reload prevented."); diff --git a/package-lock.json b/package-lock.json index 3896df9ca5..b33fb05498 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,8 @@ "body-parser": "^1.19.0", "core-js": "^3.12.1", "css-loader": "^5.2.4", + "css-tree": "^1.1.3", + "csstree": "^0.0.3", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-config-webpack": "^1.2.5", @@ -5282,6 +5284,28 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/css-tree/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/css-what": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", @@ -5330,6 +5354,19 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "dev": true }, + "node_modules/csstree": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/csstree/-/csstree-0.0.3.tgz", + "integrity": "sha1-l7aAwMz9TQ/8+AwGEnlpS6nDyMs=", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "string-iterator": "0.0.1" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/dargs": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz", @@ -11212,6 +11249,12 @@ "node": ">= 12" } }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "dev": true + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -13893,6 +13936,15 @@ "node": ">=0.6.19" } }, + "node_modules/string-iterator": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/string-iterator/-/string-iterator-0.0.1.tgz", + "integrity": "sha1-FIG9jYC1oYiGp5BQgCF54anzoYQ=", + "dev": true, + "engines": { + "node": ">=0.8" + } + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -19391,6 +19443,24 @@ "nth-check": "^2.0.0" } }, + "css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dev": true, + "requires": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "css-what": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", @@ -19426,6 +19496,15 @@ } } }, + "csstree": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/csstree/-/csstree-0.0.3.tgz", + "integrity": "sha1-l7aAwMz9TQ/8+AwGEnlpS6nDyMs=", + "dev": true, + "requires": { + "string-iterator": "0.0.1" + } + }, "dargs": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz", @@ -23808,6 +23887,12 @@ "integrity": "sha512-0gVrAjo5m0VZSJb4rpL59K1unJAMb/hm8HRXqasD8VeC8m91ytDPMritgFSlKonfdt+rRYYpP/JfLxgIX8yoSw==", "dev": true }, + "mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "dev": true + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -25847,6 +25932,12 @@ "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", "dev": true }, + "string-iterator": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/string-iterator/-/string-iterator-0.0.1.tgz", + "integrity": "sha1-FIG9jYC1oYiGp5BQgCF54anzoYQ=", + "dev": true + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/package.json b/package.json index 5c345df35f..3828e3128a 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,8 @@ "body-parser": "^1.19.0", "core-js": "^3.12.1", "css-loader": "^5.2.4", + "css-tree": "^1.1.3", + "csstree": "^0.0.3", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-config-webpack": "^1.2.5", From 356b6818e815fcd543a1a7d0a63be69a51aaf275 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Thu, 4 Nov 2021 18:57:23 +0300 Subject: [PATCH 2/5] test: fix --- test/client/index.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/client/index.test.js b/test/client/index.test.js index 6d98a0937b..ee3c64a947 100644 --- a/test/client/index.test.js +++ b/test/client/index.test.js @@ -206,7 +206,6 @@ describe("index", () => { onSocketMessage.warnings([]); expect(overlay.show).toBeCalled(); - expect(reloadApp).toBeCalled(); }); test("should run onSocketMessage.error", () => { From d39dd966192a40e10512d10211b1590c54cc4353 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Thu, 4 Nov 2021 19:24:39 +0300 Subject: [PATCH 3/5] test: added --- .../overlay.test.js.snap.webpack4 | 162 ++++++++++++++++-- .../overlay.test.js.snap.webpack5 | 126 ++++++++++++++ test/e2e/overlay.test.js | 122 ++++++++++++- 3 files changed, 392 insertions(+), 18 deletions(-) diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 index 3c1eaab350..7e56e63d3f 100644 --- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 @@ -63,11 +63,12 @@ exports[`overlay should not show initially, then show on an error and allow to c X

- ERROR

+ ERROR in ./foo.js 1:1

- ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may - need an appropriate loader to handle this file type, currently no - loaders are configured to process this file. See + Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See https://webpack.js.org/concepts#loaders > \`;


@@ -145,11 +146,12 @@ exports[`overlay should not show initially, then show on an error, then hide on X

- ERROR

+ ERROR in ./foo.js 1:1

- ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may - need an appropriate loader to handle this file type, currently no - loaders are configured to process this file. See + Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See https://webpack.js.org/concepts#loaders > \`;


@@ -227,11 +229,12 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- ERROR

+ ERROR in ./foo.js 1:1

- ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may - need an appropriate loader to handle this file type, currently no - loaders are configured to process this file. See + Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See https://webpack.js.org/concepts#loaders > \`;


@@ -276,11 +279,12 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- ERROR

+ ERROR in ./foo.js 1:1

- ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may - need an appropriate loader to handle this file type, currently no - loaders are configured to process this file. See + Module parse failed: Unterminated template (1:1) You may need an + appropriate loader to handle this file type, currently no loaders are + configured to process this file. See https://webpack.js.org/concepts#loaders > \`;a


@@ -342,6 +346,69 @@ exports[`overlay should not show initially, then show on an error, then show oth " `; +exports[`overlay should show a warning after invalidation: overlay html 1`] = ` +" +
+ Compiled with problems:

+
+ WARNING

+
Warning from compilation
+

+
+
+ +" +`; + +exports[`overlay should show a warning after invalidation: page html 1`] = ` +" + + + +" +`; + exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = ` "
+
+ Compiled with problems:

+
+ ERROR

+
Error from compilation
+

+
+
+ +" +`; + +exports[`overlay should show an error after invalidation: page html 1`] = ` +" + + + +" +`; + exports[`overlay should show an error for initial compilation: overlay html 1`] = ` "
+
+ Compiled with problems:

+
+ WARNING

+
Warning from compilation
+

+
+
+ +" +`; + +exports[`overlay should show a warning after invalidation: page html 1`] = ` +" + + + +" +`; + exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = ` "
+
+ Compiled with problems:

+
+ ERROR

+
Error from compilation
+

+
+
+ +" +`; + +exports[`overlay should show an error after invalidation: page html 1`] = ` +" + + + +" +`; + exports[`overlay should show an error for initial compilation: overlay html 1`] = ` "
{ + if ( + typeof this.skipCounter !== "undefined" && + this.counter !== this.skipCounter + ) { + this.counter += 1; + + return; + } + compilation.errors.push(new Error(this.message)); } ); @@ -27,8 +38,10 @@ class ErrorPlugin { } class WarningPlugin { - constructor(message) { + constructor(message, skipCounter) { this.message = message || "Warning from compilation"; + this.skipCounter = skipCounter; + this.counter = 0; } // eslint-disable-next-line class-methods-use-this @@ -36,6 +49,15 @@ class WarningPlugin { compiler.hooks.thisCompilation.tap( "warnings-webpack-plugin", (compilation) => { + if ( + typeof this.skipCounter !== "undefined" && + this.counter !== this.skipCounter + ) { + this.counter += 1; + + return; + } + compilation.warnings.push(new Error(this.message)); } ); @@ -892,4 +914,100 @@ describe("overlay", () => { await browser.close(); }); + + it("should show an error after invalidation", async () => { + const compiler = webpack(config); + + new ErrorPlugin("Error from compilation", 1).apply(compiler); + + const devServerOptions = { + port, + }; + const server = new Server(devServerOptions, compiler); + + await server.start(); + + const { page, browser } = await runBrowser(); + + await page.goto(`http://localhost:${port}/main`, { + waitUntil: "networkidle0", + }); + + await new Promise((resolve) => { + server.middleware.invalidate(() => { + resolve(); + }); + }); + + await new Promise((resolve) => { + server.middleware.waitUntilValid(() => { + resolve(); + }); + }); + + const pageHtml = await page.evaluate(() => document.body.outerHTML); + const overlayHandle = await page.$("#webpack-dev-server-client-overlay"); + const overlayFrame = await overlayHandle.contentFrame(); + const overlayHtml = await overlayFrame.evaluate( + () => document.body.outerHTML + ); + + expect(prettier.format(pageHtml, { parser: "html" })).toMatchSnapshot( + "page html" + ); + expect(prettier.format(overlayHtml, { parser: "html" })).toMatchSnapshot( + "overlay html" + ); + + await browser.close(); + await server.stop(); + }); + + it("should show a warning after invalidation", async () => { + const compiler = webpack(config); + + new WarningPlugin("Warning from compilation", 1).apply(compiler); + + const devServerOptions = { + port, + }; + const server = new Server(devServerOptions, compiler); + + await server.start(); + + const { page, browser } = await runBrowser(); + + await page.goto(`http://localhost:${port}/main`, { + waitUntil: "networkidle0", + }); + + await new Promise((resolve) => { + server.middleware.invalidate(() => { + resolve(); + }); + }); + + await new Promise((resolve) => { + server.middleware.waitUntilValid(() => { + resolve(); + }); + }); + + const pageHtml = await page.evaluate(() => document.body.outerHTML); + const overlayHandle = await page.$("#webpack-dev-server-client-overlay"); + const overlayFrame = await overlayHandle.contentFrame(); + const overlayHtml = await overlayFrame.evaluate( + () => document.body.outerHTML + ); + + expect(prettier.format(pageHtml, { parser: "html" })).toMatchSnapshot( + "page html" + ); + expect(prettier.format(overlayHtml, { parser: "html" })).toMatchSnapshot( + "overlay html" + ); + + await browser.close(); + await server.stop(); + }); }); From c23a69ca327d51f3ae6d05bf5189b3a5ef13bcb6 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Thu, 4 Nov 2021 19:57:03 +0300 Subject: [PATCH 4/5] test: update --- .../overlay.test.js.snap.webpack4 | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 index 7e56e63d3f..e73698b92d 100644 --- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 @@ -63,12 +63,11 @@ exports[`overlay should not show initially, then show on an error and allow to c X

- ERROR in ./foo.js 1:1

+ ERROR

- Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See + ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > \`;


@@ -146,12 +145,11 @@ exports[`overlay should not show initially, then show on an error, then hide on X

- ERROR in ./foo.js 1:1

+ ERROR

- Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See + ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > \`;


@@ -229,12 +227,11 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- ERROR in ./foo.js 1:1

+ ERROR

- Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See + ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > \`;


@@ -279,12 +276,11 @@ exports[`overlay should not show initially, then show on an error, then show oth X

- ERROR in ./foo.js 1:1

+ ERROR

- Module parse failed: Unterminated template (1:1) You may need an - appropriate loader to handle this file type, currently no loaders are - configured to process this file. See + ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may + need an appropriate loader to handle this file type, currently no + loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > \`;a


From bf4cc45313249f32ee63be65d967114377880fe5 Mon Sep 17 00:00:00 2001 From: evilebottnawi Date: Thu, 4 Nov 2021 21:00:26 +0300 Subject: [PATCH 5/5] test: update --- test/e2e/overlay.test.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js index 66ea02fc0d..32c90f61fa 100644 --- a/test/e2e/overlay.test.js +++ b/test/e2e/overlay.test.js @@ -945,6 +945,8 @@ describe("overlay", () => { }); }); + await page.waitForSelector("#webpack-dev-server-client-overlay"); + const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$("#webpack-dev-server-client-overlay"); const overlayFrame = await overlayHandle.contentFrame(); @@ -993,6 +995,8 @@ describe("overlay", () => { }); }); + await page.waitForSelector("#webpack-dev-server-client-overlay"); + const pageHtml = await page.evaluate(() => document.body.outerHTML); const overlayHandle = await page.$("#webpack-dev-server-client-overlay"); const overlayFrame = await overlayHandle.contentFrame();