mockaton 10.0.0 → 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
 ```
 
@@ -516,7 +516,7 @@ const server = await Mockaton(
 ## 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": "10.0.0",
+	"version": "10.1.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

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/CHANGELOG.md

@@ -1,115 +0,0 @@
-# Changelog
-
-- 10.0.0 **Breaking Change**: Mockaton constructor is now async. So if you
-use the programmatic launch, instead of the cli, change:
-```js
-Mockaton()
-// to
-await Mockaton()
-```
-
----
-
-- 9.6.0 dashboard: persist `groupByMethod` preference in localStorage
-- 9.5.0 cli: new log level `verbose`
-- 9.4.0 dashboard: user can resize panels
-- 9.3.0 handle head requests for get mocks
-- 9.2.0 dashboard: syntax highlight more xml files (such as html)
-- 9.1.0 cli: new flag: --no-open
-- 9.0.0 **Breaking Change**: Commander’s GET APIs have been consolidated into `commander.getState()`. 
-  These were undocumented APIs, so you are likely not affected.
-
----
-
-- 8.27.0 dashboard: group by method checkbox
-- 8.26.0 ui simplify mock-selector label text
-- 8.25.0 --quiet and logLevel options
-- 8.24.0 show iso date in logs and log static file dispatch
-- 8.23.0 cli
-- 8.22.0 xml syntax highlight
-- 8.21.0 responsive mock list
-- 8.20.0 revert progress bar (no clock spinner)
-- 8.19.0 move puppeteer and pixaton to devDeps
-- 8.18.0 cors. allow by default 'authorization' header
-- 8.17.0 conditionally render proxy toggler
-- 8.16.0 watch static mocks dir
-- 8.15.0 add config.delayJitter
-- 8.14.0 static files controls
-- 8.13.0 highlight dir structure
-- 8.12.0 Adds config.formatCollectedJSON
-- 8.11.0 Allow all the HTTP methods Node.js supports
-- 8.10.0 global delay field
-- 8.9.0 long poll Add or Remove mocks
-- 8.8.0 allow proxying individual routes
-- 8.7.0 dashboard now highlights and previews 500 mocks when checking the 500 toggler
-- 8.6.0 feat: save proxied checkbox
-- 8.5.0 Add demo-app-vite
-- 8.4.0 auto register/unregister mocks
-- 8.3.0 feat `config.collectProxied`
-- 8.2.0 Allow changing proxy fallback server from UI
-- 8.1.0 describe http status code in payload viewer title
-- 8.0.0 **Breaking change**: `config.plugins` are no longer an Object. Now they are an Array and they the
-test is now a regex. So if you use custom plugins, change e.g.:
-```js
-plugins = {
-  '.js': jsToJsonPlugin,
-  '.ts': jsToJsonPlugin
-}
-// to
-plugins = [
-  [/\.(js|ts)$/, jsToJsonPlugin], // Default 
-]
-```
-
----
-
-- 7.8.0 support userland plugins
-- 7.7.0 TypeScript mocks support
-- 7.6.0 render list of static files
-- 7.5.0 allowing previewing mock images
-- 7.4.0 progress bar for payload viewer
-- 7.3.0 Allow CORS Checkbox
-- 7.2.0 add content-type as default header when allowing cors
-- 7.1.0 CORS support
-- 7.0.0 **Breaking change**: Split `PATCH mockaton/edit` into `selectMock` and `setRouteIsDelayed`.
-So instead of:
-```js
-fetch(addr + '/mockaton/edit', {
-  method: 'PATCH',
-  body: JSON.stringify({
-    file: 'api/foo.200.GET.json',
-    delayed: true // optional
-  })
-})
-
-// change it to
-await commander.select('api/foo.200.GET.json')
-await commander.setMockIsDelayed('api/foo.200.GET.json', true)
-```
-
----
-
-- 6.4.0 Default mock could be selected with the comment `(default)`
-- 6.3.0 422 when trying to change a mock that doesn't exist on a route that has mocks
-- 6.4.0 no partial comment search
-- 6.3.0 Allow extending the mime list
-- 6.2.0 Add `config.ignore` regex
-- 6.1.0 remove `config.allowedExt`
-- 6.0.0 **Breaking change**: Remove feature for using .md files for documentating APIs
-
----
-
-- 5.0.0 **Breaking change**: .md files no longer use status code in the extension
-- 4.0.0 **Breaking change**: rename `config.open` to `config.onReady`
-- 3.0.0 **Breaking change**: `config.skipOpen` boolean to `config.open` function
-
----  
-
-- 2.3.0 style dashboard
-- 2.2.0 Allow injecting `extraHeaders`
-- 2.1.0 make auto-generate 500's configurable
-- 2.0.0 **Breaking change**: Transforms no longer get a mock
-
---- 
-
-- 1.1.0 Allow writing JSON mocks in JS