Going back to the original use case for types. We have a music app with 4 pages:
- Home
- Playlist
- What's new
- Song
const next_frame = () => Promise(resolve => requestAnimationFrame(ts => resolve(ts)); | |
async function get_img_presentation_time(img) { | |
// Wait until image is fully loaded | |
await new Promise(resolve => img.complete ? resolve() : img.addEventListener("load", resolve)) | |
let frame_timestamp = await next_frame(); | |
// Wait until we have the frame timestamp soonest after the image was decoded. |
const events = []; | |
let current_dequeue_end = 0; | |
function dequeue() { | |
// Ready to process, will send all current events. | |
current_dequeue_end = events.length; | |
fetchLater(makeURL(events)).then(({activated}) => { | |
if (activated) { | |
// Success, remove processed sub-array from the array and reset the index. | |
events.splice(0, current_deque_end); | |
current_dequeue_end = 0; |
(function() { | |
let pending_loaf_entries = []; | |
let pending_event_entries = []; | |
let timeout_handle = null; | |
const combined_map = new Map(); | |
function print() { | |
const entries = [...combined_map.entries()].sort((a, b) => b.duration - a.duration); | |
console.log(entries.map(([loaf, event]) => { | |
let longest_script = null; |
(function init() { | |
function processAndFilterLoAFs(entries) { | |
function floorObject(o) { | |
return Object.fromEntries(Array.from(Object.entries(o)).map(([key, value]) => [key, typeof value === "number" ? Math.floor(value) : | |
value | |
])) | |
} | |
function processEntry(entry) { | |
const startTime = entry.startTime; |
function parseHTML(getNextElement) { | |
let doneParsing = null; | |
const whenDoneParsing = new Promise(resolve => { doneParsing = resolve; }); | |
while (const element = getNextElement()) { | |
if (element.tagName !== "SCRIPT") { | |
// parse everything else... | |
continue; | |
} |
function hasPendingIncomingTransition() { } | |
function isRenderBlocked() { } | |
function continueIncomingTransition() { } | |
let hasSeenFold = false; | |
let lastFoldCheckTime = performance.now(); | |
const FoldCheckThrolttle = 100; | |
function didSeeFold() { | |
if (hasSeenFold || !hasPendingIncomingTransition()) |
<!DOCTYPE html> | |
<head> | |
<meta name="view-transition" content="same-origin"> | |
</head> | |
<body> | |
<style> | |
h1 { | |
view-transition-name: hero; | |
} |
class UserlandPendingBeacon { | |
#abortController = null; | |
// Let's imagine it's a list of plain objects. | |
#pendingEntries = []; | |
// URL, headers, defer options etc | |
#requestInit; | |
constructor(requestInit) { |