mockaton 8.17.0 → 8.18.1

package/README.md

@@ -550,7 +550,7 @@ Defaults to `true`. When `true`, these are the default options:
 ```js
 config.corsOrigins = ['*']
 config.corsMethods = require('node:http').METHODS
-config.corsHeaders = ['content-type']
+config.corsHeaders = ['content-type', 'authorization']
 config.corsCredentials = true
 config.corsMaxAge = 0 // seconds to cache the preflight req
 config.corsExposedHeaders = [] // headers you need to access in client-side JS

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.17.0",
+	"version": "8.18.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -26,5 +26,10 @@
 		"open": "^10.0.0",
 		"pixaton": ">=1.1.1",
 		"puppeteer": ">=24.1.1"
+	},
+	"dependencies": {
+		"@vitejs/plugin-react": "5.0.1",
+		"mockaton": "8.18.0",
+		"vite": "7.1.3"
 	}
 }

package/src/Dashboard.css

@@ -7,7 +7,6 @@
 	:root {
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0068c1;
-		--colorAccentAlt: #068185;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #eee;
@@ -124,14 +123,13 @@ header {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: flex-end;
-		gap: 10px;
+		gap: 16px 10px;
 
-		@media (max-width: 860px) {
-			max-width: 500px;
+		@media (max-width: 890px) {
+			max-width: 400px;
 		}
 	}
 
-
 	img {
 		width: 130px;
 		align-self: center;
@@ -233,6 +231,21 @@ header {
 			color: white;
 		}
 	}
+
+	.Help {
+		min-width: 24px;
+		align-self: center;
+		margin-left: auto;
+		fill: var(--colorSecondaryAction);
+
+		&:hover {
+			fill: var(--colorAccent);
+		}
+
+		@media (max-width: 590px) {
+			display: none;
+		}
+	}
 }
 
 
@@ -476,7 +489,8 @@ table {
 .StaticFilesList {
 	a {
 		display: inline-block;
-		padding: 6px 0;
+		padding: 8px 0;
+		margin-left: 4px;
 		border-radius: var(--radius);
 		color: var(--colorAccent);
 		text-decoration: none;
@@ -506,11 +520,12 @@ table {
 
 .SpinnerClock {
 	display: flex;
-	width: 48px;
-	margin-top: 6px;
+	width: 64px;
+	margin: auto;
+	margin-top: 64px;
 	fill: none;
 	stroke: var(--colorSecondaryAction);
-	stroke-width: 2px;
+	stroke-width: 1px;
 
 	.HourHand,
 	.MinuteHand {
@@ -519,7 +534,7 @@ table {
 		animation: _kfRotate 9s linear infinite
 	}
 	.MinuteHand {
-		animation-duration: .75s;
+		animation-duration: 1s;
 	}
 }
 @keyframes _kfRotate {

package/src/Dashboard.js

@@ -22,6 +22,7 @@ const Strings = {
 	fallback_server: 'Fallback Backend',
 	fallback_server_error: '⛔ Fallback Backend Error',
 	fallback_server_placeholder: 'Type Server Address',
+	fetching: 'Fetching…',
 	got: 'Got',
 	internal_server_error: 'Internal Server Error',
 	no_mocks_found: 'No mocks found',
@@ -32,7 +33,7 @@ const Strings = {
 	proxy_toggler: 'Proxy Toggler',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
-	static_get: 'Static GET',
+	static_get: 'Static Folder GET',
 	title: 'Mockaton'
 }
 
@@ -43,6 +44,7 @@ const CSS = {
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
 	GlobalDelayField: 'GlobalDelayField',
+	Help: 'Help',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
 	MainLeftSide: 'leftSide',
 	MainRightSide: 'rightSide',
@@ -115,7 +117,13 @@ function Header({ cookies, comments, delay, fallbackAddress, collectProxied }) {
 				r(BulkSelector, { comments }),
 				r(GlobalDelayField, { delay }),
 				r(ProxyFallbackField, { fallbackAddress, collectProxied }),
-				r(ResetButton))))
+				r(ResetButton)),
+			r('a', {
+				className: CSS.Help,
+				href: 'https://github.com/ericfortis/mockaton',
+				target: '_blank',
+				rel: 'noopener noreferrer'
+			}, r(HelpIcon))))
 }
 
 function Logo() {
@@ -535,7 +543,8 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 }
 
 async function previewMock(method, urlMask, href) {
-	const timer = setTimeout(renderSpinner, 180)
+	const timer = setTimeout(renderSpinner, 80)
+	payloadViewerTitleRef.current.replaceChildren(r('span', null, Strings.fetching))
 	const response = await fetch(href, { method })
 	clearTimeout(timer)
 	await updatePayloadViewer(method, urlMask, response)
@@ -627,6 +636,11 @@ function CloudIcon() {
 			s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })))
 }
 
+function HelpIcon() {
+	return (
+		s('svg', { viewBox: '0 0 24 24' },
+			s('path', { d: 'M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4' })))
+}
 
 /**
  * # Poll UI Sync Version

package/src/Filename.js

@@ -47,10 +47,10 @@ function validateFilename(file) {
 export function parseFilename(file) {
 	const tokens = file.replace(reComments, '').split('.')
 	return {
-		urlMask: '/' + removeTrailingSlash(tokens.slice(0, -3).join('.')),
-		method: tokens.at(-3),
-		status: Number(tokens.at(-2)),
-		ext: tokens.at(-1)
+		ext: tokens.pop(),
+		status: Number(tokens.pop()),
+		method: tokens.pop(),
+		urlMask: '/' + removeTrailingSlash(tokens.join('.'))
 	}
 }
 

package/src/config.js

@@ -42,7 +42,7 @@ const schema = {
 	corsAllowed: [true, is(Boolean)],
 	corsOrigins: [['*'], validateCorsAllowedOrigins],
 	corsMethods: [SUPPORTED_METHODS, validateCorsAllowedMethods],
-	corsHeaders: [['content-type'], Array.isArray],
+	corsHeaders: [['content-type', 'authorization'], Array.isArray],
 	corsExposedHeaders: [[], Array.isArray],
 	corsCredentials: [true, is(Boolean)],
 	corsMaxAge: [0, is(Number)],
@@ -61,7 +61,7 @@ for (const [k, [defaultVal, validator]] of Object.entries(schema)) {
 /** @type {Config} */
 export const config = Object.seal(defaults)
 
-/** @type {Record<keyof Config, (val: unknown) => boolean>} */
+/** @type {Record<keyof Config, (val: unknown) => val is Config[keyof Config]>} */
 export const ConfigValidator = Object.freeze(validators)