mockaton 0.0.1

package/Api.js

@@ -0,0 +1,108 @@
+/**
+ * API for controlling the mock server. For example,
+ * setting a specific mock-file for a particular route.
+ */
+
+import { join } from 'node:path'
+import { cookie } from './cookie.js'
+import { Config } from './Config.js'
+import { DF, DP } from './ApiConstants.js'
+import { parseJSON } from './utils/http-request.js'
+import * as mockBrokersCollection from './mockBrokersCollection.js'
+import { sendOK, sendBadRequest, sendJSON, sendFile } from './utils/http-response.js'
+
+
+export const apiGetRequests = new Map([
+	[DP.dashboard, serveDashboard],
+	['/Route.js', serveDashboardAsset],
+	['/Dashboard.js', serveDashboardAsset],
+	['/Dashboard.css', serveDashboardAsset],
+	['/ApiConstants.js', serveDashboardAsset],
+	[DP.mocks, listMockBrokers],
+	[DP.cookies, listCookies],
+	[DP.comments, listComments]
+])
+
+export const apiPatchRequests = new Map([
+	[DP.bulkSelect, bulkUpdateBrokersByCommentTag],
+	[DP.edit, updateBroker],
+	[DP.reset, reinitialize],
+	[DP.cookies, selectCookie],
+	[DP.transform, updateBrokerTransform]
+])
+
+function serveDashboard(_, response) {
+	sendFile(response, join(import.meta.dirname, 'Dashboard.html'))
+}
+function serveDashboardAsset(req, response) {
+	sendFile(response, join(import.meta.dirname, req.url))
+}
+function listCookies(_, response) {
+	sendJSON(response, cookie.list())
+}
+function listComments(_, response) {
+	sendJSON(response, mockBrokersCollection.extractAllComments())
+}
+function listMockBrokers(_, response) {
+	sendJSON(response, mockBrokersCollection.getAll())
+}
+
+
+async function selectCookie(req, response) {
+	try {
+		const body = await parseJSON(req)
+		cookie.setCurrent(body[DF.currentCookieKey])
+		sendOK(response)
+	}
+	catch (error) {
+		console.error(error)
+		sendBadRequest(response)
+	}
+}
+
+function reinitialize(_, response) {
+	Config.database = {}
+	mockBrokersCollection.init()
+	sendOK(response)
+}
+
+async function updateBroker(req, response) {
+	try {
+		const body = await parseJSON(req)
+		const broker = mockBrokersCollection.getBrokerByFilename(body[DF.file])
+		if (DF.delayed in body)
+			broker.updateDelay(body[DF.delayed])
+		else
+			broker.updateFile(body[DF.file])
+		sendOK(response)
+	}
+	catch (error) {
+		console.error(error)
+		sendBadRequest(response)
+	}
+}
+
+async function bulkUpdateBrokersByCommentTag(req, response) {
+	try {
+		const body = await parseJSON(req)
+		mockBrokersCollection.setMocksMatchingComment(body[DF.comment])
+		sendOK(response)
+	}
+	catch (error) {
+		console.error(error)
+		sendBadRequest(response)
+	}
+}
+
+async function updateBrokerTransform(req, response) {
+	try {
+		const body = await parseJSON(req)
+		const broker = mockBrokersCollection.getBroker(body[DF.method], body[DF.urlMask])
+		broker.updateTransform(body[DF.file])
+		sendOK(response)
+	}
+	catch (error) {
+		console.error(error)
+		sendBadRequest(response)
+	}
+}

package/ApiConstants.js

@@ -0,0 +1,22 @@
+const MOUNT = '/mockaton'
+export const DP = { // Dashboard Paths
+	dashboard: MOUNT,
+	bulkSelect: MOUNT + '/bulk-select',
+	comments: MOUNT + '/comments',
+	edit: MOUNT + '/edit',
+	mocks: MOUNT + '/mocks',
+	reset: MOUNT + '/reset',
+	transform: MOUNT + '/transform',
+	cookies: MOUNT + '/cookies'
+}
+
+export const DF = { // Dashboard Fields (XHR)
+	comment: 'comment',
+	delayed: 'delayed',
+	file: 'file',
+	isAdmin: 'is_admin',
+	currentCookieKey: 'current_cookie_key',
+	isForDashboard: 'mock_request_payload',
+	method: 'method',
+	urlMask: 'url_mask'
+}

package/Config.js

@@ -0,0 +1,41 @@
+import { existsSync, lstatSync } from 'node:fs'
+import { validate } from './utils/validate.js'
+
+
+export const Config = {
+	mocksDir: '',
+	staticDir: '',
+	host: '127.0.0.1',
+	port: 0, // auto-assigned
+	delay: 1200, // milliseconds
+	cookies: {}, // defaults to the first kv
+	database: {},
+	skipOpen: false, // Prevents opening the dashboard in a browser
+	allowedExt: /\.(json|txt|md|mjs)$/ // Just for excluding temporary editor files (e.g. JetBrains appends a ~)
+}
+
+export function setup(options) {
+	Object.assign(Config, options)
+	validate(Config, {
+		mocksDir: isDirectory,
+		staticDir: optional(isDirectory),
+		host: String,
+		port: port => Number.isInteger(port) && port >= 0 && port < 2 ** 16,
+		delay: ms => Number.isInteger(ms) && ms > 0,
+		cookies: Object,
+		database: Object,
+		skipOpen: Boolean,
+		allowedExt: RegExp
+	})
+}
+
+
+function optional(tester) {
+	return val => !val || tester(val)
+}
+
+function isDirectory(dir) {
+	return existsSync(dir) && lstatSync(dir).isDirectory()
+}
+
+

package/Dashboard.css

@@ -0,0 +1,206 @@
+:root {
+	--colorAccent: #0069d0;
+	--colorHover: #dfefff;
+	--colorRed: #da0f00;
+	--colorLightRed: #ffe4ee;
+	--colorLightOrange: #ffedd1;
+	--colorLightGrey: rgba(0, 0, 0, 0.02);
+}
+html, body {
+	margin: 0;
+	font-size: 13px;
+}
+body {
+	padding: 16px;
+}
+* {
+	border: 0;
+	margin: 0;
+	font-family: system-ui, sans-serif;
+	font-size: 100%;
+}
+
+h1 {
+	padding: 12px 0;
+	margin: 0;
+	font-size: 2rem;
+}
+
+
+select {
+	padding: 3px 0;
+	border: 1px solid #444;
+}
+
+fieldset {
+	width: 120px;
+	border: 1px solid #ccc;
+
+	label {
+		display: flex;
+		align-items: center;
+		padding: 4px 0;
+
+		input {
+			margin-right: 6px;
+		}
+	}
+}
+
+.CookieSelector {
+	display: flex;
+	align-items: center;
+	margin-left: 20px;
+
+	select {
+		margin-left: 5px;
+	}
+}
+
+main {
+	display: flex;
+	align-items: flex-start;
+
+	> table {
+		border-collapse: collapse;
+
+		th {
+			padding-top: 20px;
+			padding-bottom: 2px;
+			text-align: left;
+		}
+	}
+}
+
+.TitleWrap {
+	display: flex;
+	align-items: center;
+
+	button {
+		padding: 3px 12px;
+		border: 1px solid var(--colorRed);
+		margin-left: 20px;
+		background: transparent;
+		color: var(--colorRed);
+		border-radius: 50px;
+		cursor: pointer;
+
+		&:hover {
+			background: var(--colorRed);
+			color: white;
+		}
+	}
+}
+
+.PayloadViewer {
+	position: sticky;
+	top: 0;
+	width: 50%;
+	margin-left: 16px;
+
+	pre {
+		&:not(:empty) {
+			overflow: auto;
+			max-height: calc(100vh - 160px);
+			padding: 12px;
+			margin-top: 6px;
+			background: var(--colorLightGrey);
+			font-family: monospace;
+		}
+
+		&.Documentation {
+			margin-bottom: 12px;
+		}
+	}
+}
+
+.PreviewLink {
+	position: relative;
+	left: -6px;
+	display: inline-block;
+	width: 280px;
+	padding: 8px 6px;
+	color: var(--colorAccent);
+	text-decoration: none;
+
+	&:hover {
+		background: var(--colorHover);
+	}
+	&.chosen {
+		color: white;
+		background: var(--colorAccent);
+	}
+}
+
+.BulkSelectSection {
+	margin: 20px 0;
+}
+.TransformsSection {
+	padding-top: 30px;
+	border-top: 1px solid #ccc;
+	margin: 30px 0;
+}
+
+.BulkSelectSection select {
+	margin-top: 5px;
+}
+
+.TransformSelector,
+.MockSelector {
+	width: 300px;
+	padding: 8px 1px;
+	border: 0;
+	background: #eee;
+	text-align: right;
+	direction: rtl;
+	text-overflow: ellipsis;
+
+	&:disabled {
+		background: transparent;
+		color: #222;
+		cursor: not-allowed
+	}
+	&:enabled:hover {
+		cursor: pointer;
+		background: var(--colorHover);
+	}
+	&.status4xx {
+		background: var(--colorLightOrange);
+	}
+	&.status5xx {
+		background: var(--colorLightRed);
+	}
+}
+
+.DelayCheckbox {
+	display: flex;
+	margin-left: 6px;
+	cursor: pointer;
+
+	> input {
+		display: none;
+
+		&:checked ~ svg {
+			border-color: white;
+			filter: invert();
+		}
+	}
+
+	> svg {
+		width: 14px;
+		height: 14px;
+		border: 1px solid #000;
+		vertical-align: bottom;
+		fill: #000;
+		border-radius: 50%;
+		background: white;
+
+		&:hover {
+			background: #ddd
+		}
+	}
+}
+
+.bold {
+	font-weight: bold;
+}

package/Dashboard.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <link rel="stylesheet" href="../Dashboard.css">
+  <link rel="icon" href="data:">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mock Server</title>
+</head>
+<body>
+<script src="../Dashboard.js" type="module"></script>
+</body>
+</html>