refactor: reorganize client directory (#2562)

BREAKING CHANGE: the `client` now in `default` directory
webpack · May 8, 2020 · 92c22f1 · 92c22f1
1 parent 7cd576a
commit 92c22f1
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 29 deletions.
diff --git a/client-src/default/socket.js b/client-src/default/socket.js
@@ -11,7 +11,7 @@ const Client =
   typeof __webpack_dev_server_client__ !== 'undefined'
     ? __webpack_dev_server_client__
     : // eslint-disable-next-line import/no-unresolved
-      require('./clients/WebsocketClient');
+      require('../clients/WebsocketClient');
 
 let retries = 0;
 let client = null;

diff --git a/client-src/default/webpack.config.js b/client-src/default/webpack.config.js
@@ -1,9 +1,14 @@
 'use strict';
 
-const webpack = require('webpack');
+const path = require('path');
 
 module.exports = {
   mode: 'production',
+  entry: path.join(__dirname, 'index.js'),
+  output: {
+    path: path.resolve(__dirname, '../../client/default'),
+    filename: 'index.bundle.js',
+  },
   module: {
     rules: [
       {
@@ -17,17 +22,4 @@ module.exports = {
       },
     ],
   },
-  plugins: [
-    new webpack.NormalModuleReplacementPlugin(
-      /^\.\/clients\/WebsocketClient$/,
-      (resource) => {
-        if (resource.context.startsWith(process.cwd())) {
-          resource.request = resource.request.replace(
-            /^\.\/clients\/WebsocketClient$/,
-            '../clients/WebsocketClient'
-          );
-        }
-      }
-    ),
-  ],
 };
diff --git a/client-src/sockjs/webpack.config.js b/client-src/sockjs/webpack.config.js
@@ -1,8 +1,13 @@
 'use strict';
 
+const path = require('path');
+
 module.exports = {
   mode: 'production',
+  entry: path.join(__dirname, 'index.js'),
   output: {
+    path: path.resolve(__dirname, '../../client/sockjs'),
+    filename: 'sockjs.bundle.js',
     library: 'SockJS',
     libraryTarget: 'umd',
   },

diff --git a/lib/utils/addEntries.js b/lib/utils/addEntries.js
@@ -36,7 +36,7 @@ function addEntries(config, options, server) {
   const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : '';
   /** @type {string} */
   const clientEntry = `${require.resolve(
-    '../../client/'
+    '../../client/default/'
   )}?${domain}${sockHost}${sockPath}${sockPort}`;
 
   /** @type {(string[] | string)} */

diff --git a/lib/utils/routes.js b/lib/utils/routes.js
@@ -13,13 +13,13 @@ function routes(server) {
   app.get('/__webpack_dev_server__/sockjs.bundle.js', (req, res) => {
     res.setHeader('Content-Type', 'application/javascript');
 
-    createReadStream(join(clientBasePath, 'sockjs.bundle.js')).pipe(res);
+    createReadStream(join(clientBasePath, 'sockjs/sockjs.bundle.js')).pipe(res);
   });
 
   app.get('/webpack-dev-server.js', (req, res) => {
     res.setHeader('Content-Type', 'application/javascript');
 
-    createReadStream(join(clientBasePath, 'index.bundle.js')).pipe(res);
+    createReadStream(join(clientBasePath, 'default/index.bundle.js')).pipe(res);
   });
 
   app.get('/webpack-dev-server/invalidate', (_req, res) => {

diff --git a/package.json b/package.json
@@ -26,10 +26,10 @@
     "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:sockjs": "webpack ./client-src/sockjs/index.js -o client/sockjs.bundle.js --color --config client-src/sockjs/webpack.config.js",
+    "build:client:index": "webpack --color --config client-src/default/webpack.config.js",
+    "build:client:sockjs": "webpack --color --config client-src/sockjs/webpack.config.js",
     "build:client": "rimraf ./client/* && npm-run-all -s -l -p \"build:client:**\"",
     "webpack-dev-server": "node examples/run-example.js",
     "release": "standard-version"

diff --git a/test/client/socket-helper.test.js b/test/client/socket-helper.test.js
@@ -8,7 +8,7 @@ describe('socket', () => {
 
   it('should default to WebsocketClient when no __webpack_dev_server_client__ set', () => {
     jest.mock('../../client/clients/WebsocketClient');
-    const socket = require('../../client/socket');
+    const socket = require('../../client/default/socket');
     const WebsocketClient = require('../../client/clients/WebsocketClient');
 
     const mockHandler = jest.fn();
@@ -36,7 +36,7 @@ describe('socket', () => {
 
   it('should use __webpack_dev_server_client__ when set', () => {
     jest.mock('../../client/clients/WebsocketClient');
-    const socket = require('../../client/socket');
+    const socket = require('../../client/default/socket');
     global.__webpack_dev_server_client__ = require('../../client/clients/WebsocketClient');
 
     const mockHandler = jest.fn();

diff --git 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:8100",
   ],
@@ -23,6 +24,7 @@ exports[`Server addEntries add hot-only option 1`] = `
 Array [
   Array [
     "client",
+    "default",
     "index.js?http:",
     "localhost:8100",
   ],

diff --git a/test/server/utils/addEntries.test.js b/test/server/utils/addEntries.test.js
@@ -18,7 +18,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');
   });
@@ -34,7 +35,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');
@@ -55,7 +57,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');
@@ -324,7 +328,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();
       }
 
@@ -356,7 +362,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();
       }
 
@@ -412,7 +420,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');