mockaton 8.13.0 → 8.13.1

package/README.md

@@ -75,9 +75,7 @@ They will be saved in your `config.mocksDir` following the filename convention.
 <br/>
 
 
-## Basic Usage
-Mockaton is a Node.js program.
-
+## Basic Usage (See below for Node < 23.6)
 ```sh
 npm install mockaton --save-dev
 ```
@@ -98,6 +96,14 @@ Mockaton({
 node my-mockaton.js
 ```
 
+### Node < 23.6 + TypeScript
+If you want to write mocks in TypeScript in a version older than Node 23.6:
+```shell
+npm install tsx
+node --import=tsx my-mockaton.js
+```
+
+
 <br/>
 
 ## Demo App (Vite)

package/package.json

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

package/src/Dashboard.css

@@ -1,19 +1,19 @@
 :root {
 	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-	--radius: 6px;
+	--radius: 4px;
 	--radiusSmall: 4px;
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
 		--color4xxBackground: #ffedd1;
-		--colorAccent: #0075db;
+		--colorAccent: #0170cc;
 		--colorAccentAlt: #068185;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
-		--colorComboBoxBackground: #f7f7f7;
+		--colorComboBoxBackground: #eee;
 		--colorHeaderBackground: #eee;
-		--colorSecondaryButtonBackground: #f3f3f3;
+		--colorSecondaryButtonBackground: #eee;
 		--colorSecondaryAction: #555;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
@@ -27,11 +27,10 @@
 	:root {
 		--color4xxBackground: #403630;
 		--colorAccent: #2495ff;
-		--colorAccentAlt: #00bf64;
 		--colorBackground: #161616;
 		--colorHeaderBackground: #090909;
-		--colorComboBoxBackground: #252525;
-		--colorSecondaryButtonBackground: #282828;
+		--colorComboBoxBackground: #2a2a2a;
+		--colorSecondaryButtonBackground: #2a2a2a;
 		--colorSecondaryAction: #999;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabledMockSelector: #b9b9b9;
@@ -227,6 +226,11 @@ select {
 }
 
 
+.Main {
+	display: flex;
+}
+
+
 .MockList {
 	display: flex;
 	align-items: flex-start;
@@ -254,6 +258,7 @@ select {
 
 .PayloadViewer {
 	position: sticky;
+	margin-top: 62px;
 	top: 62px;
 	width: 50%;
 	margin-left: 20px;
@@ -292,7 +297,6 @@ select {
 
 	span {
 		opacity: 0.5;
-		filter: saturate(0.5);
 	}
 
 	&:hover {
@@ -359,7 +363,6 @@ select {
 .DelayToggler {
 	> input {
 		&:checked ~ svg {
-			border: 1px solid var(--colorBackground);
 			fill: var(--colorAccent);
 			background: var(--colorAccent);
 			stroke: var(--colorBackground);
@@ -373,11 +376,12 @@ select {
 	}
 
 	> svg {
-		width: 18px;
-		height: 18px;
+		width: 19px;
+		height: 19px;
 		stroke-width: 2.5px;
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
+		box-shadow: var(--boxShadow1);
 	}
 }
 
@@ -385,10 +389,12 @@ select {
 	padding: 1px 3px;
 	background: var(--colorSecondaryButtonBackground);
 	border-radius: var(--radiusSmall);
+	box-shadow: var(--boxShadow1);
 
 	&:has(input:checked),
 	&:has(input:disabled) {
 		background: transparent;
+		box-shadow: none;
 	}
 
 	> input {
@@ -456,6 +462,7 @@ select {
 		color: var(--colorSecondaryAction);
 		border-radius: var(--radiusSmall);
 		background: var(--colorSecondaryButtonBackground);
+		box-shadow: var(--boxShadow1);
 
 		&:hover {
 			background: var(--colorLightRed);
@@ -510,7 +517,7 @@ select {
 		display: inline-block;
 		padding: 6px;
 		border-radius: var(--radius);
-		color: var(--colorAccentAlt);
+		color: var(--colorAccent);
 		text-decoration: none;
 
 		&:hover {
@@ -519,7 +526,6 @@ select {
 
 		span {
 			opacity: 0.5;
-			filter: saturate(0.5);
 		}
 	}
 }

package/src/Dashboard.js

@@ -51,6 +51,7 @@ const CSS = {
 	GlobalDelayField: 'GlobalDelayField',
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
+	Main: 'Main',
 
 	red: 'red',
 	empty: 'empty',
@@ -89,8 +90,11 @@ function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbac
 	return (
 		r('div', null,
 			r(Header, { cookies, comments, delay, fallbackAddress, collectProxied }),
-			r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
-			r(StaticFilesList, { staticFiles })))
+			r('main', { className: CSS.Main },
+				r('div', null,
+					r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
+					r(StaticFilesList, { staticFiles })),
+				r(PayloadViewer))))
 }
 
 
@@ -243,13 +247,12 @@ function MockList({ brokersByMethod, canProxy }) {
 	const hasMocks = Object.keys(brokersByMethod).length
 	if (!hasMocks)
 		return (
-			r('main', { className: cssClass(CSS.MockList, CSS.empty) },
+			r('div', { className: cssClass(CSS.MockList, CSS.empty) },
 				Strings.no_mocks_found))
 	return (
-		r('main', { className: CSS.MockList },
+		r('div', { className: CSS.MockList },
 			r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
-				r(SectionByMethod, { method, brokers, canProxy }))),
-			r(PayloadViewer)))
+				r(SectionByMethod, { method, brokers, canProxy })))))
 }
 
 function SectionByMethod({ method, brokers, canProxy }) {
@@ -258,20 +261,20 @@ function SectionByMethod({ method, brokers, canProxy }) {
 		.sort((a, b) => a[0].localeCompare(b[0]))
 
 	const urlMasks = brokersSorted.map(([urlMask]) => urlMask)
-	const urlMasksHighlighted = highlightCommonPathPrefixes(urlMasks)
+	const urlMasksDittoed = dittoSplitPaths(urlMasks)
 	return (
 		r('tbody', null,
 			r('th', null, method),
 			brokersSorted.map(([urlMask, broker], i) =>
 				r('tr', { 'data-method': method, 'data-urlMask': urlMask },
-					r('td', null, r(PreviewLink, { method, urlMask, urlMaskHighlighted: urlMasksHighlighted[i] })),
+					r('td', null, r(PreviewLink, { method, urlMask, urlMaskDittoed: urlMasksDittoed[i] })),
 					r('td', null, r(MockSelector, { broker })),
 					r('td', null, r(InternalServerErrorToggler, { broker })),
 					r('td', null, r(DelayRouteToggler, { broker })),
 					r('td', null, r(ProxyToggler, { broker, disabled: !canProxy }))))))
 }
 
-function PreviewLink({ method, urlMask, urlMaskHighlighted }) {
+function PreviewLink({ method, urlMask, urlMaskDittoed }) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
@@ -283,13 +286,15 @@ function PreviewLink({ method, urlMask, urlMaskHighlighted }) {
 			onError(error)
 		}
 	}
+	const [ditto, tail] = urlMaskDittoed
 	return (
 		r('a', {
 			className: CSS.PreviewLink,
 			href: urlMask,
-			onClick,
-			innerHTML: urlMaskHighlighted
-		}))
+			onClick
+		}, ditto
+			? [r('span', null, ditto), tail]
+			: tail))
 }
 
 function MockSelector({ broker }) {
@@ -496,7 +501,9 @@ function mockSelectorFor(method, urlMask) {
 function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
 		return null
-	const highlighted = highlightCommonPathPrefixes(staticFiles)
+	const paths = dittoSplitPaths(staticFiles).map(([ditto, tail]) => ditto
+		? [r('span', null, ditto), tail]
+		: tail)
 	return (
 		r('section', {
 				open: true,
@@ -507,9 +514,8 @@ function StaticFilesList({ staticFiles }) {
 				r('li', null,
 					r('a', {
 						href: f,
-						target: '_blank',
-						innerHTML: highlighted[i]
-					}))))))
+						target: '_blank'
+					}, paths[i]))))))
 }
 
 
@@ -619,37 +625,59 @@ function useRef() {
 
 
 
-
-/** This is for styling the repeated paths with a faint style  */
-function highlightCommonPathPrefixes(paths) {
-	const seen = []
+/**
+ * This is for styling the repeated paths with a faint style.
+ * It splits each path into [dittoPrefix, tail], where dittoPrefix is
+ * the longest previously-seen common directory prefix.
+ */
+function dittoSplitPaths(paths) {
 	const result = []
-	for (const path of paths) {
-		let longestPrefixSegments = []
-
-		for (const prev of seen) {
-			const currSegs = path.split('/')
-			const prevSegs = prev.split('/')
-
-			let i = 0
-			while (i < currSegs.length && i < prevSegs.length && currSegs[i] === prevSegs[i])
-				i++
-
-			if (i > longestPrefixSegments.length)
-				longestPrefixSegments = currSegs.slice(0, i)
+	for (let i = 0; i < paths.length; i++) {
+		const path = paths[i]
+		const currParts = path.split('/')
+
+		let dittoParts = []
+		for (let j = 0; j < i; j++) {
+			const prevParts = paths[j].split('/')
+
+			let k = 0
+			while (
+				k < currParts.length &&
+				k < prevParts.length &&
+				currParts[k] === prevParts[k])
+				k++
+
+			if (k > dittoParts.length)
+				dittoParts = currParts.slice(0, k)
 		}
 
-		if (longestPrefixSegments.length > 0) {
-			let prefix = longestPrefixSegments.join('/')
-			if (!prefix.endsWith('/'))
-				prefix += '/' // always end with slash for dirs
-			const suffix = path.slice(prefix.length)
-			result.push(`<span>${prefix}</span>${suffix}`)
+		if (!dittoParts.length)
+			result.push(['', path])
+		else {
+			const ditto = dittoParts.join('/') + '/'
+			result.push([ditto, path.slice(ditto.length)])
 		}
-		else
-			result.push(path)
-
-		seen.push(path)
 	}
+
 	return result
 }
+
+(function testDittoSplitPaths() {
+	const input = [
+		'/api/user',
+		'/api/user/avatar',
+		'/api/user/friends',
+		'/api/vid',
+		'/api/video/id',
+		'/api/video/stats'
+	]
+	const expected = [
+		['', '/api/user'],
+		['/api/user/', 'avatar'],
+		['/api/user/', 'friends'],
+		['/api/', 'vid'],
+		['/api/', 'video/id'],
+		['/api/video/', 'stats']
+	]
+	console.assert(JSON.stringify(dittoSplitPaths(input)) === JSON.stringify(expected))
+}())