mockaton 13.3.3 → 13.3.5

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "13.3.3",
+	"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 = {}
 
@@ -93,8 +94,6 @@ export async function previewMock() {
 
 
 async function updatePayloadViewer(proxied, file, response) {
-	const mime = response.headers.get('content-type') || ''
-
 	titleRef.elem.replaceChildren(proxied
 		? PayloadViewerTitleWhenProxied(response)
 		: PayloadViewerTitle(file, response.statusText))
@@ -104,6 +103,12 @@ async function updatePayloadViewer(proxied, file, response) {
 		return
 	}
 
+	async function bodyAsText() {
+		return (await response.text()) || t`/* Empty Response Body */`
+	}
+
+	const mime = response.headers.get('content-type') || ''
+
 	if (mime.startsWith('image/'))
 		codeRef.elem.replaceChildren(r('img', {
 			src: URL.createObjectURL(await response.blob())
@@ -140,11 +145,6 @@ async function updatePayloadViewer(proxied, file, response) {
 			href: URL.createObjectURL(await response.blob()),
 			download: store.chosenLink.urlMask
 		}, t`Download`))
-
-
-	async function bodyAsText() {
-		return (await response.text()) || t`/* Empty Response Body */`
-	}
 }
 
 

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,27 +196,31 @@ 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)
 	if (!qs.has(param)) {
-		const group = globalThis.localStorage?.getItem(param) !== 'false'
+		const group = globalThis.localStorage?.getItem(param) !== '0'
 		if (!group) {
 			const url = new URL(globalThis.location?.href)
-			url.searchParams.set(param, false)
+			url.searchParams.set(param, '0')
 			history.replaceState(null, '', url)
 		}
 		return group
 	}
-	return qs.get(param) !== 'false'
+	return qs.get(param) !== '0'
 }
 
-// When false, the URL and localStorage will have param=false
+// When false, the URL and localStorage will have param='0'
 function togglePreference(param, nextVal) {
 	if (nextVal)
 		globalThis.localStorage?.removeItem(param)
@@ -231,39 +231,12 @@ function togglePreference(param, nextVal) {
 	if (nextVal)
 		url.searchParams.delete(param)
 	else
-		url.searchParams.set(param, false)
+		url.searchParams.set(param, '0')
 	history.replaceState(null, '', url)
 }
 
 
 
-/**
- * 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

@@ -6,7 +6,7 @@
 	--colorBgHeader: light-dark(#f2f2f3, #141414);
 	--colorBgHeaderField: light-dark(#fff, #222);
 
-	--colorBorder: light-dark(#e0e0e0, #323232);
+	--colorBorder: light-dark(#e0e0e0, #2c2c2c);
 	--colorBorderActive: light-dark(#c8c8c8, #3c3c3c);
 
 	--colorLabel: light-dark(#555, #aaa);
@@ -16,7 +16,7 @@
 	--colorHover: light-dark(#dbedff, #062d59);
 
 	--colorRed: light-dark(#da0f00, #f41606);
-	--colorPink: light-dark(#ed206a, #f92672);
+	--colorPink: light-dark(#ed206a, #ff2e7a);
 	--colorPurple: light-dark(#9b71e8, #ae81ff);
 	--colorGreen: light-dark(#388e3c, #a6e22e);
 	--colorBg4xx: light-dark(#ffedd1, #68554a);
@@ -44,6 +44,8 @@ body {
 	padding: 0;
 	border: 0;
 	margin: 0;
+	letter-spacing: -0.374px;
+	line-height: 1.2;
 	font-family: inherit;
 	font-size: 100%;
 	scrollbar-width: thin;
@@ -119,13 +121,8 @@ header {
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 3px;
-		opacity: 94%;
 		transition: opacity 240ms ease-in-out;
 
-		&:hover {
-			opacity: 1;
-		}
-
 		svg {
 			width: 120px;
 			pointer-events: none;
@@ -188,16 +185,22 @@ header {
 	}
 
 	.HelpLink {
-		width: 24px;
-		height: 24px;
+		width: 22px;
+		height: 22px;
 		flex-shrink: 0;
 		align-self: end;
+		margin-bottom: 3px;
 		margin-left: auto;
 		border-radius: 50%;
-		fill: var(--colorLabel);
+		fill: var(--colorBgHeader);
+		background: var(--colorLabel);
 
 		&:hover {
-			fill: var(--colorAccent);
+			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
@@ -22,36 +21,36 @@ initKeyboardNavigation()
 let mounted = false
 function render() {
 	restoreFocus(() => document.body.replaceChildren(App()))
-	if (store.hasChosenLink)
-		previewMock()
+	if (store.hasChosenLink) previewMock()
+	if (!mounted) LeftSide.$('a')?.focus()
 	mounted = true
 }
 
-
-const leftSideRef = {}
-
 function App() {
-	return Fragment(Header(), Main())
-}
-
-
-function Main() {
-	return (
+	return Fragment(
+		Header(),
 		r('main', null,
-			r('div', {
-					ref: leftSideRef,
-					style: { width: leftSideRef.width },
-					className: CSS.leftSide
-				},
-				r('div', { className: CSS.SubToolbar },
-					GroupByMethod(),
-					BulkSelector()),
-				r('div', { className: CSS.Table }, MockList())),
+			LeftSide(),
 			r('div', { className: CSS.rightSide },
-				Resizer(leftSideRef),
+				Resizer(LeftSide.ref),
 				PayloadViewer())))
 }
 
+function LeftSide() {
+	return r('div', {
+			ref: LeftSide.ref,
+			style: { width: LeftSide.ref.width },
+			className: CSS.leftSide
+		},
+		r('div', { className: CSS.SubToolbar },
+			GroupByMethod(),
+			BulkSelector()),
+		r('div', { className: CSS.Table }, MockList()))
+}
+LeftSide.ref = { width: undefined }
+LeftSide.$ = selector => LeftSide.ref.elem.querySelector(selector)
+LeftSide.$$ = selector => LeftSide.ref.elem.querySelectorAll(selector)
+
 
 function GroupByMethod() {
 	return (
@@ -91,7 +90,6 @@ function BulkSelector() {
 }
 
 
-
 function MockList() {
 	if (!Object.keys(store.brokersByMethod).length)
 		return r('div', null, t`No mocks found`)
@@ -101,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
@@ -151,25 +149,46 @@ function Row(row) {
 				key: row.key,
 				className: classNames(CSS.TableRow, mounted && row.isNew && CSS.animIn)
 			},
-			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
 
-			DelayToggler({
-				checked: row.delayed,
+			store.canProxy && ClickDragToggler({
+				className: CSS.ProxyToggler,
+				title: t`Proxy Toggler`,
+				body: CloudIcon(),
+				checked: row.proxied,
 				commit(checked) {
-					store.setDelayed(method, urlMask, checked)
-				},
+					store.setProxied(method, urlMask, checked)
+				}
 			}),
 
-			StatusCodeToggler({
-				title: row.isStatic ? t`Not Found` : t`Internal Server Error`,
-				body: row.isStatic ? t`404` : t`500`,
-				disabled: row.opts.length === 1 && (row.isStatic ? row.status === 404 : row.status === 500),
-				checked: !row.proxied && (row.isStatic ? row.status === 404 : row.status === 500),
-				commit() {
-					store.toggleStatus(method, urlMask, row.isStatic ? 404 : 500)
+			ClickDragToggler({
+				className: CSS.DelayToggler,
+				title: t`Delay`,
+				body: TimerIcon(),
+				checked: row.delayed,
+				commit(checked) {
+					store.setDelayed(method, urlMask, checked)
 				}
 			}),
 
+			ClickDragToggler(
+				row.isStatic
+					? {
+						className: CSS.StatusCodeToggler,
+						title: t`Not Found`,
+						body: t`404`,
+						disabled: row.opts.length === 1 && row.status === 404,
+						checked: !row.proxied && row.status === 404,
+						commit() { store.toggleStatus(method, urlMask, 404) }
+					}
+					: {
+						className: CSS.StatusCodeToggler,
+						title: t`Internal Server Error`,
+						body: t`500`,
+						disabled: row.opts.length === 1 && row.status === 500,
+						checked: !row.proxied && row.status === 500,
+						commit() { store.toggleStatus(method, urlMask, 500) }
+					}),
+
 			!store.groupByMethod && r('span', { className: CSS.Method }, method),
 
 			PreviewLink(method, urlMask, row.urlMaskDittoed),
@@ -177,15 +196,16 @@ function Row(row) {
 			MockSelector(row)))
 }
 
+
 function renderRow(method, urlMask) {
 	unChooseOld()
 	const row = store.brokerAsRow(method, urlMask)
-	const tr = leftSideRef.elem.querySelector(`.${CSS.TableRow}[key="${row.key}"]`)
+	const tr = LeftSide.$(`.${CSS.TableRow}[key="${row.key}"]`)
 	mergeTableRow(tr, Row(row))
 	previewMock()
 
 	function unChooseOld() {
-		return leftSideRef.elem.querySelector(`a.${CSS.chosen}`)
+		return LeftSide.$(`a.${CSS.chosen}`)
 			?.classList.remove(CSS.chosen)
 	}
 
@@ -216,7 +236,6 @@ function renderRow(method, urlMask) {
 }
 
 
-
 function PreviewLink(method, urlMask, urlMaskDittoed) {
 	function onClick(event) {
 		event.preventDefault()
@@ -259,42 +278,6 @@ function MockSelector(row) {
 }
 
 
-function ProxyToggler(method, urlMask, checked) {
-	return ClickDragToggler({
-		className: CSS.ProxyToggler,
-		title: t`Proxy Toggler`,
-		body: CloudIcon(),
-		checked,
-		commit(checked) {
-			store.setProxied(method, urlMask, checked)
-		}
-	})
-}
-
-
-
-function StatusCodeToggler({ title, body, commit, checked, disabled }) {
-	return ClickDragToggler({
-		title,
-		disabled,
-		className: CSS.StatusCodeToggler,
-		commit,
-		checked,
-		body
-	})
-}
-
-function DelayToggler({ checked, commit, className }) {
-	return ClickDragToggler({
-		checked,
-		commit,
-		className: classNames(CSS.DelayToggler, className),
-		canClickDrag: true,
-		title: t`Delay`,
-		body: TimerIcon()
-	})
-}
-
 function ClickDragToggler({ checked, commit, className, title, body }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
@@ -317,7 +300,7 @@ function ClickDragToggler({ checked, commit, className, title, body }) {
 			return
 
 		// Uncheck all other in the column. 
-		for (const elem of leftSideRef.elem.querySelectorAll(selector))
+		for (const elem of LeftSide.$$(selector))
 			if (elem !== this && elem.checked && !elem.disabled) {
 				elem.checked = false
 				elem.dispatchEvent(new Event('change'))
@@ -500,7 +483,6 @@ function columnSelectors() {
 	]
 }
 
-
 function initKeyboardNavigation() {
 	const rowSelectors = [
 		...columnSelectors(),
@@ -515,7 +497,7 @@ function initKeyboardNavigation() {
 				const sel = selectorForColumnOf(pivot)
 				if (sel) {
 					const offset = key === 'ArrowDown' ? +1 : -1
-					const siblings = leftSideRef.elem.querySelectorAll(sel)
+					const siblings = LeftSide.$$(sel)
 					circularAdjacent(offset, siblings, pivot).focus()
 				}
 				break

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

@@ -1,35 +1,25 @@
 import { createSvgElement as s } from './dom-utils.js'
 
 
-export function Logo() {
-	return (
-		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: 0.6, 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 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: 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 function TimerIcon() {
-	return (
-		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'm11 5.6 0.14 7.2 6 3.7' })))
-}
+export const TimerIcon = () =>
+	s('svg', { viewBox: '0 0 24 24' },
+		s('path', { d: 'm11 5.6 0.14 7.2 6 3.7' }))
 
-export function CloudIcon() {
-	return (
-		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'm6.1 8.9c0.98-2.3 3.3-3.9 6-3.9 3.3-2e-7 6 2.5 6.4 5.7 0.018 0.15 0.024 0.18 0.026 0.23 0.0016 0.037 8.2e-4 0.084 0.098 0.14 0.097 0.054 0.29 0.05 0.48 0.05 2.2 0 4 1.8 4 4s-1.8 4-4 4c-4-0.038-9-0.038-13-0.018-2.8 0-5-2.2-5-5-2.2e-7 -2.8 2.2-5 5-5 2.8 2e-7 5 2.2 5 5' }),
-			s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })))
-}
+export const CloudIcon = () =>
+	s('svg', { viewBox: '0 0 24 24' },
+		s('path', { d: 'm6.1 8.9c0.98-2.3 3.3-3.9 6-3.9 3.3-2e-7 6 2.5 6.4 5.7 0.018 0.15 0.024 0.18 0.026 0.23 0.0016 0.037 8.2e-4 0.084 0.098 0.14 0.097 0.054 0.29 0.05 0.48 0.05 2.2 0 4 1.8 4 4s-1.8 4-4 4c-4-0.038-9-0.038-13-0.018-2.8 0-5-2.2-5-5-2.2e-7 -2.8 2.2-5 5-5 2.8 2e-7 5 2.2 5 5' }),
+		s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' }))
 
-export function HelpIcon() {
-	return (
-		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25' })))
-}
+export const HelpIcon = () =>
+	s('svg', { viewBox: '0 0 24 24' },
+		s('path', { d: 'M11.07 12.85c.77-1.39 2.25-2.21 3.11-3.44.91-1.29.4-3.7-2.18-3.7-1.69 0-2.52 1.28-2.87 2.34L6.54 6.96C7.25 4.83 9.18 3 11.99 3c2.35 0 3.96 1.07 4.78 2.41.7 1.15 1.11 3.3.03 4.9-1.2 1.77-2.35 2.31-2.97 3.45-.25.46-.35.76-.35 2.24h-2.89c-.01-.78-.13-2.05.48-3.15M14 20c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2' }))
 
-export function ChevronDownIcon() {
-	return (
-		s('svg', { viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', 'stroke-width': '2' },
-			s('path', { d: 'M6 9l6 6 6-6' })))
-}
+export const ChevronDownIcon = () =>
+	s('svg', { viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', 'stroke-width': '2' },
+		s('path', { d: 'M6 9l6 6 6-6' }))

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/server/mockBrokersCollection.js

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

package/src/client/dirStructure.js

@@ -1,83 +0,0 @@
-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

@@ -1,86 +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))
-