30:Tb38,function queryObserver( selector, callback, { root = document, onlyCurrent = false, debounceMs = 100, // Set to 0 for immediate maybe? docObserverOpts = {}, nodeObserverOpts = {} } = {} ) { docObserverOpts = { subtree: true, childList: true, ...docObserverOpts }; // `childList: true` here too means it'll send two records if a matched element changes, // but I think that's better than having to test if every record is a descendant of a matched element nodeObserverOpts = { subtree: true, childList: true, attributes: true, characterData: true, ...nodeObserverOpts }; const privateKey = Symbol("queryObserver tracker"); const batch = new Set(); const outbox = new Outbox(callback); function send() { const current = new Set(root.querySelectorAll(selector)); if (onlyCurrent) { outbox.send(current); } // TODO: Maybe it's possible to compute this without root.querySelectorAll const added = [], changed = [], removed = []; for (const el of batch) { if (el[privateKey]) { if (current.has(el)) { changed.push(el); } else { removed.push(el); el[privateKey].disconnect(); delete el[privateKey]; } } else if (current.has(el)) { added.push(el); const subObserver = new MutationObserver((records) => batch.add(el)); el[privateKey] = subObserver; subObserver.observe(el, nodeObserverOpts); } } batch.clear(); outbox.send({ added, changed, removed, current }); debounceTimer = null; } let debounceTimer; const observer = new MutationObserver(observeDoc); function observeDoc(records) { for (const record of records) { if (record.target !== root) { // This must be a target element, since we only observe children of the root // (unless some dumbass gave us a selector capable of matching outside the root) // Something must have changed so just add it and move on batch.add(record.target); continue; } for (const removed of records.removedNodes) { if (removed instanceof Element && removed.matches(selector)) { batch.add(removed); } } for (const added of records.addedNodes) { if (added instanceof Element && added.matches(selector)) { batch.add(added); } } } if (batch.size > 0) { if (debounceTimer) clearTimeout(debounceTimer); debounceTimer = setTimeout(send, debounceMs); } } observer.observe(root, docObserverOpts); for (const matched of root.querySelectorAll(selector)) { batch.add(matched); } debounceTimer = setTimeout(send, debounceMs); return () => { observer.disconnect(); if (debounceTimer) clearTimeout(debounceTimer); }; }31:T759,function notebookToc(selector = "h2,h3") { const headings = [...document.querySelectorAll(selector)]; const tocEntries = headings.map((heading) => { const levelNum = parseInt(heading.tagName[1]); const clonedContent = [...heading.cloneNode(true).childNodes]; return htl.html.fragment`

${clonedContent}

`; }); return htl.html`

${clonedContent}

`; }32:[{"id":"94f69a535931424999363a0bb7184afb3c23bd4f82876e030936d4281f19c06b5f03b47aff7240c88205451000ab13abeeb359709c710896cd252ea7ac2590e7","href":"https://static.observableusercontent.com/files/94f69a535931424999363a0bb7184afb3c23bd4f82876e030936d4281f19c06b5f03b47aff7240c88205451000ab13abeeb359709c710896cd252ea7ac2590e7","name":"image.png","type":"image/png","lastModified":1787240968936.816,"size":177423}] 2e:{"title":"Toolkit","cells":[{"id":0,"value":"# Toolkit\n\nMy personal collection of helpers and up-to-date libraries! Many classic examples of reinventing the wheel and then over-engineering it.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":594,"value":"notebookToc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"## Basics\n### Identity function `x => x`\nFirst a simple identity function, no notebook is complete without it!","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"identity = (x) => x","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"### Parameter validator `required()`\nThen a parameter object validator to be used like this:\n```js\nfunction f(x,y,{a,b,c}) {\n required({a,b});\n // ...\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"function required(props, reject = NULL_AND_UNDEFINED) {\n const rejects = Object.entries(props).filter(([prop, val]) =>\n reject.includes(val)\n );\n if (rejects.length > 0)\n throw new TypeError(\n \"Required properties not defined: \" +\n rejects.map(([key, _]) => '\"' + key + '\"').join(\", \")\n );\n return props;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"ONLY_UNDEFINED = Object.freeze([undefined])","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"NULL_AND_UNDEFINED = Object.freeze([null, undefined])","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"[\n [].includes(null),\n [].includes(undefined),\n NULL_AND_UNDEFINED.includes(null),\n NULL_AND_UNDEFINED.includes(undefined)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"requiredTestUsage = (({ opt1, opt2, opt3 }) => required({ opt1, opt2 }))({\n opt1: true,\n opt2: false,\n opt3: 7\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"requiredTestNotGiven = (({ opt1, opt2 }) => required({ opt1, opt2 }))({\n opt1: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"requiredTestNull = (({ opt1, opt2 }) => required({ opt1, opt2 }))({\n opt1: null,\n opt2: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"requiredTestNullAllowed = (({ opt1, opt2 }) =>\n required({ opt1, opt2 }, ONLY_UNDEFINED))({\n opt1: null,\n opt2: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1007,"value":"### Outbox\nFor when you need to call a callback but don't want to cause reentrancy","pinned":false,"hidden":false,"mode":"md"},{"id":1009,"value":"class Outbox {\n constructor(\n callback,\n {\n schedule = queueMicrotask, // or requestAnimationFrame or setTimeout\n onError = (error, msg) =>\n console.error(\"Outbox error thrown from callback:\", error, msg)\n } = {}\n ) {\n this.callback = callback;\n this.schedule = schedule;\n this.onError = onError;\n this.queue = [];\n this.active = false;\n }\n\n add(msg) {\n this.queue.push(msg);\n if (!this.active) {\n this.active = true;\n this.schedule(() => this.#deliver());\n }\n }\n\n async #deliver() {\n try {\n // Carefully iterate with shift, since more messages might be added while waiting for callback\n while (this.queue.length) {\n const msg = this.queue.shift();\n try {\n await this.callback(msg);\n } catch (error) {\n this.onError(error, msg);\n }\n }\n } finally {\n this.active = false;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"## HTML Shenanigans","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"### DOM querySelector but it's an Observer\nAn attempt at creating something like `querySelector()` or `d3.select()` but that streams events continuously.","pinned":false,"hidden":false,"mode":"md"},{"id":933,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"## Notebook hacks\n","pinned":false,"hidden":false,"mode":"md"},{"id":445,"value":"### TOC generator\n\nI had some extra wishes for a TOC generator I didn't find in the top search results, like nicer styling, smooth scroll, and aim for center of screen. I almost went as far as using D3 and MutationObserver to create a live view of the page, until I remembered that the TOC is most useful to other people visiting the page...\n\nIf you have headings with duplicate ids, or a heading contains another heading,\n![image.png](${await FileAttachment(\"image.png\").url()})\n\nTODO Welp, I need some kind of reactivity because if this renders first, the headings don't actually exist yet :F","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"notebookToc(\"h1,h2,h3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"### H3 Test heading with a `bit` of *formatting* and ${tex`\\LaTeX`}\n\n#### H4 test heading\n##### H5\n###### H6","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"notebookToc(\"h3,h4,h5,h6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"## JS Syntax Sugar\nI have a huge sweet tooth...\n\n### Getter function DSL\n\nA cute little overengineered proxy to let you write `myIterable.map(get.x.y.z)`","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"getTestData = Array.from({ length: 5 }, (v, k) => ({\n x: { y: { z: `This is ${k}` } }\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"getTestData.map(get.x.y.z)","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"getTestData.map(get.x.y.z[8])","pinned":true,"hidden":false,"mode":"ojs"},{"id":871,"value":"This is made possible by proxying a sacrificial function (to enable the `apply()` handler):","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"class GetDslHandler {\n static make(walker, path) {\n return new Proxy(identity, new GetDslHandler(walker, path));\n }\n walker;\n iterateOpts;\n path;\n cache;\n constructor(walker, path = []) {\n this.walker = walker;\n this.path = path;\n this.cache = new Map();\n }\n get(_target, prop) {\n // Not using Map.prototype.getOrInsertComputed; too young and costs an extra closure for the callback\n let val = this.cache.get(prop);\n if (val === undefined) {\n this.cache.set(\n prop,\n (val = GetDslHandler.make(this.walker, [...this.path, prop]))\n );\n }\n return val;\n }\n apply(_target, _thisArg, [value]) {\n return this.walker(value, this.path);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"function flexWalker({ shortCircuitUndefined = false, mapper = identity } = {}) {\n return (value, path) => {\n const root = value;\n let i = 0;\n try {\n while (\n !(shortCircuitUndefined && (value === null || value === undefined)) &&\n i < path.length\n ) {\n value = value[path[i]];\n i++;\n }\n return mapper(value);\n } catch (error) {\n throw buildDslWalkError(path, i, root, error);\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"function underline(text) {\n const underlineChar = \"\\u0332\";\n\n // Split the text into individual characters, add the wave to each, and rejoin\n return text\n .split(\"\")\n .map((char) => underlineChar + char)\n .join(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"function buildDslWalkError(path, i, root, error) {\n console.debug(\"get: broken path\", {\n path,\n fail: path.slice(0, i + 1),\n failedAt: i,\n root,\n error\n });\n const steps = path.map((p) =>\n typeof p === \"string\" ? \".\" + p : \"[\" + String(p) + \"]\"\n );\n if (steps[i]) steps[i] = underline(steps[i]);\n // steps[i] = \"⌇\" + steps[i] + \"⌇\";\n\n error = error ?? String(error);\n const eName = error?.name ?? \"something\";\n const rawMsg = error?.message ?? error;\n const eMsg =\n typeof rawMsg === \"object\" ? JSON.stringify(rawMsg) : String(rawMsg);\n let msg = `\\`get${steps.join(\"\")}\\` caused ${eName} to be thrown: ${eMsg}`;\n throw new TypeError(msg, { cause: error });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":838,"value":"But the Observable Notebook runtime has two quirks:\n- It wraps all cell values with `Promise.resolve()` which never resolves because [our proxy looks \"thenable\"](https://talk.observablehq.com/t/the-observable-runtime-tries-to-access-a-property-named-then-of-my-proxy-object/868/2)\n- It streams values from generators [as judged by existence of `next()` and `return()`](https://github.com/observablehq/runtime/blob/main/src/generatorish.js)\n\nSo we need a guard against that.","pinned":false,"hidden":false,"mode":"md"},{"id":815,"value":"workaroundThenableGeneratorish = (actual) =>\n new Proxy(actual, {\n get(target, prop, receiver) {\n // Can't support these at root because Observable will:\n // - use Promise.resolve on everything which has special handling for \"thenable\" values (https://talk.observablehq.com/t/the-observable-runtime-tries-to-access-a-property-named-then-of-my-proxy-object/868/2)\n // - try to iterate it if it's \"generatorish\" (https://github.com/observablehq/runtime/blob/main/src/generatorish.js)\n if (prop === \"then\" || prop === \"next\")\n return `Don't use get.${prop} at the top level, it breaks due to the notebook runtime. Instead use get().${prop}`;\n return Reflect.get(target, prop, receiver);\n },\n // Work around by calling `get().then` or `get().next` instead\n apply(target) {\n return target;\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"get = workaroundThenableGeneratorish(GetDslHandler.make(flexWalker()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"// get({ x: 5 }) // Will hang!","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"[get().next({ next: \"IT'S\" }), get().then({ then: \"WORKING!\" })].join(\" \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"It works for regular properties, of course","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"get.x({ x: 5 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"get[\"x\"]({ x: 5 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"get.x.y.z({ x: { y: { z: true } } })","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"It works with array indexes too!","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"get[2]([0, 10, 20, 30, 40])","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"It even works with symbols!","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"get.x[Symbol.match].z({ x: { [Symbol.match]: { z: \"found\" } } })","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"It gives nice error messages if it trips over null or undefined","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"get.x.y.z({ x: {} })","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"get.x[1].z({ x: null })","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"We have a forgiving version too:","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"tryGet = workaroundThenableGeneratorish(\n GetDslHandler.make(flexWalker({ shortCircuitUndefined: true }))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"tryGet.x.y({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"tryGet.x.y({ x: null })","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"tryGet.x({ x: null })","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"And even a version that can serve a default value instead!","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"tryGetOr = {\n const cache = new Map();\n return (defaultValue) => {\n if (cache.has(defaultValue)) cache.get(defaultValue);\n const handler = GetDslHandler.make(\n flexWalker({\n shortCircuitUndefined: true,\n mapper: (value) => value || defaultValue\n })\n );\n cache.set(defaultValue, handler);\n return handler;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"tryGetOr(\"myFallback\").x.y.z({ x: {} })","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"tryGetOr(\"myFallback2\").x.y({ x: {} })","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"tryGetOr((x) => x * 2).x.y({ x: null })(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"tryGetOr(\"myFallback\").x.y({ x: { y: \"ok\" } })","pinned":true,"hidden":false,"mode":"ojs"},{"id":675,"value":"Just a few experiments to try potential workarounds for the thenable and generatorish issues.","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"whatIfString = ({ then: \"not a function\", next: \"not a function\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"whatIfFunctionThrows = ({\n then() {\n throw \"no\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"whatIfFunctionThrows1 = ({\n next() {\n throw \"no\";\n }\n // return() {\n // throw \"no\";\n // }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"whatIfGetterString = ({\n get then() {\n return \"not a function\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"whatIfGetterThrows = ({\n get then() {\n throw \"no\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"whatIfGetterThrows1 = ({\n get next() {\n throw \"no\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"whatIfGetterThrows2 = ({\n get whatever() {\n throw \"no\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"### Sort and Comparator function DSL\nNow we can build on that to let us write `data.sort(by(get.x.y.z))`!","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"cmp = {\n const gtlteq = (a, b) => (a < b ? -1 : a > b ? 1 : 0),\n numbers = (a, b) => a - b,\n strings = new Intl.Collator(undefined, { numeric: true }).compare,\n stringify = (a, b) => strings(String(a), String(b)),\n auto = (a, b) =>\n a === b\n ? 0\n : a === null\n ? 1\n : b === null\n ? -1\n : typeof a === \"string\" && typeof b === \"string\"\n ? strings(a, b)\n : gtlteq(a,b),\n rev = (cmp) => (a, b) => cmp(b, a);\n return { gtlteq, numbers, strings, stringify, auto, rev };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"[1, 0.2, 300, 40].toSorted(cmp.numbers)","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"[1, 0.2, 300, 40].map(String).toSorted(cmp.strings)","pinned":true,"hidden":false,"mode":"ojs"},{"id":748,"value":"[1, 0.2, 300, 40].toSorted(cmp.stringify)","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"rev = (f) => (a, b) => f(b, a)","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"by = (getter, comparer = cmp.auto) =>\n (a, b) =>\n comparer(getter(a), getter(b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"byTestData = Array.from({ length: 5 }, (v, k) => ({\n x: { y: { z: Math.random().toString(36) } }\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"byTestData.map(get.x.y.z)","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"byTestDataSorted = byTestData.toSorted(by(get.x.y.z))","pinned":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"byTestDataSorted.map(get.x.y.z)","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"byTestDataSortedReverse = byTestData.toSorted(rev(by(get.x.y.z)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"byTestDataSortedReverse.map(get.x.y.z)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}