mockaton 8.16.6 → 8.18.0

package/README.md

@@ -70,12 +70,15 @@ lets you download all the HTTP responses 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.
+because you’d have to inject the cookies or tokens in `sessionStorage` 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.
+On the other hand, if you backend handles the session cookie, or if you can 
+develop without auth, proxying to your backend is straightforward to set up. 
+
+In a nutshell, you can forward requests to your backend for routes you don’t have
+mocks for, or routes that have the ☁️ **Cloud Checkbox** checked. In addition, 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/>
@@ -161,6 +164,7 @@ you want. For example, by adding `(demo-part1)`, `(demo-part2)` to the filenames
 
 Similarly, you can deploy a **Standalone Demo Server** by compiling the frontend app and
 putting its built assets in `config.staticDir`. And simulate the flow by Bulk Selecting mocks.
+The [aot-fetch-demo repo](https://github.com/ericfortis/aot-fetch-demo) has a working example.
 
 
 <br/>
@@ -232,9 +236,11 @@ export default function listColors() {
 ```
 </details>
 
+<br/>
+
 **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 A:** Put it in your `config.staticDir` without the `.GET.200.js` extension.
 
 **Option B:** Read it and return it. For example:
 ```js
@@ -346,20 +352,19 @@ api/foo/bar.GET.200.json
 This is the only required field. The directory must exist.
 
 ### `staticDir?: string`
-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`
-
+**This option is not needed** besides serving partial content (e.g., videos). But
+it’s convenient for serving 200 GET requests without having to add the filename
+extension convention. For example, for using Mockaton as a standalone demo server,
+as explained above in the _Use Cases_ section.
+
+Files under `config.staticDir` don’t use the filename convention, and they take
+precedence over corresponding `GET` mocks in `config.mocksDir` (regardless
+of status code). For example, if you have two files for `GET /foo/bar.jpg`:
 <pre>
-my-static-dir<b>/foo/bar.jpg</b>
- my-mocks-dir<b>/foo/bar.jpg</b>.GET.200.jpg // Unreachable
+my-static-dir<b>/foo/bar.jpg</b> <span style="color:green"> // Wins</span>
+ my-mocks-dir<b>/foo/bar.jpg</b>.GET.200.jpg <span style="color:red"> // Unreachable</span>
 </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/>
 
@@ -545,7 +550,7 @@ Defaults to `true`. When `true`, these are the default options:
 ```js
 config.corsOrigins = ['*']
 config.corsMethods = require('node:http').METHODS
-config.corsHeaders = ['content-type']
+config.corsHeaders = ['content-type', 'authorization']
 config.corsCredentials = true
 config.corsMaxAge = 0 // seconds to cache the preflight req
 config.corsExposedHeaders = [] // headers you need to access in client-side JS

package/package.json

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

package/src/Dashboard.css

@@ -7,7 +7,6 @@
 	:root {
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0068c1;
-		--colorAccentAlt: #068185;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #eee;
@@ -126,12 +125,11 @@ header {
 		align-items: flex-end;
 		gap: 10px;
 
-		@media (max-width: 860px) {
-			max-width: 500px;
+		@media (max-width: 890px) {
+			max-width: 400px;
 		}
 	}
 
-
 	img {
 		width: 130px;
 		align-self: center;
@@ -233,6 +231,21 @@ header {
 			color: white;
 		}
 	}
+
+	.Help {
+		align-self: center;
+		margin-left: auto;
+		min-width: 24px;
+		fill: var(--colorSecondaryAction);
+
+		&:hover {
+			fill: var(--colorAccent);
+		}
+
+		@media (max-width: 590px) {
+			display: none;
+		}
+	}
 }
 
 
@@ -272,7 +285,7 @@ table {
 
 	th {
 		padding-bottom: 2px;
-		padding-left: 110px;
+		padding-left: 4px;
 		text-align: left;
 	}
 
@@ -359,7 +372,6 @@ table {
 }
 
 .DelayToggler {
-	margin-left: 8px;
 	> input {
 		&:checked ~ svg {
 			border-color: var(--colorAccent);
@@ -387,6 +399,7 @@ table {
 .ProxyToggler {
 	padding: 1px 3px;
 	border: 1px solid var(--colorSecondaryActionBorder);
+	margin-right: 8px;
 	border-radius: var(--radius);
 
 	&:has(input:checked),
@@ -539,30 +552,31 @@ table {
 
 .ErrorToast {
 	position: fixed;
+	z-index: 9999;
 	bottom: 12px;
 	left: 12px;
-	z-index: 9999;
+	padding: 12px 16px;
 	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;
-		}
+	&:hover::after {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		content: '×';
+		font-size: 28px;
+		line-height: 34px;
+		border-radius: var(--radius);
+		background: rgba(0, 0, 0, 0.5);
 	}
 }
 

package/src/Dashboard.js

@@ -43,6 +43,7 @@ const CSS = {
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
 	GlobalDelayField: 'GlobalDelayField',
+	Help: 'Help',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
 	MainLeftSide: 'leftSide',
 	MainRightSide: 'rightSide',
@@ -92,12 +93,13 @@ function init() {
 
 function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbackAddress, staticBrokers]) {
 	globalDelay = delay
+	const canProxy = Boolean(fallbackAddress)
 	return [
 		r(Header, { cookies, comments, delay, fallbackAddress, collectProxied }),
 		r('main', null,
 			r('div', { className: CSS.MainLeftSide },
-				r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
-				r(StaticFilesList, { brokers: staticBrokers })),
+				r(MockList, { brokersByMethod, canProxy }),
+				r(StaticFilesList, { brokers: staticBrokers, canProxy })),
 			r('div', { className: CSS.MainRightSide },
 				r(PayloadViewer)))]
 }
@@ -114,7 +116,13 @@ function Header({ cookies, comments, delay, fallbackAddress, collectProxied }) {
 				r(BulkSelector, { comments }),
 				r(GlobalDelayField, { delay }),
 				r(ProxyFallbackField, { fallbackAddress, collectProxied }),
-				r(ResetButton))))
+				r(ResetButton)),
+			r('a', {
+				className: CSS.Help,
+				href: 'https://github.com/ericfortis/mockaton',
+				target: '_blank',
+				rel: 'noopener noreferrer'
+			}, r(HelpIcon))))
 }
 
 function Logo() {
@@ -270,10 +278,12 @@ function SectionByMethod({ method, brokers, canProxy }) {
 	const urlMasksDittoed = dittoSplitPaths(urlMasks)
 	return (
 		r('tbody', null,
-			r('th', { colspan: 4 }, method),
+			r('tr', null,
+				r('th', { colspan: 2 + Number(canProxy) }),
+				r('th', null, method)),
 			brokersSorted.map(([urlMask, broker], i) =>
 				r('tr', { 'data-method': method, 'data-urlMask': urlMask },
-					r('td', null, r(ProxyToggler, { broker, disabled: !canProxy })),
+					canProxy && r('td', null, r(ProxyToggler, { broker })),
 					r('td', null, r(DelayRouteToggler, { broker })),
 					r('td', null, r(InternalServerErrorToggler, { broker })),
 					r('td', null, r(PreviewLink, { method, urlMask, urlMaskDittoed: urlMasksDittoed[i] })),
@@ -387,7 +397,7 @@ function InternalServerErrorToggler({ broker }) {
 }
 
 /** @param {{ broker: MockBroker, disabled: boolean }} props */
-function ProxyToggler({ broker, disabled }) {
+function ProxyToggler({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
 		mockaton.setRouteIsProxied(method, urlMask, this.checked)
@@ -402,7 +412,6 @@ function ProxyToggler({ broker, disabled }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				disabled,
 				checked: !broker.currentMock.file,
 				onChange
 			}),
@@ -414,7 +423,7 @@ function ProxyToggler({ broker, disabled }) {
  * # StaticFilesList
  * @param {{ brokers: StaticBroker[] }} props
  */
-function StaticFilesList({ brokers }) {
+function StaticFilesList({ brokers, canProxy }) {
 	if (!Object.keys(brokers).length)
 		return null
 	const dp = dittoSplitPaths(Object.keys(brokers)).map(([ditto, tail]) => ditto
@@ -422,11 +431,14 @@ function StaticFilesList({ brokers }) {
 		: tail)
 	return (
 		r('table', { className: CSS.StaticFilesList },
+			r('thead', null,
+				r('tr', null,
+					r('th', { colspan: 2 + Number(canProxy) }),
+					r('th', null, Strings.static_get))),
 			r('tbody', null,
-				r('th', { colspan: 4 }, Strings.static_get),
 				Object.values(brokers).map((broker, i) =>
 					r('tr', null,
-						r('td', null, r(ProxyStaticToggler, {})),
+						canProxy && r('td', null, r(ProxyStaticToggler, {})),
 						r('td', null, r(DelayStaticRouteToggler, { broker })),
 						r('td', null, r(NotFoundToggler, { broker })),
 						r('td', null, r('a', { href: broker.route, target: '_blank' }, dp[i]))
@@ -604,9 +616,7 @@ function showErrorToast(msg) {
 			className: CSS.ErrorToast,
 			onClick() {
 				const toast = this
-				document.startViewTransition(() => {
-					toast.remove()
-				})
+				document.startViewTransition(() => toast.remove())
 			}
 		}, msg))
 }
@@ -624,6 +634,11 @@ function CloudIcon() {
 			s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })))
 }
 
+function HelpIcon() {
+	return (
+		s('svg', { viewBox: '0 0 24 24' },
+			s('path', { d: 'M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4' })))
+}
 
 /**
  * # Poll UI Sync Version

package/src/Filename.js

@@ -47,10 +47,10 @@ function validateFilename(file) {
 export function parseFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
 	return {
-		urlMask: '/' + removeTrailingSlash(tokens.slice(0, -3).join('.')),
-		method: tokens.at(-3),
-		status: Number(tokens.at(-2)),
-		ext: tokens.at(-1)
+		ext: tokens.pop(),
+		status: Number(tokens.pop()),
+		method: tokens.pop(),
+		urlMask: '/' + removeTrailingSlash(tokens.join('.'))
 	}
 }
 

package/src/config.js

@@ -42,7 +42,7 @@ const schema = {
 	corsAllowed: [true, is(Boolean)],
 	corsOrigins: [['*'], validateCorsAllowedOrigins],
 	corsMethods: [SUPPORTED_METHODS, validateCorsAllowedMethods],
-	corsHeaders: [['content-type'], Array.isArray],
+	corsHeaders: [['content-type', 'authorization'], Array.isArray],
 	corsExposedHeaders: [[], Array.isArray],
 	corsCredentials: [true, is(Boolean)],
 	corsMaxAge: [0, is(Number)],
@@ -61,7 +61,7 @@ for (const [k, [defaultVal, validator]] of Object.entries(schema)) {
 /** @type {Config} */
 export const config = Object.seal(defaults)
 
-/** @type {Record<keyof Config, (val: unknown) => boolean>} */
+/** @type {Record<keyof Config, (val: unknown) => val is Config[keyof Config]>} */
 export const ConfigValidator = Object.freeze(validators)