mockaton 2.2.0 → 2.3.0

package/README.md

@@ -125,7 +125,7 @@ Comments are anything within parentheses, including them.
 They are ignored for URL purposes, so they have no effect
 on the URL mask. For example, these two are for `/api/foo`
 <pre>
-api/foo<b>(my comment)</b>.GET.200.json<b>(foo)</b>
+api/foo<b>(my comment)</b>.GET.200.json<b>(bar)</b>
 api/foo.GET.200.json
 </pre>
 
@@ -143,10 +143,10 @@ but since that’s part of the query string, it’s ignored anyway.
 
 
 
-### Default (index-like) file
-For the default route of a directory, omit the name (just use
-the extension). For example, the following files will be routed
-to `api/foo` because comments and the query string are ignored.
+### Default (index-like) route
+For the default route of a directory, omit the mock filename name
+(<b>just use the extension</b>). For example, the following files will be
+routed to `api/foo` because comments and the query string are ignored.
 ```text
 api/foo/.GET.200.json
 api/foo/?bar=[bar].GET.200.json
@@ -160,7 +160,7 @@ The selected cookie is sent in every response in the `Set-Cookie` header.
 import { jwtCookie } from 'mockaton'
 
 Config.cookies = {
-  'My Admin User': 'my-cookie=1;Path=/;SameSite=strict',
+  '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',
@@ -175,15 +175,14 @@ words, it’s useful if you only care about its payload.
 
 
 ## `Config.extraHeaders`
-They are applied last, right before ending the response. In
-other words, they can overwrite the `Content-Type`. They are
-not tuples, the header name goes in even-numbered indices.
+They are applied last, right before ending the response. In other words, they
+can overwrite the `Content-Type`. The header name goes in even indices.
 
 ```js
 Config.extraHeaders = [
   'Server', 'Mockaton',
-  'Set-Cookie', 'another-cookie=FOO;Path=/;SameSite=strict',
-  'Set-Cookie', 'another-cookie=BAR;Path=/;SameSite=strict'
+  'Set-Cookie', 'foo=FOO;Path=/;SameSite=strict',
+  'Set-Cookie', 'bar=BAR;Path=/;SameSite=strict'
 ]
 ```
 
@@ -223,7 +222,7 @@ fetch(addr + '/mockaton/bulk-select-by-comment', {
 ### Reset
 Re-Initialize the collection and its states (selected mocks and cookies, delays, etc.).
 ```js
-fetch(add + '/mockaton/reset', {
+fetch(addr + '/mockaton/reset', {
   method: 'PATCH'
 })
 ```

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/sample-mocks/api/user/links.GET.200.js

@@ -3,6 +3,7 @@
 
 export default function (req, response) {
 	return JSON.stringify([
-		{ id: 0 }
+		'http://example.com/foo',
+		'http://example.com/bar',
 	])
 }

package/src/Dashboard.css

@@ -14,23 +14,13 @@ body {
 	padding: 16px;
 }
 * {
+	padding: 0;
 	border: 0;
 	margin: 0;
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
 }
 
-h1 {
-	padding: 12px 0;
-	margin: 0;
-	font-size: 2rem;
-}
-
-
-select {
-	padding: 3px 0;
-	border: 1px solid #444;
-}
 
 fieldset {
 	width: 120px;
@@ -47,15 +37,6 @@ fieldset {
 	}
 }
 
-.CookieSelector {
-	display: flex;
-	align-items: center;
-	margin-left: 20px;
-
-	select {
-		margin-left: 5px;
-	}
-}
 
 main {
 	display: flex;
@@ -72,14 +53,39 @@ main {
 	}
 }
 
-.TitleWrap {
+menu {
 	display: flex;
-	align-items: center;
+	margin-bottom: 12px;
+	gap: 14px;
+	align-items: flex-end;
+
+	h1 {
+		margin: 0;
+		margin-right: 14px;
+		font-size: 2rem;
+	}
+
+	label {
+		span {
+			display: block;
+			color: #555;
+			font-size: .85rem;
+		}
+
+		select {
+			width: 143px;
+			padding: 3px 0;
+			border: 1px solid #bbb;
+			margin-top: 1px;
+			cursor: pointer;
+			border-radius: 4px;
+			font-size: 0.9rem;
+		}
+	}
 
 	button {
-		padding: 3px 12px;
+		padding: 4px 12px;
 		border: 1px solid var(--colorRed);
-		margin-left: 20px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
@@ -132,18 +138,11 @@ main {
 	}
 }
 
-.BulkSelectSection {
-	margin: 20px 0;
-}
-
-.BulkSelectSection select {
-	margin-top: 5px;
-}
-
 .MockSelector {
 	width: 300px;
 	padding: 8px 1px;
 	border: 0;
+	border-radius: 4px;
 	background: #eee;
 	text-align: right;
 	direction: rtl;

package/src/Dashboard.js

@@ -16,14 +16,11 @@ const Strings = {
 }
 
 const CSS = {
-	BulkSelectSection: 'BulkSelectSection',
-	CookieSelector: 'CookieSelector',
 	DelayCheckbox: 'DelayCheckbox',
 	Documentation: 'Documentation',
 	MockSelector: 'MockSelector',
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
-	TitleWrap: 'TitleWrap',
 
 	bold: 'bold',
 	chosen: 'chosen',
@@ -57,13 +54,11 @@ function DevPanel(brokersByMethod, cookies, comments) {
 	document.title = Strings.title
 	return (
 		r('div', null,
-			r('div', { className: CSS.TitleWrap },
+			r('menu', null,
 				r('h1', null, Strings.title),
-				r(ResetButton),
-				r(CookieSelector, { list: cookies })),
-			r('div', { className: CSS.BulkSelectSection },
-				r('h2', null, Strings.bulk_select_by_comment),
-				r(BulkSelector, { comments })),
+				r(CookieSelector, { list: cookies }),
+				r(BulkSelector, { comments }),
+				r(ResetButton)),
 			r('main', null,
 				r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
 					r(SectionByMethod, { method, brokers }))),
@@ -88,8 +83,8 @@ function ResetButton() {
 
 function CookieSelector({ list }) {
 	return (
-		r('label', { className: CSS.CookieSelector },
-			Strings.cookie,
+		r('label', null,
+			r('span', null, Strings.cookie),
 			r('select', {
 				autocomplete: 'off',
 				disabled: list.length <= 1,
@@ -111,21 +106,23 @@ function CookieSelector({ list }) {
 
 function BulkSelector({ comments }) {
 	return (
-		r('select', {
-			autocomplete: 'off',
-			disabled: comments.length <= 1,
-			onChange() {
-				fetch(API.bulkSelect, {
-					method: 'PATCH',
-					body: JSON.stringify(this.value)
-				})
-					.then(init)
-					.catch(console.error)
-			}
-		}, [Strings.select_one].concat(comments).map(item =>
-			r('option', {
-				value: item
-			}, item))))
+		r('label', null,
+			r('span', null, Strings.bulk_select_by_comment),
+			r('select', {
+				autocomplete: 'off',
+				disabled: comments.length <= 1,
+				onChange() {
+					fetch(API.bulkSelect, {
+						method: 'PATCH',
+						body: JSON.stringify(this.value)
+					})
+						.then(init)
+						.catch(console.error)
+				}
+			}, [Strings.select_one].concat(comments).map(item =>
+				r('option', {
+					value: item
+				}, item)))))
 }
 
 

package/src/MockDispatcher.js

@@ -36,8 +36,8 @@ export async function dispatchMock(req, response) {
 			response.setHeader('content-type', mimeFor('.json'))
 			const jsExport = await importDefault(file)
 			mockText = typeof jsExport === 'function'
-				? jsExport(req, response)
-				: JSON.stringify(jsExport)
+				? await jsExport(req, response)
+				: JSON.stringify(jsExport, null, 2)
 		}
 		else {
 			response.setHeader('content-type', mimeFor(file))