mockaton 11.1.3 → 11.2.0

package/Makefile

@@ -1,10 +1,15 @@
-docker: docker-build docker-start
+docker: docker-build docker-run
 
 docker-build:
-	docker build -t mockaton .
+	@docker build --no-cache --tag mockaton $(PWD)
 
-docker-start: docker-stop
-	docker run --name mockaton -p 127.0.0.1:2020:2020 mockaton
+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
@@ -23,7 +28,7 @@ test:
 
 test-docker:
 	@docker run --rm --interactive --tty \
-		--volume .:/app \
+		--volume $(PWD):/app \
 		--workdir /app \
 		node:24 \
 		make test
@@ -39,8 +44,10 @@ pixaton:
 		--import=./pixaton-tests/_setup.js \
 		'pixaton-tests/**/*.test.js'
 
+
 outdated:
 	@npm outdated --parseable |\
 		awk -F: '{ printf "npm i %-30s ;# %s\n", $$4, $$2 }'
 
+
 .PHONY: *

package/README.md

@@ -14,12 +14,35 @@ With Mockaton, you don’t need to write code for wiring up your
 mocks. Instead, a given directory is scanned for filenames
 following a convention similar to the URLs.
 
-For example, for [/api/user/123](#), the filename could be:
+For example, for [/api/company/123](#), the filename could be:
 
 <pre>
-<code>my-mocks-dir/<b>api/user</b>/[user-id].GET.200.json</code>
+<code>my-mocks-dir/<b>api/company</b>/[company-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.
+
+```sh
+git clone https://github.com/ericfortis/mockaton.git --depth 1
+cd mockaton
+make docker
+```
+Dashboard: http://localhost:2020/mockaton
+
+
+Test it:
+```shell
+curl localhost:2020/api/user
+```
+
+
+<br/>
 
 ## Dashboard
 
@@ -125,7 +148,6 @@ 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/>
 
 ### Standalone demo server (Docker)
 You can demo your app by compiling the frontend and putting
@@ -150,22 +172,6 @@ make start-standalone-demo
 
 <br/>
 
-## Quick Start (Docker)
-This will spin up Mockaton with the mocks included in this repo:
-[mockaton-mocks/](./mockaton-mocks) and [mockaton-static-mocks/](./mockaton-static-mocks)
-
-```sh
-git clone https://github.com/ericfortis/mockaton.git --depth 1
-make docker
-```
-Dashboard: http://localhost:2020/mockaton
-
-
-Test it:
-```shell
-curl localhost:2020/api/user
-```
-
 
 ## Usage Without Docker
 
@@ -227,8 +233,6 @@ Mockaton looks for a file `mockaton.config.js` in its current working directory.
 <details>
 <summary>Defaults Overview… </summary>
 
-As an overview, these are the defaults:
-
 ```js
 import {
   defineConfig,

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "11.1.3",
+	"version": "11.2.0",
 	"types": "./index.d.ts",
 	"exports": {
 		".": {
@@ -27,7 +27,7 @@
 	},
 	"devDependencies": {
 		"pixaton": "1.1.3",
-		"puppeteer": "24.24.1"
+		"puppeteer": "24.29.1"
 	},
 	"engines": {
 		"node": ">=22.18 <23 || >=23.6"

package/src/Dashboard.css

@@ -235,6 +235,9 @@ header {
 					margin: 0;
 					margin-right: 4px;
 				}
+				input:enabled + span {
+					cursor: pointer;
+				}
 				input:disabled + span {
 					opacity: 0.8;
 				}
@@ -287,23 +290,30 @@ header {
 	top: 62px;
 	right: 10px;
 	left: auto;
-	padding: 20px;
 	border: 1px solid var(--colorSecondaryActionBorder);
-	text-align: left;
 	color: var(--colorText);
 	border-radius: var(--radius);
 	box-shadow: var(--boxShadow1);
 	background: var(--colorHeaderBackground);
 
-	a {
-		color: var(--colorAccent);
-	}
+	> div {
+		display: inline-flex;
+		flex-direction: column;
+		padding: 20px;
+		cursor: auto;
+		gap: 12px;
+		text-align: left;
 
-	.GroupByMethod {
-		display: flex;
-		align-items: center;
-		margin-bottom: 12px;
-		gap: 6px;
+		a {
+			color: var(--colorAccent);
+		}
+
+		.GroupByMethod {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			cursor: pointer;
+		}
 	}
 }
 
@@ -610,10 +620,7 @@ table {
 		> code {
 			white-space: pre;
 			tab-size: 2;
-
-			> .json {
-				color: var(--colorSecondaryAction);
-			}
+			color: var(--colorSecondaryAction);
 
 			.syntaxPunc {
 				color: var(--colorSecondaryAction);

package/src/Dashboard.js

@@ -36,7 +36,6 @@ const CSS = {
 	rightSide: null,
 	status4xx: null,
 
-	json: null,
 	syntaxAttr: null,
 	syntaxAttrVal: null,
 	syntaxKey: null,
@@ -251,20 +250,24 @@ function SettingsMenu(id) {
 				}
 			},
 
-			r('label', className(CSS.GroupByMethod),
-				r('input', {
-					ref: firstInputRef,
-					type: 'checkbox',
-					checked: store.groupByMethod,
-					onChange: store.toggleGroupByMethod
-				}),
-				r('span', null, t`Group by Method`)),
+			r('div', null,
+				r('label', className(CSS.GroupByMethod),
+					r('input', {
+						ref: firstInputRef,
+						type: 'checkbox',
+						checked: store.groupByMethod,
+						onChange: store.toggleGroupByMethod
+					}),
+					r('span', null, t`Group by Method`)),
+
+				r('a', {
+					href: 'https://github.com/ericfortis/mockaton',
+					target: '_blank',
+					rel: 'noopener noreferrer'
+				}, t`Documentation`),
 
-			r('a', {
-				href: 'https://github.com/ericfortis/mockaton',
-				target: '_blank',
-				rel: 'noopener noreferrer'
-			}, t`Documentation`)))
+				r('p', null, `v${store.mockatonVersion}`)
+			)))
 }
 
 
@@ -650,7 +653,7 @@ async function updatePayloadViewer(proxied, file, response) {
 	else {
 		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
-			payloadViewerCodeRef.elem.replaceChildren(r('span', className(CSS.json), SyntaxJSON(body)))
+			payloadViewerCodeRef.elem.replaceChildren(SyntaxJSON(body))
 		else if (isXML(mime))
 			payloadViewerCodeRef.elem.replaceChildren(SyntaxXML(body))
 		else
@@ -755,9 +758,11 @@ function initRealTimeUpdates() {
 					ErrorToast.close()
 
 				const version = await response.json()
+				const shouldSkip = oldVersion === undefined
 				if (oldVersion !== version) { // because it could be < or >
 					oldVersion = version
-					store.fetchState()
+					if (!shouldSkip)
+						store.fetchState()
 				}
 				longPoll()
 			}

package/src/DashboardStore.js

@@ -26,10 +26,13 @@ export const store = {
 
 	getSyncVersion: api.getSyncVersion,
 
+	mockatonVersion: '',
+	
 	async fetchState() {
 		try {
 			const response = await api.getState()
 			if (!response.ok) throw response
+			store.mockatonVersion = response.headers.get('server').split(' ').pop()
 			Object.assign(store, await response.json())
 			store.render()
 		}

package/src/MockDispatcher.js

@@ -31,9 +31,6 @@ export async function dispatchMock(req, response) {
 		if (cookie.getCurrent())
 			response.setHeader('Set-Cookie', cookie.getCurrent())
 
-		for (let i = 0; i < config.extraHeaders.length; i += 2) // TESTME
-			response.setHeader(config.extraHeaders[i], config.extraHeaders[i + 1])
-
 		response.statusCode = broker.auto500 ? 500 : broker.status // TESTME plugins can change it
 		const { mime, body } = broker.auto500
 			? { mime: '', body: '' }

package/src/Mockaton.js

@@ -41,7 +41,9 @@ export function Mockaton(options) {
 
 async function onRequest(req, response) {
 	response.on('error', logger.warn)
-	response.setHeader('Server', 'Mockaton')
+	
+	for (let i = 0; i < config.extraHeaders.length; i += 2)
+		response.setHeader(config.extraHeaders[i], config.extraHeaders[i + 1])
 
 	const url = req.url || ''
 

package/src/config.js

@@ -1,4 +1,5 @@
 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'
@@ -81,6 +82,7 @@ export function setup(options) {
 	Object.assign(config, options)
 	validate(config, ConfigValidator)
 	logger.setLevel(config.logLevel)
+	config.extraHeaders.push('Server', `Mockaton ${pkgJSON.version}`)
 }