Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Merge branch 'worktree-agent-ae1299e92e4462012' | 1 | import assert from "node:assert/strict"; |
| 2 | import { readFileSync, readdirSync } from "node:fs"; | |
| 3 | import { join, relative } from "node:path"; | |
| 4 | import { test } from "node:test"; | |
| 5 | import { fileURLToPath } from "node:url"; | |
| 6 | ||
| 7 | // Hover hints are the site's tooltip (components/ui/hint.tsx, or Tooltip | |
| 8 | // from components/ui/tooltip.tsx), never the browser's `title`: it looks | |
| 9 | // foreign, waits a second and a half, and never shows on a touch screen or | |
| 10 | // to the keyboard. This fails on a `title` on an HTML element, or on a | |
| 11 | // component that hands its props to one. | |
| 12 | ||
| 13 | /** Components that pass `title` on to an HTML element. */ | |
| 14 | const FORWARDS = ["Link", "NavLink", "Button", "ButtonLink", "SubmitButton", "Badge", "Switch", "Input", "Textarea", "TabLink"]; | |
| 15 | ||
| 16 | /** | |
| 17 | * Where a native `title` is right. `file:line`, with the reason. An SVG's | |
| 18 | * `<title>` child is an element, not an attribute, and needs no entry. | |
| 19 | */ | |
| 20 | const ALLOWED: Record<string, string> = {}; | |
| 21 | ||
| 22 | const APP = fileURLToPath(new URL("..", import.meta.url)); | |
| 23 | ||
| 24 | function* sources(dir: string): Generator<string> { | |
| 25 | for (const entry of readdirSync(dir, { withFileTypes: true })) { | |
| 26 | const path = join(dir, entry.name); | |
| 27 | if (entry.isDirectory()) yield* sources(path); | |
| 28 | else if (entry.name.endsWith(".tsx")) yield path; | |
| 29 | } | |
| 30 | } | |
| 31 | ||
| 32 | /** Each opening tag of an HTML element or a forwarding component with a `title` attribute. */ | |
| 33 | function nativeTitles(source: string): { tag: string; line: number }[] { | |
| 34 | const found: { tag: string; line: number }[] = []; | |
| 35 | const opening = new RegExp(`<([a-z][a-z0-9]*|${FORWARDS.join("|")})(?=[\\s/>])`, "g"); | |
| 36 | for (let match = opening.exec(source); match; match = opening.exec(source)) { | |
| 37 | // The tag's attributes, up to its closing `>`, with every {...} left out. | |
| 38 | let attributes = ""; | |
| 39 | let depth = 0; | |
| 40 | let quote: string | null = null; | |
| 41 | for (let i = match.index + match[0].length; i < source.length; i++) { | |
| 42 | const c = source[i]; | |
| 43 | if (quote) { | |
| 44 | if (c === quote) quote = null; | |
| 45 | if (depth === 0) attributes += c; | |
| 46 | continue; | |
| 47 | } | |
| 48 | if (c === '"' || c === "'" || c === "`") quote = c; | |
| 49 | else if (c === "{") depth++; | |
| 50 | else if (c === "}") depth--; | |
| 51 | else if (c === ">" && depth === 0) break; | |
| 52 | if (depth === 0) attributes += c; | |
| 53 | } | |
| 54 | if (/(^|\s)title=/.test(attributes)) { | |
| 55 | found.push({ tag: match[1], line: source.slice(0, match.index).split("\n").length }); | |
| 56 | } | |
| 57 | } | |
| 58 | return found; | |
| 59 | } | |
| 60 | ||
| 61 | test("finds a title on an element, not on a component's own prop or inside an expression", () => { | |
| 62 | const hits = nativeTitles( | |
| 63 | [ | |
| 64 | `<span title="x">a</span>`, | |
| 65 | `<Section title="Heading">`, | |
| 66 | `<div\n className="a"\n title={label}\n>`, | |
| 67 | `<Link to="/" title={x}>`, | |
| 68 | `<button onClick={() => open({ title: "x" })}>`, | |
| 69 | `<p className={cn("a", b && "title=")}>`, | |
| 70 | ].join("\n"), | |
| 71 | ); | |
| 72 | assert.deepEqual(hits, [ | |
| 73 | { tag: "span", line: 1 }, | |
| 74 | { tag: "div", line: 3 }, | |
| 75 | { tag: "Link", line: 7 }, | |
| 76 | ]); | |
| 77 | }); | |
| 78 | ||
| 79 | test("no native title hints in apps/web", () => { | |
| 80 | const offenders: string[] = []; | |
| 81 | for (const file of sources(APP)) { | |
| 82 | const name = relative(APP, file).replaceAll("\\", "/"); | |
| 83 | for (const { tag, line } of nativeTitles(readFileSync(file, "utf8"))) { | |
| 84 | if (!ALLOWED[`${name}:${line}`]) offenders.push(`app/${name}:${line} <${tag} title=…>`); | |
| 85 | } | |
| 86 | } | |
| 87 | assert.deepEqual(offenders, [], "Use <Hint label=…> from components/ui/hint.tsx in place of a native title."); | |
| 88 | }); |
This file's history is long; its oldest lines are credited to the oldest commit read.