webpack-dev-service 0.8.0 → 0.9.0

package/README.md

@@ -12,7 +12,7 @@
 
 ### Usage
 
-```js
+```ts
 /**
  * @module webpack
  * @description Webpack config
@@ -22,6 +22,7 @@ import Koa from 'koa';
 import path from 'path';
 import memfs from 'memfs';
 import webpack from 'webpack';
+import compress from 'koa-compress';
 import dev from 'webpack-dev-service';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
@@ -39,7 +40,7 @@ const html = {
   filename: entryHTML,
   templateParameters: { lang: 'en' },
   template: path.resolve('index.ejs'),
-  favicon: path.resolve('src/logo.svg'),
+  favicon: path.resolve('src/images/favicon.ico'),
   meta: { 'theme-color': '#4285f4', viewport: 'width=device-width,initial-scale=1.0' }
 };
 
@@ -47,8 +48,6 @@ function createMemfs() {
   const volume = new memfs.Volume();
   const fs = memfs.createFsFromVolume(volume);
 
-  fs.join = path.join.bind(path);
-
   return fs;
 }
 
@@ -60,16 +59,10 @@ const compiler = webpack({
   name: 'react',
   mode: 'development',
   context: path.resolve('src'),
-  entry: [
-    // Entry file
-    path.resolve('src/index.jsx'),
-    // Hot client
-    'webpack-dev-service/client'
-  ],
+  entry: path.resolve('src/index.tsx'),
   output: {
     publicPath: '/public/',
     filename: `js/[name].js`,
-    hashFunction: 'xxhash64',
     path: path.resolve('public'),
     chunkFilename: `js/[name].js`,
     assetModuleFilename: `[path][name][ext]`
@@ -77,7 +70,7 @@ const compiler = webpack({
   devtool: 'eval-cheap-module-source-map',
   resolve: {
     fallback: { url: false },
-    extensions: ['.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
   },
   watchOptions: {
     aggregateTimeout: 256
@@ -90,20 +83,28 @@ const compiler = webpack({
     runtimeModules: false,
     dependentModules: false
   },
+  plugins: [
+    new HtmlWebpackPlugin(html),
+    new MiniCssExtractPlugin({
+      ignoreOrder: true,
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[name].css'
+    }),
+    new webpack.ProgressPlugin(progress)
+  ],
   module: {
     strictExportPresence: true,
     rules: [
       {
         oneOf: [
           {
-            test: /\.jsx?$/i,
+            test: /\.[jt]sx?$/i,
             exclude: /[\\/]node_modules[\\/]/,
             use: [
               {
                 loader: 'swc-loader',
                 options: {
                   jsc: {
-                    target: 'es2015',
                     externalHelpers: true,
                     parser: {
                       tsx: true,
@@ -113,9 +114,6 @@ const compiler = webpack({
                       react: {
                         runtime: 'automatic'
                       }
-                    },
-                    experimental: {
-                      cacheRoot: path.resolve('node_modules/.cache/swc')
                     }
                   },
                   env: {
@@ -146,41 +144,33 @@ const compiler = webpack({
             ]
           },
           {
-            test: /\.svg$/i,
+            test: /\.(svg|mp4)$/i,
             type: 'asset/resource',
             exclude: /[\\/]node_modules[\\/]/
           }
         ]
       }
     ]
-  },
-  plugins: [
-    new webpack.ProgressPlugin(progress),
-    new HtmlWebpackPlugin(html),
-    new MiniCssExtractPlugin({
-      ignoreOrder: true,
-      filename: 'css/[name].css',
-      chunkFilename: 'css/[name].css'
-    })
-  ]
+  }
 });
 
 const port = 8000;
 const app = new Koa();
 const fs = createMemfs();
 const server = dev(compiler, {
-  index: false,
-  outputFileSystem: fs,
+  fs,
   headers: {
-    'Cache-Control': 'no-store',
-    'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Methods': '*',
-    'Access-Control-Allow-Headers': '*',
-    'X-Content-Type-Options': 'nosniff',
-    'Access-Control-Allow-Credentials': 'true'
+    'Cache-Control': 'no-cache',
+    'X-Content-Type-Options': 'nosniff'
   }
 });
 
+app.use(
+  compress({
+    br: false
+  })
+);
+
 app.use(server);
 
 app.use(async ctx => {

package/client/cjs/client.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -23,11 +23,10 @@ function createClient(options) {
   const RETRY_INTERVAL = 3000;
   const progress$1 = new progress();
   const overlay$1 = new overlay(options.name);
-  const fallback = error => {
-    if (options.live) {
+  const fallback = () => {
+    if (options.reload) {
       self.location.reload();
-    } else if (error) {
-      console.error(error);
+    } else {
       console.warn('Use fallback update but you turn off live reload, please reload by yourself.');
     }
   };
@@ -51,9 +50,9 @@ function createClient(options) {
   const onHash = ({ hash }) => {
     hot.setHash(hash);
   };
-  const setProblems = (type, problems) => {
+  const setIssues = (type, issues) => {
     if (options.overlay) {
-      overlay$1.setProblems(type, problems);
+      overlay$1.setIssues(type, issues);
     }
     const maps = {
       errors: ['\x1b[38;2;100;30;22m\x1b[48;2;255;95;88m ERROR \x1b[0m', 'error'],
@@ -61,15 +60,15 @@ function createClient(options) {
     };
     const [name, method] = maps[type];
     const debug = console[method];
-    for (const { moduleName, chunkName, message } of problems) {
+    for (const { moduleName, chunkName, message } of issues) {
       const filename = moduleName || chunkName || 'unknown';
       debug(`${name} in ${filename}\n${message}`);
     }
   };
-  const onProblems = ({ errors, warnings }) => {
+  const onIssues = ({ errors, warnings }) => {
     progress$1.hide();
-    setProblems('errors', errors);
-    setProblems('warnings', warnings);
+    setIssues('errors', errors);
+    setIssues('warnings', warnings);
     if (options.overlay) {
       overlay$1.show();
     }
@@ -77,7 +76,7 @@ function createClient(options) {
       applyUpdateAsync();
     }
   };
-  const onSuccess = () => {
+  const onOk = () => {
     overlay$1.hide();
     progress$1.hide();
     applyUpdateAsync();
@@ -105,11 +104,11 @@ function createClient(options) {
           case 'hash':
             onHash(payload);
             break;
-          case 'problems':
-            onProblems(payload);
+          case 'issues':
+            onIssues(payload);
             break;
           case 'ok':
-            onSuccess();
+            onOk();
             break;
         }
         events.emit(action, payload, options);

package/client/cjs/events.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -15,8 +15,8 @@
 const events = {
   ok: [],
   hash: [],
+  issues: [],
   invalid: [],
-  problems: [],
   progress: []
 };
 /**

package/client/cjs/hot.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/main.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -23,8 +23,8 @@ const getCurrentScript = () => {
     return currentScript;
   }
 };
-const resolveProtocol = (params, protocol) => {
-  switch (params.get('tls')) {
+const getProtocol = (params, protocol) => {
+  switch (params.get('wss')) {
     case 'true':
       return 'wss:';
     case 'false':
@@ -33,46 +33,27 @@ const resolveProtocol = (params, protocol) => {
       return isTLS(protocol) ? 'wss:' : 'ws:';
   }
 };
-const resolveOrigin = params => {
+const getOrigin = params => {
   const { location } = self;
-  let host = params.get('host');
-  let protocol;
-  if (host) {
-    protocol = resolveProtocol(params, location.protocol);
-  } else {
-    const script = getCurrentScript();
-    if (script) {
-      const { src } = script;
-      const url = new URL(src, location.href);
-      host = url.host;
-      protocol = resolveProtocol(params, url.protocol);
-    } else {
-      host = location.host;
-      protocol = resolveProtocol(params, location.protocol);
-    }
+  const script = getCurrentScript();
+  if (script) {
+    const url = new URL(script.src, location.href);
+    const protocol = getProtocol(params, url.protocol);
+    return `${protocol}//${url.host}`;
   }
-  return `${protocol}//${host}`;
+  const protocol = getProtocol(params, location.protocol);
+  return `${protocol}//${location.host}`;
 };
-const resolveOptions = () => {
+const getOptions = () => {
   const params = new URLSearchParams(__resourceQuery);
-  const origin = resolveOrigin(params);
-  const hmr = params.get('hmr') !== 'false';
-  const live = params.get('live') !== 'false';
-  const overlay = params.get('overlay') !== 'false';
-  const progress = params.get('progress') !== 'false';
-  try {
-    const options = __WDS_HOT_OPTIONS__;
-    return {
-      live,
-      origin,
-      overlay,
-      name: options.name,
-      path: options.path,
-      hmr: options.hmr === false ? false : hmr,
-      progress: options.progress === false ? false : progress
-    };
-  } catch (_a) {
-    throw new Error('Imported the hot client but the hot server is not enabled.');
-  }
+  return {
+    origin: getOrigin(params),
+    hmr: params.get('hmr') !== 'false',
+    path: params.get('path') || '/hot',
+    name: params.get('name') || 'webpack',
+    reload: params.get('reload') !== 'false',
+    overlay: params.get('overlay') !== 'false',
+    progress: params.get('progress') !== 'false'
+  };
 };
-client(resolveOptions());
+client(getOptions());

package/client/cjs/ui/overlay.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -98,7 +98,7 @@ const CSS = `
 .${OVERLAY}-warnings-title {
   color: #ffbd2e;
 }
-.${OVERLAY}-problems {
+.${OVERLAY}-issues {
   padding: 0 16px;
   overflow-y: auto;
   scrollbar-width: none;
@@ -107,7 +107,7 @@ const CSS = `
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
 }
-.${OVERLAY}-problems::-webkit-scrollbar {
+.${OVERLAY}-issues::-webkit-scrollbar {
   display: none;
 }
 .${OVERLAY}-errors,
@@ -168,7 +168,7 @@ const HTML = `
     <em class="${OVERLAY}-errors-title"></em>
     <em class="${OVERLAY}-warnings-title"></em>
   </div>
-  <aside class="${OVERLAY}-problems">
+  <aside class="${OVERLAY}-issues">
     <article class="${OVERLAY}-errors ${OVERLAY}-hidden"></article>
     <article class="${OVERLAY}-warnings ${OVERLAY}-hidden"></article>
   </aside>
@@ -192,8 +192,8 @@ class Overlay {
       this.hide();
     });
   }
-  setProblems(type, problems) {
-    const count = problems.length;
+  setIssues(type, issues) {
+    const count = issues.length;
     const hidden = `${OVERLAY}-hidden`;
     const problemMaps = {
       errors: ['Error', this.errorsTitle, this.errorsList],
@@ -203,7 +203,7 @@ class Overlay {
     if (count > 0) {
       let html = '';
       problemTitle.innerText = `${count} ${name}(s)`;
-      for (const { moduleName, chunkName, message } of problems) {
+      for (const { moduleName, chunkName, message } of issues) {
         const details = utils.ansiToHTML(message);
         const filename = moduleName || chunkName || 'unknown';
         html += `<section><em>${name}</em> in ${filename}<pre>${details}</pre></section>`;

package/client/cjs/ui/progress.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/ui/utils.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/client.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -21,11 +21,10 @@ function createClient(options) {
   const RETRY_INTERVAL = 3000;
   const progress = new Progress();
   const overlay = new Overlay(options.name);
-  const fallback = error => {
-    if (options.live) {
+  const fallback = () => {
+    if (options.reload) {
       self.location.reload();
-    } else if (error) {
-      console.error(error);
+    } else {
       console.warn('Use fallback update but you turn off live reload, please reload by yourself.');
     }
   };
@@ -49,9 +48,9 @@ function createClient(options) {
   const onHash = ({ hash }) => {
     setHash(hash);
   };
-  const setProblems = (type, problems) => {
+  const setIssues = (type, issues) => {
     if (options.overlay) {
-      overlay.setProblems(type, problems);
+      overlay.setIssues(type, issues);
     }
     const maps = {
       errors: ['\x1b[38;2;100;30;22m\x1b[48;2;255;95;88m ERROR \x1b[0m', 'error'],
@@ -59,15 +58,15 @@ function createClient(options) {
     };
     const [name, method] = maps[type];
     const debug = console[method];
-    for (const { moduleName, chunkName, message } of problems) {
+    for (const { moduleName, chunkName, message } of issues) {
       const filename = moduleName || chunkName || 'unknown';
       debug(`${name} in ${filename}\n${message}`);
     }
   };
-  const onProblems = ({ errors, warnings }) => {
+  const onIssues = ({ errors, warnings }) => {
     progress.hide();
-    setProblems('errors', errors);
-    setProblems('warnings', warnings);
+    setIssues('errors', errors);
+    setIssues('warnings', warnings);
     if (options.overlay) {
       overlay.show();
     }
@@ -75,7 +74,7 @@ function createClient(options) {
       applyUpdateAsync();
     }
   };
-  const onSuccess = () => {
+  const onOk = () => {
     overlay.hide();
     progress.hide();
     applyUpdateAsync();
@@ -103,11 +102,11 @@ function createClient(options) {
           case 'hash':
             onHash(payload);
             break;
-          case 'problems':
-            onProblems(payload);
+          case 'issues':
+            onIssues(payload);
             break;
           case 'ok':
-            onSuccess();
+            onOk();
             break;
         }
         emit(action, payload, options);

package/client/esm/events.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -13,8 +13,8 @@
 const events = {
   ok: [],
   hash: [],
+  issues: [],
   invalid: [],
-  problems: [],
   progress: []
 };
 /**

package/client/esm/hot.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/main.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.8.0
+ * @version 0.9.0
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme
@@ -21,8 +21,8 @@ const getCurrentScript = () => {
     return currentScript;
   }
 };
-const resolveProtocol = (params, protocol) => {
-  switch (params.get('tls')) {
+const getProtocol = (params, protocol) => {
+  switch (params.get('wss')) {
     case 'true':
       return 'wss:';
     case 'false':
@@ -31,46 +31,27 @@ const resolveProtocol = (params, protocol) => {
       return isTLS(protocol) ? 'wss:' : 'ws:';
   }
 };
-const resolveOrigin = params => {
+const getOrigin = params => {
   const { location } = self;
-  let host = params.get('host');
-  let protocol;
-  if (host) {
-    protocol = resolveProtocol(params, location.protocol);
-  } else {
-    const script = getCurrentScript();
-    if (script) {
-      const { src } = script;
-      const url = new URL(src, location.href);
-      host = url.host;
-      protocol = resolveProtocol(params, url.protocol);
-    } else {
-      host = location.host;
-      protocol = resolveProtocol(params, location.protocol);
-    }
+  const script = getCurrentScript();
+  if (script) {
+    const url = new URL(script.src, location.href);
+    const protocol = getProtocol(params, url.protocol);
+    return `${protocol}//${url.host}`;
   }
-  return `${protocol}//${host}`;
+  const protocol = getProtocol(params, location.protocol);
+  return `${protocol}//${location.host}`;
 };
-const resolveOptions = () => {
+const getOptions = () => {
   const params = new URLSearchParams(__resourceQuery);
-  const origin = resolveOrigin(params);
-  const hmr = params.get('hmr') !== 'false';
-  const live = params.get('live') !== 'false';
-  const overlay = params.get('overlay') !== 'false';
-  const progress = params.get('progress') !== 'false';
-  try {
-    const options = __WDS_HOT_OPTIONS__;
-    return {
-      live,
-      origin,
-      overlay,
-      name: options.name,
-      path: options.path,
-      hmr: options.hmr === false ? false : hmr,
-      progress: options.progress === false ? false : progress
-    };
-  } catch (_a) {
-    throw new Error('Imported the hot client but the hot server is not enabled.');
-  }
+  return {
+    origin: getOrigin(params),
+    hmr: params.get('hmr') !== 'false',
+    path: params.get('path') || '/hot',
+    name: params.get('name') || 'webpack',
+    reload: params.get('reload') !== 'false',
+    overlay: params.get('overlay') !== 'false',
+    progress: params.get('progress') !== 'false'
+  };
 };
-createClient(resolveOptions());
+createClient(getOptions());