mockaton 10.6.4 → 10.6.6

package/index.d.ts

@@ -67,6 +67,7 @@ export type ClientMockBroker = {
 	currentMock: {
 		file: string
 		delayed: boolean
+		proxied: boolean
 	}
 }
 export type ClientBrokersByMethod = {

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.6.4",
+	"version": "10.6.6",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -21,7 +21,7 @@ export const apiGetRequests = new Map([
 	...[
 		'Dashboard.css',
 		'Dashboard.js',
-		'ApiConstants.js', 'ApiCommander.js', 'Filename.js',
+		'ApiConstants.js', 'ApiCommander.js', 'Filename.js', 'DashboardStore.js', 'DashboardDom.js',
 		'Logo.svg'
 	].map(f => [API.dashboard + '/' + f, serveStatic(f)]),
 
@@ -117,7 +117,7 @@ async function selectMock(req, response) {
 		sendUnprocessableContent(response, `Missing Mock: ${file}`)
 	else {
 		broker.selectFile(file)
-		sendOK(response)
+		sendJSON(response, broker.currentMock)
 	}
 }
 
@@ -130,7 +130,7 @@ async function toggle500(req, response) {
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeMethod]} ${body[DF.routeUrlMask]}`)
 	else {
 		broker.toggle500()
-		sendOK(response)
+		sendJSON(response, broker.currentMock)
 	}
 }
 
@@ -176,8 +176,6 @@ async function updateProxyFallback(req, response) {
 		sendUnprocessableContent(response, `Invalid Proxy Fallback URL`)
 		return
 	}
-	if (!fallback)
-		mockBrokersCollection.ensureAllRoutesHaveSelectedMock()
 	config.proxyFallback = fallback
 	sendOK(response)
 }

package/src/ApiCommander.js

@@ -4,24 +4,34 @@ import { API, DF, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 /** Client for controlling Mockaton via its HTTP API */
 export class Commander {
 	#addr = ''
+	#then = a => a
+	#catch = e => { throw e }
+
 	constructor(addr) {
 		this.#addr = addr
 	}
 
-	#patch(api, body) {
+	setupPatchCallbacks(_then = undefined, _catch = undefined) {
+		if (_then) this.#then = _then
+		if (_catch) this.#catch = _catch
+	}
+
+	#patch = (api, body) => {
 		return fetch(this.#addr + api, {
 			method: 'PATCH',
 			body: JSON.stringify(body)
 		})
+			.then(this.#then)
+			.catch(this.#catch)
 	}
 
 	/** @returns {JsonPromise<State>} */
-	getState() {
+	getState = () => {
 		return fetch(this.#addr + API.state)
 	}
 
 	/** @returns {JsonPromise<number>} */
-	getSyncVersion(currentSyncVersion, abortSignal) {
+	getSyncVersion = (currentSyncVersion, abortSignal) => {
 		return fetch(this.#addr + API.syncVersion, {
 			signal: AbortSignal.any([abortSignal, AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)]),
 			headers: {
@@ -42,7 +52,7 @@ export class Commander {
 	toggle500(routeMethod, routeUrlMask) {
 		return this.#patch(API.toggle500, {
 			[DF.routeMethod]: routeMethod,
-			[DF.routeUrlMask]: routeUrlMask,
+			[DF.routeUrlMask]: routeUrlMask
 		})
 	}
 

package/src/ApiConstants.js

@@ -30,7 +30,7 @@ export const DF = { // Dashboard Fields (XHR)
 
 // TODO @ThinkAbout these affecting partial matches when bulk-selecting
 // e.g. 'ton' would match 
-export const AUTOGENERATED_500_COMMENT = '(Mockaton 500)'
+export const AUTO_500_COMMENT = '(Mockaton 500)'
 export const DEFAULT_MOCK_COMMENT = '(default)'
 
 export const EXT_FOR_UNKNOWN_MIME = 'unknown'

package/src/Dashboard.css

@@ -20,23 +20,14 @@
 		--colorLightRed: #ffe4ee;
 		--colorRed: #da0f00;
 		--colorText: #000;
-	}
-	.syntaxPunc {
-		color: var(--colorSecondaryAction);
-	}
-	.syntaxKey, .syntaxTag {
-		color: #ed206a
-	}
-	.syntaxVal, .syntaxAttr {
-		color: #9b71e8
-	}
-	.syntaxStr, .syntaxAttrVal {
-		color: #388E3C
+		--colorPink: #ed206a;
+		--colorPurple: #9b71e8;
+		--colorGreen: #388e3c;
 	}
 }
 @media (prefers-color-scheme: dark) {
 	:root {
-		--color4xxBackground: #403630;
+		--color4xxBackground: #68554a;
 		--colorAccent: #2495ff;
 		--colorBackground: #181818;
 		--colorHeaderBackground: #111;
@@ -51,18 +42,9 @@
 		--colorLightRed: #ffe4ee;
 		--colorRed: #f41606;
 		--colorText: #fff;
-	}
-	.syntaxPunc {
-		color: var(--colorSecondaryAction);
-	}
-	.syntaxKey, .syntaxTag {
-		color: #f92672
-	}
-	.syntaxVal, .syntaxAttr {
-		color: #ae81ff
-	}
-	.syntaxStr, .syntaxAttrVal {
-		color: #a6e22e
+		--colorPink: #f92672;
+		--colorPurple: #ae81ff;
+		--colorGreen: #a6e22e;
 	}
 }
 
@@ -95,6 +77,8 @@ body {
 }
 
 select, a, input, button {
+	cursor: pointer;
+	
 	&:focus-visible {
 		outline: 2px solid var(--colorAccent);
 	}
@@ -104,15 +88,10 @@ a {
 	text-decoration: none;
 }
 
-a,
-button,
-input[type=checkbox],
-input[type=checkbox] + svg {
-	cursor: pointer;
-
-	&:active {
-		cursor: grabbing;
-	}
+a:active,
+button:active,
+input[type=checkbox]:active {
+	cursor: grabbing;
 }
 
 select {
@@ -270,8 +249,11 @@ header {
 		margin-left: 4px;
 		outline-offset: 1px;
 		background: transparent;
-		color: var(--colorRed);
 		border-radius: 50px;
+		color: var(--colorRed);
+		@media (prefers-color-scheme: dark) {
+			color: var(--colorLightRed);
+		}
 
 		&:hover {
 			background: var(--colorRed);
@@ -389,10 +371,6 @@ table {
 	}
 }
 
-.empty {
-	margin-top: 80px;
-}
-
 .Method {
 	padding-right: 8px;
 	color: var(--colorSecondaryAction);
@@ -419,6 +397,10 @@ table {
 		color: white;
 		background: var(--colorAccent);
 	}
+	.dittoDir {
+		opacity: 0.9;
+		filter: saturate(0.1);
+	}
 }
 
 
@@ -467,7 +449,6 @@ table {
 	}
 
 	> svg {
-		vertical-align: bottom;
 		fill: none;
 		stroke: var(--colorSecondaryAction);
 	}
@@ -579,10 +560,12 @@ table {
 		border-radius: var(--radius);
 
 		&:hover {
-			border-color: var(--colorLightRed);
-			background: var(--colorLightRed);
+			border-color: var(--colorRed);
 			color: var(--colorRed);
 		}
+		&:active {
+			cursor: grabbing;
+		}
 	}
 }
 
@@ -593,25 +576,38 @@ table {
 	flex-direction: column;
 	padding-top: 16px;
 
-	h2 {
+	> h2 {
 		padding-bottom: 4px;
 		padding-left: 16px;
 	}
 
-	pre {
+	> pre {
 		overflow: auto;
 		height: 100%;
 		padding: 16px;
 		padding-top: 12px;
 		font-family: monospace;
 
-		code {
+		> code {
 			white-space: pre;
 			tab-size: 2;
 
-			.json {
+			> .json {
 				color: var(--colorSecondaryAction);
 			}
+
+			.syntaxPunc {
+				color: var(--colorSecondaryAction);
+			}
+			.syntaxKey, .syntaxTag {
+				color: var(--colorPink);
+			}
+			.syntaxVal, .syntaxAttr {
+				color: var(--colorPurple);
+			}
+			.syntaxStr, .syntaxAttrVal {
+				color: var(--colorGreen);
+			}
 		}
 	}
 }
@@ -641,13 +637,6 @@ table {
 	}
 }
 
-.red {
-	color: var(--colorRed);
-}
-
-.dittoDir {
-	opacity: 0.6;
-}
 
 .ErrorToast {
 	position: fixed;