mockaton 8.16.5 → 8.16.6

package/README.md

@@ -65,8 +65,8 @@ 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, 
@@ -232,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/>
 
@@ -337,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`
@@ -350,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/package.json

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

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' },