mockaton 10.6.5 → 10.6.6

package/src/Dashboard.js

@@ -1,6 +1,7 @@
-import { AUTOGENERATED_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
+import { createElement as r, createSvgElement as s, className, restoreFocus, deferred, Defer, Fragment, useRef } from './DashboardDom.js'
+import { AUTO_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
 import { parseFilename, extractComments } from './Filename.js'
-import { Commander } from './ApiCommander.js'
+import { store, dittoSplitPaths } from './DashboardStore.js'
 
 
 const CSS = {
@@ -29,10 +30,8 @@ const CSS = {
 
 	chosen: null,
 	dittoDir: null,
-	empty: null,
 	leftSide: null,
 	nonDefault: null,
-	red: null,
 	rightSide: null,
 	status4xx: null,
 
@@ -56,171 +55,31 @@ const FocusGroup = {
 	PreviewLink: 3
 }
 
-const mockaton = new Commander(location.origin, parseError, onError)
-
-const store = /** @type {State} */ {
-	brokersByMethod: {},
-	staticBrokers: {},
-	cookies: [],
-	comments: [],
-	delay: 0,
-
-	collectProxied: false,
-	proxyFallback: '',
-	get canProxy() {
-		return Boolean(store.proxyFallback)
-	},
-
-	leftSideWidth: window.innerWidth / 2,
-
-	groupByMethod: initPreference('groupByMethod'),
-	toggleGroupByMethod() {
-		store.groupByMethod = !store.groupByMethod
-		togglePreference('groupByMethod', store.groupByMethod)
-		render()
-	},
-
-	chosenLink: {
-		method: '',
-		urlMask: ''
-	},
-	get hasChosenLink() {
-		return store.chosenLink.method
-			&& store.chosenLink.urlMask
-	},
-	setChosenLink(method, urlMask) {
-		store.chosenLink = { method, urlMask }
-	},
-
-	reset() {
-		store.setChosenLink('', '')
-		mockaton.reset()
-			.then(fetchState)
-	},
-
-	bulkSelectByComment(value) {
-		mockaton.bulkSelectByComment(value)
-			.then(fetchState)
-	},
-
-
-	setGlobalDelay(value) {
-		store.delay = value
-		mockaton.setGlobalDelay(value)
-	},
-
-	selectCookie(name) {
-		store.cookies = store.cookies.map(([n]) => [n, n === name])
-		mockaton.selectCookie(name)
-	},
-
-	setProxyFallback(value) {
-		store.proxyFallback = value
-		mockaton.setProxyFallback(value)
-			.then(render)
-	},
-
-	setCollectProxied(checked) {
-		store.collectProxied = checked
-		mockaton.setCollectProxied(checked)
-	},
-
-	brokerFor(method, urlMask) { return store.brokersByMethod[method]?.[urlMask] },
-	staticBrokerFor(route) { return store.staticBrokers[route] },
-
-	previewLink(method, urlMask) {
-		store.setChosenLink(method, urlMask)
-		renderRow(method, urlMask)
-	},
-
-	selectFile(file) {
-		mockaton.select(file).then(async response => {
-			const { method, urlMask } = parseFilename(file)
-			store.brokerFor(method, urlMask).currentMock = await response.json()
-			store.setChosenLink(method, urlMask)
-			renderRow(method, urlMask)
-		})
-	},
-
-	toggle500(method, urlMask) {
-		mockaton.toggle500(method, urlMask).then(async response => {
-			store.brokerFor(method, urlMask).currentMock = await response.json()
-			store.setChosenLink(method, urlMask)
-			renderRow(method, urlMask)
-		})
-	},
-
-	toggleProxied(method, urlMask, checked) {
-		mockaton.setRouteIsProxied(method, urlMask, checked).then(() => {
-			store.brokerFor(method, urlMask).currentMock.proxied = checked
-			store.setChosenLink(method, urlMask)
-			renderRow(method, urlMask)
-		})
-	},
-
-	setDelayed(method, urlMask, checked) {
-		mockaton.setRouteIsDelayed(method, urlMask, checked).then(() => {
-			store.brokerFor(method, urlMask).currentMock.delayed = checked
-		})
-	},
-
+store.render = render
+store.renderRow = renderRow
+store.setupPatchCallbacks(parseError, onError)
+store.fetchState().catch(onError)
 
-	setDelayedStatic(route, checked) {
-		store.staticBrokerFor(route).delayed = checked
-		mockaton.setStaticRouteIsDelayed(route, checked)
-	},
-
-	setStaticRouteStatus(route, status) {
-		store.staticBrokerFor(route).status = status
-		mockaton.setStaticRouteStatus(route, status)
-	}
-}
-
-
-fetchState()
 initRealTimeUpdates()
 initKeyboardNavigation()
 
-async function fetchState() {
-	try {
-		const response = await mockaton.getState()
-		if (!response.ok)
-			throw response.status
-		Object.assign(store, await response.json())
-		render()
-	}
-	catch (error) {
-		onError(error)
-	}
-}
-
 function render() {
 	restoreFocus(() => document.body.replaceChildren(...App()))
 	if (store.hasChosenLink)
 		previewMock(store.chosenLink.method, store.chosenLink.urlMask)
 }
 
-function restoreFocus(cb) {
-	const focusQuery = selectorFor(document.activeElement)
-	cb()
-	if (focusQuery)
-		document.querySelector(focusQuery)?.focus()
-}
-
-const r = createElement
-const s = createSvgElement
 const t = translation => translation[0]
 
 const leftSideRef = useRef()
 
 function App() {
-	const { leftSideWidth } = store
 	return [
 		Header(),
 		r('main', null,
 			r('div', {
 					ref: leftSideRef,
-					style: { width: leftSideWidth + 'px' },
+					style: { width: store.leftSideWidth + 'px' },
 					className: CSS.leftSide
 				},
 				r('table', null,
@@ -232,7 +91,6 @@ function App() {
 	]
 }
 
-
 function Header() {
 	return (
 		r('header', null,
@@ -302,7 +160,7 @@ function BulkSelector() {
 				r('hr'),
 				comments.map(value => r('option', { value }, value)),
 				r('hr'),
-				r('option', { value: AUTOGENERATED_500_COMMENT }, t`Auto500`)
+				r('option', { value: AUTO_500_COMMENT }, t`Auto500`)
 			)))
 }
 
@@ -322,11 +180,11 @@ function CookieSelector() {
 				r('option', { value, selected }, value)))))
 }
 
+
 function ProxyFallbackField() {
 	const checkboxRef = useRef()
 	function onChange() {
 		checkboxRef.current.disabled = !this.validity.valid || !this.value.trim()
-
 		if (!this.validity.valid)
 			this.reportValidity()
 		else
@@ -359,6 +217,7 @@ function SaveProxiedCheckbox(ref) {
 			r('span', null, t`Save Mocks`)))
 }
 
+
 function ResetButton() {
 	return (
 		r('button', {
@@ -367,6 +226,7 @@ function ResetButton() {
 		}, t`Reset`))
 }
 
+
 function SettingsMenuTrigger() {
 	const id = '_settings_menu_'
 	return (
@@ -381,16 +241,15 @@ function SettingsMenuTrigger() {
 
 function SettingsMenu(id) {
 	const firstInputRef = useRef()
-	function onToggle(event) {
-		if (event.newState === 'open')
-			firstInputRef.current.focus()
-	}
 	return (
 		r('menu', {
 				id,
 				popover: '',
 				className: CSS.SettingsMenu,
-				onToggle
+				onToggle(event) {
+					if (event.newState === 'open')
+						firstInputRef.current.focus()
+				}
 			},
 
 			r('label', className(CSS.GroupByMethod),
@@ -415,9 +274,7 @@ function SettingsMenu(id) {
 
 function MockList() {
 	if (!Object.keys(store.brokersByMethod).length)
-		return (
-			r('div', className(CSS.empty),
-				t`No mocks found`))
+		return r('div', null, t`No mocks found`)
 
 	if (store.groupByMethod)
 		return Object.keys(store.brokersByMethod).map(method => Fragment(
@@ -430,13 +287,7 @@ function MockList() {
 }
 
 function rowsFor(targetMethod) {
-	const rows = []
-	for (const [method, brokers] of Object.entries(store.brokersByMethod))
-		if (targetMethod === '*' || targetMethod === method)
-			for (const [urlMask, broker] of Object.entries(brokers))
-				rows.push({ method, urlMask, broker })
-
-	const sorted = rows.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
+	const sorted = store.brokersByMethodAsArray(targetMethod)
 	const urlMasksDittoed = dittoSplitPaths(sorted.map(r => r.urlMask))
 	return sorted.map((r, i) => ({
 		...r,
@@ -447,14 +298,26 @@ function rowsFor(targetMethod) {
 function Row({ method, urlMask, urlMaskDittoed, broker }, i) {
 	const key = Row.key(method, urlMask)
 	Row.ditto.set(key, urlMaskDittoed)
+	const { proxied, delayed, file } = broker.currentMock
 	return (
 		r('tr', { key },
-			store.canProxy && r('td', null, ProxyToggler(broker)),
-			r('td', null, DelayRouteToggler(broker)),
-			r('td', null, InternalServerErrorToggler(broker)),
-			!store.groupByMethod && r('td', className(CSS.Method), method),
-			r('td', null, PreviewLink(method, urlMask, urlMaskDittoed, i === 0)),
-			r('td', null, MockSelector(broker))))
+			store.canProxy && r('td', null,
+				ProxyToggler(method, urlMask, proxied)),
+
+			r('td', null,
+				DelayRouteToggler(method, urlMask, delayed)),
+
+			r('td', null,
+				InternalServerErrorToggler(method, urlMask, parseFilename(file).status === 500)),
+
+			!store.groupByMethod && r('td', className(CSS.Method),
+				method),
+
+			r('td', null,
+				PreviewLink(method, urlMask, urlMaskDittoed, i === 0)),
+
+			r('td', null,
+				MockSelector(broker))))
 }
 Row.key = (method, urlMask) => method + '::' + urlMask
 Row.ditto = new Map()
@@ -473,10 +336,10 @@ function renderRow(method, urlMask) {
 	})
 
 	function trFor(key) {
-		return document.querySelector(`body > main > .${CSS.leftSide} tr[key="${key}"]`)
+		return leftSideRef.current.querySelector(`tr[key="${key}"]`)
 	}
 	function unChooseOld() {
-		return document.querySelector(`body > main > .${CSS.leftSide} tr .${CSS.chosen}`)
+		return leftSideRef.current.querySelector(`td > .${CSS.chosen}`)
 			?.classList.remove(CSS.chosen)
 	}
 }
@@ -504,30 +367,13 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 
 /** @param {ClientMockBroker} broker */
 function MockSelector(broker) {
-	const STR_PROXIED = t`Proxied`
-	
 	let selected = broker.currentMock.file
-	const { status } = parseFilename(selected)
-	const files = broker.mocks.filter(item =>
-		status === 500 ||
-		!item.includes(AUTOGENERATED_500_COMMENT))
-	
-	if (store.canProxy && broker.currentMock.proxied) {
-		selected = STR_PROXIED
-		files.push(selected)
-	}
+	const selectedStatus = parseFilename(selected).status
 
-	function nameFor(file) {
-		if (file === STR_PROXIED)
-			return STR_PROXIED
-		const { status, ext } = parseFilename(file)
-		const comments = extractComments(file)
-		const isAutogen500 = comments.includes(AUTOGENERATED_500_COMMENT)
-		return [
-			isAutogen500 ? '' : status,
-			ext === 'empty' || ext === 'unknown' ? '' : ext,
-			isAutogen500 ? t`Auto500` : comments.join(' ')
-		].filter(Boolean).join(' ')
+	const files = baseOptionsFor(broker.mocks, selectedStatus === 500)
+	if (store.canProxy && broker.currentMock.proxied) {
+		selected = t`Proxied`
+		files.push([selected, selected])
 	}
 
 	return (
@@ -538,35 +384,83 @@ function MockSelector(broker) {
 			disabled: files.length <= 1,
 			...className(
 				CSS.MockSelector,
-				selected !== files[0] && CSS.nonDefault,
-				status >= 400 && status < 500 && CSS.status4xx)
-		}, files.map(file => (
+				selected !== files[0][0] && CSS.nonDefault,
+				selectedStatus >= 400 && selectedStatus < 500 && CSS.status4xx)
+		}, files.map(([file, name]) => (
 			r('option', {
 				value: file,
 				selected: file === selected
-			}, nameFor(file))))))
+			}, name)))))
 }
+function baseOptionsFor(mocks, selectedIs500) {
+	return mocks
+		.filter(f => selectedIs500 || !f.includes(AUTO_500_COMMENT))
+		.map(f => [f, nameFor(f)])
 
-/** @param {ClientMockBroker} broker */
-function DelayRouteToggler(broker) {
-	function commit(checked) {
-		const { method, urlMask } = parseFilename(broker.mocks[0])
-		store.setDelayed(method, urlMask, checked)
+	function nameFor(file) {
+		const { status, ext } = parseFilename(file)
+		const comments = extractComments(file)
+		const isAutogen500 = comments.includes(AUTO_500_COMMENT)
+		return [
+			isAutogen500 ? '' : status,
+			ext === 'empty' || ext === 'unknown' ? '' : ext,
+			isAutogen500 ? t`Auto500` : comments.join(' ')
+		].filter(Boolean).join(' ')
 	}
+}
+baseOptionsFor.test = function () {
+	(function ignoresAutoGen500WhenUnselected() {
+		const files = baseOptionsFor([
+			`api/user${AUTO_500_COMMENT}.GET.500.empty`
+		], false)
+		console.assert(files.length === 0)
+	}());
+
+	(function keepsNonAutoGen500WhenUnselected() {
+		const files = baseOptionsFor([
+			`api/user.GET.500.txt`
+		], false)
+		console.assert(files.length === 1)
+		console.assert(files[0][1] === t`500 txt`)
+	}());
+
+	(function renamesAutoGenFileToAuto500() {
+		const files = baseOptionsFor([
+			`api/user${AUTO_500_COMMENT}.GET.500.empty`
+		], true)
+		console.assert(files.length === 1)
+		console.assert(files[0][1] === t`Auto500`)
+	}());
+
+	(function filenameHasExtensionExceptWhenEmptyOrUnknown() {
+		const files = baseOptionsFor([
+			`api/user0.GET.200.empty`,
+			`api/user1.GET.200.unknown`,
+			`api/user2.GET.200.json`,
+			`api/user3(another json).GET.200.json`,
+		], true)
+		console.assert(deepEqual(files.map(([, n]) => n), [
+			// Think about, in cases like this, the only option the user
+			// has for discerning empty and unknown is on the Previewer Title
+			'200',
+			'200',
+			'200 json',
+			'200 json (another json)',
+		]))
+	}())
+}
+deferred(baseOptionsFor.test)
+
+
+function DelayRouteToggler(method, urlMask, checked) {
 	return ClickDragToggler({
-		checked: broker.currentMock.delayed,
-		commit,
+		checked,
+		commit(checked) { store.setDelayed(method, urlMask, checked) },
 		focusGroup: FocusGroup.DelayToggler
 	})
 }
 
-
-/** @param {ClientMockBroker} broker */
-function InternalServerErrorToggler(broker) {
-	function onChange() {
-		const { method, urlMask } = parseFilename(broker.mocks[0])
-		store.toggle500(method, urlMask)
-	}
+function InternalServerErrorToggler(method, urlMask, checked) {
 	return (
 		r('label', {
 				className: CSS.InternalServerErrorToggler,
@@ -574,19 +468,14 @@ function InternalServerErrorToggler(broker) {
 			},
 			r('input', {
 				type: 'checkbox',
-				'data-focus-group': FocusGroup.StatusToggler,
-				checked: parseFilename(broker.currentMock.file).status === 500,
-				onChange
+				checked,
+				onChange() { store.toggle500(method, urlMask) },
+				'data-focus-group': FocusGroup.StatusToggler
 			}),
 			r('span', null, t`500`)))
 }
 
-/** @param {ClientMockBroker} broker */
-function ProxyToggler(broker) {
-	function onChange() {
-		const { urlMask, method } = parseFilename(broker.mocks[0])
-		store.toggleProxied(method, urlMask, this.checked)
-	}
+function ProxyToggler(method, urlMask, checked) {
 	return (
 		r('label', {
 				className: CSS.ProxyToggler,
@@ -594,8 +483,8 @@ function ProxyToggler(broker) {
 			},
 			r('input', {
 				type: 'checkbox',
-				checked: broker.currentMock.proxied,
-				onChange,
+				checked,
+				onChange() { store.setProxied(method, urlMask, this.checked) },
 				'data-focus-group': FocusGroup.ProxyToggler
 			}),
 			CloudIcon()))
@@ -617,34 +506,39 @@ function StaticFilesList() {
 			r('tr', null,
 				r('th', { colspan: (2 + Number(!groupByMethod)) + Number(canProxy) }),
 				r('th', null, t`Static GET`)),
-			Object.values(staticBrokers).map((broker, i) =>
+			Object.values(staticBrokers).map(({ route, status, delayed }, i) =>
 				r('tr', null,
 					canProxy && r('td'),
-					r('td', null, DelayStaticRouteToggler(broker)),
-					r('td', null, NotFoundToggler(broker)),
-					!groupByMethod && r('td', className(CSS.Method), 'GET'),
-					r('td', null, r('a', {
-						href: broker.route,
-						target: '_blank',
-						className: CSS.PreviewLink,
-						'data-focus-group': FocusGroup.PreviewLink
-					}, dp[i]))
+					r('td', null,
+						DelayStaticRouteToggler(route, delayed)),
+
+					r('td', null,
+						NotFoundToggler(route, status === 404)),
+
+					!groupByMethod && r('td', className(CSS.Method),
+						'GET'),
+
+					r('td', null,
+						r('a', {
+							href: route,
+							target: '_blank',
+							className: CSS.PreviewLink,
+							'data-focus-group': FocusGroup.PreviewLink
+						}, dp[i]))
 				))))
 }
 
-/** @param {ClientStaticBroker} broker */
-function DelayStaticRouteToggler(broker) {
+function DelayStaticRouteToggler(route, checked) {
 	return ClickDragToggler({
-		checked: broker.delayed,
+		checked,
 		focusGroup: FocusGroup.DelayToggler,
 		commit(checked) {
-			store.setDelayedStatic(broker.route, checked)
+			store.setDelayedStatic(route, checked)
 		}
 	})
 }
 
-/** @param {ClientStaticBroker} broker */
-function NotFoundToggler(broker) {
+function NotFoundToggler(route, checked) {
 	return (
 		r('label', {
 				className: CSS.NotFoundToggler,
@@ -652,10 +546,10 @@ function NotFoundToggler(broker) {
 			},
 			r('input', {
 				type: 'checkbox',
-				checked: broker.status === 404,
+				checked,
 				'data-focus-group': FocusGroup.StatusToggler,
 				onChange() {
-					store.setStaticRouteStatus(broker.route, this.checked ? 404 : 200)
+					store.setStaticRouteStatus(route, this.checked ? 404 : 200)
 				}
 			}),
 			r('span', null, t`404`)))
@@ -770,7 +664,7 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 	return (
 		r('span', null,
 			gatewayIsBad
-				? r('span', className(CSS.red), t`⛔ Fallback Backend Error` + ' ')
+				? r('span', null, t`⛔ Fallback Backend Error` + ' ')
 				: r('span', null, t`Got` + ' '),
 			r('abbr', { title: statusText }, status),
 			' ' + mime))
@@ -799,11 +693,8 @@ async function previewMock(method, urlMask) {
 		})
 		clearTimeout(spinnerTimer)
 		const { proxied, file } = store.brokerFor(method, urlMask).currentMock
-		if (proxied)
-			await updatePayloadViewer(true, '', response)
-		else if (file)
-			await updatePayloadViewer(false, file, response)
-		else {/* e.g. selected was deleted */}
+		if (proxied || file)
+			await updatePayloadViewer(proxied, file, response)
 	}
 	catch (err) {
 		onError(err)
@@ -826,23 +717,23 @@ async function updatePayloadViewer(proxied, file, response) {
 				file,
 				statusText: response.statusText
 			}))
-
+	
 	if (mime.startsWith('image/'))  // Naively assumes GET.200
 		payloadViewerCodeRef.current.replaceChildren(
 			r('img', { src: URL.createObjectURL(await response.blob()) }))
 	else {
 		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
-			payloadViewerCodeRef.current.replaceChildren(r('span', className(CSS.json), syntaxJSON(body)))
-		else if (isXML(mime))
-			payloadViewerCodeRef.current.replaceChildren(syntaxXML(body))
+			payloadViewerCodeRef.current.replaceChildren(r('span', className(CSS.json), SyntaxJSON(body)))
+		else if (isXML(mime)) 
+			payloadViewerCodeRef.current.replaceChildren(SyntaxXML(body))
 		else
 			payloadViewerCodeRef.current.textContent = body
 	}
 }
 
 function isXML(mime) {
-	return ['text/html', 'text/xml', 'application/xml'].includes(mime)
+	return ['text/html', 'text/xml', 'application/xml'].some(m => mime.includes(m))
 		|| /application\/.*\+xml/.test(mime)
 }
 
@@ -901,6 +792,7 @@ function SettingsIcon() {
 			s('path', { d: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6' })))
 }
 
+
 /**
  * # Long polls UI sync version
  * The version increments when a mock file is added, removed, or renamed.
@@ -921,14 +813,14 @@ function initRealTimeUpdates() {
 
 	async function poll() {
 		try {
-			const response = await mockaton.getSyncVersion(oldSyncVersion, controller.signal)
+			const response = await store.getSyncVersion(oldSyncVersion, controller.signal)
 			if (response.ok) {
 				const syncVersion = await response.json()
 				const skipUpdate = oldSyncVersion === -1
 				if (oldSyncVersion !== syncVersion) { // because it could be < or >
 					oldSyncVersion = syncVersion
 					if (!skipUpdate)
-						await fetchState()
+						store.fetchState().catch(onError)
 				}
 				poll()
 			}
@@ -942,6 +834,7 @@ function initRealTimeUpdates() {
 	}
 }
 
+
 function initKeyboardNavigation() {
 	addEventListener('keydown', onKeyDown)
 
@@ -977,8 +870,8 @@ function initKeyboardNavigation() {
 	}
 
 	function allInFocusGroup(focusGroup) {
-		return Array.from(document.querySelectorAll(
-			`body > main > .${CSS.leftSide} table > tr > td [data-focus-group="${focusGroup}"]:is(input, a)`))
+		return Array.from(leftSideRef.current.querySelectorAll(
+			`tr > td [data-focus-group="${focusGroup}"]:is(input, a)`))
 	}
 
 	function circularAdjacent(step = 1, arr, pivot) {
@@ -987,172 +880,7 @@ function initKeyboardNavigation() {
 }
 
 
-/** # Utils */
-
-function className(...args) {
-	return {
-		className: args.filter(Boolean).join(' ')
-	}
-}
-
-function createElement(tag, props, ...children) {
-	const node = document.createElement(tag)
-	for (const [k, v] of Object.entries(props || {}))
-		if (k === 'ref') v.current = node
-		else if (k === 'style') Object.assign(node.style, v)
-		else if (k.startsWith('on')) node.addEventListener(k.slice(2).toLowerCase(), ...[v].flat())
-		else if (k in node) node[k] = v
-		else node.setAttribute(k, v)
-	node.append(...children.flat().filter(Boolean))
-	return node
-}
-
-function createSvgElement(tagName, props, ...children) {
-	const elem = document.createElementNS('http://www.w3.org/2000/svg', tagName)
-	for (const [k, v] of Object.entries(props))
-		elem.setAttribute(k, v)
-	elem.append(...children.flat().filter(Boolean))
-	return elem
-}
-
-function useRef() {
-	return { current: null }
-}
-
-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
-}
-
-function Defer(cb) {
-	const placeholder = document.createComment('')
-	deferred(() => placeholder.replaceWith(cb()))
-	return placeholder
-}
-
-function deferred(cb) {
-	return window.requestIdleCallback
-		? requestIdleCallback(cb)
-		: setTimeout(cb, 100) // Safari
-}
-
-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('>')
-}
-
-
-// When false, the URL will be updated with param=false
-function initPreference(param) {
-	const qs = new URLSearchParams(location.search)
-	if (!qs.has(param)) {
-		const group = localStorage.getItem(param) !== 'false'
-		if (!group) {
-			const url = new URL(location.href)
-			url.searchParams.set(param, false)
-			history.replaceState(null, '', url)
-		}
-		return group
-	}
-	return qs.get(param) !== 'false'
-}
-
-// When false, the URL and localStorage will have param=false
-function togglePreference(param, nextVal) {
-	if (nextVal)
-		localStorage.removeItem(param)
-	else
-		localStorage.setItem(param, nextVal)
-
-	const url = new URL(location.href)
-	if (nextVal)
-		url.searchParams.delete(param)
-	else
-		url.searchParams.set(param, false)
-	history.replaceState(null, '', url)
-}
-
-
-/**
- * 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
- */
-function dittoSplitPaths(paths) {
-	const result = [['', paths[0]]]
-	const pathsInParts = paths.map(p => p.split('/').filter(Boolean))
-
-	for (let i = 1; i < paths.length; i++) {
-		const prevParts = pathsInParts[i - 1]
-		const currParts = pathsInParts[i]
-
-		let j = 0
-		while (
-			j < currParts.length &&
-			j < prevParts.length &&
-			currParts[j] === prevParts[j])
-			j++
-
-		if (!j) // no common dirs
-			result.push(['', paths[i]])
-		else {
-			const ditto = '/' + currParts.slice(0, j).join('/') + '/'
-			result.push([ditto, paths[i].slice(ditto.length)])
-		}
-	}
-	return result
-}
-
-dittoSplitPaths.test = function () {
-	const input = [
-		'/api/user',
-		'/api/user/avatar',
-		'/api/user/friends',
-		'/api/vid',
-		'/api/video/id',
-		'/api/video/stats',
-		'/v2/foo',
-		'/v2/foo/bar'
-	]
-	const expected = [
-		['', '/api/user'],
-		['/api/user/', 'avatar'],
-		['/api/user/', 'friends'],
-		['/api/', 'vid'],
-		['/api/', 'video/id'],
-		['/api/video/', 'stats'],
-		['', '/v2/foo'],
-		['/v2/foo/', 'bar']
-	]
-	console.assert(JSON.stringify(dittoSplitPaths(input)) === JSON.stringify(expected))
-}
-
-
-function syntaxJSON(json) {
+function SyntaxJSON(json) {
 	const MAX_NODES = 50_000
 	let nNodes = 0
 	const frag = new DocumentFragment()
@@ -1172,8 +900,8 @@ function syntaxJSON(json) {
 
 	let match
 	let lastIndex = 0
-	syntaxJSON.regex.lastIndex = 0 // resets regex
-	while ((match = syntaxJSON.regex.exec(json)) !== null) {
+	SyntaxJSON.regex.lastIndex = 0 // resets regex
+	while ((match = SyntaxJSON.regex.exec(json)) !== null) {
 		if (nNodes > MAX_NODES)
 			break
 
@@ -1195,11 +923,11 @@ function syntaxJSON(json) {
 	text(json.slice(lastIndex))
 	return frag
 }
-syntaxJSON.regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s]+)|\S+/g
+SyntaxJSON.regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s]+)|\S+/g
 // Capture group order: [string, optional colon, punc]
 
 
-function syntaxXML(xml) {
+function SyntaxXML(xml) {
 	const MAX_NODES = 50_000
 	let nNodes = 0
 	const frag = new DocumentFragment()
@@ -1219,8 +947,8 @@ function syntaxXML(xml) {
 
 	let match
 	let lastIndex = 0
-	syntaxXML.regex.lastIndex = 0
-	while ((match = syntaxXML.regex.exec(xml)) !== null) {
+	SyntaxXML.regex.lastIndex = 0
+	while ((match = SyntaxXML.regex.exec(xml)) !== null) {
 		if (nNodes > MAX_NODES)
 			break
 
@@ -1238,6 +966,11 @@ function syntaxXML(xml) {
 	frag.normalize()
 	return frag
 }
-syntaxXML.regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g
+SyntaxXML.regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g
 // Capture groups order:  [tagPunc, tagName, attrName, attrVal]
 
+
+function deepEqual(a, b) {
+	return JSON.stringify(a) === JSON.stringify(b)
+}
+