mockaton 13.3.1 → 13.3.3

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "13.3.1",
+	"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))
@@ -174,7 +160,7 @@ export const store = {
 				arr.push(...Object.values(brokers))
 		return arr
 	},
-	
+
 
 	previewLink(method, urlMask) {
 		store.setChosenLink(method, 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(#bbe0ff, #062d59);
+	--colorAccent: light-dark(#0081ff, #2495ff);
+	--colorHover: light-dark(#dbedff, #062d59);
 
 	--colorRed: light-dark(#da0f00, #f41606);
 	--colorPink: light-dark(#ed206a, #f92672);
@@ -50,6 +50,11 @@ body {
 	corner-shape: squircle;
 }
 
+label,
+button {
+	user-select: none;
+}
+
 a:focus-visible,
 input:focus-visible,
 select:focus-visible,
@@ -415,6 +420,7 @@ main {
 .Table {
 	height: 100%;
 	padding: 16px;
+	padding-bottom: 64px;
 	padding-left: 12px;
 	user-select: none;
 	overflow-y: auto;
@@ -449,6 +455,7 @@ main {
 
 	.FolderGroup {
 		position: relative;
+		border-radius: var(--radius);
 
 		> summary {
 			left: 0;
@@ -456,6 +463,7 @@ main {
 			overflow: hidden;
 			align-items: center;
 			padding: 5px 0;
+			font-weight: 500;
 			font-size: 12px;
 			list-style: none;
 			cursor: pointer;
@@ -465,7 +473,6 @@ main {
 			text-overflow: ellipsis;
 			border-radius: var(--radius);
 
-
 			&:active {
 				cursor: grabbing;
 			}
@@ -475,7 +482,7 @@ main {
 			}
 
 			&:hover {
-				color: var(--colorText);
+				background: var(--colorHover);
 			}
 
 			.FolderName {
@@ -510,17 +517,23 @@ main {
 			}
 		}
 
-		&[open] > summary {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 16px;
-
-			.FolderChevron {
-				transform: rotate(0deg);
+		&[open] {
+			&:has(summary:hover):not(:has(details:hover)) {
+				background: linear-gradient(90deg, var(--colorHover), var(--colorBg));
 			}
-			.FolderName {
-				display: none;
+
+			> summary {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 16px;
+
+				.FolderChevron {
+					transform: rotate(0deg);
+				}
+				.FolderName {
+					display: none;
+				}
 			}
 		}
 	}
@@ -556,6 +569,7 @@ main {
 	padding: 6px 8px;
 	margin-right: -2px;
 	margin-left: 4px;
+	font-weight: 500;
 	border-radius: var(--radius);
 	word-break: break-word;
 
@@ -567,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,21 +101,30 @@ 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 }) => {
-		if (children.length === 1)
-			return Row(children[0], 0)
+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
+}
 
-		return r('details', {
+function FolderGroup(broker) {
+	const folder = broker.urlMask
+	const children = broker.children
+	return (
+		r('details', {
 				className: CSS.FolderGroup,
 				open: !store.collapsedFolders.has(folder),
 				onToggle() {
-					// TODO alt+click exclusive open
 					store.setFolderCollapsed(folder, !this.open)
 				}
 			},
@@ -127,15 +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', {
@@ -163,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)))
 }
@@ -208,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)
@@ -219,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/Api.js

@@ -88,6 +88,7 @@ function getState(_, response) {
 
 function reset(_, response) {
 	mockBrokersCollection.init()
+	cookie.init(config.cookies)
 	response.ok()
 	uiSyncVersion.increment()
 }

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'
 
 

package/src/server/mockBrokersCollection.js

@@ -1,6 +1,5 @@
 import { basename } from 'node:path'
 
-import { cookie } from './cookie.js'
 import { MockBroker } from './MockBroker.js'
 import { parseFilename } from '../client/Filename.js'
 import { listFilesRecursively } from './utils/fs.js'
@@ -28,19 +27,16 @@ export const all = () => collection
 
 export function init() {
 	collection = {}
-	cookie.init(config.cookies)
-
 	listFilesRecursively(config.mocksDir)
 		.sort()
 		.forEach(f => registerMock(f))
-
 	forEachBroker(b => b.selectDefaultFile())
 }
 
 /** @returns {boolean} registered */
 export function registerMock(file, isFromWatcher = false) {
-	if (brokerByFilename(file)?.hasMock(file)
-		|| !isFileAllowed(basename(file)))
+	if (brokerByFilename(file)?.hasMock(file) || 
+		!isFileAllowed(basename(file)))
 		return false
 
 	const { method, urlMask } = parseFilename(file)