mockaton 10.5.0 → 10.5.2

package/package.json

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

package/src/Api.js

@@ -4,26 +4,21 @@
  */
 
 import { join } from 'node:path'
+
 import { cookie } from './cookie.js'
 import { parseJSON } from './utils/http-request.js'
 import { uiSyncVersion } from './Watcher.js'
 import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
+import { LinkHeader, DashboardHtml, CSP, dashboardAssets } from './DashboardHtml.js'
 import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
-import { sendOK, sendJSON, sendUnprocessableContent, sendFile } from './utils/http-response.js'
+import { sendOK, sendJSON, sendUnprocessableContent, sendFile, sendHTML } from './utils/http-response.js'
 
 
 export const apiGetRequests = new Map([
-	[API.dashboard, serveDashboardAsset('Dashboard.html')],
-	...[
-		'/ApiConstants.js',
-		'/ApiCommander.js',
-		'/Dashboard.css',
-		'/Dashboard.js',
-		'/Filename.js',
-		'/Logo.svg'
-	].map(f => [API.dashboard + f, serveDashboardAsset(f)]),
+	[API.dashboard, serveDashboard],
+	...dashboardAssets.map(f => [API.dashboard + f, serveStatic(f)]),
 
 	[API.state, getState],
 	[API.syncVersion, longPollClientSyncVersion],
@@ -49,12 +44,12 @@ export const apiPatchRequests = new Map([
 
 /** # GET */
 
-function serveDashboardAsset(f) {
-	return (_, response) => {
-		if (f.endsWith('.html'))
-			response.setHeader('Content-Security-Policy', `default-src 'self'; img-src data: blob: 'self'`)
-		sendFile(response, join(import.meta.dirname, f))
-	}
+function serveDashboard(_, response) {
+	sendHTML(response, DashboardHtml, CSP, LinkHeader)
+}
+
+function serveStatic(f) {
+	return (_, response) => sendFile(response, join(import.meta.dirname, f))
 }
 
 function getState(_, response) {

package/src/Dashboard.css

@@ -149,7 +149,6 @@ header {
 	background: var(--colorHeaderBackground);
 
 	> img {
-		width: 120px;
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 5px;

package/src/Dashboard.js

@@ -76,7 +76,7 @@ const state = /** @type {State} */ {
 
 const mockaton = new Commander(location.origin)
 updateState()
-initLongPoll()
+deferred(initLongPoll)
 
 async function updateState() {
 	try {
@@ -93,7 +93,6 @@ async function updateState() {
 
 const r = createElement
 const s = createSvgElement
-
 const t = translation => translation[0]
 
 const leftSideRef = useRef()
@@ -124,7 +123,8 @@ function Header() {
 			r('img', {
 				alt: t`Mockaton`,
 				src: 'mockaton/Logo.svg',
-				width: 160
+				width: 120,
+				height: 22
 			}),
 			r('div', null,
 				GlobalDelayField(),
@@ -645,6 +645,7 @@ Resizer.onUp = function () {
 
 const payloadViewerTitleRef = useRef()
 const payloadViewerRef = useRef()
+const SPINNER_DELAY = 80
 
 function PayloadViewer() {
 	return (
@@ -657,7 +658,7 @@ function PayloadViewer() {
 function PayloadViewerProgressBar() {
 	return (
 		r('div', className(CSS.ProgressBar),
-			r('div', { style: { animationDuration: state.delay + 'ms' } })))
+			r('div', { style: { animationDuration: state.delay - SPINNER_DELAY + 'ms' } })))
 }
 
 function PayloadViewerTitle({ file, statusText }) {
@@ -689,7 +690,7 @@ async function previewMock(method, urlMask, href) {
 	const spinnerTimer = setTimeout(() => {
 		payloadViewerTitleRef.current.replaceChildren(t`Fetching…`)
 		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
-	}, 80)
+	}, SPINNER_DELAY)
 
 	try {
 		const response = await fetch(href, {
@@ -970,7 +971,7 @@ function dittoSplitPaths(paths) {
 	return result
 }
 
-(function testDittoSplitPaths() {
+dittoSplitPaths.test = function () {
 	const input = [
 		'/api/user',
 		'/api/user/avatar',
@@ -992,7 +993,7 @@ function dittoSplitPaths(paths) {
 		['/v2/foo/', 'bar']
 	]
 	console.assert(JSON.stringify(dittoSplitPaths(input)) === JSON.stringify(expected))
-}())
+}
 
 
 

package/src/{Dashboard.html → DashboardHtml.js}

@@ -1,14 +1,51 @@
-<!DOCTYPE html>
+import { API } from './ApiConstants.js'
+
+
+export const DashboardHtml = `<!DOCTYPE html>
 <html lang="en-US">
 <head>
 	<meta charset="UTF-8">
-	<link rel="stylesheet" href="./mockaton/Dashboard.css">
+	<link rel="stylesheet" href="./mockaton/Dashboard.css" />
 	<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">
 	<title>Mockaton</title>
 </head>
 <body>
-<script src="./mockaton/Dashboard.js" type="module"></script>
+<script type="module" src="./mockaton/Dashboard.js"></script>
 </body>
 </html>
+`
+
+export const CSP = [
+	`default-src 'self'`,
+	`img-src data: blob: 'self'`
+].join(';')
+
+
+const assets = {
+	style: ['/Dashboard.css'],
+	script: ['/Dashboard.js'],
+	module: ['/ApiConstants.js', '/ApiCommander.js', '/Filename.js'],
+	image: ['/Logo.svg']
+}
+
+export const dashboardAssets = Object.values(assets).flat()
+
+
+// Link Header. This is not very useful in localhost (only optimizes 2ms).
+const attrMap = {
+	module: 'rel=modulepreload',
+	image: 'rel=preload; as=image',
+	style: 'rel=preload; as=style',
+	script: 'rel=preload; as=script; crossorigin',
+	fetch: 'rel=preload; as=fetch; crossorigin'
+}
+
+let links = []
+for (const [type, files] of Object.entries(assets))
+	for (const f of files)
+		links.push(`<${API.dashboard + f}>; ${attrMap[type]}`)
+links.push(`<${API.state}>; ${attrMap.fetch}`)
+
+export const LinkHeader = links.join(',')

package/src/utils/http-response.js

@@ -9,6 +9,14 @@ export function sendOK(response) {
 	response.end()
 }
 
+export function sendHTML(response, html, csp, link) {
+	logger.access(response)
+	response.setHeader('Content-Type', mimeFor('html'))
+	response.setHeader('Content-Security-Policy', csp)
+	response.setHeader('Link', link)
+	response.end(html)
+}
+
 export function sendJSON(response, payload) {
 	logger.access(response)
 	response.setHeader('Content-Type', 'application/json')