mockaton 13.11.2 → 13.12.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,
+click the 500 button to trigger an error on an endpoint. Then
+unclick it to test your retry logic. Similarly, 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 restarting
+their animation midway. 
+
+
+## Dashboard
+Besides the dashboard UI, there’s [an API](https://mockaton.com/api)
+you can use to set 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,47 +48,44 @@ 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. |
+| /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
 you download in bulk all your API responses following Mockaton's filename convention.
-
-
-## Skills
-```sh
-npx skills add ericfortis/mockaton
-```
 <!-- SKILLS_IGNORE_END -->
 
 
@@ -135,3 +145,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/package.json

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

package/skills/mockaton/SKILL.md

@@ -4,36 +4,34 @@ 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. |
+| /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. |
 
 
 
@@ -93,4 +91,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/{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

@@ -4,21 +4,21 @@
  */
 
 import { join, relative } from 'node:path'
+
 import { write, rm, isFile, resolveIn } from './utils/fs.js'
+import { removeQueryStringAndFragment } from './utils/HttpIncomingMessage.js'
+import { sseClientHotReload } from './utils/WatcherDevClient.js'
 
-import openapi from '../../www/src/assets/openapi.json' with { type: 'json' }
 import pkgJSON from '../../package.json' with { type: 'json' }
-
-import { sseClientHotReload } from './utils/WatcherDevClient.js'
-import { stopMocksDirWatcher, sseClientSyncVersion, uiSyncVersion, watchMocksDir } from './Watcher.js'
+import openapi from '../../www/src/assets/openapi.json' with { type: 'json' }
 
 import { API } from '../client/ApiConstants.js'
 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 { removeQueryStringAndFragment } from './utils/HttpIncomingMessage.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'
 
 
 export const CLIENT_ASSETS = join(import.meta.dirname, '../client')
@@ -32,7 +32,7 @@ const getReqs = new Map([
 
 	[API.root, serveDashboard],
 	[API.state, getState],
-	[API.syncVersion, sseClientSyncVersion],
+	[API.syncVersion, Watcher.sseClientSyncVersion],
 
 	[API.watchHotReload, onDevWatch],
 	[API.openAPI, (_, response) => response.json(openapi)],
@@ -94,9 +94,9 @@ function serveDashboard(_, response) {
 function getState(_, response) {
 	response.json({
 		cookies: cookie.list(),
-		comments: mockBrokersCollection.extractAllComments(),
+		comments: brokers.extractAllComments(),
 
-		brokersByMethod: mockBrokersCollection.all(),
+		brokersByMethod: brokers.all(),
 
 		delay: config.delay,
 		delayJitter: config.delayJitter,
@@ -118,10 +118,11 @@ function onDevWatch(req, response) {
 /** # PATCH */
 
 function reset(_, response) {
-	mockBrokersCollection.init()
+	reinitConfig()
+	brokers.init()
 	cookie.init(config.cookies)
 	response.ok()
-	uiSyncVersion.increment()
+	Watcher.emitChange()
 }
 
 
@@ -133,7 +134,7 @@ async function setCorsAllowed(req, response) {
 	else {
 		config.corsAllowed = corsAllowed
 		response.ok()
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
@@ -146,7 +147,7 @@ async function setGlobalDelay(req, response) {
 	else {
 		config.delay = delay
 		response.ok()
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
@@ -158,7 +159,7 @@ async function setGlobalDelayJitter(req, response) {
 	else {
 		config.delayJitter = jitter
 		response.ok()
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
@@ -170,7 +171,7 @@ async function selectCookie(req, response) {
 		response.unprocessable(error?.message || error)
 	else {
 		response.json(cookie.list())
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
@@ -183,7 +184,7 @@ async function setProxyFallback(req, response) {
 	else {
 		config.proxyFallback = fallback
 		response.ok()
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
@@ -195,7 +196,7 @@ async function setCollectProxied(req, response) {
 	else {
 		config.collectProxied = collectProxied
 		response.ok()
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
@@ -203,41 +204,41 @@ async function setCollectProxied(req, response) {
 
 async function bulkUpdateBrokersByCommentTag(req, response) {
 	const comment = await req.json()
-	mockBrokersCollection.setMocksMatchingComment(comment)
+	brokers.setMocksMatchingComment(comment)
 	response.ok()
-	uiSyncVersion.increment()
+	Watcher.emitChange()
 }
 
 
 async function selectMock(req, response) {
 	const file = await req.json()
-	const broker = mockBrokersCollection.brokerByFilename(file)
+	const broker = brokers.brokerByFilename(file)
 	if (!broker || !broker.hasMock(file))
 		response.unprocessable(`Missing Mock: ${file}`)
 	else {
 		broker.selectFile(file)
 		response.json(broker)
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
 
 async function toggleRouteStatus(req, response) {
 	const [method, urlMask, status] = await req.json()
-	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
+	const broker = brokers.brokerByRoute(method, urlMask)
 	if (!broker)
 		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
 	else {
 		broker.toggleStatus(status)
 		response.json(broker)
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
 
 async function setRouteIsDelayed(req, response) {
 	const [method, urlMask, delayed] = await req.json()
-	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
+	const broker = brokers.brokerByRoute(method, urlMask)
 	if (!broker)
 		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
 	else if (typeof delayed !== 'boolean')
@@ -245,14 +246,14 @@ async function setRouteIsDelayed(req, response) {
 	else {
 		broker.setDelayed(delayed)
 		response.json(broker)
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
 
 async function setRouteIsProxied(req, response) {
 	const [method, urlMask, proxied] = await req.json()
-	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
+	const broker = brokers.brokerByRoute(method, urlMask)
 	if (!broker)
 		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
 	else if (typeof proxied !== 'boolean')
@@ -262,51 +263,53 @@ async function setRouteIsProxied(req, response) {
 	else {
 		broker.setProxied(proxied)
 		response.json(broker)
-		uiSyncVersion.increment()
+		Watcher.emitChange()
 	}
 }
 
 
 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) {
-		mockBrokersCollection.registerMock(file, true)
-		uiSyncVersion.increment()
+		brokers.registerMock(file, true)
+		Watcher.emitChange()
 	}
 	response.ok()
 }
 
 
 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 (!isFile(path))
-		return response.unprocessable(`Missing Mock: ${file}`)
-
-	await rm(path)
+		response.forbidden('Filename path resolves outside config.mocksDir')
+	else if (!isFile(path))
+		response.unprocessable(`Missing Mock: ${file}`)
+	else
+		await rm(path)
 
 	if (!config.watcherEnabled) {
-		mockBrokersCollection.unregisterMock(file)
-		uiSyncVersion.increment()
+		brokers.unregisterMock(file)
+		Watcher.emitChange()
 	}
 	response.ok()
 }
@@ -319,9 +322,9 @@ async function setWatchMocks(req, response) {
 		response.unprocessable(`Expected boolean for "watchMocks"`)
 	else {
 		if (enabled)
-			watchMocksDir()
+			Watcher.watchMocksDir()
 		else
-			stopMocksDirWatcher()
+			Watcher.unwatchMocksDir()
 		response.ok()
 	}
 }

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,