mockaton 8.16.5 → 8.17.0

package/README.md

@@ -65,17 +65,20 @@ api/videos.GET.<b>500</b>.txt               # Internal Server Error
 ## Scraping mocks from your Backend
 
 ### Option 1: Browser Extension
-This [devtools extension](https://github.com/ericfortis/devtools-ext-zip-http-requests) 
-lets you download a ZIP with all the responses following the filename convention.
+This [browser extension](https://github.com/ericfortis/download-http-requests-browser-ext) 
+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,8 +236,19 @@ 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.
+<br/>
+
+**What if I need to serve a static .js or .ts?**
+
+**Option A:** Put it in your `config.staticDir` without the `.GET.200.js` extension.
+
+**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/>
 
@@ -337,19 +352,22 @@ 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`
-
+**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>
 
+
+<br/>
+
 ### `ignore?: RegExp`
 Defaults to `/(\.DS_Store|~)$/`
 

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.16.5",
+	"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),
@@ -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,43 @@ table {
 	filter: saturate(0);
 }
 
+.ErrorToast {
+	position: fixed;
+	z-index: 9999;
+	bottom: 12px;
+	left: 12px;
+	padding: 12px 16px;
+	cursor: pointer;
+	background: var(--colorRed);
+	color: white;
+	border-radius: var(--radius);
+	box-shadow: var(--boxShadow1);
+	opacity: 0;
+	transform: translateY(20px);
+	animation: _kfToastIn 240ms forwards;
+
+	&: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);
+	}
+}
+
+@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',
@@ -91,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)))]
 }
@@ -269,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] })),
@@ -386,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)
@@ -401,7 +405,6 @@ function ProxyToggler({ broker, disabled }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				disabled,
 				checked: !broker.currentMock.file,
 				onChange
 			}),
@@ -413,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
@@ -421,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]))
@@ -592,10 +598,22 @@ 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' },