mockaton 8.10.0 → 8.11.1

package/README.md

@@ -224,6 +224,24 @@ api/user.GET.200.json
 You can also use `.empty` or `.unknown` if you don’t
 want a `Content-Type` header in the response.
 
+<details>
+<summary>Supported Methods</summary>
+<p>From Node.js <code>http.METHODS</code></p>
+<p>
+	ACL, BIND, CHECKOUT,
+	CONNECT, COPY, DELETE,
+	GET, HEAD, LINK,
+	LOCK, M-SEARCH, MERGE,
+	MKACTIVITY, MKCALENDAR, MKCOL,
+	MOVE, NOTIFY, OPTIONS,
+	PATCH, POST, PROPFIND,
+	PROPPATCH, PURGE, PUT,
+	QUERY, REBIND, REPORT,
+	SEARCH, SOURCE, SUBSCRIBE,
+	TRACE, UNBIND, UNLINK,
+	UNLOCK, UNSUBSCRIBE
+</p>
+</details>
 
 ### Dynamic Parameters
 Anything within square brackets is always matched. For example, for this route

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.10.0",
+	"version": "8.11.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Dashboard.css

@@ -12,7 +12,7 @@
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #f7f7f7;
-		--colorHeaderBackground: #f3f3f3;
+		--colorHeaderBackground: #eee;
 		--colorSecondaryButtonBackground: #f3f3f3;
 		--colorSecondaryAction: #555;
 		--colorDisabledMockSelector: #444;
@@ -31,8 +31,8 @@
 		--colorBackground: #161616;
 		--colorHeaderBackground: #090909;
 		--colorComboBoxBackground: #252525;
-		--colorSecondaryButtonBackground: #202020;
-		--colorSecondaryAction: #bbb;
+		--colorSecondaryButtonBackground: #282828;
+		--colorSecondaryAction: #999;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabledMockSelector: #b9b9b9;
 		--colorHover: #023661;
@@ -68,7 +68,10 @@ select, a, input, button, summary {
 	}
 }
 
-a, button, input[type=checkbox] {
+a,
+button,
+input[type=checkbox],
+input[type=checkbox] ~ svg {
 	cursor: pointer;
 
 	&:active {
@@ -117,7 +120,7 @@ select {
 	img {
 		width: 130px;
 		align-self: center;
-		margin-right: 20px;
+		margin-right: 22px;
 	}
 
 	.Field {
@@ -133,8 +136,10 @@ select {
 			svg {
 				width: 14px;
 				height: 14px;
-				fill: var(--colorLabel);
-				opacity: 0.6;
+				stroke: var(--colorLabel);
+				stroke-width: 1.5px;
+				fill: none;
+				opacity: .7;
 			}
 		}
 
@@ -158,16 +163,18 @@ select {
 		}
 
 		&.GlobalDelayField {
-			width: 82px;
+			width: 84px;
 
 			input[type=number] {
 				padding-right: 0;
 			}
 
 			svg {
+				width: 12px;
+				height: 12px;
 				border: 1px solid var(--colorLabel);
+				stroke-width: 3px;
 				border-radius: 50%;
-				transform: scale(.85);
 			}
 		}
 
@@ -276,7 +283,7 @@ select {
 	position: relative;
 	left: -6px;
 	display: inline-block;
-	width: 278px;
+	width: 272px;
 	padding: 8px 6px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
@@ -295,6 +302,7 @@ select {
 	width: 260px;
 	height: 30px;
 	padding-right: 5px;
+	padding-left: 16px;
 	border: 0;
 	text-align: right;
 	direction: rtl;
@@ -323,7 +331,6 @@ select {
 .ProxyToggler {
 	display: flex;
 	margin-left: 8px;
-	cursor: pointer;
 
 	> input {
 		appearance: none;
@@ -334,48 +341,90 @@ select {
 				outline: 2px solid var(--colorAccent)
 			}
 		}
+	}
 
-		&:enabled:hover:not(:checked) ~ svg {
-			background: var(--colorHover);
-			fill: var(--colorText);
-		}
+	> svg {
+		vertical-align: bottom;
+		fill: none;
+		stroke: var(--colorSecondaryAction);
+	}
+}
 
+.DelayToggler {
+	> input {
 		&:checked ~ svg {
-			border-color: transparent;
+			border: 1px solid var(--colorBackground);
+			fill: var(--colorAccent);
 			background: var(--colorAccent);
-			fill: white;
-			box-shadow: var(--boxShadow1);
+			stroke: var(--colorBackground);
 		}
 
-		&:disabled ~ svg {
-			fill-opacity: 0.4;
-			cursor: not-allowed;
-			box-shadow: none;
+		&:enabled:hover:not(:checked) ~ svg {
+			border-color: var(--colorText);
+			background: var(--colorHover);
+			stroke: var(--colorText);
 		}
 	}
 
 	> svg {
 		width: 18px;
 		height: 18px;
-		vertical-align: bottom;
-		fill: var(--colorSecondaryAction);
+		stroke-width: 2.5px;
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
 	}
 }
 
 .ProxyToggler {
+	padding: 1px 3px;
+	background: var(--colorSecondaryButtonBackground);
+	border-radius: var(--radiusSmall);
+
+	&:has(input:checked),
+	&:has(input:disabled) {
+		background: transparent;
+	}
+
+	> input {
+		&:checked ~ svg {
+			fill: var(--colorAccent);
+			stroke: var(--colorAccent);
+
+			path:last-of-type { /* inner cloud curve */
+				stroke: var(--colorBackground);
+			}
+			transform: scale(1.2);
+		}
+
+		&:enabled:hover:not(:checked) ~ svg {
+			fill: var(--colorHover);
+			stroke: var(--colorText);
+		}
+
+		&:disabled ~ svg {
+			stroke-opacity: 0.5;
+			cursor: not-allowed;
+			box-shadow: none;
+			fill: transparent;
+
+			path:last-of-type {
+				stroke-opacity: 0;
+				stroke: transparent;
+			}
+		}
+	}
+
 	> svg {
-		width: 20px;
-		padding: 3px;
-		border-color: transparent;
+		width: 16px;
+		height: 16px;
+		stroke-width: 2px;
 		border-radius: var(--radiusSmall);
 	}
 }
 
 .InternalServerErrorToggler {
 	display: flex;
-	margin-left: 8px;
+	margin-left: 6px;
 	cursor: pointer;
 
 	> input {
@@ -391,19 +440,18 @@ select {
 		&:checked ~ span {
 			color: white;
 			background: var(--colorRed);
-			box-shadow: var(--boxShadow1);
 		}
 	}
 
 	> span {
-		padding: 5px 4px;
+		padding: 4px;
 		font-size: 10px;
+		font-weight: bold;
 		color: var(--colorSecondaryAction);
 		border-radius: var(--radiusSmall);
 		background: var(--colorSecondaryButtonBackground);
 
 		&:hover {
-			box-shadow: var(--boxShadow1);
 			background: var(--colorLightRed);
 			color: var(--colorRed);
 		}
@@ -530,7 +578,7 @@ select {
 		color: #9b71e8
 	}
 	.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
-		color: #459900
+		color: #3e8300
 	}
 	.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
 		color: #9a6e3a;

package/src/Dashboard.js

@@ -520,13 +520,15 @@ function onError(error) {
 function TimerIcon() {
 	return (
 		r('svg', { viewBox: '0 0 24 24' },
-			r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
+			r('path', { d: 'm11 5.6 0.14 7.2 6 3.7' })))
 }
 
 function CloudIcon() {
 	return (
 		r('svg', { viewBox: '0 0 24 24' },
-			r('path', { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.61 5.64 5.36 8.04 2.35 8.36 0 10.9 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4h2c0-2.76-1.86-5.08-4.4-5.78C8.61 6.88 10.2 6 12 6c3.03 0 5.5 2.47 5.5 5.5v.5H19c1.65 0 3 1.35 3 3s-1.35 3-3 3' })))
+			r('path', { d: 'm6.1 8.9c0.98-2.3 3.3-3.9 6-3.9 3.3-2e-7 6 2.5 6.4 5.7 0.018 0.15 0.024 0.18 0.026 0.23 0.0016 0.037 8.2e-4 0.084 0.098 0.14 0.097 0.054 0.29 0.05 0.48 0.05 2.2 0 4 1.8 4 4s-1.8 4-4 4c-4-0.038-9-0.038-13-0.018-2.8 0-5-2.2-5-5-2.2e-7 -2.8 2.2-5 5-5 2.8 2e-7 5 2.2 5 5' }),
+			r('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })
+		))
 }
 
 

package/src/Filename.js

@@ -1,7 +1,16 @@
-const httpMethods = [
-	'CONNECT', 'DELETE', 'GET',
-	'HEAD', 'OPTIONS', 'PATCH',
-	'POST', 'PUT', 'TRACE'
+const httpMethods = [ // node:http.METHODS
+	'ACL', 'BIND', 'CHECKOUT',
+	'CONNECT', 'COPY', 'DELETE',
+	'GET', 'HEAD', 'LINK',
+	'LOCK', 'M-SEARCH', 'MERGE',
+	'MKACTIVITY', 'MKCALENDAR', 'MKCOL',
+	'MOVE', 'NOTIFY', 'OPTIONS',
+	'PATCH', 'POST', 'PROPFIND',
+	'PROPPATCH', 'PURGE', 'PUT',
+	'QUERY', 'REBIND', 'REPORT',
+	'SEARCH', 'SOURCE', 'SUBSCRIBE',
+	'TRACE', 'UNBIND', 'UNLINK',
+	'UNLOCK', 'UNSUBSCRIBE'
 ]
 
 const reComments = /\(.*?\)/g // Anything within parentheses
@@ -52,6 +61,7 @@ function removeTrailingSlash(url = '') {
 		.replace('/#', '#')
 }
 
+// TODO ThinkAbout allowing custom status codes
 function responseStatusIsValid(status) {
 	return Number.isInteger(status)
 		&& status >= 100

package/src/MockDispatcher.js

@@ -14,7 +14,7 @@ export async function dispatchMock(req, response) {
 		const broker = mockBrokerCollection.getBrokerForUrl(req.method, req.url)
 		if (!broker || broker.proxied) {
 			if (config.proxyFallback)
-				await proxy(req, response, Number(Boolean(broker?.delayed)) * config.delay)
+				await proxy(req, response, config.delay * Boolean(broker?.delayed))
 			else
 				sendNotFound(response)
 			return

package/src/Mockaton.test.js

@@ -106,6 +106,12 @@ const fixtures = [
 		'Decodes URI'
 	],
 
+	[
+		'/api/uncommon-method',
+		'/api/uncommon-method.ACL.200.json',
+		'node.js doesn’t support arbitrary HTTP methods, but it does support a few non-standard ones'
+	],
+
 
 	// Dynamic Params
 	[

package/src/mockaton-logo.svg

@@ -2,7 +2,7 @@
 <svg version="1.1" viewBox="0 0 570 100" xmlns="http://www.w3.org/2000/svg">
 	<style>
 		:root { --color: #000000; }
-		@media (prefers-color-scheme: light) { :root { --color: #444 } }
+		@media (prefers-color-scheme: light) { :root { --color: #111 } }
 		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
 		path { fill: var(--color) }
 	</style>