mockaton 12.6.1 → 12.7.1

package/src/client/app.js

@@ -1,10 +1,13 @@
 import {
 	createElement as r,
-	createSvgElement as s,
 	t, classNames, restoreFocus, Fragment, defineClassNames
 } from './dom-utils.js'
+
 import { store } from './app-store.js'
-import { PayloadViewer, previewMock } from './payload-viewer.js'
+import { API } from './ApiConstants.js'
+import { Header } from './app-header.js'
+import { TimerIcon, CloudIcon } from './app-icons.js'
+import { PayloadViewer, previewMock } from './app-payload-viewer.js'
 
 import CSS from './app.css' with { type: 'css' }
 document.adoptedStyleSheets.push(CSS)
@@ -15,14 +18,12 @@ store.onError = onError
 store.render = render
 store.renderRow = renderRow
 
-initRealTimeUpdates()
+onRealTimeUpdate(store.fetchState)
 initKeyboardNavigation()
 
 let mounted = false
 function render() {
-	restoreFocus(() => {
-		document.body.replaceChildren(...App())
-	})
+	restoreFocus(() => document.body.replaceChildren(App()))
 	if (store.hasChosenLink)
 		previewMock()
 	mounted = true
@@ -32,183 +33,42 @@ function render() {
 const leftSideRef = {}
 
 function App() {
-	return [
-		Header(),
+	return Fragment(Header(), Main())
+}
+
+
+function Main() {
+	return (
 		r('main', null,
 			r('div', {
 					ref: leftSideRef,
 					style: { width: leftSideRef.width },
 					className: CSS.leftSide
 				},
-				r('div', classNames(CSS.SubToolbar),
+				r('div', { className: CSS.SubToolbar },
 					GroupByMethod(),
 					BulkSelector()),
-				r('div', classNames(CSS.Table),
+				r('div', { className: CSS.Table },
 					MockList(),
 					StaticFilesList())),
 			r('div', { className: CSS.rightSide },
 				Resizer(leftSideRef),
-				PayloadViewer()))
-	]
-}
-
-function Header() {
-	return (
-		r('header', null,
-			r('a', {
-					className: CSS.Logo,
-					href: 'https://mockaton.com',
-					alt: t`Documentation`
-				},
-				Logo()),
-			r('div', null,
-				r('div', classNames(CSS.GlobalDelayWrap),
-					GlobalDelayField(),
-					GlobalDelayJitterField()),
-				CookieSelector(),
-				store.showProxyField && ProxyFallbackField(),
-				ResetButton(),
-				HelpLink()
-			)))
-}
-
-
-function GlobalDelayField() {
-	function onChange() {
-		store.setGlobalDelay(this.valueAsNumber)
-	}
-	function onWheel(event) {
-		if (event.deltaY > 0)
-			this.stepUp()
-		else
-			this.stepDown()
-		clearTimeout(onWheel.timer)
-		onWheel.timer = setTimeout(onChange.bind(this), 300)
-	}
-	return (
-		r('label', classNames(CSS.Field, CSS.GlobalDelayField),
-			r('span', null, t`Delay (ms)`),
-			r('input', {
-				type: 'number',
-				min: 0,
-				step: 100,
-				autocomplete: 'none',
-				value: store.delay,
-				onChange,
-				onWheel: [onWheel, { passive: true }]
-			})))
-}
-
-function GlobalDelayJitterField() {
-	function onChange() {
-		this.value = this.valueAsNumber.toFixed(0)
-		this.value = Math.max(0, this.valueAsNumber)
-		this.value = Math.min(300, this.valueAsNumber)
-		store.setGlobalDelayJitter(this.valueAsNumber / 100)
-	}
-	function onWheel(event) {
-		if (event.deltaY > 0)
-			this.stepUp()
-		else
-			this.stepDown()
-		clearTimeout(onWheel.timer)
-		onWheel.timer = setTimeout(onChange.bind(this), 300)
-	}
-	return (
-		r('label', classNames(CSS.Field, CSS.GlobalDelayJitterField),
-			r('span', null, t`Max Jitter %`),
-			r('input', {
-				type: 'number',
-				min: 0,
-				max: 300,
-				step: 10,
-				autocomplete: 'none',
-				value: (store.delayJitter * 100).toFixed(0),
-				onChange,
-				onWheel: [onWheel, { passive: true }]
-			})))
-}
-
-
-function CookieSelector() {
-	const { cookies } = store
-	const disabled = cookies.length <= 1
-	const list = cookies.length ? cookies : [[t`None`, true]]
-	return (
-		r('label', classNames(CSS.Field, CSS.CookieSelector),
-			r('span', null, t`Cookie`),
-			r('select', {
-				autocomplete: 'off',
-				disabled,
-				title: disabled
-					? t`No cookies specified in config.cookies`
-					: undefined,
-				onChange() { store.selectCookie(this.value) }
-			}, list.map(([value, selected]) =>
-				r('option', { value, selected }, value)))))
+				PayloadViewer())))
 }
 
 
-function ProxyFallbackField() {
-	const checkboxRef = {}
-	function onChange() {
-		checkboxRef.elem.disabled = !this.validity.valid || !this.value.trim()
-		if (!this.validity.valid)
-			this.reportValidity()
-		else
-			store.setProxyFallback(this.value.trim())
-	}
-	return (
-		r('div', classNames(CSS.Field, CSS.FallbackBackend),
-			r('label', null,
-				r('span', null, t`Fallback`),
-				r('input', {
-					type: 'url',
-					name: 'fallback',
-					placeholder: t`Type backend address`,
-					value: store.proxyFallback,
-					onChange
-				})),
-			SaveProxiedCheckbox(checkboxRef)))
-}
-
-function SaveProxiedCheckbox(ref) {
+function GroupByMethod() {
 	return (
-		r('label', classNames(CSS.SaveProxiedCheckbox),
+		r('label', { className: CSS.GroupByMethod },
 			r('input', {
-				ref,
 				type: 'checkbox',
-				disabled: !store.canProxy,
-				checked: store.collectProxied,
-				onChange() { store.setCollectProxied(this.checked) }
+				checked: store.groupByMethod,
+				onChange: store.toggleGroupByMethod
 			}),
-			r('span', classNames(CSS.checkboxBody), t`Save Mocks`)))
-}
-
-
-function ResetButton() {
-	return (
-		r('button', {
-			className: CSS.ResetButton,
-			onClick: store.reset
-		}, t`Reset`))
-}
-
-
-function HelpLink() {
-	return (
-		r('a', {
-			target: '_blank',
-			href: 'https://mockaton.com',
-			title: t`Documentation`,
-			className: CSS.HelpLink
-		}, HelpIcon()))
+			r('span', { className: CSS.checkboxBody }, t`Group by Method`)))
 }
 
 
-/** # Left Side */
-
-
 function BulkSelector() {
 	const { comments } = store
 	const firstOption = t`Pick Comment…`
@@ -219,7 +79,7 @@ function BulkSelector() {
 	}
 	const disabled = !comments.length
 	return (
-		r('label', classNames(CSS.BulkSelector),
+		r('label', { className: CSS.BulkSelector },
 			r('span', null, t`Bulk Select`),
 			r('select', {
 					autocomplete: 'off',
@@ -232,23 +92,9 @@ function BulkSelector() {
 				r('option', { value: firstOption }, firstOption),
 				r('hr'),
 				comments.map(value => r('option', { value }, value)))))
-	// TODO For a11y, use `menu` instead of `select`
-}
-
-
-function GroupByMethod() {
-	return (
-		r('label', classNames(CSS.GroupByMethod),
-			r('input', {
-				type: 'checkbox',
-				checked: store.groupByMethod,
-				onChange: store.toggleGroupByMethod
-			}),
-			r('span', classNames(CSS.checkboxBody), t`Group by Method`)))
 }
 
 
-/** # MockList */
 
 function MockList() {
 	if (!Object.keys(store.brokersByMethod).length)
@@ -257,7 +103,11 @@ function MockList() {
 	if (store.groupByMethod)
 		return Object.keys(store.brokersByMethod).map(method =>
 			Fragment(
-				r('div', classNames(CSS.TableHeading, store.canProxy && CSS.canProxy), method),
+				r('div', {
+					className: classNames(
+						CSS.TableHeading,
+						store.canProxy && CSS.canProxy)
+				}, method),
 				store.brokersAsRowsByMethod(method).map(Row)))
 
 	return store.brokersAsRowsByMethod('*').map(Row)
@@ -272,7 +122,8 @@ function Row(row, i) {
 	return (
 		r('div', {
 				key: row.key,
-				...classNames(CSS.TableRow,
+				className: classNames(
+					CSS.TableRow,
 					mounted && row.isNew && CSS.animIn)
 			},
 			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
@@ -294,7 +145,7 @@ function Row(row, i) {
 				}
 			}),
 
-			!store.groupByMethod && r('span', classNames(CSS.Method), method),
+			!store.groupByMethod && r('span', { className: CSS.Method }, method),
 
 			PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0),
 
@@ -350,12 +201,14 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 	const [ditto, tail] = urlMaskDittoed
 	return (
 		r('a', {
-			...classNames(CSS.PreviewLink, isChosen && CSS.chosen),
+			className: classNames(
+				CSS.PreviewLink,
+				isChosen && CSS.chosen),
 			href: urlMask,
 			autofocus,
 			onClick
 		}, ditto
-			? [r('span', classNames(CSS.dittoDir), ditto), tail]
+			? [r('span', { className: CSS.dittoDir }, ditto), tail]
 			: tail))
 }
 
@@ -375,7 +228,7 @@ function MockSelector(row) {
 			},
 			'aria-label': t`Mock Selector`,
 			disabled: row.opts.length < 2,
-			...classNames(
+			className: classNames(
 				CSS.MockSelector,
 				row.selectedIdx > 0 && CSS.nonDefault,
 				row.selectedFileIs4xx && CSS.status4xx)
@@ -405,10 +258,11 @@ function StaticFilesList() {
 	return !rows.length
 		? null
 		: Fragment(
-			r('div',
-				classNames(CSS.TableHeading,
-					store.canProxy && CSS.canProxy,
-					!store.groupByMethod && CSS.nonGroupedByMethod),
+			r('div', {
+					className: classNames(CSS.TableHeading,
+						store.canProxy && CSS.canProxy,
+						!store.groupByMethod && CSS.nonGroupedByMethod),
+				},
 				store.groupByMethod
 					? t`Static GET`
 					: t`Static`),
@@ -422,7 +276,8 @@ function StaticRow(row) {
 	return (
 		r('div', {
 				key: row.key,
-				...classNames(CSS.TableRow,
+				className: classNames(
+					CSS.TableRow,
 					mounted && row.isNew && CSS.animIn)
 			},
 
@@ -445,14 +300,14 @@ function StaticRow(row) {
 				}
 			}),
 
-			!groupByMethod && r('span', classNames(CSS.Method), 'GET'),
+			!groupByMethod && r('span', { className: CSS.Method }, 'GET'),
 
 			r('a', {
 				href: row.urlMask,
 				target: '_blank',
 				className: CSS.PreviewLink,
 			}, ditto
-				? [r('span', classNames(CSS.dittoDir), ditto), tail]
+				? [r('span', { className: CSS.dittoDir }, ditto), tail]
 				: tail)))
 }
 
@@ -472,7 +327,7 @@ function DelayToggler({ checked, commit, optClassName }) {
 		canClickDrag: true,
 		checked,
 		commit,
-		...classNames(CSS.DelayToggler, optClassName),
+		className: classNames(CSS.DelayToggler, optClassName),
 		title: t`Delay`,
 		body: TimerIcon()
 	})
@@ -481,13 +336,38 @@ function DelayToggler({ checked, commit, optClassName }) {
 function ClickDragToggler({ checked, commit, className, title, body }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
-			onPointerDown.call(this)
+			onPointerDown.call(this, event)
 	}
-	function onPointerDown() {
+
+	function onPointerDown(event) {
+		if (event.altKey) {
+			onExclusiveClick.call(this)
+			return
+		}
 		this.checked = !this.checked
 		this.focus()
 		commit(this.checked)
 	}
+
+	function onExclusiveClick() {
+		const selector = selectorForColumnOf(this)
+		if (!selector)
+			return
+
+		// Uncheck all other in the column. 
+		for (const elem of leftSideRef.elem.querySelectorAll(selector))
+			if (elem !== this && elem.checked && !elem.disabled) {
+				elem.checked = false
+				elem.dispatchEvent(new Event('change'))
+			}
+
+		if (!this.checked) {
+			this.checked = true
+			this.dispatchEvent(new Event('change'))
+		}
+		this.focus()
+	}
+
 	function onClick(event) {
 		if (event.pointerType === 'mouse')
 			event.preventDefault()
@@ -496,7 +376,7 @@ function ClickDragToggler({ checked, commit, className, title, body }) {
 		commit(this.checked)
 	}
 	return (
-		r('label', { ...classNames(CSS.Toggler, className), title },
+		r('label', { className: classNames(CSS.Toggler, className), title },
 			r('input', {
 				type: 'checkbox',
 				checked,
@@ -505,7 +385,7 @@ function ClickDragToggler({ checked, commit, className, title, body }) {
 				onClick,
 				onChange
 			}),
-			r('span', classNames(CSS.checkboxBody), body)))
+			r('span', { className: CSS.checkboxBody }, body)))
 }
 
 function Resizer(ref) {
@@ -596,89 +476,72 @@ ErrorToast.close = () => {
 }
 
 
-/** # Graphics */
-
-function Logo() {
-	return (
-		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.7, 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' })))
-}
-
-function TimerIcon() {
-	return (
-		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'm11 5.6 0.14 7.2 6 3.7' })))
-}
-
-function CloudIcon() {
-	return (
-		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'm6.1 8.9c0.98-2.3 3.3-3.9 6-3.9 3.3-2e-7 6 2.5 6.4 5.7 0.018 0.15 0.024 0.18 0.026 0.23 0.0016 0.037 8.2e-4 0.084 0.098 0.14 0.097 0.054 0.29 0.05 0.48 0.05 2.2 0 4 1.8 4 4s-1.8 4-4 4c-4-0.038-9-0.038-13-0.018-2.8 0-5-2.2-5-5-2.2e-7 -2.8 2.2-5 5-5 2.8 2e-7 5 2.2 5 5' }),
-			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: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25' })))
-}
-
 
-/**
- * # Long polls UI sync version
- * The version increments when a mock file is added, removed, or renamed.
- */
-function initRealTimeUpdates() {
+/** The version increments when a mock file is added, removed, or renamed. */
+function onRealTimeUpdate(onUpdate) {
 	let oldVersion = -1
-	let controller = new AbortController()
+	let es = null
+	let timer = null
 
-	longPoll()
+	connect()
 	document.addEventListener('visibilitychange', () => {
-		if (document.hidden) {
-			controller.abort('_hidden_tab_')
-			controller = new AbortController()
-		}
+		if (document.hidden)
+			teardown()
 		else
-			longPoll()
+			connect()
 	})
+	window.addEventListener('beforeunload', teardown)
 
-	async function longPoll() {
-		try {
-			const response = await store.getSyncVersion(oldVersion, controller.signal)
-			if (!response.ok)
-				throw response.status
+	function connect() {
+		if (es) return
 
+		clearTimeout(timer)
+		es = new EventSource(API.syncVersion)
+
+		es.onmessage = function (event) {
 			if (ErrorToast.isOffline)
 				ErrorToast.close()
 
-			const version = await response.json()
-			if (oldVersion !== version) { // because it could be < or >
+			const version = Number(event.data)
+			if (oldVersion !== version) {
 				oldVersion = version
-				store.fetchState()
+				onUpdate()
 			}
-			longPoll()
 		}
-		catch (error) {
-			if (error !== '_hidden_tab_')
-				setTimeout(longPoll, 3000)
+
+		es.onerror = function () {
+			teardown()
+			timer = setTimeout(connect, 3000)
 		}
 	}
+
+	function teardown() {
+		clearTimeout(timer)
+		es?.close()
+		es = null
+	}
 }
 
 
-function initKeyboardNavigation() {
-	const columnSelectors = [
+
+function selectorForColumnOf(elem) {
+	return columnSelectors().find(s => elem?.matches(s))
+}
+
+function columnSelectors() {
+	return [
 		`.${CSS.TableRow} .${CSS.ProxyToggler} input`,
 		`.${CSS.TableRow} .${CSS.DelayToggler} input`,
 		`.${CSS.TableRow} .${CSS.StatusCodeToggler} input`,
 		`.${CSS.TableRow} .${CSS.PreviewLink}`,
 		// No .MockSelector because down/up arrows have native behavior on them
 	]
+}
 
+
+function initKeyboardNavigation() {
 	const rowSelectors = [
-		...columnSelectors,
+		...columnSelectors(),
 		`.${CSS.TableRow} .${CSS.MockSelector}:enabled`,
 	]
 
@@ -687,7 +550,7 @@ function initKeyboardNavigation() {
 			case 'ArrowDown':
 			case 'ArrowUp': {
 				const pivot = document.activeElement
-				const sel = columnSelectors.find(s => pivot?.matches(s))
+				const sel = selectorForColumnOf(pivot)
 				if (sel) {
 					const offset = key === 'ArrowDown' ? +1 : -1
 					const siblings = leftSideRef.elem.querySelectorAll(sel)
@@ -714,4 +577,3 @@ function initKeyboardNavigation() {
 		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
 	}
 }
-

package/src/client/dom-utils.js

@@ -3,9 +3,7 @@ export function t(translation) {
 }
 
 export function classNames(...args) {
-	return {
-		className: args.filter(Boolean).join(' ')
-	}
+	return args.filter(Boolean).join(' ')
 }
 
 export function createElement(tag, props, ...children) {

package/src/client/{css-modules.test.js → dom-utils.test.js}

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

package/src/client/watcherDev.js

@@ -1,29 +1,38 @@
 import { API } from './ApiConstants.js'
 
 
-longPollDevChanges()
-async function longPollDevChanges() {
-	try {
-		const response = await fetch(API.watchHotReload)
-		if (!response.ok)
-			throw response.statusText
-
-		const file = await response.json() || ''
-		if (file.endsWith('.css')) {
-			await hotReloadCSS(file)
-			longPollDevChanges()
-		}
+let es = null
+let timer = null
+
+window.addEventListener('beforeunload', teardown)
+connect()
+function connect() {
+	if (es) return
+
+	clearTimeout(timer)
+	es = new EventSource(API.watchHotReload)
+
+	es.onmessage = function (event) {
+		const file = event.data
+		if (file.endsWith('.css'))
+			hotReloadCSS(file)
 		else if (file)
 			location.reload()
-		else // server timeout
-			longPollDevChanges()
 	}
-	catch (error) {
-		console.error('hot reload', error?.message || error)
-		setTimeout(longPollDevChanges, 3000)
+
+	es.onerror = function () {
+		console.error('hot reload')
+		teardown()
+		timer = setTimeout(connect, 3000)
 	}
 }
 
+function teardown() {
+	clearTimeout(timer)
+	es?.close()
+	es = null
+}
+
 async function hotReloadCSS(file) {
 	const mod = await import(`./${file}?${Date.now()}`, { with: { type: 'css' } })
 	document.adoptedStyleSheets = [mod.default]

package/src/server/Api.js

@@ -6,11 +6,11 @@
 import { join } from 'node:path'
 
 import {
-	longPollDevClientHotReload,
+	sseClientHotReload,
 	DASHBOARD_ASSETS,
 	CLIENT_DIR
 } from './WatcherDevClient.js'
-import { longPollClientSyncVersion, startWatchers, stopWatchers } from './Watcher.js'
+import { startWatchers, stopWatchers, sseClientSyncVersion } from './Watcher.js'
 
 import pkgJSON from '../../package.json' with { type: 'json' }
 
@@ -29,16 +29,16 @@ export const apiGetReqs = new Map([
 	...DASHBOARD_ASSETS.map(f => [API.dashboard + '/' + f, serveStatic(f)]),
 
 	[API.state, getState],
-	[API.syncVersion, longPollClientSyncVersion],
+	[API.syncVersion, sseClientSyncVersion],
 
-	[API.watchHotReload, longPollDevClientHotReload],
+	[API.watchHotReload, sseClientHotReload],
 	[API.throws, () => { throw new Error('Test500') }]
 ])
 
 
 export const apiPatchReqs = new Map([
 	[API.cors, setCorsAllowed],
-	[API.reset, reinitialize],
+	[API.reset, reset],
 	[API.cookies, selectCookie],
 	[API.globalDelay, setGlobalDelay],
 	[API.globalDelayJitter, setGlobalDelayJitter],
@@ -92,7 +92,7 @@ function getState(_, response) {
 
 /** # PATCH */
 
-function reinitialize(_, response) {
+function reset(_, response) {
 	mockBrokersCollection.init()
 	staticCollection.init()
 	response.ok()