mockaton 13.3.5 → 13.4.1

package/src/client/utils/dom.js

@@ -0,0 +1,68 @@
+export function t(translation) {
+	return translation[0]
+}
+
+
+export function createElement(tag, props, ...children) {
+	const elem = document.createElement(tag)
+	if (props)
+		for (const [k, v] of Object.entries(props))
+			if (v === undefined) continue
+			else if (k === 'ref') v.elem = elem
+			else if (k === 'style') Object.assign(elem.style, v)
+			else if (k.startsWith('on')) elem.addEventListener(k.slice(2).toLowerCase(), ...[v].flat())
+			else if (k in elem) elem[k] = v
+			else elem.setAttribute(k, v)
+	elem.append(...children.flat().filter(Boolean))
+	return elem
+}
+
+
+export function createSvgElement(tag, props, ...children) {
+	const elem = document.createElementNS('http://www.w3.org/2000/svg', tag)
+	for (const [k, v] of Object.entries(props))
+		elem.setAttribute(k, v)
+	elem.append(...children.flat().filter(Boolean))
+	return elem
+}
+
+
+export function Fragment(...args) {
+	const frag = new DocumentFragment()
+	for (const arg of args)
+		if (Array.isArray(arg))
+			frag.append(...arg)
+		else
+			frag.appendChild(arg)
+	return frag
+}
+
+
+export function restoreFocus(cb) {
+	const focusQuery = selectorFor(document.activeElement)
+	cb()
+	if (focusQuery)
+		document.querySelector(focusQuery)?.focus()
+}
+function selectorFor(elem) {
+	if (!(elem instanceof Element))
+		return
+	const path = []
+	while (elem) {
+		let qualifier = ''
+		if (elem.hasAttribute('key'))
+			qualifier = `[key="${elem.getAttribute('key')}"]`
+		else {
+			let i = 0
+			let sib = elem
+			while ((sib = sib.previousElementSibling))
+				if (sib.tagName === elem.tagName)
+					i++
+			if (i)
+				qualifier = `:nth-of-type(${i + 1})`
+		}
+		path.push(elem.tagName + qualifier)
+		elem = elem.parentElement
+	}
+	return path.reverse().join('>')
+}

package/src/client/utils/watcherDev.js

@@ -0,0 +1,46 @@
+const url = new URL(import.meta.url).searchParams.get('url')
+
+if (!url)
+	console.warn('Missing ?url=')
+else
+	init()
+
+function init() {
+	let conn = null
+	let timer = null
+
+	connect()
+	window.addEventListener('beforeunload', teardown)
+
+	function connect() {
+		if (conn) return
+
+		clearTimeout(timer)
+		conn = new EventSource(url)
+
+		conn.onmessage = function (event) {
+			const file = event.data
+			if (file.endsWith('.css'))
+				hotReloadCSS(file)
+			else if (file)
+				location.reload()
+		}
+
+		conn.onerror = function () {
+			console.error('hot reload')
+			teardown()
+			timer = setTimeout(connect, 3000)
+		}
+	}
+
+	function teardown() {
+		clearTimeout(timer)
+		conn?.close()
+		conn = null
+	}
+
+	async function hotReloadCSS(file) {
+		const mod = await import(`${document.baseURI}${file}?${Date.now()}`, { with: { type: 'css' } })
+		document.adoptedStyleSheets = [mod.default]
+	}
+}

package/src/server/Api.js

@@ -4,10 +4,12 @@
  */
 
 import { join } from 'node:path'
+import { readdirSync } from 'node:fs'
+import { write, rm, isFile, resolveIn } from './utils/fs.js'
 
 import pkgJSON from '../../package.json' with { type: 'json' }
 
-import { sseClientHotReload, DASHBOARD_ASSETS, CLIENT_DIR } from './WatcherDevClient.js'
+import { sseClientHotReload } from './utils/WatcherDevClient.js'
 import { stopMocksDirWatcher, sseClientSyncVersion, uiSyncVersion, watchMocksDir } from './Watcher.js'
 
 import { API } from '../client/ApiConstants.js'
@@ -16,7 +18,11 @@ import { IndexHtml, CSP } from '../client/IndexHtml.js'
 import { cookie } from './cookie.js'
 import { config, ConfigValidator } from './config.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
-import { write, rm, isFile, resolveIn } from './utils/fs.js'
+
+
+export const CLIENT_DIR = join(import.meta.dirname, '../client')
+const DASHBOARD_ASSETS = readdirSync(CLIENT_DIR, { recursive: true })
+
 
 
 export const apiGetReqs = new Map([
@@ -26,11 +32,12 @@ export const apiGetReqs = new Map([
 	[API.state, getState],
 	[API.syncVersion, sseClientSyncVersion],
 
-	[API.watchHotReload, sseClientHotReload],
+	[API.watchHotReload, onDevWatch],
 	[API.throws, () => { throw new Error('Test500') }]
 ])
 
 
+
 export const apiPatchReqs = new Map([
 	[API.cors, setCorsAllowed],
 	[API.reset, reset],
@@ -83,6 +90,12 @@ function getState(_, response) {
 	})
 }
 
+function onDevWatch(req, response) {
+	if (config.hotReload)
+		sseClientHotReload(req, response)
+	else
+		response.notFound()
+}
 
 /** # PATCH */
 

package/src/server/MockDispatcher.js

@@ -1,16 +1,18 @@
 import { join } from 'node:path'
 
 import { logger } from './utils/logger.js'
-
 import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
 import { parseFilename } from '../client/Filename.js'
 import { echoFilePlugin } from './MockDispatcherPlugins.js'
 import { brokerByRoute } from './mockBrokersCollection.js'
 import { config, calcDelay } from './config.js'
+import { FILENAME_HEADER } from '../client/ApiConstants.js'
 
 
 export async function dispatchMock(req, response) {
+	response.setHeaderList(config.extraHeaders)
+
 	try {
 		const isHead = req.method === 'HEAD'
 
@@ -23,10 +25,12 @@ export async function dispatchMock(req, response) {
 			return
 		}
 		if (!broker) {
-			response.mockNotFound()
+			response.notFound()
 			return
 		}
 
+		response.setHeader(FILENAME_HEADER, broker.file)
+
 		if (cookie.getCurrent())
 			response.setHeader('Set-Cookie', cookie.getCurrent())
 
@@ -36,7 +40,6 @@ export async function dispatchMock(req, response) {
 			setTimeout(async () => {
 				await response.partialContent(req.headers.range, join(config.mocksDir, broker.file))
 			}, Number(broker.delayed && calcDelay()))
-			logger.accessMock(req.url, broker.file)
 			return
 		}
 
@@ -55,14 +58,14 @@ export async function dispatchMock(req, response) {
 
 		setTimeout(() => response.end(isHead ? null : body),
 			Number(broker.delayed && calcDelay()))
-
-		logger.accessMock(req.url, broker.file)
 	}
 	catch (error) { // TESTME
 		if (error?.code === 'ENOENT') // mock-file has been deleted
-			response.mockNotFound()
-		else
-			response.internalServerError(error)
+			response.notFound()
+		else {
+			response.internalServerError()
+			logger.error(500, req.url, error?.message || error, error?.stack || '')
+		}
 	}
 }
 

package/src/server/Mockaton.js

@@ -8,17 +8,16 @@ import { ServerResponse } from './utils/HttpServerResponse.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
 import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
 
-import { API } from '../client/ApiConstants.js'
+import { API, FILENAME_HEADER } from '../client/ApiConstants.js'
 
 import { cookie } from './cookie.js'
 import { config, setup } from './config.js'
-import { apiPatchReqs, apiGetReqs } from './Api.js'
+import { apiPatchReqs, apiGetReqs, CLIENT_DIR } from './Api.js'
 
 import { dispatchMock } from './MockDispatcher.js'
-
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 
-import { watchDevSPA } from './WatcherDevClient.js'
+import { watchDevSPA } from './utils/WatcherDevClient.js'
 import { watchMocksDir } from './Watcher.js'
 
 
@@ -33,7 +32,7 @@ export function Mockaton(options) {
 			watchMocksDir()
 		}
 		if (config.hotReload)
-			watchDevSPA()
+			watchDevSPA(CLIENT_DIR)
 
 		const server = createServer({ IncomingMessage, ServerResponse }, onRequest)
 		server.on('error', reject)
@@ -49,10 +48,17 @@ export function Mockaton(options) {
 }
 
 async function onRequest(req, response) {
+	response.setHeader('Server', `Mockaton ${pkgJSON.version}`)
+
 	response.on('error', logger.warn)
 
-	response.setHeader('Server', `Mockaton ${pkgJSON.version}`)
-	response.setHeaderList(config.extraHeaders)
+	response.on('finish', () => {
+		const f = response.getHeader(FILENAME_HEADER)
+		if (f)
+			logger.normal('MOCK', req.url, f)
+		else
+			logger.verbose('API', response)
+	})
 
 	const url = req.url || ''
 
@@ -87,7 +93,9 @@ async function onRequest(req, response) {
 	catch (error) {
 		if (error instanceof BodyReaderError)
 			response.unprocessable(`${error.name}: ${error.message}`)
-		else
+		else {
+			logger.error(500, req.url, error?.message || error, error?.stack || '')
 			response.internalServerError(error)
+		}
 	}
 }

package/src/server/Mockaton.test.js

@@ -14,6 +14,7 @@ import { parseFilename } from '../client/Filename.js'
 import { API, Commander } from '../../index.js'
 
 import CONFIG from './Mockaton.test.config.js'
+import { config } from './config.js'
 
 
 const mocksDir = mkdtempSync(join(tmpdir(), 'mocks'))
@@ -33,7 +34,7 @@ proc.stdout.on('data', data => {
 })
 proc.stderr.on('data', data => {
 	stderr.push(data.toString())
-	DEBUG && process.stderr.write(stdout.at(-1))
+	DEBUG && process.stderr.write(stderr.at(-1))
 })
 
 const serverAddr = await new Promise((resolve, reject) => {
@@ -149,7 +150,7 @@ describe('Filename Convention', () => {
 			body: '[invalid_json]'
 		})
 		equal(r.status, 422)
-		match(stdout.at(-1), /BodyReaderError: Could not parse/)
+		equal(await r.text(), 'BodyReaderError: Could not parse')
 	})
 
 	test('returns 500 when a handler throws', async () => {
@@ -764,15 +765,18 @@ describe('MIME', () => {
 
 
 describe('Headers', () => {
-	test('responses have version in "Server" header', async () => {
+	test('api responses have version in "Server" header', async () => {
 		const r = await api.getState()
 		const val = r.headers.get('server')
 		match(val, /^Mockaton \d+\.\d+\.\d+$/)
 	})
 
-	test('custom headers are included', async () => {
-		const { headers } = await api.getState()
-		equal(headers.get(CONFIG.extraHeaders[0]), CONFIG.extraHeaders[1])
+	test('mock responses have version in "Server" header and custom headers', async () => {
+		const fx = new Fixture('header.GET.200.json')
+		await fx.write()
+		const r = await fx.request()
+		match(r.headers.get('server'), /^Mockaton \d+\.\d+\.\d+$/)
+		equal(r.headers.get(CONFIG.extraHeaders[0]), CONFIG.extraHeaders[1])
 	})
 })
 
@@ -1131,13 +1135,14 @@ describe('Registering Mocks', () => {
 	})
 
 	test('deleting a folder unregisters mocks in it', async () => {
-		const fx = new Fixture('api/bulk-delete/bar.GET.200.json')
-		await fx.write()
-		await sleep(0)
+		const fx = new FixtureExternal('api/bulk-delete/bar.GET.200.json')
+		await fx.writeExternally()
+		config.watcherDebounceMs = 100 // Because on macOS rmdir triggers a few events
 		const nextVerPromise = resolveOnNextSyncVersion()
 		await rmDirFromMocks('api/bulk-delete')
 		await nextVerPromise
 		equal(await fx.fetchBroker(), undefined)
+		await sleep(50) // Only for Docker, not sure why we need to delay the server teardown 
 	})
 })
 

package/src/server/ProxyRelay.js

@@ -8,6 +8,7 @@ import { readBody, BodyReaderError } from './utils/HttpIncomingMessage.js'
 import { config } from './config.js'
 import { logger } from './utils/logger.js'
 import { makeMockFilename } from '../client/Filename.js'
+import { EXT_EMPTY, EXT_UNKNOWN_MIME } from '../client/ApiConstants.js'
 
 
 export async function proxy(req, response, delay) {
@@ -24,8 +25,10 @@ export async function proxy(req, response, delay) {
 	catch (error) { // TESTME
 		if (error instanceof BodyReaderError)
 			response.unprocessable(error.name)
-		else
-			response.badGateway(error)
+		else {
+			response.badGateway()
+			logger.warn(error.cause.message)
+		}
 		return
 	}
 
@@ -37,7 +40,10 @@ export async function proxy(req, response, delay) {
 	setTimeout(() => response.end(body), delay) // TESTME
 
 	if (config.collectProxied) {
-		const ext = extFor(proxyResponse.headers.get('content-type'))
+		const mime = proxyResponse.headers.get('content-type')
+		const ext = mime
+			? extFor(mime) || EXT_UNKNOWN_MIME
+			: EXT_EMPTY
 		await saveMockToDisk(req.url, req.method, proxyResponse.status, ext, body)
 	}
 }

package/src/server/{utils/UrlParsers.js → UrlParsers.js}

@@ -1,15 +1,21 @@
 import { relative } from 'node:path'
-import { config } from '../config.js'
-import { decode } from './HttpIncomingMessage.js'
-import { parseFilename, removeTrailingSlash, removeQueryStringAndFragment } from '../../client/Filename.js'
+import { config } from './config.js'
+import { decode } from './utils/HttpIncomingMessage.js'
+import { parseFilename, removeTrailingSlash, removeQueryStringAndFragment } from '../client/Filename.js'
 
 
 export function parseQueryParams(url) {
 	return new URL(url, 'http://_').searchParams
 }
 
-
+/** @deprecated Use parseSegments */
 export function parseSplats(url, filename) {
+	console.info('parseSplats is deprecated in favor of parseSegments')
+	return parseSegments(url, filename)
+}
+
+
+export function parseSegments(url, filename) {
 	const { urlMask } = parseFilename(relative(config.mocksDir, filename))
 
 	const splats = []

package/src/server/{utils/UrlParsers.test.js → UrlParsers.test.js}

@@ -1,7 +1,7 @@
 import { test, describe } from 'node:test'
 import { deepEqual, equal } from 'node:assert/strict'
-import { parseSplats, parseQueryParams } from './UrlParsers.js'
-import { config } from '../config.js'
+import { parseSegments, parseQueryParams } from './UrlParsers.js'
+import { config } from './config.js'
 
 test('parseQueryParams', () => {
 	const searchParams = parseQueryParams('/api/foo?limit=123')
@@ -9,44 +9,44 @@ test('parseQueryParams', () => {
 })
 
 
-describe('parseSplats', () => {
-	test('one splat', () => {
-		const splats = parseSplats(
+describe('parseSegments', () => {
+	test('one segment', () => {
+		const segments = parseSegments(
 			'/api/company/123',
 			`${config.mocksDir}/api/company/[companyId].GET.200.js`
 		)
-		deepEqual(splats, {
+		deepEqual(segments, {
 			companyId: '123'
 		})
 	})
 
-	test('one splat with trailing slash', () => {
-		const splats = parseSplats(
+	test('one segment with trailing slash', () => {
+		const segments = parseSegments(
 			'/api/company/123/',
 			`${config.mocksDir}/api/company/[companyId].GET.200.js`
 		)
-		deepEqual(splats, {
+		deepEqual(segments, {
 			companyId: '123'
 		})
 	})
 
-	test('two splats and comment', () => {
-		const splats = parseSplats(
+	test('two segments and comment', () => {
+		const segments = parseSegments(
 			'/api/company/123/user/456',
 			`${config.mocksDir}/api/company/[companyId]/user/[userId](comments).GET.200.js`
 		)
-		deepEqual(splats, {
+		deepEqual(segments, {
 			companyId: '123',
 			userId: '456',
 		})
 	})
 
 	test('ignores query string', () => {
-		const splats = parseSplats(
+		const segments = parseSegments(
 			'/api/company/123?foo=456',
 			`${config.mocksDir}/api/company/[companyId]?foo=[fooId].GET.200.js`
 		)
-		deepEqual(splats, {
+		deepEqual(segments, {
 			companyId: '123'
 		})
 	})

package/src/server/config.js

@@ -3,6 +3,7 @@ import { METHODS } from 'node:http'
 
 import { logger } from './utils/logger.js'
 import { isDirectory } from './utils/fs.js'
+import { registerMimes } from './utils/mime.js'
 import { openInBrowser } from './utils/openInBrowser.js'
 import { optional, is, validate } from './utils/validate.js'
 import { validateCorsAllowedMethods, validateCorsAllowedOrigins } from './utils/http-cors.js'
@@ -80,6 +81,7 @@ export function setup(opts) {
 	Object.assign(config, opts)
 	validate(config, ConfigValidator)
 	logger.setLevel(config.logLevel)
+	registerMimes(config.extraMimes)
 }
 
 export const isFileAllowed = f => !config.ignore.test(f)

package/src/server/utils/HttpServerResponse.js

@@ -1,9 +1,7 @@
 import http from 'node:http'
-import fs, { readFileSync } from 'node:fs'
+import fs from 'node:fs'
 
-import { logger } from './logger.js'
 import { mimeFor } from './mime.js'
-import { HEADER_502 } from '../../client/ApiConstants.js'
 
 
 export class ServerResponse extends http.ServerResponse {
@@ -13,83 +11,64 @@ export class ServerResponse extends http.ServerResponse {
 	}
 
 	ok() {
-		logger.access(this)
 		this.end()
 	}
 
 	html(html, csp) {
-		logger.access(this)
 		this.setHeader('Content-Type', mimeFor('.html'))
 		this.setHeader('Content-Security-Policy', csp)
 		this.end(html)
 	}
 
 	json(payload) {
-		logger.access(this)
 		this.setHeader('Content-Type', mimeFor('.json'))
 		this.end(JSON.stringify(payload))
 	}
 
-	file(file) {
-		logger.access(this)
+	async file(file) {
 		this.setHeader('Content-Type', mimeFor(file))
-		this.end(readFileSync(file, 'utf8'))
+		this.end(await fs.promises.readFile(file, 'utf8'))
 	}
 
 	noContent() {
 		this.statusCode = 204
-		logger.access(this)
 		this.end()
 	}
 
 
 	badRequest() {
 		this.statusCode = 400
-		logger.access(this)
 		this.end()
 	}
 
 	forbidden() {
 		this.statusCode = 403
-		logger.access(this)
 		this.end()
 	}
 
 	notFound() {
 		this.statusCode = 404
-		logger.access(this)
-		this.end()
-	}
-
-	mockNotFound() {
-		this.statusCode = 404
-		logger.accessMock(this.req.url, '404')
 		this.end()
 	}
 
 	uriTooLong() {
 		this.statusCode = 414
-		logger.access(this)
 		this.end()
 	}
 
 	unprocessable(error) {
-		logger.access(this, error)
 		this.statusCode = 422
 		this.end(error)
 	}
 
 
-	internalServerError(error) {
-		logger.error(500, this.req.url, error?.message || error, error?.stack || '')
+	internalServerError() {
 		this.statusCode = 500
 		this.end()
 	}
 
-	badGateway(error) {
-		logger.warn('Fallback Proxy Error:', error.cause.message)
+	badGateway() {
 		this.statusCode = 502
-		this.setHeader(HEADER_502, 1)
 		this.end()
 	}
 
@@ -104,20 +83,20 @@ export class ServerResponse extends http.ServerResponse {
 			this.statusCode = 416 // Range Not Satisfiable
 			this.setHeader('Content-Range', `bytes */${size}`)
 			this.end()
+			return
 		}
-		else {
-			this.statusCode = 206 // Partial Content
-			this.setHeader('Accept-Ranges', 'bytes')
-			this.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
-			this.setHeader('Content-Type', mimeFor(file))
+
+		this.statusCode = 206 // Partial Content
+		this.setHeader('Accept-Ranges', 'bytes')
+		this.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+		this.setHeader('Content-Type', mimeFor(file))
+
+		return new Promise((resolve, reject) => {
 			const reader = fs.createReadStream(file, { start, end })
-			const response = this
-			reader.on('open', function () {
-				this.pipe(response)
-			})
-			reader.on('error', error => {
-				this.internalServerError(error)
-			})
-		}
+			this.on('error', reject)
+			reader.on('error', reject)
+			reader.on('end', resolve)
+			reader.pipe(this)
+		})
 	}
 }

package/src/server/{WatcherDevClient.js → utils/WatcherDevClient.js}

@@ -1,12 +1,5 @@
-import { join } from 'node:path'
+import { watch } from 'node:fs'
 import { EventEmitter } from 'node:events'
-import { watch, readdirSync } from 'node:fs'
-
-import { config } from './config.js'
-
-
-export const CLIENT_DIR = join(import.meta.dirname, '../client')
-export const DASHBOARD_ASSETS = readdirSync(CLIENT_DIR)
 
 
 const devClientWatcher = new class extends EventEmitter {
@@ -18,20 +11,14 @@ const devClientWatcher = new class extends EventEmitter {
 
 // Although `client/IndexHtml.js` is watched, it returns a stale version.
 // i.e., it would need to be a dynamic import + cache busting.
-export function watchDevSPA() {
-	watch(CLIENT_DIR, (_, file) => {
+export function watchDevSPA(dir) {
+	watch(dir, (_, file) => {
 		devClientWatcher.emit(file)
 	})
 }
 
-
 /** Realtime notify Dev UI changes */
 export function sseClientHotReload(req, response) {
-	if (!config.hotReload) {
-		response.notFound()
-		return
-	}
-
 	response.writeHead(200, {
 		'Content-Type': 'text/event-stream',
 		'Cache-Control': 'no-cache',
@@ -42,7 +29,6 @@ export function sseClientHotReload(req, response) {
 	function onDevChange(file = '') {
 		response.write(`data: ${file}\n\n`)
 	}
-
 	devClientWatcher.subscribe(onDevChange)
 
 	const keepAlive = setInterval(() => {

package/src/server/utils/fs.js

@@ -1,5 +1,5 @@
-import { join, dirname, sep, posix, resolve } from 'node:path'
 import { lstatSync, readdirSync } from 'node:fs'
+import { join, dirname, sep, posix, resolve } from 'node:path'
 import { mkdir, writeFile, unlink, realpath } from 'node:fs/promises'