mockaton 8.16.4 → 8.16.6

package/README.md

@@ -62,14 +62,20 @@ api/videos.GET.<b>500</b>.txt               # Internal Server Error
 
 <br/>
 
-## Fallback to Your Backend
-No need to mock everything. You can forward requests to your backend for routes
-you don’t have mocks for, or routes that have the ☁️ **Cloud Checkbox** checked.
+## Scraping mocks from your Backend
 
+### Option 1: Browser Extension
+This [browser extension](https://github.com/ericfortis/download-http-requests-browser-ext) 
+lets you download all the HTTP responses following the filename convention.
 
-### Scraping mocks from your backend
-By checking ✅ **Save Mocks**, you can collect the responses that hit your backend.
-They will be saved in your `config.mocksDir` following the filename convention.
+### Option 2: Fallback to Your Backend
+This option could be a bit elaborate if your backend uses third-party auth, 
+because in that case you’d have to inject the cookies manually.
+
+At any rate, you can forward requests to your backend for routes you don’t have
+mocks for, or routes that have the ☁️ **Cloud Checkbox** checked. By checking
+✅ **Save Mocks**, you can collect the responses that hit your backend. They
+will be saved in your `config.mocksDir` following the filename convention.
 
 
 <br/>
@@ -226,8 +232,17 @@ export default function listColors() {
 ```
 </details>
 
-**What if I need to serve a static .js?**
-Put it in your `config.staticDir` without the mock filename convention.
+**What if I need to serve a static .js or .ts?**
+
+**Option A:** Put it in your `config.staticDir` without the filename extension convention (i.e., no `.GET.200.js`)
+
+**Option B:** Read it and return it. For example:
+```js
+export default function (_, response) {
+  response.setHeader('Content-Type', 'application/javascript')
+  return readFileSync('./some-dir/foo.js', 'utf8')
+}
+```
 
 <br/>
 
@@ -331,10 +346,6 @@ api/foo/bar.GET.200.json
 This is the only required field. The directory must exist.
 
 ### `staticDir?: string`
-- Use Case 1: If you have a bunch of static assets you don’t want to add `.GET.200.ext`
-- Use Case 2: For a standalone demo server. For example,
-  build your frontend bundle, and serve it from Mockaton.
-
 Files under `config.staticDir` don’t use the filename convention, and
 they take precedence over corresponding `GET` mocks in `config.mocksDir`.
 For example, if you have two files for `GET /foo/bar.jpg`
@@ -344,6 +355,14 @@ my-static-dir<b>/foo/bar.jpg</b>
  my-mocks-dir<b>/foo/bar.jpg</b>.GET.200.jpg // Unreachable
 </pre>
 
+This `config.staticDir` is not actually needed besides serving partial content
+(e.g., videos). At any rate, it’s convenient for serving 200 GET requests without
+having to add the filename extension convention (i.e., no `.GET.200.ext`).
+For example, for using Mockaton as a standalone demo server. For that, you
+can build your frontend bundle and put its built assets in this folder.
+
+<br/>
+
 ### `ignore?: RegExp`
 Defaults to `/(\.DS_Store|~)$/`
 

package/dev-config.js

@@ -0,0 +1,18 @@
+import { join } from 'node:path'
+import { jwtCookie } from './index.js'
+
+
+export const devConfig = {
+	port: 2345,
+	mocksDir: join(import.meta.dirname, 'fixtures-mocks'),
+	staticDir: join(import.meta.dirname, 'fixtures-static-mocks'),
+	cookies: {
+		'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
+		'My Normal User': 'my-cookie=0;Path=/;SameSite=strict',
+		'My JWT': jwtCookie('my-cookie', {
+			email: 'john.doe@example.com',
+			picture: 'https://cdn.auth0.com/avatars/jd.png'
+		}),
+		'None': ''
+	}
+}

package/index.js

@@ -1,6 +1,6 @@
 export { Mockaton } from './src/Mockaton.js'
 export { Commander } from './src/Commander.js'
-export { jsToJsonPlugin } from './src/MockDispatcherPlugins.js'
 
 export { jwtCookie } from './src/utils/jwt.js'
 export { parseJSON } from './src/utils/http-request.js'
+export { jsToJsonPlugin } from './src/MockDispatcher.js'

package/package.json

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

package/src/Api.js

@@ -7,11 +7,11 @@ import { join } from 'node:path'
 import { cookie } from './cookie.js'
 import { parseJSON } from './utils/http-request.js'
 import { uiSyncVersion } from './Watcher.js'
+import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
 import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 import { sendOK, sendJSON, sendUnprocessableContent, sendFile } from './utils/http-response.js'
-import { getStaticFilesCollection, findStaticBrokerByRoute, initStaticCollection } from './StaticDispatcher.js'
 
 
 const dashboardAssets = [
@@ -25,9 +25,7 @@ const dashboardAssets = [
 
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
-	...dashboardAssets.map(f => [
-		API.dashboard + f, serveDashboardAsset(f)
-	]),
+	...dashboardAssets.map(f => [API.dashboard + f, serveDashboardAsset(f)]),
 	[API.cors, getIsCorsAllowed],
 	[API.static, listStaticFiles],
 	[API.mocks, listMockBrokers],
@@ -68,12 +66,14 @@ function serveDashboardAsset(f) {
 
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
 function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
-function listStaticFiles(_, response) { sendJSON(response, getStaticFilesCollection()) }
+
+function listStaticFiles(_, response) { sendJSON(response, staticCollection.all()) }
+function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.all()) }
+
 function getGlobalDelay(_, response) { sendJSON(response, config.delay) }
-function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.getAll()) }
 function getProxyFallback(_, response) { sendJSON(response, config.proxyFallback) }
-function getIsCorsAllowed(_, response) { sendJSON(response, config.corsAllowed) }
 function getCollectProxied(_, response) { sendJSON(response, config.collectProxied) }
+function getIsCorsAllowed(_, response) { sendJSON(response, config.corsAllowed) }
 
 function longPollClientSyncVersion(req, response) {
 	if (uiSyncVersion.version !== Number(req.headers[DF.syncVersion])) {
@@ -101,7 +101,7 @@ function longPollClientSyncVersion(req, response) {
 
 function reinitialize(_, response) {
 	mockBrokersCollection.init()
-	initStaticCollection() // TESTME
+	staticCollection.init() // TESTME
 	sendOK(response)
 }
 
@@ -115,7 +115,7 @@ async function selectCookie(req, response) {
 
 async function selectMock(req, response) {
 	const file = await parseJSON(req)
-	const broker = mockBrokersCollection.findBrokerByFilename(file)
+	const broker = mockBrokersCollection.brokerByFilename(file)
 	if (!broker || !broker.hasMock(file))
 		sendUnprocessableContent(response, `Missing Mock: ${file}`)
 	else {
@@ -127,7 +127,7 @@ async function selectMock(req, response) {
 async function setRouteIsDelayed(req, response) {
 	const body = await parseJSON(req)
 	const delayed = body[DF.delayed]
-	const broker = mockBrokersCollection.findBrokerByRoute(
+	const broker = mockBrokersCollection.brokerByRoute(
 		body[DF.routeMethod],
 		body[DF.routeUrlMask])
 
@@ -144,7 +144,7 @@ async function setRouteIsDelayed(req, response) {
 async function setRouteIsProxied(req, response) { // TESTME
 	const body = await parseJSON(req)
 	const proxied = body[DF.proxied]
-	const broker = mockBrokersCollection.findBrokerByRoute(
+	const broker = mockBrokersCollection.brokerByRoute(
 		body[DF.routeMethod],
 		body[DF.routeUrlMask])
 
@@ -201,7 +201,7 @@ async function setGlobalDelay(req, response) { // TESTME
 async function setStaticRouteStatusCode(req, response) {
 	const body = await parseJSON(req)
 	const status = Number(body[DF.statusCode])
-	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
+	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
 
 	if (!broker) // TESTME
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)
@@ -217,7 +217,7 @@ async function setStaticRouteStatusCode(req, response) {
 async function setStaticRouteIsDelayed(req, response) {
 	const body = await parseJSON(req)
 	const delayed = body[DF.delayed]
-	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
+	const broker = staticCollection.brokerByRoute(body[DF.routeUrlMask])
 
 	if (!broker) // TESTME
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)

package/src/ApiConstants.js

@@ -31,7 +31,7 @@ export const DF = { // Dashboard Fields (XHR)
 export const DEFAULT_500_COMMENT = '(Mockaton 500)'
 export const DEFAULT_MOCK_COMMENT = '(default)'
 export const EXT_FOR_UNKNOWN_MIME = 'unknown'
-
 export const LONG_POLL_SERVER_TIMEOUT = 8_000
 
+
 export const HEADER_FOR_502 = 'mockaton502'

package/src/Dashboard.css

@@ -506,10 +506,8 @@ table {
 
 .SpinnerClock {
 	display: flex;
-	width: 36px;
-	height: 36px;
-	margin-top: 92px;
-	justify-self: center;
+	width: 48px;
+	margin-top: 6px;
 	fill: none;
 	stroke: var(--colorSecondaryAction);
 	stroke-width: 2px;
@@ -539,6 +537,42 @@ table {
 	filter: saturate(0);
 }
 
+.ErrorToast {
+	position: fixed;
+	bottom: 12px;
+	left: 12px;
+	z-index: 9999;
+	cursor: pointer;
+	background: var(--colorRed);
+	color: white;
+	padding: 12px 16px;
+	border-radius: var(--radius);
+	box-shadow: var(--boxShadow1);
+	opacity: 0;
+	transform: translateY(20px);
+	animation: _kfToastIn 240ms forwards;
+
+	&:hover {
+		&::after {
+			top: 0;
+			left: calc(100% - 6px);
+			position: absolute;
+			content: '×';
+			vertical-align: middle;
+			padding: 12px;
+			border-radius: var(--radius);
+			background: black;
+		}
+	}
+}
+
+@keyframes _kfToastIn {
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
 
 /* 
  * Prism 

package/src/Dashboard.js

@@ -39,6 +39,7 @@ const Strings = {
 const CSS = {
 	BulkSelector: 'BulkSelector',
 	DelayToggler: 'DelayToggler',
+	ErrorToast: 'ErrorToast',
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
 	GlobalDelayField: 'GlobalDelayField',
@@ -592,10 +593,24 @@ function mockSelectorFor(method, urlMask) {
 
 function onError(error) {
 	if (error?.message === 'Failed to fetch')
-		alert('Looks like the Mockaton server is not running')
+		showErrorToast('Looks like the Mockaton server is not running')
 	console.error(error)
 }
 
+function showErrorToast(msg) {
+	document.getElementsByClassName(CSS.ErrorToast)[0]?.remove()
+	document.body.appendChild(
+		r('div', {
+			className: CSS.ErrorToast,
+			onClick() {
+				const toast = this
+				document.startViewTransition(() => {
+					toast.remove()
+				})
+			}
+		}, msg))
+}
+
 function TimerIcon() {
 	return (
 		s('svg', { viewBox: '0 0 24 24' },

package/src/MockDispatcher.js

@@ -1,8 +1,10 @@
 import { join } from 'node:path'
+import { readFileSync } from 'node:fs'
+import { pathToFileURL } from 'node:url'
 
 import { proxy } from './ProxyRelay.js'
 import { cookie } from './cookie.js'
-import { applyPlugins } from './MockDispatcherPlugins.js'
+import { mimeFor } from './utils/mime.js'
 import { config, calcDelay } from './config.js'
 import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
@@ -11,7 +13,7 @@ import { sendInternalServerError, sendNotFound, sendUnprocessableContent } from
 
 export async function dispatchMock(req, response) {
 	try {
-		const broker = mockBrokerCollection.findBrokerByRoute(req.method, req.url)
+		const broker = mockBrokerCollection.brokerByRoute(req.method, req.url)
 		if (!broker || broker.proxied) {
 			if (config.proxyFallback)
 				await proxy(req, response, Number(broker?.delayed && calcDelay()))
@@ -50,3 +52,26 @@ export async function dispatchMock(req, response) {
 			sendInternalServerError(response, error)
 	}
 }
+
+
+async function applyPlugins(filePath, req, response) {
+	for (const [regex, plugin] of config.plugins)
+		if (regex.test(filePath))
+			return await plugin(filePath, req, response)
+	return {
+		mime: mimeFor(filePath),
+		body: readFileSync(filePath)
+	}
+}
+
+
+export async function jsToJsonPlugin(filePath, req, response) {
+	const jsExport = (await import(pathToFileURL(filePath) + '?' + Date.now())).default // date for cache busting
+	const body = typeof jsExport === 'function'
+		? await jsExport(req, response)
+		: JSON.stringify(jsExport, null, 2)
+	return {
+		mime: response.getHeader('Content-Type') || mimeFor('.json'), // jsFunc are allowed to set it
+		body
+	}
+}

package/src/Mockaton.js

@@ -3,12 +3,13 @@ import { createServer } from 'node:http'
 import { API } from './ApiConstants.js'
 import { config, setup } from './config.js'
 import { dispatchMock } from './MockDispatcher.js'
+import { dispatchStatic } from './StaticDispatcher.js'
+import * as staticCollection from './staticCollection.js'
 import { BodyReaderError } from './utils/http-request.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
 import { setCorsHeaders, isPreflight } from './utils/http-cors.js'
+import { watchMocksDir, watchStaticDir } from './Watcher.js'
 import { apiPatchRequests, apiGetRequests } from './Api.js'
-import { watchMocksDir, watchStaticMocksDir } from './Watcher.js'
-import { dispatchStatic, initStaticCollection, findStaticBrokerByRoute } from './StaticDispatcher.js'
 import { sendNoContent, sendInternalServerError, sendUnprocessableContent } from './utils/http-response.js'
 
 
@@ -17,9 +18,9 @@ process.on('unhandledRejection', error => { throw error })
 export function Mockaton(options) {
 	setup(options)
 	mockBrokerCollection.init()
-	initStaticCollection()
+	staticCollection.init()
 	watchMocksDir()
-	watchStaticMocksDir()
+	watchStaticDir()
 
 	return createServer(onRequest).listen(config.port, config.host, function (error) {
 		if (error) {
@@ -54,7 +55,7 @@ async function onRequest(req, response) {
 		else if (method === 'GET' && apiGetRequests.has(url))
 			apiGetRequests.get(url)(req, response)
 
-		else if (method === 'GET' && findStaticBrokerByRoute(url))
+		else if (method === 'GET' && staticCollection.brokerByRoute(url))
 			await dispatchStatic(req, response)
 
 		else

package/src/StaticDispatcher.js

@@ -1,65 +1,14 @@
+import { join } from 'node:path'
 import { readFileSync } from 'node:fs'
-import { join, basename } from 'node:path'
 
 import { mimeFor } from './utils/mime.js'
-import { listFilesRecursively } from './utils/fs.js'
-import { config, isFileAllowed, calcDelay } from './config.js'
-import { sendPartialContent, sendNotFound } from './utils/http-response.js'
-
-
-class StaticBroker {
-	constructor(route) {
-		this.route = route
-		this.delayed = false
-		this.status = 200 // 200 or 404
-	}
-
-	setDelayed(value) { this.delayed = value }
-	setStatus(value) { this.status = value }
-}
-
-/** @type {{ [route: string]: StaticBroker }} */
-let collection = {}
-
-export function initStaticCollection() {
-	collection = {}
-	listFilesRecursively(config.staticDir)
-		.sort()
-		.forEach(registerStaticMock)
-}
-
-
-/** @returns {boolean} registered */
-export function registerStaticMock(relativeFile) {
-	if (!isFileAllowed(basename(relativeFile)))
-		return false
-
-	const route = '/' + relativeFile
-	if (findStaticBrokerByRoute(route))
-		return false
-
-	collection[route] = new StaticBroker(route)
-	return true
-}
-
-
-export function unregisterStaticMock(relativeFile) {
-	delete collection['/' + relativeFile]
-}
-
-
-/** @returns {StaticBroker | undefined} */
-export function findStaticBrokerByRoute(route) {
-	return collection[route] || collection[join(route, 'index.html')]
-}
-
-export function getStaticFilesCollection() {
-	return collection
-}
+import { brokerByRoute } from './staticCollection.js'
+import { config, calcDelay } from './config.js'
+import { sendNotFound, sendPartialContent } from './utils/http-response.js'
 
 
 export async function dispatchStatic(req, response) {
-	const broker = findStaticBrokerByRoute(req.url)
+	const broker = brokerByRoute(req.url)
 
 	setTimeout(async () => {
 		if (!broker || broker.status === 404) { // TESTME
@@ -75,4 +24,3 @@ export async function dispatchStatic(req, response) {
 		}
 	}, Number(broker.delayed && calcDelay()))
 }
-

package/src/Watcher.js

@@ -5,7 +5,7 @@ import { EventEmitter } from 'node:events'
 import { config } from './config.js'
 import { isFile } from './utils/fs.js'
 import * as mockBrokerCollection from './mockBrokersCollection.js'
-import { registerStaticMock, unregisterStaticMock } from './StaticDispatcher.js'
+import { registerStaticMock, unregisterStaticMock } from './staticCollection.js'
 
 
 /** # AR = Add or Remove Mock Event */
@@ -40,7 +40,7 @@ export function watchMocksDir() {
 	})
 }
 
-export function watchStaticMocksDir() {
+export function watchStaticDir() {
 	const dir = config.staticDir
 	if (!dir)
 		return

package/src/config.js

@@ -1,7 +1,7 @@
 import { realpathSync } from 'node:fs'
 import { isDirectory } from './utils/fs.js'
 import { openInBrowser } from './utils/openInBrowser.js'
-import { jsToJsonPlugin } from './MockDispatcherPlugins.js'
+import { jsToJsonPlugin } from './MockDispatcher.js'
 import { optional, is, validate } from './utils/validate.js'
 import { SUPPORTED_METHODS } from './utils/http-request.js'
 import { validateCorsAllowedMethods, validateCorsAllowedOrigins } from './utils/http-cors.js'

package/src/mockBrokersCollection.js

@@ -23,6 +23,8 @@ import { parseFilename, filenameIsValid } from './Filename.js'
  */
 let collection = {}
 
+export const all = () => collection
+
 export function init() {
 	collection = {}
 	cookie.init(config.cookies)
@@ -39,7 +41,7 @@ export function init() {
 
 /** @returns {boolean} registered */
 export function registerMock(file, isFromWatcher = false) {
-	if (findBrokerByFilename(file)?.hasMock(file)
+	if (brokerByFilename(file)?.hasMock(file)
 		|| !isFileAllowed(basename(file)) // TESTME
 		|| !filenameIsValid(file))
 		return false
@@ -62,7 +64,7 @@ export function registerMock(file, isFromWatcher = false) {
 }
 
 export function unregisterMock(file) {
-	const broker = findBrokerByFilename(file)
+	const broker = brokerByFilename(file)
 	if (!broker)
 		return
 	const isEmpty = broker.unregister(file)
@@ -74,11 +76,9 @@ export function unregisterMock(file) {
 	}
 }
 
-export const getAll = () => collection
-
 
 /** @returns {MockBroker | undefined} */
-export function findBrokerByFilename(file) {
+export function brokerByFilename(file) {
 	const { method, urlMask } = parseFilename(file)
 	if (collection[method])
 		return collection[method][urlMask]
@@ -91,7 +91,7 @@ export function findBrokerByFilename(file) {
  * BTW, `urlMasks` always start with "/", so there’s no need to
  * worry about the primacy of array-like keys when iterating.
  @returns {MockBroker | undefined} */
-export function findBrokerByRoute(method, url) {
+export function brokerByRoute(method, url) {
 	if (!collection[method])
 		return
 	const brokers = Object.values(collection[method])

package/src/staticCollection.js

@@ -0,0 +1,56 @@
+import { join, basename } from 'node:path'
+import { listFilesRecursively } from './utils/fs.js'
+import { config, isFileAllowed } from './config.js'
+
+
+class StaticBroker {
+	constructor(route) {
+		this.route = route
+		this.delayed = false
+		this.status = 200 // 200 or 404
+	}
+
+	setDelayed(value) { this.delayed = value }
+	setStatus(value) { this.status = value }
+}
+
+/** @type {{ [route: string]: StaticBroker }} */
+let collection = {}
+
+export const all = () => collection
+
+export function init() {
+	collection = {}
+	listFilesRecursively(config.staticDir)
+		.sort()
+		.forEach(registerStaticMock)
+}
+
+
+/** @returns {boolean} registered */
+export function registerStaticMock(relativeFile) {
+	if (!isFileAllowed(basename(relativeFile)))
+		return false
+
+	const route = '/' + relativeFile
+	if (brokerByRoute(route))
+		return false
+
+	collection[route] = new StaticBroker(route)
+	return true
+}
+
+
+export function unregisterStaticMock(relativeFile) {
+	delete collection['/' + relativeFile]
+}
+
+
+/** @returns {StaticBroker | undefined} */
+export function brokerByRoute(route) {
+	return collection[route] || collection[join(route, 'index.html')]
+}
+
+
+
+

package/src/MockDispatcherPlugins.js

@@ -1,25 +0,0 @@
-import { readFileSync as read } from 'node:fs'
-import { mimeFor } from './utils/mime.js'
-import { config } from './config.js'
-
-
-export async function applyPlugins(filePath, req, response) {
-	for (const [regex, plugin] of config.plugins)
-		if (regex.test(filePath))
-			return await plugin(filePath, req, response)
-	return {
-		mime: mimeFor(filePath),
-		body: read(filePath)
-	}
-}
-
-export async function jsToJsonPlugin(filePath, req, response) {
-	const jsExport = (await import(filePath + '?' + Date.now())).default // date for cache busting
-	const body = typeof jsExport === 'function'
-		? await jsExport(req, response)
-		: JSON.stringify(jsExport, null, 2)
-	return {
-		mime: response.getHeader('Content-Type') || mimeFor('.json'), // jsFunc are allowed to set it
-		body
-	}
-}