@best-shot/dev-server 0.13.0 → 0.13.4

package/README.md

@@ -14,10 +14,10 @@ DevServer support of `@best-shot/cli`.
 
 ## Features
 
-- All Features of webpack-dev-server@4
-- Hook `historyApiFallback` into `devMiddleware.publicPath`
+- All Features of [webpack-dev-server@4](https://webpack.js.org/configuration/dev-server/)
+- Hook `historyApiFallback` into `publicPath`
 - Show a wait page when bundling
-- Provide a 404 page
+- Provide a 404 error page
 - Open source file in vscode (from vue-devtools)
 
 ## Installation
@@ -44,6 +44,13 @@ export default {
 };
 ```
 
+## Tips
+
+### Difference with webpack-dev-server
+
+- `options.static` is `false` by default.
+- `options.hot` is `only` by default.
+
 ## Related
 
 - [@best-shot/cli](../cli)

package/lib/server.mjs

@@ -1,49 +1,11 @@
-import { createRequire } from 'module';
-
 import launchMiddleware from 'launch-editor-middleware';
 import WebpackDevServer from 'webpack-dev-server';
 
 import { notFound } from '../middleware/not-found/index.mjs';
+import { staticFile } from '../middleware/static-file/index.mjs';
 import * as waitPage from '../middleware/wait-page/index.mjs';
 
-class BestShotDevServer extends WebpackDevServer {
-  // https://github.com/webpack/webpack-dev-server/blob/79a169baa3eeaf71df068de5d9c6150684dfe35f/lib/Server.js#L1556
-  setupHistoryApiFallbackFeature() {
-    const { historyApiFallback } = this.options;
-
-    if (
-      typeof historyApiFallback.logger === 'undefined' &&
-      !historyApiFallback.verbose
-    ) {
-      historyApiFallback.logger = this.logger.log.bind(
-        this.logger,
-        '[connect-history-api-fallback]',
-      );
-    }
-
-    const {
-      devMiddleware: {
-        publicPath = this.compiler.options.output.publicPath,
-      } = {},
-    } = this.options;
-
-    const requireLazy = createRequire(import.meta.url);
-    const connectHistoryApiFallback = requireLazy(
-      'connect-history-api-fallback',
-    );
-
-    if (publicPath.startsWith('/')) {
-      this.app.use(publicPath, connectHistoryApiFallback(historyApiFallback));
-    } else {
-      this.app.use(connectHistoryApiFallback(historyApiFallback));
-    }
-  }
-}
-
-export function DevServer(
-  compiler,
-  { onAfterSetupMiddleware, onBeforeSetupMiddleware, ...options },
-) {
+export function DevServer(compiler, { setupMiddlewares, ...options }) {
   waitPage.apply(compiler);
 
   process.env.WEBPACK_DEV_SERVER_BASE_PORT = 1234;
@@ -54,32 +16,50 @@ export function DevServer(
   if (options.hot === undefined) {
     options.hot = 'only';
   }
+
   if (options.static === undefined) {
     options.static = false;
   }
   /* eslint-enable no-param-reassign */
 
-  const Server = new BestShotDevServer(
+  const Server = new WebpackDevServer(
     {
       ...options,
-      onBeforeSetupMiddleware(server) {
+      setupMiddlewares(middlewares, devServer) {
         if (process.env.TERM_PROGRAM === 'vscode') {
-          server.app.use('/__open-in-editor', launchMiddleware('code'));
-        }
-        if (typeof onBeforeSetupMiddleware === 'function') {
-          onBeforeSetupMiddleware(server);
+          devServer.app.use('/__open-in-editor', launchMiddleware('code'));
         }
-        server.app.use(waitPage.middleware(server));
-      },
-      onAfterSetupMiddleware(server) {
-        if (typeof onAfterSetupMiddleware === 'function') {
-          onAfterSetupMiddleware(server);
+
+        devServer.app.use(staticFile());
+
+        middlewares.unshift({
+          name: 'webpack-wait-page',
+          middleware: waitPage.middleware(devServer),
+        });
+
+        if (publicPath.startsWith('/')) {
+          const index = middlewares.findIndex(
+            ({ name }) => name === 'connect-history-api-fallback',
+          );
+
+          if (index > -1) {
+            // eslint-disable-next-line no-param-reassign
+            middlewares[index].path = publicPath;
+          }
         }
-        server.app.use(
-          notFound({
+
+        middlewares.push({
+          name: 'page-not-found',
+          middleware: notFound({
             publicPath: publicPath.startsWith('/') ? publicPath : '/',
           }),
-        );
+        });
+
+        if (typeof setupMiddlewares === 'function') {
+          return setupMiddlewares(middlewares, devServer);
+        }
+
+        return middlewares;
       },
     },
     compiler,

package/middleware/not-found/404.html

@@ -10,90 +10,20 @@
     />
     <title>Page not found</title>
     <link href="/.best-shot/logo.png" rel="shortcut icon" type="image/png" />
+    <link href="/.best-shot/style.css" rel="stylesheet" />
     <style>
       html {
-        min-width: 300px;
-        height: 100%;
-        min-height: 300px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
-        user-select: none;
-      }
-
-      img,
-      h1 {
-        pointer-events: none;
-      }
-
-      body {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin: 0;
-        background-color: white;
-        height: 100%;
-        color: #999999;
-        font-family: -apple-system, BlinkMacSystemFont, roboto, 'Segoe UI',
-          Segoe, Helvetica, Arial, monospace;
-      }
-
-      .logo {
-        margin-right: 4%;
-        height: 48px;
-        height: 10vw;
-        height: clamp(32px, 10vw, 64px);
-      }
-
-      .not-found {
-        width: 80%;
-        max-width: 720px;
-      }
-
-      .text {
-        font-size: 44px;
-        font-size: 8vw;
-        font-size: clamp(32px, 8vw, 60px);
-        line-height: 0.75;
-      }
-
-      h1 {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0;
-        width: 100%;
-        white-space: nowrap;
-      }
-
-      p {
-        margin-top: 0.5em;
-        margin-bottom: 0;
-        font-size: 18px;
-        font-size: 4vw;
-        font-size: clamp(14px, 4vw, 22px);
-      }
-
-      a {
-        color: #9933ff;
-        text-decoration: none;
-        cursor: pointer;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          background-color: #222222;
-        }
       }
     </style>
   </head>
   <body>
-    <div style="flex: 3"></div>
-    <div style="text-align: right">
+    <header>
       <h1>
         <img alt="logo" class="logo" src="/.best-shot/logo.svg" />
-        <span class="text">BEST SHOT</span>
+        BEST SHOT
       </h1>
       <p>Page not found</p>
       [? if (publicPath) { ?]
@@ -104,10 +34,7 @@
         </a>
       </p>
       [? } ?]
-    </div>
-    <div style="flex: 2"></div>
+    </header>
     <img alt="404" class="not-found" src="/.best-shot/404.svg" />
-
-    <div style="flex: 8"></div>
   </body>
 </html>

package/middleware/not-found/index.mjs

@@ -11,13 +11,6 @@ const router = Router({ strict: true });
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-router.get(
-  '/.best-shot/:name(404.svg|logo.svg|logo.png)',
-  ({ params: { name } }, res) => {
-    res.sendFile(name, { root: __dirname });
-  },
-);
-
 router.use(({ method, url }, res, next) => {
   if (method !== 'GET' || isRaw(url)) {
     res.status(404).type('text').end();

package/middleware/static-file/404.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.289 55.546">
+  <path
+    fill="#eaebf2"
+    d="m216.823-.012-33.578 6.965 5.456 2.98Zm-14.399 17.011-9.176-4.677 23.58-12.335Z"
+  />
+  <path
+    fill="#ddddea"
+    d="m216.823-.012-28.122 9.945 3.254 7.599 1.293-5.206Z"
+  />
+  <path fill="#c2c2d3" d="m193.248 12.326-1.293 5.206 5.484-3.13Z" />
+  <path
+    fill="none"
+    stroke="#ddd"
+    stroke-dasharray="3 2 3 2"
+    stroke-linejoin="bevel"
+    stroke-miterlimit="10"
+    d="M.174 40.82a101.3 101.3 0 0 0 33.189 5.384c17.724-.348 40.835-7.472 53.346-10.947s20.852-5.56 35.1-5.56 38.228 7.124 37.186 15.813-10.6 7.993-12.511 1.911 5.213-8.862 5.213-8.862 23.458-7.646 36.317-16.855"
+  />
+  <path
+    fill="#3bf"
+    d="m100.029 46.782 12.269-28.607h3.77l-11.963 28.298h19.424v3.316h-23.5Zm16.516-13.237h3.493v22h-3.493Z"
+  />
+  <path
+    fill="#93f"
+    d="M85.231 55.546q-5.127 0-7.778-2.739t-2.649-7.641V28.554q0-4.926 2.664-7.653t7.766-2.727q5.127 0 7.778 2.714t2.651 7.665v16.613q0 4.926-2.664 7.653t-7.768 2.727Zm0-3.368q3.493 0 5.152-1.822a7.442 7.442 0 0 0 1.659-5.19V28.554a7.433 7.433 0 0 0-1.659-5.2q-1.659-1.81-5.152-1.81t-5.152 1.81a7.433 7.433 0 0 0-1.659 5.2v16.612a7.442 7.442 0 0 0 1.659 5.19q1.659 1.822 5.152 1.822Z"
+  />
+  <path
+    fill="#f46"
+    d="m46.843 46.782 12.269-28.607h3.77L50.919 46.473h19.424v3.316h-23.5Zm16.516-13.237h3.493v22h-3.493Z"
+  />
+</svg>

package/middleware/static-file/index.mjs

@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import { Router } from 'express';
+
+const router = Router({ strict: true });
+
+export function staticFile() {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
+  router.get(
+    '/.best-shot/:name(404.svg|logo.svg|logo.png|style.css)',
+    ({ params: { name } }, res) => {
+      res.sendFile(name, { root: __dirname });
+    },
+  );
+
+  return router;
+}

package/middleware/static-file/logo.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <path fill="#3bf" d="m50 100-8.04-8.04L79.8 29.8 100 50z" />
+  <path fill="#93f" d="M23.57 73.57 0 50l16.6-16.59 41.07 2.62-34.1 37.54z" />
+  <path fill="#f46" d="M23.79 26.2 50 0l21.16 21.16z" />
+</svg>

package/middleware/static-file/style.css

@@ -0,0 +1,89 @@
+html {
+  background-color: white;
+  min-width: 300px;
+  user-select: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: #222222;
+  }
+}
+
+img {
+  pointer-events: none;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #888888;
+  font-family: -apple-system, BlinkMacSystemFont, roboto, 'Segoe UI', Segoe,
+    Helvetica, Arial, monospace;
+}
+
+.logo {
+  margin-right: 8px;
+  width: calc(32px + 1vw);
+  height: calc(32px + 1vw);
+}
+
+header {
+  padding-top: 10vh;
+  text-align: right;
+}
+
+h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0;
+  margin-bottom: 20px;
+  width: 100%;
+  white-space: nowrap;
+  font-size: calc(32px + 1vw);
+  line-height: 1;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-size: calc(18px + 0.25vw);
+}
+
+.not-found {
+  margin-top: 150px;
+  margin-bottom: 150px;
+  width: 60%;
+  max-width: 400px;
+}
+
+a {
+  color: #9933ff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+progress {
+  margin-top: 10px;
+  border: none;
+  border-radius: 12px;
+  width: 60%;
+  height: 24px;
+}
+
+progress::-webkit-progress-bar {
+  border-radius: 12px;
+  background-color: #eeeeee;
+}
+
+progress::-webkit-progress-value {
+  border-radius: 12px;
+  background-color: #9933ff;
+}
+
+progress::-moz-progress-bar {
+  border-radius: 12px;
+  background-color: #9933ff;
+}

package/middleware/wait-page/index.mjs

@@ -1,3 +1,5 @@
+import { readFileSync } from 'fs';
+
 import webpackDevServerWaitpage from 'webpack-dev-server-waitpage';
 
 import { isRaw } from '../../lib/utils.mjs';
@@ -7,9 +9,13 @@ export function apply(compiler) {
 }
 
 export function middleware(server) {
-  return webpackDevServerWaitpage(server, {
-    title: 'Bundling...',
+  const template = readFileSync(
+    new URL('template.ejs', import.meta.url),
+    'utf8',
+  );
 
+  return webpackDevServerWaitpage(server, {
+    template,
     ignore: (req) => isRaw(req.url),
   });
 }

package/middleware/wait-page/template.ejs

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <meta content="webkit" name="renderer" />
+    <meta
+      content="width=device-width,initial-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover"
+      name="viewport"
+    />
+    <meta content="1" http-equiv="refresh" />
+    <title>Bundling...</title>
+    <link href="/.best-shot/logo.png" rel="shortcut icon" type="image/png" />
+    <link href="/.best-shot/style.css" rel="stylesheet" />
+    <style>
+      html {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>
+        <img alt="logo" class="logo" src="/.best-shot/logo.svg" />
+        BEST SHOT
+      </h1>
+      <p>Bundling...</p>
+    </header>
+    <br />
+    <br />
+    <br />
+    <br />
+    <% for (var i = 0 ; i < progress.length ; i++) { var percent =
+    Math.round(100 * progress[i][0]); %> <%= percent %> %
+    <progress max="100" value="<%= percent %>"></progress>
+    <br />
+    <p class="message"><%= progress[i][1] || '' %></p>
+    <p class="modules"><%= progress[i][2] || '' %></p>
+    <p class="active"><%= progress[i][3] || '' %></p>
+    <% for (var m = 4 ; m < progress[i].length; m++) { %>
+    <p class="last"><%= progress[i][m] || '' %></p>
+    <% } %> <% } %>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@best-shot/dev-server",
-  "version": "0.13.0",
+  "version": "0.13.4",
   "description": "DevServer support of `@best-shot/cli`",
   "license": "MIT",
   "author": {
@@ -31,18 +31,16 @@
   },
   "main": "index.mjs",
   "dependencies": {
-    "@best-shot/config": "^0.2.0",
+    "@best-shot/config": "^0.2.8",
     "chalk": "^4.1.2",
-    "connect-history-api-fallback": "^1.6.0",
     "ejs": "^3.1.6",
-    "express": "^4.17.1",
-    "launch-editor-middleware": "^2.2.1",
-    "lodash": "^4.17.21",
-    "webpack-dev-server": "^4.6.0",
+    "express": "^4.17.2",
+    "launch-editor-middleware": "^2.3.0",
+    "webpack-dev-server": "^4.7.3",
     "webpack-dev-server-waitpage": "^2.1.1"
   },
   "peerDependencies": {
-    "@best-shot/cli": "^0.12.0"
+    "@best-shot/cli": "^0.12.3"
   },
   "engines": {
     "node": "^14.17.0 || >=16.13.0"

package/middleware/not-found/404.svg

@@ -1,72 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361.29 118.5">
-  <defs>
-    <linearGradient
-      id="a"
-      x1=".49"
-      x2=".49"
-      y1="1"
-      y2="-.23"
-      gradientUnits="objectBoundingBox"
-    >
-      <stop offset="0" stop-color="#fff" stop-opacity="0" />
-      <stop offset=".5" stop-color="#f3f3f3" stop-opacity=".125" />
-      <stop offset="1" stop-color="#aa9" stop-opacity=".75" />
-    </linearGradient>
-  </defs>
-  <path
-    fill="url(#a)"
-    d="M219.14-365.3h-361.28c6.71-8.48 16.14-16.43 28.01-23.63a203.46 203.46 0 0141.4-18.57 316.21 316.21 0 0151.86-12.15A398.76 398.76 0 0138.5-424a398.76 398.76 0 0159.37 4.35 316.21 316.21 0 0151.85 12.15 203.46 203.46 0 0141.4 18.57c11.88 7.2 21.3 15.15 28.02 23.63z"
-    opacity=".5"
-    transform="translate(142.14 483.8)"
-  />
-  <path fill="#ddd" d="M180.9 80.1l-43.3 14.4V46.6l43.3-9.6z" />
-  <path fill="#eee" d="M180.9 80.1L224 94.5V46.6L180.9 37z" />
-  <path
-    fill="#aaa"
-    d="M180.55 81.6q-10.18 0-15.27-4.72t-5.08-12.75V36.58q0-8.19 5.14-12.83t15.2-4.64q10.13 0 15.24 4.61t5.12 12.86v27.55q0 8.19-5.15 12.83t-15.2 4.64zm0-8.49q5.26 0 7.6-2.4a9.02 9.02 0 002.34-6.58V36.58a9 9 0 00-2.34-6.62q-2.34-2.37-7.6-2.37t-7.6 2.37a9 9 0 00-2.34 6.61v27.56a9.02 9.02 0 002.33 6.59q2.35 2.4 7.6 2.4z"
-  />
-  <path fill="#bbb" d="M180.9 108.9l-43.3-14.4V46.6l43.3 14.3z" />
-  <path fill="#f2f3f8" d="M171.3 80.1L128 65.7l9.6-19.1 43.3 14.3z" />
-  <path
-    fill="#aaa"
-    d="M79 82.1l23.5-43.2h10.1L89.7 81.6H124v7.8H79v-7.3zm30.2-18.6h9.6v35.1h-9.6V63.5z"
-  />
-  <path
-    fill="#aaa"
-    d="M236.3 82.1l23.5-43.2h10.1L247 81.6h34.4v7.8h-45v-7.3zm30.2-18.6h9.6v35.1h-9.6z"
-  />
-  <path
-    fill="#999"
-    d="M148.3 83.4l-.1 1.5-4-1.4-.1 1.5 3.9 1.4v1.5l-4-1.4V88l4 1.4v1.5l-5.7-1.9.3-7.5z"
-  />
-  <path
-    fill="#999"
-    d="M153.9 90l1 3.2-1.8-.6-1-3.2-1.7-.6-.1 2.8-1.6-.6.2-7.5 5.2 1.8a1.17 1.17 0 01.6.6 1.65 1.65 0 01.2 1l-.2 3.5zm-3.4-2.6l2.8 1 .1-1.7-2.8-1-.1 1.7"
-  />
-  <path
-    fill="#999"
-    d="M161 92.5l1 3.2-1.8-.6-1-3.2-1.7-.6-.1 2.8-1.6-.6.2-7.5 5.2 1.8a1.17 1.17 0 01.6.6 1.65 1.65 0 01.2 1l-.2 3.5zm-3.4-2.7l2.8 1 .1-1.7-2.8-1-.1 1.7"
-  />
-  <path
-    fill="#999"
-    d="M169.2 91.8l-.2 6.3-6.1-2.1.2-7.5 5.2 1.8a1.17 1.17 0 01.6.6.76.76 0 01.3.9zm-4.6 3.3l2.8 1 .2-4.5-2.8-1-.2 4.5"
-  />
-  <path
-    fill="#999"
-    d="M175.1 97.2l1 3.2-1.8-.6-1-3.2-1.7-.6-.1 2.8-1.6-.6.2-7.5 5.2 1.8a1.17 1.17 0 01.6.6 1.65 1.65 0 01.2 1l-.2 3.5zm-3.4-2.6l2.8 1 .1-1.7-2.8-1-.1 1.7"
-  />
-  <path fill="#ddd" d="M180.9 108.9L224 94.5V46.6l-43.1 14.3z" />
-  <path fill="#fafafa" d="M190.5 80.1l43.1-14.4-9.6-19.1-43.1 14.3z" />
-  <path fill="#eaebf2" d="M288.24 0l-34.6 1.1 4.9 4.2z" />
-  <path fill="#eaebf2" d="M270.94 15.4l-8.3-6.7 25.6-8.7z" />
-  <path fill="#ddddea" d="M288.24 0l-29.7 5.3 1.9 8.7 2.2-5.3z" />
-  <path fill="#c2c2d3" d="M262.64 8.7l-2.2 5.3 6-2.3z" />
-  <path
-    fill="none"
-    stroke="#ddd"
-    stroke-dasharray="2 2 2 2"
-    stroke-linecap="round"
-    stroke-miterlimit="10"
-    d="M233.64 15.7s-5.8 17.9-17.5 13.7a3.1 3.1 0 01.9-6c2.9-.2 7.3.1 13.7 1 23.1 3.3 26.7-7.4 26.7-7.4"
-  />
-</svg>

package/middleware/not-found/logo.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path fill="#3bf" d="M50 100l-8.04-8.04L79.8 29.8 100 50z" />
-  <path fill="#93f" d="M23.57 73.57L0 50l16.6-16.59 41.07 2.62-34.1 37.54z" />
-  <path fill="#f46" d="M23.79 26.2L50 0l21.16 21.16z" />
-</svg>