mockaton 8.16.6 → 8.17.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/>
 

package/package.json

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

package/src/Dashboard.css

@@ -272,7 +272,7 @@ table {
 
 	th {
 		padding-bottom: 2px;
-		padding-left: 110px;
+		padding-left: 4px;
 		text-align: left;
 	}
 
@@ -359,7 +359,6 @@ table {
 }
 
 .DelayToggler {
-	margin-left: 8px;
 	> input {
 		&:checked ~ svg {
 			border-color: var(--colorAccent);
@@ -387,6 +386,7 @@ table {
 .ProxyToggler {
 	padding: 1px 3px;
 	border: 1px solid var(--colorSecondaryActionBorder);
+	margin-right: 8px;
 	border-radius: var(--radius);
 
 	&:has(input:checked),
@@ -539,30 +539,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

@@ -92,12 +92,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)))]
 }
@@ -270,10 +271,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 +390,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 +405,6 @@ function ProxyToggler({ broker, disabled }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				disabled,
 				checked: !broker.currentMock.file,
 				onChange
 			}),
@@ -414,7 +416,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 +424,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 +609,7 @@ function showErrorToast(msg) {
 			className: CSS.ErrorToast,
 			onClick() {
 				const toast = this
-				document.startViewTransition(() => {
-					toast.remove()
-				})
+				document.startViewTransition(() => toast.remove())
 			}
 		}, msg))
 }