mockaton 8.21.0 → 8.21.3

package/README.md

@@ -25,7 +25,7 @@ With Mockaton, developers can achieve correctness without sacrificing speed.
 
 ### Speed
 - Prevents progress from being blocked by waiting for APIs.
-- Avoids spinning up and updating hefty backends when developing UIs.
+- Works around unstable dev backends while developing UIs.
 - Time travel. If you commit the mocks to your repo, it’s straightforward
   to check out long-lived branches and bisect bugs, so you don’t
   have to downgrade backends to old API contracts or databases.
@@ -65,7 +65,8 @@ for setting up tests (see **Commander API** section below).
 <br/>
 
 ## Multiple Mock Variants
-Each route can have different mocks. There are two options for doing that:
+Each route can have different mocks. There are two
+options for doing that, and they can be combined.
 
 ### Adding comments to the filename
 Comments are anything within parentheses, including them.
@@ -80,9 +81,9 @@ For instance, you can use a `4xx` or `5xx` status code for triggering error
 responses, or a `2xx` such as `204` for testing empty collections.
 
 <pre>
-api/videos(empty list).GET.<b>204</b>.json  # No Content
-api/videos.GET.<b>403</b>.json              # Forbidden
-api/videos.GET.<b>500</b>.txt               # Internal Server Error
+api/videos.GET.<b>204</b>.empty # No Content
+api/videos.GET.<b>403</b>.json  # Forbidden
+api/videos.GET.<b>500</b>.txt   # Internal Server Error
 </pre>
 
 
@@ -91,8 +92,8 @@ api/videos.GET.<b>500</b>.txt               # Internal Server Error
 ## Scraping Mocks from your Backend
 
 ### Option 1: Browser Extension
-This companion [browser-devtools extension](https://github.com/ericfortis/download-http-requests-browser-ext)
-lets you download all the HTTP responses at once, and they
+With the companion [browser-devtools extension](https://github.com/ericfortis/download-http-requests-browser-ext)
+you can download all the HTTP responses at once, and they
 get saved following Mockaton’s filename convention.
 
 ### Option 2: Fallback to Your Backend
@@ -183,7 +184,7 @@ permutations for out-of-stock, new-arrival, and discontinued.
 - Spinners by delaying responses
 - Setting up UI tests
 
-### Simulating complex backend states
+### Demoing complex backend states
 Sometimes, the ideal flow you need is too difficult to reproduce from the actual backend.
 For this, you can **Bulk Select** mocks by comments to simulate the complete states
 you want. For example, by adding `(demo-part1)`, `(demo-part2)` to the filenames.
@@ -307,8 +308,10 @@ want a `Content-Type` header in the response.
 <br/>
 
 ### Dynamic parameters
-Anything within square brackets is always matched. For example, for this route:
-<code>/api/company/<b>1234</b>/user/<b>5678</b></code>
+Anything within square brackets is always matched. 
+
+For example, for <a href="#">/api/company/<b>123</b>/user/<b>789</b></a>,
+the filename could be:
 
 <pre><code>api/company/<b>[id]</b>/user/<b>[uid]</b>.GET.200.json</code></pre>
 
@@ -351,7 +354,7 @@ string it’s ignored anyway.
 <br/>
 
 ### Index-like routes
-If you have `api/foo` and `api/foo/bar`, you have two options:
+If you have <a href="#">api/foo</a> and <a href="#">api/foo/bar</a>, you have two options:
 
 **Option A.** Standard naming:
 ```
@@ -379,7 +382,7 @@ as explained above in the _Use Cases_ section.
 
 Files under `config.staticDir` 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`:
+For example, if you have two files for `GET` <a href="#">/foo/bar.jpg</a> such as:
 <pre>
 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>

package/package.json

@@ -2,18 +2,17 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.21.0",
+	"version": "8.21.3",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
 	"repository": "https://github.com/ericfortis/mockaton",
 	"keywords": [
 		"mock-server",
+		"rest-api",
 		"mock",
 		"api",
-		"testing",
-		"front-end",
-		"back-end"
+		"testing"
 	],
 	"scripts": {
 		"test": "node --test \"src/**/*.test.js\"",
@@ -22,11 +21,11 @@
 		"pixaton": "node --test --import=./pixaton-tests/_setup.js --experimental-test-isolation=none \"pixaton-tests/**/*.test.js\"",
 		"outdated": "npm outdated --parseable | awk -F: '{ printf \"npm i %-30s ;# %s\\n\", $4, $2 }'"
 	},
-	"optionalDependencies": {
-		"open": "^10"
-	},
 	"devDependencies": {
 		"pixaton": "1.1.2",
 		"puppeteer": "24.18.0"
+	},
+	"optionalDependencies": {
+		"open": "10.2.0"
 	}
 }

package/src/Dashboard.css

@@ -21,6 +21,18 @@
 		--colorRed: #da0f00;
 		--colorText: #000;
 	}
+	.SyntaxHighlight {
+		color: var(--colorSecondaryAction);
+		.key {
+			color: #ed206a
+		}
+		.val {
+			color: #9b71e8
+		}
+		.string {
+			color: #3e8300
+		}
+	}
 }
 @media (prefers-color-scheme: dark) {
 	:root {
@@ -40,6 +52,18 @@
 		--colorRed: #f41606;
 		--colorText: #fff;
 	}
+	.SyntaxHighlight {
+		color: var(--colorSecondaryAction);
+		.key {
+			color: #f92672
+		}
+		.val {
+			color: #ae81ff
+		}
+		.string {
+			color: #a6e22e
+		}
+	}
 }
 
 html,
@@ -590,93 +614,3 @@ table {
 		transform: translateY(0);
 	}
 }
-
-
-/* 
- * Prism 
- */
-
-@media (prefers-color-scheme: dark) {
-	.token.cdata, .token.comment, .token.doctype, .token.prolog {
-		color: #8292a2
-	}
-	.token.punctuation {
-		color: #f8f8f2
-	}
-	.token.namespace {
-		opacity: .7
-	}
-	.token.constant, .token.deleted, .token.property, .token.symbol, .token.tag {
-		color: #f92672
-	}
-	.token.boolean, .token.number {
-		color: #ae81ff
-	}
-	.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
-		color: #a6e22e
-	}
-	.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url, .token.variable {
-		color: #f8f8f2
-	}
-	.token.atrule, .token.attr-value, .token.class-name, .token.function {
-		color: #e6db74
-	}
-	.token.keyword {
-		color: #66d9ef
-	}
-	.token.important, .token.regex {
-		color: #fd971f
-	}
-	.token.bold, .token.important {
-		font-weight: 700
-	}
-	.token.italic {
-		font-style: italic
-	}
-	.token.entity {
-		cursor: help
-	}
-}
-
-@media (prefers-color-scheme: light) {
-	.token.cdata, .token.comment, .token.doctype, .token.prolog {
-		color: #708090
-	}
-	.token.punctuation {
-		color: #999
-	}
-	.token.namespace {
-		opacity: .7
-	}
-	.token.constant, .token.deleted, .token.property, .token.symbol, .token.tag {
-		color: #ed206a
-	}
-	.token.boolean, .token.number {
-		color: #9b71e8
-	}
-	.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
-		color: #3e8300
-	}
-	.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
-		color: #9a6e3a;
-		background: hsla(0, 0%, 100%, .5)
-	}
-	.token.atrule, .token.attr-value, .token.keyword {
-		color: #07a
-	}
-	.token.class-name, .token.function {
-		color: #dd4a68
-	}
-	.token.important, .token.regex, .token.variable {
-		color: #e90
-	}
-	.token.bold, .token.important {
-		font-weight: 700
-	}
-	.token.italic {
-		font-style: italic
-	}
-	.token.entity {
-		cursor: help
-	}
-}

package/src/Dashboard.html

@@ -10,7 +10,5 @@
 </head>
 <body>
 <script src="./mockaton/Dashboard.js" type="module"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js" integrity="sha512-QXFMVAusM85vUYDaNgcYeU3rzSlc+bTV4JvkfJhjxSHlQEo+ig53BtnGkvFTiNJh8D+wv6uWAQ2vJaVmxe8d3w==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
 </body>
 </html>

package/src/Dashboard.js

@@ -3,13 +3,6 @@ import { parseFilename } from './Filename.js'
 import { Commander } from './Commander.js'
 
 
-function syntaxHighlightJson(textBody) {
-	const prism = window.Prism
-	return prism?.highlight && prism?.languages?.json
-		? prism.highlight(textBody, prism.languages.json, 'json')
-		: false
-}
-
 const Strings = {
 	bulk_select: 'Bulk Select',
 	bulk_select_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
@@ -56,6 +49,7 @@ const CSS = {
 	ResetButton: null,
 	SaveProxiedCheckbox: null,
 	StaticFilesList: null,
+	SyntaxHighlight: null,
 
 	chosen: null,
 	dittoDir: null,
@@ -566,7 +560,7 @@ function PayloadViewer() {
 		r('div', className(CSS.PayloadViewer),
 			r('h2', { ref: payloadViewerTitleRef }, Strings.preview),
 			r('pre', null,
-				r('code', { ref: payloadViewerRef }, Strings.click_link_to_preview))))
+				r('code', { ref: payloadViewerRef, className: CSS.SyntaxHighlight }, Strings.click_link_to_preview))))
 }
 
 function PayloadViewerProgressBar() {
@@ -846,3 +840,27 @@ function dittoSplitPaths(paths) {
 	]
 	console.assert(JSON.stringify(dittoSplitPaths(input)) === JSON.stringify(expected))
 }())
+
+
+
+function syntaxHighlightJson(textBody) {
+	return textBody.replace(
+		/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(\.\d+)?)/g,
+		match => {
+			if (/^".*":$/.test(match))
+				return `<span class="key">${escapeHTML(match.slice(0, -1))}</span>:`
+
+			return /^"/.test(match)
+				? `<span class="string">${escapeHTML(match)}</span>`
+				: `<span class="val">${match}</span>`
+		}
+	)
+}
+
+function escapeHTML(str) {
+	return str.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;')
+}