@best-shot/dev-server 0.13.3 → 0.13.6

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 (6) hide show
  1. package/README.md +2 -2
  2. package/middleware/not-found/404.html +1 -74
  3. package/middleware/static-file/index.mjs +1 -1
  4. package/middleware/static-file/style.css +89 -0
  5. package/middleware/wait-page/template.ejs +6 -87
  6. package/package.json +13 -11
package/README.md CHANGED
@@ -15,9 +15,9 @@ DevServer support of `@best-shot/cli`.
15
15
  ## Features
16
16
 
17
17
  - All Features of [webpack-dev-server@4](https://webpack.js.org/configuration/dev-server/)
18
- - Hook `historyApiFallback` into `devMiddleware.publicPath`
18
+ - Hook `historyApiFallback` into `publicPath`
19
19
  - Show a wait page when bundling
20
- - Provide a 404 page
20
+ - Provide a 404 error page
21
21
  - Open source file in vscode (from vue-devtools)
22
22
 
23
23
  ## Installation
package/middleware/not-found/404.html CHANGED
@@ -10,85 +10,12 @@
10
10
  />
11
11
  <title>Page not found</title>
12
12
  <link href="/.best-shot/logo.png" rel="shortcut icon" type="image/png" />
13
+ <link href="/.best-shot/style.css" rel="stylesheet" />
13
14
  <style>
14
15
  html {
15
- min-width: 300px;
16
- height: 100%;
17
- min-height: 300px;
18
16
  -webkit-user-select: none;
19
17
  -moz-user-select: none;
20
18
  -ms-user-select: none;
21
- user-select: none;
22
- }
23
-
24
- img {
25
- pointer-events: none;
26
- }
27
-
28
- body {
29
- display: flex;
30
- flex-direction: column;
31
- align-items: center;
32
- margin: 0;
33
- background-color: white;
34
- height: 100%;
35
- color: #999999;
36
- font-family: -apple-system, BlinkMacSystemFont, roboto, 'Segoe UI',
37
- Segoe, Helvetica, Arial, monospace;
38
- }
39
-
40
- .logo {
41
- margin-right: 4%;
42
- width: 10vw;
43
- max-width: 54px;
44
- height: 10vw;
45
- max-height: 54px;
46
- }
47
-
48
- header {
49
- margin-bottom: 20vh;
50
- padding-top: 100px;
51
- text-align: right;
52
- }
53
-
54
- h1 {
55
- display: flex;
56
- align-items: center;
57
- justify-content: center;
58
- margin: 0;
59
- width: 100%;
60
- white-space: nowrap;
61
- font-size: 44px;
62
- font-size: 8vw;
63
- font-size: clamp(32px, 8vw, 60px);
64
- line-height: 1;
65
- }
66
-
67
- p {
68
- margin-top: 0.5em;
69
- margin-bottom: 0;
70
- white-space: nowrap;
71
- font-size: 18px;
72
- font-size: 4vw;
73
- font-size: clamp(14px, 4vw, 22px);
74
- }
75
-
76
- .not-found {
77
- margin-bottom: 20vh;
78
- width: 60%;
79
- max-width: 400px;
80
- }
81
-
82
- a {
83
- color: #9933ff;
84
- text-decoration: none;
85
- cursor: pointer;
86
- }
87
-
88
- @media (prefers-color-scheme: dark) {
89
- body {
90
- background-color: #222222;
91
- }
92
19
  }
93
20
  </style>
94
21
  </head>
package/middleware/static-file/index.mjs CHANGED
@@ -9,7 +9,7 @@ export function staticFile() {
9
9
  const __dirname = dirname(fileURLToPath(import.meta.url));
10
10
 
11
11
  router.get(
12
- '/.best-shot/:name(404.svg|logo.svg|logo.png)',
12
+ '/.best-shot/:name(404.svg|logo.svg|logo.png|style.css)',
13
13
  ({ params: { name } }, res) => {
14
14
  res.sendFile(name, { root: __dirname });
15
15
  },
package/middleware/static-file/style.css ADDED
@@ -0,0 +1,89 @@
1
+ html {
2
+ background-color: white;
3
+ min-width: 300px;
4
+ user-select: none;
5
+ }
6
+
7
+ @media (prefers-color-scheme: dark) {
8
+ html {
9
+ background-color: #222222;
10
+ }
11
+ }
12
+
13
+ img {
14
+ pointer-events: none;
15
+ }
16
+
17
+ body {
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ color: #888888;
22
+ font-family: -apple-system, BlinkMacSystemFont, roboto, 'Segoe UI', Segoe,
23
+ Helvetica, Arial, monospace;
24
+ }
25
+
26
+ .logo {
27
+ margin-right: 8px;
28
+ width: calc(32px + 1vw);
29
+ height: calc(32px + 1vw);
30
+ }
31
+
32
+ header {
33
+ padding-top: 10vh;
34
+ text-align: right;
35
+ }
36
+
37
+ h1 {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ margin-top: 0;
42
+ margin-bottom: 20px;
43
+ width: 100%;
44
+ white-space: nowrap;
45
+ font-size: calc(32px + 1vw);
46
+ line-height: 1;
47
+ }
48
+
49
+ p {
50
+ margin-top: 0;
51
+ margin-bottom: 0.5em;
52
+ font-size: calc(18px + 0.25vw);
53
+ }
54
+
55
+ .not-found {
56
+ margin-top: 150px;
57
+ margin-bottom: 150px;
58
+ width: 60%;
59
+ max-width: 400px;
60
+ }
61
+
62
+ a {
63
+ color: #9933ff;
64
+ text-decoration: none;
65
+ cursor: pointer;
66
+ }
67
+
68
+ progress {
69
+ margin-top: 10px;
70
+ border: none;
71
+ border-radius: 12px;
72
+ width: 60%;
73
+ height: 24px;
74
+ }
75
+
76
+ progress::-webkit-progress-bar {
77
+ border-radius: 12px;
78
+ background-color: #eeeeee;
79
+ }
80
+
81
+ progress::-webkit-progress-value {
82
+ border-radius: 12px;
83
+ background-color: #9933ff;
84
+ }
85
+
86
+ progress::-moz-progress-bar {
87
+ border-radius: 12px;
88
+ background-color: #9933ff;
89
+ }
package/middleware/wait-page/template.ejs CHANGED
@@ -11,96 +11,12 @@
11
11
  <meta content="1" http-equiv="refresh" />
12
12
  <title>Bundling...</title>
13
13
  <link href="/.best-shot/logo.png" rel="shortcut icon" type="image/png" />
14
+ <link href="/.best-shot/style.css" rel="stylesheet" />
14
15
  <style>
15
16
  html {
16
- min-width: 300px;
17
- height: 100%;
18
- min-height: 300px;
19
17
  -webkit-user-select: none;
20
18
  -moz-user-select: none;
21
19
  -ms-user-select: none;
22
- user-select: none;
23
- }
24
-
25
- img {
26
- pointer-events: none;
27
- }
28
-
29
- body {
30
- display: flex;
31
- flex-direction: column;
32
- align-items: center;
33
- margin: 0;
34
- background-color: white;
35
- height: 100%;
36
- color: #999999;
37
- font-family: -apple-system, BlinkMacSystemFont, roboto, 'Segoe UI',
38
- Segoe, Helvetica, Arial, monospace;
39
- }
40
-
41
- .logo {
42
- margin-right: 4%;
43
- width: 10vw;
44
- max-width: 54px;
45
- height: 10vw;
46
- max-height: 54px;
47
- }
48
-
49
- header {
50
- padding-top: 100px;
51
- margin-bottom: 20vh;
52
- text-align: right;
53
- }
54
-
55
- h1 {
56
- display: flex;
57
- align-items: center;
58
- justify-content: center;
59
- margin: 0;
60
- width: 100%;
61
- white-space: nowrap;
62
- font-size: 44px;
63
- font-size: 8vw;
64
- font-size: clamp(32px, 8vw, 60px);
65
- line-height: 1;
66
- }
67
-
68
- p {
69
- margin-top: 0.5em;
70
- margin-bottom: 0;
71
- white-space: nowrap;
72
- font-size: 18px;
73
- font-size: 4vw;
74
- font-size: clamp(14px, 4vw, 22px);
75
- }
76
-
77
- progress {
78
- border: none;
79
- margin-top: 10px;
80
- width: 60%;
81
- height: 24px;
82
- border-radius: 12px;
83
- }
84
-
85
- progress::-webkit-progress-bar {
86
- border-radius: 12px;
87
- background-color: #eee;
88
- }
89
-
90
- progress::-webkit-progress-value {
91
- border-radius: 12px;
92
- background-color: #93f;
93
- }
94
-
95
- progress::-moz-progress-bar {
96
- border-radius: 12px;
97
- background-color: #93f;
98
- }
99
-
100
- @media (prefers-color-scheme: dark) {
101
- body {
102
- background-color: #222222;
103
- }
104
20
  }
105
21
  </style>
106
22
  </head>
@@ -112,11 +28,14 @@
112
28
  </h1>
113
29
  <p>Bundling...</p>
114
30
  </header>
115
-
31
+ <br />
32
+ <br />
33
+ <br />
34
+ <br />
116
35
  <% for (var i = 0 ; i < progress.length ; i++) { var percent =
117
36
  Math.round(100 * progress[i][0]); %> <%= percent %> %
118
37
  <progress max="100" value="<%= percent %>"></progress>
119
-
38
+ <br />
120
39
  <p class="message"><%= progress[i][1] || '' %></p>
121
40
  <p class="modules"><%= progress[i][2] || '' %></p>
122
41
  <p class="active"><%= progress[i][3] || '' %></p>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@best-shot/dev-server",
3
- "version": "0.13.3",
3
+ "version": "0.13.6",
4
4
  "description": "DevServer support of `@best-shot/cli`",
5
5
  "license": "MIT",
6
6
  "author": {
@@ -31,21 +31,23 @@
31
31
  },
32
32
  "main": "index.mjs",
33
33
  "dependencies": {
34
- "@best-shot/config": "^0.2.8",
35
- "chalk": "^4.1.2",
36
- "connect-history-api-fallback": "^1.6.0",
37
- "ejs": "^3.1.6",
38
- "express": "^4.17.2",
39
- "launch-editor-middleware": "^2.3.0",
40
- "lodash": "^4.17.21",
41
- "webpack-dev-server": "^4.7.3",
34
+ "@best-shot/config": "^0.2.15",
35
+ "chalk": "^5.0.1",
36
+ "ejs": "^3.1.8",
37
+ "express": "^4.18.1",
38
+ "launch-editor-middleware": "^2.6.0",
39
+ "webpack-dev-server": "^4.10.1",
42
40
  "webpack-dev-server-waitpage": "^2.1.1"
43
41
  },
44
42
  "peerDependencies": {
45
- "@best-shot/cli": "^0.12.3"
43
+ "@best-shot/cli": "^0.12.7"
46
44
  },
47
45
  "engines": {
48
- "node": "^14.17.0 || >=16.13.0"
46
+ "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
47
+ },
48
+ "publishConfig": {
49
+ "access": "public",
50
+ "registry": "https://registry.npmjs.org/"
49
51
  },
50
52
  "x-readme": {
51
53
  "logo": "https://cdn.jsdelivr.net/gh/best-shot/best-shot/packages/core/logo.svg"