mockaton 11.4.1 → 12.0.1

package/README.md

@@ -1,30 +1,14 @@
-<svg width="210" viewBox="0 0 556 100" xmlns="http://www.w3.org/2000/svg">
-	<style>
-		@media (prefers-color-scheme: light) { :root { --color: #333 } }
-		@media (prefers-color-scheme: dark) { :root { --color: #eee } }
-		path {
-		  fill: #777;
-		  fill: var(--color);
-		}
-	</style>
-	<path
-		d="m13.75 1.8789c-5.9487 0.19352-10.865 4.5652-11.082 11.686v81.445c-1e-7 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-64.982c0.02794-3.4488 3.0988-3.5551 4.2031-1.1562l16.615 59.059c1.4393 5.3711 5.1083 7.9633 8.7656 7.9473 3.6573 0.01603 7.3263-2.5762 8.7656-7.9473l16.615-59.059c1.1043-2.3989 4.1752-2.2925 4.2031 1.1562v64.982c0 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-81.445c-0.17732-7.0807-5.1334-11.492-11.082-11.686-5.9487-0.19352-12.652 3.8309-15.609 13.619l-15.686 57.334-15.686-57.334c-2.9569-9.7882-9.6607-13.813-15.609-13.619zm239.19 0.074219c-2.216 0-4 1.784-4 4v89.057c0 2.216 1.784 4 4 4h4.793c2.216 0 3.9868-1.784 4-4l0.10644-17.94c0.0734-0.07237 12.175-13.75 12.175-13.75 5.6772 11.091 11.404 22.158 17.113 33.232 1.0168 1.9689 3.4217 2.7356 5.3906 1.7188l4.2578-2.1992c1.9689-1.0168 2.7356-3.4217 1.7188-5.3906-6.4691-12.585-12.958-25.16-19.442-37.738l17.223-19.771c1.4555-1.671 1.2803-4.189-0.39062-5.6445l-3.6133-3.1465c-0.73105-0.63679-1.6224-0.96212-2.5176-0.98633-1.151-0.03113-2.3063 0.43508-3.125 1.375l-28.896 33.174v-51.99c0-2.216-1.784-4-4-4zm-58.255 23.316c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312l-0.125-7.8457c0-2.216-1.784-4-4-4h-4.6524c-2.216 0-4 1.784-4 4l3e-3 6.7888c3e-3 3.8063-1.5601 9.3694-8.4716 9.3694h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.6937 0 8.3697 5.2207 8.4687 11.828v2.2207c0 2.216 1.784 4 4 4h4.6524c2.216 0 4-1.784 4-4l0.125-5.7363c0-10.699-8.6117-19.312-19.311-19.312zm-72.182 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z"/>
-	<path
-		d="m331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z"
-		opacity="0.75"/>
-	<path
-		d="m392.75 1.373c-2.216 0-4 1.784-4 4v18.043h-5.3086c-2.216 0-4 1.784-4 4v4.793c0 2.216 1.784 4 4 4h5.3086v51.398c0 6.1465 3.7064 10.823 9.232 10.823h16.531c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-12.97v-49.428h9.8711c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-9.8711v-18.043c0-2.216-1.784-4-4-4zm122.96 23.896c-10.699 0-19.312 8.6137-19.312 19.312v49.812c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-45.648c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v45.684c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312zm-69.999 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z"/>
-</svg>
+# Mockaton
 
+An HTTP mock server for simulating APIs with minimal setup &mdash; ideal
+for testing difficult to reproduce backend states.
 
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
 [![Test](https://github.com/ericfortis/mockaton/actions/workflows/test.yml/badge.svg)](https://github.com/ericfortis/mockaton/actions/workflows/test.yml)
 [![codecov](https://codecov.io/github/ericfortis/mockaton/graph/badge.svg?token=90NYLMMG1J)](https://codecov.io/github/ericfortis/mockaton)
 
-An HTTP mock server for simulating APIs with minimal setup &mdash; ideal
-for testing difficult to reproduce backend states. 
 
-## [mockaton.com ↗](https://mockaton.com) 
+## [Documentation ↗](https://mockaton.com) 
 ## [Changelog ↗](https://mockaton.com/changelog)
 
 ## Overview
@@ -40,6 +24,25 @@ For example, for [/api/company/123](#), the filename could be:
 
 <br/>
 
+## Dashboard
+
+<picture>
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
+</picture>
+
+On the dashboard you can:
+- Select a mock variant for a particular route
+- 🕓 Delay responses
+- Trigger an autogenerated `500` error
+  - …and cycle it off (for testing retries)
+
+Nonetheless, there’s a [Control API ↗](https://mockaton.com/api), which is handy for
+setting up tests.
+
+<br/>
+
 
 ## Quick Start (Docker)
 This will spin up Mockaton with the sample directories
@@ -61,26 +64,6 @@ curl localhost:2020/api/user
 ```
 
 
-<br/>
-
-## Dashboard
-
-
-<picture>
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
-</picture>
-
-On the dashboard you can:
-- Select a mock variant for a particular route
-- 🕓 Delay responses
-- Trigger an autogenerated `500` error
-  - …and cycle it off (for testing retries)
-
-Nonetheless, there’s a programmatic API, which is handy for
-setting up tests (see **Commander&nbsp;API** section below).
-
 
 ## License
 MIT

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "11.4.1",
+	"version": "12.0.1",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/app.js

@@ -1,65 +1,15 @@
 import {
 	createElement as r,
 	createSvgElement as s,
-	className, restoreFocus, Defer, Fragment
+	className, restoreFocus, Defer, Fragment, adoptCSS
 } from './dom-utils.js'
 
 import { store } from './app-store.js'
 import { parseFilename } from './Filename.js'
 import { HEADER_502 } from './ApiConstants.js'
 
-
-const CSS = {
-	BulkSelector: null,
-	CookieSelector: null,
-	DelayToggler: null,
-	ErrorToast: null,
-	FallbackBackend: null,
-	Field: null,
-	GlobalDelayField: null,
-	GlobalDelayJitterField: null,
-	GlobalDelayWrap: null,
-	GroupByMethod: null,
-	InternalServerErrorToggler: null,
-	Logo: null,
-	MenuTrigger: null,
-	Method: null,
-	MockSelector: null,
-	NotFoundToggler: null,
-	PayloadViewer: null,
-	PreviewLink: null,
-	ProgressBar: null,
-	ProxyToggler: null,
-	ResetButton: null,
-	Resizer: null,
-	SaveProxiedCheckbox: null,
-	SettingsMenu: null,
-	Table: null,
-	TableHeading: null,
-	TableRow: null,
-
-	animIn: null,
-	canProxy: null,
-	checkboxBody: null,
-	chosen: null,
-	dittoDir: null,
-	leftSide: null,
-	nonDefault: null,
-	nonGroupedByMethod: null,
-	rightSide: null,
-	status4xx: null,
-
-	syntaxAttr: null,
-	syntaxAttrVal: null,
-	syntaxKey: null,
-	syntaxPunc: null,
-	syntaxStr: null,
-	syntaxTag: null,
-	syntaxVal: null
-}
-for (const k of Object.keys(CSS))
-	CSS[k] = k
-
+import CSS from './styles.css' with { type: 'css' }
+adoptCSS(CSS)
 
 const FocusGroup = {
 	ProxyToggler: 0,

package/src/client/css-modules.test.js

@@ -0,0 +1,71 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { extractClassNames } from './dom-utils.js'
+
+
+const cssRules = [
+	{ cssText: '.TopLevelPascal { color: red; }' },
+	{ cssText: '.topLevelCamel { color: blue; }' },
+	{ cssText: '.top_level_snake { color: green; }' },
+	{ cssText: '.top-level-kebab { color: yellow; }' },
+	{ cssText: '.Level2Parent {\n  & .level2ChildCamel { color: purple; }\n}' },
+	{ cssText: '.level2Base {\n  &.level2ModifierCamel { font-weight: bold; }\n}' },
+	{ cssText: '.Level3Parent {\n  & .level3ChildCamel {\n  & .level3_grand_child_snake { color: orange; }\n}\n}' },
+	{ cssText: '.pseudoParent {\n  &:hover { background: red; }\n  & .pseudoNestedChild { color: pink; }\n}' },
+	{ cssText: '.multiClass1, .multi_class_2 { padding: 10px; }' },
+	{ cssText: '.combParent {\n  & > .combChildDirect { margin: 5px; }\n}' },
+	{ cssText: '.siblingBase {\n  & + .siblingAdjacent { border: 1px solid; }\n}' },
+	{ cssText: '@media (max-width: 768px) {\n  .mediaQueryClass {\n  & .mqNestedChild { display: none; }\n}\n}' },
+	{ cssText: '.class_with_123_numbers { color: cyan; }' },
+	{ cssText: '._privateStyleClass { opacity: 0.5; }' },
+	{ cssText: '.stringTest { content: ".shouldNotBeExtracted"; background: url(".alsoIgnored"); }' },
+	{ cssText: '.ComplexRoot {\n  & .level2-kebab {\n  &.level2ModCamel { color: red; }\n  & .level3_snake {\n  & .level4PascalChild { color: blue; }\n}\n}\n}' }
+]
+
+const expected = {
+	TopLevelPascal: null,
+	topLevelCamel: null,
+	top_level_snake: null,
+	'top-level-kebab': null,
+
+	Level2Parent: null,
+	level2ChildCamel: null,
+	level2Base: null,
+	level2ModifierCamel: null,
+
+	Level3Parent: null,
+	level3ChildCamel: null,
+	level3_grand_child_snake: null,
+
+	pseudoParent: null,
+	pseudoNestedChild: null,
+
+	multiClass1: null,
+	multi_class_2: null,
+
+	combParent: null,
+	combChildDirect: null,
+
+	siblingBase: null,
+	siblingAdjacent: null,
+
+	mediaQueryClass: null,
+	mqNestedChild: null,
+
+	class_with_123_numbers: null,
+	_privateStyleClass: null,
+
+	stringTest: null,
+
+	ComplexRoot: null,
+	'level2-kebab': null,
+	level2ModCamel: null,
+	level3_snake: null,
+	level4PascalChild: null
+}
+for (const k of Object.keys(expected))
+	expected[k] = k
+
+
+test('extracts', () => deepEqual(extractClassNames({ cssRules }), expected))
+

package/src/client/dom-utils.js

@@ -78,3 +78,28 @@ function selectorFor(elem) {
 	return path.reverse().join('>')
 }
 
+
+
+// Minimal implementation of CSS Modules in the browser
+// TODO think about avoiding clashes when using multiple files. e.g.:
+//  - should the user pass a prefix?, or
+//  - should the ensure there's a unique top-level classname on each file
+// TODO ignore rules in comments?
+
+export function adoptCSS(sheet) {
+	document.adoptedStyleSheets.push(sheet)
+	Object.assign(sheet, extractClassNames(sheet))
+}
+
+export function extractClassNames({ cssRules }) {
+	// Class names must begin with _ or a letter, then it can have numbers and hyphens
+	const reClassName = /(?:^|[\s,{>])&?\s*\.([a-zA-Z_][\w-]*)/g
+
+	const cNames = {}
+	let match
+	for (const rule of cssRules)
+		while (match = reClassName.exec(rule.cssText))
+			cNames[match[1]] = match[1]
+	return cNames
+}
+

package/src/client/indexHtml.js

@@ -14,18 +14,10 @@ export const IndexHtml = hotReloadEnabled => `
 <head>
   <meta charset="UTF-8">
   <base href="${API.dashboard}/">
-  
-  <link rel="stylesheet" href="styles.css">
+
   <script type="module" src="app.js"></script>
-  
   <link rel="preload" href="${API.state}" as="fetch" crossorigin>
   
-  <link rel="modulepreload" href="ApiConstants.js">
-  <link rel="modulepreload" href="ApiCommander.js">
-  <link rel="modulepreload" href="Filename.js">
-  <link rel="modulepreload" href="app-store.js">
-  <link rel="modulepreload" href="dom-utils.js">
-  
   <link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="HTTP Mock Server">

package/src/client/styles.css

@@ -5,6 +5,7 @@
 
 @media (prefers-color-scheme: light) {
 	:root {
+		color-scheme: light;
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0b61ec;
 		--colorBackground: #fff;
@@ -27,6 +28,7 @@
 }
 @media (prefers-color-scheme: dark) {
 	:root {
+		color-scheme: dark;
 		--color4xxBackground: #68554a;
 		--colorAccent: #2495ff;
 		--colorBackground: #181818;
@@ -52,9 +54,6 @@ html,
 body {
 	overflow: hidden;
 	height: 100%;
-	padding: 0;
-	margin: 0;
-	background: var(--colorHeaderBackground);
 	font-size: 12px;
 }
 body {
@@ -72,7 +71,6 @@ body {
 	margin: 0;
 	font-family: inherit;
 	font-size: 100%;
-	outline: 0;
 	scrollbar-width: thin;
 }
 
@@ -88,6 +86,7 @@ a,
 select,
 button,
 input[type=checkbox] {
+	outline: 0;
 	cursor: pointer;
 }
 
@@ -100,6 +99,11 @@ input[type=checkbox]:active {
 
 a {
 	text-decoration: none;
+	color: var(--colorAccent);
+}
+
+input[type="number"]:not(:focus) {
+	-moz-appearance: textfield;
 }
 
 select {
@@ -128,7 +132,7 @@ select {
 
 header {
 	display: flex;
-	width: 100vw;
+	flex: 0 0 100%;
 	padding: 16px;
 	border-bottom: 1px solid var(--colorSecondaryActionBorder);
 	background: var(--colorHeaderBackground);
@@ -143,6 +147,10 @@ header {
 			pointer-events: none;
 			fill: var(--colorText);
 		}
+
+		@media (max-width: 830px) {
+			display: none;
+		}
 	}
 
 	> div {
@@ -151,16 +159,11 @@ header {
 		flex-wrap: wrap;
 		align-items: flex-end;
 		gap: 16px 8px;
-	}
 
-	@media (max-width: 830px) {
-		.Logo {
-			display: none;
-		}
-	}
-	@media (max-width: 690px) {
-		> div .MenuTrigger {
-			margin-left: unset;
+		@media (max-width: 690px) {
+			.MenuTrigger {
+				margin-left: unset;
+			}
 		}
 	}
 
@@ -194,11 +197,6 @@ header {
 			border-radius: var(--radius);
 		}
 
-		select:enabled:hover {
-			border-color: var(--colorSecondaryActionBorder);
-			background: var(--colorHover);
-		}
-
 		&.GlobalDelayField {
 			position: relative;
 			width: 76px;
@@ -263,8 +261,12 @@ header {
 				input:enabled + .checkboxBody {
 					cursor: pointer;
 				}
+				input:disabled {
+					cursor: not-allowed;
+				}
 				input:disabled + .checkboxBody {
 					opacity: 0.8;
+					cursor: not-allowed;
 				}
 			}
 		}
@@ -329,10 +331,6 @@ header {
 		gap: 12px;
 		text-align: left;
 
-		a {
-			color: var(--colorAccent);
-		}
-
 		.GroupByMethod {
 			display: flex;
 			align-items: center;
@@ -356,10 +354,9 @@ main {
 		}
 
 		.leftSide {
-			min-width: 100%;
-			min-height: 50%;
-			max-height: 50%;
-			border: 0;
+			width: 100% !important;
+			height: 50%;
+			border-right: 0;
 		}
 	}
 
@@ -430,7 +427,6 @@ main {
 		}
 	}
 }
-
 @keyframes _kfRowIn {
 	to {
 		opacity: 1;
@@ -459,7 +455,6 @@ main {
 	padding: 6px 8px;
 	margin-left: 4px;
 	border-radius: var(--radius);
-	color: var(--colorAccent);
 	word-break: break-word;
 
 
@@ -651,9 +646,7 @@ main {
 
 
 .PayloadViewer {
-	display: flex;
 	height: 100%;
-	flex-direction: column;
 	padding-top: 16px;
 
 	> h2 {
@@ -750,7 +743,6 @@ main {
 		background: rgba(0, 0, 0, 0.5);
 	}
 }
-
 @keyframes _kfToastIn {
 	to {
 		opacity: 1;

package/src/client/watcherDev.js

@@ -10,7 +10,7 @@ async function longPollDevChanges() {
 
 		const file = await response.json() || ''
 		if (file.endsWith('.css')) {
-			hotReloadCSS(file)
+			await hotReloadCSS(file)
 			longPollDevChanges()
 		}
 		else if (file)
@@ -24,10 +24,7 @@ async function longPollDevChanges() {
 	}
 }
 
-function hotReloadCSS(file) {
-	const link = document.querySelector(`link[href*="${file}"]`)
-	if (link) {
-		const [url] = link.href.split('?')
-		link.href = url + '?' + Date.now()
-	}
+async function hotReloadCSS(file) {
+	const mod = await import(`./${file}?${Date.now()}`, { with: { type: 'css' } })
+	document.adoptedStyleSheets = [mod.default]
 }