mockaton 8.25.0 → 8.26.1

package/README.md

@@ -55,9 +55,9 @@ Nonetheless, there’s a programmatic API, which is handy
 for setting up tests (see **Commander API** section below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp880x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp880x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp880x800.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp880x768.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp880x768.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp880x768.light.gold.png">
 </picture>
 
 

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.25.0",
+	"version": "8.26.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -20,7 +20,7 @@
 	"scripts": {
 		"test": "node --test \"src/**/*.test.js\"",
 		"coverage": "node --test --test-reporter=lcov --test-reporter-destination=.coverage/lcov.info --experimental-test-coverage \"src/**/*.test.js\"",
-		"start": "node --watch src/cli.js -c dev.config.js",
+		"start": "node --watch src/cli.js",
 		"pixaton": "node --test --import=./pixaton-tests/_setup.js --experimental-test-isolation=none \"pixaton-tests/**/*.test.js\"",
 		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %-30s ;# %s\\n\", $4, $2 }'"
 	},

package/src/Dashboard.css

@@ -305,6 +305,10 @@ main {
 table {
 	border-collapse: collapse;
 
+	tr {
+		border-top: 2px solid transparent;
+	}
+
 	th {
 		padding-bottom: 2px;
 		padding-left: 4px;
@@ -314,12 +318,6 @@ table {
 	tbody {
 		border-bottom: 20px solid transparent;
 	}
-
-	td:nth-child(3),
-	td:nth-child(4),
-	td:nth-child(5) {
-		max-width: 280px;
-	}
 }
 
 .empty {
@@ -332,7 +330,7 @@ table {
 	left: -8px;
 	display: inline-block;
 	width: 100%;
-	padding: 8px;
+	padding: 6px 8px;
 	margin-left: 4px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
@@ -349,9 +347,8 @@ table {
 }
 
 .MockSelector {
-	width: 100%;
 	height: 26px;
-	padding-right: 16px;
+	padding-right: 20px;
 	padding-left: 8px;
 	text-overflow: ellipsis;
 	font-size: 12px;

package/src/Dashboard.js

@@ -1,5 +1,5 @@
 import { DEFAULT_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
-import { parseFilename } from './Filename.js'
+import { parseFilename, extractComments } from './Filename.js'
 import { Commander } from './ApiCommander.js'
 
 
@@ -383,7 +383,7 @@ function MockSelector({ broker }) {
 		selected = Strings.proxied
 		files.push(selected)
 	}
-
+	
 	return (
 		r('select', {
 			onChange,
@@ -394,11 +394,17 @@ function MockSelector({ broker }) {
 				CSS.MockSelector,
 				selected !== files[0] && CSS.nonDefault,
 				status >= 400 && status < 500 && CSS.status4xx)
-		}, files.map(file =>
-			r('option', {
-				value: file,
-				selected: file === selected
-			}, file))))
+		}, files.map(file => {
+			const { status, ext } = parseFilename(file)
+			return (
+				r('option', {
+					value: file,
+					selected: file === selected
+				}, file === Strings.proxied 
+					? Strings.proxied 
+					: `${status} ${ext} ${extractComments(file).join(' ')}`)
+			)
+		})))
 }
 
 /** @param {{ broker: ClientMockBroker }} props */
@@ -582,7 +588,7 @@ function PayloadViewerTitle({ file, status, statusText }) {
 	const { urlMask, method, ext } = parseFilename(file)
 	return (
 		r('span', null,
-			urlMask + '.' + method + '.',
+			urlMask.replace(/^\//, '') + '.' + method + '.',
 			r('abbr', { title: statusText }, status),
 			'.' + ext))
 }
@@ -851,9 +857,12 @@ function dittoSplitPaths(paths) {
 
 
 function syntaxJSON(json) {
+	const MAX_NODES = 1000
+	let nNodes = 0
 	const frag = document.createDocumentFragment()
 
 	function span(className, textContent) {
+		nNodes++
 		const s = document.createElement('span')
 		s.className = className
 		s.textContent = textContent
@@ -861,13 +870,17 @@ function syntaxJSON(json) {
 	}
 
 	function text(t) {
+		nNodes++
 		frag.appendChild(document.createTextNode(t))
 	}
 
 	let match
 	let lastIndex = 0
-	syntaxJSON.regex.lastIndex = 0
+	syntaxJSON.regex.lastIndex = 0 // resets regex
 	while ((match = syntaxJSON.regex.exec(json)) !== null) {
+		if (nNodes > MAX_NODES)
+			break
+		
 		if (match.index > lastIndex)
 			text(json.slice(lastIndex, match.index))
 
@@ -882,6 +895,7 @@ function syntaxJSON(json) {
 		else if (str) span(CSS.syntaxStr, str)
 		else span(CSS.syntaxVal, full)
 	}
+	frag.normalize()
 	text(json.slice(lastIndex))
 	return frag
 }
@@ -891,9 +905,12 @@ syntaxJSON.regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s
 
 
 function syntaxXML(xml) {
+	const MAX_NODES = 1000
+	let nNodes = 0
 	const frag = document.createDocumentFragment()
 
 	function span(className, textContent) {
+		nNodes++
 		const s = document.createElement('span')
 		s.className = className
 		s.textContent = textContent
@@ -901,6 +918,7 @@ function syntaxXML(xml) {
 	}
 
 	function text(t) {
+		nNodes++
 		frag.appendChild(document.createTextNode(t))
 	}
 
@@ -908,6 +926,9 @@ function syntaxXML(xml) {
 	let lastIndex = 0
 	syntaxXML.regex.lastIndex = 0
 	while ((match = syntaxXML.regex.exec(xml)) !== null) {
+		if (nNodes > MAX_NODES)
+			break
+		
 		if (match.index > lastIndex)
 			text(xml.slice(lastIndex, match.index))
 
@@ -919,6 +940,7 @@ function syntaxXML(xml) {
 		else if (match[4]) span(CSS.syntaxAttrVal, match[4])
 	}
 	text(xml.slice(lastIndex))
+	frag.normalize()
 	return frag
 }
 syntaxXML.regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g