mockaton 13.3.2 → 13.3.3

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "13.3.2",
+	"version": "13.3.3",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/app-store.js

@@ -140,21 +140,7 @@ export const store = {
 		store.brokersByMethod[method][urlMask] = broker
 	},
 
-	folderGroupsByMethod(method) {
-		const groups = []
-		let g = null
-		for (const row of store._brokersAsRowsByMethod(method)) {
-			const folder = row.urlMask.substring(0, row.urlMask.lastIndexOf('/') + 1)
-			if (!g || g.folder !== folder) {
-				g = { folder, children: [] }
-				groups.push(g)
-			}
-			g.children.push(row)
-		}
-		return groups
-	},
-
-	_brokersAsRowsByMethod(method) {
+	brokersAsRowsByMethod(method) {
 		const rows = store._brokersAsArray(method)
 			.map(b => new BrokerRowModel(b, store.canProxy))
 			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
@@ -285,6 +271,7 @@ export class BrokerRowModel {
 	method = ''
 	urlMask = ''
 	urlMaskDittoed = ['', '']
+	children = []
 	#broker = /** @type ClientMockBroker */ {}
 	#canProxy = false
 

package/src/client/app.css

@@ -12,8 +12,8 @@
 	--colorLabel: light-dark(#555, #aaa);
 	--colorText: light-dark(#000, #fff);
 
-	--colorAccent: light-dark(#0059dd, #2495ff);
-	--colorHover: light-dark(#c1e2ff, #062d59);
+	--colorAccent: light-dark(#0081ff, #2495ff);
+	--colorHover: light-dark(#dbedff, #062d59);
 
 	--colorRed: light-dark(#da0f00, #f41606);
 	--colorPink: light-dark(#ed206a, #f92672);
@@ -420,6 +420,7 @@ main {
 .Table {
 	height: 100%;
 	padding: 16px;
+	padding-bottom: 64px;
 	padding-left: 12px;
 	user-select: none;
 	overflow-y: auto;
@@ -462,6 +463,7 @@ main {
 			overflow: hidden;
 			align-items: center;
 			padding: 5px 0;
+			font-weight: 500;
 			font-size: 12px;
 			list-style: none;
 			cursor: pointer;
@@ -516,7 +518,7 @@ main {
 		}
 
 		&[open] {
-			&:has(summary:hover) {
+			&:has(summary:hover):not(:has(details:hover)) {
 				background: linear-gradient(90deg, var(--colorHover), var(--colorBg));
 			}
 
@@ -567,6 +569,7 @@ main {
 	padding: 6px 8px;
 	margin-right: -2px;
 	margin-left: 4px;
+	font-weight: 500;
 	border-radius: var(--radius);
 	word-break: break-word;
 
@@ -578,7 +581,7 @@ main {
 		background: var(--colorAccent);
 	}
 	.dittoDir {
-		opacity: 0.9;
+		opacity: 0.8;
 		filter: saturate(0.1);
 	}
 }

package/src/client/app.js

@@ -3,6 +3,7 @@ import { createElement as r, t, classNames, restoreFocus, Fragment, defineClassN
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
 import { Header } from './app-header.js'
+import { dirStructure } from './dirStructure.js'
 import { PayloadViewer, previewMock } from './app-payload-viewer.js'
 import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
 
@@ -100,15 +101,27 @@ function MockList() {
 			r('div', {
 				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
 			}, method),
-			FolderGroups(store.folderGroupsByMethod(method))))
+			FolderGroups(store.brokersAsRowsByMethod(method))))
 
-	return FolderGroups(store.folderGroupsByMethod('*'))
+	return FolderGroups(store.brokersAsRowsByMethod('*'))
 }
 
-function FolderGroups(groups) {
-	return groups.map(({ folder, children }) => children.length === 1
-		? Row(children[0], 0)
-		: r('details', {
+function FolderGroups(bRows) {
+	const res = []
+	for (const b of dirStructure(bRows)) {
+		if (!b.children.length)
+			res.push(Row(b))
+		else
+			res.push(FolderGroup(b))
+	}
+	return res
+}
+
+function FolderGroup(broker) {
+	const folder = broker.urlMask
+	const children = broker.children
+	return (
+		r('details', {
 				className: CSS.FolderGroup,
 				open: !store.collapsedFolders.has(folder),
 				onToggle() {
@@ -124,14 +137,14 @@ function FolderGroups(groups) {
 							store.canProxy && CSS.canProxy)
 					},
 					folder + '…')),
-			children.map(Row)))
+			Row(broker),
+			children.map(c => c.children.length
+				? FolderGroup(c)
+				: Row(c))))
 }
 
-/**
- * @param {BrokerRowModel} row
- * @param {number} i
- */
-function Row(row, i) {
+/** @param {BrokerRowModel} row */
+function Row(row) {
 	const { method, urlMask } = row
 	return (
 		r('div', {
@@ -159,7 +172,7 @@ function Row(row, i) {
 
 			!store.groupByMethod && r('span', { className: CSS.Method }, method),
 
-			PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0),
+			PreviewLink(method, urlMask, row.urlMaskDittoed),
 
 			MockSelector(row)))
 }
@@ -204,7 +217,7 @@ function renderRow(method, urlMask) {
 
 
 
-function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
+function PreviewLink(method, urlMask, urlMaskDittoed) {
 	function onClick(event) {
 		event.preventDefault()
 		store.previewLink(method, urlMask)
@@ -215,7 +228,6 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 		r('a', {
 			className: classNames(CSS.PreviewLink, isChosen && CSS.chosen),
 			href: urlMask,
-			autofocus,
 			onClick
 		}, ditto
 			? [r('span', { className: CSS.dittoDir }, ditto), tail]

package/src/client/dirStructure.js

@@ -0,0 +1,83 @@
+class TrieNode {
+	constructor() {
+		this.items = []
+		this.kids = new Map()
+	}
+}
+
+// TODO it should ignore query string
+
+/**
+ * @typedef {{method: string, urlMask:string, children: BrokerLite[]}} BrokerLite
+ * @param {BrokerLite[]} brokers
+ * @returns {BrokerLite[]}
+ */
+export function dirStructure(brokers) {
+	const root = new TrieNode()
+
+	for (let b of brokers) {
+		let curr = root
+		for (const seg of b.urlMask.split('/').filter(Boolean)) {
+			if (!curr.kids.has(seg))
+				curr.kids.set(seg, new TrieNode())
+			curr = curr.kids.get(seg)
+		}
+		curr.items.push(b)
+	}
+
+	const result = []
+	for (const child of root.kids.values())
+		result.push(...convertNode(child))
+
+	if (root.items.length) {
+		const elems = [root.items[0], ...result]
+		for (let i = 1; i < root.items.length; i++)
+			elems.push(root.items[i])
+
+		const parentNode = elems[0]
+		for (let i = 1; i < elems.length; i++)
+			parentNode.children.push(elems[i])
+
+		return [parentNode]
+	}
+
+	return result
+}
+
+/**
+ * Recursively converts a TrieNode into a flattened, nested array of objects.
+ * Flattens the tree by having the first available route at a given directory level
+ * act as the parent wrapper for the remaining items and subdirectories.
+ *
+ * @param {TrieNode} node
+ * @returns {BrokerLite[]}
+ */
+function convertNode(node) {
+	const childNodes = []
+	for (const child of node.kids.values())
+		childNodes.push(...convertNode(child))
+
+	const elems = []
+	if (node.items.length) {
+		elems.push(node.items[0])
+		elems.push(...childNodes)
+		for (let i = 1; i < node.items.length; i++)
+			elems.push(node.items[i])
+	}
+	else
+		elems.push(...childNodes)
+
+	if (!elems.length)
+		return []
+
+	const parentNode = elems[0]
+
+	if (node.items.length || !parentNode.children.length) {
+		for (let i = 1; i < elems.length; i++)
+			parentNode.children.push(elems[i])
+		return [parentNode]
+	}
+
+	return elems
+}
+

package/src/client/dirStructure.test.js

@@ -0,0 +1,86 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { dirStructure } from './dirStructure.js'
+
+
+const input = [
+	{ children: [], method: 'GET', urlMask: '/api/user' },
+	{ children: [], method: 'GET', urlMask: '/api/user/avatar' },
+	{ children: [], method: 'GET', urlMask: '/api/video/[id]' },
+	{ children: [], method: 'GET', urlMask: '/index.html' },
+	{ children: [], method: 'GET', urlMask: '/media/file-a.txt' },
+	{ children: [], method: 'GET', urlMask: '/media/file-b.txt' },
+	{ children: [], method: 'GET', urlMask: '/media/sub/file-aa.txt' },
+	{ children: [], method: 'GET', urlMask: '/media/sub/file-bb.txt' },
+	{ children: [], method: 'POST', urlMask: '/api/user' },
+	{ children: [], method: 'POST', urlMask: '/api/user/avatar/foo' },
+	{ children: [], method: 'PATCH', urlMask: '/api/user' }
+]
+
+
+const expected = [
+	{
+		urlMask: '/api/user',
+		method: 'GET',
+		children: [
+			{
+				urlMask: '/api/user/avatar',
+				method: 'GET',
+				children: [
+					{
+						urlMask: '/api/user/avatar/foo',
+						method: 'POST',
+						children: []
+					}
+				]
+			},
+			{
+				urlMask: '/api/user',
+				method: 'POST',
+				children: []
+			},
+			{
+				urlMask: '/api/user',
+				method: 'PATCH',
+				children: []
+			}
+		]
+	},
+	{
+		urlMask: '/api/video/[id]',
+		method: 'GET',
+		children: []
+	},
+	{
+		urlMask: '/index.html',
+		method: 'GET',
+		children: []
+	},
+	{
+		urlMask: '/media/file-a.txt',
+		method: 'GET',
+		children: [
+			{
+				urlMask: '/media/file-b.txt',
+				method: 'GET',
+				children: []
+			},
+			{
+				urlMask: '/media/sub/file-aa.txt',
+				method: 'GET',
+				children: [
+					{
+						urlMask: '/media/sub/file-bb.txt',
+						method: 'GET',
+						children: []
+					}
+				]
+			}
+		]
+	}
+]
+
+test('acceptance', () => {
+	deepEqual(dirStructure(input), expected)
+})
+

package/src/server/Mockaton.js

@@ -5,8 +5,8 @@ import pkgJSON from '../../package.json' with { type: 'json' }
 
 import { logger } from './utils/logger.js'
 import { ServerResponse } from './utils/HttpServerResponse.js'
-import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
+import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 
 import { API } from '../client/ApiConstants.js'
 

package/src/server/Watcher.js

@@ -4,7 +4,6 @@ import { EventEmitter } from 'node:events'
 
 import { config } from './config.js'
 import { isFile, isDirectory } from './utils/fs.js'
-
 import * as mockBrokerCollection from './mockBrokersCollection.js'