mockaton 7.3.1 → 7.4.0

package/README.md

@@ -360,3 +360,4 @@ await mockaton.reset()
 ## TODO
 - Refactor Tests
 - Dashboard. List `staticDir` and indicate if it’s overriding some mock.
+- Dashboard. Handle non-json Mock Preview (such as images)

package/package.json

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

package/sample-mocks/api/user/links.GET.200.js

@@ -4,6 +4,6 @@
 export default function (req, response) {
 	return JSON.stringify([
 		'http://example.com/foo',
-		'http://example.com/bar',
-	])
+		'http://example.com/bar'
+	], null, 2)
 }

package/src/Dashboard.css

@@ -5,30 +5,34 @@
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0171dd;
+		--colorAccent: #1e88e5;
 		--colorBackground: #fff;
-		--colorCodeBackground: #fafafa;
 		--colorComboBoxBackground: #fafafa;
+		--colorComboBoxHeaderBackground: #fff;
 		--colorDisabled: #222;
+		--colorHeaderBackground: #f7f7f7;
 		--colorHover: #dfefff;
-		--colorLabel: #777;
+		--colorLabel: #666;
 		--colorLightRed: #ffe4ee;
+		--colorMockBodyBackground: #fafafa;
 		--colorRed: #da0f00;
-		--colorSecondaryButtonBackground: #f0f0f0;
+		--colorSecondaryButtonBackground: #fafafa;
 		--colorText: #000;
 	}
 }
 @media (prefers-color-scheme: dark) {
 	:root {
 		--color4xxBackground: #403630;
-		--colorAccent: #0682fa;
+		--colorAccent: #1f91ff;
 		--colorBackground: #141414;
-		--colorCodeBackground: #333;
 		--colorComboBoxBackground: #252525;
+		--colorComboBoxHeaderBackground: #222;
 		--colorDisabled: #aaa;
+		--colorHeaderBackground: #0b0b0b;
 		--colorHover: #023661;
 		--colorLabel: #aaa;
 		--colorLightRed: #ffe4ee;
+		--colorMockBodyBackground: #333;
 		--colorRed: #f41606;
 		--colorSecondaryButtonBackground: #444;
 		--colorText: #fff;
@@ -73,41 +77,28 @@ select {
 	}
 }
 
-
-main {
-	display: flex;
-	align-items: flex-start;
-
-	> table {
-		border-collapse: collapse;
-
-		th {
-			padding-top: 20px;
-			padding-bottom: 2px;
-			text-align: left;
-		}
-
-		tr {
-			border-bottom: 2px solid transparent;
-		}
-	}
-}
-
 menu {
+	position: fixed;
+	z-index: 100;
+	top: 0;
+	left: 0;
 	display: flex;
+	width: 100%;
 	align-items: flex-end;
-	margin-bottom: 12px;
+	padding: 20px 16px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	background: var(--colorHeaderBackground);
 	gap: 16px;
 
 	img {
 		width: 140px;
-		margin-right: 24px;
+		margin-right: 76px;
+		margin-left: -1px;
 	}
 
 	label {
 		span {
 			display: block;
-			padding-left: 7px;
 			color: var(--colorLabel);
 			font-size: 11px;
 		}
@@ -117,6 +108,7 @@ menu {
 			padding: 4px;
 			margin-top: 2px;
 			font-size: 11px;
+			background: var(--colorComboBoxHeaderBackground);
 		}
 	}
 
@@ -131,6 +123,7 @@ menu {
 		&:hover {
 			background: var(--colorRed);
 			color: white;
+			box-shadow: var(--boxShadow1);
 		}
 	}
 
@@ -142,9 +135,31 @@ menu {
 	}
 }
 
+
+main {
+	display: flex;
+	align-items: flex-start;
+	margin-top: 64px;
+
+	> table {
+		border-collapse: collapse;
+
+		th {
+			padding-top: 20px;
+			padding-bottom: 2px;
+			text-align: left;
+		}
+
+		tr {
+			border-bottom: 2px solid transparent;
+		}
+	}
+}
+
+
 .PayloadViewer {
 	position: sticky;
-	top: 0;
+	top: 80px;
 	width: 50%;
 	margin-left: 16px;
 
@@ -153,14 +168,17 @@ menu {
 	}
 
 	pre {
+		overflow: auto;
+		max-height: calc(100vh - 160px);
+		padding: 12px;
+		margin-top: 6px;
+		box-shadow: var(--boxShadow1);
+		border-radius: 4px;
+		background: var(--colorMockBodyBackground);
+		white-space: pre;
 		tab-size: 2;
 
-		&:not(:empty) {
-			overflow: auto;
-			max-height: calc(100vh - 160px);
-			padding: 12px;
-			margin-top: 6px;
-			background: var(--colorCodeBackground);
+		code * {
 			font-family: monospace;
 		}
 	}
@@ -172,6 +190,7 @@ menu {
 	display: inline-block;
 	width: 280px;
 	padding: 8px 6px;
+	border-radius: 4px;
 	color: var(--colorAccent);
 	text-decoration: none;
 
@@ -220,6 +239,7 @@ menu {
 		fill: var(--colorText);
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
+		box-shadow: var(--boxShadow1);
 
 		&:hover {
 			background: var(--colorHover);
@@ -244,6 +264,7 @@ menu {
 
 	> span {
 		padding: 4px;
+		box-shadow: var(--boxShadow1);
 		font-size: 10px;
 		color: var(--colorText);
 		border-radius: 2px;
@@ -256,6 +277,122 @@ menu {
 	}
 }
 
+.ProgressBar {
+	position: relative;
+	width: 100%;
+	height: 16px;
+	background: var(--colorComboBoxHeaderBackground);
+
+	div {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background: var(--colorAccent);
+		animation: _kfProgress;
+		/*animation-duration: It's in JavaScript */
+	}
+
+}
+@keyframes _kfProgress {
+	0% {
+		width: 0;
+	}
+	100% {
+		width: 100%;
+	}
+}
+
 .bold {
 	font-weight: bold;
 }
+
+
+/* 
+ * Prism 
+ */
+
+@media (prefers-color-scheme: dark) {
+	.token.cdata, .token.comment, .token.doctype, .token.prolog {
+		color: #8292a2
+	}
+	.token.punctuation {
+		color: #f8f8f2
+	}
+	.token.namespace {
+		opacity: .7
+	}
+	.token.constant, .token.deleted, .token.property, .token.symbol, .token.tag {
+		color: #f92672
+	}
+	.token.boolean, .token.number {
+		color: #ae81ff
+	}
+	.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
+		color: #a6e22e
+	}
+	.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url, .token.variable {
+		color: #f8f8f2
+	}
+	.token.atrule, .token.attr-value, .token.class-name, .token.function {
+		color: #e6db74
+	}
+	.token.keyword {
+		color: #66d9ef
+	}
+	.token.important, .token.regex {
+		color: #fd971f
+	}
+	.token.bold, .token.important {
+		font-weight: 700
+	}
+	.token.italic {
+		font-style: italic
+	}
+	.token.entity {
+		cursor: help
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	.token.cdata, .token.comment, .token.doctype, .token.prolog {
+		color: #708090
+	}
+	.token.punctuation {
+		color: #999
+	}
+	.token.namespace {
+		opacity: .7
+	}
+	.token.constant, .token.deleted, .token.property, .token.symbol, .token.tag {
+		color: #ed206a
+	}
+	.token.boolean, .token.number {
+		color: #9b71e8
+	}
+	.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
+		color: #459900
+	}
+	.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
+		color: #9a6e3a;
+		background: hsla(0, 0%, 100%, .5)
+	}
+	.token.atrule, .token.attr-value, .token.keyword {
+		color: #07a
+	}
+	.token.class-name, .token.function {
+		color: #dd4a68
+	}
+	.token.important, .token.regex, .token.variable {
+		color: #e90
+	}
+	.token.bold, .token.important {
+		font-weight: 700
+	}
+	.token.italic {
+		font-style: italic
+	}
+	.token.entity {
+		cursor: help
+	}
+}

package/src/Dashboard.html

@@ -1,12 +1,16 @@
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
+	<meta charset="UTF-8">
 	<link rel="stylesheet" href="/Dashboard.css">
 	<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="Mock Server for developing UIs">
 	<title>Mock Server</title>
 </head>
 <body>
 <script src="/Dashboard.js" type="module"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js" integrity="sha512-QXFMVAusM85vUYDaNgcYeU3rzSlc+bTV4JvkfJhjxSHlQEo+ig53BtnGkvFTiNJh8D+wv6uWAQ2vJaVmxe8d3w==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
 </body>
 </html>

package/src/Dashboard.js

@@ -10,7 +10,6 @@ const Strings = {
 	cookie: 'Cookie',
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
-	fetching: '⌚ Fetching…',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	reset: 'Reset',
@@ -25,6 +24,7 @@ const CSS = {
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
+	ProgressBar: 'ProgressBar',
 
 	bold: 'bold',
 	chosen: 'chosen',
@@ -60,7 +60,7 @@ function DevPanel(brokersByMethod, cookies, comments, corsAllowed) {
 	return (
 		r('div', null,
 			r('menu', null,
-				r('img', { src: 'mockaton-logo.svg', width: 160 }),
+				r('img', { src: '/mockaton-logo.svg', width: 160, alt: Strings.title }),
 				r(CookieSelector, { list: cookies }),
 				r(BulkSelector, { comments }),
 				r(CorsCheckbox, { corsAllowed }),
@@ -70,7 +70,8 @@ function DevPanel(brokersByMethod, cookies, comments, corsAllowed) {
 					r(SectionByMethod, { method, brokers }))),
 				r('div', { className: CSS.PayloadViewer },
 					r('h2', { ref: refPayloadFile }, Strings.mock),
-					r('pre', { ref: refPayloadViewer }, Strings.click_link_to_preview)))))
+					r('pre', null,
+						r('code', { ref: refPayloadViewer }, Strings.click_link_to_preview))))))
 }
 
 function CookieSelector({ list }) {
@@ -161,14 +162,19 @@ function PreviewLink({ method, urlMask }) {
 			async onClick(event) {
 				event.preventDefault()
 				try {
-					const spinner = setTimeout(() => refPayloadViewer.current.innerText = Strings.fetching, 180)
+					const spinner = setTimeout(() => {
+						empty(refPayloadViewer.current)
+						refPayloadViewer.current.append(ProgressBar())
+					}, 180)
 					const res = await fetch(this.href, {
 						method: this.getAttribute('data-method')
 					})
 					document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
 					this.classList.add(CSS.chosen)
 					clearTimeout(spinner)
-					refPayloadViewer.current.innerText = await res.text() || Strings.empty_response_body
+					updatePayloadViewer(
+						await res.text() || Strings.empty_response_body,
+						res.headers.get('content-type'))
 					refPayloadFile.current.innerText = this.closest('tr').querySelector('select').value
 				}
 				catch (error) {
@@ -178,6 +184,20 @@ function PreviewLink({ method, urlMask }) {
 		}, urlMask))
 }
 
+function ProgressBar() {
+	return (
+		r('div', { className: CSS.ProgressBar },
+			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
+}
+
+function updatePayloadViewer(body, mime) {
+	if (mime === 'application/json' && window.Prism)
+		refPayloadViewer.current.innerHTML = window.Prism.highlight(body, window.Prism.languages.json, 'json')
+	else
+		refPayloadViewer.current.innerText = body
+}
+
+
 function MockSelector({ broker }) {
 	const className = (defaultIsSelected, status) => cssClass(
 		CSS.MockSelector,
@@ -309,6 +329,8 @@ function createElement(elem, props = null, ...children) {
 				value.current = node
 			else if (key.startsWith('on'))
 				node.addEventListener(key.replace(/^on/, '').toLowerCase(), value)
+			else if (key === 'style')
+				Object.assign(node.style, value)
 			else if (key in node)
 				node[key] = value
 			else