mockaton 13.3.4 → 13.3.5

package/package.json

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

package/src/client/app-header.js

@@ -1,11 +1,12 @@
-import { createElement as r, t, defineClassNames } from './dom-utils.js'
+import { createElement as r, t, extractClassNames } from './dom-utils.js'
 import { Logo, HelpIcon } from './graphics.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-defineClassNames(CSS)
 
 
+Object.assign(CSS, extractClassNames(CSS))
+
 export function Header() {
 	return (
 		r('header', null,

package/src/client/app-payload-viewer.js

@@ -1,12 +1,13 @@
-import { createElement as r, t, defineClassNames } from './dom-utils.js'
+import { createElement as r, t, extractClassNames } from './dom-utils.js'
 import { HEADER_502 } from './ApiConstants.js'
 import { parseFilename } from './Filename.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-defineClassNames(CSS)
 
 
+Object.assign(CSS, extractClassNames(CSS))
+
 const titleRef = {}
 const codeRef = {}
 

package/src/client/app-store.js

@@ -1,5 +1,7 @@
 import { Commander } from './ApiCommander.js'
+import { dittoSplitPaths, groupByFolder } from './dir-tree.js'
 import { parseFilename, extractComments } from './Filename.js'
+import { QueryParamBool, LocalStorageSet } from './dom-utils.js'
 import { EXT_UNKNOWN_MIME, EXT_EMPTY } from './ApiConstants.js'
 
 
@@ -22,25 +24,21 @@ export const store = {
 	collectProxied: false,
 	proxyFallback: '',
 	showProxyField: null,
-	get canProxy() {
-		return Boolean(store.proxyFallback)
-	},
+	get canProxy() { return Boolean(store.proxyFallback) },
 
-	groupByMethod: initPreference('groupByMethod'),
+	_groupByMethod: new QueryParamBool('groupByMethod'),
+	get groupByMethod() { return store._groupByMethod.value },
 	toggleGroupByMethod() {
-		store.groupByMethod = !store.groupByMethod
-		togglePreference('groupByMethod', store.groupByMethod)
+		store._groupByMethod.toggle()
 		store.render()
 	},
 
-	collapsedFolders: new Set(JSON.parse(globalThis.localStorage?.getItem('collapsedFolders') || '[]')),
+	collapsedFolders: new LocalStorageSet('collapsedFolders'),
 	setFolderCollapsed(folder, collapsed) {
 		if (collapsed)
 			store.collapsedFolders.add(folder)
 		else
 			store.collapsedFolders.delete(folder)
-
-		globalThis.localStorage?.setItem('collapsedFolders', JSON.stringify([...store.collapsedFolders]))
 	},
 
 	chosenLink: { method: '', urlMask: '' },
@@ -123,10 +121,6 @@ export const store = {
 
 	_dittoCache: new Map(),
 
-	brokerFor(method, urlMask) {
-		return store.brokersByMethod[method]?.[urlMask]
-	},
-
 	brokerAsRow(method, urlMask) {
 		const b = store.brokerFor(method, urlMask)
 		const r = new BrokerRowModel(b, store.canProxy)
@@ -134,13 +128,15 @@ export const store = {
 		return r
 	},
 
-	_setBroker(broker) {
-		const { method, urlMask } = parseFilename(broker.file)
-		store.brokersByMethod[method] ??= {}
-		store.brokersByMethod[method][urlMask] = broker
+	brokerFor(method, urlMask) {
+		return store.brokersByMethod[method]?.[urlMask]
+	},
+
+	folderGroupsByMethod(method) {
+		return groupByFolder(store._brokersAsRowsByMethod(method))
 	},
 
-	brokersAsRowsByMethod(method) {
+	_brokersAsRowsByMethod(method) {
 		const rows = store._brokersAsArray(method)
 			.map(b => new BrokerRowModel(b, store.canProxy))
 			.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
@@ -200,11 +196,15 @@ export const store = {
 		store._request(() => api.setRouteIsDelayed(method, urlMask, checked), async response => {
 			store._setBroker(await response.json())
 		})
+	},
+
+	_setBroker(broker) {
+		const { method, urlMask } = parseFilename(broker.file)
+		store.brokersByMethod[method] ??= {}
+		store.brokersByMethod[method][urlMask] = broker
 	}
 }
 
-
-
 // When false, the URL will be updated with param=false
 function initPreference(param) {
 	const qs = new URLSearchParams(globalThis.location?.search)
@@ -237,33 +237,6 @@ function togglePreference(param, nextVal) {
 
 
 
-/**
- * Think of this as a way of printing a directory tree in which
- * the repeated folder paths are kept but styled differently.
- * @param {string[]} paths - sorted
- */
-export function dittoSplitPaths(paths) {
-	const pParts = paths.map(p => p.split('/').filter(Boolean))
-	return paths.map((p, i) => {
-		if (i === 0)
-			return ['', p]
-
-		const prev = pParts[i - 1]
-		const curr = pParts[i]
-		const min = Math.min(curr.length, prev.length)
-		let j = 0
-		while (j < min && curr[j] === prev[j])
-			j++
-
-		if (!j) // no common dirs
-			return ['', p]
-
-		const ditto = '/' + curr.slice(0, j).join('/') + '/'
-		return [ditto, p.slice(ditto.length)]
-	})
-}
-
-
 export class BrokerRowModel {
 	opts = /** @type {[key:string, label:string, selected:boolean][]} */ []
 	isNew = false

package/src/client/app-store.test.js

@@ -1,31 +1,7 @@
 import { test } from 'node:test'
 import { deepEqual } from 'node:assert/strict'
 
-import { dittoSplitPaths, BrokerRowModel, t } from './app-store.js'
-
-
-test('dittoSplitPaths', () => {
-	const input = [
-		'/api/user',
-		'/api/user/avatar',
-		'/api/user/friends',
-		'/api/vid',
-		'/api/video/id',
-		'/api/video/stats',
-		'/v2/foo',
-		'/v2/foo/bar'
-	]
-	deepEqual(dittoSplitPaths(input), [
-		['', '/api/user'],
-		['/api/user/', 'avatar'],
-		['/api/user/', 'friends'],
-		['/api/', 'vid'],
-		['/api/', 'video/id'],
-		['/api/video/', 'stats'],
-		['', '/v2/foo'],
-		['/v2/foo/', 'bar']
-	])
-})
+import { BrokerRowModel, t } from './app-store.js'
 
 
 test('BrokerRowModel', () => {

package/src/client/app.css

@@ -185,15 +185,19 @@ header {
 	}
 
 	.HelpLink {
-		width: 24px;
-		height: 24px;
+		width: 22px;
+		height: 22px;
 		flex-shrink: 0;
 		align-self: end;
-		margin-bottom: 2px;
+		margin-bottom: 3px;
 		margin-left: auto;
 		border-radius: 50%;
-		fill: white;
-		background: var(--colorAccent);
+		fill: var(--colorBgHeader);
+		background: var(--colorLabel);
+
+		&:hover {
+			background: var(--colorAccent);
+		}
 
 		svg {
 			transform: scale(.7);

package/src/client/app.js

@@ -1,16 +1,15 @@
-import { createElement as r, t, classNames, restoreFocus, Fragment, defineClassNames } from './dom-utils.js'
+import { createElement as r, t, restoreFocus, Fragment, classNames, extractClassNames } from './dom-utils.js'
 
 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'
 
 import CSS from './app.css' with { type: 'css' }
 document.adoptedStyleSheets.push(CSS)
-defineClassNames(CSS)
 
+Object.assign(CSS, extractClassNames(CSS))
 
 store.onError = onError
 store.render = render
@@ -100,14 +99,14 @@ function MockList() {
 			r('div', {
 				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
 			}, method),
-			FolderGroups(store.brokersAsRowsByMethod(method))))
+			FolderGroups(store.folderGroupsByMethod(method))))
 
-	return FolderGroups(store.brokersAsRowsByMethod('*'))
+	return FolderGroups(store.folderGroupsByMethod('*'))
 }
 
-function FolderGroups(bRows) {
+function FolderGroups(brokersTree) {
 	const res = []
-	for (const b of dirStructure(bRows)) {
+	for (const b of brokersTree) {
 		if (!b.children.length)
 			res.push(Row(b))
 		else

package/src/client/dir-tree.js

@@ -0,0 +1,82 @@
+/**
+ * Think of this as a way of printing a directory tree in which
+ * the repeated folder paths are kept but styled differently.
+ * @param {string[]} paths - sorted
+ */
+export function dittoSplitPaths(paths) {
+	const pParts = paths.map(p => p.split('/').filter(Boolean))
+	return paths.map((p, i) => {
+		if (i === 0)
+			return ['', p]
+
+		const prev = pParts[i - 1]
+		const curr = pParts[i]
+		const min = Math.min(curr.length, prev.length)
+		let j = 0
+		while (j < min && curr[j] === prev[j])
+			j++
+
+		if (!j) // no common dirs
+			return ['', p]
+
+		const ditto = '/' + curr.slice(0, j).join('/') + '/'
+		return [ditto, p.slice(ditto.length)]
+	})
+}
+
+
+
+/**
+ * @param {Partial<BrokerRowModel>[]} brokers
+ * @returns {Partial<BrokerRowModel>[]}
+ */
+export function groupByFolder(brokers) {
+	return dfs(trie(brokers))
+}
+
+function trie(brokers) {
+	const root = new TrieNode()
+	for (const b of brokers) {
+		let node = root
+		for (const seg of b.urlMask.split('/')) { // TODO it should ignore query string
+			const segNode = node.getChild(seg) || new TrieNode()
+			node.addChild(seg, segNode)
+			node = segNode
+		}
+		node.brokers.push(b)
+	}
+	return root
+}
+
+class TrieNode {
+	#children
+	constructor() {
+		this.brokers = []
+		this.#children = new Map()
+	}
+	addChild(k, v) { this.#children.set(k, v) }
+	getChild(k) { return this.#children.get(k) }
+	getChildren() { return this.#children.values() }
+}
+
+/** @param {TrieNode} node */
+function dfs(node) {
+	const childBrokers = []
+	for (const tnc of node.getChildren())
+		childBrokers.push(...dfs(tnc))
+
+	const brokers = node.brokers.length
+		? [node.brokers[0], ...childBrokers, ...node.brokers.slice(1)]
+		: childBrokers
+
+	if (!brokers.length)
+		return []
+
+	const [b0, ...rest] = brokers
+	if (node.brokers.length || !b0.children.length) {
+		b0.children.push(...rest)
+		return [b0]
+	}
+	return brokers
+}
+

package/src/client/dir-tree.test.js

@@ -0,0 +1,106 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { groupByFolder, dittoSplitPaths } from './dir-tree.js'
+
+
+test('dittoSplitPaths', () => {
+	const input = [
+		'/api/user',
+		'/api/user/avatar',
+		'/api/user/friends',
+		'/api/vid',
+		'/api/video/id',
+		'/api/video/stats',
+		'/v2/foo',
+		'/v2/foo/bar'
+	]
+	deepEqual(dittoSplitPaths(input), [
+		['', '/api/user'],
+		['/api/user/', 'avatar'],
+		['/api/user/', 'friends'],
+		['/api/', 'vid'],
+		['/api/', 'video/id'],
+		['/api/video/', 'stats'],
+		['', '/v2/foo'],
+		['/v2/foo/', 'bar']
+	])
+})
+
+
+test('dirStructure', () => {
+	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: []
+						}
+					]
+				}
+			]
+		}
+	]
+
+	deepEqual(groupByFolder(input), expected)
+})

package/src/client/dom-utils-test.js

@@ -0,0 +1,74 @@
+import { test } from 'node:test'
+import { deepEqual, equal } from 'node:assert/strict'
+import { classNames, extractClassNames } from './dom-utils.js'
+
+
+test('classNames', () => equal(classNames('a', false && 'b'), 'a'))
+
+
+test('extractClassNames', () => {
+	const cssRules = [
+		{ cssText: '.TopLevelPascal { color: red; }' },
+		{ cssText: '.topLevelCamel { color: blue; }' },
+		{ cssText: '.top_level_snake { color: green; }' },
+		{ cssText: '.top-level-kebab { color: yellow; }' },
+		{ cssText: '.Level2Parent {\n  & .level2ChildCamel { color: purple; }\n}' },
+		{ cssText: '.level2Base {\n  &.level2ModifierCamel { font-weight: bold; }\n}' },
+		{ cssText: '.Level3Parent {\n  & .level3ChildCamel {\n  & .level3_grand_child_snake { color: orange; }\n}\n}' },
+		{ cssText: '.pseudoParent {\n  &:hover { background: red; }\n  & .pseudoNestedChild { color: pink; }\n}' },
+		{ cssText: '.multiClass1, .multi_class_2 { padding: 10px; }' },
+		{ cssText: '.combParent {\n  & > .combChildDirect { margin: 5px; }\n}' },
+		{ cssText: '.siblingBase {\n  & + .siblingAdjacent { border: 1px solid; }\n}' },
+		{ cssText: '@media (max-width: 768px) {\n  .mediaQueryClass {\n  & .mqNestedChild { display: none; }\n}\n}' },
+		{ cssText: '.class_with_123_numbers { color: cyan; }' },
+		{ cssText: '._privateStyleClass { opacity: 0.5; }' },
+		{ cssText: '.stringTest { content: ".shouldNotBeExtracted"; background: url(".alsoIgnored"); }' },
+		{ cssText: '.ComplexRoot {\n  & .level2-kebab {\n  &.level2ModCamel { color: red; }\n  & .level3_snake {\n  & .level4PascalChild { color: blue; }\n}\n}\n}' }
+	]
+
+	const expected = {
+		TopLevelPascal: null,
+		topLevelCamel: null,
+		top_level_snake: null,
+		'top-level-kebab': null,
+
+		Level2Parent: null,
+		level2ChildCamel: null,
+		level2Base: null,
+		level2ModifierCamel: null,
+
+		Level3Parent: null,
+		level3ChildCamel: null,
+		level3_grand_child_snake: null,
+
+		pseudoParent: null,
+		pseudoNestedChild: null,
+
+		multiClass1: null,
+		multi_class_2: null,
+
+		combParent: null,
+		combChildDirect: null,
+
+		siblingBase: null,
+		siblingAdjacent: null,
+
+		mediaQueryClass: null,
+		mqNestedChild: null,
+
+		class_with_123_numbers: null,
+		_privateStyleClass: null,
+
+		stringTest: null,
+
+		ComplexRoot: null,
+		'level2-kebab': null,
+		level2ModCamel: null,
+		level3_snake: null,
+		level4PascalChild: null
+	}
+	for (const k of Object.keys(expected))
+		expected[k] = k
+
+	deepEqual(extractClassNames({ cssRules }), expected)
+})

package/src/client/dom-utils.js

@@ -70,12 +70,9 @@ function selectorFor(elem) {
 }
 
 
-export function defineClassNames(sheet) {
-	Object.assign(sheet, extractClassNames(sheet))
-}
-
 export function extractClassNames({ cssRules }) {
 	// Class names must begin with _ or a letter, then it can have numbers and hyphens
+	// TODO think about tag.className selectors
 	const reClassName = /(?:^|[\s,{>])&?\s*\.([a-zA-Z_][\w-]*)/g
 	const cNames = {}
 	let match
@@ -85,3 +82,73 @@ export function extractClassNames({ cssRules }) {
 	return cNames
 }
 
+
+export class QueryParamBool {
+	constructor(param) {
+		this.param = param
+		this.value = this.#init()
+	}
+
+	#init() {
+		const qs = new URLSearchParams(globalThis.location?.search)
+		if (qs.has(this.param))
+			return qs.get(this.param) !== '0'
+		const stored = globalThis.localStorage?.getItem(this.param) !== '0'
+		if (!stored)
+			this.#applyToUrl(false)
+		return stored
+	}
+
+	toggle() {
+		this.value = !this.value
+		if (this.value)
+			globalThis.localStorage?.removeItem(this.param)
+		else
+			globalThis.localStorage?.setItem(this.param, '0')
+		this.#applyToUrl(this.value)
+	}
+
+	#applyToUrl(nextVal) {
+		const url = new URL(globalThis.location?.href)
+		if (nextVal)
+			url.searchParams.delete(this.param)
+		else
+			url.searchParams.set(this.param, '0')
+		history.replaceState(null, '', url)
+	}
+}
+
+
+export class LocalStorageSet {
+	constructor(key) {
+		this.key = key
+		this.value = this.#parse()
+	}
+
+	add(item) {
+		this.value.add(item)
+		this.#persist()
+	}
+
+	delete(item) {
+		this.value.delete(item)
+		this.#persist()
+	}
+
+	has(item) {
+		return this.value.has(item)
+	}
+
+	#parse() {
+		try {
+			return new Set(JSON.parse(globalThis.localStorage?.getItem(this.key) || '[]'))
+		}
+		catch {
+			return new Set()
+		}
+	}
+
+	#persist() {
+		globalThis.localStorage?.setItem(this.key, JSON.stringify([...this.value]))
+	}
+}

package/src/client/graphics.js

@@ -4,7 +4,7 @@ import { createSvgElement as s } from './dom-utils.js'
 export const Logo = () =>
 	s('svg', { viewBox: '0 0 556 100' },
 		s('path', { d: 'm13.75 1.8789c-5.9487 0.19352-10.865 4.5652-11.082 11.686v81.445c-1e-7 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-64.982c0.02794-3.4488 3.0988-3.5551 4.2031-1.1562l16.615 59.059c1.4393 5.3711 5.1083 7.9633 8.7656 7.9473 3.6573 0.01603 7.3263-2.5762 8.7656-7.9473l16.615-59.059c1.1043-2.3989 4.1752-2.2925 4.2031 1.1562v64.982c0 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-81.445c-0.17732-7.0807-5.1334-11.492-11.082-11.686-5.9487-0.19352-12.652 3.8309-15.609 13.619l-15.686 57.334-15.686-57.334c-2.9569-9.7882-9.6607-13.813-15.609-13.619zm239.19 0.074219c-2.216 0-4 1.784-4 4v89.057c0 2.216 1.784 4 4 4h4.793c2.216 0 3.9868-1.784 4-4l0.10644-17.94c0.0734-0.07237 12.175-13.75 12.175-13.75 5.6772 11.091 11.404 22.158 17.113 33.232 1.0168 1.9689 3.4217 2.7356 5.3906 1.7188l4.2578-2.1992c1.9689-1.0168 2.7356-3.4217 1.7188-5.3906-6.4691-12.585-12.958-25.16-19.442-37.738l17.223-19.771c1.4555-1.671 1.2803-4.189-0.39062-5.6445l-3.6133-3.1465c-0.73105-0.63679-1.6224-0.96212-2.5176-0.98633-1.151-0.03113-2.3063 0.43508-3.125 1.375l-28.896 33.174v-51.99c0-2.216-1.784-4-4-4zm-58.255 23.316c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312l-0.125-7.8457c0-2.216-1.784-4-4-4h-4.6524c-2.216 0-4 1.784-4 4l3e-3 6.7888c3e-3 3.8063-1.5601 9.3694-8.4716 9.3694h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.6937 0 8.3697 5.2207 8.4687 11.828v2.2207c0 2.216 1.784 4 4 4h4.6524c2.216 0 4-1.784 4-4l0.125-5.7363c0-10.699-8.6117-19.312-19.311-19.312zm-72.182 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' }),
-		s('path', { opacity: 1, fill: 'currentColor', d: 'm331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z' }),
+		s('path', { opacity: 0.85, fill: 'currentColor', d: 'm331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z' }),
 		s('path', { d: 'm392.75 1.373c-2.216 0-4 1.784-4 4v18.043h-5.3086c-2.216 0-4 1.784-4 4v4.793c0 2.216 1.784 4 4 4h5.3086v51.398c0 6.1465 3.7064 10.823 9.232 10.823h16.531c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-12.97v-49.428h9.8711c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-9.8711v-18.043c0-2.216-1.784-4-4-4zm122.96 23.896c-10.699 0-19.312 8.6137-19.312 19.312v49.812c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-45.648c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v45.684c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312zm-69.999 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' }))
 
 export const TimerIcon = () =>

package/src/server/Mockaton.js

@@ -10,6 +10,7 @@ import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpI
 
 import { API } from '../client/ApiConstants.js'
 
+import { cookie } from './cookie.js'
 import { config, setup } from './config.js'
 import { apiPatchReqs, apiGetReqs } from './Api.js'
 
@@ -24,6 +25,7 @@ import { watchMocksDir } from './Watcher.js'
 export function Mockaton(options) {
 	return new Promise((resolve, reject) => {
 		setup(options)
+		cookie.init(config.cookies)
 		mockBrokerCollection.init()
 
 		if (config.watcherEnabled) {

package/src/client/dirStructure.js

@@ -1,47 +0,0 @@
-function TrieNode() {
-	this.brokers = []
-	this.tnChildren = new Map()
-}
-
-/**
- * @param {Partial<BrokerRowModel>[]} brokers
- * @returns {Partial<BrokerRowModel>[]}
- */
-export function dirStructure(brokers) {
-	return dfs(trie(brokers))
-}
-
-function trie(brokers) {
-	const root = new TrieNode()
-	for (const b of brokers) {
-		let node = root
-		for (const seg of b.urlMask.split('/')) { // TODO it should ignore query string
-			const segNode = node.tnChildren.get(seg) || new TrieNode()
-			node.tnChildren.set(seg, segNode)
-			node = segNode
-		}
-		node.brokers.push(b)
-	}
-	return root
-}
-
-/** @param {TrieNode} node */
-function dfs(node) {
-	const childBrokers = []
-	for (const tnc of node.tnChildren.values())
-		childBrokers.push(...dfs(tnc))
-
-	const brokers = node.brokers.length
-		? [node.brokers[0], ...childBrokers, ...node.brokers.slice(1)]
-		: childBrokers
-
-	if (!brokers.length)
-		return []
-
-	const [head, ...rest] = brokers
-	if (node.brokers.length || !head.children.length) {
-		head.children.push(...rest)
-		return [head]
-	}
-	return brokers
-}

package/src/client/dirStructure.test.js

@@ -1,81 +0,0 @@
-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/client/dom-utils.test.js

@@ -1,76 +0,0 @@
-import { test } from 'node:test'
-import { deepEqual, equal } from 'node:assert/strict'
-import { extractClassNames, classNames } from './dom-utils.js'
-
-
-test('classNames', () => {
-	equal(classNames('a', false && 'b'), 'a')
-})
-
-
-const cssRules = [
-	{ cssText: '.TopLevelPascal { color: red; }' },
-	{ cssText: '.topLevelCamel { color: blue; }' },
-	{ cssText: '.top_level_snake { color: green; }' },
-	{ cssText: '.top-level-kebab { color: yellow; }' },
-	{ cssText: '.Level2Parent {\n  & .level2ChildCamel { color: purple; }\n}' },
-	{ cssText: '.level2Base {\n  &.level2ModifierCamel { font-weight: bold; }\n}' },
-	{ cssText: '.Level3Parent {\n  & .level3ChildCamel {\n  & .level3_grand_child_snake { color: orange; }\n}\n}' },
-	{ cssText: '.pseudoParent {\n  &:hover { background: red; }\n  & .pseudoNestedChild { color: pink; }\n}' },
-	{ cssText: '.multiClass1, .multi_class_2 { padding: 10px; }' },
-	{ cssText: '.combParent {\n  & > .combChildDirect { margin: 5px; }\n}' },
-	{ cssText: '.siblingBase {\n  & + .siblingAdjacent { border: 1px solid; }\n}' },
-	{ cssText: '@media (max-width: 768px) {\n  .mediaQueryClass {\n  & .mqNestedChild { display: none; }\n}\n}' },
-	{ cssText: '.class_with_123_numbers { color: cyan; }' },
-	{ cssText: '._privateStyleClass { opacity: 0.5; }' },
-	{ cssText: '.stringTest { content: ".shouldNotBeExtracted"; background: url(".alsoIgnored"); }' },
-	{ cssText: '.ComplexRoot {\n  & .level2-kebab {\n  &.level2ModCamel { color: red; }\n  & .level3_snake {\n  & .level4PascalChild { color: blue; }\n}\n}\n}' }
-]
-
-const expected = {
-	TopLevelPascal: null,
-	topLevelCamel: null,
-	top_level_snake: null,
-	'top-level-kebab': null,
-
-	Level2Parent: null,
-	level2ChildCamel: null,
-	level2Base: null,
-	level2ModifierCamel: null,
-
-	Level3Parent: null,
-	level3ChildCamel: null,
-	level3_grand_child_snake: null,
-
-	pseudoParent: null,
-	pseudoNestedChild: null,
-
-	multiClass1: null,
-	multi_class_2: null,
-
-	combParent: null,
-	combChildDirect: null,
-
-	siblingBase: null,
-	siblingAdjacent: null,
-
-	mediaQueryClass: null,
-	mqNestedChild: null,
-
-	class_with_123_numbers: null,
-	_privateStyleClass: null,
-
-	stringTest: null,
-
-	ComplexRoot: null,
-	'level2-kebab': null,
-	level2ModCamel: null,
-	level3_snake: null,
-	level4PascalChild: null
-}
-for (const k of Object.keys(expected))
-	expected[k] = k
-
-
-test('extracts', () => deepEqual(extractClassNames({ cssRules }), expected))
-