@tldraw/editor 5.4.1 → 5.5.0-canary.003bf5951274

package/src/lib/editor/derivations/bindingsIndex.ts

@@ -18,6 +18,8 @@ function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
 		} else {
 			bindingsForFromShape.push(binding)
 		}
+		// A binding from a shape to itself belongs in that shape's array once, not twice
+		if (toId === fromId) continue
 		const bindingsForToShape = shapesToBindings.get(toId)
 		if (!bindingsForToShape) {
 			shapesToBindings.set(toId, [binding])
@@ -83,6 +85,7 @@ export function bindingsIndex(editor: Editor): Computed<TLBindingsIndex> {
 
 		function addBinding(binding: TLBinding) {
 			ensureNewArray(binding.fromId).push(binding)
+			if (binding.toId === binding.fromId) return
 			ensureNewArray(binding.toId).push(binding)
 		}
 

package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.test.ts

@@ -262,15 +262,46 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should adjust scroll speed based on zoom level', () => {
-			editor.getZoomLevel.mockReturnValue(2)
 			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom1 = (editor.setCamera.mock.calls[0][0] as Vec).x
+
+			editor.setCamera.mockClear()
+			edgeScrollManager = new EdgeScrollManager(editor)
+			editor.getZoomLevel.mockReturnValue(2)
+			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom2 = (editor.setCamera.mock.calls[0][0] as Vec).x
 
-			expect(editor.setCamera).toHaveBeenCalled()
-			const callArgs = editor.setCamera.mock.calls[0][0] as Vec
 			// Higher zoom should result in smaller camera movement
-			expect(Math.abs(callArgs.x)).toBeLessThan(25)
+			expect(atZoom2).toBeCloseTo(atZoom1 / 2)
+		})
+
+		it('should move the same distance per second regardless of tick rate', () => {
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
+
+			// Get past the delay and easing ramp so each tick moves at full speed
+			edgeScrollManager.updateEdgeScrolling(1000)
+			editor.setCamera.mockClear()
+
+			// One second of 60 Hz ticks
+			for (let i = 0; i < 60; i++) edgeScrollManager.updateEdgeScrolling(1000 / 60)
+			const at60Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			editor.setCamera.mockClear()
+
+			// One second of 120 Hz ticks
+			for (let i = 0; i < 120; i++) edgeScrollManager.updateEdgeScrolling(1000 / 120)
+			const at120Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			expect(at60Hz).toBeGreaterThan(0)
+			expect(at120Hz).toBeCloseTo(at60Hz)
 		})
 
 		it('should add scroll delta to current camera position', () => {

package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.ts

@@ -1,3 +1,4 @@
+import { FRAME_MS_60HZ } from '../../../constants'
 import { EASINGS } from '../../../primitives/easings'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
@@ -51,10 +52,13 @@ export class EdgeScrollManager {
 								)
 							)
 						: 1
-				this.moveCameraWhenCloseToEdge({
-					x: edgeScrollProximityFactor.x * eased,
-					y: edgeScrollProximityFactor.y * eased,
-				})
+				this.moveCameraWhenCloseToEdge(
+					{
+						x: edgeScrollProximityFactor.x * eased,
+						y: edgeScrollProximityFactor.y * eased,
+					},
+					elapsed
+				)
 			}
 		}
 	}
@@ -112,7 +116,7 @@ export class EdgeScrollManager {
 	 * Moves the camera when the mouse is close to the edge of the screen.
 	 * @public
 	 */
-	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }) {
+	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }, elapsed: number) {
 		if (proximityFactor.x === 0 && proximityFactor.y === 0) return
 		const { editor } = this
 
@@ -128,9 +132,11 @@ export class EdgeScrollManager {
 				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
 				: 1
 
-		// Determines the base speed of the scroll
+		// Determines the base speed of the scroll. edgeScrollSpeed is px per 60 Hz frame, so scale
+		// by elapsed time or a 120 Hz display scrolls twice as fast.
 		const zoomLevel = editor.getZoomLevel()
-		const pxSpeed = editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed
+		const pxSpeed =
+			editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed * (elapsed / FRAME_MS_60HZ)
 		const scrollDeltaX = (pxSpeed * proximityFactor.x * screenSizeFactorX) / zoomLevel
 		const scrollDeltaY = (pxSpeed * proximityFactor.y * screenSizeFactorY) / zoomLevel
 

package/src/lib/editor/managers/TextManager/TextManager.test.ts

@@ -307,6 +307,80 @@ describe('TextManager', () => {
 			expect(result.spans[0].text).toBe(`a${family}b`)
 		})
 
+		it('should measure each text node with its own offsets', () => {
+			const starts: [unknown, number][] = []
+			const RangeMock = global.Range as unknown as ReturnType<typeof vi.fn>
+			RangeMock.mockImplementationOnce(function () {
+				return {
+					setStart: vi.fn((node: unknown, offset: number) => starts.push([node, offset])),
+					setEnd: vi.fn(),
+					getClientRects: vi.fn(() => [
+						{ width: 10, height: 16, left: 0, top: 0, right: 10, bottom: 16 },
+					]),
+				}
+			})
+
+			const first = { nodeType: 3, textContent: 'ab' }
+			const second = { nodeType: 3, textContent: 'cd' }
+			const mockElementWithText = {
+				childNodes: [first, { nodeType: 1 }, second],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			textManager.measureElementTextNodeSpans(mockElementWithText as any)
+
+			// the range must be placed in the node being measured, not the first one
+			expect(starts).toEqual([
+				[first, 0],
+				[first, 1],
+				[second, 0],
+				[second, 1],
+			])
+		})
+
+		it('should stop measuring later text nodes once the first line is truncated', () => {
+			const starts: [unknown, number][] = []
+			let current: { textContent: string } | null = null
+			const RangeMock = global.Range as unknown as ReturnType<typeof vi.fn>
+			RangeMock.mockImplementationOnce(function () {
+				return {
+					setStart: vi.fn((node: { textContent: string }, offset: number) => {
+						current = node
+						starts.push([node, offset])
+					}),
+					setEnd: vi.fn(),
+					// the second node sits on a new line
+					getClientRects: vi.fn(() => {
+						const top = current?.textContent === 'cd' ? 16 : 0
+						return [{ width: 10, height: 16, left: 0, top, right: 10, bottom: top + 16 }]
+					}),
+				}
+			})
+
+			const first = { nodeType: 3, textContent: 'ab' }
+			const second = { nodeType: 3, textContent: 'cd' }
+			const third = { nodeType: 3, textContent: 'ef' }
+			const mockElementWithText = {
+				childNodes: [first, second, third],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			const result = textManager.measureElementTextNodeSpans(mockElementWithText as any, {
+				shouldTruncateToFirstLine: true,
+			})
+
+			expect(result).toEqual({
+				spans: [{ box: { x: 0, y: 0, w: 10, h: 16 }, text: 'ab' }],
+				didTruncate: true,
+			})
+			// the third node must never be measured
+			expect(starts).toEqual([
+				[first, 0],
+				[first, 1],
+				[second, 0],
+			])
+		})
+
 		it('should handle truncation option', () => {
 			const mockTextNode = {
 				nodeType: 3, // TEXT_NODE

package/src/lib/editor/managers/TextManager/TextManager.ts

@@ -292,10 +292,8 @@ export class TextManager extends EditorManager {
 		const offsetX = -elmBounds.left
 		const offsetY = -elmBounds.top
 
-		// we measure by creating a range that spans each character in the elements text node
+		// we measure by creating a range that spans each character in the elements text nodes
 		const range = new Range()
-		const textNode = element.childNodes[0]
-		let idx = 0
 
 		let currentSpan = null
 		let prevCharWasSpaceCharacter = null
@@ -303,12 +301,15 @@ export class TextManager extends EditorManager {
 		let prevCharLeftForRTLTest = 0
 		let didTruncate = false
 		for (const childNode of element.childNodes) {
+			if (didTruncate) break
 			if (childNode.nodeType !== Node.TEXT_NODE) continue
 
+			// offsets are per text node, or the range would index past the node's end
+			let idx = 0
 			for (const segment of iterateGraphemes(childNode.textContent ?? '')) {
 				// place the range around the grapheme we're interested in
-				range.setStart(textNode, idx)
-				range.setEnd(textNode, idx + segment.length)
+				range.setStart(childNode, idx)
+				range.setEnd(childNode, idx + segment.length)
 				// measure the range. some browsers return multiple rects for the
 				// first char in a new line - one for the line break, and one for
 				// the character itself. we're only interested in the character.

package/src/lib/editor/managers/ThemeManager/ThemeManager.test.ts

@@ -0,0 +1,53 @@
+import { TLTheme } from '@tldraw/tlschema'
+import { MockInstance, vi } from 'vitest'
+import { TestEditor } from '../../../test/TestEditor'
+import { DEFAULT_THEME } from './defaultThemes'
+
+// Optional so that other tests' theme objects still satisfy TLThemes.
+declare module '@tldraw/tlschema' {
+	interface TLThemes {
+		ocean?: TLTheme
+		sunset?: TLTheme
+	}
+}
+
+const oceanTheme: TLTheme = { ...DEFAULT_THEME, id: 'ocean' }
+
+let editor: TestEditor
+let warn: MockInstance
+
+beforeEach(() => {
+	editor = new TestEditor({ themes: { ocean: oceanTheme } })
+	warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+	warn.mockRestore()
+	editor.dispose()
+})
+
+describe('setCurrentTheme', () => {
+	it('switches to a registered theme', () => {
+		editor.setCurrentTheme('ocean')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+		expect(warn).not.toHaveBeenCalled()
+	})
+
+	it('warns and keeps the current theme when the id is not registered', () => {
+		editor.setCurrentTheme('sunset')
+
+		expect(warn).toHaveBeenCalledWith("Theme 'sunset' not found. Available themes: default, ocean")
+		expect(editor.getCurrentThemeId()).toBe('default')
+		expect(editor.getCurrentTheme()).toBe(DEFAULT_THEME)
+	})
+
+	it('keeps the previous theme rather than falling back to default', () => {
+		editor.setCurrentTheme('ocean')
+		editor.setCurrentTheme('sunset')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+	})
+})

package/src/lib/editor/managers/ThemeManager/ThemeManager.ts

@@ -69,14 +69,20 @@ export class ThemeManager {
 		return this._themes.get()[this.getCurrentThemeId()]!
 	}
 
-	/** Set the current theme by id. The theme must have been previously registered. */
+	/**
+	 * Set the current theme by id. The theme must have been previously registered; an
+	 * unregistered id is ignored and the current theme is kept.
+	 */
 	setCurrentTheme(id: TLThemeId): void {
-		if (process.env.NODE_ENV !== 'production') {
-			if (!(id in this._themes.get())) {
+		// Storing an unregistered id would make getCurrentTheme() return
+		// undefined despite its TLTheme return type.
+		if (!(id in this._themes.get())) {
+			if (process.env.NODE_ENV !== 'production') {
 				console.warn(
 					`Theme '${id}' not found. Available themes: ${Object.keys(this._themes.get()).join(', ')}`
 				)
 			}
+			return
 		}
 
 		this._currentThemeId.set(id)

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -39,14 +39,29 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 			return new Rectangle2d({ width: 1, height: 1, isFilled: false })
 		}
 
-		return new Group2d({
-			children: children.map((childId) => {
-				const shape = this.editor.getShape(childId)!
-				return this.editor
-					.getShapeGeometry(childId)
-					.transform(this.editor.getShapeLocalTransform(shape)!, { isLabel: false })
-			}),
-		})
+		// A child id can outlive its record. The children index and the geometry cache are separate
+		// derivations, so inside a transaction that removes a child the index can still name it while
+		// `getShapeGeometry` already answers nothing — its `!` hides that it returns `undefined` for a
+		// record the store no longer holds. Asserting instead of checking threw a `TypeError` out of a
+		// reactive recompute, where no caller could catch it.
+		const geometries: Geometry2d[] = []
+		for (const childId of children) {
+			const child = this.editor.getShape(childId)
+			if (!child) continue
+			const geometry = this.editor.getShapeGeometry(childId)
+			if (!geometry) continue
+			const transform = this.editor.getShapeLocalTransform(child)
+			if (!transform) continue
+			geometries.push(geometry.transform(transform, { isLabel: false }))
+		}
+
+		// Every child resolved to nothing, so there is no meaningful extent to report. Matches the
+		// no-children case above rather than building an empty `Group2d`, whose bounds are `NaN`.
+		if (geometries.length === 0) {
+			return new Rectangle2d({ width: 1, height: 1, isFilled: false })
+		}
+
+		return new Group2d({ children: geometries })
 	}
 
 	component(shape: TLGroupShape) {

package/src/lib/editor/types/external-content.ts

@@ -73,6 +73,11 @@ export interface TLFileReplaceExternalContent extends TLBaseExternalContent {
 export interface TLUrlExternalContent extends TLBaseExternalContent {
 	type: 'url'
 	url: string
+	/**
+	 * A shape to set the url on, instead of creating a bookmark or an embed. The shape must have a
+	 * `url` prop; the clipboard sets this when a link is pasted with one such shape selected.
+	 */
+	shapeId?: TLShapeId
 }
 
 /** @public */

package/src/lib/exports/ExportDelay.tsx

@@ -1,4 +1,4 @@
-import { bind, sleep } from '@tldraw/utils'
+import { bind, noop, promiseWithResolve, sleep } from '@tldraw/utils'
 
 /**
  * Export delay is a helper class that allows you to wait for a set of promises to resolve before
@@ -11,8 +11,20 @@ import { bind, sleep } from '@tldraw/utils'
 export class ExportDelay {
 	private isResolved = false
 	private readonly promisesToWaitFor: Promise<void>[] = []
+	private readonly failure = promiseWithResolve<never>()
 
-	constructor(private readonly maxDelayTimeMs: number) {}
+	constructor(private readonly maxDelayTimeMs: number) {
+		// only observed inside `resolve`, so a `fail` before then would otherwise be an unhandled rejection
+		this.failure.catch(noop)
+	}
+
+	/**
+	 * Abort the export: `resolve` rejects with this error instead of waiting out the delay and
+	 * snapshotting a broken svg.
+	 */
+	@bind fail(error: unknown): void {
+		this.failure.reject(error)
+	}
 
 	@bind waitUntil(promise: Promise<void>): void {
 		if (this.isResolved) {
@@ -40,9 +52,9 @@ export class ExportDelay {
 		const timeoutPromise = sleep(this.maxDelayTimeMs).then(() => 'timeout' as const)
 		const resolvePromise = this.resolvePromises().then(() => 'resolved' as const)
 
-		const result = await Promise.race([timeoutPromise, resolvePromise])
+		const result = await Promise.race([timeoutPromise, resolvePromise, this.failure])
 		if (result === 'timeout') {
-			console.warn('[tldraw] Export delay timed out after ${this.maxDelayTimeMs}ms')
+			console.warn(`[tldraw] Export delay timed out after ${this.maxDelayTimeMs}ms`)
 		}
 
 		this.isResolved = true

package/src/lib/exports/FontEmbedder.test.ts

@@ -0,0 +1,99 @@
+import { vi } from 'vitest'
+import { fetchCssFontFaces, FontEmbedder } from './FontEmbedder'
+import { parseCssFontFaces } from './parseCss'
+
+describe('FontEmbedder', () => {
+	let style: HTMLStyleElement
+
+	beforeEach(() => {
+		style = document.createElement('style')
+		style.textContent = `
+			@font-face { font-family: 'Font A'; src: url('/font-a.woff2'); }
+			@font-face { font-family: 'Font B'; src: url('/font-b.woff2'); }
+		`
+		document.head.appendChild(style)
+	})
+
+	afterEach(() => {
+		style.remove()
+	})
+
+	it('embeds every family in a font-family list, even when an earlier one was already seen', async () => {
+		const embedder = new FontEmbedder()
+		embedder.startFindingDocumentFontFaces(document)
+
+		embedder.onFontFamilyValue(`'Font A'`)
+		embedder.onFontFamilyValue(`'Font A', 'Font B'`)
+
+		const css = await embedder.createCss()
+		expect(css).toContain('Font A')
+		expect(css).toContain('Font B')
+	})
+
+	it('retries a failed font fetch on the next export', async () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {})
+		// the parsed sheet is shared across exports through the fetch cache
+		const fontFaces = parseCssFontFaces(
+			`@font-face { font-family: 'Font A'; src: url(a.woff2); }`,
+			'https://example.com/fonts.css'
+		)
+		const blob = new Blob(['font'], { type: 'font/woff2' })
+		vi.spyOn(window, 'fetch')
+			.mockResolvedValueOnce({ ok: false } as Response)
+			.mockResolvedValue({ ok: true, blob: async () => blob } as Response)
+
+		const exportCss = async () => {
+			const embedder = new FontEmbedder()
+			embedder.startFindingDocumentFontFaces(document)
+			;(embedder as any).fontFacesPromise = Promise.resolve(fontFaces)
+			embedder.onFontFamilyValue(`'Font A'`)
+			return embedder.createCss()
+		}
+
+		expect(await exportCss()).toContain('url(a.woff2)')
+		expect(await exportCss()).toContain('data:font/woff2;base64,')
+	})
+})
+
+describe('fetchCssFontFaces', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('resolves when stylesheets @import each other', async () => {
+		const sheets: Record<string, string> = {
+			'https://example.com/a.css': `@import url(b.css); @font-face { font-family: 'Font A'; src: url(a.woff2); }`,
+			'https://example.com/b.css': `@import url(a.css); @font-face { font-family: 'Font B'; src: url(b.woff2); }`,
+		}
+		vi.spyOn(window, 'fetch').mockImplementation(async (input) => {
+			const url = String(input)
+			return { ok: true, url, text: async () => sheets[url] } as Response
+		})
+
+		const fontFaces = await fetchCssFontFaces('https://example.com/a.css')
+		expect(fontFaces.map((f) => [...f.fontFamilies])).toEqual([['font a'], ['font b']])
+	})
+
+	it('keeps font order in source order when siblings import the same sheet', async () => {
+		const sheets: Record<string, string> = {
+			'https://example.com/root.css': `@import url(c.css); @import url(d.css);`,
+			'https://example.com/c.css': `@import url(e.css); @font-face { font-family: 'Font C'; src: url(c.woff2); }`,
+			'https://example.com/d.css': `@import url(e.css); @font-face { font-family: 'Font D'; src: url(d.woff2); }`,
+			'https://example.com/e.css': `@font-face { font-family: 'Font E'; src: url(e.woff2); }`,
+		}
+		vi.spyOn(window, 'fetch').mockImplementation(async (input) => {
+			const url = String(input)
+			// the first sibling resolves last, so the shared sheet is reached through the second first
+			if (url.endsWith('c.css')) await new Promise((resolve) => setTimeout(resolve, 20))
+			return { ok: true, url, text: async () => sheets[url] } as Response
+		})
+
+		const fontFaces = await fetchCssFontFaces('https://example.com/root.css')
+		expect(fontFaces.map((f) => [...f.fontFamilies][0])).toEqual([
+			'font c',
+			'font e',
+			'font d',
+			'font e',
+		])
+	})
+})

package/src/lib/exports/FontEmbedder.ts

@@ -24,6 +24,9 @@ export class FontEmbedder {
 	private fontFacesPromise: Promise<ParsedFontFace[]> | null = null
 	private readonly foundFontNames = new Set<string>()
 	private readonly fontFacesToEmbed = new Set<ParsedFontFace>()
+	// per export, keyed by resolved url: parsed font faces are shared across exports through the
+	// fetch cache, so a failed fetch stored on them would never be retried
+	private readonly embeddedUrls = new Map<string, Promise<string | null>>()
 	private readonly pendingPromises: Promise<void>[] = []
 
 	startFindingDocumentFontFaces(doc: Document) {
@@ -36,7 +39,7 @@ export class FontEmbedder {
 
 		const fonts = parseCssFontFamilyValue(fontFamilyValue)
 		for (const font of fonts) {
-			if (this.foundFontNames.has(font)) return
+			if (this.foundFontNames.has(font)) continue
 			this.foundFontNames.add(font)
 
 			this.pendingPromises.push(
@@ -47,9 +50,9 @@ export class FontEmbedder {
 
 						this.fontFacesToEmbed.add(fontFace)
 						for (const url of fontFace.urls) {
-							if (!url.resolved || url.embedded) continue
+							if (!url.resolved || this.embeddedUrls.has(url.resolved)) continue
 							// kick off fetching this font
-							url.embedded = resourceToDataUrl(url.resolved)
+							this.embeddedUrls.set(url.resolved, resourceToDataUrl(url.resolved))
 						}
 					}
 				})
@@ -66,11 +69,11 @@ export class FontEmbedder {
 			let fontFaceString = `@font-face {${fontFace.fontFace}}`
 
 			for (const url of fontFace.urls) {
-				if (!url.embedded) continue
-				const dataUrl = await url.embedded
+				if (!url.resolved) continue
+				const dataUrl = await this.embeddedUrls.get(url.resolved)
 				if (!dataUrl) continue
 
-				fontFaceString = fontFaceString.replace(url.original, dataUrl)
+				fontFaceString = fontFaceString.replace(url.original, () => dataUrl)
 			}
 
 			css += fontFaceString
@@ -119,12 +122,30 @@ async function getDocumentFontFaces(doc: Document) {
 	return compact(await Promise.all(fontFaces)).flat()
 }
 
-const fetchCssFontFaces = fetchCache(async (response: Response): Promise<ParsedFontFace[]> => {
+const fetchParsedCss = fetchCache(async (response: Response) => {
 	const parsed = parseCss(await response.text(), response.url)
+	return {
+		fontFaces: parsed.fontFaces,
+		importUrls: parsed.imports.map(({ url }) => new URL(url, response.url).href),
+	}
+})
+
+/** @internal */
+export async function fetchCssFontFaces(
+	url: string,
+	// the chain of sheets that imported this one: sheets that @import each other would otherwise
+	// await their own in-flight fetch forever. Each branch gets its own copy so a sheet imported by
+	// two siblings lands under both in source order, not under whichever fetch resolved first.
+	seen = new Set<string>()
+): Promise<ParsedFontFace[]> {
+	if (seen.has(url)) return []
+	seen.add(url)
+
+	const parsed = await fetchParsedCss(url)
+	if (!parsed) return []
 
 	const importedFontFaces = await Promise.all(
-		parsed.imports.map(({ url }) => fetchCssFontFaces(new URL(url, response.url).href))
+		parsed.importUrls.map((importUrl) => fetchCssFontFaces(importUrl, new Set(seen)))
 	)
-
-	return [...parsed.fontFaces, ...compact(importedFontFaces).flat()]
-})
+	return [...parsed.fontFaces, ...importedFontFaces.flat()]
+}

package/src/lib/exports/StyleEmbedder.ts

@@ -92,10 +92,19 @@ export class StyleEmbedder {
 					if (urlMatches.length === 0) continue
 
 					promises.push(
-						...urlMatches.map(async ({ url, original }) => {
-							const dataUrl = (await resourceToDataUrl(url)) ?? 'data:'
-							styles[property] = value.replace(original, `url("${dataUrl}")`)
-						})
+						(async () => {
+							// resolve every url first, then rewrite the value in one pass - replacing
+							// per-url from the original value would keep only whichever resolved last.
+							// The replacer callback keeps `$` in a data url's mime segment literal.
+							const dataUrls = await Promise.all(
+								urlMatches.map(({ url }) => resourceToDataUrl(url))
+							)
+							styles[property] = urlMatches.reduce(
+								(result, { original }, i) =>
+									result.replace(original, () => `url("${dataUrls[i] ?? 'data:'}")`),
+								value
+							)
+						})()
 					)
 				}
 			}

package/src/lib/exports/fetchCache.test.ts

@@ -0,0 +1,22 @@
+import { vi } from 'vitest'
+import { fetchCache } from './fetchCache'
+
+describe('fetchCache', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('caches successes but retries after a failure', async () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {})
+		const fetchSpy = vi
+			.spyOn(window, 'fetch')
+			.mockResolvedValueOnce({ ok: false } as Response)
+			.mockResolvedValue({ ok: true, text: async () => 'hello' } as Response)
+		const fetchText = fetchCache((response) => response.text())
+
+		expect(await fetchText('https://example.com/a')).toBe(null)
+		expect(await fetchText('https://example.com/a')).toBe('hello')
+		expect(await fetchText('https://example.com/a')).toBe('hello')
+		expect(fetchSpy).toHaveBeenCalledTimes(2)
+	})
+})

package/src/lib/exports/fetchCache.ts

@@ -18,6 +18,10 @@ export function fetchCache<T>(cb: (response: Response) => Promise<T>, init?: Req
 			}
 		})()
 		cache.set(url, promise)
+		// only keep successes, otherwise a transient failure poisons this url for the whole session
+		promise.then((result) => {
+			if (result === null && cache.get(url) === promise) cache.delete(url)
+		})
 		return promise
 	}
 }