mockaton 8.11.0 → 8.11.2

package/README.md

@@ -226,7 +226,7 @@ want a `Content-Type` header in the response.
 
 <details>
 <summary>Supported Methods</summary>
-<p>From Node.js <code>http.METHODS</code></p>
+<p>From <code>require('node:http').METHODS</code></p>
 <p>
 	ACL, BIND, CHECKOUT,
 	CONNECT, COPY, DELETE,
@@ -473,7 +473,7 @@ function capitalizePlugin(filePath) {
 Defaults to `true`. When `true`, these are the default options:
 ```js
 config.corsOrigins = ['*']
-config.corsMethods = ['GET', 'PUT', 'DELETE', 'POST', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT']
+config.corsMethods = require('node:http').METHODS
 config.corsHeaders = ['content-type']
 config.corsCredentials = true
 config.corsMaxAge = 0 // seconds to cache the preflight req

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.11.0",
+	"version": "8.11.2",
 	"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,4 +1,4 @@
-const httpMethods = [ // node:http.METHODS
+const httpMethods = [ // @KeepSync with node:http.METHODS
 	'ACL', 'BIND', 'CHECKOUT',
 	'CONNECT', 'COPY', 'DELETE',
 	'GET', 'HEAD', 'LINK',
@@ -61,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/config.js

@@ -2,7 +2,7 @@ import { realpathSync } from 'node:fs'
 import { isDirectory } from './utils/fs.js'
 import { openInBrowser } from './utils/openInBrowser.js'
 import { jsToJsonPlugin } from './MockDispatcherPlugins.js'
-import { StandardMethods } from './utils/http-request.js'
+import { SUPPORTED_METHODS } from './utils/http-request.js'
 import { validateCorsAllowedMethods, validateCorsAllowedOrigins } from './utils/http-cors.js'
 
 
@@ -28,7 +28,7 @@ export const config = Object.seal({
 
 	corsAllowed: true,
 	corsOrigins: ['*'],
-	corsMethods: StandardMethods,
+	corsMethods: SUPPORTED_METHODS,
 	corsHeaders: ['content-type'],
 	corsExposedHeaders: [],
 	corsCredentials: true,

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>

package/src/utils/http-cors.js

@@ -1,9 +1,7 @@
-import { StandardMethods } from './http-request.js'
-
+import { methodIsSupported } from './http-request.js'
 
 /* https://www.w3.org/TR/2020/SPSD-cors-20200602/#resource-processing-model */
 
-
 export function validateCorsAllowedOrigins(arr) {
 	if (!Array.isArray(arr))
 		return false
@@ -13,8 +11,7 @@ export function validateCorsAllowedOrigins(arr) {
 }
 
 export function validateCorsAllowedMethods(arr) {
-	return Array.isArray(arr)
-		&& arr.every(m => StandardMethods.includes(m))
+	return Array.isArray(arr) && arr.every(methodIsSupported)
 }
 
 
@@ -38,7 +35,7 @@ const CH = CorsHeader
 export function isPreflight(req) {
 	return req.method === 'OPTIONS'
 		&& URL.canParse(req.headers[CH.Origin])
-		&& StandardMethods.includes(req.headers[CH.AccessControlRequestMethod])
+		&& methodIsSupported(req.headers[CH.AccessControlRequestMethod])
 }
 
 

package/src/utils/http-request.js

@@ -1,7 +1,8 @@
-export const StandardMethods = [
-	'GET', 'PUT', 'DELETE', 'POST', 'PATCH',
-	'HEAD', 'OPTIONS', 'TRACE', 'CONNECT'
-]
+import { METHODS } from 'node:http'
+
+
+export const SUPPORTED_METHODS = METHODS
+export const methodIsSupported = method => SUPPORTED_METHODS.includes(method)
 
 export class BodyReaderError extends Error {name = 'BodyReaderError'}