mockaton 13.11.0 → 13.11.2

package/src/client/app.js

@@ -3,14 +3,12 @@ import { createElement as r, t, restoreFocus, Fragment } from './utils/dom.js'
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
 import { Header } from './app-header.js'
+import { adoptSheet } from './utils/css.js'
 import { PayloadViewer, previewMock } from './app-payload-viewer.js'
-import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
+import { MockList, initKeyboardNavigation, renderRow } from './app-mock-list.js'
 
 import CSS from './app.css' with { type: 'css' }
-import { extractClassNames, classNames } from './utils/css.js'
-document.adoptedStyleSheets.push(CSS)
-Object.assign(CSS, extractClassNames(CSS))
-
+adoptSheet(CSS, './app.css')
 
 store.onError = onError
 store.render = render
@@ -19,22 +17,22 @@ store.renderRow = renderRow
 onRealTimeUpdate(store.fetchState)
 initKeyboardNavigation()
 
-let mounted = false
 function render() {
 	restoreFocus(() => document.body.replaceChildren(App()))
 	if (store.hasChosenLink) previewMock()
-	if (!mounted) LeftSide.$('a')?.focus()
-	mounted = true
+	if (!store.mounted) LeftSide.$('a')?.focus()
+	store.mounted = true
 }
 
 function App() {
-	return Fragment(
-		Header(),
-		r('main', null,
-			LeftSide(),
-			r('div', { className: CSS.rightSide },
-				Resizer(LeftSide.ref),
-				PayloadViewer())))
+	return (
+		Fragment(
+			Header(),
+			r('main', null,
+				LeftSide(),
+				r('div', { className: CSS.rightSide },
+					Resizer(),
+					PayloadViewer()))))
 }
 
 function LeftSide() {
@@ -44,305 +42,20 @@ function LeftSide() {
 				style: { width: LeftSide.ref.width },
 				className: CSS.leftSide
 			},
-			r('div', { className: CSS.SubToolbar },
-				GroupByMethod(),
-				BulkSelector()),
-			r('div', { className: CSS.Table }, MockList())))
+			MockList()))
 }
 LeftSide.ref = { width: undefined }
 LeftSide.$ = selector => LeftSide.ref.elem.querySelector(selector)
-LeftSide.$$ = selector => LeftSide.ref.elem.querySelectorAll(selector)
-
-
-function GroupByMethod() {
-	return (
-		r('label', { className: CSS.GroupByMethod },
-			r('input', {
-				type: 'checkbox',
-				checked: store.groupByMethod,
-				onChange: store.toggleGroupByMethod
-			}),
-			r('span', { className: CSS.checkboxBody }, t`Group by Method`)))
-}
-
-
-function BulkSelector() {
-	const { comments } = store
-	const firstOption = t`Pick Comment…`
-	function onChange() {
-		const value = this.value
-		this.value = firstOption // hack so it’s always selected
-		store.bulkSelectByComment(value)
-	}
-	const disabled = !comments.length
-	return (
-		r('label', { className: CSS.BulkSelector },
-			r('span', null, t`Bulk Select`),
-			r('select', {
-					disabled,
-					autocomplete: 'off',
-					title: disabled
-						? t`No mock files have comments which are anything within parentheses on the filename.`
-						: undefined,
-					onChange
-				},
-				r('option', { value: firstOption }, firstOption),
-				r('hr'),
-				comments.map(value => r('option', { value }, value)))))
-}
-
-
-function MockList() {
-	if (!Object.keys(store.brokersByMethod).length)
-		return r('div', null, t`No mocks found`)
-
-	if (store.groupByMethod)
-		return Object.keys(store.brokersByMethod).map(method => Fragment(
-			r('div', {
-				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
-			}, method),
-			FolderGroups(store.folderGroupsByMethod(method))))
-
-	return FolderGroups(store.folderGroupsByMethod('*'))
-}
-
-function FolderGroups(brokersTree) {
-	const res = []
-	for (const b of brokersTree) {
-		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() {
-					store.setFolderCollapsed(folder, !this.open)
-				}
-			},
-			r('summary', null,
-				r('span', { className: CSS.FolderChevron }, ChevronDownIcon()),
-				r('span', {
-						className: classNames(
-							CSS.FolderName,
-							store.groupByMethod && CSS.groupedByMethod,
-							store.canProxy && CSS.canProxy)
-					},
-					folder + '…')),
-			Row(broker),
-			children.map(c => c.children.length
-				? FolderGroup(c)
-				: Row(c))))
-}
-
-/** @param {BrokerRowModel} row */
-function Row(row) {
-	const { method, urlMask } = row
-	return (
-		r('div', {
-				key: row.key,
-				className: classNames(CSS.TableRow, mounted && row.isNew && CSS.animIn)
-			},
-
-			store.canProxy && ClickDragToggler({
-				className: CSS.ProxyToggler,
-				title: t`Proxy Toggler`,
-				body: CloudIcon(),
-				checked: row.proxied,
-				commit(checked) {
-					store.setProxied(method, urlMask, checked)
-				}
-			}),
-
-			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),
-
-			MockSelector(row)))
-}
-
-
-function renderRow(method, urlMask) {
-	unChooseOld()
-	const row = store.brokerAsRow(method, urlMask)
-	const tr = LeftSide.$(`.${CSS.TableRow}[key="${row.key}"]`)
-	mergeTableRow(tr, Row(row))
-	previewMock()
-
-	function unChooseOld() {
-		return LeftSide.$(`a.${CSS.chosen}`)
-			?.classList.remove(CSS.chosen)
-	}
-
-	function mergeTableRow(oldRow, newRow) {
-		for (let i = 0; i < newRow.children.length; i++) {
-			const oldEl = oldRow.children[i]
-			const newEl = newRow.children[i]
-			switch (newEl.tagName) {
-				case 'LABEL': {
-					const oldInput = oldEl.querySelector('[type="checkbox"]')
-					const newInput = newEl.querySelector('[type="checkbox"]')
-					oldInput.checked = newInput.checked
-					oldInput.disabled = newInput.disabled
-					break
-				}
-				case 'A':
-					oldEl.className = newEl.className
-					break
-				case 'SELECT':
-					oldEl.replaceChildren(...newEl.cloneNode(true).children)
-					oldEl.className = newEl.className
-					oldEl.disabled = newEl.disabled
-					oldEl.value = newEl.value
-					break
-			}
-		}
-	}
-}
 
 
-function PreviewLink(method, urlMask, urlMaskDittoed) {
-	function onClick(event) {
-		event.preventDefault()
-		store.previewLink(method, urlMask)
-	}
-	const isChosen = store.chosenLink.method === method && store.chosenLink.urlMask === urlMask
-	const [ditto, tail] = urlMaskDittoed
-	return (
-		r('a', {
-			className: classNames(CSS.PreviewLink, isChosen && CSS.chosen),
-			href: urlMask,
-			onClick
-		}, ditto
-			? [r('span', { className: CSS.dittoDir }, ditto), tail]
-			: tail))
-}
-
-
-/** @param {BrokerRowModel} row */
-function MockSelector(row) {
-	return (
-		r('select', {
-			onChange() {
-				store.selectFile(this.value)
-			},
-			onKeyDown(event) {
-				if (event.key === 'ArrowRight' || event.key === 'ArrowLeft')
-					event.preventDefault()
-				// Because in Firefox they change the select.option, and 
-				// we use those keys for spreadsheet-like navigation.
-			},
-			'aria-label': t`Mock Selector`,
-			disabled: row.opts.length < 2,
-			className: classNames(
-				CSS.MockSelector,
-				row.selectedIdx > 0 && CSS.nonDefault,
-				row.selectedFileIs4xx && CSS.status4xx)
-		}, row.opts.map(([value, label, selected]) =>
-			r('option', { value, selected }, label))))
-}
-
-
-function ClickDragToggler({ checked, commit, className, title, body }) {
-	function onPointerEnter(event) {
-		if (event.buttons === 1)
-			onPointerDown.call(this, event)
-	}
-
-	function onPointerDown(event) {
-		if (event.altKey) {
-			onExclusiveClick.call(this)
-			return
-		}
-		this.checked = !this.checked
-		this.focus()
-		commit(this.checked)
-	}
-
-	function onExclusiveClick() {
-		const selector = selectorForColumnOf(this)
-		if (!selector)
-			return
-
-		// Uncheck all other in the column. 
-		for (const elem of LeftSide.$$(selector))
-			if (elem !== this && elem.checked && !elem.disabled) {
-				elem.checked = false
-				elem.dispatchEvent(new Event('change'))
-			}
-
-		if (!this.checked) {
-			this.checked = true
-			this.dispatchEvent(new Event('change'))
-		}
-		this.focus()
-	}
-
-	function onClick(event) {
-		if (event.pointerType === 'mouse')
-			event.preventDefault()
-	}
-	function onChange() {
-		commit(this.checked)
-	}
-	return (
-		r('label', { className: classNames(CSS.Toggler, className), title },
-			r('input', {
-				type: 'checkbox',
-				checked,
-				onPointerEnter,
-				onPointerDown,
-				onClick,
-				onChange
-			}),
-			r('span', { className: CSS.checkboxBody }, body)))
-}
-
-function Resizer(ref) {
+function Resizer() {
 	let raf = 0
 	let initialX = 0
 	let initialWidth = 0
 
 	function onPointerDown(event) {
 		initialX = event.clientX
-		initialWidth = ref.elem.clientWidth
+		initialWidth = LeftSide.ref.elem.clientWidth
 		addEventListener('pointerup', onUp, { once: true })
 		addEventListener('pointermove', onMove)
 		Object.assign(document.body.style, {
@@ -355,8 +68,8 @@ function Resizer(ref) {
 	function onMove(event) {
 		const MIN_LEFT_WIDTH = 350
 		raf = raf || requestAnimationFrame(() => {
-			ref.width = Math.max(initialWidth - (initialX - event.clientX), MIN_LEFT_WIDTH) + 'px'
-			ref.elem.style.width = ref.width
+			LeftSide.ref.width = Math.max(initialWidth - (initialX - event.clientX), MIN_LEFT_WIDTH) + 'px'
+			LeftSide.ref.elem.style.width = LeftSide.ref.width
 			raf = 0
 		})
 	}
@@ -468,58 +181,3 @@ function onRealTimeUpdate(onUpdate) {
 		conn = null
 	}
 }
-
-
-
-function selectorForColumnOf(elem) {
-	return columnSelectors().find(s => elem?.matches(s))
-}
-
-function columnSelectors() {
-	return [
-		`.${CSS.TableRow} .${CSS.ProxyToggler} input`,
-		`.${CSS.TableRow} .${CSS.DelayToggler} input`,
-		`.${CSS.TableRow} .${CSS.StatusCodeToggler} input`,
-		`.${CSS.TableRow} .${CSS.PreviewLink}`,
-		// No .MockSelector because down/up arrows have native behavior on them
-	]
-}
-
-function initKeyboardNavigation() {
-	const rowSelectors = [
-		...columnSelectors(),
-		`.${CSS.TableRow} .${CSS.MockSelector}:enabled`,
-	]
-
-	addEventListener('keydown', function ({ key }) {
-		switch (key) {
-			case 'ArrowDown':
-			case 'ArrowUp': {
-				const pivot = document.activeElement
-				const sel = selectorForColumnOf(pivot)
-				if (sel) {
-					const offset = key === 'ArrowDown' ? +1 : -1
-					const siblings = LeftSide.$$(sel)
-					circularAdjacent(offset, siblings, pivot).focus()
-				}
-				break
-			}
-			case 'ArrowRight':
-			case 'ArrowLeft': {
-				const pivot = document.activeElement
-				const sel = rowSelectors.find(s => pivot?.matches(s))
-				if (sel) {
-					const offset = key === 'ArrowRight' ? +1 : -1
-					const siblings = pivot.closest(`.${CSS.TableRow}`).querySelectorAll(rowSelectors.join(','))
-					circularAdjacent(offset, siblings, pivot).focus()
-				}
-				break
-			}
-		}
-	})
-
-	function circularAdjacent(step, siblings, pivot) {
-		const arr = Array.from(siblings)
-		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
-	}
-}

package/src/client/utils/css.js

@@ -3,6 +3,13 @@ export function classNames(...args) {
 }
 
 
+export function adoptSheet(sheet, url) {
+	sheet.__url = url.replace(/^\.\//, '')
+	document.adoptedStyleSheets.push(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

package/src/client/utils/watcherDev.js

@@ -41,6 +41,9 @@ function init() {
 
 	async function hotReloadCSS(file) {
 		const mod = await import(`${document.baseURI}${file}?${Date.now()}`, { with: { type: 'css' } })
-		document.adoptedStyleSheets = [mod.default]
+		mod.default.__url = file
+		for (let i = 0; i < document.adoptedStyleSheets.length; i++)
+			if (document.adoptedStyleSheets[i].__url === file)
+				document.adoptedStyleSheets[i] = mod.default
 	}
 }

package/src/server/Api.js

@@ -3,8 +3,8 @@
  * selecting a specific mock-file for a particular route.
  */
 
-import { join } from 'node:path'
-import { write, rm, isFile, resolveIn, listFilesRecursively } from './utils/fs.js'
+import { join, relative } from 'node:path'
+import { write, rm, isFile, resolveIn } from './utils/fs.js'
 
 import openapi from '../../www/src/assets/openapi.json' with { type: 'json' }
 import pkgJSON from '../../package.json' with { type: 'json' }
@@ -23,14 +23,14 @@ import { removeQueryStringAndFragment } from './utils/HttpIncomingMessage.js'
 
 export const CLIENT_ASSETS = join(import.meta.dirname, '../client')
 
-const getReqs = new Map([
-	[API.dashboard, serveDashboard],
+const headReqs = new Map([
+	[API.health, (_, response) => response.ok()]
+])
 
-	...listFilesRecursively(CLIENT_ASSETS).map(f => [
-		API.dashboard + '/' + f,
-		serveDashboardAsset(f)
-	]),
+const getReqs = new Map([
+	...headReqs.entries(),
 
+	[API.root, serveDashboard],
 	[API.state, getState],
 	[API.syncVersion, sseClientSyncVersion],
 
@@ -62,20 +62,25 @@ const patchReqs = new Map([
 ])
 
 export async function handleApiRequest(req, response) {
-	const url = removeQueryStringAndFragment(req.url)
+	if (!req.url.startsWith(API.root))
+		return false
 
-	if ((req.method === 'GET' || req.method === 'HEAD') && url === API.health) {
-		response.ok()
-		return
-	}
+	const url = removeQueryStringAndFragment(req.url)
 
 	const handler = (
 		req.method === 'GET' && getReqs.get(url) ||
+		req.method === 'HEAD' && headReqs.get(url) ||
 		req.method === 'PATCH' && patchReqs.get(url))
 	if (handler) {
 		await handler(req, response)
 		return true
 	}
+
+	if (req.method === 'GET') { // serve static dashboard assets dir
+		const f = await resolveIn(CLIENT_ASSETS, relative(API.root, url))
+		await response.file(f)
+		return true
+	}
 }
 
 
@@ -85,11 +90,6 @@ function serveDashboard(_, response) {
 	response.html(IndexHtml(config.hotReload, pkgJSON.version), CSP)
 }
 
-function serveDashboardAsset(f) {
-	return async (_, response) => {
-		await response.file(join(CLIENT_ASSETS, f))
-	}
-}
 
 function getState(_, response) {
 	response.json({

package/src/server/Mockaton.js

@@ -41,7 +41,7 @@ export function Mockaton(options) {
 		server.on('error', reject)
 		server.listen(config.port, config.host, () => {
 			const url = `http://${server.address().address}:${server.address().port}`
-			const dashboardUrl = url + API.dashboard
+			const dashboardUrl = url + API.root
 			logger.info('Listening', url)
 			logger.info('Dashboard', dashboardUrl)
 			config.onReady(dashboardUrl)

package/src/server/Mockaton.test.js

@@ -10,8 +10,9 @@ import { describe, test, before, beforeEach, after } from 'node:test'
 import { unlink, mkdir, readFile, rename, readdir, writeFile, rm } from 'node:fs/promises'
 
 import { mimeFor } from './utils/mime.js'
+import { API } from '../client/ApiConstants.js'
+import { Commander } from '../client/ApiCommander.js'
 import { parseFilename } from '../client/Filename.js'
-import { API, Commander } from '../../index.js'
 
 import CONFIG from './Mockaton.test.config.js'
 import { config } from './config.js'
@@ -224,17 +225,17 @@ describe('CORS', () => {
 
 describe('Dashboard', () => {
 	test('renders', async () => {
-		const r = await request(API.dashboard)
+		const r = await request(API.root)
 		match(await r.text(), new RegExp('<!DOCTYPE html>'))
 	})
 
 	test('query string is accepted', async () => {
-		const r = await request(API.dashboard + '?foo=bar')
+		const r = await request(API.root + '?foo=bar')
 		match(await r.text(), new RegExp('<!DOCTYPE html>'))
 	})
 
 	test('serves assets', async () => {
-		const r = await request(API.dashboard + '/app.css')
+		const r = await request(API.root + '/app.css')
 		match(await r.text(), new RegExp(':root {'))
 	})
 })

package/src/server/cli.js

@@ -4,16 +4,42 @@ import { pathToFileURL } from 'node:url'
 import { resolve, join } from 'node:path'
 import { parseArgs } from 'node:util'
 
-import { isFile } from './utils/fs.js'
+import { isFile, isDirectory } from './utils/fs.js'
 import { Mockaton } from '../../index.js'
+import { config } from './config.js'
 import pkgJSON from '../../package.json' with { type: 'json' }
 
 
-process.on('unhandledRejection', error => { throw error })
-
 const DEFAULT_CONFIG_FILE = 'mockaton.config.js'
 const SKILLS_PATH = join(import.meta.dirname, '../../skills/mockaton/SKILL.md')
 
+const HELP = `
+SYNOPSIS
+  mockaton [options] [mocks-dir]
+
+OPTIONS
+  -c, --config <file>  (default: ./${DEFAULT_CONFIG_FILE})
+  
+  -H, --host <host>    (default: 127.0.0.1)
+  -p, --port <port>    (default: 0) which means auto-assigned
+  
+  -q, --quiet          Show errors only
+  --no-open            Don't open dashboard in a browser
+  --no-read-only       Allow writing and deleting mocks via API
+  
+  --skills             Show AI agent SKILL.md file path
+  -h, --help
+  -v, --version
+
+NOTES
+  * mockaton.config.js supports more options.
+  * CLI options override their ${DEFAULT_CONFIG_FILE} counterparts.
+  * https://mockaton.com/config
+`.trim()
+
+
+process.on('unhandledRejection', error => { throw error })
+
 let args, positionals
 try {
 	const result = parseArgs({
@@ -44,38 +70,12 @@ catch (error) {
 process.on('SIGUSR2', () => process.exit(0)) // For clean exit when collecting code-coverage
 
 
-if (args.version)
-	console.log(pkgJSON.version)
-
-else if (args.skills)
-	console.log(SKILLS_PATH)
-
-else if (args.help)
-	console.log(`
-Usage: mockaton [mocks-dir] [options]
-
-Options:
-  -c, --config <file>  (default: ./${DEFAULT_CONFIG_FILE})
-  
-  -H, --host <host>    (default: 127.0.0.1)
-  -p, --port <port>    (default: 0) which means auto-assigned
-  
-  -q, --quiet          Show errors only
-  --no-open            Don't open dashboard in a browser
-  --no-read-only       Allow writing and deleting mocks via API
-  
-  --skills             Show AI agent SKILL.md file path
-  -h, --help
-  -v, --version
-
-Notes:
-  * mockaton.config.js supports more options, see: https://mockaton.com/config
-  * CLI options override their ${DEFAULT_CONFIG_FILE}} counterparts
-`.trim())
-
+if (args.version) console.log(pkgJSON.version)
+else if (args.help) console.log(HELP)
+else if (args.skills) console.log(SKILLS_PATH)
 else if (args.config && !isFile(args.config)) {
 	console.error(`Invalid config file: ${args.config}`)
-	process.exitCode = 1
+	process.exit(1)
 }
 else {
 	const userConf = resolve(args.config ?? DEFAULT_CONFIG_FILE)
@@ -87,6 +87,10 @@ else {
 	if (args.port) opts.port = Number.isNaN(Number(args.port)) ? args.port : Number(args.port)
 
 	if (positionals[0]) opts.mocksDir = positionals[0]
+	else if (!opts.mocksDir && !isDirectory(config.mocksDir)) {
+		console.log(HELP)
+		process.exit(0)
+	}
 
 	if (args.quiet) opts.logLevel = 'quiet'
 	if (args['no-open']) opts.onReady = () => {}

package/src/server/cli.test.js

@@ -23,9 +23,7 @@ describe('CLI', () => {
 	})
 
 	test('invalid port', () => {
-		const { stderr, status } = cli(
-			rel('../../mockaton-mocks'),
-			'--port', 'not-a-number')
+		const { stderr, status } = cli(rel('../../mockaton-mocks'), '--port', 'not-a-number')
 		equal(stderr.trim(), `port="not-a-number"\nExpected an integer between 0 and 65535`)
 		equal(status, 1)
 	})
@@ -38,7 +36,7 @@ describe('CLI', () => {
 
 	test('-h outputs usage message', () => {
 		const { stdout, status } = cli('-h')
-		equal(stdout.split('\n')[0], 'Usage: mockaton [mocks-dir] [options]')
+		equal(stdout.split('\n')[1], '  mockaton [options] [mocks-dir]')
 		equal(status, 0)
 	})