mockaton 13.11.3 → 13.14.0

package/README.md

@@ -1,14 +1,27 @@
 <!-- SKILLS_IGNORE_BEGIN -->
-<img src="logo.svg" alt="Mockaton Logo" width="180" style="margin-top: 30px"/>
 
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
 [![Test](https://github.com/ericfortis/mockaton/actions/workflows/test.yml/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/test.yml)
 [![codecov](https://codecov.io/github/ericfortis/mockaton/graph/badge.svg?token=90NYLMMG1J)](https://codecov.io/github/ericfortis/mockaton)
 
+<img src="logo.svg" alt="Mockaton Logo" width="180" style="margin-top: 30px"/>
+
+*No API state should be too difficult to test*
+
 ## [Docs ↗](https://mockaton.com) | [Changelog ↗](https://mockaton.com/changelog) | [Skills](skills/mockaton/SKILL.md)
 
-Mockaton is an HTTP mock server for simulating APIs. With it, you can 
-test API errors, edge cases, and difficult to reproduce states in general.
+
+Simulate API states that are normally ignored. For example, quickly trigger an error on 
+an endpoint by clicking the 500 button. Then, unclick it to test your retry logic.
+Similarly, pick a mock variant from the dropdown, say to respond with a 423 (locked account).
+As another example, click the clock button 🕓 to delay a response so you can test 
+spinners &mdash; you’ve seen them in production at the top left, or restart
+their animation midway. 
+
+
+## Dashboard
+Besides the dashboard UI, there’s a [programmatic API](https://mockaton.com/api), 
+which is handy for setting up tests.
 
 <picture>
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.light.gold.png">
@@ -35,59 +48,57 @@ curl localhost:2020/api/user
 
 
 # Installation ([more options  ↗](https://mockaton.com/installation))
-Mockaton has no dependencies.
-
 ```sh
 npm install -g mockaton
 ```
+<i>Mockaton is a Node.js app with no dependencies.</i>
+
+<!-- SKILLS_IGNORE_BEGIN -->
+## Skills
+```sh
+npx skills add ericfortis/mockaton
+```
+<!-- SKILLS_IGNORE_END -->
+
+
 
 ## Basic Usage
 ```sh
-mockaton --port 2020 my-mocks-dir/
+mockaton --port 2020 my-mocks-dir
 ```
 
-Mockaton will serve the files on the given directory. It's a file-system based router, so
-filenames can have dynamic parameters. Also, filenames can have comments, which are
-anything within parentheses, this way each route can have different mock file variants.
-Similarly, each route can have different response status code variants.
+Mockaton will serve the files on the given directory. It's a file-system based router in which 
+filenames can have dynamic parameters and comments. For paraments use square brackets `[]`,
+and for comments use parentheses `()`. Comments are handy because this way each route 
+can have different mock file variants. Similarly, each route can have different response status 
+code variants.
 
 
 | Route | Filename | Description |
 | -----| -----| ---|
-| /api/company/123 | api/company/[id].GET.200.ts | `[id]` is a dynamic parameter. `.ts`, and `.js` are sent as JSON by default |
-| /media/avatar.png | media/avatar.png | Statics assets don't need the above extension |
-| /api/login | api/login(invalid attempt).POST.401.ts | **Anything within parenthesis is a comment**, they are ignored when routing |
-| /api/login | api/login(default).GET.200.ts | `(default)` is a special comment; otherwise, the first mock variant in alphabetical order wins  |
-| /api/login | api/login(locked out user).POST.423.json | `.json` is allowed too |
-
-
-## Docs
-- [Configuration: CLI and mockaton.config.js](https://mockaton.com/config).
-- [Programmatic API](https://mockaton.com/api), in which
-  you can delay a route, select a different mock file, such as a 500 error, among other options.
+| /api/company/123 | api/company/[id].GET.200.ts | `[id]` is a dynamic parameter. `.ts`, and `.js` are sent as JSON by default. |
+| /media/avatar.png | media/avatar.png | Statics assets don't need the above extension. |
+| /api/login | api/login(invalid attempt).POST.401.ts | Anything within parenthesis is a comment. They are ignored when routing. You can add many comments, `foo(c0)(c1).png` |
+| /api/login | api/login(default).GET.200.ts | `(default)` is a special comment. Otherwise, the first mock variant in alphabetical order wins.  |
+| /api/login | api/login(locked out user).POST.423.json | `.json` is allowed too. |
 
 <!-- SKILLS_IGNORE_BEGIN -->
 ## How to scrape your backend APIs?
-Mockaton has a [Browser Extension](https://mockaton.com/scraping) that lets
+There’s a sister [Browser Extension](https://mockaton.com/scraping) that lets
 you download in bulk all your API responses following Mockaton's filename convention.
-
-
-## Skills
-```sh
-npx skills add ericfortis/mockaton
-```
 <!-- SKILLS_IGNORE_END -->
 
 
 ## How to create mocks?
-Write it to your mocks directory. `.ts` files are served as JSON by default.
+Write it to your mocks directory. TypeScript files are sent as JSON by default.
 ```sh
 mkdir -p my-mocks-dir/api
 echo "export default { name: 'John' }" > my-mocks-dir/api/user.GET.200.ts
 ```
+Alternatively, there’s a [write-mock API](https://mockaton.com/api).
 
 ### Example A: JSON
-For JSON responses, use TypeScript (or JS), and `export default` an Object, Array, or 
+For JSON responses, you can use TypeScript (or JS) and `export default` an Object, Array, or 
 String.
 
 - **Route:** /api/company/123
@@ -135,3 +146,8 @@ export default async function (req: IncomingMessage, response: OutgoingMessage)
   })
 }
 ```
+
+## Docs
+- [Configuration](https://mockaton.com/config): CLI and mockaton.config.js
+- [API](https://mockaton.com/api): Programatically, you can delay a route, select a different mock file, etc.
+

package/index.d.ts

@@ -46,7 +46,7 @@ export declare interface Config {
 	onReady?: (address: string) => void
 
 	hotReload?: boolean // For UI dev purposes only
-	bypassImportCache?: boolean 
+	bypassImportCache?: boolean
 }
 
 
@@ -66,39 +66,40 @@ export declare function parseJSON(request: IncomingMessage): Promise<any>
 export declare function parseSegments(reqUrl: string, filename: string): Record<string, string>
 export declare function parseQueryParams(reqUrl: string): URLSearchParams
 
-export declare type JsonPromise<T> = Promise<Response & { json(): Promise<T> }>
-
-
-// API
-
-export declare type ClientMockBroker = {
-	mocks: string[]
-	file: string
-	status: number
-	isStatic: boolean
-	autoStatus: number
-	delayed: boolean
-	proxied: boolean
-}
-export declare type ClientBrokersByMethod = {
-	[method: string]: {
-		[urlMask: string]: ClientMockBroker
+declare global {
+	type JsonPromise<T> = Promise<Response & { json(): Promise<T> }>
+
+	type ClientMockBroker = {
+		mocks: string[]
+		file: string
+		status: number
+		isStatic: boolean
+		autoStatus: number
+		delayed: boolean
+		proxied: boolean
+	}
+	type ClientBrokersByMethod = {
+		[method: string]: {
+			[urlMask: string]: ClientMockBroker
+		}
 	}
-}
 
-export declare interface State {
-	brokersByMethod: ClientBrokersByMethod
+	interface State {
+		brokersByMethod: ClientBrokersByMethod
 
-	cookies: [label: string, selected: boolean][]
-	comments: string[]
+		cookies: [label: string, selected: boolean][]
+		comments: string[]
 
-	delay: number
-	delayJitter: number
+		delay: number
+		delayJitter: number
 
-	collectProxied: boolean
-	proxyFallback: string
+		collectProxied: boolean
+		proxyFallback: string
 
-	readOnly: boolean
+		readOnly: boolean
 
-	corsAllowed?: boolean
+		corsAllowed?: boolean
+	}
 }
+
+export type { JsonPromise, ClientMockBroker, ClientBrokersByMethod, State }

package/package.json

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

package/skills/mockaton/SKILL.md

@@ -4,49 +4,48 @@ description: Generates and serves mock HTTP APIs. Use when creating, editing, or
 user-invocable: false
 ---
 # Installation ([more options  ↗](https://mockaton.com/installation))
-Mockaton has no dependencies.
-
 ```sh
 npm install -g mockaton
 ```
+<i>Mockaton is a Node.js app with no dependencies.</i>
+
+
+
+
 
 ## Basic Usage
 ```sh
-mockaton --port 2020 my-mocks-dir/
+mockaton --port 2020 my-mocks-dir
 ```
 
-Mockaton will serve the files on the given directory. It's a file-system based router, so
-filenames can have dynamic parameters. Also, filenames can have comments, which are
-anything within parentheses, this way each route can have different mock file variants.
-Similarly, each route can have different response status code variants.
+Mockaton will serve the files on the given directory. It's a file-system based router in which 
+filenames can have dynamic parameters and comments. For paraments use square brackets `[]`,
+and for comments use parentheses `()`. Comments are handy because this way each route 
+can have different mock file variants. Similarly, each route can have different response status 
+code variants.
 
 
 | Route | Filename | Description |
 | -----| -----| ---|
-| /api/company/123 | api/company/[id].GET.200.ts | `[id]` is a dynamic parameter. `.ts`, and `.js` are sent as JSON by default |
-| /media/avatar.png | media/avatar.png | Statics assets don't need the above extension |
-| /api/login | api/login(invalid attempt).POST.401.ts | **Anything within parenthesis is a comment**, they are ignored when routing |
-| /api/login | api/login(default).GET.200.ts | `(default)` is a special comment; otherwise, the first mock variant in alphabetical order wins  |
-| /api/login | api/login(locked out user).POST.423.json | `.json` is allowed too |
-
-
-## Docs
-- [Configuration: CLI and mockaton.config.js](https://mockaton.com/config).
-- [Programmatic API](https://mockaton.com/api), in which
-  you can delay a route, select a different mock file, such as a 500 error, among other options.
+| /api/company/123 | api/company/[id].GET.200.ts | `[id]` is a dynamic parameter. `.ts`, and `.js` are sent as JSON by default. |
+| /media/avatar.png | media/avatar.png | Statics assets don't need the above extension. |
+| /api/login | api/login(invalid attempt).POST.401.ts | Anything within parenthesis is a comment. They are ignored when routing. You can add many comments, `foo(c0)(c1).png` |
+| /api/login | api/login(default).GET.200.ts | `(default)` is a special comment. Otherwise, the first mock variant in alphabetical order wins.  |
+| /api/login | api/login(locked out user).POST.423.json | `.json` is allowed too. |
 
 
 
 
 ## How to create mocks?
-Write it to your mocks directory. `.ts` files are served as JSON by default.
+Write it to your mocks directory. TypeScript files are sent as JSON by default.
 ```sh
 mkdir -p my-mocks-dir/api
 echo "export default { name: 'John' }" > my-mocks-dir/api/user.GET.200.ts
 ```
+Alternatively, there’s a [write-mock API](https://mockaton.com/api).
 
 ### Example A: JSON
-For JSON responses, use TypeScript (or JS), and `export default` an Object, Array, or 
+For JSON responses, you can use TypeScript (or JS) and `export default` an Object, Array, or 
 String.
 
 - **Route:** /api/company/123
@@ -93,4 +92,8 @@ export default async function (req: IncomingMessage, response: OutgoingMessage)
     name: 'Acme, Inc.'
   })
 }
-```
+```
+
+## Docs
+- [Configuration](https://mockaton.com/config): CLI and mockaton.config.js
+- [API](https://mockaton.com/api): Programatically, you can delay a route, select a different mock file, etc.

package/src/client/ApiCommander.js

@@ -1,11 +1,15 @@
 import { API } from './ApiConstants.js'
 
 
-/** Client for controlling Mockaton via its HTTP API */
+/**
+ * Client for controlling Mockaton via its HTTP API
+ * @see https://mockaton.com/api
+ * @example const mockaton = new Commander('http://localhost:2020')
+ */
 export class Commander {
-	/** @param {string} addr */
-	constructor(addr) {
-		this.addr = addr
+	/** @param {string} mockatonServerAddr */
+	constructor(mockatonServerAddr) {
+		this.addr = mockatonServerAddr
 	}
 
 	/** @returns {Promise<Response>} */
@@ -16,38 +20,35 @@ export class Commander {
 
 	reset = () => this.#patch(API.reset)
 
-	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
-	setGlobalDelayJitter = jitterPct => this.#patch(API.globalDelayJitter, jitterPct)
-	setCorsAllowed = value => this.#patch(API.cors, value)
-	setWatchMocks = enabled => this.#patch(API.watchMocks, enabled)
-	setProxyFallback = proxyAddr => this.#patch(API.fallback, proxyAddr)
-	setCollectProxied = shouldCollect => this.#patch(API.collectProxied, shouldCollect)
-
-	/** @returns {JsonPromise<State.cookies>} */
-	selectCookie = label => this.#patch(API.cookies, label)
-
-
-	bulkSelectByComment = comment => this.#patch(API.bulkSelect, comment)
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
 	select = file => this.#patch(API.select, file)
 
+	bulkSelectByComment = comment => this.#patch(API.bulkSelect, comment)
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
 	toggleStatus = (method, urlMask, status) => this.#patch(API.toggleStatus, [method, urlMask, status])
 
+	/** @returns {JsonPromise<ClientMockBroker>} */
+	setRouteIsDelayed = (method, urlMask, delayed) => this.#patch(API.delay, [method, urlMask, delayed])
 
 	/** @returns {JsonPromise<ClientMockBroker>} */
 	setRouteIsProxied = (method, urlMask, proxied) => this.#patch(API.proxied, [method, urlMask, proxied])
 
-	/** @returns {JsonPromise<ClientMockBroker>} */
-	setRouteIsDelayed = (method, urlMask, delayed) => this.#patch(API.delay, [method, urlMask, delayed])
 
+	/** @returns {JsonPromise<State['cookies']>} */
+	selectCookie = label => this.#patch(API.cookies, label)
+
+	setGlobalDelay = delay => this.#patch(API.globalDelay, delay)
+	setGlobalDelayJitter = jitterPct => this.#patch(API.globalDelayJitter, jitterPct)
+	setCorsAllowed = value => this.#patch(API.cors, value)
+	setWatchMocks = enabled => this.#patch(API.watchMocks, enabled)
+	setProxyFallback = proxyAddr => this.#patch(API.fallback, proxyAddr)
+	setCollectProxied = shouldCollect => this.#patch(API.collectProxied, shouldCollect)
 
 	writeMock = (file, content) => this.#patch(API.writeMock, [file, content])
 	deleteMock = file => this.#patch(API.deleteMock, file)
 
-
 	/** @returns {JsonPromise<State>} */
 	getState = () => fetch(this.addr + API.state)
 

package/src/client/{app.js → App.js}

@@ -1,14 +1,14 @@
 import { createElement as r, t, restoreFocus, Fragment } from './utils/dom.js'
 
-import { store } from './app-store.js'
+import { store } from './store.js'
 import { API } from './ApiConstants.js'
-import { Header } from './app-header.js'
+import { Header } from './Header.js'
 import { adoptSheet } from './utils/css.js'
-import { PayloadViewer, previewMock } from './app-payload-viewer.js'
-import { MockList, initKeyboardNavigation, renderRow } from './app-mock-list.js'
+import { PayloadViewer, previewMock } from './PayloadViewer.js'
+import { MockList, initKeyboardNavigation, renderRow } from './MockList.js'
 
-import CSS from './app.css' with { type: 'css' }
-adoptSheet(CSS, './app.css')
+import CSS from './App.css' with { type: 'css' }
+adoptSheet(CSS, './App.css')
 
 store.onError = onError
 store.render = render

package/src/client/Filename.js

@@ -11,13 +11,12 @@ const METHODS = [ // @KeepSync node:http.METHODS
 
 const reComments = /\([^()]*\)/g // Anything within parentheses
 
-export function extractComments(file) {
-	return Array.from(file.matchAll(reComments), ([c]) => c)
-}
+export const extractComments = file =>
+	Array.from(file.matchAll(reComments), ([c]) => c)
+
+export const includesComment = (file, search) =>
+	extractComments(file).some(c => c.includes(search))
 
-export function includesComment(file, search) {
-	return extractComments(file).some(c => c.includes(search))
-}
 
 export function parseFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
@@ -62,6 +61,6 @@ export function makeMockFilename(url, method, status, ext, comment = '') {
 }
 
 function replaceIds(filename) {
-	return filename.replaceAll(replaceIds.reUuidV4, '[id]')
+	const reUuidV4 = /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/gi
+	return filename.replaceAll(reUuidV4, '[id]')
 }
-replaceIds.reUuidV4 = /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/gi

package/src/client/{app-header.css → Header.css}

@@ -142,7 +142,7 @@
 	&.GlobalDelay,
 	&.GlobalDelayJitter {
 		input {
-			&&::selection {
+			&::selection {
 				background-color: transparent;
 			}
 

package/src/client/{app-header.js → Header.js}

@@ -1,10 +1,10 @@
 import { createElement as r, t } from './utils/dom.js'
-import { Logo, HelpIcon } from './graphics.js'
+import { Logo, HelpIcon } from './icons.js'
 import { adoptSheet } from './utils/css.js'
-import { store } from './app-store.js'
+import { store } from './store.js'
 
-import CSS from './app-header.css' with { type: 'css' }
-adoptSheet(CSS, './app-header.css')
+import CSS from './Header.css' with { type: 'css' }
+adoptSheet(CSS, './Header.css')
 
 
 export function Header() {

package/src/client/IndexHtml.js

@@ -13,7 +13,7 @@ export const IndexHtml = (hotReloadEnabled, version) => `
 		<meta charset="UTF-8">
 		<base href="${API.root}/">
 
-		<script type="module" src="app.js"></script>
+		<script type="module" src="App.js"></script>
 		<link rel="preload" href="${API.state}" as="fetch" crossorigin>
 
 		<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">

package/src/client/{app-mock-list.js → MockList.js}

@@ -1,12 +1,12 @@
 import { createElement as r, t, Fragment } from './utils/dom.js'
 
-import { store } from './app-store.js'
-import { previewMock } from './app-payload-viewer.js'
+import { store } from './store.js'
+import { previewMock } from './PayloadViewer.js'
 import { classNames, adoptSheet } from './utils/css.js'
-import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
+import { TimerIcon, CloudIcon, ChevronDownIcon } from './icons.js'
 
-import CSS from './app-mock-list.css' with { type: 'css' }
-adoptSheet(CSS, './app-mock-list.css')
+import CSS from './MockList.css' with { type: 'css' }
+adoptSheet(CSS, './MockList.css')
 
 
 export function MockList() {
@@ -76,9 +76,8 @@ function TableContent() {
 
 	if (store.groupByMethod)
 		return Object.keys(store.brokersByMethod).map(method => Fragment(
-			r('div', {
-				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
-			}, method),
+			r('div', { className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy) },
+				method),
 			FolderGroups(store.folderGroupsByMethod(method))))
 
 	return FolderGroups(store.folderGroupsByMethod('*'))

package/src/client/{app-payload-viewer.js → PayloadViewer.js}

@@ -1,10 +1,10 @@
 import { createElement as r, t } from './utils/dom.js'
 import { parseFilename } from './Filename.js'
-import { store } from './app-store.js'
+import { store } from './store.js'
 import { adoptSheet } from './utils/css.js'
 
-import CSS from './app-payload-viewer.css' with { type: 'css' }
-adoptSheet(CSS, './app-payload-viewer.css')
+import CSS from './PayloadViewer.css' with { type: 'css' }
+adoptSheet(CSS, './PayloadViewer.css')
 
 
 const titleRef = {}

package/src/client/{app-store.test.js → store.test.js}

@@ -1,7 +1,7 @@
 import { test } from 'node:test'
 import { deepEqual } from 'node:assert/strict'
 
-import { BrokerRowModel, t } from './app-store.js'
+import { BrokerRowModel, t } from './store.js'
 
 
 test('BrokerRowModel', () => {

package/src/server/Api.js

@@ -18,7 +18,7 @@ import { IndexHtml, CSP } from '../client/IndexHtml.js'
 import { cookie } from './stores/cookies.js'
 import { config, ConfigValidator, reinitConfig } from './stores/config.js'
 import * as brokers from './stores/brokers.js'
-import * as Watcher  from './stores/Watcher.js'
+import * as Watcher from './stores/Watcher.js'
 
 
 export const CLIENT_ASSETS = join(import.meta.dirname, '../client')
@@ -269,19 +269,21 @@ async function setRouteIsProxied(req, response) {
 
 
 async function writeMock(req, response) {
-	if (config.readOnly)
-		return response.forbidden('Forbidden: Mockaton is in read-only mode. See config.readOnly, or --no-read-only (CLI)')
-
+	if (config.readOnly) {
+		response.forbidden('Forbidden: Mockaton is in read-only mode. See config.readOnly')
+		return
+	}
 	const [file, content] = await req.json()
-	if (typeof file !== 'string')
-		return response.unprocessable('Invalid or missing filename. Expected: JSON [filename, content]')
-
+	if (typeof file !== 'string') {
+		response.unprocessable('Invalid or missing filename. Expected: JSON [filename, content]')
+		return
+	}
 	const path = await resolveIn(config.mocksDir, file)
-	if (!path)
-		return response.forbidden('Filename path resolves outside config.mocksDir')
-
+	if (!path) {
+		response.forbidden('Filename path resolves outside config.mocksDir')
+		return
+	}
 	await write(path, content)
-
 	if (!config.watcherEnabled) {
 		brokers.registerMock(file, true)
 		Watcher.emitChange()
@@ -291,17 +293,22 @@ async function writeMock(req, response) {
 
 
 async function deleteMock(req, response) {
-	if (config.readOnly)
-		return response.forbidden('Forbidden: Mockaton is in read-only mode. See config.readOnly, or --no-read-only (CLI)')
-
+	if (config.readOnly) {
+		response.forbidden('Forbidden: Mockaton is in read-only mode. See config.readOnly')
+		return
+	}
 	const file = await req.json()
 	const path = await resolveIn(config.mocksDir, file)
 
-	if (!path)
-		return response.forbidden('Filename path resolves outside config.mocksDir')
+	if (!path) {
+		response.forbidden('Filename path resolves outside config.mocksDir')
+		return
+	}
 
-	if (!isFile(path))
-		return response.unprocessable(`Missing Mock: ${file}`)
+	if (!isFile(path)) {
+		response.unprocessable(`Missing Mock: ${file}`)
+		return
+	}
 
 	await rm(path)
 

package/src/server/MockBroker.js

@@ -108,21 +108,15 @@ class UrlMatcher {
 		this.#urlRegex = this.#buildUrlRegex(file)
 	}
 
-	#escapeRegex(str) {
-		return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-	}
-
 	#buildUrlRegex(file) {
 		let { urlMask } = parseFilename(file)
 		urlMask = removeQueryStringAndFragment(urlMask)
-		urlMask = this.#escapeRegex(urlMask)
+		urlMask = RegExp.escape(urlMask)
 		urlMask = this.#disregardVariables(urlMask)
 		return new RegExp('^' + urlMask + '/*$')
 	}
 
-	#disregardVariables(str) {
-		return str.replace(/\\\[.*?\\]/g, '[^/]+')
-	}
+	#disregardVariables = str => str.replace(/\\\[.*?\\]/g, '[^/]+')
 
 	// Appending a '/' so URLs ending with variables don't match
 	// URLs that have a path after that variable. For example,

package/src/server/Mockaton.js

@@ -1,4 +1,4 @@
-import { register } from 'node:module'
+import { registerHooks } from 'node:module'
 import { createServer } from 'node:http'
 
 import pkgJSON from '../../package.json' with { type: 'json' }
@@ -6,18 +6,21 @@ import pkgJSON from '../../package.json' with { type: 'json' }
 import { logger } from './utils/logger.js'
 import { ServerResponse } from './utils/HttpServerResponse.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
-import { IncomingMessage, BodyReaderError, hasControlChars } from './utils/HttpIncomingMessage.js'
+import { IncomingMessage } from './utils/HttpIncomingMessage.js'
 import { watchDevSPA } from './utils/WatcherDevClient.js'
 
 import { API } from '../client/ApiConstants.js'
-
+import { dispatchMock } from './MockDispatcher.js'
 import { CLIENT_ASSETS, handleApiRequest } from './Api.js'
+
+import * as brokers from './stores/brokers.js'
 import { cookie } from './stores/cookies.js'
 import { config, initConfig } from './stores/config.js'
-import * as brokers from './stores/brokers.js'
-import { dispatchMock } from './MockDispatcher.js'
 import { watchMocksDir } from './stores/Watcher.js'
 
+import { resolveExtensionless } from './resolveExtensionless.js'
+import { resolveBypassImportCache } from './resolveBypassImportCache.js'
+
 
 export function Mockaton(options) {
 	return new Promise((resolve, reject) => {
@@ -25,10 +28,10 @@ export function Mockaton(options) {
 		cookie.init(config.cookies)
 		brokers.init()
 
-		register('./ResolverResolveExtensionless.js', import.meta.url)
+		registerHooks({ resolve: resolveExtensionless })
 
 		if (config.bypassImportCache)
-			register('./ResolverBypassImportCache.js', import.meta.url)
+			registerHooks({ resolve: resolveBypassImportCache })
 
 		if (config.watcherEnabled)
 			watchMocksDir()
@@ -60,13 +63,11 @@ async function onRequest(req, response) {
 			logger.verbose('APP', response)
 	})
 
-	const url = req.url || ''
-
-	if (url.length > 2048) {
+	if (req.url?.length > 2048) {
 		response.uriTooLong()
 		return
 	}
-	if (hasControlChars(url)) {
+	if (req.urlHasControlChars()) {
 		response.badRequest()
 		return
 	}
@@ -83,7 +84,7 @@ async function onRequest(req, response) {
 		}
 	}
 	catch (error) {
-		if (error instanceof BodyReaderError)
+		if (error instanceof IncomingMessage.BodyReaderError)
 			response.unprocessable(`${error.name}: ${error.message}`)
 		else {
 			logger.error(500, req.url, error?.message || error, error?.stack || '')

package/src/server/Mockaton.test.js

@@ -36,7 +36,7 @@ const proc = spawn(join(import.meta.dirname, 'cli.js'), [
 	mocksDir.value,
 	'--config', join(import.meta.dirname, 'Mockaton.test.config.js'),
 	'--no-open'
-])
+], { env: { ...process.env, FORCE_COLOR: 0, NO_COLOR: 1 } })
 
 const DEBUG = false
 proc.stdout.on('data', data => {
@@ -234,7 +234,7 @@ describe('Dashboard', () => {
 	})
 
 	test('serves assets', async () => {
-		const r = await request(API.root + '/app.css')
+		const r = await request(API.root + '/App.css')
 		match(await r.text(), new RegExp(':root {'))
 	})
 })
@@ -1178,6 +1178,7 @@ describe('Registering Mocks', () => {
 		before(async () => {
 			await mocksDir.mkdir('reg0')
 			await mocksDir.write(fx0.file, fx0.body)
+			await sleep(config.watcherDebounceMs + 50)
 			version = await resolveOnNextSyncVersion(-1)
 		})
 
@@ -1217,41 +1218,28 @@ describe('Registering Mocks', () => {
 })
 
 
-/** In Node, there's no EventSource, so we work around it like this.
- * This is for listening to real-time updates. It responds when a new mock is added, deleted, or renamed. */
-async function resolveOnNextSyncVersion(currSyncVer = undefined) {
+/** Uses the native `EventSource` to listen for real-time sync-version updates.
+ * It resolves when a new version is pushed that differs from `currSyncVer`;
+ * when `currSyncVer` is omitted, the first push after the initial connection is
+ * used. */
+function resolveOnNextSyncVersion(currSyncVer = undefined) {
 	let skipFirst = currSyncVer === undefined
-	const reader = (await api.getSyncVersion())
-		.body.pipeThrough(new TextDecoderStream())
-		.getReader()
-	let buffer = ''
-
-	try {
-		while (true) {
-			try {
-				const { done, value } = await reader.read()
-				if (done) break
-				buffer += value
+	return new Promise((resolve, reject) => {
+		const es = new EventSource(api.addr + API.syncVersion)
+		es.onmessage = event => {
+			const v = Number(event.data)
+			if (skipFirst || v === currSyncVer)
+				skipFirst = false
+			else {
+				es.close()
+				resolve(v)
 			}
-			catch {
-				break
+		}
+		es.onerror = () => {
+			if (es.readyState === EventSource.CLOSED) {
+				es.close()
+				reject(new Error('sync-version stream closed'))
 			}
-			const parts = buffer.split('\n\n')
-			buffer = parts.pop() || ''
-
-			for (const event of parts)
-				for (const line of event.split(/\r?\n/))
-					if (line.startsWith('data:')) {
-						const v = Number(line.slice(5).trim())
-						if (skipFirst || v === currSyncVer)
-							skipFirst = false
-						else
-							return v
-					}
 		}
-	}
-	finally {
-		reader.cancel().catch(() => {})
-	}
+	})
 }
-

package/src/server/ProxyRelay.js

@@ -3,7 +3,7 @@ import { randomUUID } from 'node:crypto'
 
 import { extFor } from './utils/mime.js'
 import { write, isFile, resolveIn } from './utils/fs.js'
-import { BodyReaderError } from './utils/HttpIncomingMessage.js'
+import { IncomingMessage } from './utils/HttpIncomingMessage.js'
 import { logger } from './utils/logger.js'
 
 import { makeMockFilename } from '../client/Filename.js'
@@ -24,7 +24,7 @@ export async function proxy(req, response, delay) {
 		})
 	}
 	catch (error) { // TESTME
-		if (error instanceof BodyReaderError)
+		if (error instanceof IncomingMessage.BodyReaderError)
 			response.unprocessable(error.name)
 		else {
 			response.badGateway()

package/src/server/{ResolverBypassImportCache.js → resolveBypassImportCache.js}

@@ -3,9 +3,9 @@ import { resolve as _resolve } from 'node:path'
 const mockatonSrcRoot = `file://${_resolve(import.meta.dirname, '..')}`
 
 // We register this hook at runtime so it doesn’t interfere with non-dynamic imports. 
-// Cache bust by appending timestamp query param
-export async function resolve(specifier, context, nextResolve) {
-	const result = await nextResolve(specifier, context)
+// It cache-busts by appending timestamp query param
+export function resolveBypassImportCache(specifier, context, nextResolve) {
+	const result = nextResolve(specifier, context)
 	if (result.url?.startsWith('file://') && !result.url.startsWith(mockatonSrcRoot)) {
 		const url = new URL(result.url)
 		url.searchParams.set('t', performance.now())

package/src/server/{ResolverResolveExtensionless.js → resolveExtensionless.js}

@@ -3,9 +3,9 @@ import { join, dirname } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 
 
-export async function resolve(specifier, context, nextResolve) {
+export function resolveExtensionless(specifier, context, nextResolve) {
 	try {
-		return await nextResolve(specifier, context)
+		return nextResolve(specifier, context)
 	}
 	catch (error) {
 		// Attempt to resolve imports as .ts and .js
@@ -13,7 +13,7 @@ export async function resolve(specifier, context, nextResolve) {
 			const absPath = join(dirname(fileURLToPath(context.parentURL)), specifier)
 			for (const candidate of ['.ts', '.js'].map(ext => absPath + ext))
 				if (existsSync(candidate))
-					return resolve(pathToFileURL(candidate).href, context, nextResolve)
+					return resolveExtensionless(pathToFileURL(candidate).href, context, nextResolve)
 		}
 		throw error
 	}

package/src/server/stores/brokers.js

@@ -1,5 +1,3 @@
-import { basename } from 'node:path'
-
 import { config, isFileAllowed } from './config.js'
 import { MockBroker } from '../MockBroker.js'
 import { listFilesRecursively } from '../utils/fs.js'
@@ -35,8 +33,7 @@ export function init() {
 
 /** @returns {boolean} registered */
 export function registerMock(file, isFromWatcher = false) {
-	if (brokerByFilename(file)?.hasMock(file) ||
-		!isFileAllowed(basename(file)))
+	if (brokerByFilename(file)?.hasMock(file) || !isFileAllowed(file))
 		return false
 
 	const { method, urlMask } = parseFilename(file)

package/src/server/stores/config.js

@@ -1,4 +1,4 @@
-import { resolve } from 'node:path'
+import { resolve, basename } from 'node:path'
 import { lstatSync } from 'node:fs'
 import { METHODS } from 'node:http'
 
@@ -89,7 +89,7 @@ export function reinitConfig() {
 	initConfig(originalOpts)
 }
 
-export const isFileAllowed = f => !config.ignore.test(f)
+export const isFileAllowed = f => !config.ignore.test(basename(f))
 
 export const calcDelay = () => config.delayJitter
 	? config.delay * (1 + Math.random() * config.delayJitter)

package/src/server/utils/HttpIncomingMessage.js

@@ -1,6 +1,8 @@
 import http, { METHODS } from 'node:http'
 
 
+export const reControlAndDelChars = /[\x00-\x1f\x7f]/
+
 export const methodIsSupported = method => METHODS.includes(method)
 
 export function removeQueryStringAndFragment(url = '') {
@@ -16,6 +18,8 @@ export class BodyReaderError extends Error {
 }
 
 export class IncomingMessage extends http.IncomingMessage {
+	static BodyReaderError = BodyReaderError
+
 	json() {
 		return this.body(JSON.parse)
 	}
@@ -29,18 +33,28 @@ export class IncomingMessage extends http.IncomingMessage {
 		for await (const chunk of this) {
 			lengthSoFar += chunk.length
 			if (lengthSoFar > MAX_BODY_SIZE)
-				throw new BodyReaderError(`Body too large. Max is ${MAX_BODY_SIZE} bytes`)
+				throw new IncomingMessage.BodyReaderError(`Body too large. Max is ${MAX_BODY_SIZE} bytes`)
 			chunks.push(chunk)
 		}
 
 		if (lengthSoFar !== expectedLength)
-			throw new BodyReaderError('Length mismatch')
+			throw new IncomingMessage.BodyReaderError('Length mismatch')
 
 		try {
 			return parser(Buffer.concat(chunks).toString())
 		}
 		catch (_) {
-			throw new BodyReaderError('Could not parse')
+			throw new IncomingMessage.BodyReaderError('Could not parse')
+		}
+	}
+
+	urlHasControlChars() {
+		try {
+			const decoded = decode(this.url || '')
+			return !decoded || reControlAndDelChars.test(decoded)
+		}
+		catch {
+			return true
 		}
 	}
 }
@@ -49,19 +63,6 @@ export const parseJSON = req =>
 	IncomingMessage.prototype.body.call(req, JSON.parse)
 
 
-
-export const reControlAndDelChars = /[\x00-\x1f\x7f]/
-
-export function hasControlChars(url) {
-	try {
-		const decoded = decode(url)
-		return !decoded || reControlAndDelChars.test(decoded)
-	}
-	catch {
-		return true
-	}
-}
-
 export function decode(url) {
 	const candidate = decodeURIComponent(url)
 	return candidate === decodeURIComponent(candidate)

package/src/server/utils/logger.js

@@ -1,3 +1,4 @@
+import { styleText } from 'node:util'
 import { decode, reControlAndDelChars } from './HttpIncomingMessage.js'
 
 
@@ -39,7 +40,12 @@ export const logger = new class {
 	#msg(...msg) {
 		if (!msg.at(-1))
 			msg.pop()
-		return [new Date().toISOString(), ...msg.map(this.#sanitize)].join('::')
+		const parts = msg.map(this.#sanitize)
+		parts[1] = styleText(['bold', 'green'], parts[1])
+		return [
+			styleText('yellow', new Date().toISOString()),
+			...parts
+		].join(styleText('dim', '::'))
 	}
 
 	#sanitize(url) {

package/src/server/utils/mime.js

@@ -57,6 +57,7 @@ const extToMime = {
 	js: 'application/javascript',
 	json: 'application/json',
 	jsonld: 'application/ld+json',
+	jxl: 'image/jxl',
 	lz: 'application/x-lzip',
 	m4a: 'audio/mp4',
 	md: 'text/markdown',
@@ -91,6 +92,7 @@ const extToMime = {
 	stl: 'model/stl',
 	svg: 'image/svg+xml',
 	tar: 'application/x-tar',
+	tga: 'image/x-targa',
 	tif: 'image/tiff',
 	ts: 'video/mp2t',
 	ttf: 'font/ttf',