mockaton 8.12.10 → 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.12.10",
+	"version": "8.13.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/ApiConstants.js

@@ -2,17 +2,17 @@ const MOUNT = '/mockaton'
 export const API = {
 	dashboard: MOUNT,
 	bulkSelect: MOUNT + '/bulk-select-by-comment',
+	collectProxied: MOUNT + '/collect-proxied',
 	comments: MOUNT + '/comments',
-	select: MOUNT + '/select',
+	cookies: MOUNT + '/cookies',
+	cors: MOUNT + '/cors',
 	delay: MOUNT + '/delay',
+	fallback: MOUNT + '/fallback',
 	globalDelay: MOUNT + '/global-delay',
 	mocks: MOUNT + '/mocks',
-	reset: MOUNT + '/reset',
-	cookies: MOUNT + '/cookies',
-	fallback: MOUNT + '/fallback',
-	collectProxied: MOUNT + '/collect-proxied',
 	proxied: MOUNT + '/proxied',
-	cors: MOUNT + '/cors',
+	reset: MOUNT + '/reset',
+	select: MOUNT + '/select',
 	static: MOUNT + '/static',
 	syncVersion: MOUNT + '/sync_version'
 }

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;
@@ -290,6 +295,10 @@ select {
 	text-decoration: none;
 	word-break: break-word;
 
+	span {
+		opacity: 0.5;
+	}
+
 	&:hover {
 		background: var(--colorHover);
 	}
@@ -354,7 +363,6 @@ select {
 .DelayToggler {
 	> input {
 		&:checked ~ svg {
-			border: 1px solid var(--colorBackground);
 			fill: var(--colorAccent);
 			background: var(--colorAccent);
 			stroke: var(--colorBackground);
@@ -368,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);
 	}
 }
 
@@ -380,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 {
@@ -451,6 +462,7 @@ select {
 		color: var(--colorSecondaryAction);
 		border-radius: var(--radiusSmall);
 		background: var(--colorSecondaryButtonBackground);
+		box-shadow: var(--boxShadow1);
 
 		&:hover {
 			background: var(--colorLightRed);
@@ -505,12 +517,16 @@ select {
 		display: inline-block;
 		padding: 6px;
 		border-radius: var(--radius);
-		color: var(--colorAccentAlt);
+		color: var(--colorAccent);
 		text-decoration: none;
 
 		&:hover {
 			text-decoration: underline;
 		}
+
+		span {
+			opacity: 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,32 +247,34 @@ 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 }) {
+	const brokersSorted = Object.entries(brokers)
+		.filter(([, broker]) => broker.mocks.length > 1) // >1 because of autogen500
+		.sort((a, b) => a[0].localeCompare(b[0]))
+
+	const urlMasks = brokersSorted.map(([urlMask]) => urlMask)
+	const urlMasksDittoed = dittoSplitPaths(urlMasks)
 	return (
 		r('tbody', null,
 			r('th', null, method),
-			Object.entries(brokers)
-				.filter(([, broker]) => broker.mocks.length > 1) // >1 because of autogen500
-				.sort((a, b) => a[0].localeCompare(b[0]))
-				.map(([urlMask, broker]) =>
-					r('tr', { 'data-method': method, 'data-urlMask': urlMask },
-						r('td', null, r(PreviewLink, { method, urlMask })),
-						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 }) {
+			brokersSorted.map(([urlMask, broker], i) =>
+				r('tr', { 'data-method': method, 'data-urlMask': urlMask },
+					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, urlMaskDittoed }) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
@@ -280,12 +286,15 @@ function PreviewLink({ method, urlMask }) {
 			onError(error)
 		}
 	}
+	const [ditto, tail] = urlMaskDittoed
 	return (
 		r('a', {
 			className: CSS.PreviewLink,
 			href: urlMask,
 			onClick
-		}, urlMask))
+		}, ditto
+			? [r('span', null, ditto), tail]
+			: tail))
 }
 
 function MockSelector({ broker }) {
@@ -492,15 +501,21 @@ function mockSelectorFor(method, urlMask) {
 function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
 		return null
+	const paths = dittoSplitPaths(staticFiles).map(([ditto, tail]) => ditto
+		? [r('span', null, ditto), tail]
+		: tail)
 	return (
 		r('section', {
 				open: true,
 				className: CSS.StaticFilesList
 			},
 			r('h2', null, Strings.static_get),
-			r('ul', null, staticFiles.map(f =>
+			r('ul', null, staticFiles.map((f, i) =>
 				r('li', null,
-					r('a', { href: f, target: '_blank' }, f))))))
+					r('a', {
+						href: f,
+						target: '_blank'
+					}, paths[i]))))))
 }
 
 
@@ -607,3 +622,62 @@ function createSvgElement(tagName, props, ...children) {
 function useRef() {
 	return { current: null }
 }
+
+
+
+/**
+ * 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 (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 (!dittoParts.length)
+			result.push(['', path])
+		else {
+			const ditto = dittoParts.join('/') + '/'
+			result.push([ditto, path.slice(ditto.length)])
+		}
+	}
+
+	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))
+}())

package/src/Watcher.js

@@ -29,7 +29,7 @@ export function watchMocksDir() {
 		if (!file)
 			return
 		if (isFile(join(dir, file))) {
-			if (mockBrokerCollection.registerMock(file, 'isFromWatcher'))
+			if (mockBrokerCollection.registerMock(file, Boolean('isFromWatcher')))
 				uiSyncVersion.increment()
 		}
 		else {

package/src/mockBrokersCollection.js

@@ -36,7 +36,7 @@ export function init() {
 }
 
 /** @returns {boolean} registered */
-export function registerMock(file, isFromWatcher) {
+export function registerMock(file, isFromWatcher = false) {
 	if (findBrokerByFilename(file)?.hasMock(file)
 		|| !isFileAllowed(file)
 		|| !filenameIsValid(file))