mockaton 9.6.1 → 10.1.0

package/README.md

@@ -15,7 +15,7 @@ An HTTP mock server for simulating APIs with minimal setup
 ## Motivation
 
 **No API state should be too hard to test.**
-With Mockaton, developers can achieve correctness and increase speed.
+With Mockaton, developers can achieve correctness and speed.
 
 ### Correctness
 - Enables testing of complex scenarios that would otherwise be skipped. e.g.,
@@ -60,9 +60,9 @@ Nonetheless, there’s a programmatic API, which is handy
 for setting up tests (see **Commander API** section below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp810x768.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp810x768.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp810x768.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp781x772.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp781x772.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp781x772.light.gold.png">
 </picture>
 
 
@@ -174,7 +174,7 @@ Since Mockaton has no dependencies, you can create an executable
 by linking to `src/cli.js`.
 
 ```shell
-git clone https://github.com/ericfortis/mockaton.git
+git clone https://github.com/ericfortis/mockaton.git --depth 1
 ln -s `realpath mockaton/src/cli.js` ~/bin/mockaton # some dir in your $PATH
 ```
 
@@ -501,14 +501,12 @@ Defaults to `'normal'`.
 
 ```js
 import { Mockaton } from 'mockaton'
-import mockatonConfig from './mockaton.config.js'
+import config from './mockaton.config.js'
 
-const server = Mockaton({
-  ...mockatonConfig, // Not required, but it’s not read by default.
-})
+const server = await Mockaton(
+  config // Not required, but it’s not read by default.
+)
 ```
-See [src/cli.js](src/cli.js) or [src/Mockaton.test.js](src/Mockaton.test.js) for more examples.
-
 </details>
 
 
@@ -518,7 +516,7 @@ See [src/cli.js](src/cli.js) or [src/Mockaton.test.js](src/Mockaton.test.js) for
 ## Demo App (Vite + React)
 
 ```sh  
-git clone https://github.com/ericfortis/mockaton.git
+git clone https://github.com/ericfortis/mockaton.git --depth 1
 cd mockaton/demo-app-vite
 npm install 
 

package/index.d.ts

@@ -45,7 +45,7 @@ interface Config {
 }
 
 
-export function Mockaton(options: Partial<Config>): Server | undefined
+export function Mockaton(options: Partial<Config>): Promise<Server | undefined>
 export function defineConfig(options: Partial<Config>): Partial<Config>
 
 export const jsToJsonPlugin: Plugin

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "9.6.1",
+	"version": "10.1.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -27,6 +27,6 @@
 	},
 	"devDependencies": {
 		"pixaton": "1.1.3",
-		"puppeteer": "24.19.0"
+		"puppeteer": "24.22.3"
 	}
 }

package/src/Dashboard.css

@@ -157,7 +157,7 @@ header {
 		align-items: flex-end;
 		gap: 16px 10px;
 
-		@media (max-width: 800px) {
+		@media (max-width: 780px) {
 			max-width: 400px;
 		}
 	}
@@ -315,7 +315,7 @@ main {
 	min-width: 0;
 	min-height: 0;
 
-	@media (max-width: 800px) {
+	@media (max-width: 780px) {
 		flex-direction: column;
 
 		.Resizer {
@@ -335,6 +335,7 @@ main {
 		padding: 16px;
 		padding-bottom: 0;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
+		user-select: none;
 		overflow-y: auto;
 		box-shadow: var(--boxShadow1);
 	}
@@ -437,7 +438,11 @@ table {
 	display: flex;
 
 	> input {
-		appearance: none;
+		/* For click drag target */
+		position: absolute;
+		width: 22px;
+		height: 22px;
+		opacity: 0;
 
 		&:focus {
 			outline: 0;

package/src/Dashboard.js

@@ -98,8 +98,8 @@ const state = {
 		this.groupByMethod = !this.groupByMethod
 		localStorage.setItem('groupByMethod', String(this.groupByMethod))
 	},
-	
-	leftSideWidth: undefined,
+
+	leftSideWidth: undefined
 }
 
 const mockaton = new Commander(window.location.origin)
@@ -459,25 +459,19 @@ function MockSelector({ broker }) {
 
 /** @param {{ broker: ClientMockBroker }} props */
 function DelayRouteToggler({ broker }) {
-	function onChange() {
+	function commit(checked) {
 		const { method, urlMask } = parseFilename(broker.mocks[0])
-		mockaton.setRouteIsDelayed(method, urlMask, this.checked)
+		mockaton.setRouteIsDelayed(method, urlMask, checked)
 			.then(parseError)
 			.catch(onError)
 	}
-	return (
-		r('label', {
-				className: CSS.DelayToggler,
-				title: Strings.delay
-			},
-			r('input', {
-				type: 'checkbox',
-				checked: broker.currentMock.delayed,
-				onChange
-			}),
-			TimerIcon()))
+	return ClickDragToggler({
+		checked: broker.currentMock.delayed,
+		commit
+	})
 }
 
+
 /** @param {{ broker: ClientMockBroker }} props */
 function InternalServerErrorToggler({ broker }) {
 	function onChange() {
@@ -558,22 +552,15 @@ function StaticFilesList() {
 
 /** @param {{ broker: ClientStaticBroker }} props */
 function DelayStaticRouteToggler({ broker }) {
-	function onChange() {
-		mockaton.setStaticRouteIsDelayed(broker.route, this.checked)
+	function commit(checked) {
+		mockaton.setStaticRouteIsDelayed(broker.route, checked)
 			.then(parseError)
 			.catch(onError)
 	}
-	return (
-		r('label', {
-				className: CSS.DelayToggler,
-				title: Strings.delay
-			},
-			r('input', {
-				type: 'checkbox',
-				checked: broker.delayed,
-				onChange
-			}),
-			TimerIcon()))
+	return ClickDragToggler({
+		checked: broker.delayed,
+		commit
+	})
 }
 
 /** @param {{ broker: ClientStaticBroker }} props */
@@ -614,6 +601,40 @@ function ProxyStaticToggler({}) { // TODO
 }
 
 
+function ClickDragToggler({ checked, commit }) {
+	function onPointerEnter(event) {
+		if (event.buttons === 1) 
+			onPointerDown.call(this)
+	}
+	function onPointerDown() {
+		this.checked = !this.checked
+		commit(this.checked)
+	}
+	function onClick(event) {
+		if (event.pointerType === 'mouse')
+			event.preventDefault()
+	}
+	function onChange() {
+		commit(this.checked)
+	}
+	return (
+		r('label', {
+				className: CSS.DelayToggler,
+				title: Strings.delay
+			},
+			r('input', {
+				type: 'checkbox',
+				checked,
+				onPointerEnter,
+				onPointerDown,
+				onClick,
+				onChange
+			}),
+			TimerIcon()))
+}
+
+
+
 function Resizer() {
 	return (
 		r('div', {
@@ -627,8 +648,8 @@ Resizer.panelWidth = 0
 Resizer.onPointerDown = function (event) {
 	Resizer.initialX = event.clientX
 	Resizer.panelWidth = leftSideRef.current.clientWidth
-	window.addEventListener('pointerup', Resizer.onUp)
-	window.addEventListener('pointermove', Resizer.onMove)
+	addEventListener('pointerup', Resizer.onUp)
+	addEventListener('pointermove', Resizer.onMove)
 	document.body.style.userSelect = 'none'
 	document.body.style.cursor = 'col-resize'
 }
@@ -641,8 +662,8 @@ Resizer.onMove = function (event) {
 	})
 }
 Resizer.onUp = function () {
-	window.removeEventListener('pointermove', Resizer.onMove)
-	window.removeEventListener('pointerup', Resizer.onUp)
+	removeEventListener('pointermove', Resizer.onMove)
+	removeEventListener('pointerup', Resizer.onUp)
 	cancelAnimationFrame(Resizer.raf)
 	Resizer.raf = 0
 	document.body.style.userSelect = 'auto'

package/src/Mockaton.js

@@ -15,27 +15,28 @@ import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from
 
 
 export function Mockaton(options) {
-	setup(options)
-
-	mockBrokerCollection.init()
-	staticCollection.init()
-	watchMocksDir()
-	watchStaticDir()
-
-	const server = createServer(onRequest)
-
-	server.listen(config.port, config.host, function () {
-		const { address, port } = this.address()
-		const url = `http://${address}:${port}`
-		logger.info('Listening', url)
-		logger.info('Dashboard', url + API.dashboard)
-		config.onReady(url + API.dashboard)
+	return new Promise((resolve, reject) => {
+		setup(options)
+
+		mockBrokerCollection.init()
+		staticCollection.init()
+		watchMocksDir()
+		watchStaticDir()
+
+		const server = createServer(onRequest)
+		server.on('error', reject)
+		server.listen(config.port, config.host, () => {
+			const { address, port } = server.address()
+			const url = `http://${address}:${port}`
+			const dashboardUrl = url + API.dashboard
+			logger.info('Listening', url)
+			logger.info('Dashboard', dashboardUrl)
+			config.onReady(dashboardUrl)
+			resolve(server)
+		})
 	})
-
-	return server
 }
 
-
 async function onRequest(req, response) {
 	response.on('error', logger.warn)
 

package/src/cli.js

@@ -36,7 +36,7 @@ catch (error) {
 }
 
 
-if (args.version) 
+if (args.version)
 	console.log(pkgJSON.version)
 
 else if (args.help)
@@ -83,10 +83,7 @@ else {
 	if (args['no-open']) opts.onReady = () => {}
 
 	try {
-		Mockaton(opts).on('error', error => {
-			console.error(error.message)
-			process.exit(1)
-		})
+		await Mockaton(opts)
 	}
 	catch (err) {
 		console.error(err?.message || err)

package/CHANGELOG.md

@@ -1,6 +0,0 @@
-# Changelog
-
-
-## 9.0.0 (9/13/25)
-- **Breaking change**: Commander GET APIs have been consolidated into `commander.getState()`. These were undocumented APIs, so likely you are not affected.
-- `--no-open` new cli flag. Prevents opening dashboard in a browser. (No-ops `config.onReady`)