@best-shot/dev-server 0.12.4 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +12 -7
  2. package/lib/action.mjs +7 -4
  3. package/lib/server.mjs +24 -21
  4. package/middleware/not-found/404.html +16 -10
  5. package/middleware/not-found/404.svg +2 -2
  6. package/middleware/not-found/index.mjs +3 -2
  7. package/package.json +7 -12
package/README.md CHANGED
@@ -14,7 +14,7 @@ DevServer support of `@best-shot/cli`.
14
14
 
15
15
  ## Features
16
16
 
17
- - All Features of webpack-dev-server@4
17
+ - All Features of [webpack-dev-server@4](https://webpack.js.org/configuration/dev-server/)
18
18
  - Hook `historyApiFallback` into `devMiddleware.publicPath`
19
19
  - Show a wait page when bundling
20
20
  - Provide a 404 page
@@ -35,17 +35,22 @@ npx --no-install best-shot serve [options]
35
35
  ```mjs
36
36
  // example: .best-shot/config.mjs
37
37
  export default {
38
- presets: [
39
- // without this will fallback to `watch` mode
40
- 'serve'
41
- ],
38
+ experiments: {
39
+ lazyCompilation: false // true by default
40
+ },
42
41
  devServer: {
43
- // ...
42
+ // without this will fallback to `watch` mode
44
43
  }
45
44
  };
46
45
  ```
47
46
 
47
+ ## Tips
48
+
49
+ ### Difference with webpack-dev-server
50
+
51
+ - `options.static` is `false` by default.
52
+ - `options.hot` is `only` by default.
53
+
48
54
  ## Related
49
55
 
50
- - [@best-shot/preset-serve](../preset-serve)
51
56
  - [@best-shot/cli](../cli)
package/lib/action.mjs CHANGED
@@ -15,12 +15,15 @@ export function action({ _: [command] }) {
15
15
 
16
16
  const configs = await readConfig()({ command });
17
17
 
18
- const result = configs.map((config) =>
19
- createConfig(config, {
18
+ const result = [];
19
+ for (const config of configs) {
20
+ const io = await createConfig(config, {
20
21
  watch: true,
22
+ serve: Boolean(config.devServer),
21
23
  command,
22
- }),
23
- );
24
+ });
25
+ result.push(io);
26
+ }
24
27
 
25
28
  const shouldServe = [];
26
29
  const shouldWatch = [];
package/lib/server.mjs CHANGED
@@ -6,25 +6,16 @@ import WebpackDevServer from 'webpack-dev-server';
6
6
  import { notFound } from '../middleware/not-found/index.mjs';
7
7
  import * as waitPage from '../middleware/wait-page/index.mjs';
8
8
 
9
- function handleAuto(publicPath) {
10
- return publicPath === 'auto' ? '/' : publicPath;
11
- }
12
-
13
9
  class BestShotDevServer extends WebpackDevServer {
14
- // https://github.com/webpack/webpack-dev-server/blob/fd2a4e3ea78d877e9a4a7cdf343ef71e55f0cc57/lib/Server.js#L846
10
+ // https://github.com/webpack/webpack-dev-server/blob/79a169baa3eeaf71df068de5d9c6150684dfe35f/lib/Server.js#L1556
15
11
  setupHistoryApiFallbackFeature() {
16
- const requireLazy = createRequire(import.meta.url);
17
- const historyApiFallback = requireLazy('connect-history-api-fallback');
12
+ const { historyApiFallback } = this.options;
18
13
 
19
- const options =
20
- typeof this.options.historyApiFallback !== 'boolean'
21
- ? this.options.historyApiFallback
22
- : {};
23
-
24
- let logger;
25
-
26
- if (typeof options.verbose === 'undefined') {
27
- logger = this.logger.log.bind(
14
+ if (
15
+ typeof historyApiFallback.logger === 'undefined' &&
16
+ !historyApiFallback.verbose
17
+ ) {
18
+ historyApiFallback.logger = this.logger.log.bind(
28
19
  this.logger,
29
20
  '[connect-history-api-fallback]',
30
21
  );
@@ -36,10 +27,15 @@ class BestShotDevServer extends WebpackDevServer {
36
27
  } = {},
37
28
  } = this.options;
38
29
 
30
+ const requireLazy = createRequire(import.meta.url);
31
+ const connectHistoryApiFallback = requireLazy(
32
+ 'connect-history-api-fallback',
33
+ );
34
+
39
35
  if (publicPath.startsWith('/')) {
40
- this.app.use(publicPath, historyApiFallback({ logger, ...options }));
36
+ this.app.use(publicPath, connectHistoryApiFallback(historyApiFallback));
41
37
  } else {
42
- this.app.use(historyApiFallback({ logger, ...options }));
38
+ this.app.use(connectHistoryApiFallback(historyApiFallback));
43
39
  }
44
40
  }
45
41
  }
@@ -52,9 +48,16 @@ export function DevServer(
52
48
 
53
49
  process.env.WEBPACK_DEV_SERVER_BASE_PORT = 1234;
54
50
 
55
- const publicPath = handleAuto(
56
- options.publicPath || compiler.options.output.publicPath,
57
- );
51
+ const publicPath = options.publicPath || compiler.options.output.publicPath;
52
+
53
+ /* eslint-disable no-param-reassign */
54
+ if (options.hot === undefined) {
55
+ options.hot = 'only';
56
+ }
57
+ if (options.static === undefined) {
58
+ options.static = false;
59
+ }
60
+ /* eslint-enable no-param-reassign */
58
61
 
59
62
  const Server = new BestShotDevServer(
60
63
  {
package/middleware/not-found/404.html CHANGED
@@ -2,20 +2,19 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="renderer" content="webkit" />
5
+ <meta content="IE=edge" http-equiv="X-UA-Compatible" />
6
+ <meta content="webkit" name="renderer" />
7
7
  <meta
8
- name="viewport"
9
8
  content="width=device-width,initial-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover"
9
+ name="viewport"
10
10
  />
11
11
  <title>Page not found</title>
12
- <link type="image/png" href="/.best-shot/logo.png" rel="shortcut icon" />
12
+ <link href="/.best-shot/logo.png" rel="shortcut icon" type="image/png" />
13
13
  <style>
14
14
  html {
15
15
  min-width: 300px;
16
16
  height: 100%;
17
17
  min-height: 300px;
18
- /* stylelint-disable property-no-vendor-prefix */
19
18
  -webkit-user-select: none;
20
19
  -moz-user-select: none;
21
20
  -ms-user-select: none;
@@ -33,8 +32,9 @@
33
32
  align-items: center;
34
33
  justify-content: center;
35
34
  margin: 0;
35
+ background-color: white;
36
36
  height: 100%;
37
- color: #999;
37
+ color: #999999;
38
38
  font-family: -apple-system, BlinkMacSystemFont, roboto, 'Segoe UI',
39
39
  Segoe, Helvetica, Arial, monospace;
40
40
  }
@@ -76,31 +76,37 @@
76
76
  }
77
77
 
78
78
  a {
79
- color: #93f;
79
+ color: #9933ff;
80
80
  text-decoration: none;
81
81
  cursor: pointer;
82
82
  }
83
+
84
+ @media (prefers-color-scheme: dark) {
85
+ body {
86
+ background-color: #222222;
87
+ }
88
+ }
83
89
  </style>
84
90
  </head>
85
91
  <body>
86
92
  <div style="flex: 3"></div>
87
93
  <div style="text-align: right">
88
94
  <h1>
89
- <img src="/.best-shot/logo.svg" alt="logo" class="logo" />
95
+ <img alt="logo" class="logo" src="/.best-shot/logo.svg" />
90
96
  <span class="text">BEST SHOT</span>
91
97
  </h1>
92
98
  <p>Page not found</p>
93
99
  [? if (publicPath) { ?]
94
100
  <p>
95
101
  Back to
96
- <a rel="noopener noreferrer" href="[?= publicPath ?]">
102
+ <a href="[?= publicPath ?]" rel="noopener noreferrer">
97
103
  [?= publicPath ?]
98
104
  </a>
99
105
  </p>
100
106
  [? } ?]
101
107
  </div>
102
108
  <div style="flex: 2"></div>
103
- <img src="/.best-shot/404.svg" alt="404" class="not-found" />
109
+ <img alt="404" class="not-found" src="/.best-shot/404.svg" />
104
110
 
105
111
  <div style="flex: 8"></div>
106
112
  </body>
package/middleware/not-found/404.svg CHANGED
@@ -9,8 +9,8 @@
9
9
  gradientUnits="objectBoundingBox"
10
10
  >
11
11
  <stop offset="0" stop-color="#fff" stop-opacity="0" />
12
- <stop offset=".4" stop-color="#f3f3f3" stop-opacity=".25" />
13
- <stop offset="1" stop-color="#aa9" />
12
+ <stop offset=".5" stop-color="#f3f3f3" stop-opacity=".125" />
13
+ <stop offset="1" stop-color="#aa9" stop-opacity=".75" />
14
14
  </linearGradient>
15
15
  </defs>
16
16
  <path
package/middleware/not-found/index.mjs CHANGED
@@ -1,9 +1,10 @@
1
- import { compile } from 'ejs';
2
- import { Router } from 'express';
3
1
  import { readFileSync } from 'fs';
4
2
  import { dirname, resolve } from 'path';
5
3
  import { fileURLToPath } from 'url';
6
4
 
5
+ import { compile } from 'ejs';
6
+ import { Router } from 'express';
7
+
7
8
  import { isRaw } from '../../lib/utils.mjs';
8
9
 
9
10
  const router = Router({ strict: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@best-shot/dev-server",
3
- "version": "0.12.4",
3
+ "version": "0.13.1",
4
4
  "description": "DevServer support of `@best-shot/cli`",
5
5
  "license": "MIT",
6
6
  "author": {
@@ -30,29 +30,24 @@
30
30
  "url": "https://github.com/best-shot/best-shot/issues"
31
31
  },
32
32
  "main": "index.mjs",
33
- "exports": {
34
- ".": "./index.mjs",
35
- "./": "./"
36
- },
37
33
  "dependencies": {
38
- "@best-shot/config": "^0.1.1",
39
- "@best-shot/preset-serve": "^0.7.3",
34
+ "@best-shot/config": "^0.2.4",
40
35
  "chalk": "^4.1.2",
41
36
  "connect-history-api-fallback": "^1.6.0",
42
37
  "ejs": "^3.1.6",
43
- "express": "^4.17.1",
38
+ "express": "^4.17.2",
44
39
  "launch-editor-middleware": "^2.2.1",
45
40
  "lodash": "^4.17.21",
46
- "webpack-dev-server": "^4.4.0",
41
+ "webpack-dev-server": "^4.6.0",
47
42
  "webpack-dev-server-waitpage": "^2.1.1"
48
43
  },
49
44
  "peerDependencies": {
50
- "@best-shot/cli": "^0.11.1"
45
+ "@best-shot/cli": "^0.12.2"
51
46
  },
52
47
  "engines": {
53
- "node": "^12.22.0 || ^14.17.0 || >=16.13.0"
48
+ "node": "^14.17.0 || >=16.13.0"
54
49
  },
55
50
  "x-readme": {
56
51
  "logo": "https://cdn.jsdelivr.net/gh/best-shot/best-shot/packages/core/logo.svg"
57
52
  }
58
- }
53
+ }