mockaton 10.6.5 → 10.6.7

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.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "mockaton",
3
3
  "description": "HTTP Mock Server",
4
4
  "type": "module",
5
- "version": "10.6.5",
5
+ "version": "10.6.7",
6
6
  "main": "index.js",
7
7
  "types": "index.d.ts",
8
8
  "license": "MIT",
package/src/Api.js CHANGED
@@ -21,7 +21,7 @@ export const apiGetRequests = new Map([
21
21
  ...[
22
22
  'Dashboard.css',
23
23
  'Dashboard.js',
24
- 'ApiConstants.js', 'ApiCommander.js', 'Filename.js',
24
+ 'ApiConstants.js', 'ApiCommander.js', 'Filename.js', 'DashboardStore.js', 'DashboardDom.js',
25
25
  'Logo.svg'
26
26
  ].map(f => [API.dashboard + '/' + f, serveStatic(f)]),
27
27
 
@@ -107,7 +107,7 @@ async function selectCookie(req, response) {
107
107
  if (error)
108
108
  sendUnprocessableContent(response, error?.message || error)
109
109
  else
110
- sendOK(response)
110
+ sendJSON(response, cookie.list())
111
111
  }
112
112
 
113
113
  async function selectMock(req, response) {
@@ -4,31 +4,25 @@ import { API, DF, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
4
4
  /** Client for controlling Mockaton via its HTTP API */
5
5
  export class Commander {
6
6
  #addr = ''
7
- #then = a => a
8
- #catch = e => { throw e }
9
7
 
10
- constructor(addr, _then = undefined, _catch = undefined) {
8
+ constructor(addr) {
11
9
  this.#addr = addr
12
- if (_then) this.#then = _then
13
- if (_catch) this.#catch = _catch
14
10
  }
15
11
 
16
- #patch(api, body) {
12
+ #patch = (api, body) => {
17
13
  return fetch(this.#addr + api, {
18
14
  method: 'PATCH',
19
15
  body: JSON.stringify(body)
20
16
  })
21
- .then(this.#then)
22
- .catch(this.#catch)
23
17
  }
24
18
 
25
19
  /** @returns {JsonPromise<State>} */
26
- getState() {
20
+ getState = () => {
27
21
  return fetch(this.#addr + API.state)
28
22
  }
29
23
 
30
24
  /** @returns {JsonPromise<number>} */
31
- getSyncVersion(currentSyncVersion, abortSignal) {
25
+ getSyncVersion = (currentSyncVersion, abortSignal) => {
32
26
  return fetch(this.#addr + API.syncVersion, {
33
27
  signal: AbortSignal.any([abortSignal, AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)]),
34
28
  headers: {
@@ -30,7 +30,7 @@ export const DF = { // Dashboard Fields (XHR)
30
30
 
31
31
  // TODO @ThinkAbout these affecting partial matches when bulk-selecting
32
32
  // e.g. 'ton' would match
33
- export const AUTOGENERATED_500_COMMENT = '(Mockaton 500)'
33
+ export const AUTO_500_COMMENT = '(Mockaton 500)'
34
34
  export const DEFAULT_MOCK_COMMENT = '(default)'
35
35
 
36
36
  export const EXT_FOR_UNKNOWN_MIME = 'unknown'
package/src/Dashboard.css CHANGED
@@ -20,23 +20,14 @@
20
20
  --colorLightRed: #ffe4ee;
21
21
  --colorRed: #da0f00;
22
22
  --colorText: #000;
23
- }
24
- .syntaxPunc {
25
- color: var(--colorSecondaryAction);
26
- }
27
- .syntaxKey, .syntaxTag {
28
- color: #ed206a
29
- }
30
- .syntaxVal, .syntaxAttr {
31
- color: #9b71e8
32
- }
33
- .syntaxStr, .syntaxAttrVal {
34
- color: #388E3C
23
+ --colorPink: #ed206a;
24
+ --colorPurple: #9b71e8;
25
+ --colorGreen: #388e3c;
35
26
  }
36
27
  }
37
28
  @media (prefers-color-scheme: dark) {
38
29
  :root {
39
- --color4xxBackground: #403630;
30
+ --color4xxBackground: #68554a;
40
31
  --colorAccent: #2495ff;
41
32
  --colorBackground: #181818;
42
33
  --colorHeaderBackground: #111;
@@ -51,18 +42,9 @@
51
42
  --colorLightRed: #ffe4ee;
52
43
  --colorRed: #f41606;
53
44
  --colorText: #fff;
54
- }
55
- .syntaxPunc {
56
- color: var(--colorSecondaryAction);
57
- }
58
- .syntaxKey, .syntaxTag {
59
- color: #f92672
60
- }
61
- .syntaxVal, .syntaxAttr {
62
- color: #ae81ff
63
- }
64
- .syntaxStr, .syntaxAttrVal {
65
- color: #a6e22e
45
+ --colorPink: #f92672;
46
+ --colorPurple: #ae81ff;
47
+ --colorGreen: #a6e22e;
66
48
  }
67
49
  }
68
50
 
@@ -95,6 +77,8 @@ body {
95
77
  }
96
78
 
97
79
  select, a, input, button {
80
+ cursor: pointer;
81
+
98
82
  &:focus-visible {
99
83
  outline: 2px solid var(--colorAccent);
100
84
  }
@@ -104,15 +88,10 @@ a {
104
88
  text-decoration: none;
105
89
  }
106
90
 
107
- a,
108
- button,
109
- input[type=checkbox],
110
- input[type=checkbox] + svg {
111
- cursor: pointer;
112
-
113
- &:active {
114
- cursor: grabbing;
115
- }
91
+ a:active,
92
+ button:active,
93
+ input[type=checkbox]:active {
94
+ cursor: grabbing;
116
95
  }
117
96
 
118
97
  select {
@@ -270,8 +249,11 @@ header {
270
249
  margin-left: 4px;
271
250
  outline-offset: 1px;
272
251
  background: transparent;
273
- color: var(--colorRed);
274
252
  border-radius: 50px;
253
+ color: var(--colorRed);
254
+ @media (prefers-color-scheme: dark) {
255
+ color: var(--colorLightRed);
256
+ }
275
257
 
276
258
  &:hover {
277
259
  background: var(--colorRed);
@@ -343,7 +325,7 @@ main {
343
325
  }
344
326
 
345
327
  .leftSide {
346
- /* the width is set in js (it’s resizable) */
328
+ width: 50%; /* resizable in js */
347
329
  padding: 16px;
348
330
  border-right: 1px solid var(--colorSecondaryActionBorder);
349
331
  user-select: none;
@@ -389,10 +371,6 @@ table {
389
371
  }
390
372
  }
391
373
 
392
- .empty {
393
- margin-top: 80px;
394
- }
395
-
396
374
  .Method {
397
375
  padding-right: 8px;
398
376
  color: var(--colorSecondaryAction);
@@ -419,6 +397,10 @@ table {
419
397
  color: white;
420
398
  background: var(--colorAccent);
421
399
  }
400
+ .dittoDir {
401
+ opacity: 0.9;
402
+ filter: saturate(0.1);
403
+ }
422
404
  }
423
405
 
424
406
 
@@ -467,7 +449,6 @@ table {
467
449
  }
468
450
 
469
451
  > svg {
470
- vertical-align: bottom;
471
452
  fill: none;
472
453
  stroke: var(--colorSecondaryAction);
473
454
  }
@@ -582,6 +563,9 @@ table {
582
563
  border-color: var(--colorRed);
583
564
  color: var(--colorRed);
584
565
  }
566
+ &:active {
567
+ cursor: grabbing;
568
+ }
585
569
  }
586
570
  }
587
571
 
@@ -592,25 +576,38 @@ table {
592
576
  flex-direction: column;
593
577
  padding-top: 16px;
594
578
 
595
- h2 {
579
+ > h2 {
596
580
  padding-bottom: 4px;
597
581
  padding-left: 16px;
598
582
  }
599
583
 
600
- pre {
584
+ > pre {
601
585
  overflow: auto;
602
586
  height: 100%;
603
587
  padding: 16px;
604
588
  padding-top: 12px;
605
589
  font-family: monospace;
606
590
 
607
- code {
591
+ > code {
608
592
  white-space: pre;
609
593
  tab-size: 2;
610
594
 
611
- .json {
595
+ > .json {
612
596
  color: var(--colorSecondaryAction);
613
597
  }
598
+
599
+ .syntaxPunc {
600
+ color: var(--colorSecondaryAction);
601
+ }
602
+ .syntaxKey, .syntaxTag {
603
+ color: var(--colorPink);
604
+ }
605
+ .syntaxVal, .syntaxAttr {
606
+ color: var(--colorPurple);
607
+ }
608
+ .syntaxStr, .syntaxAttrVal {
609
+ color: var(--colorGreen);
610
+ }
614
611
  }
615
612
  }
616
613
  }
@@ -640,13 +637,6 @@ table {
640
637
  }
641
638
  }
642
639
 
643
- .red {
644
- color: var(--colorRed);
645
- }
646
-
647
- .dittoDir {
648
- opacity: 0.6;
649
- }
650
640
 
651
641
  .ErrorToast {
652
642
  position: fixed;