|
| 1 | +// @ts-check |
| 2 | + |
| 3 | +/* The Semantic Diff viewer: draws the commit records of a pull request, a |
| 4 | + * range or commits of this repository in the browser, reading them from |
| 5 | + * GitHub's REST API and drawing them with the page's renderer |
| 6 | + * (recordRender.js). recordViewer.html is the page; |
| 7 | + * .github/workflows/semantic_diff_viewer.yml publishes both to the CDN. |
| 8 | + * |
| 9 | + * ?pr=8958 the pull request's commits |
| 10 | + * ?pr=8958&range=a...b the commits of a range, headed by the pull request |
| 11 | + * ?range=a...b the commits b has and a lacks |
| 12 | + * ?commit=a1b2c3d,e4f5a6b commits, one card each |
| 13 | + * |
| 14 | + * Without a token, GitHub answers 60 requests an hour for each address; a |
| 15 | + * pull request takes two, and one more for each 100 commits past the first. |
| 16 | + * A pull request or range holds at most 250 commits (GitHub lists no more |
| 17 | + * of a pull request's), and a query names at most 20 commits, so a page |
| 18 | + * takes at most 4 requests or 20. |
| 19 | + */ |
| 20 | + |
| 21 | +import { CSS, esc, pageBody, pageTitle, parseRecord } from "./recordRender.js"; |
| 22 | + |
| 23 | +/** @import { CommitRecord, Group } from "./recordRender.js" */ |
| 24 | + |
| 25 | +/** |
| 26 | + * A GitHub API request: the path under the repository, answered as JSON. |
| 27 | + * @typedef {(path: string) => Promise<any>} FetchJson |
| 28 | + */ |
| 29 | + |
| 30 | +/** |
| 31 | + * A commit as GitHub's API returns it, the fields the viewer reads. |
| 32 | + * @typedef {{ |
| 33 | + * sha: string, |
| 34 | + * parents: unknown[], |
| 35 | + * commit: { message: string, author: { name: string, date: string } }, |
| 36 | + * }} ApiCommit |
| 37 | + */ |
| 38 | + |
| 39 | +const REPO = "rescript-lang/rescript"; |
| 40 | +const API = `https://api.github.com/repos/${REPO}`; |
| 41 | +const MONTHS = "Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" "); |
| 42 | +const PAGE = 100; |
| 43 | +/** The commits a pull request or range holds at most. */ |
| 44 | +export const MAX_COMMITS = 250; |
| 45 | +/** The commits a query names at most. */ |
| 46 | +export const MAX_NAMED = 20; |
| 47 | + |
| 48 | +/** A commit's sha, full or abbreviated. */ |
| 49 | +const SHA = /^[0-9a-f]{4,40}$/i; |
| 50 | +const USAGE = |
| 51 | + "Name what to draw: ?pr=<number>, ?range=<base>...<tip> or ?commit=<sha>[,<sha>]."; |
| 52 | + |
| 53 | +/** |
| 54 | + * A range `base..tip` or `base...tip` of shas, tags or branch names: words |
| 55 | + * joined by single dots or slashes, so a range names no other API path. |
| 56 | + */ |
| 57 | +const RANGE = /^(\w[\w-]*(?:[./]\w[\w-]*)*)\.{2,3}(\w[\w-]*(?:[./]\w[\w-]*)*)$/; |
| 58 | + |
| 59 | +/** |
| 60 | + * A commit's record, its date as `git log --date=format:%b %d, %Y` prints |
| 61 | + * it, in UTC. |
| 62 | + * @param {ApiCommit} c |
| 63 | + * @returns {CommitRecord} |
| 64 | + */ |
| 65 | +export function recordOf(c) { |
| 66 | + const d = new Date(c.commit.author.date); |
| 67 | + return parseRecord({ |
| 68 | + sha: c.sha.slice(0, 9), |
| 69 | + author: c.commit.author.name, |
| 70 | + date: `${MONTHS[d.getUTCMonth()]} ${String(d.getUTCDate()).padStart(2, "0")}, ${d.getUTCFullYear()}`, |
| 71 | + message: c.commit.message, |
| 72 | + }); |
| 73 | +} |
| 74 | + |
| 75 | +/** |
| 76 | + * The commits a paginated listing holds, page after page until one comes |
| 77 | + * back short. A listing answers either an array or `{ commits }`. |
| 78 | + * @param {FetchJson} fetchJson |
| 79 | + * @param {string} path |
| 80 | + * @returns {Promise<ApiCommit[]>} |
| 81 | + */ |
| 82 | +async function listing(fetchJson, path) { |
| 83 | + /** @type {ApiCommit[]} */ |
| 84 | + const all = []; |
| 85 | + for (let page = 1; ; page++) { |
| 86 | + const answer = await fetchJson( |
| 87 | + `${path}${path.includes("?") ? "&" : "?"}per_page=${PAGE}&page=${page}`, |
| 88 | + ); |
| 89 | + /** @type {ApiCommit[]} */ |
| 90 | + const commits = Array.isArray(answer) ? answer : answer.commits; |
| 91 | + tooMany(answer.total_commits); |
| 92 | + all.push(...commits); |
| 93 | + if (commits.length < PAGE) return all; |
| 94 | + } |
| 95 | +} |
| 96 | + |
| 97 | +/** |
| 98 | + * Refuses a pull request or range of more commits than the viewer draws. |
| 99 | + * @param {number | undefined} count |
| 100 | + */ |
| 101 | +function tooMany(count) { |
| 102 | + if (count !== undefined && count > MAX_COMMITS) |
| 103 | + throw new Error( |
| 104 | + `It holds ${count} commits; the viewer draws at most ${MAX_COMMITS}.`, |
| 105 | + ); |
| 106 | +} |
| 107 | + |
| 108 | +/** |
| 109 | + * Records of the commits, merge commits left out as `git rev-list |
| 110 | + * --no-merges` leaves them. |
| 111 | + * @param {ApiCommit[]} commits |
| 112 | + */ |
| 113 | +const records = commits => |
| 114 | + commits.filter(c => c.parents.length < 2).map(recordOf); |
| 115 | + |
| 116 | +/** |
| 117 | + * The page the query asks for: its heading and its groups of records. |
| 118 | + * @param {URLSearchParams} query |
| 119 | + * @param {FetchJson} fetchJson |
| 120 | + * @returns {Promise<{ heading: { pr?: string, title?: string }, groups: Group[] }>} |
| 121 | + */ |
| 122 | +export async function load(query, fetchJson) { |
| 123 | + const pr = query.get("pr") ?? ""; |
| 124 | + const range = query.get("range") ?? ""; |
| 125 | + const commits = (query.get("commit") ?? "").split(",").filter(Boolean); |
| 126 | + if (pr && !/^\d+$/.test(pr)) throw new Error(`Not a pull request: ${pr}`); |
| 127 | + const ends = range ? RANGE.exec(range) : null; |
| 128 | + if (range && !ends) throw new Error(`Not a range: ${range}`); |
| 129 | + const bad = commits.find(c => !SHA.test(c)); |
| 130 | + if (bad) throw new Error(`Not a commit: ${bad}`); |
| 131 | + if (commits.length > MAX_NAMED) |
| 132 | + throw new Error( |
| 133 | + `The query names ${commits.length} commits; the viewer draws at most ${MAX_NAMED}.`, |
| 134 | + ); |
| 135 | + if (!pr && !ends && !commits.length) throw new Error(USAGE); |
| 136 | + |
| 137 | + /** @type {Group[]} */ |
| 138 | + const groups = []; |
| 139 | + /** @type {{ pr?: string, title?: string }} */ |
| 140 | + let heading = {}; |
| 141 | + if (pr) { |
| 142 | + const pull = await fetchJson(`/pulls/${pr}`); |
| 143 | + heading = { pr, title: pull.title }; |
| 144 | + if (!ends) { |
| 145 | + tooMany(pull.commits); |
| 146 | + groups.push({ |
| 147 | + range: `${pull.base.ref}..${pull.head.ref}`, |
| 148 | + records: records(await listing(fetchJson, `/pulls/${pr}/commits`)), |
| 149 | + }); |
| 150 | + } |
| 151 | + } |
| 152 | + if (ends) { |
| 153 | + const [, base, tip] = ends; |
| 154 | + groups.push({ |
| 155 | + range: `${base}..${tip}`, |
| 156 | + records: records(await listing(fetchJson, `/compare/${base}...${tip}`)), |
| 157 | + }); |
| 158 | + } |
| 159 | + for (const sha of commits) |
| 160 | + groups.push({ records: [recordOf(await fetchJson(`/commits/${sha}`))] }); |
| 161 | + return { heading, groups }; |
| 162 | +} |
| 163 | + |
| 164 | +/** |
| 165 | + * A request to GitHub's API, its failures as errors a reader can act on. |
| 166 | + * @type {FetchJson} |
| 167 | + */ |
| 168 | +async function fetchJson(path) { |
| 169 | + const response = await fetch(`${API}${path}`, { |
| 170 | + headers: { Accept: "application/vnd.github+json" }, |
| 171 | + }); |
| 172 | + if (response.ok) return response.json(); |
| 173 | + if (response.headers.get("x-ratelimit-remaining") === "0") { |
| 174 | + const reset = new Date( |
| 175 | + Number(response.headers.get("x-ratelimit-reset")) * 1000, |
| 176 | + ); |
| 177 | + throw new Error( |
| 178 | + `GitHub's API allows this address no more requests until ${reset.toLocaleTimeString()}.`, |
| 179 | + ); |
| 180 | + } |
| 181 | + throw new Error( |
| 182 | + response.status === 404 |
| 183 | + ? `GitHub found nothing at ${REPO}${path.replace(/\?.*/, "")}.` |
| 184 | + : `GitHub answered ${response.status} ${response.statusText}.`, |
| 185 | + ); |
| 186 | +} |
| 187 | + |
| 188 | +/** |
| 189 | + * Draws the page the address asks for into the document, or why it can't. |
| 190 | + */ |
| 191 | +export async function show() { |
| 192 | + const style = document.createElement("style"); |
| 193 | + style.textContent = CSS; |
| 194 | + document.head.append(style); |
| 195 | + try { |
| 196 | + const page = await load(new URLSearchParams(location.search), fetchJson); |
| 197 | + document.title = pageTitle(page.heading); |
| 198 | + document.body.innerHTML = pageBody(page.groups, page.heading); |
| 199 | + if (location.hash) |
| 200 | + document.getElementById(location.hash.slice(1))?.scrollIntoView(); |
| 201 | + } catch (e) { |
| 202 | + document.body.innerHTML = `<main><header><h1 class="brand">Semantic <span>Diff</span></h1><p class="lede">${esc(e instanceof Error ? e.message : String(e))}</p></header></main>`; |
| 203 | + } |
| 204 | +} |
0 commit comments