From affc96a8a127602024744defbb2d88ddc63086c5 Mon Sep 17 00:00:00 2001 From: Kirill Nagaitsev Date: Tue, 11 Jun 2019 12:02:04 -0500 Subject: [PATCH 1/5] fix(client): add default fallback for client --- client-src/default/socket.js | 15 ++++++++++++++- lib/utils/addEntries.js | 2 +- package.json | 2 +- test/e2e/ClientOptions.test.js | 2 +- test/server/inline-option.test.js | 12 +++++++++--- test/server/utils/addEntries.test.js | 22 ++++++++++++++++------ 6 files changed, 42 insertions(+), 13 deletions(-) diff --git a/client-src/default/socket.js b/client-src/default/socket.js index 4c8bcbba20..46c07afe37 100644 --- a/client-src/default/socket.js +++ b/client-src/default/socket.js @@ -4,7 +4,20 @@ /* eslint-disable camelcase */ -const Client = __webpack_dev_server_client__; + +// this SockJSClient is here as a default fallback, in case inline mode +// is off or the client is not injected. This will be switched to +// WebsocketClient when it becomes the default +const SockJSClient = require('../clients/SockJSClient'); + +let Client; +try { + // if __webpack_dev_server_client__ is undefined, we should fall back + // to SockJSClient + Client = __webpack_dev_server_client__; +} catch (e) { + Client = SockJSClient; +} let retries = 0; let client = null; diff --git a/lib/utils/addEntries.js b/lib/utils/addEntries.js index fb5e542e75..471fb3538c 100644 --- a/lib/utils/addEntries.js +++ b/lib/utils/addEntries.js @@ -20,7 +20,7 @@ function addEntries(config, options, server) { const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : ''; const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : ''; const clientEntry = `${require.resolve( - '../../client/' + '../../client/default/' )}?${domain}${sockHost}${sockPath}${sockPort}`; let hotEntry; diff --git a/package.json b/package.json index 617bde56c3..af66d157d9 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "test": "npm run test:coverage", "pretest": "npm run lint", "prepare": "rimraf ./ssl/*.pem && npm run build:client", - "build:client:default": "babel client-src/default --out-dir client --ignore \"./client-src/default/*.config.js\"", + "build:client:default": "babel client-src/default --out-dir client/default --ignore \"./client-src/default/*.config.js\"", "build:client:clients": "babel client-src/clients --out-dir client/clients", "build:client:index": "webpack ./client-src/default/index.js -o client/index.bundle.js --color --config client-src/default/webpack.config.js", "build:client:live": "webpack ./client-src/live/index.js -o client/live.bundle.js --color --config client-src/live/webpack.config.js", diff --git a/test/e2e/ClientOptions.test.js b/test/e2e/ClientOptions.test.js index 1d9bcd931b..76d338afd4 100644 --- a/test/e2e/ClientOptions.test.js +++ b/test/e2e/ClientOptions.test.js @@ -158,7 +158,7 @@ describe('Client complex inline script path with sockPort', () => { }); // previously, using sockPort without sockPath had the ability -// to alter the sockPath (based on a bug in client-src/index.js) +// to alter the sockPath (based on a bug in client-src/default/index.js) // so we need to make sure sockPath is not altered in this case describe('Client complex inline script path with sockPort, no sockPath', () => { beforeAll((done) => { diff --git a/test/server/inline-option.test.js b/test/server/inline-option.test.js index 78344621e6..542fe68896 100644 --- a/test/server/inline-option.test.js +++ b/test/server/inline-option.test.js @@ -27,7 +27,9 @@ describe('inline option', () => { afterAll(testServer.close); it('should include inline client script in the bundle', (done) => { - const url = new RegExp(`client/index.js\\?http://0.0.0.0:${port}`); + const url = new RegExp( + `client/default/index.js\\?http://0.0.0.0:${port}` + ); req.get('/main.js').expect(200, url, done); }); @@ -54,7 +56,9 @@ describe('inline option', () => { afterAll(testServer.close); it('should include inline client script in the bundle', (done) => { - const url = new RegExp(`client/index.js\\?http://0.0.0.0:${port}`); + const url = new RegExp( + `client/default/index.js\\?http://0.0.0.0:${port}` + ); req.get('/main.js').expect(200, url, done); }); @@ -81,7 +85,9 @@ describe('inline option', () => { .get('/main.js') .expect(200) .then(({ text }) => { - expect(text.includes(`client/index.js?http://0.0.0.0:${port}`)); + expect( + text.includes(`client/default/index.js?http://0.0.0.0:${port}`) + ); done(); }); }); diff --git a/test/server/utils/addEntries.test.js b/test/server/utils/addEntries.test.js index 608bd61a30..03528cbf0f 100644 --- a/test/server/utils/addEntries.test.js +++ b/test/server/utils/addEntries.test.js @@ -17,7 +17,8 @@ describe('addEntries util', () => { expect(webpackOptions.entry.length).toEqual(2); expect( - normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 + normalize(webpackOptions.entry[0]).indexOf('client/default/index.js?') !== + -1 ).toBeTruthy(); expect(normalize(webpackOptions.entry[1])).toEqual('./foo.js'); }); @@ -33,7 +34,8 @@ describe('addEntries util', () => { expect(webpackOptions.entry.length).toEqual(3); expect( - normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 + normalize(webpackOptions.entry[0]).indexOf('client/default/index.js?') !== + -1 ).toBeTruthy(); expect(webpackOptions.entry[1]).toEqual('./foo.js'); expect(webpackOptions.entry[2]).toEqual('./bar.js'); @@ -54,7 +56,9 @@ describe('addEntries util', () => { expect(webpackOptions.entry.foo.length).toEqual(2); expect( - normalize(webpackOptions.entry.foo[0]).indexOf('client/index.js?') !== -1 + normalize(webpackOptions.entry.foo[0]).indexOf( + 'client/default/index.js?' + ) !== -1 ).toBeTruthy(); expect(webpackOptions.entry.foo[1]).toEqual('./foo.js'); expect(webpackOptions.entry.bar[1]).toEqual('./bar.js'); @@ -292,7 +296,9 @@ describe('addEntries util', () => { if (expectInline) { expect( - normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 + normalize(webpackOptions.entry[0]).indexOf( + 'client/default/index.js?' + ) !== -1 ).toBeTruthy(); } @@ -324,7 +330,9 @@ describe('addEntries util', () => { if (expectInline) { expect( - normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 + normalize(webpackOptions.entry[0]).indexOf( + 'client/default/index.js?' + ) !== -1 ).toBeTruthy(); } @@ -380,7 +388,9 @@ describe('addEntries util', () => { expect(webWebpackOptions.entry.length).toEqual(2); expect( - normalize(webWebpackOptions.entry[0]).indexOf('client/index.js?') !== -1 + normalize(webWebpackOptions.entry[0]).indexOf( + 'client/default/index.js?' + ) !== -1 ).toBeTruthy(); expect(normalize(webWebpackOptions.entry[1])).toEqual('./foo.js'); From 24d207cd16e9bc8a11533596a0750c49080ae3d2 Mon Sep 17 00:00:00 2001 From: Kirill Nagaitsev Date: Tue, 11 Jun 2019 12:32:01 -0500 Subject: [PATCH 2/5] test(server): update entry snapshot --- test/server/__snapshots__/Server.test.js.snap | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/server/__snapshots__/Server.test.js.snap b/test/server/__snapshots__/Server.test.js.snap index 8d2d66684b..20193e6b5b 100644 --- a/test/server/__snapshots__/Server.test.js.snap +++ b/test/server/__snapshots__/Server.test.js.snap @@ -4,6 +4,7 @@ exports[`Server addEntries add hot option 1`] = ` Array [ Array [ "client", + "default", "index.js?http:", "localhost:8090", ], @@ -34,6 +35,7 @@ exports[`Server addEntries add hotOnly option 1`] = ` Array [ Array [ "client", + "default", "index.js?http:", "localhost:8090", ], From eb69e4c39812851d68293df018aaa0fa2d4958bd Mon Sep 17 00:00:00 2001 From: Kirill Nagaitsev Date: Tue, 11 Jun 2019 17:14:34 -0500 Subject: [PATCH 3/5] fix(client): move SockJSClient definition --- client-src/default/socket.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/client-src/default/socket.js b/client-src/default/socket.js index 46c07afe37..a84a68a1ac 100644 --- a/client-src/default/socket.js +++ b/client-src/default/socket.js @@ -5,17 +5,18 @@ camelcase */ -// this SockJSClient is here as a default fallback, in case inline mode -// is off or the client is not injected. This will be switched to -// WebsocketClient when it becomes the default -const SockJSClient = require('../clients/SockJSClient'); - let Client; try { // if __webpack_dev_server_client__ is undefined, we should fall back // to SockJSClient Client = __webpack_dev_server_client__; } catch (e) { + // this SockJSClient is here as a default fallback, in case inline mode + // is off or the client is not injected. This will be switched to + // WebsocketClient when it becomes the default + + // eslint-disable-next-line global-require + const SockJSClient = require('../clients/SockJSClient'); Client = SockJSClient; } From 8c90abb6ab95104317092916be9aa5967e384c3d Mon Sep 17 00:00:00 2001 From: Kirill Nagaitsev Date: Thu, 13 Jun 2019 11:06:54 -0500 Subject: [PATCH 4/5] fix(client): update SockJSClient path resolution --- client-src/default/socket.js | 26 +++++++++---------- client-src/default/webpack.config.js | 10 +++++++ client-src/live/webpack.config.js | 7 +++++ package.json | 2 +- test/server/__snapshots__/Server.test.js.snap | 2 -- test/server/inline-option.test.js | 12 +++------ test/server/utils/addEntries.test.js | 22 +++++----------- 7 files changed, 39 insertions(+), 42 deletions(-) diff --git a/client-src/default/socket.js b/client-src/default/socket.js index a84a68a1ac..7752ffea8a 100644 --- a/client-src/default/socket.js +++ b/client-src/default/socket.js @@ -5,20 +5,18 @@ camelcase */ -let Client; -try { - // if __webpack_dev_server_client__ is undefined, we should fall back - // to SockJSClient - Client = __webpack_dev_server_client__; -} catch (e) { - // this SockJSClient is here as a default fallback, in case inline mode - // is off or the client is not injected. This will be switched to - // WebsocketClient when it becomes the default - - // eslint-disable-next-line global-require - const SockJSClient = require('../clients/SockJSClient'); - Client = SockJSClient; -} +// this SockJSClient is here as a default fallback, in case inline mode +// is off or the client is not injected. This will be switched to +// WebsocketClient when it becomes the default + +// important: the path to SockJSClient here is made to work in the 'client' +// directory, but is updated via the webpack compilation when compiled from +// the 'client-src' directory +const Client = + typeof __webpack_dev_server_client__ !== 'undefined' + ? __webpack_dev_server_client__ + : // eslint-disable-next-line import/no-unresolved + require('./clients/SockJSClient'); let retries = 0; let client = null; diff --git a/client-src/default/webpack.config.js b/client-src/default/webpack.config.js index a0b70901ca..ac001f26d7 100644 --- a/client-src/default/webpack.config.js +++ b/client-src/default/webpack.config.js @@ -1,5 +1,7 @@ 'use strict'; +const webpack = require('webpack'); + module.exports = { mode: 'production', module: { @@ -15,4 +17,12 @@ module.exports = { }, ], }, + plugins: [ + new webpack.NormalModuleReplacementPlugin(/\/clients\//, (resource) => { + resource.request = resource.request.replace( + /\/clients\//, + '/../clients/' + ); + }), + ], }; diff --git a/client-src/live/webpack.config.js b/client-src/live/webpack.config.js index 75e693210a..3887b38b2b 100644 --- a/client-src/live/webpack.config.js +++ b/client-src/live/webpack.config.js @@ -1,6 +1,7 @@ 'use strict'; const path = require('path'); +const webpack = require('webpack'); const CopyPlugin = require('copy-webpack-plugin'); module.exports = { @@ -33,5 +34,11 @@ module.exports = { to: path.resolve(__dirname, '../../client/live.html'), }, ]), + new webpack.NormalModuleReplacementPlugin(/\/clients\//, (resource) => { + resource.request = resource.request.replace( + /\/clients\//, + '/../clients/' + ); + }), ], }; diff --git a/package.json b/package.json index af66d157d9..617bde56c3 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "test": "npm run test:coverage", "pretest": "npm run lint", "prepare": "rimraf ./ssl/*.pem && npm run build:client", - "build:client:default": "babel client-src/default --out-dir client/default --ignore \"./client-src/default/*.config.js\"", + "build:client:default": "babel client-src/default --out-dir client --ignore \"./client-src/default/*.config.js\"", "build:client:clients": "babel client-src/clients --out-dir client/clients", "build:client:index": "webpack ./client-src/default/index.js -o client/index.bundle.js --color --config client-src/default/webpack.config.js", "build:client:live": "webpack ./client-src/live/index.js -o client/live.bundle.js --color --config client-src/live/webpack.config.js", diff --git a/test/server/__snapshots__/Server.test.js.snap b/test/server/__snapshots__/Server.test.js.snap index 20193e6b5b..8d2d66684b 100644 --- a/test/server/__snapshots__/Server.test.js.snap +++ b/test/server/__snapshots__/Server.test.js.snap @@ -4,7 +4,6 @@ exports[`Server addEntries add hot option 1`] = ` Array [ Array [ "client", - "default", "index.js?http:", "localhost:8090", ], @@ -35,7 +34,6 @@ exports[`Server addEntries add hotOnly option 1`] = ` Array [ Array [ "client", - "default", "index.js?http:", "localhost:8090", ], diff --git a/test/server/inline-option.test.js b/test/server/inline-option.test.js index 542fe68896..78344621e6 100644 --- a/test/server/inline-option.test.js +++ b/test/server/inline-option.test.js @@ -27,9 +27,7 @@ describe('inline option', () => { afterAll(testServer.close); it('should include inline client script in the bundle', (done) => { - const url = new RegExp( - `client/default/index.js\\?http://0.0.0.0:${port}` - ); + const url = new RegExp(`client/index.js\\?http://0.0.0.0:${port}`); req.get('/main.js').expect(200, url, done); }); @@ -56,9 +54,7 @@ describe('inline option', () => { afterAll(testServer.close); it('should include inline client script in the bundle', (done) => { - const url = new RegExp( - `client/default/index.js\\?http://0.0.0.0:${port}` - ); + const url = new RegExp(`client/index.js\\?http://0.0.0.0:${port}`); req.get('/main.js').expect(200, url, done); }); @@ -85,9 +81,7 @@ describe('inline option', () => { .get('/main.js') .expect(200) .then(({ text }) => { - expect( - text.includes(`client/default/index.js?http://0.0.0.0:${port}`) - ); + expect(text.includes(`client/index.js?http://0.0.0.0:${port}`)); done(); }); }); diff --git a/test/server/utils/addEntries.test.js b/test/server/utils/addEntries.test.js index 03528cbf0f..608bd61a30 100644 --- a/test/server/utils/addEntries.test.js +++ b/test/server/utils/addEntries.test.js @@ -17,8 +17,7 @@ describe('addEntries util', () => { expect(webpackOptions.entry.length).toEqual(2); expect( - normalize(webpackOptions.entry[0]).indexOf('client/default/index.js?') !== - -1 + normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 ).toBeTruthy(); expect(normalize(webpackOptions.entry[1])).toEqual('./foo.js'); }); @@ -34,8 +33,7 @@ describe('addEntries util', () => { expect(webpackOptions.entry.length).toEqual(3); expect( - normalize(webpackOptions.entry[0]).indexOf('client/default/index.js?') !== - -1 + normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 ).toBeTruthy(); expect(webpackOptions.entry[1]).toEqual('./foo.js'); expect(webpackOptions.entry[2]).toEqual('./bar.js'); @@ -56,9 +54,7 @@ describe('addEntries util', () => { expect(webpackOptions.entry.foo.length).toEqual(2); expect( - normalize(webpackOptions.entry.foo[0]).indexOf( - 'client/default/index.js?' - ) !== -1 + normalize(webpackOptions.entry.foo[0]).indexOf('client/index.js?') !== -1 ).toBeTruthy(); expect(webpackOptions.entry.foo[1]).toEqual('./foo.js'); expect(webpackOptions.entry.bar[1]).toEqual('./bar.js'); @@ -296,9 +292,7 @@ describe('addEntries util', () => { if (expectInline) { expect( - normalize(webpackOptions.entry[0]).indexOf( - 'client/default/index.js?' - ) !== -1 + normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 ).toBeTruthy(); } @@ -330,9 +324,7 @@ describe('addEntries util', () => { if (expectInline) { expect( - normalize(webpackOptions.entry[0]).indexOf( - 'client/default/index.js?' - ) !== -1 + normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1 ).toBeTruthy(); } @@ -388,9 +380,7 @@ describe('addEntries util', () => { expect(webWebpackOptions.entry.length).toEqual(2); expect( - normalize(webWebpackOptions.entry[0]).indexOf( - 'client/default/index.js?' - ) !== -1 + normalize(webWebpackOptions.entry[0]).indexOf('client/index.js?') !== -1 ).toBeTruthy(); expect(normalize(webWebpackOptions.entry[1])).toEqual('./foo.js'); From d15d7d9cd5333f6b96415d1db078ce06c39da40f Mon Sep 17 00:00:00 2001 From: Kirill Nagaitsev Date: Thu, 13 Jun 2019 13:43:07 -0500 Subject: [PATCH 5/5] fix(client): add correct entry path --- lib/utils/addEntries.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/utils/addEntries.js b/lib/utils/addEntries.js index 471fb3538c..fb5e542e75 100644 --- a/lib/utils/addEntries.js +++ b/lib/utils/addEntries.js @@ -20,7 +20,7 @@ function addEntries(config, options, server) { const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : ''; const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : ''; const clientEntry = `${require.resolve( - '../../client/default/' + '../../client/' )}?${domain}${sockHost}${sockPath}${sockPort}`; let hotEntry;