uplot-webgpu 0.1.0 → 0.2.0

package/scripts/{webgpu → ts/webgpu}/WebGPURenderer.ts

@@ -1,6 +1,7 @@
-// @ts-nocheck
-import { GPUPath } from './GPUPath.js';
-import { CHART_WGSL, IMAGE_WGSL } from './shaders.js';
+// import "@webgpu/types"
+import { GPUPath } from './GPUPath';
+import type { GPUPathSubpath } from './GPUPath';
+import { CHART_WGSL, IMAGE_WGSL } from './shaders';
 
 const DEFAULT_COLOR = [0, 0, 0, 1];
 const TRANSPARENT = [0, 0, 0, 0];
@@ -759,7 +760,7 @@ function parseCssColorWithDom(str) {
 	if (typeof document == 'undefined')
 		return null;
 
-	let probe = parseCssColorWithDom._probe;
+	let probe = (parseCssColorWithDom as any)._probe;
 
 	if (probe == null) {
 		probe = document.createElement('span');
@@ -768,7 +769,7 @@ function parseCssColorWithDom(str) {
 		probe.style.top = '-99999px';
 		probe.style.visibility = 'hidden';
 		document.documentElement.appendChild(probe);
-		parseCssColorWithDom._probe = probe;
+		(parseCssColorWithDom as any)._probe = probe;
 	}
 
 	probe.style.color = '';
@@ -1563,10 +1564,19 @@ function isImageDataLike(source) {
 	return source != null && source.data != null && Number.isFinite(Number(source.width)) && Number.isFinite(Number(source.height));
 }
 
-function createImageDataObject(width, height, data = null) {
+function createImageDataPixels(width: number, height: number, data: Uint8ClampedArray | null = null): Uint8ClampedArray<ArrayBuffer> {
+	let pixels = new Uint8ClampedArray(width * height * 4);
+
+	if (data instanceof Uint8ClampedArray)
+		pixels.set(data.subarray(0, pixels.length));
+
+	return pixels;
+}
+
+function createImageDataObject(width: number, height: number, data: Uint8ClampedArray | null = null) {
 	width = Math.max(0, Math.floor(Number(width) || 0));
 	height = Math.max(0, Math.floor(Number(height) || 0));
-	let pixels = data instanceof Uint8ClampedArray ? data : new Uint8ClampedArray(width * height * 4);
+	let pixels = createImageDataPixels(width, height, data);
 
 	if (typeof ImageData != 'undefined') {
 		try {
@@ -1897,12 +1907,11 @@ async function createWebGPURuntime(owner, epoch) {
 
 	let adapterInfo = null;
 	try {
-		if (adapter.info)
-			adapterInfo = {vendor: adapter.info.vendor || '', architecture: adapter.info.architecture || '', device: adapter.info.device || '', description: adapter.info.description || ''};
-		else if (typeof adapter.requestAdapterInfo == 'function') {
-			let info = await adapter.requestAdapterInfo();
+		let adapterWithLegacyInfo = adapter as GPUAdapter & {requestAdapterInfo?: () => Promise<GPUAdapterInfo>};
+		let info = adapter.info || (typeof adapterWithLegacyInfo.requestAdapterInfo == 'function' ? await adapterWithLegacyInfo.requestAdapterInfo() : null);
+
+		if (info)
 			adapterInfo = {vendor: info.vendor || '', architecture: info.architecture || '', device: info.device || '', description: info.description || ''};
-		}
 	}
 	catch (err) {
 		adapterInfo = null;
@@ -1928,7 +1937,7 @@ async function createWebGPURuntime(owner, epoch) {
 	});
 	let pipelineLayout = device.createPipelineLayout({bindGroupLayouts: [bindGroupLayout]});
 	let imagePipelineLayout = device.createPipelineLayout({bindGroupLayouts: [bindGroupLayout, imageBindGroupLayout]});
-	let runtime = {
+	let runtime: any = {
 		adapter,
 		adapterInfo,
 		device,
@@ -2296,7 +2305,7 @@ function measureTextWithDom(font, text, state = null) {
 	if (typeof document == 'undefined')
 		return null;
 
-	let probe = measureTextWithDom._probe;
+	let probe = (measureTextWithDom as any)._probe;
 
 	if (probe == null) {
 		probe = document.createElement('span');
@@ -2306,7 +2315,7 @@ function measureTextWithDom(font, text, state = null) {
 		probe.style.visibility = 'hidden';
 		probe.style.whiteSpace = 'pre';
 		document.documentElement.appendChild(probe);
-		measureTextWithDom._probe = probe;
+		(measureTextWithDom as any)._probe = probe;
 	}
 
 	probe.style.font = font || '12px sans-serif';
@@ -2323,8 +2332,91 @@ function measureTextWithDom(font, text, state = null) {
 	return rect.width;
 }
 
+export type RGBA = [number, number, number, number];
+export type WebGPUMemoryMode = 'low' | 'balanced' | 'throughput';
+
+export interface WebGPURendererOptions {
+	sharedRuntime?: boolean;
+	alpha?: boolean;
+	colorSpace?: PredefinedColorSpace;
+	desynchronized?: boolean;
+	memory?: WebGPUMemoryMode;
+	memoryMode?: WebGPUMemoryMode;
+	retainCommands?: boolean;
+	retainCommandsForReadback?: boolean;
+	releaseCommandsAfterPresent?: boolean;
+	maxRetainedUploadBytes?: number;
+	maxRetainedVertexBufferBytes?: number;
+	maxTextureBytes?: number;
+	maxTextureRecords?: number;
+	maxColorCacheEntries?: number;
+	maxTextMeasureCacheEntries?: number;
+}
+
+export interface WebGPURendererFrameStats {
+	cpuMs: number;
+	prepMs: number;
+	uploadMs: number;
+	submitMs: number;
+	drawCalls: number;
+	vertices: number;
+	bytes: number;
+	writes: number;
+	images: number;
+	clips: number;
+	retainedCPUBytes?: number;
+	retainedGPUBytes?: number;
+	textureBytes?: number;
+	commandsReleased?: boolean;
+}
+
+export interface WebGPURendererMemoryStats {
+	mode: WebGPUMemoryMode;
+	commands: number;
+	commandsReleased: boolean;
+	retainedCPUBytes: number;
+	retainedGPUBytes: number;
+	solidUploadBytes: number;
+	imageUploadBytes: number;
+	solidBufferBytes: number;
+	imageBufferBytes: number;
+	textureBytes: number;
+	textureRecords: number;
+}
+
+export interface WebGPUWarmupStats {
+	ok: boolean;
+	ms: number;
+	submitted?: boolean;
+	sharedRuntime?: boolean;
+	error?: string;
+	runtime?: WebGPURuntimeStats;
+}
+
+export interface WebGPURuntimeStats {
+	enabled?: boolean;
+	active?: boolean;
+	refs?: number;
+	adapterInfo?: Record<string, unknown>;
+	format?: GPUTextureFormat | null;
+	compositePipelines?: number;
+	imagePipelines?: number;
+}
+
+export interface CanvasGradientLike {
+	addColorStop(offset: number, color: string): void;
+	colorAt?(x: number, y: number, alpha?: number): number[];
+}
+
+export interface CanvasPatternLike {
+	setTransform?(transform?: DOMMatrix2DInit): void;
+}
+
 export class WebGPURenderer {
-	constructor(canvas, options = null) {
+	[key: string]: any;
+	static sharedRuntimeEnabled: boolean;
+	static sharedRuntime: any;
+	constructor(canvas: HTMLCanvasElement | OffscreenCanvas, options: WebGPURendererOptions | null = null) {
 		this.canvas = canvas;
 		this.options = options || {};
 		this.memory = normalizeMemoryOptions(this.options);
@@ -2434,15 +2526,15 @@ export class WebGPURenderer {
 		this.initPromise = this.init();
 	}
 
-	static setSharedRuntimeEnabled(enabled) {
+	static setSharedRuntimeEnabled(enabled: boolean): void {
 		sharedRuntimeEnabled = enabled !== false;
 	}
 
-	static async prewarm(options = null) {
+	static async prewarm(options: {sharedRuntime?: boolean; width?: number; height?: number; canvas?: HTMLCanvasElement | OffscreenCanvas} | null = null): Promise<WebGPUWarmupStats> {
 		return prewarmWebGPURuntime(options);
 	}
 
-	static getSharedRuntimeStats() {
+	static getSharedRuntimeStats(): WebGPURuntimeStats {
 		return {
 			enabled: sharedRuntimeEnabled,
 			active: sharedRuntime != null && !sharedRuntime.lost,
@@ -2454,23 +2546,23 @@ export class WebGPURenderer {
 		};
 	}
 
-	getLastFrameStats() {
+	getLastFrameStats(): WebGPURendererFrameStats {
 		return {...this.lastFrameStats};
 	}
 
-	getDevice() {
+	getDevice(): GPUDevice | null {
 		return this.device;
 	}
 
-	getRuntime() {
+	getRuntime(): unknown {
 		return this.runtime;
 	}
 
-	getCanvasContext() {
+	getCanvasContext(): GPUCanvasContext | null {
 		return this.context;
 	}
 
-	async init() {
+	async init(): Promise<void> {
 		let epoch = ++this.initEpoch;
 
 		if (this.disposed)
@@ -2598,7 +2690,7 @@ export class WebGPURenderer {
 		}
 	}
 
-	mount(wrap, canvas) {
+	mount(wrap: Element, canvas: any): void {
 		if (typeof document == 'undefined' || this.textLayer != null)
 			return;
 
@@ -2686,7 +2778,7 @@ export class WebGPURenderer {
 		return this.disposed || this.failed || this.device == null && this.initPromise == null;
 	}
 
-	async flush() {
+	async flush(): Promise<void> {
 		if (!this.ready && this.initPromise != null)
 			await this.initPromise;
 		try {
@@ -2740,7 +2832,7 @@ export class WebGPURenderer {
 		this.contextConfigured = false;
 	}
 
-	getMemoryStats() {
+	getMemoryStats(): WebGPURendererMemoryStats {
 		let retainedCPUBytes = byteLengthOf(this.solidUploadArray) + byteLengthOf(this.imageUploadArray) + byteLengthOf(this.uniformUploadArray);
 		let retainedGPUBytes = (this.vertexBufferSize || 0) + (this.imageVertexBufferSize || 0) + (this.uniformBuffer ? 16 : 0) + (this.textureBytes || 0);
 		return {
@@ -2788,7 +2880,7 @@ export class WebGPURenderer {
 		}
 	}
 
-	trimMemory() {
+	trimMemory(): WebGPURendererMemoryStats {
 		this.trimUploadArrays();
 		this.trimCaches();
 		if (this.commands.length == 0 || this.frameCommandsReleased)
@@ -2932,7 +3024,7 @@ export class WebGPURenderer {
 		if (this.textureRecords.size <= maxRecords && this.textureBytes <= maxBytes)
 			return;
 
-		let victims = Array.from(this.textureRecords).filter(record => record !== keep).sort((a, b) => (a.lastUsed || 0) - (b.lastUsed || 0));
+		let victims = Array.from(this.textureRecords as Set<any>).filter(record => record !== keep).sort((a, b) => (a.lastUsed || 0) - (b.lastUsed || 0));
 		for (let record of victims) {
 			if (this.textureRecords.size <= maxRecords && this.textureBytes <= maxBytes)
 				break;
@@ -2940,7 +3032,7 @@ export class WebGPURenderer {
 		}
 	}
 
-	clearRect(x = 0, y = 0, w = this.canvas.width || 0, h = this.canvas.height || 0) {
+	clearRect(x = 0, y = 0, w = this.canvas.width || 0, h = this.canvas.height || 0): void {
 		this.syncFrameMetrics();
 
 		let m = this.state.transform;
@@ -2978,7 +3070,7 @@ export class WebGPURenderer {
 		if (regions.length == 0)
 			return;
 
-		for (let node of Array.from(this.textLayer.children)) {
+		for (let node of Array.from(this.textLayer.children) as HTMLElement[]) {
 			let x = Number(node.dataset.uplotX);
 			let y = Number(node.dataset.uplotY);
 			if (!Number.isFinite(x) || !Number.isFinite(y))
@@ -3152,7 +3244,7 @@ export class WebGPURenderer {
 		pass.end();
 	}
 
-	present() {
+	present(): void {
 		this.syncFrameMetrics();
 
 		if (!this.ready) {
@@ -3234,7 +3326,7 @@ export class WebGPURenderer {
 		}
 	}
 
-	getImageData(sx = 0, sy = 0, sw = this.frameWidth, sh = this.frameHeight) {
+	getImageData(sx = 0, sy = 0, sw = this.frameWidth, sh = this.frameHeight): any {
 		this.syncFrameMetrics();
 		let rect = normalizeReadRect(sx, sy, sw, sh, this.frameWidth, this.frameHeight);
 		if (rect == null)
@@ -3242,7 +3334,7 @@ export class WebGPURenderer {
 		return createImageDataObject(rect.w, rect.h);
 	}
 
-	async getImageDataAsync(sx = 0, sy = 0, sw = this.frameWidth, sh = this.frameHeight) {
+	async getImageDataAsync(sx = 0, sy = 0, sw = this.frameWidth, sh = this.frameHeight): Promise<any> {
 		this.syncFrameMetrics();
 		let rect = normalizeReadRect(sx, sy, sw, sh, this.frameWidth, this.frameHeight);
 		if (rect == null)
@@ -3308,7 +3400,7 @@ export class WebGPURenderer {
 		}
 	}
 
-	async exportImageBytes(type = 'image/png') {
+	async exportImageBytes(type = 'image/png'): Promise<{type: string; bytes: Uint8Array}> {
 		let tools = await loadExportTools();
 		type = tools.normalizeExportType(type);
 		let img = await this.getImageDataAsync(0, 0, this.frameWidth, this.frameHeight);
@@ -3316,27 +3408,27 @@ export class WebGPURenderer {
 		return {type, bytes};
 	}
 
-	async convertToBlob(options = {}) {
+	async convertToBlob(options: any = {}): Promise<Blob | {type: string; size: number; arrayBuffer(): Promise<ArrayBuffer>}> {
 		let tools = await loadExportTools();
 		let requestedType = typeof options == 'string' ? options : options?.type;
 		let {type, bytes} = await this.exportImageBytes(requestedType || 'image/png');
 		return tools.bytesToBlob(bytes, type);
 	}
 
-	async toDataURLAsync(type = 'image/png') {
+	async toDataURLAsync(type = 'image/png'): Promise<string> {
 		let tools = await loadExportTools();
 		let exported = await this.exportImageBytes(type);
 		return `data:${exported.type};base64,${tools.bytesToBase64(exported.bytes)}`;
 	}
 
-	async toBlob(callback, type = 'image/png') {
+	async toBlob(callback?: (blob: Blob | {type: string; size: number; arrayBuffer(): Promise<ArrayBuffer>}) => void, type = 'image/png'): Promise<Blob | {type: string; size: number; arrayBuffer(): Promise<ArrayBuffer>}> {
 		let blob = await this.convertToBlob({type});
 		if (typeof callback == 'function')
 			callback(blob);
 		return blob;
 	}
 
-	async toSVGStringAsync(options = {}) {
+	async toSVGStringAsync(options: any = {}): Promise<string> {
 		let tools = await loadExportTools();
 		let pixelRatio = this.pixelRatio || 1;
 		let width = this.frameWidth / pixelRatio;
@@ -3352,36 +3444,36 @@ export class WebGPURenderer {
 		return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${image}${text}</svg>`;
 	}
 
-	async toSVGBlob(options = {}) {
+	async toSVGBlob(options: any = {}): Promise<Blob | {type: string; size: number; arrayBuffer(): Promise<ArrayBuffer>}> {
 		let tools = await loadExportTools();
 		let svg = await this.toSVGStringAsync(options);
 		return tools.textToBlob(svg, 'image/svg+xml');
 	}
 
-	async toSVGDataURLAsync(options = {}) {
+	async toSVGDataURLAsync(options: any = {}): Promise<string> {
 		let tools = await loadExportTools();
 		let svg = await this.toSVGStringAsync(options);
 		return `data:image/svg+xml;base64,${tools.encodeTextBase64(svg)}`;
 	}
 
-	save() {
+	save(): void {
 		this.stack.push(cloneState(this.state));
 	}
 
-	restore() {
+	restore(): void {
 		let state = this.stack.pop();
 		if (state != null)
 			this.state = state;
 	}
 
-	translate(x, y) {
+	translate(x: number, y: number): void {
 		x = Number(x);
 		y = Number(y);
 		if (Number.isFinite(x) && Number.isFinite(y))
 			this.state.transform = multiply(this.state.transform, [1, 0, 0, 1, x, y]);
 	}
 
-	rotate(angle) {
+	rotate(angle: number): void {
 		angle = Number(angle);
 		if (!Number.isFinite(angle))
 			return;
@@ -3390,20 +3482,20 @@ export class WebGPURenderer {
 		this.state.transform = multiply(this.state.transform, [c, s, -s, c, 0, 0]);
 	}
 
-	scale(x, y = x) {
+	scale(x: number, y = x): void {
 		x = Number(x);
 		y = Number(y);
 		if (Number.isFinite(x) && Number.isFinite(y))
 			this.state.transform = multiply(this.state.transform, [x, 0, 0, y, 0, 0]);
 	}
 
-	transform(a = 1, b = 0, c = 0, d = 1, e = 0, f = 0) {
+	transform(a = 1, b = 0, c = 0, d = 1, e = 0, f = 0): void {
 		let next = finiteTransform([a, b, c, d, e, f]);
 		if (next != null)
 			this.state.transform = multiply(this.state.transform, next);
 	}
 
-	getTransform() {
+	getTransform(): DOMMatrix | {a: number; b: number; c: number; d: number; e: number; f: number; is2D: boolean} {
 		let [a, b, c, d, e, f] = this.state.transform;
 
 		if (typeof DOMMatrix != 'undefined')
@@ -3412,7 +3504,7 @@ export class WebGPURenderer {
 		return {a, b, c, d, e, f, is2D: true};
 	}
 
-	setTransform(a = 1, b = 0, c = 0, d = 1, e = 0, f = 0) {
+	setTransform(a: any = 1, b: any = 0, c: any = 0, d: any = 1, e: any = 0, f: any = 0): void {
 		let next = typeof a == 'object' && a != null
 			? finiteTransform([a.a, a.b, a.c, a.d, a.e, a.f])
 			: finiteTransform([a, b, c, d, e, f]);
@@ -3420,15 +3512,15 @@ export class WebGPURenderer {
 			this.state.transform = next;
 	}
 
-	resetTransform() {
+	resetTransform(): void {
 		this.state.transform = identity();
 	}
 
-	getLineDash() {
+	getLineDash(): number[] {
 		return this.state.lineDash.slice();
 	}
 
-	setLineDash(dash) {
+	setLineDash(dash: number[]): void {
 		if (dash == null) {
 			this.state.lineDash = [];
 			return;
@@ -3442,55 +3534,55 @@ export class WebGPURenderer {
 		}
 	}
 
-	beginPath() {
+	beginPath(): void {
 		this.path.clear();
 	}
 
-	moveTo(x, y) {
+	moveTo(x: number, y: number): void {
 		this.path.moveTo(x, y);
 	}
 
-	lineTo(x, y) {
+	lineTo(x: number, y: number): void {
 		this.path.lineTo(x, y);
 	}
 
-	rect(x, y, w, h) {
+	rect(x: number, y: number, w: number, h: number): void {
 		this.path.rect(x, y, w, h);
 	}
 
-	arc(x, y, r, startAngle, endAngle, counterclockwise = false) {
+	arc(x: number, y: number, r: number, startAngle: number, endAngle: number, counterclockwise = false): void {
 		this.path.arc(x, y, r, startAngle, endAngle, counterclockwise);
 	}
 
-	arcTo(x1, y1, x2, y2, r) {
+	arcTo(x1: number, y1: number, x2: number, y2: number, r: number): void {
 		this.path.arcTo(x1, y1, x2, y2, r);
 	}
 
-	ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = false) {
+	ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise = false): void {
 		this.path.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
 	}
 
-	roundRect(x, y, w, h, radii = 0) {
+	roundRect(x: number, y: number, w: number, h: number, radii: number | number[] | DOMPointInit | DOMPointInit[] = 0): void {
 		this.path.roundRect(x, y, w, h, radii);
 	}
 
-	closePath() {
+	closePath(): void {
 		this.path.closePath();
 	}
 
-	quadraticCurveTo(cpx, cpy, x, y) {
+	quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void {
 		this.path.quadraticCurveTo(cpx, cpy, x, y);
 	}
 
-	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+	bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void {
 		this.path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 	}
 
-	addPath(path, transform = null) {
+	addPath(path: GPUPath, transform: DOMMatrix | number[] | null = null): void {
 		this.path.addPath(path, transform);
 	}
 
-	clip(path = this.path, fillRule = 'nonzero') {
+	clip(path: GPUPath | CanvasFillRule = this.path, fillRule: CanvasFillRule = 'nonzero'): void {
 		if (typeof path == 'string') {
 			fillRule = path;
 			path = this.path;
@@ -3589,7 +3681,7 @@ export class WebGPURenderer {
 		this.enqueueShadowVertices(vertices);
 	}
 
-	stroke(path = this.path) {
+	stroke(path: GPUPath = this.path): void {
 		if (typeof path == 'string')
 			path = this.path;
 
@@ -3609,7 +3701,7 @@ export class WebGPURenderer {
 		let dashOffset = this.state.lineDashOffset * scale;
 
 		for (let sub of subpaths) {
-			let transformed = sub.map(p => transformPoint(m, p[0], p[1]));
+			let transformed = sub.map(p => transformPoint(m, p[0], p[1])) as GPUPathSubpath;
 			transformed.closed = !!sub.closed && dash.length == 0;
 			let segments = dashSegments(transformed, dash, dashOffset);
 
@@ -3621,7 +3713,7 @@ export class WebGPURenderer {
 		this.addGeometry(vertices);
 	}
 
-	fill(path = this.path, fillRule = 'nonzero', kind = 'draw') {
+	fill(path: GPUPath | CanvasFillRule = this.path, fillRule: CanvasFillRule = 'nonzero', kind = 'draw'): void {
 		if (typeof path == 'string') {
 			fillRule = path;
 			path = this.path;
@@ -3714,7 +3806,7 @@ export class WebGPURenderer {
 		}
 	}
 
-	createImageData(width, height) {
+	createImageData(width: any, height?: any): any {
 		if (typeof width == 'object' && width != null) {
 			height = width.height;
 			width = width.width;
@@ -3723,7 +3815,7 @@ export class WebGPURenderer {
 		return createImageDataObject(width, height);
 	}
 
-	putImageData(imageData, dx, dy, dirtyX = 0, dirtyY = 0, dirtyWidth = imageData?.width || 0, dirtyHeight = imageData?.height || 0) {
+	putImageData(imageData: ImageData, dx: number, dy: number, dirtyX = 0, dirtyY = 0, dirtyWidth = imageData?.width || 0, dirtyHeight = imageData?.height || 0): void {
 		if (!isImageDataLike(imageData))
 			return;
 
@@ -3749,7 +3841,7 @@ export class WebGPURenderer {
 		this.state.globalAlpha = prevAlpha;
 	}
 
-	drawImage(source, ...args) {
+	drawImage(source: CanvasImageSource | ImageBitmap, ...args: number[]): void {
 		let sw0 = sourceWidth(source);
 		let sh0 = sourceHeight(source);
 		if (sw0 <= 0 || sh0 <= 0)
@@ -3844,13 +3936,13 @@ export class WebGPURenderer {
 		});
 	}
 
-	createPattern(source, repetition = 'repeat') {
+	createPattern(source: CanvasImageSource | ImageBitmap, repetition = 'repeat'): CanvasPatternLike | null {
 		if (source == null)
 			return null;
 		return makePattern(source, repetition);
 	}
 
-	fillRect(x, y, w, h) {
+	fillRect(x: number, y: number, w: number, h: number): void {
 		if (isPatternPaint(this.state.fillStyle)) {
 			let path = new GPUPath();
 			path.rect(x, y, w, h);
@@ -3870,7 +3962,7 @@ export class WebGPURenderer {
 		this.addGeometry(vertices);
 	}
 
-	strokeRect(x, y, w, h) {
+	strokeRect(x: number, y: number, w: number, h: number): void {
 		let path = new GPUPath();
 		path.rect(x, y, w, h);
 		this.stroke(path);
@@ -3895,7 +3987,7 @@ export class WebGPURenderer {
 			this.commands.push({vertices, kind, composite});
 	}
 
-	isPointInPath(path, x, y, fillRule = 'nonzero') {
+	isPointInPath(path: any, x: any, y?: any, fillRule: any = 'nonzero'): boolean {
 		if (typeof path == 'number') {
 			fillRule = y || 'nonzero';
 			y = x;
@@ -3917,7 +4009,7 @@ export class WebGPURenderer {
 		return fillContainsPoint(point, polygons, fillRule);
 	}
 
-	isPointInStroke(path, x, y) {
+	isPointInStroke(path: GPUPath, x: number, y: number): boolean {
 		if (typeof path == 'number') {
 			y = x;
 			x = path;
@@ -3954,11 +4046,11 @@ export class WebGPURenderer {
 		return false;
 	}
 
-	strokeText(text, x, y, maxWidth) {
+	strokeText(text: string, x: number, y: number, maxWidth?: number): void {
 		this.drawText(text, x, y, true, maxWidth);
 	}
 
-	fillText(text, x, y, maxWidth) {
+	fillText(text: string, x: number, y: number, maxWidth?: number): void {
 		this.drawText(text, x, y, false, maxWidth);
 	}
 
@@ -4047,7 +4139,7 @@ export class WebGPURenderer {
 		return {x, y};
 	}
 
-	measureText(text) {
+	measureText(text: string): any {
 		let key = [this.state.font, this.state.fontKerning, this.state.fontStretch, this.state.fontVariantCaps, this.state.letterSpacing, this.state.textRendering, this.state.wordSpacing, text].join('\n');
 		let width = this.textMeasureCache.get(key);
 
@@ -4078,7 +4170,7 @@ export class WebGPURenderer {
 		};
 	}
 
-	destroy() {
+	destroy(): void {
 		this.disposed = true;
 		this.initEpoch++;
 		this.ready = false;
@@ -4119,20 +4211,20 @@ export class WebGPURenderer {
 		return color;
 	}
 
-	createLinearGradient(x0, y0, x1, y1) {
+	createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradientLike {
 		let a = transformPoint(this.state.transform, x0, y0);
 		let b = transformPoint(this.state.transform, x1, y1);
 		return makeLinearGradient(a[0], a[1], b[0], b[1]);
 	}
 
-	createRadialGradient(x0, y0, r0, x1, y1, r1) {
+	createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradientLike {
 		let a = transformPoint(this.state.transform, x0, y0);
 		let b = transformPoint(this.state.transform, x1, y1);
 		let scale = transformScale(this.state.transform);
 		return makeRadialGradient(a[0], a[1], r0 * scale, b[0], b[1], r1 * scale);
 	}
 
-	createConicGradient(startAngle, x, y) {
+	createConicGradient(startAngle: number, x: number, y: number): CanvasGradientLike {
 		let c = transformPoint(this.state.transform, x, y);
 		let stops = [];
 		return {
@@ -4233,7 +4325,7 @@ export class WebGPURenderer {
 	set filter(v) { this.state.filter = filterStyleValue(v); }
 }
 
-export const WebGPURendererInternals = {
+export const WebGPURendererInternals: Record<string, unknown> = {
 	blendForComposite,
 	clampCompositeMode,
 	clipVertices,