mockaton 0.0.1

package/Dashboard.js

@@ -0,0 +1,355 @@
+import { Route } from '../Route.js'
+import { DP, DF } from '../ApiConstants.js'
+
+
+const Strings = {
+	bulk_select_by_comment: 'Bulk Select by Comment',
+	click_link_to_preview: 'Click a link to preview it',
+	cookie: 'Cookie',
+	delay: 'Delay',
+	empty_response_body: '/* Empty Response Body */',
+	fetching: '⌚ Fetching…',
+	mock: 'Mock',
+	none: 'None',
+	reset: 'Reset',
+	select_one: 'Select One',
+	title: 'Mockaton',
+	transforms: 'Transforms'
+}
+
+const CSS = {
+	BulkSelectSection: 'BulkSelectSection',
+	CookieSelector: 'CookieSelector',
+	DelayCheckbox: 'DelayCheckbox',
+	Documentation: 'Documentation',
+	MockSelector: 'MockSelector',
+	PayloadViewer: 'PayloadViewer',
+	PreviewLink: 'PreviewLink',
+	TitleWrap: 'TitleWrap',
+	TransformSelector: 'TransformSelector',
+	TransformsSection: 'TransformsSection',
+
+	bold: 'bold',
+	chosen: 'chosen',
+	status4xx: 'status4xx',
+	status5xx: 'status5xx'
+}
+
+const r = createElement
+const refDocumentation = useRef()
+const refPayloadViewer = useRef()
+const refPayloadFile = useRef()
+
+function init() {
+	Promise.all([
+		DP.mocks,
+		DP.cookies,
+		DP.comments
+	].map(api => fetch(api).then(res => res.ok && res.json())))
+		.then(App)
+		.catch(console.error)
+}
+init()
+
+function App([brokersByMethod, cookies, comments]) {
+	empty(document.body)
+	createRoot(document.body).render(
+		DevPanel(brokersByMethod, cookies, comments))
+}
+
+function DevPanel(brokersByMethod, cookies, comments) {
+	document.title = Strings.title
+	return (
+		r('div', null,
+			r('div', { className: CSS.TitleWrap },
+				r('h1', null, Strings.title),
+				r(ResetButton),
+				r(CookieSelector, { list: cookies })),
+			r('div', { className: CSS.BulkSelectSection },
+				r('h2', null, Strings.bulk_select_by_comment),
+				r(BulkSelector, { comments })),
+			r('main', null,
+				r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
+					r(SectionByMethod, { method, brokers }))),
+				r('div', { className: CSS.PayloadViewer },
+					r('pre', { ref: refDocumentation, className: CSS.Documentation }),
+					r('h2', { ref: refPayloadFile }, Strings.mock),
+					r('pre', { ref: refPayloadViewer }, Strings.click_link_to_preview))),
+			r('div', { className: CSS.TransformsSection },
+				r('h2', null, Strings.transforms),
+				r(Transforms, { brokersByMethod }))))
+}
+
+
+function ResetButton() {
+	return (
+		r('button', {
+			onClick() {
+				fetch(DP.reset, { method: 'PATCH' })
+					.then(init)
+					.catch(console.error)
+			}
+		}, Strings.reset)
+	)
+}
+
+function CookieSelector({ list }) {
+	return (
+		r('label', { className: CSS.CookieSelector },
+			Strings.cookie,
+			r('select', {
+				autocomplete: 'off',
+				disabled: list.length <= 1,
+				onChange() {
+					fetch(DP.cookies, {
+						method: 'PATCH',
+						body: JSON.stringify({ [DF.currentCookieKey]: this.value })
+					})
+						.then(init)
+						.catch(console.error)
+				}
+			}, list.map(([key, selected]) =>
+				r('option', {
+					value: key,
+					selected
+				}, key)))))
+}
+
+
+function BulkSelector({ comments }) {
+	return (
+		r('select', {
+			autocomplete: 'off',
+			disabled: comments.length <= 1,
+			onChange() {
+				fetch(DP.bulkSelect, {
+					method: 'PATCH',
+					body: JSON.stringify({ [DF.comment]: this.value })
+				})
+					.then(init)
+					.catch(console.error)
+			}
+		}, [Strings.select_one].concat(comments).map(item =>
+			r('option', {
+				value: item
+			}, item))))
+}
+
+
+function SectionByMethod({ method, brokers }) {
+	return (
+		r('tbody', null,
+			r('th', null, method),
+			Object.entries(brokers)
+				.sort((a, b) => a[0].localeCompare(b[0]))
+				.filter(([, broker]) => broker.mocks.length) // handles Markdown doc or js transform without mocks
+				.map(([urlMask, broker]) =>
+					r('tr', null,
+						r('td', null, r(PreviewLink, { method, urlMask, documentation: broker.documentation })),
+						r('td', null, r(MockSelector, { items: broker.mocks, selected: broker.currentMock.file })),
+						r('td', null, r(DelayToggler, { name: broker.currentMock.file, checked: Boolean(broker.currentMock.delay) }))))))
+}
+
+function PreviewLink({ method, urlMask, documentation }) {
+	return (
+		r('a', {
+			className: CSS.PreviewLink,
+			href: urlMask,
+			'data-method': method,
+			async onClick(event) {
+				event.preventDefault()
+				try {
+					if (documentation) {
+						const r = await fetch(documentation)
+						refDocumentation.current.innerText = await r.text()
+					}
+					else
+						refDocumentation.current.innerText = ''
+
+					const spinner = setTimeout(() => refPayloadViewer.current.innerText = Strings.fetching, 180)
+					const res = await fetch(this.href, {
+						method: this.getAttribute('data-method'),
+						headers: { [DF.isForDashboard]: '1' }
+					})
+					document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
+					this.classList.add(CSS.chosen)
+					clearTimeout(spinner)
+					refPayloadViewer.current.innerText = await res.text() || Strings.empty_response_body
+					refPayloadFile.current.innerText = this.closest('tr').querySelector('select').value
+				}
+				catch (error) {
+					console.error(error)
+				}
+			}
+		}, urlMask))
+}
+
+function MockSelector({ items, selected }) {
+	const className = (defaultIsSelected, status) => cssClass(
+		CSS.MockSelector,
+		!defaultIsSelected && CSS.bold,
+		status >= 400 && status < 500 && CSS.status4xx,
+		status >= 500 && CSS.status5xx)
+	return (
+		r('select', {
+			className: className(selected === items[0], Route.parseFilename(selected).status),
+			autocomplete: 'off',
+			disabled: items.length <= 1,
+			onChange() {
+				const status = Route.parseFilename(this.value).status
+				this.style.fontWeight = this.value === this.options[0].value // default is selected
+					? 'normal'
+					: 'bold'
+				fetch(DP.edit, {
+					method: 'PATCH',
+					body: JSON.stringify({ [DF.file]: this.value })
+				}).then(() => {
+					this.closest('tr').querySelector('a').click()
+					this.className = className(this.value === this.options[0].value, this.value === status)
+				})
+			}
+		}, items.map(item =>
+			r('option', {
+				value: item,
+				selected: item === selected
+			}, item))))
+}
+
+function DelayToggler({ name, checked }) {
+	return (
+		r('label', {
+				className: CSS.DelayCheckbox,
+				title: Strings.delay
+			},
+			r('input', {
+				type: 'checkbox',
+				autocomplete: 'off',
+				name,
+				checked,
+				onChange(event) {
+					fetch(DP.edit, {
+						method: 'PATCH',
+						body: JSON.stringify({
+							[DF.file]: this.name,
+							[DF.delayed]: event.currentTarget.checked
+						})
+					})
+				}
+			}),
+			TimerIcon()))
+}
+
+function TimerIcon() {
+	return (
+		r('svg', { viewBox: '0 0 24 24' },
+			r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
+}
+
+
+function Transforms({ brokersByMethod }) {
+	const brokersWithTransforms = []
+	for (const brokers of Object.values(brokersByMethod))
+		for (const [urlMask, broker] of Object.entries(brokers))
+			if (broker.transforms.length)
+				brokersWithTransforms.push([urlMask, broker])
+	return (
+		r('table', null, brokersWithTransforms.map(([urlMask, broker]) =>
+			r('tr', null,
+				r('td', null, r(PreviewLink, { method: broker.method, urlMask })),
+				r('td', null, r(TransformSelector, {
+					urlMask,
+					method: broker.method,
+					items: ['', ...broker.transforms],
+					selected: broker.currentTransform
+				})))
+		)))
+}
+
+function TransformSelector({ method, urlMask, items, selected }) {
+	const className = defaultIsSelected => cssClass(
+		CSS.TransformSelector,
+		!defaultIsSelected && CSS.bold)
+	return (
+		r('select', {
+			className: className(selected === items[0]),
+			autocomplete: 'off',
+			'data-urlMask': urlMask,
+			'data-method': method,
+			onChange() {
+				fetch(DP.transform, {
+					method: 'PATCH',
+					body: JSON.stringify({
+						[DF.file]: this.value,
+						[DF.urlMask]: this.getAttribute('data-urlMask'),
+						[DF.method]: this.getAttribute('data-method')
+					})
+				}).then(() => {
+					this.closest('tr').querySelector('a').click()
+					this.className = className(this.value === this.options[0].value)
+				})
+			}
+		}, items.map(item =>
+			r('option', {
+				value: item,
+				selected: item === selected
+			}, item || Strings.none))))
+}
+
+
+/* === Utils === */
+function cssClass(...args) {
+	return args.filter(a => a).join(' ')
+}
+
+function empty(node) {
+	while (node.firstChild)
+		node.removeChild(node.firstChild)
+}
+
+
+// These are simplified React-compatible implementations.
+// IOW, for switching to React, remove the `createRoot`, `createElement`, `useRef`
+
+function createRoot(root) {
+	return {
+		render(app) {
+			root.appendChild(app)
+		}
+	}
+}
+
+function createElement(elem, props = null, ...children) {
+	if (typeof elem === 'function')
+		return elem(props)
+
+	if (['svg', 'path'].includes(elem)) // Incomplete list
+		return createSvgElement(elem, props, children)
+
+	const node = document.createElement(elem)
+	if (props)
+		for (const [key, value] of Object.entries(props))
+			if (key === 'ref')
+				value.current = node
+			else if (key.startsWith('on'))
+				node.addEventListener(key.replace(/^on/, '').toLowerCase(), value)
+			else if (key in node)
+				node[key] = value
+			else
+				node.setAttribute(key, value)
+	node.append(...children.flat())
+	return node
+}
+
+function createSvgElement(tagName, props, ...children) {
+	const elem = document.createElementNS('http://www.w3.org/2000/svg', tagName)
+	for (const [key, value] of Object.entries(props))
+		elem.setAttribute(key, value)
+	elem.append(...children.flat())
+	return elem
+}
+
+function useRef() {
+	return {
+		currentMock: null
+	}
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Eric Fortis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/MockBroker.js

@@ -0,0 +1,107 @@
+import { join } from 'node:path'
+import { existsSync, lstatSync, writeFileSync } from 'node:fs'
+
+import { Route } from './Route.js'
+import { Config } from './Config.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 its delay. Also,
+// knows if the route has js preprocessors (transforms) and documentation (md).
+export class MockBroker {
+	#route
+
+	constructor(file) {
+		this.#route = new Route(file)
+		this.method = this.#route.method
+
+		this.documentation = '' // .md
+
+		this.mocks = [] // *.json,txt
+		this.currentMock = {
+			file: '',
+			status: 200,
+			delay: 0
+		}
+
+		this.transforms = [] // *.js
+		this.currentTransform = ''
+
+		this.register(file)
+	}
+
+	register(file) {
+		if (file.endsWith('.md'))
+			this.documentation = file
+		else if (file.endsWith('.mjs'))
+			this.transforms.push(file)
+		else {
+			if (!this.mocks.length) {
+				this.currentMock.file = file // The first mock file option for a particular route becomes the default
+				this.currentMock.status = Route.parseFilename(file).status
+			}
+			this.mocks.push(file)
+		}
+	}
+
+	urlMaskMatches(url) { return this.#route.urlMaskMatches(url) }
+
+	get file() { return this.currentMock.file }
+	get status() { return this.currentMock.status }
+	get delay() { return this.currentMock.delay }
+
+	updateFile(filename) {
+		this.currentMock.file = filename
+		this.currentMock.status = Route.parseFilename(filename).status
+	}
+
+	updateDelay(delayed) {
+		this.currentMock.delay = Number(delayed) * Config.delay
+	}
+
+	updateTransform(filename) {
+		this.currentTransform = filename
+	}
+
+	setByMatchingComment(comment) {
+		for (const file of this.mocks)
+			if (Route.hasInParentheses(file, comment)) {
+				this.updateFile(file)
+				break
+			}
+		for (const file of this.transforms)
+			if (Route.hasInParentheses(file, comment)) {
+				this.updateTransform(file)
+				break
+			}
+	}
+
+	extractComments() {
+		let comments = []
+		for (const file of [...this.mocks, ...this.transforms])
+			comments = comments.concat(Route.extractComments(file))
+		return comments
+	}
+
+	ensureItHas501() {
+		if (!this.#has501())
+			this.#write501()
+	}
+
+	#has501() {
+		return this.mocks.some(mock => 
+			Route.parseFilename(mock).status === 501)
+	}
+
+	#write501() {
+		// TODO handle route with transforms but without mocks
+		const { urlMask, method } = Route.parseFilename(this.mocks[0])
+		let mask = urlMask
+		const t = join(Config.mocksDir, urlMask)
+		if (existsSync(t) && lstatSync(t).isDirectory())
+			mask = urlMask + '/'
+		const file = `${mask}.${method}.501.txt`
+		writeFileSync(join(Config.mocksDir, file), '')
+		this.register(file)
+	}
+}

package/MockDispatcher.js

@@ -0,0 +1,72 @@
+import { join } from 'node:path'
+import { readFileSync } from 'node:fs'
+
+import { DF } from './ApiConstants.js'
+import { cookie } from './cookie.js'
+import { Config } from './Config.js'
+import { mimeFor } from './utils/mime.js'
+import * as MockBrokerCollection from './mockBrokersCollection.js'
+import { parseJSON, JsonBodyParserError } from './utils/http-request.js'
+import { sendInternalServerError, sendNotFound, sendFile, sendBadRequest } from './utils/http-response.js'
+
+
+function serveDocumentation(req, response) {
+	sendFile(response, join(Config.mocksDir, decodeURIComponent(req.url)))
+}
+
+export async function dispatchMock(req, response) {
+	if (req.method === 'GET' && req.url.endsWith('.md')) {
+		serveDocumentation(req, response)
+		return
+	}
+
+	const mockBroker = MockBrokerCollection.findMatchingBroker(req.method, req.url)
+	if (!mockBroker)
+		sendNotFound(response)
+	else
+		try {
+			const { file, status, delay, currentTransform } = mockBroker
+			console.log(decodeURIComponent(req.url), '->', file)
+
+			response.statusCode = status
+			response.setHeader('content-type', mimeFor(file))
+			if (cookie.getCurrent())
+				response.setHeader('set-cookie', cookie.getCurrent())
+
+			let mockAsText = readMock(file)
+			if (mockBroker.currentTransform) {
+				const body = await requestBodyForTransform(req, mockAsText)
+				const transformFunc = await importTransformFunc(currentTransform)
+				mockAsText = transformFunc(mockAsText, body, Config)
+			}
+			setTimeout(() => response.end(mockAsText), delay)
+		}
+		catch (error) {
+			console.error(error)
+			if (error instanceof JsonBodyParserError)
+				sendBadRequest(response)
+			else if (error.code === 'ENOENT')
+				sendNotFound(response) // file has been deleted
+			else
+				sendInternalServerError(response)
+		}
+}
+
+const nonSafeMethods = ['PATCH', 'POST', 'PUT', 'DELETE', 'CONNECT']
+
+async function requestBodyForTransform(req, mockAsText) {
+	if (nonSafeMethods.includes(req.method))
+		return req.headers[DF.isForDashboard] // TESTME
+			? JSON.parse(mockAsText)
+			: await parseJSON(req)
+	return ''
+}
+
+function readMock(file) {
+	return readFileSync(join(Config.mocksDir, file), 'utf8')
+}
+
+async function importTransformFunc(file) {
+	// The date param is just for cache busting
+	return (await import(join(Config.mocksDir, file) + '?' + Date.now())).default
+}

package/Mockaton.js

@@ -0,0 +1,39 @@
+import { exec } from 'node:child_process'
+import { createServer } from 'node:http'
+
+import { DP } from './ApiConstants.js'
+import { Config, setup } from './Config.js'
+import { dispatchMock } from './MockDispatcher.js'
+import * as MockBrokerCollection from './mockBrokersCollection.js'
+import { dispatchStatic, isStatic } from './StaticDispatcher.js'
+import { apiPatchRequests, apiGetRequests } from './Api.js'
+
+
+export function Mockaton(options) {
+	setup(options)
+	MockBrokerCollection.init()
+
+	return createServer(async (req, response) => {
+		const { url, method } = req
+		if (method === 'GET' && apiGetRequests.has(url))
+			apiGetRequests.get(url)(req, response)
+			
+		else if (method === 'PATCH' && apiPatchRequests.has(url))
+			await apiPatchRequests.get(url)(req, response)
+			
+		else if (isStatic(req))
+			await dispatchStatic(req, response)
+			
+		else
+			await dispatchMock(req, response)
+	})
+		.listen(Config.port, Config.host, function (error) {
+			const { address, port } = this.address()
+			const url = `http://${address}:${port}`
+			console.log('Listening on', url)
+			if (error)
+				console.error(error)
+			else if (!Config.skipOpen)
+				exec(`open ${url + DP.dashboard}`)
+		})
+}