mockaton 8.12.5 → 8.12.7

package/README.md

@@ -7,8 +7,9 @@ An HTTP mock server for simulating APIs with minimal setup
 — ideal for triggering difficult to reproduce backend states.
 
 
-## Convention Over Code
-Mockaton scans a given directory for filenames following a convention similar to the URLs.
+## Overview
+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 <code>/<b>api/user</b>/1234</code> the filename would be:
 <pre>
@@ -158,16 +159,6 @@ putting its built assets in `config.staticDir`. And simulate the flow by Bulk Se
 
 <br/>
 
-## Alternatives
-- Chrome DevTools allows for [overriding responses](https://developer.chrome.com/docs/devtools/overrides)
-- Reverse Proxies such as [Burp](https://portswigger.net/burp) are also handy for overriding responses.
-- [MSW (Mock Server Worker)](https://mswjs.io)
-- [Nock](https://github.com/nock/nock)
-- [Fetch Mock](https://github.com/wheresrhys/fetch-mock)
-- [Mentoss](https://github.com/humanwhocodes/mentoss)
-
-
-<br/>
 
 ## You can write JSON mocks in JavaScript or TypeScript
 For example, `api/foo.GET.200.js`
@@ -606,3 +597,25 @@ default, but the `proxyFallback`, `colledProxied`, and `corsAllowed` are not aff
 ```js
 await mockaton.reset()
 ```
+
+
+<br/>
+
+## Alternatives worth learning as well
+
+### 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
+example, if you are polling, and you want to test the state change.
+
+- Chrome DevTools allows for [overriding responses](https://developer.chrome.com/docs/devtools/overrides)
+- Reverse Proxies such as [Burp](https://portswigger.net/burp) are also handy for overriding responses
+
+### Client side
+In contrast to Mockaton, which is an HTTP Server, these programs
+mock the client (e.g., `fetch`) in Node.js and browsers.
+
+- [MSW (Mock Server Worker)](https://mswjs.io)
+- [Nock](https://github.com/nock/nock)
+- [Fetch Mock](https://github.com/wheresrhys/fetch-mock)
+- [Mentoss](https://github.com/humanwhocodes/mentoss) Has a server side too

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.12.5",
+	"version": "8.12.7",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -5,7 +5,7 @@
 
 import { join } from 'node:path'
 import { cookie } from './cookie.js'
-import { arEvents } from './Watcher.js'
+import { uiSyncVersion } from './Watcher.js'
 import { parseJSON } from './utils/http-request.js'
 import { listFilesRecursively } from './utils/fs.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
@@ -31,9 +31,9 @@ export const apiGetRequests = new Map([
 	[API.mocks, listMockBrokers],
 	[API.cookies, listCookies],
 	[API.fallback, getProxyFallback],
-	[API.arEvents, longPollAR_Events],
 	[API.comments, listComments],
 	[API.globalDelay, getGlobalDelay],
+	[API.syncVersion, longPollClientSyncVersion],
 	[API.collectProxied, getCollectProxied]
 ])
 
@@ -51,7 +51,7 @@ export const apiPatchRequests = new Map([
 ])
 
 
-/* === GET === */
+/** # GET */
 
 function serveDashboard(_, response) {
 	sendFile(response, join(import.meta.dirname, 'Dashboard.html'))
@@ -76,28 +76,31 @@ function listStaticFiles(req, response) {
 		: [])
 }
 
-function longPollAR_Events(req, response) {
-	// needs sync e.g. when tab was hidden while new mocks were added or removed
-	const clientIsOutOfSync = parseInt(req.headers[DF.lastReceived_nAR], 10) !== arEvents.count
-	if (clientIsOutOfSync) {
-		sendJSON(response, arEvents.count)
+function longPollClientSyncVersion(req, response) {
+	if (uiSyncVersion.version !== Number(req.headers[DF.syncVersion])) {
+		// e.g., tab was hidden while new mocks were added or removed
+		sendJSON(response, uiSyncVersion.version)
 		return
 	}
+
 	function onAddOrRemoveMock() {
-		arEvents.unsubscribe(onAddOrRemoveMock)
-		sendJSON(response, arEvents.count)
+		uiSyncVersion.unsubscribe(onAddOrRemoveMock)
+		sendJSON(response, uiSyncVersion.version)
 	}
+
 	response.setTimeout(LONG_POLL_SERVER_TIMEOUT, onAddOrRemoveMock)
+
 	req.on('error', () => {
-		arEvents.unsubscribe(onAddOrRemoveMock)
+		uiSyncVersion.unsubscribe(onAddOrRemoveMock)
 		response.destroy()
 	})
-	arEvents.subscribe(onAddOrRemoveMock)
+
+	uiSyncVersion.subscribe(onAddOrRemoveMock)
 }
 
 
 
-/* === PATCH === */
+/** # PATCH */
 
 function reinitialize(_, response) {
 	mockBrokersCollection.init()

package/src/ApiConstants.js

@@ -14,7 +14,7 @@ export const API = {
 	proxied: MOUNT + '/proxied',
 	cors: MOUNT + '/cors',
 	static: MOUNT + '/static',
-	arEvents: MOUNT + '/ar_events'
+	syncVersion: MOUNT + '/sync_version'
 }
 
 export const DF = { // Dashboard Fields (XHR)
@@ -22,7 +22,7 @@ export const DF = { // Dashboard Fields (XHR)
 	routeUrlMask: 'route_url_mask',
 	delayed: 'delayed',
 	proxied: 'proxied',
-	lastReceived_nAR: 'last_received_n_ar'
+	syncVersion: 'last_received_sync_version'
 }
 
 export const DEFAULT_500_COMMENT = '(Mockaton 500)'

package/src/Commander.js

@@ -92,11 +92,11 @@ export class Commander {
 		return this.#patch(API.reset)
 	}
 
-	getAR_EventsCount(nAR_EventReceived) {
-		return fetch(API.arEvents, {
-			signal: AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000),
+	getSyncVersion(currentSyncVersion, abortSignal) {
+		return fetch(API.syncVersion, {
+			signal: AbortSignal.any([abortSignal, AbortSignal.timeout(LONG_POLL_SERVER_TIMEOUT + 1000)]),
 			headers: {
-				[DF.lastReceived_nAR]: nAR_EventReceived
+				[DF.syncVersion]: currentSyncVersion
 			}
 		})
 	}

package/src/Dashboard.js

@@ -68,11 +68,7 @@ let globalDelay = 1200
 
 
 init()
-pollAR_Events() // Add or Remove Mocks from File System
-document.addEventListener('visibilitychange', () => {
-	if (!document.hidden)
-		pollAR_Events()
-})
+initLongPoll()
 
 function init() {
 	return Promise.all([
@@ -97,7 +93,8 @@ function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbac
 			r(StaticFilesList, { staticFiles })))
 }
 
-// Header ===============
+
+/** # Header */
 
 function Header({ cookies, comments, delay, fallbackAddress, collectProxied }) {
 	return (
@@ -240,8 +237,7 @@ function ResetButton() {
 }
 
 
-
-// MockList ===============
+/** # MockList */
 
 function MockList({ brokersByMethod, canProxy }) {
 	const hasMocks = Object.keys(brokersByMethod).length
@@ -256,7 +252,6 @@ function MockList({ brokersByMethod, canProxy }) {
 			r(PayloadViewer)))
 }
 
-
 function SectionByMethod({ method, brokers, canProxy }) {
 	return (
 		r('tbody', null,
@@ -273,7 +268,6 @@ function SectionByMethod({ method, brokers, canProxy }) {
 						r('td', null, r(ProxyToggler, { broker, disabled: !canProxy }))))))
 }
 
-
 function PreviewLink({ method, urlMask }) {
 	async function onClick(event) {
 		event.preventDefault()
@@ -294,7 +288,6 @@ function PreviewLink({ method, urlMask }) {
 		}, urlMask))
 }
 
-
 function MockSelector({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(this.value)
@@ -349,7 +342,6 @@ function DelayRouteToggler({ broker }) {
 			TimerIcon()))
 }
 
-
 function InternalServerErrorToggler({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
@@ -375,7 +367,6 @@ function InternalServerErrorToggler({ broker }) {
 			r('span', null, '500')))
 }
 
-
 function ProxyToggler({ broker, disabled }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
@@ -399,8 +390,7 @@ function ProxyToggler({ broker, disabled }) {
 }
 
 
-
-// Payload Preview ===============
+/** # Payload Preview */
 
 const payloadViewerTitleRef = useRef()
 const payloadViewerRef = useRef()
@@ -497,8 +487,7 @@ function mockSelectorFor(method, urlMask) {
 }
 
 
-
-// StaticFilesList ===============
+/** # StaticFilesList */
 
 function StaticFilesList({ staticFiles }) {
 	if (!staticFiles.length)
@@ -515,7 +504,7 @@ function StaticFilesList({ staticFiles }) {
 }
 
 
-// Misc ===============
+/** # Misc */
 
 function onError(error) {
 	if (error?.message === 'Failed to fetch')
@@ -537,43 +526,54 @@ function CloudIcon() {
 }
 
 
-// AR Events (Add or Remove mock) ============
+/**
+ * # Poll UI Sync Version
+ * The version increments when a mock file is added or removed
+ */
+
+function initLongPoll() {
+	poll.oldSyncVersion = 0
+	poll.controller = new AbortController()
+	poll()
+	document.addEventListener('visibilitychange', () => {
+		if (document.hidden) {
+			poll.controller.abort('_hidden_tab_')
+			poll.controller = new AbortController()
+		}
+		else
+			poll()
+	})
+}
 
-pollAR_Events.isPolling = false
-pollAR_Events.oldAR_EventsCount = 0
-async function pollAR_Events() {
-	if (pollAR_Events.isPolling || document.hidden)
-		return
+async function poll() {
 	try {
-		pollAR_Events.isPolling = true
-		const response = await mockaton.getAR_EventsCount(pollAR_Events.oldAR_EventsCount)
+		const response = await mockaton.getSyncVersion(poll.oldSyncVersion, poll.controller.signal)
 		if (response.ok) {
-			const nAR_Events = await response.json()
-			if (pollAR_Events.oldAR_EventsCount !== nAR_Events) { // because it could be < or >
-				pollAR_Events.oldAR_EventsCount = nAR_Events
+			const syncVersion = await response.json()
+			if (poll.oldSyncVersion !== syncVersion) { // because it could be < or >
+				poll.oldSyncVersion = syncVersion
 				await init()
 			}
-			pollAR_Events.isPolling = false
-			pollAR_Events()
+			poll()
 		}
 		else
 			throw response.status
 	}
-	catch (_) {
-		pollAR_Events.isPolling = false
-		setTimeout(pollAR_Events, 5000)
+	catch (error) {
+		if (error !== '_hidden_tab_')
+			setTimeout(poll, 3000)
 	}
 }
 
 
-// Utils ============
+/** # Utils */
 
 function cssClass(...args) {
 	return args.filter(Boolean).join(' ')
 }
 
 
-// These are simplified React-compatible implementations
+/** ## React-compatible simplified implementations */
 
 function createElement(elem, props = null, ...children) {
 	if (typeof elem === 'function')

package/src/MockBroker.js

@@ -2,8 +2,8 @@ import { includesComment, extractComments, parseFilename } from './Filename.js'
 import { DEFAULT_500_COMMENT, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
 
 
-// MockBroker is a state for a particular route. It knows the available mock files
-// that can be served for the route, the currently selected file, and if it’s delayed.
+/** MockBroker is a state for a particular route. It knows the available mock files
+ * that can be served for the route, the currently selected file, and if it’s delayed. */
 export class MockBroker {
 	constructor(file) {
 		this.urlMaskMatches = new UrlMatcher(file).urlMaskMatches

package/src/Watcher.js

@@ -7,16 +7,16 @@ import { isFile } from './utils/fs.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 
 
-// AR = Add or Remove Mock
-export const arEvents = new class extends EventEmitter {
-	count = 0
+/** # AR = Add or Remove Mock Event */
+export const uiSyncVersion = new class extends EventEmitter {
+	version = 0
 
-	emit() {
-		this.count++
+	increment() {
+		this.version++
 		super.emit('AR')
 	}
 	subscribe(listener) {
-		this.on('AR', listener)
+		this.once('AR', listener)
 	}
 	unsubscribe(listener) {
 		this.removeListener('AR', listener)
@@ -30,11 +30,11 @@ export function watchMocksDir() {
 			return
 		if (isFile(join(dir, file))) {
 			if (mockBrokerCollection.registerMock(file, 'isFromWatcher'))
-				arEvents.emit()
+				uiSyncVersion.increment()
 		}
 		else {
 			mockBrokerCollection.unregisterMock(file)
-			arEvents.emit()
+			uiSyncVersion.increment()
 		}
 	})
 }