mockaton 13.3.5 → 13.4.0

package/README.md

@@ -10,6 +10,26 @@ for testing difficult to reproduce backend states.
 
 ## [Documentation ↗](https://mockaton.com) | [Changelog ↗](https://mockaton.com/changelog)
 
+## TL;DR
+```shell
+npx mockaton my-mocks-dir
+```
+
+It’s like `servedir`, but supports dynamic segments in filenames. For example:
+
+**Route**: [/api/company/123](#) <br/>
+**File**: my-mocks-dir/api/company/[id].GET.200.json
+
+Statics assets don’t need that extension:
+
+**Route**: [/media/avatar.png](#) <br/>
+**File**: my-mocks-dir/media/avatar.png
+
+
+## Dashboard
+Besides the dashboard, there’s a programmatic [Control API](https://mockaton.com/api).
+Also, there’s a [Browser Extension](https://mockaton.com/scraping) for scraping responses from your backend.
+
 <picture>
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.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.vp762x762.dark.gold.png">
@@ -36,12 +56,8 @@ curl localhost:2020/api/user
 ```
 
 
-## Overview
-With Mockaton, you don’t need to write code for wiring up your
-mocks. Instead, a given directory is scanned for filenames
-following a convention similar to the URLs.
-
-For example, for [/api/company/123](#), the file could be:
+## Examples
+[/api/company/123](#)
 
 <code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.json</code>
 ```json
@@ -50,6 +66,8 @@ For example, for [/api/company/123](#), the file could be:
 }
 ```
 
+<br/>
+
 Or, you can write it in TypeScript (it will be sent as JSON).
 
 <code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.ts</code>
@@ -59,15 +77,17 @@ export default {
 }
 ```
 
+<br/>
+
 Similarly, you can handle logic with [Functional Mocks](https://mockaton.com/functional-mocks):
 
 <code>my_mocks_dir/<b>api/company/[companyId]/user/[userId]</b>.GET.200.ts</code>
 ```ts
 import { IncomingMessage, OutgoingMessage } from 'node:http'
-import { parseSplats } from 'mockaton'
+import { parseSegments } from 'mockaton'
 
 export default async function (req: IncomingMessage, response: OutgoingMessage) {
-  const { companyId, userId } = parseSplats(req.url, import.meta.filename)
+  const { companyId, userId } = parseSegments(req.url, import.meta.filename)
   const foo = await getFoo()
   return JSON.stringify({
     foo,
@@ -77,11 +97,3 @@ export default async function (req: IncomingMessage, response: OutgoingMessage)
   })
 }
 ```
-
-## Browser Extension
-[Browser Extension](https://mockaton.com/scraping) for scraping responses from your backend.
-
-
-## API
-Programmatic [Control API](https://mockaton.com/api).
-

package/index.d.ts

@@ -62,7 +62,7 @@ export const echoFilePlugin: Plugin
 export function jwtCookie(cookieName: string, payload: any, path?: string): string
 
 export function parseJSON(request: IncomingMessage): Promise<any>
-export function parseSplats(reqUrl: string, filename: string): Record<string, string>
+export function parseSegments(reqUrl: string, filename: string): Record<string, string>
 export function parseQueryParams(reqUrl: string): URLSearchParams
 
 export type JsonPromise<T> = Promise<Response & { json(): Promise<T> }>

package/index.js

@@ -5,6 +5,6 @@ export { Mockaton } from './src/server/Mockaton.js'
 export { jwtCookie } from './src/server/utils/jwt.js'
 export { jsToJsonPlugin, echoFilePlugin } from './src/server/MockDispatcherPlugins.js'
 export { parseJSON, BodyReaderError } from './src/server/utils/HttpIncomingMessage.js'
-export { parseSplats, parseQueryParams } from './src/server/utils/UrlParsers.js'
+export { parseSegments, parseQueryParams, parseSplats } from './src/server/UrlParsers.js'
 
 export const defineConfig = opts => opts

package/package.json

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

package/src/client/ApiCommander.js

@@ -10,7 +10,7 @@ export class Commander {
 	}
 
 	/** @returns {Promise<Response>} */
-	#patch = (api, body) => fetch(this.addr + api, {
+	#patch = (api, body = undefined) => fetch(this.addr + api, {
 		method: 'PATCH',
 		body: JSON.stringify(body)
 	})

package/src/client/ApiConstants.js

@@ -25,9 +25,9 @@ export const API = {
 	deleteMock: MOUNT + '/delete-mock',
 }
 
-export const HEADER_502 = 'Mockaton502'
-
 export const DEFAULT_MOCK_COMMENT = '(default)'
 
 export const EXT_UNKNOWN_MIME = 'unknown'
 export const EXT_EMPTY = 'empty'
+
+export const FILENAME_HEADER = 'Mockaton-File'

package/src/client/IndexHtml.js

@@ -7,24 +7,24 @@ export const CSP = [
 
 // language=html
 export const IndexHtml = (hotReloadEnabled, version) => `
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-	<meta charset="UTF-8">
-	<base href="${API.dashboard}/">
+	<!DOCTYPE html>
+	<html lang="en-US">
+	<head>
+		<meta charset="UTF-8">
+		<base href="${API.dashboard}/">
 
-	<script type="module" src="app.js"></script>
-	<link rel="preload" href="${API.state}" as="fetch" crossorigin>
+		<script type="module" src="app.js"></script>
+		<link rel="preload" href="${API.state}" as="fetch" crossorigin>
 
-	<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 v${version}</title>
-</head>
-<body>
-${hotReloadEnabled
-	? '<script type="module" src="watcherDev.js"></script>'
-	: ''}
-</body>
-</html>
+		<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 v${version}</title>
+	</head>
+	<body>
+	${hotReloadEnabled
+		? `<script type="module" src="utils/watcherDev.js?url=${API.watchHotReload}"></script>`
+		: ''}
+	</body>
+	</html>
 `

package/src/client/app-header.js

@@ -1,12 +1,12 @@
-import { createElement as r, t, extractClassNames } from './dom-utils.js'
+import { createElement as r, t } from './utils/dom.js'
 import { Logo, HelpIcon } from './graphics.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-
-
+import { extractClassNames } from './utils/css.js'
 Object.assign(CSS, extractClassNames(CSS))
 
+
 export function Header() {
 	return (
 		r('header', null,

package/src/client/app-payload-viewer.js

@@ -1,13 +1,12 @@
-import { createElement as r, t, extractClassNames } from './dom-utils.js'
-import { HEADER_502 } from './ApiConstants.js'
+import { createElement as r, t } from './utils/dom.js'
 import { parseFilename } from './Filename.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-
-
+import { extractClassNames } from './utils/css.js'
 Object.assign(CSS, extractClassNames(CSS))
 
+
 const titleRef = {}
 const codeRef = {}
 
@@ -42,12 +41,9 @@ function PayloadViewerTitle(file, statusText) {
 
 function PayloadViewerTitleWhenProxied(response) {
 	const mime = response.headers.get('content-type') || ''
-	const badGateway = response.headers.get(HEADER_502)
 	return (
 		r('span', null,
-			badGateway
-				? r('span', null, t`⛔ Fallback Backend Error` + ' ')
-				: r('span', null, t`Got` + ' '),
+			r('span', null, t`Got` + ' '),
 			r('abbr', { title: response.statusText }, response.status),
 			' ' + mime))
 }

package/src/client/app-store.js

@@ -1,7 +1,8 @@
 import { Commander } from './ApiCommander.js'
-import { dittoSplitPaths, groupByFolder } from './dir-tree.js'
+import { groupByFolder } from './dir/groupByFolder.js'
+import { dittoSplitPaths } from './dir/dittoSplitPaths.js'
 import { parseFilename, extractComments } from './Filename.js'
-import { QueryParamBool, LocalStorageSet } from './dom-utils.js'
+import { LocalStorageSet, QueryParamBool } from './utils/LocalStorage.js'
 import { EXT_UNKNOWN_MIME, EXT_EMPTY } from './ApiConstants.js'
 
 
@@ -205,38 +206,6 @@ export const store = {
 	}
 }
 
-// When false, the URL will be updated with param=false
-function initPreference(param) {
-	const qs = new URLSearchParams(globalThis.location?.search)
-	if (!qs.has(param)) {
-		const group = globalThis.localStorage?.getItem(param) !== '0'
-		if (!group) {
-			const url = new URL(globalThis.location?.href)
-			url.searchParams.set(param, '0')
-			history.replaceState(null, '', url)
-		}
-		return group
-	}
-	return qs.get(param) !== '0'
-}
-
-// When false, the URL and localStorage will have param='0'
-function togglePreference(param, nextVal) {
-	if (nextVal)
-		globalThis.localStorage?.removeItem(param)
-	else
-		globalThis.localStorage?.setItem(param, nextVal)
-
-	const url = new URL(location.href)
-	if (nextVal)
-		url.searchParams.delete(param)
-	else
-		url.searchParams.set(param, '0')
-	history.replaceState(null, '', url)
-}
-
-
-
 export class BrokerRowModel {
 	opts = /** @type {[key:string, label:string, selected:boolean][]} */ []
 	isNew = false

package/src/client/app.js

@@ -1,4 +1,4 @@
-import { createElement as r, t, restoreFocus, Fragment, classNames, extractClassNames } from './dom-utils.js'
+import { createElement as r, t, restoreFocus, Fragment } from './utils/dom.js'
 
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
@@ -7,10 +7,11 @@ import { PayloadViewer, previewMock } from './app-payload-viewer.js'
 import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
 
 import CSS from './app.css' with { type: 'css' }
+import { extractClassNames, classNames } from './utils/css.js'
 document.adoptedStyleSheets.push(CSS)
-
 Object.assign(CSS, extractClassNames(CSS))
 
+
 store.onError = onError
 store.render = render
 store.renderRow = renderRow

package/src/client/dir/dittoSplitPaths.js

@@ -0,0 +1,25 @@
+/**
+ * Think of this as a way of printing a directory tree in which
+ * the repeated folder paths are kept but styled differently.
+ * @param {string[]} paths - sorted
+ */
+export function dittoSplitPaths(paths) {
+	const pParts = paths.map(p => p.split('/').filter(Boolean))
+	return paths.map((p, i) => {
+		if (i === 0)
+			return ['', p]
+
+		const prev = pParts[i - 1]
+		const curr = pParts[i]
+		const min = Math.min(curr.length, prev.length)
+		let j = 0
+		while (j < min && curr[j] === prev[j])
+			j++
+
+		if (!j) // no common dirs
+			return ['', p]
+
+		const ditto = '/' + curr.slice(0, j).join('/') + '/'
+		return [ditto, p.slice(ditto.length)]
+	})
+}

package/src/client/dir/dittoSplitPaths.test.js

@@ -0,0 +1,28 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { dittoSplitPaths } from './dittoSplitPaths.js'
+
+
+test('dittoSplitPaths', () => {
+	const input = [
+		'/api/user',
+		'/api/user/avatar',
+		'/api/user/friends',
+		'/api/vid',
+		'/api/video/id',
+		'/api/video/stats',
+		'/v2/foo',
+		'/v2/foo/bar'
+	]
+	deepEqual(dittoSplitPaths(input), [
+		['', '/api/user'],
+		['/api/user/', 'avatar'],
+		['/api/user/', 'friends'],
+		['/api/', 'vid'],
+		['/api/', 'video/id'],
+		['/api/video/', 'stats'],
+		['', '/v2/foo'],
+		['/v2/foo/', 'bar']
+	])
+})
+

package/src/client/{dir-tree.js → dir/groupByFolder.js}

@@ -1,31 +1,3 @@
-/**
- * Think of this as a way of printing a directory tree in which
- * the repeated folder paths are kept but styled differently.
- * @param {string[]} paths - sorted
- */
-export function dittoSplitPaths(paths) {
-	const pParts = paths.map(p => p.split('/').filter(Boolean))
-	return paths.map((p, i) => {
-		if (i === 0)
-			return ['', p]
-
-		const prev = pParts[i - 1]
-		const curr = pParts[i]
-		const min = Math.min(curr.length, prev.length)
-		let j = 0
-		while (j < min && curr[j] === prev[j])
-			j++
-
-		if (!j) // no common dirs
-			return ['', p]
-
-		const ditto = '/' + curr.slice(0, j).join('/') + '/'
-		return [ditto, p.slice(ditto.length)]
-	})
-}
-
-
-
 /**
  * @param {Partial<BrokerRowModel>[]} brokers
  * @returns {Partial<BrokerRowModel>[]}
@@ -49,11 +21,8 @@ function trie(brokers) {
 }
 
 class TrieNode {
-	#children
-	constructor() {
-		this.brokers = []
-		this.#children = new Map()
-	}
+	#children = new Map()
+	brokers = []
 	addChild(k, v) { this.#children.set(k, v) }
 	getChild(k) { return this.#children.get(k) }
 	getChildren() { return this.#children.values() }

package/src/client/{dir-tree.test.js → dir/groupByFolder.test.js}

@@ -1,33 +1,9 @@
 import { test } from 'node:test'
 import { deepEqual } from 'node:assert/strict'
-import { groupByFolder, dittoSplitPaths } from './dir-tree.js'
+import { groupByFolder } from './groupByFolder.js'
 
 
-test('dittoSplitPaths', () => {
-	const input = [
-		'/api/user',
-		'/api/user/avatar',
-		'/api/user/friends',
-		'/api/vid',
-		'/api/video/id',
-		'/api/video/stats',
-		'/v2/foo',
-		'/v2/foo/bar'
-	]
-	deepEqual(dittoSplitPaths(input), [
-		['', '/api/user'],
-		['/api/user/', 'avatar'],
-		['/api/user/', 'friends'],
-		['/api/', 'vid'],
-		['/api/', 'video/id'],
-		['/api/video/', 'stats'],
-		['', '/v2/foo'],
-		['/v2/foo/', 'bar']
-	])
-})
-
-
-test('dirStructure', () => {
+test('groupByFolder', () => {
 	const input = [
 		{ children: [], method: 'GET', urlMask: '/api/user' },
 		{ children: [], method: 'GET', urlMask: '/api/user/avatar' },

package/src/client/graphics.js

@@ -1,10 +1,10 @@
-import { createSvgElement as s } from './dom-utils.js'
+import { createSvgElement as s } from './utils/dom.js'
 
 
 export const Logo = () =>
 	s('svg', { viewBox: '0 0 556 100' },
 		s('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' }),
-		s('path', { opacity: 0.85, fill: 'currentColor', 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' }),
+		s('path', { fill: 'currentColor', 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' }),
 		s('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' }))
 
 export const TimerIcon = () =>

package/src/client/utils/LocalStorage.js

@@ -0,0 +1,69 @@
+export class QueryParamBool {
+	constructor(param) {
+		this.param = param
+		this.value = this.#init()
+	}
+
+	#init() {
+		const qs = new URLSearchParams(globalThis.location?.search)
+		if (qs.has(this.param))
+			return qs.get(this.param) !== '0'
+		const stored = globalThis.localStorage?.getItem(this.param) !== '0'
+		if (!stored)
+			this.#applyToUrl(false)
+		return stored
+	}
+
+	toggle() {
+		this.value = !this.value
+		if (this.value)
+			globalThis.localStorage?.removeItem(this.param)
+		else
+			globalThis.localStorage?.setItem(this.param, '0')
+		this.#applyToUrl(this.value)
+	}
+
+	#applyToUrl(nextVal) {
+		const url = new URL(globalThis.location?.href)
+		if (nextVal)
+			url.searchParams.delete(this.param)
+		else
+			url.searchParams.set(this.param, '0')
+		history.replaceState(null, '', url)
+	}
+}
+
+
+export class LocalStorageSet {
+	constructor(key) {
+		this.key = key
+		this.value = this.#parse()
+	}
+
+	add(item) {
+		this.value.add(item)
+		this.#persist()
+	}
+
+	delete(item) {
+		this.value.delete(item)
+		this.#persist()
+	}
+
+	has(item) {
+		return this.value.has(item)
+	}
+
+	#parse() {
+		try {
+			return new Set(JSON.parse(globalThis.localStorage?.getItem(this.key) || '[]'))
+		}
+		catch {
+			return new Set()
+		}
+	}
+
+	#persist() {
+		globalThis.localStorage?.setItem(this.key, JSON.stringify([...this.value]))
+	}
+}

package/src/client/utils/css.js

@@ -0,0 +1,16 @@
+export function classNames(...args) {
+	return args.filter(Boolean).join(' ')
+}
+
+
+export function extractClassNames({ cssRules }) {
+	// Class names must begin with _ or a letter, then it can have numbers and hyphens
+	// TODO think about tag.className selectors
+	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/{dom-utils-test.js → utils/css.test.js}

@@ -1,6 +1,6 @@
 import { test } from 'node:test'
 import { deepEqual, equal } from 'node:assert/strict'
-import { classNames, extractClassNames } from './dom-utils.js'
+import { extractClassNames, classNames } from './css.js'
 
 
 test('classNames', () => equal(classNames('a', false && 'b'), 'a'))

package/src/client/utils/dom.js

@@ -0,0 +1,68 @@
+export function t(translation) {
+	return translation[0]
+}
+
+
+export function createElement(tag, props, ...children) {
+	const elem = document.createElement(tag)
+	if (props)
+		for (const [k, v] of Object.entries(props))
+			if (v === undefined) continue
+			else if (k === 'ref') v.elem = elem
+			else if (k === 'style') Object.assign(elem.style, v)
+			else if (k.startsWith('on')) elem.addEventListener(k.slice(2).toLowerCase(), ...[v].flat())
+			else if (k in elem) elem[k] = v
+			else elem.setAttribute(k, v)
+	elem.append(...children.flat().filter(Boolean))
+	return elem
+}
+
+
+export function createSvgElement(tag, props, ...children) {
+	const elem = document.createElementNS('http://www.w3.org/2000/svg', tag)
+	for (const [k, v] of Object.entries(props))
+		elem.setAttribute(k, v)
+	elem.append(...children.flat().filter(Boolean))
+	return elem
+}
+
+
+export function Fragment(...args) {
+	const frag = new DocumentFragment()
+	for (const arg of args)
+		if (Array.isArray(arg))
+			frag.append(...arg)
+		else
+			frag.appendChild(arg)
+	return frag
+}
+
+
+export function restoreFocus(cb) {
+	const focusQuery = selectorFor(document.activeElement)
+	cb()
+	if (focusQuery)
+		document.querySelector(focusQuery)?.focus()
+}
+function selectorFor(elem) {
+	if (!(elem instanceof Element))
+		return
+	const path = []
+	while (elem) {
+		let qualifier = ''
+		if (elem.hasAttribute('key'))
+			qualifier = `[key="${elem.getAttribute('key')}"]`
+		else {
+			let i = 0
+			let sib = elem
+			while ((sib = sib.previousElementSibling))
+				if (sib.tagName === elem.tagName)
+					i++
+			if (i)
+				qualifier = `:nth-of-type(${i + 1})`
+		}
+		path.push(elem.tagName + qualifier)
+		elem = elem.parentElement
+	}
+	return path.reverse().join('>')
+}

package/src/client/utils/watcherDev.js

@@ -0,0 +1,46 @@
+const url = new URL(import.meta.url).searchParams.get('url')
+
+if (!url)
+	console.warn('Missing ?url=')
+else
+	init()
+
+function init() {
+	let conn = null
+	let timer = null
+
+	connect()
+	window.addEventListener('beforeunload', teardown)
+
+	function connect() {
+		if (conn) return
+
+		clearTimeout(timer)
+		conn = new EventSource(url)
+
+		conn.onmessage = function (event) {
+			const file = event.data
+			if (file.endsWith('.css'))
+				hotReloadCSS(file)
+			else if (file)
+				location.reload()
+		}
+
+		conn.onerror = function () {
+			console.error('hot reload')
+			teardown()
+			timer = setTimeout(connect, 3000)
+		}
+	}
+
+	function teardown() {
+		clearTimeout(timer)
+		conn?.close()
+		conn = null
+	}
+
+	async function hotReloadCSS(file) {
+		const mod = await import(`${document.baseURI}${file}?${Date.now()}`, { with: { type: 'css' } })
+		document.adoptedStyleSheets = [mod.default]
+	}
+}