mockaton 11.2.5 → 11.3.0

package/src/client/styles.css

@@ -76,14 +76,12 @@ body {
 	scrollbar-width: thin;
 }
 
-a,
-input,
-select,
-button {
-	&:focus-visible {
-		outline-offset: -1px;
-		outline: 2px solid var(--colorAccent);
-	}
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+button:focus-visible {
+	outline-offset: -1px;
+	outline: 2px solid var(--colorAccent);
 }
 
 a,
@@ -91,10 +89,13 @@ select,
 button,
 input[type=checkbox] {
 	cursor: pointer;
+}
 
-	&:active {
-		cursor: grabbing;
-	}
+a:active,
+select:active,
+button:active,
+input[type=checkbox]:active {
+	cursor: grabbing;
 }
 
 a {
@@ -132,10 +133,14 @@ header {
 	border-bottom: 1px solid var(--colorSecondaryActionBorder);
 	background: var(--colorHeaderBackground);
 
-	> object {
+	.Logo {
 		align-self: end;
 		margin-right: 22px;
-		margin-bottom: 5px;
+		margin-bottom: 3px;
+		
+		object {
+			pointer-events: none;
+		}
 	}
 
 	> div {
@@ -231,14 +236,14 @@ header {
 				font-size: 11px;
 				gap: 4px;
 
-				input + span {
+				input + .checkboxBody {
 					margin: 0;
 					margin-right: 4px;
 				}
-				input:enabled + span {
+				input:enabled + .checkboxBody {
 					cursor: pointer;
 				}
-				input:disabled + span {
+				input:disabled + .checkboxBody {
 					opacity: 0.8;
 				}
 			}
@@ -369,24 +374,40 @@ main {
 	}
 }
 
-table {
-	border-collapse: collapse;
-
-	th {
+.Table {
+	.TableHeading {
 		padding-bottom: 4px;
 		padding-left: 4px;
 		border-top: 24px solid transparent;
+		margin-left: 74px;
+		font-weight: bold;
 		text-align: left;
-	}
 
-	> tr:first-child > th {
-		border-top: 0;
+		&:first-of-type {
+			border-top: 0
+		}
+
+		&.canProxy {
+			margin-left: 110px;
+		}
+		&.nonGroupedByMethod {
+			margin-left: 122px;
+
+			&.canProxy {
+				margin-left: 160px;
+			}
+		}
 	}
 
-	tr.animIn {
-		opacity: 0;
-		transform: scaleY(0);
-		animation: _kfRowIn 180ms ease-in-out forwards;
+	.TableRow {
+		display: flex;
+		align-items: center;
+
+		&.animIn {
+			opacity: 0;
+			transform: scaleY(0);
+			animation: _kfRowIn 180ms ease-in-out forwards;
+		}
 	}
 }
 
@@ -398,10 +419,15 @@ table {
 }
 
 .Method {
-	padding-right: 8px;
+	overflow: hidden;
+	min-width: 38px;
+	padding: 4px 0;
+	margin-right: 8px;
 	color: var(--colorSecondaryAction);
-	text-align: center;
 	font-size: 11px;
+	text-align: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .PreviewLink {
@@ -416,6 +442,7 @@ table {
 	color: var(--colorAccent);
 	word-break: break-word;
 
+
 	&:hover {
 		background: var(--colorHover);
 	}
@@ -503,6 +530,10 @@ table {
 		stroke-width: 2.5px;
 		border-radius: 50%;
 	}
+
+	&.canProxy {
+		margin-left: 36px;
+	}
 }
 
 .ProxyToggler {
@@ -565,30 +596,30 @@ table {
 
 		&:focus-visible {
 			outline: 0;
-			& + span {
+			& + .checkboxBody {
 				outline: 2px solid var(--colorAccent)
 			}
 		}
 
-		&:disabled + span {
+		&:disabled + .checkboxBody {
 			cursor: not-allowed;
 			opacity: 0.7;
 		}
-		&:checked + span {
+		&:checked + .checkboxBody {
 			border-color: var(--colorRed);
 			color: white;
 			background: var(--colorRed);
 		}
-		&:not(:checked):enabled:hover + span {
+		&:not(:checked):enabled:hover + .checkboxBody {
 			border-color: var(--colorRed);
 			color: var(--colorRed);
 		}
-		&:enabled:active + span {
+		&:enabled:active + .checkboxBody {
 			cursor: grabbing;
 		}
 	}
 
-	> span {
+	> .checkboxBody {
 		padding: 4px;
 		border: 1px solid var(--colorSecondaryActionBorder);
 		font-size: 10px;
@@ -621,23 +652,27 @@ table {
 			white-space: pre;
 			tab-size: 2;
 			color: var(--colorSecondaryAction);
-
-			.syntaxPunc {
-				color: var(--colorSecondaryAction);
-			}
-			.syntaxKey, .syntaxTag {
-				color: var(--colorPink);
-			}
-			.syntaxVal, .syntaxAttr {
-				color: var(--colorPurple);
-			}
-			.syntaxStr, .syntaxAttrVal {
-				color: var(--colorGreen);
-			}
 		}
 	}
 }
 
+.syntaxPunc {
+	color: var(--colorSecondaryAction);
+}
+.syntaxKey,
+.syntaxTag {
+	color: var(--colorPink);
+}
+.syntaxVal,
+.syntaxAttr {
+	color: var(--colorPurple);
+}
+.syntaxStr,
+.syntaxAttrVal {
+	color: var(--colorGreen);
+}
+
+
 .ProgressBar {
 	position: relative;
 	top: -4px;

package/src/server/Api.js

@@ -4,54 +4,52 @@
  */
 
 import { join } from 'node:path'
-import { readdirSync } from 'node:fs'
+
+import {
+	longPollDevClientHotReload,
+	DASHBOARD_ASSETS,
+	CLIENT_DIR
+} from './WatcherDevClient.js'
+import { longPollClientSyncVersion } from './Watcher.js'
 
 import { IndexHtml, CSP } from '../client/indexHtml.js'
 
+import { API } from './ApiConstants.js'
 import { cookie } from './cookie.js'
 import { config, ConfigValidator } from './config.js'
 
-import { uiSyncVersion } from './Watcher.js'
-import { devClientWatcher } from './WatcherDevClient.js'
-
 import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 
-import { parseJSON } from './utils/http-request.js'
-import { sendOK, sendJSON, sendUnprocessable, sendFile, sendHTML } from './utils/http-response.js'
-import { API, LONG_POLL_SERVER_TIMEOUT, HEADER_SYNC_VERSION } from './ApiConstants.js'
-
-
-const DEV = process.env.NODE_ENV === 'development'
-const CLIENT_DIR = join(import.meta.dirname, '../client')
 
-
-export const apiGetRequests = new Map([
+export const apiGetReqs = new Map([
 	[API.dashboard, serveDashboard],
-	...readdirSync(CLIENT_DIR)
-		.map(f => [API.dashboard + '/' + f, serveStatic(f)]),
+	...DASHBOARD_ASSETS.map(f => [API.dashboard + '/' + f, serveStatic(f)]),
 
 	[API.state, getState],
 	[API.syncVersion, longPollClientSyncVersion],
+	
+	[API.watchHotReload, longPollDevClientHotReload],
+	[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([
+export const apiPatchReqs = new Map([
 	[API.cors, setCorsAllowed],
-	[API.delay, setRouteIsDelayed],
 	[API.reset, reinitialize],
-	[API.select, selectMock],
-	[API.proxied, setRouteIsProxied],
 	[API.cookies, selectCookie],
-	[API.fallback, updateProxyFallback],
-	[API.toggle500, toggle500],
-	[API.bulkSelect, bulkUpdateBrokersByCommentTag],
 	[API.globalDelay, setGlobalDelay],
+	
+	[API.fallback, setProxyFallback],
 	[API.collectProxied, setCollectProxied],
+	
+	[API.bulkSelect, bulkUpdateBrokersByCommentTag],
+
+	[API.delay, setRouteIsDelayed],
+	[API.select, selectMock],
+	[API.proxied, setRouteIsProxied],
+	[API.toggle500, toggleRoute500],
+	
 	[API.delayStatic, setStaticRouteIsDelayed],
 	[API.staticStatus, setStaticRouteStatusCode]
 ])
@@ -60,16 +58,17 @@ export const apiPatchRequests = new Map([
 /** # GET */
 
 function serveDashboard(_, response) {
-	sendHTML(response, IndexHtml(config.hotReload), CSP)
+	response.html(IndexHtml(config.hotReload), CSP)
 }
 
 function serveStatic(f) {
-	return (_, response) => sendFile(response, join(CLIENT_DIR, f))
+	return (_, response) => {
+		response.file(join(CLIENT_DIR, f))
+	}
 }
 
-
 function getState(_, response) {
-	sendJSON(response, {
+	response.json({
 		cookies: cookie.list(),
 		comments: mockBrokersCollection.extractAllComments(),
 
@@ -86,205 +85,166 @@ function getState(_, response) {
 }
 
 
-function longPollClientSyncVersion(req, response) {
-	const clientVersion = req.headers[HEADER_SYNC_VERSION]
-	if (clientVersion !== undefined && uiSyncVersion.version !== Number(clientVersion)) {
-		// e.g., tab was hidden while new mocks were added or removed
-		sendJSON(response, uiSyncVersion.version)
-		return
-	}
-	function onAddOrRemoveMock() {
-		uiSyncVersion.unsubscribe(onAddOrRemoveMock)
-		sendJSON(response, uiSyncVersion.version)
-	}
-	response.setTimeout(LONG_POLL_SERVER_TIMEOUT, onAddOrRemoveMock)
-	req.on('error', () => {
-		uiSyncVersion.unsubscribe(onAddOrRemoveMock)
-		response.destroy()
-	})
-	uiSyncVersion.subscribe(onAddOrRemoveMock)
+/** # PATCH */
+
+function reinitialize(_, response) {
+	mockBrokersCollection.init()
+	staticCollection.init()
+	response.ok()
 }
 
 
-function longPollDevHotReload(req, response) {
-	function onDevChange(file) {
-		devClientWatcher.unsubscribe(onDevChange)
-		sendJSON(response, file)
+async function setCorsAllowed(req, response) {
+	const corsAllowed = await req.json()
+
+	if (!ConfigValidator.corsAllowed(corsAllowed))
+		response.unprocessable(`Expected boolean for "corsAllowed"`)
+	else {
+		config.corsAllowed = corsAllowed
+		response.ok()
 	}
-	response.setTimeout(LONG_POLL_SERVER_TIMEOUT, () => {
-		devClientWatcher.unsubscribe(onDevChange)
-		sendJSON(response, '')
-	})
-	req.on('error', () => {
-		devClientWatcher.unsubscribe(onDevChange)
-		response.destroy()
-	})
-	devClientWatcher.subscribe(onDevChange)
 }
 
 
+async function setGlobalDelay(req, response) {
+	const delay = await req.json()
 
-/** # PATCH */
-
-function reinitialize(_, response) {
-	mockBrokersCollection.init()
-	staticCollection.init()
-	sendOK(response)
+	if (!ConfigValidator.delay(delay))
+		response.unprocessable(`Expected non-negative integer for "delay"`)
+	else {
+		config.delay = delay
+		response.ok()
+	}
 }
 
 
 async function selectCookie(req, response) {
-	const cookieKey = await parseJSON(req)
+	const cookieKey = await req.json()
 
 	const error = cookie.setCurrent(cookieKey)
 	if (error)
-		sendUnprocessable(response, error?.message || error)
+		response.unprocessable(error?.message || error)
 	else
-		sendJSON(response, cookie.list())
+		response.json(cookie.list())
+}
+
+
+async function setProxyFallback(req, response) {
+	const fallback = await req.json()
+
+	if (!ConfigValidator.proxyFallback(fallback))
+		response.unprocessable(`Invalid Proxy Fallback URL`)
+	else {
+		config.proxyFallback = fallback
+		response.ok()
+	}
+}
+
+async function setCollectProxied(req, response) {
+	const collectProxied = await req.json()
+
+	if (!ConfigValidator.collectProxied(collectProxied))
+		response.unprocessable(`Expected a boolean for "collectProxied"`)
+	else {
+		config.collectProxied = collectProxied
+		response.ok()
+	}
+}
+
+
+
+async function bulkUpdateBrokersByCommentTag(req, response) {
+	const comment = await req.json()
+
+	mockBrokersCollection.setMocksMatchingComment(comment)
+	response.ok()
 }
 
 
 async function selectMock(req, response) {
-	const file = await parseJSON(req)
+	const file = await req.json()
 
 	const broker = mockBrokersCollection.brokerByFilename(file)
 	if (!broker || !broker.hasMock(file))
-		sendUnprocessable(response, `Missing Mock: ${file}`)
+		response.unprocessable(`Missing Mock: ${file}`)
 	else {
 		broker.selectFile(file)
-		sendJSON(response, broker)
+		response.json(broker)
 	}
 }
 
 
-async function toggle500(req, response) {
-	const [method, urlMask] = await parseJSON(req)
+async function toggleRoute500(req, response) {
+	const [method, urlMask] = await req.json()
 
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessable(response, `Route does not exist: ${method} ${urlMask}`)
+		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
 	else {
 		broker.toggle500()
-		sendJSON(response, broker)
+		response.json(broker)
 	}
 }
 
 
 async function setRouteIsDelayed(req, response) {
-	const [method, urlMask, delayed] = await parseJSON(req)
+	const [method, urlMask, delayed] = await req.json()
 
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessable(response, `Route does not exist: ${method} ${urlMask}`)
+		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
 	else if (typeof delayed !== 'boolean')
-		sendUnprocessable(response, `Expected boolean for "delayed"`)
+		response.unprocessable(`Expected boolean for "delayed"`)
 	else {
 		broker.setDelayed(delayed)
-		sendJSON(response, broker)
+		response.json(broker)
 	}
 }
 
 
 async function setRouteIsProxied(req, response) {
-	const [method, urlMask, proxied] = await parseJSON(req)
+	const [method, urlMask, proxied] = await req.json()
 
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
-		sendUnprocessable(response, `Route does not exist: ${method} ${urlMask}`)
+		response.unprocessable( `Route does not exist: ${method} ${urlMask}`)
 	else if (typeof proxied !== 'boolean')
-		sendUnprocessable(response, `Expected boolean for "proxied"`)
+		response.unprocessable(`Expected boolean for "proxied"`)
 	else if (proxied && !config.proxyFallback)
-		sendUnprocessable(response, `There’s no proxy fallback`)
+		response.unprocessable(`There’s no proxy fallback`)
 	else {
 		broker.setProxied(proxied)
-		sendJSON(response, broker)
-	}
-}
-
-
-async function updateProxyFallback(req, response) {
-	const fallback = await parseJSON(req)
-
-	if (!ConfigValidator.proxyFallback(fallback))
-		sendUnprocessable(response, `Invalid Proxy Fallback URL`)
-	else {
-		config.proxyFallback = fallback
-		sendOK(response)
-	}
-}
-
-
-async function setCollectProxied(req, response) {
-	const collectProxied = await parseJSON(req)
-
-	if (!ConfigValidator.collectProxied(collectProxied))
-		sendUnprocessable(response, `Expected a boolean for "collectProxied"`)
-	else {
-		config.collectProxied = collectProxied
-		sendOK(response)
-	}
-}
-
-
-async function bulkUpdateBrokersByCommentTag(req, response) {
-	const comment = await parseJSON(req)
-
-	mockBrokersCollection.setMocksMatchingComment(comment)
-	sendOK(response)
-}
-
-
-async function setCorsAllowed(req, response) {
-	const corsAllowed = await parseJSON(req)
-
-	if (!ConfigValidator.corsAllowed(corsAllowed))
-		sendUnprocessable(response, `Expected boolean for "corsAllowed"`)
-	else {
-		config.corsAllowed = corsAllowed
-		sendOK(response)
-	}
-}
-
-
-async function setGlobalDelay(req, response) {
-	const delay = await parseJSON(req)
-
-	if (!ConfigValidator.delay(delay))
-		sendUnprocessable(response, `Expected non-negative integer for "delay"`)
-	else {
-		config.delay = delay
-		sendOK(response)
+		response.json(broker)
 	}
 }
 
 
 
 async function setStaticRouteStatusCode(req, response) {
-	const [urlMask, status] = await parseJSON(req)
+	const [route, status] = await req.json()
 
-	const broker = staticCollection.brokerByRoute(urlMask)
+	const broker = staticCollection.brokerByRoute(route)
 	if (!broker)
-		sendUnprocessable(response, `Static route does not exist: ${urlMask}`)
+		response.unprocessable(`Static route does not exist: ${route}`)
 	else if (!(status === 200 || status === 404))
-		sendUnprocessable(response, `Expected 200 or 404 status code`)
+		response.unprocessable(`Expected 200 or 404 status code`)
 	else {
 		broker.setStatus(status)
-		sendOK(response)
+		response.ok()
 	}
 }
 
 
 async function setStaticRouteIsDelayed(req, response) {
-	const [urlMask, delayed] = await parseJSON(req)
+	const [route, delayed] = await req.json()
 
-	const broker = staticCollection.brokerByRoute(urlMask)
+	const broker = staticCollection.brokerByRoute(route)
 	if (!broker)
-		sendUnprocessable(response, `Static route does not exist: ${urlMask}`)
+		response.unprocessable(`Static route does not exist: ${route}`)
 	else if (typeof delayed !== 'boolean')
-		sendUnprocessable(response, `Expected boolean for "delayed"`)
+		response.unprocessable(`Expected boolean for "delayed"`)
 	else {
 		broker.setDelayed(delayed)
-		sendOK(response)
+		response.ok()
 	}
 }
-

package/src/server/Filename.js

@@ -1,15 +1,17 @@
-// @KeepSync src/client/Filename.js
+/** @KeepSync src/client/Filename.js */
 
 import { METHODS } from 'node:http'
 
 
 const reComments = /\(.*?\)/g // Anything within parentheses
 
-export const extractComments = file =>
-	Array.from(file.matchAll(reComments), ([c]) => c)
+export function extractComments(file) {
+	return Array.from(file.matchAll(reComments), ([c]) => c)
+}
 
-export const includesComment = (file, search) =>
-	extractComments(file).some(c => c.includes(search))
+export function includesComment(file, search) {
+	return extractComments(file).some(c => c.includes(search))
+}
 
 
 export function validateFilename(file) {
@@ -23,7 +25,7 @@ export function validateFilename(file) {
 
 	if (!METHODS.includes(method))
 		return `Unrecognized HTTP Method: "${method}"`
-} 
+}
 
 
 export function parseFilename(file) {

package/src/server/MockBroker.js

@@ -1,5 +1,5 @@
-import { includesComment, extractComments, parseFilename } from './Filename.js'
 import { DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
+import { includesComment, extractComments, parseFilename } from './Filename.js'
 
 
 /**

package/src/server/MockDispatcher.js

@@ -3,12 +3,12 @@ import { readFileSync } from 'node:fs'
 import { pathToFileURL } from 'node:url'
 
 import { logger } from './utils/logger.js'
+import { mimeFor } from './utils/mime.js'
+
 import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
-import { mimeFor } from './utils/mime.js'
 import { brokerByRoute } from './mockBrokersCollection.js'
 import { config, calcDelay } from './config.js'
-import { sendInternalServerError, sendMockNotFound } from './utils/http-response.js'
 
 
 export async function dispatchMock(req, response) {
@@ -24,7 +24,7 @@ export async function dispatchMock(req, response) {
 			return
 		}
 		if (!broker) {
-			sendMockNotFound(response)
+			response.mockNotFound()
 			return
 		}
 
@@ -51,9 +51,9 @@ export async function dispatchMock(req, response) {
 	}
 	catch (error) { // TESTME
 		if (error?.code === 'ENOENT') // mock-file has been deleted
-			sendMockNotFound(response)
+			response.mockNotFound()
 		else
-			sendInternalServerError(response, error)
+			response.internalServerError(error)
 	}
 }