mockaton 11.2.0 → 11.2.2

package/README.md

@@ -1,13 +1,12 @@
 <img src="src/Logo.svg" alt="Mockaton Logo" width="210" style="margin-top: 30px"/>
 
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
-![NPM Version](https://img.shields.io/npm/l/mockaton)
 [![Test](https://github.com/ericfortis/mockaton/actions/workflows/test.yml/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/test.yml)
 [![CodeQL](https://github.com/ericfortis/mockaton/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/github-code-scanning/codeql)
 [![codecov](https://codecov.io/github/ericfortis/mockaton/graph/badge.svg?token=90NYLMMG1J)](https://codecov.io/github/ericfortis/mockaton)
 
-An HTTP mock server for simulating APIs with minimal setup
-&mdash; ideal for testing difficult to reproduce backend states.
+An HTTP mock server for simulating APIs with minimal setup &mdash; ideal
+for testing difficult to reproduce backend states. 
 
 ## Overview
 With Mockaton, you don’t need to write code for wiring up your
@@ -17,16 +16,17 @@ following a convention similar to the URLs.
 For example, for [/api/company/123](#), the filename could be:
 
 <pre>
-<code>my-mocks-dir/<b>api/company</b>/[company-id].GET.200.json</code>
+<code>my-mocks-dir/<b>api/company</b>/[id].GET.200.json</code>
 </pre>
 
 <br/>
 
 
 ## Quick Start (Docker)
-This will spin up Mockaton with the mock directories included in this repo:
-[mockaton-mocks/](./mockaton-mocks) and [mockaton-static-mocks/](./mockaton-static-mocks)
-mounted on the container.
+This will spin up Mockaton with the sample directories
+included in this repo mounted on the container.
+
+_[mockaton-mocks/](./mockaton-mocks) and [mockaton-static-mocks/](./mockaton-static-mocks)_
 
 ```sh
 git clone https://github.com/ericfortis/mockaton.git --depth 1
@@ -97,8 +97,8 @@ api/videos.GET.<b>500</b>.txt   # Internal Server Error
 ### Option 1: Browser extension
 The companion Chrome [devtools
 extension](https://github.com/ericfortis/download-http-requests-browser-ext)
-lets you download all the HTTP responses, and they
-get saved following Mockaton’s filename convention.
+lets you download all the HTTP responses and 
+save them following Mockaton’s filename convention.
 
 ### Option 2: Fallback to your backend
 <details>
@@ -117,30 +117,17 @@ They will be saved in your `config.mocksDir` following the filename convention.
 </details>
 
 <br/>
-
 <br/>
 
 
 ## Motivation
 
-### Testing scenarios that would otherwise be skipped
-- Simulate errors on third-party APIs, or on your project’s backend (if you are a frontend dev, or unfamiliar with that code)
-- Trigger dynamic states on an API. You can do this by using comments on mock filenames, for example, for polled alerts or notifications.
-- Trigger empty (no content) responses
-- Sometimes, the ideal flow you need is just too difficult to reproduce from the actual backend
-
-### Works around unstable dev backends while developing UIs
-- Spinning up dev infrastructure
-- Syncing the database
-- Mitigates progress from being blocked by waiting for APIs
-
-### Time travel
-If you commit the mocks to your repo, you don’t have to downgrade backends when:
-- Checking out long-lived branches
-- Bisecting bugs
-
 ### Deterministic and comprehensive states
-- Ideal for setting up screenshot tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton)
+Sometimes the flow you need to test is
+too difficult to reproduce from the actual backend.
+ 
+- Demo edge cases to PMs, Design, and clients
+- Set up screenshot tests, e.g., with [pixaton](https://github.com/ericfortis/pixaton)
 - Spot inadvertent regressions during development. For example, the demo app in
   this repo has a list of colors containing all of their possible states, such as
   permutations for out-of-stock, new-arrival, and discontinued. This way you’ll
@@ -148,6 +135,10 @@ If you commit the mocks to your repo, you don’t have to downgrade backends whe
 
 <img src="./demo-app-vite/pixaton-tests/pic-for-readme.vp740x880.light.gold.png" alt="Mockaton Demo App Screenshot" width="740" />
 
+<br/>
+
+
+## Benefits
 
 ### Standalone demo server (Docker)
 You can demo your app by compiling the frontend and putting
@@ -157,27 +148,54 @@ repo includes a demo which builds and runs a docker container.
 ```sh
 git clone https://github.com/ericfortis/mockaton.git --depth 1
 cd mockaton/demo-app-vite
-make start-standalone-demo
+make run-standalone-demo
 ```
 - App: http://localhost:4040
 - Dashboard: http://localhost:4040/mockaton
 
+### Testing scenarios that would otherwise be skipped
+- Trigger dynamic states on an API. You can do this by using comments on mock filenames, for example, for polled alerts or notifications.
+- Testing retries, you can change an endpoint from a 500 to a 200 on the fly.
+- Simulate errors on third-party APIs, or on your project’s backend (if you are a frontend dev, or unfamiliar with that code)
+- Generating dynamic responses. Mockaton lets you use Node’s HTTP handlers (see function mocks) when using function mocks.
+So you can, e.g.:
+  - have an in-memory database
+  - read from disk
+  - read query string 
+  - pretty much anything you can do with a normal backend request handler
 
 ### Privacy and security
 - Does not write to disk. Except when you select ✅ **Save Mocks** for scraping mocks from a backend
 - Does not initiate network connections (no logs, no telemetry)
 - Does not hijack your HTTP client
-- Auditable, organized, and small. 4 KLoC (half is UI and tests)
+- Auditable
+  - Organized and small. 4 KLoC (half is UI and tests)
   - Zero dependencies. No runtime and no build packages.
 
 <br/>
 
+## Benefits of Mocking APIs in General
+The section above highlights benefits specific to Mockaton. There are more, but
+in general here are some benefits which Mockaton has but other tools have as well:
+
+### Works around unstable dev backends while developing UIs
+- Syncing the database and spinning up dev infrastructure can be complex
+- Mitigates progress from being blocked by waiting for APIs
+
+### Time travel
+If you commit the mocks to your repo, you don’t have to downgrade
+backends when checking out long-lived branches or bisecting bugs.
+
+<br/>
+
+
+## Usage (without Docker)
 
-## Usage Without Docker
+_For Docker, see the Quick-Start section above._
 
-Requires Node.js. **v22.18+** support writing mocks in TypeScript.
+Requires Node.js **v22.18+**, which supports TypeScript mocks.
 
-1. Create a mock in the default mocks directory (`./mockaton-mocks`)
+1. Create a mock in the default directory (`./mockaton-mocks`)
 ```sh
 mkdir -p         mockaton-mocks/api
 echo "[1,2,3]" > mockaton-mocks/api/foo.GET.200.json
@@ -220,7 +238,7 @@ The CLI options override their counterparts in `mockaton.config.js`
 -p, --port <port>      (default: 0) which means auto-assigned
 
 -q, --quiet            Errors only
---no-open              Don’t open dashboard in a browser (noops onReady callback)
+--no-open              Don’t open dashboard in a browser
 
 -h, --help
 -v, --version
@@ -230,16 +248,11 @@ The CLI options override their counterparts in `mockaton.config.js`
 ## mockaton.config.js (Optional)
 Mockaton looks for a file `mockaton.config.js` in its current working directory.
 
-<details>
-<summary>Defaults Overview… </summary>
+### Defaults Overview
+The next section has the documentation, but here's an overview of the defaults:
 
 ```js
-import {
-  defineConfig,
-  jsToJsonPlugin,
-  openInBrowser,
-  SUPPORTED_METHODS
-} from 'mockaton'
+import { defineConfig, jsToJsonPlugin, openInBrowser, SUPPORTED_METHODS } from 'mockaton'
 
 export default defineConfig({
   mocksDir: 'mockaton-mocks',
@@ -248,11 +261,11 @@ export default defineConfig({
   watcherEnabled: true,
 
   host: '127.0.0.1',
-  port: 0,
+  port: 0, // auto-assigned
 
   logLevel: 'normal',
 
-  delay: 1200,
+  delay: 1200, // ms. Applies to routes with the Delay Checkbox "ON"
   delayJitter: 0,
 
   proxyFallback: '',
@@ -271,7 +284,6 @@ export default defineConfig({
   corsCredentials: true,
   corsMaxAge: 0,
 
-
   plugins: [
     [/\.(js|ts)$/, jsToJsonPlugin]
   ],
@@ -280,8 +292,7 @@ export default defineConfig({
 })
 ```
 
-</details>
-
+<br/>
 <details>
 <summary><b>Config Documentation…</b></summary>
 
@@ -361,7 +372,7 @@ the filename will have `[id]` in their place. For example:
   my-mocks-dir<b>/api/user/</b>[id]<b>/likes</b>.GET.200.json
 </pre>
 
-Your existing mocks won’t be overwritten. In other words, responses of routes with
+Your existing mocks won’t be overwritten. Responses of routes with
 the ☁️ **Cloud Checkbox** selected will be saved with unique filename-comments.
 
 
@@ -411,7 +422,7 @@ If you need to send more than one cookie, you can inject them globally
 in `config.extraHeaders`, or individually in a function `.js` or `.ts` mock.
 
 By the way, the `jwtCookie` helper has a hardcoded header and signature.
-In other words, it’s useful only if you care about its payload.
+So it’s useful only if you care about its payload.
 
 <br/>
 
@@ -562,7 +573,7 @@ const server = await Mockaton(
 
 
 ## You can write JSON mocks in JavaScript or TypeScript
-_TypeScript mocks need **Node 22.18+ or 23.6+**_
+_TypeScript needs **Node 22.18+ or 23.6+**_
 
 For example, `api/foo.GET.200.js`
 
@@ -572,7 +583,7 @@ For example, `api/foo.GET.200.js`
 export default { foo: 'bar' }
 ```
 
-### Option B: Function (async or sync)
+### Option B: Function Mocks (async or sync)
 
 **Return** a `string | Buffer | Uint8Array`, but **don’t call** `response.end()`
 
@@ -632,7 +643,7 @@ export default function listColors() {
 **What if I need to serve a static .js or .ts?**
 
 **Option A:** Put it in your `config.staticDir` without the `.GET.200.js` extension.
-In other words, mocks in `staticDir` take precedence over `mocksDir/*`.
+Mocks in `staticDir` take precedence over `mocksDir/*`.
 
 **Option B:** Read it and return it. For example:
 ```js
@@ -662,7 +673,6 @@ want a `Content-Type` header in the response.
 
 <details>
 <summary>Supported Methods</summary>
-<p>From <code>require('node:http').METHODS</code></p>
 <p>
 	ACL, BIND, CHECKOUT,
 	CONNECT, COPY, DELETE,
@@ -702,8 +712,6 @@ api/foo.GET.200.json
 
 A filename can have many comments.
 
-<br/>
-
 ### Default mock for a route
 You can add the comment: `(default)`.
 Otherwise, the first file in **alphabetical order** wins.
@@ -715,7 +723,7 @@ api/user<b>(default)</b>.GET.200.json
 <br/>
 
 ### Query string params
-The query string is ignored for routing purposes. In other words, it’s only used for
+The query string is ignored for routing purposes. It’s only used for
 documenting the URL contract.
 <pre>
 api/video<b>?limit=[limit]</b>.GET.200.json
@@ -723,7 +731,7 @@ api/video<b>?limit=[limit]</b>.GET.200.json
 
 On Windows, filenames containing "?" are [not
 permitted](https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file), but since that’s part of the query
-string it’s ignored anyway.
+string, it’s ignored anyway.
 
 <br/>
 
@@ -752,7 +760,6 @@ All of its methods return their `fetch` response promise.
 ```js
 import { Commander } from 'mockaton'
 
-
 const myMockatonAddr = 'http://localhost:4040'
 const mockaton = new Commander(myMockatonAddr)
 ```
@@ -852,6 +859,9 @@ await mockaton.reset()
 
 ## Alternatives worth learning as well
 
+<details>
+<summary>Learn more…</summary>
+
 ### Proxy-like
 These are similar to Mockaton in the sense that you can modify the
 mock response without loosing or risking your frontend code state. For
@@ -875,7 +885,9 @@ programs hijack your browser’s HTTP client (and Node’s).
 - [Wire Mock](https://github.com/wiremock/wiremock)
 - [Mock](https://github.com/dhuan/mock)
 - [Swagger](https://swagger.io/)
+- [Mockoon](https://mockoon.com)
 
+</details>
 
 <br/>
 <br/>

package/index.d.ts

@@ -43,6 +43,8 @@ export interface Config {
 	plugins?: [filenameTester: RegExp, plugin: Plugin][]
 
 	onReady?: (address: string) => void
+	
+	hotReload?: boolean // For UI dev purposes only
 }
 
 

package/index.js

@@ -3,6 +3,6 @@ export { Commander } from './src/ApiCommander.js'
 
 export { jwtCookie } from './src/utils/jwt.js'
 export { jsToJsonPlugin } from './src/MockDispatcher.js'
-export { parseJSON } from './src/utils/http-request.js'
+export { parseJSON, BodyReaderError } from './src/utils/http-request.js'
 
 export const defineConfig = opts => opts

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "11.2.0",
+	"version": "11.2.2",
 	"types": "./index.d.ts",
 	"exports": {
 		".": {

package/src/Api.js

@@ -6,6 +6,7 @@
 import { join } from 'node:path'
 
 import { cookie } from './cookie.js'
+import { devWatcher } from './WatcherDev.js'
 import { parseJSON } from './utils/http-request.js'
 import { uiSyncVersion } from './Watcher.js'
 import * as staticCollection from './staticCollection.js'
@@ -16,23 +17,31 @@ import { sendOK, sendJSON, sendUnprocessable, sendFile, sendHTML } from './utils
 import { API, LONG_POLL_SERVER_TIMEOUT, HEADER_SYNC_VERSION } from './ApiConstants.js'
 
 
+const DEV = process.env.NODE_ENV === 'development'
+
+export const DASHBOARD_ASSETS = [
+	'Dashboard.css',
+	'Dashboard.js',
+	'DashboardDom.js',
+	'DashboardStore.js',
+	'DashboardDevHotReload.js',
+	'ApiCommander.js',
+	'Logo.svg',
+	'Filename.js', // used on server too
+	'ApiConstants.js', // used on server too
+]
+
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
-	...[
-		'Logo.svg',
-		'Dashboard.css',
-		'ApiCommander.js',
-		'ApiConstants.js',
-		'Dashboard.js',
-		'DashboardDom.js',
-		'DashboardStore.js',
-		'Filename.js'
-	].map(f => [API.dashboard + '/' + f, serveStatic(f)]),
-
+	...DASHBOARD_ASSETS.map(f => [API.dashboard + '/' + f, serveStatic(f)]),
+	
 	[API.state, getState],
 	[API.syncVersion, longPollClientSyncVersion],
-	[API.throws, () => { throw new Error('Test500') }]
 ])
+if (DEV) {
+	apiGetRequests.set(API.throws, () => { throw new Error('Test500') })
+	apiGetRequests.set(API.watchHotReload, longPollDevHotReload)
+}
 
 export const apiPatchRequests = new Map([
 	[API.cors, setCorsAllowed],
@@ -54,7 +63,7 @@ export const apiPatchRequests = new Map([
 /** # GET */
 
 function serveDashboard(_, response) {
-	sendHTML(response, DashboardHtml, CSP)
+	sendHTML(response, DashboardHtml(config.hotReload), CSP)
 }
 
 function serveStatic(f) {
@@ -101,6 +110,23 @@ function longPollClientSyncVersion(req, response) {
 }
 
 
+function longPollDevHotReload(req, response) {
+	function onDevChange(file) {
+		devWatcher.unsubscribe(onDevChange)
+		sendJSON(response, file)
+	}
+	response.setTimeout(LONG_POLL_SERVER_TIMEOUT, () => {
+		devWatcher.unsubscribe(onDevChange)
+		sendJSON(response, '')
+	})
+	req.on('error', () => {
+		devWatcher.unsubscribe(onDevChange)
+		response.destroy()
+	})
+	devWatcher.subscribe(onDevChange)
+}
+
+
 
 /** # PATCH */
 

package/src/ApiConstants.js

@@ -17,7 +17,8 @@ export const API = {
 	staticStatus: MOUNT + '/static-status',
 	syncVersion: MOUNT + '/sync-version',
 	throws: MOUNT + '/throws',
-	toggle500: MOUNT + '/toggle500'
+	toggle500: MOUNT + '/toggle500',
+	watchHotReload: MOUNT + '/watch-hot-reload',
 }
 
 export const HEADER_502 = 'Mockaton502'

package/src/Dashboard.css

@@ -132,7 +132,7 @@ header {
 	border-bottom: 1px solid var(--colorSecondaryActionBorder);
 	background: var(--colorHeaderBackground);
 
-	> img {
+	> object {
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 5px;

package/src/Dashboard.js

@@ -96,9 +96,9 @@ function App() {
 function Header() {
 	return (
 		r('header', null,
-			r('img', {
-				alt: t`Mockaton`,
-				src: 'Logo.svg',
+			r('object', {
+				data: 'Logo.svg',
+				type: 'image/svg+xml',
 				width: 120,
 				height: 22
 			}),
@@ -737,7 +737,7 @@ function SettingsIcon() {
  * The version increments when a mock file is added, removed, or renamed.
  */
 function initRealTimeUpdates() {
-	let oldVersion = undefined // undefined waits until next event or timeout 
+	let oldVersion = undefined // undefined so it waits until next event or timeout 
 	let controller = new AbortController()
 
 	longPoll()
@@ -823,8 +823,12 @@ function initKeyboardNavigation() {
 
 
 function SyntaxJSON(json) {
+	// Capture groups: [string, optional colon, punc]
+	const regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s]+)|\S+/g
+
 	const MAX_NODES = 50_000
 	let nNodes = 0
+
 	const frag = new DocumentFragment()
 
 	function span(className, textContent) {
@@ -842,8 +846,7 @@ function SyntaxJSON(json) {
 
 	let match
 	let lastIndex = 0
-	SyntaxJSON.regex.lastIndex = 0 // resets regex
-	while ((match = SyntaxJSON.regex.exec(json)) !== null) {
+	while ((match = regex.exec(json)) !== null) {
 		if (nNodes > MAX_NODES)
 			break
 
@@ -865,13 +868,15 @@ function SyntaxJSON(json) {
 	text(json.slice(lastIndex))
 	return frag
 }
-SyntaxJSON.regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s]+)|\S+/g
-// Capture group order: [string, optional colon, punc]
 
 
 function SyntaxXML(xml) {
+	// Capture groups: [tagPunc, tagName, attrName, attrVal]
+	const regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g
+
 	const MAX_NODES = 50_000
 	let nNodes = 0
+
 	const frag = new DocumentFragment()
 
 	function span(className, textContent) {
@@ -889,8 +894,7 @@ function SyntaxXML(xml) {
 
 	let match
 	let lastIndex = 0
-	SyntaxXML.regex.lastIndex = 0
-	while ((match = SyntaxXML.regex.exec(xml)) !== null) {
+	while ((match = regex.exec(xml)) !== null) {
 		if (nNodes > MAX_NODES)
 			break
 
@@ -908,6 +912,4 @@ function SyntaxXML(xml) {
 	frag.normalize()
 	return frag
 }
-SyntaxXML.regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g
-// Capture groups order:  [tagPunc, tagName, attrName, attrVal]
 

package/src/DashboardDevHotReload.js

@@ -0,0 +1,34 @@
+import { API } from './ApiConstants.js'
+
+
+longPoll()
+async function longPoll() {
+	try {
+		const response = await fetch(API.watchHotReload)
+		if (response.ok) {
+			const editedFile = await response.json() || ''
+			if (editedFile.endsWith('.css')) {
+				hotReloadCSS(editedFile)
+				longPoll()
+			}
+			else if (editedFile)
+				location.reload()
+			else
+				longPoll()
+		}
+		else
+			throw response.statusText
+	}
+	catch (error) {
+		console.error('hot reload', error?.message || error)
+		setTimeout(longPoll, 3000)
+	}
+}
+
+function hotReloadCSS(editedFile) {
+	const link = document.querySelector(`link[href*="${editedFile}"]`)
+	if (link) {
+		const href = link.href.split('?')[0]
+		link.href = href + '?t=' + Date.now()
+	}
+}

package/src/DashboardHtml.js

@@ -6,7 +6,7 @@ export const CSP = [
 ].join(';')
 
 
-export const DashboardHtml = `<!DOCTYPE html>
+export const DashboardHtml = hotReloadEnabled => `<!DOCTYPE html>
 <html lang="en-US">
 <head>
   <meta charset="UTF-8">
@@ -30,6 +30,7 @@ export const DashboardHtml = `<!DOCTYPE html>
   <title>Mockaton</title>
 </head>
 <body>
+${hotReloadEnabled ? `<script type="module" src="DashboardDevHotReload.js"></script>` : '' }
 </body>
 </html>
 `

package/src/Filename.js

@@ -1,4 +1,4 @@
-const httpMethods = [ // @KeepSync with node:http.METHODS
+const httpMethods = [ // @KeepSync node:http.METHODS (this file is used on the client too)
 	'ACL', 'BIND', 'CHECKOUT', 'CONNECT', 'COPY', 'DELETE',
 	'GET', 'HEAD', 'LINK', 'LOCK', 'M-SEARCH', 'MERGE',
 	'MKACTIVITY', 'MKCALENDAR', 'MKCOL', 'MOVE', 'NOTIFY', 'OPTIONS',
@@ -28,7 +28,7 @@ export function validateFilename(file) {
 	if (!httpMethods.includes(method))
 		return `Unrecognized HTTP Method: "${method}"`
 } 
-// TODO ThinkAbout 206 (reject, handle, or send in full?)
+// TODO @ThinkAbout 206 (reject, handle, or send in full?)
 
 
 export function parseFilename(file) {
@@ -53,7 +53,7 @@ function responseStatusIsValid(status) {
 		&& status >= 100
 		&& status <= 599
 }
-// TODO ThinkAbout allowing custom status codes
+// TODO @ThinkAbout allowing custom status codes
 
 
 export function makeMockFilename(url, method, status, ext) {

package/src/Logo.svg

@@ -1,17 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="556" height="100" version="1.1" viewBox="0 0 556 100" xmlns="http://www.w3.org/2000/svg">
-	<style>:root { --color: #000000; }
+	<style>
 		@media (prefers-color-scheme: light) { :root { --color: #333 } }
 		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
-		path { fill: var(--color) }
+		path {
+		  fill: #777;
+		  fill: var(--color);
+		}
 	</style>
-	<g stroke-opacity=".99608">
-		<path
-			d="m13.75 1.8789c-5.9487 0.19352-10.865 4.5652-11.082 11.686v81.445c-1e-7 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-64.982c0.02794-3.4488 3.0988-3.5551 4.2031-1.1562l16.615 59.059c1.4393 5.3711 5.1083 7.9633 8.7656 7.9473 3.6573 0.01603 7.3263-2.5762 8.7656-7.9473l16.615-59.059c1.1043-2.3989 4.1752-2.2925 4.2031 1.1562v64.982c0 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-81.445c-0.17732-7.0807-5.1334-11.492-11.082-11.686-5.9487-0.19352-12.652 3.8309-15.609 13.619l-15.686 57.334-15.686-57.334c-2.9569-9.7882-9.6607-13.813-15.609-13.619zm239.19 0.074219c-2.216 0-4 1.784-4 4v89.057c0 2.216 1.784 4 4 4h4.793c2.216 0 3.9868-1.784 4-4l0.10644-17.94c0.0734-0.07237 12.175-13.75 12.175-13.75 5.6772 11.091 11.404 22.158 17.113 33.232 1.0168 1.9689 3.4217 2.7356 5.3906 1.7188l4.2578-2.1992c1.9689-1.0168 2.7356-3.4217 1.7188-5.3906-6.4691-12.585-12.958-25.16-19.442-37.738l17.223-19.771c1.4555-1.671 1.2803-4.189-0.39062-5.6445l-3.6133-3.1465c-0.73105-0.63679-1.6224-0.96212-2.5176-0.98633-1.151-0.03113-2.3063 0.43508-3.125 1.375l-28.896 33.174v-51.99c0-2.216-1.784-4-4-4zm-58.255 23.316c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312l-0.125-7.8457c0-2.216-1.784-4-4-4h-4.6524c-2.216 0-4 1.784-4 4l3e-3 6.7888c3e-3 3.8063-1.5601 9.3694-8.4716 9.3694h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.6937 0 8.3697 5.2207 8.4687 11.828v2.2207c0 2.216 1.784 4 4 4h4.6524c2.216 0 4-1.784 4-4l0.125-5.7363c0-10.699-8.6117-19.312-19.311-19.312zm-72.182 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z"/>
-		<path
-			d="m331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z"
-			opacity="0.75"/>
-		<path
-			d="m392.75 1.373c-2.216 0-4 1.784-4 4v18.043h-5.3086c-2.216 0-4 1.784-4 4v4.793c0 2.216 1.784 4 4 4h5.3086v51.398c0 6.1465 3.7064 10.823 9.232 10.823h16.531c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-12.97v-49.428h9.8711c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-9.8711v-18.043c0-2.216-1.784-4-4-4zm122.96 23.896c-10.699 0-19.312 8.6137-19.312 19.312v49.812c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-45.648c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v45.684c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312zm-69.999 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z"/>
-	</g>
+	<path
+		d="m13.75 1.8789c-5.9487 0.19352-10.865 4.5652-11.082 11.686v81.445c-1e-7 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-64.982c0.02794-3.4488 3.0988-3.5551 4.2031-1.1562l16.615 59.059c1.4393 5.3711 5.1083 7.9633 8.7656 7.9473 3.6573 0.01603 7.3263-2.5762 8.7656-7.9473l16.615-59.059c1.1043-2.3989 4.1752-2.2925 4.2031 1.1562v64.982c0 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-81.445c-0.17732-7.0807-5.1334-11.492-11.082-11.686-5.9487-0.19352-12.652 3.8309-15.609 13.619l-15.686 57.334-15.686-57.334c-2.9569-9.7882-9.6607-13.813-15.609-13.619zm239.19 0.074219c-2.216 0-4 1.784-4 4v89.057c0 2.216 1.784 4 4 4h4.793c2.216 0 3.9868-1.784 4-4l0.10644-17.94c0.0734-0.07237 12.175-13.75 12.175-13.75 5.6772 11.091 11.404 22.158 17.113 33.232 1.0168 1.9689 3.4217 2.7356 5.3906 1.7188l4.2578-2.1992c1.9689-1.0168 2.7356-3.4217 1.7188-5.3906-6.4691-12.585-12.958-25.16-19.442-37.738l17.223-19.771c1.4555-1.671 1.2803-4.189-0.39062-5.6445l-3.6133-3.1465c-0.73105-0.63679-1.6224-0.96212-2.5176-0.98633-1.151-0.03113-2.3063 0.43508-3.125 1.375l-28.896 33.174v-51.99c0-2.216-1.784-4-4-4zm-58.255 23.316c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312l-0.125-7.8457c0-2.216-1.784-4-4-4h-4.6524c-2.216 0-4 1.784-4 4l3e-3 6.7888c3e-3 3.8063-1.5601 9.3694-8.4716 9.3694h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.6937 0 8.3697 5.2207 8.4687 11.828v2.2207c0 2.216 1.784 4 4 4h4.6524c2.216 0 4-1.784 4-4l0.125-5.7363c0-10.699-8.6117-19.312-19.311-19.312zm-72.182 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z"/>
+	<path
+		d="m331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z"
+		opacity="0.75"/>
+	<path
+		d="m392.75 1.373c-2.216 0-4 1.784-4 4v18.043h-5.3086c-2.216 0-4 1.784-4 4v4.793c0 2.216 1.784 4 4 4h5.3086v51.398c0 6.1465 3.7064 10.823 9.232 10.823h16.531c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-12.97v-49.428h9.8711c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-9.8711v-18.043c0-2.216-1.784-4-4-4zm122.96 23.896c-10.699 0-19.312 8.6137-19.312 19.312v49.812c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-45.648c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v45.684c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312zm-69.999 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z"/>
 </svg>

package/src/MockBroker.js

@@ -22,7 +22,7 @@ export class MockBroker {
 
 	#sortMocks() {
 		this.mocks.sort()
-		const defaults = this.mocks.filter(file => includesComment(file, DEFAULT_MOCK_COMMENT))
+		const defaults = this.mocks.filter(f => includesComment(f, DEFAULT_MOCK_COMMENT))
 		this.mocks = Array.from(new Set(defaults).union(new Set(this.mocks)))
 	}
 
@@ -55,18 +55,19 @@ export class MockBroker {
 	}
 
 	toggle500() {
-		this.proxied = false
-		if (this.auto500 || this.status === 500)
+		const shouldUnset = this.auto500 || this.status === 500
+		if (shouldUnset)
 			this.selectDefaultFile()
 		else {
-			const f = this.mocks.find(this.#is500) // TESTME
-			if (f)
-				this.selectFile(f)
+			const f500 = this.mocks.find(this.#is500)
+			if (f500)
+				this.selectFile(f500)
 			else {
 				this.auto500 = true
-				this.status = 500 // TESTME
+				this.status = 500
 			}
 		}
+		this.proxied = false
 	}
 
 	setDelayed(delayed) {

package/src/MockDispatcher.js

@@ -31,17 +31,23 @@ export async function dispatchMock(req, response) {
 		if (cookie.getCurrent())
 			response.setHeader('Set-Cookie', cookie.getCurrent())
 
-		response.statusCode = broker.auto500 ? 500 : broker.status // TESTME plugins can change it
+		response.statusCode = broker.auto500
+			? 500
+			: broker.status
 		const { mime, body } = broker.auto500
 			? { mime: '', body: '' }
 			: await applyPlugins(join(config.mocksDir, broker.file), req, response)
 
-		logger.accessMock(req.url, broker.file)
 		response.setHeader('Content-Type', mime)
 		response.setHeader('Content-Length', length(body))
-		
-		setTimeout(() => response.end(isHead ? null : body),
-			Number(broker.delayed && calcDelay()))
+
+		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
@@ -74,7 +80,6 @@ export async function jsToJsonPlugin(filePath, req, response) {
 
 function length(body) {
 	if (typeof body === 'string') return Buffer.byteLength(body)
-	if (Buffer.isBuffer(body)) return body.length
-	if (body instanceof Uint8Array) return body.byteLength
+	if (body instanceof Uint8Array) return body.byteLength // Buffers are u8
 	return 0
 }

package/src/Mockaton.js

@@ -1,4 +1,5 @@
 import { createServer } from 'node:http'
+import pkgJSON from '../package.json' with { type: 'json' }
 
 import { API } from './ApiConstants.js'
 import { logger } from './utils/logger.js'
@@ -8,12 +9,18 @@ import { dispatchStatic } from './StaticDispatcher.js'
 import * as staticCollection from './staticCollection.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
-import { watchMocksDir, watchStaticDir } from './Watcher.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
 import { BodyReaderError, hasControlChars } from './utils/http-request.js'
-import { sendNoContent, sendInternalServerError, sendUnprocessable, sendTooLongURI, sendBadRequest } from './utils/http-response.js'
+import {
+	setHeaders, sendNoContent, sendInternalServerError,
+	sendUnprocessable, sendTooLongURI, sendBadRequest
+} from './utils/http-response.js'
+import { watchDevSPA } from './WatcherDev.js'
+import { watchMocksDir, watchStaticDir } from './Watcher.js'
 
 
+const DEV = process.env.NODE_ENV === 'development'
+
 export function Mockaton(options) {
 	return new Promise((resolve, reject) => {
 		setup(options)
@@ -25,6 +32,8 @@ export function Mockaton(options) {
 			watchMocksDir()
 			watchStaticDir()
 		}
+		if (DEV && config.hotReload)
+			watchDevSPA()
 
 		const server = createServer(onRequest)
 		server.on('error', reject)
@@ -41,9 +50,9 @@ export function Mockaton(options) {
 
 async function onRequest(req, response) {
 	response.on('error', logger.warn)
-	
-	for (let i = 0; i < config.extraHeaders.length; i += 2)
-		response.setHeader(config.extraHeaders[i], config.extraHeaders[i + 1])
+
+	setHeaders(response, ['Server', `Mockaton ${pkgJSON.version}`])
+	setHeaders(response, config.extraHeaders)
 
 	const url = req.url || ''
 

package/src/Watcher.js

@@ -30,7 +30,7 @@ export const uiSyncVersion = new class extends EventEmitter {
 		this.removeListener('ARR', listener)
 	}
 
-	#debounce(fn) {
+	#debounce(fn) { // TESTME 
 		let timer
 		return () => {
 			clearTimeout(timer)
@@ -45,7 +45,7 @@ export function watchMocksDir() {
 		if (!file)
 			return
 
-		if (isDirectory(join(dir, file))) { // TESTME
+		if (isDirectory(join(dir, file))) {
 			mockBrokerCollection.init()
 			uiSyncVersion.increment()
 		}
@@ -61,7 +61,7 @@ export function watchMocksDir() {
 	})
 }
 
-export function watchStaticDir() { // TESTME
+export function watchStaticDir() {
 	const dir = config.staticDir
 	if (!dir)
 		return

package/src/WatcherDev.js

@@ -0,0 +1,19 @@
+import { watch } from 'node:fs'
+import { EventEmitter } from 'node:events'
+import { DASHBOARD_ASSETS } from './Api.js'
+
+
+export const devWatcher = new class extends EventEmitter {
+	emit(file) { super.emit('RELOAD', file) }
+	subscribe(listener) { this.once('RELOAD', listener) }
+	unsubscribe(listener) { this.removeListener('RELOAD', listener) }
+}
+
+// DashboardHtml.js is not watched.
+// It would need dynamic import + cache busting
+export function watchDevSPA() {
+	watch('src', (_, file) => {
+		if (DASHBOARD_ASSETS.includes(file))
+			devWatcher.emit(file)
+	})
+}

package/src/cli.js

@@ -53,7 +53,7 @@ Options:
   -p, --port <port>      (default: 0) which means auto-assigned
   
   -q, --quiet            Errors only
-  --no-open              Don’t open dashboard in a browser (noops onReady callback)
+  --no-open              Don’t open dashboard in a browser
   
   -h, --help             Show this help
   -v, --version          Show version

package/src/config.js

@@ -1,5 +1,4 @@
 import { resolve } from 'node:path'
-import pkgJSON from '../package.json' with { type: 'json' }
 
 import { logger } from './utils/logger.js'
 import { isDirectory } from './utils/fs.js'
@@ -51,7 +50,9 @@ const schema = {
 			[/\.(js|ts)$/, jsToJsonPlugin]
 		], Array.isArray],
 
-	onReady: [await openInBrowser, is(Function)]
+	onReady: [await openInBrowser, is(Function)],
+
+	hotReload: [false, is(Boolean)]
 }
 
 
@@ -69,26 +70,23 @@ export const config = Object.seal(defaults)
 export const ConfigValidator = Object.freeze(validators)
 
 
-/** @param {Partial<Config>} options */
-export function setup(options) {
-	if (options.mocksDir)
-		options.mocksDir = resolve(options.mocksDir)
+/** @param {Partial<Config>} opts */
+export function setup(opts) {
+	if (opts.mocksDir)
+		opts.mocksDir = resolve(opts.mocksDir)
 
-	if (options.staticDir)
-		options.staticDir = resolve(options.staticDir)
+	if (opts.staticDir)
+		opts.staticDir = resolve(opts.staticDir)
 	else if (!isDirectory(defaults.staticDir))
-		options.staticDir = ''
+		opts.staticDir = ''
 
-	Object.assign(config, options)
+	Object.assign(config, opts)
 	validate(config, ConfigValidator)
 	logger.setLevel(config.logLevel)
-	config.extraHeaders.push('Server', `Mockaton ${pkgJSON.version}`)
 }
 
-
 export const isFileAllowed = f => !config.ignore.test(f)
 
 export const calcDelay = () => config.delayJitter
 	? config.delay * (1 + Math.random() * config.delayJitter)
 	: config.delay
-

package/src/mockBrokersCollection.js

@@ -70,10 +70,8 @@ function filenameIsValid(file) {
 
 export function unregisterMock(file) {
 	const broker = brokerByFilename(file)
-	if (!broker) // TESTME
-		return
-	const isEmpty = broker.unregister(file)
-	if (isEmpty) {
+	const hasNoMoreMocks = broker?.unregister(file)
+	if (hasNoMoreMocks) {
 		const { method, urlMask } = parseFilename(file)
 		delete collection[method][urlMask]
 		if (!Object.keys(collection[method]).length)
@@ -96,9 +94,7 @@ export function brokerByFilename(file) {
  * worry about the primacy of array-like keys when iterating.
  @returns {MockBroker | undefined} */
 export function brokerByRoute(method, url) {
-	if (!collection[method])
-		return
-	const brokers = Object.values(collection[method])
+	const brokers = Object.values(collection[method] || {})
 	for (let i = brokers.length - 1; i >= 0; i--)
 		if (brokers[i].urlMaskMatches(url))
 			return brokers[i]

package/src/staticCollection.js

@@ -29,7 +29,7 @@ export function init() {
 
 /** @returns {boolean} registered */
 export function registerMock(relativeFile) {
-	if (!isFileAllowed(basename(relativeFile))) // TESTME
+	if (!isFileAllowed(basename(relativeFile)))
 		return false
 
 	const route = '/' + relativeFile

package/src/utils/http-response.js

@@ -1,9 +1,15 @@
 import fs, { readFileSync } from 'node:fs'
+
 import { logger } from './logger.js'
 import { mimeFor } from './mime.js'
 import { HEADER_502 } from '../ApiConstants.js'
 
 
+export function setHeaders(response, headers) {
+	for (let i = 0; i < headers.length; i += 2)
+		response.setHeader(headers[i], headers[i + 1])
+}
+
 export function sendOK(response) {
 	logger.access(response)
 	response.end()

package/Makefile

@@ -1,53 +0,0 @@
-docker: docker-build docker-run
-
-docker-build:
-	@docker build --no-cache --tag mockaton $(PWD)
-
-docker-run: docker-stop
-	@docker run --name mockaton \
-		--publish 127.0.0.1:2020:2020 \
-		--volume $(PWD)/mockaton.config.js:/app/mockaton.config.js \
-    --volume $(PWD)/mockaton-mocks:/app/mockaton-mocks \
-    --volume $(PWD)/mockaton-static-mocks:/app/mockaton-static-mocks \
-		mockaton
-
-docker-stop:
-	@docker stop mockaton >/dev/null 2>&1 || true
-	@docker rm mockaton >/dev/null 2>&1 || true
-	
-
-start:
-	@node src/cli.js
-
-watch:
-	@node --watch src/cli.js
-
-
-test:
-	@MOCKATON_WATCHER_DEBOUNCE_MS=0 node --test 'src/**/*.test.js'
-
-test-docker:
-	@docker run --rm --interactive --tty \
-		--volume $(PWD):/app \
-		--workdir /app \
-		node:24 \
-		make test
-
-coverage:
-	@MOCKATON_WATCHER_DEBOUNCE_MS=0 node --test --experimental-test-coverage \
-		--test-reporter=spec --test-reporter-destination=stdout \
-		--test-reporter=lcov --test-reporter-destination=lcov.info \
-		'src/**/*.test.js'
-
-pixaton:
-	@node --test --experimental-test-isolation=none \
-		--import=./pixaton-tests/_setup.js \
-		'pixaton-tests/**/*.test.js'
-
-
-outdated:
-	@npm outdated --parseable |\
-		awk -F: '{ printf "npm i %-30s ;# %s\n", $$4, $$2 }'
-
-
-.PHONY: *