@motion-core/motion-gpu 0.4.1 → 0.5.0

package/dist/react/FragCanvas.js

@@ -1,218 +1,241 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createCurrentWritable as currentWritable } from '../core/current-value.js';
-import { toMotionGPUErrorReport } from '../core/error-report.js';
-import { createFrameRegistry } from '../core/frame-registry.js';
-import { createMotionGPURuntimeLoop } from '../core/runtime-loop.js';
-import { useEffect, useRef, useState } from 'react';
-import { FrameRegistryReactContext } from './frame-context.js';
-import { MotionGPUErrorOverlay } from './MotionGPUErrorOverlay.js';
-import { MotionGPUReactContext } from './motiongpu-context.js';
+import { toMotionGPUErrorReport } from "../core/error-report.js";
+import { createCurrentWritable } from "../core/current-value.js";
+import { createFrameRegistry } from "../core/frame-registry.js";
+import { createMotionGPURuntimeLoop } from "../core/runtime-loop.js";
+import { MotionGPUReactContext } from "./motiongpu-context.js";
+import { FrameRegistryReactContext } from "./frame-context.js";
+import { MotionGPUErrorOverlay } from "./MotionGPUErrorOverlay.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/react/FragCanvas.tsx
 function getInitialDpr() {
-    if (typeof window === 'undefined') {
-        return 1;
-    }
-    return window.devicePixelRatio ?? 1;
+	if (typeof window === "undefined") return 1;
+	return window.devicePixelRatio ?? 1;
 }
 function createRuntimeState(initialDpr) {
-    const registry = createFrameRegistry({ maxDelta: 0.1 });
-    const canvasRef = { current: undefined };
-    const requestFrameSignalRef = { current: null };
-    const requestFrame = () => {
-        requestFrameSignalRef.current?.();
-    };
-    const invalidateFrame = () => {
-        registry.invalidate();
-        requestFrame();
-    };
-    const advanceFrame = () => {
-        registry.advance();
-        requestFrame();
-    };
-    const size = currentWritable({ width: 0, height: 0 });
-    const dprState = currentWritable(initialDpr, requestFrame);
-    const maxDeltaState = currentWritable(0.1, (value) => {
-        registry.setMaxDelta(value);
-        requestFrame();
-    });
-    const renderModeState = currentWritable('always', (value) => {
-        registry.setRenderMode(value);
-        requestFrame();
-    });
-    const autoRenderState = currentWritable(true, (value) => {
-        registry.setAutoRender(value);
-        requestFrame();
-    });
-    const userState = currentWritable({});
-    const context = {
-        get canvas() {
-            return canvasRef.current;
-        },
-        size,
-        dpr: dprState,
-        maxDelta: maxDeltaState,
-        renderMode: renderModeState,
-        autoRender: autoRenderState,
-        user: userState,
-        invalidate: invalidateFrame,
-        advance: advanceFrame,
-        scheduler: {
-            createStage: registry.createStage,
-            getStage: registry.getStage,
-            setDiagnosticsEnabled: registry.setDiagnosticsEnabled,
-            getDiagnosticsEnabled: registry.getDiagnosticsEnabled,
-            getLastRunTimings: registry.getLastRunTimings,
-            getSchedule: registry.getSchedule,
-            setProfilingEnabled: registry.setProfilingEnabled,
-            setProfilingWindow: registry.setProfilingWindow,
-            resetProfiling: registry.resetProfiling,
-            getProfilingEnabled: registry.getProfilingEnabled,
-            getProfilingWindow: registry.getProfilingWindow,
-            getProfilingSnapshot: registry.getProfilingSnapshot
-        }
-    };
-    return {
-        registry,
-        context,
-        canvasRef,
-        size,
-        dprState,
-        maxDeltaState,
-        renderModeState,
-        autoRenderState,
-        requestFrameSignalRef,
-        requestFrame,
-        invalidateFrame,
-        advanceFrame
-    };
+	const registry = createFrameRegistry({ maxDelta: .1 });
+	const canvasRef = { current: void 0 };
+	const requestFrameSignalRef = { current: null };
+	const requestFrame = () => {
+		requestFrameSignalRef.current?.();
+	};
+	const invalidateFrame = () => {
+		registry.invalidate();
+		requestFrame();
+	};
+	const advanceFrame = () => {
+		registry.advance();
+		requestFrame();
+	};
+	const size = createCurrentWritable({
+		width: 0,
+		height: 0
+	});
+	const dprState = createCurrentWritable(initialDpr, requestFrame);
+	const maxDeltaState = createCurrentWritable(.1, (value) => {
+		registry.setMaxDelta(value);
+		requestFrame();
+	});
+	const renderModeState = createCurrentWritable("always", (value) => {
+		registry.setRenderMode(value);
+		requestFrame();
+	});
+	const autoRenderState = createCurrentWritable(true, (value) => {
+		registry.setAutoRender(value);
+		requestFrame();
+	});
+	return {
+		registry,
+		context: {
+			get canvas() {
+				return canvasRef.current;
+			},
+			size,
+			dpr: dprState,
+			maxDelta: maxDeltaState,
+			renderMode: renderModeState,
+			autoRender: autoRenderState,
+			user: createCurrentWritable({}),
+			invalidate: invalidateFrame,
+			advance: advanceFrame,
+			scheduler: {
+				createStage: registry.createStage,
+				getStage: registry.getStage,
+				setDiagnosticsEnabled: registry.setDiagnosticsEnabled,
+				getDiagnosticsEnabled: registry.getDiagnosticsEnabled,
+				getLastRunTimings: registry.getLastRunTimings,
+				getSchedule: registry.getSchedule,
+				setProfilingEnabled: registry.setProfilingEnabled,
+				setProfilingWindow: registry.setProfilingWindow,
+				resetProfiling: registry.resetProfiling,
+				getProfilingEnabled: registry.getProfilingEnabled,
+				getProfilingWindow: registry.getProfilingWindow,
+				getProfilingSnapshot: registry.getProfilingSnapshot
+			}
+		},
+		canvasRef,
+		size,
+		dprState,
+		maxDeltaState,
+		renderModeState,
+		autoRenderState,
+		requestFrameSignalRef,
+		requestFrame,
+		invalidateFrame,
+		advanceFrame
+	};
 }
 function getNormalizedErrorHistoryLimit(value) {
-    if (!Number.isFinite(value) || value <= 0) {
-        return 0;
-    }
-    return Math.floor(value);
+	if (!Number.isFinite(value) || value <= 0) return 0;
+	return Math.floor(value);
 }
-export function FragCanvas({ material, renderTargets = {}, passes = [], clearColor = [0, 0, 0, 1], outputColorSpace = 'srgb', renderMode = 'always', autoRender = true, maxDelta = 0.1, adapterOptions = undefined, deviceDescriptor = undefined, dpr = getInitialDpr(), showErrorOverlay = true, errorRenderer, onError = undefined, errorHistoryLimit = 0, onErrorHistory = undefined, className = '', style, children }) {
-    const runtimeRef = useRef(null);
-    if (!runtimeRef.current) {
-        runtimeRef.current = createRuntimeState(getInitialDpr());
-    }
-    const runtime = runtimeRef.current;
-    const runtimePropsRef = useRef({
-        material,
-        renderTargets,
-        passes,
-        clearColor,
-        outputColorSpace,
-        adapterOptions,
-        deviceDescriptor,
-        onError,
-        errorHistoryLimit,
-        onErrorHistory
-    });
-    runtimePropsRef.current = {
-        material,
-        renderTargets,
-        passes,
-        clearColor,
-        outputColorSpace,
-        adapterOptions,
-        deviceDescriptor,
-        onError,
-        errorHistoryLimit,
-        onErrorHistory
-    };
-    const [errorReport, setErrorReport] = useState(null);
-    const [errorHistory, setErrorHistory] = useState([]);
-    useEffect(() => {
-        runtime.renderModeState.set(renderMode);
-    }, [renderMode, runtime]);
-    useEffect(() => {
-        runtime.autoRenderState.set(autoRender);
-    }, [autoRender, runtime]);
-    useEffect(() => {
-        runtime.maxDeltaState.set(maxDelta);
-    }, [maxDelta, runtime]);
-    useEffect(() => {
-        runtime.dprState.set(dpr);
-    }, [dpr, runtime]);
-    useEffect(() => {
-        const limit = getNormalizedErrorHistoryLimit(errorHistoryLimit);
-        if (limit <= 0) {
-            if (errorHistory.length === 0) {
-                return;
-            }
-            setErrorHistory([]);
-            onErrorHistory?.([]);
-            return;
-        }
-        if (errorHistory.length <= limit) {
-            return;
-        }
-        const trimmed = errorHistory.slice(errorHistory.length - limit);
-        setErrorHistory(trimmed);
-        onErrorHistory?.(trimmed);
-    }, [errorHistory, errorHistoryLimit, onErrorHistory]);
-    useEffect(() => {
-        const canvas = runtime.canvasRef.current;
-        if (!canvas) {
-            const report = toMotionGPUErrorReport(new Error('Canvas element is not available'), 'initialization');
-            setErrorReport(report);
-            const historyLimit = getNormalizedErrorHistoryLimit(runtimePropsRef.current.errorHistoryLimit);
-            if (historyLimit > 0) {
-                const nextHistory = [report].slice(-historyLimit);
-                setErrorHistory(nextHistory);
-                runtimePropsRef.current.onErrorHistory?.(nextHistory);
-            }
-            runtimePropsRef.current.onError?.(report);
-            return () => {
-                runtime.registry.clear();
-            };
-        }
-        const runtimeLoop = createMotionGPURuntimeLoop({
-            canvas,
-            registry: runtime.registry,
-            size: runtime.size,
-            dpr: runtime.dprState,
-            maxDelta: runtime.maxDeltaState,
-            getMaterial: () => runtimePropsRef.current.material,
-            getRenderTargets: () => runtimePropsRef.current.renderTargets,
-            getPasses: () => runtimePropsRef.current.passes,
-            getClearColor: () => runtimePropsRef.current.clearColor,
-            getOutputColorSpace: () => runtimePropsRef.current.outputColorSpace,
-            getAdapterOptions: () => runtimePropsRef.current.adapterOptions,
-            getDeviceDescriptor: () => runtimePropsRef.current.deviceDescriptor,
-            getOnError: () => runtimePropsRef.current.onError,
-            getErrorHistoryLimit: () => runtimePropsRef.current.errorHistoryLimit,
-            getOnErrorHistory: () => runtimePropsRef.current.onErrorHistory,
-            reportErrorHistory: (history) => {
-                setErrorHistory(history);
-            },
-            reportError: (report) => {
-                setErrorReport(report);
-            }
-        });
-        runtime.requestFrameSignalRef.current = runtimeLoop.requestFrame;
-        return () => {
-            runtime.requestFrameSignalRef.current = null;
-            runtimeLoop.destroy();
-        };
-    }, [runtime]);
-    const canvasStyle = {
-        position: 'absolute',
-        inset: 0,
-        display: 'block',
-        width: '100%',
-        height: '100%',
-        ...style
-    };
-    return (_jsx(FrameRegistryReactContext.Provider, { value: runtime.registry, children: _jsx(MotionGPUReactContext.Provider, { value: runtime.context, children: _jsxs("div", { className: "motiongpu-canvas-wrap", style: {
-                    position: 'relative',
-                    width: '100%',
-                    height: '100%',
-                    minWidth: 0,
-                    minHeight: 0,
-                    overflow: 'hidden'
-                }, children: [_jsx("canvas", { className: className, style: canvasStyle, ref: (node) => {
-                            runtime.canvasRef.current = node ?? undefined;
-                        } }), showErrorOverlay && errorReport ? (errorRenderer ? (errorRenderer(errorReport)) : (_jsx(MotionGPUErrorOverlay, { report: errorReport }))) : null, children] }) }) }));
+function FragCanvas({ material, renderTargets = {}, passes = [], clearColor = [
+	0,
+	0,
+	0,
+	1
+], outputColorSpace = "srgb", renderMode = "always", autoRender = true, maxDelta = .1, adapterOptions = void 0, deviceDescriptor = void 0, dpr = getInitialDpr(), showErrorOverlay = true, errorRenderer, onError = void 0, errorHistoryLimit = 0, onErrorHistory = void 0, className = "", style, children }) {
+	const runtimeRef = useRef(null);
+	if (!runtimeRef.current) runtimeRef.current = createRuntimeState(getInitialDpr());
+	const runtime = runtimeRef.current;
+	const runtimePropsRef = useRef({
+		material,
+		renderTargets,
+		passes,
+		clearColor,
+		outputColorSpace,
+		adapterOptions,
+		deviceDescriptor,
+		onError,
+		errorHistoryLimit,
+		onErrorHistory
+	});
+	runtimePropsRef.current = {
+		material,
+		renderTargets,
+		passes,
+		clearColor,
+		outputColorSpace,
+		adapterOptions,
+		deviceDescriptor,
+		onError,
+		errorHistoryLimit,
+		onErrorHistory
+	};
+	const [errorReport, setErrorReport] = useState(null);
+	const [errorHistory, setErrorHistory] = useState([]);
+	useEffect(() => {
+		runtime.renderModeState.set(renderMode);
+	}, [renderMode, runtime]);
+	useEffect(() => {
+		runtime.autoRenderState.set(autoRender);
+	}, [autoRender, runtime]);
+	useEffect(() => {
+		runtime.maxDeltaState.set(maxDelta);
+	}, [maxDelta, runtime]);
+	useEffect(() => {
+		runtime.dprState.set(dpr);
+	}, [dpr, runtime]);
+	useEffect(() => {
+		const limit = getNormalizedErrorHistoryLimit(errorHistoryLimit);
+		if (limit <= 0) {
+			if (errorHistory.length === 0) return;
+			setErrorHistory([]);
+			onErrorHistory?.([]);
+			return;
+		}
+		if (errorHistory.length <= limit) return;
+		const trimmed = errorHistory.slice(errorHistory.length - limit);
+		setErrorHistory(trimmed);
+		onErrorHistory?.(trimmed);
+	}, [
+		errorHistory,
+		errorHistoryLimit,
+		onErrorHistory
+	]);
+	useEffect(() => {
+		const canvas = runtime.canvasRef.current;
+		if (!canvas) {
+			const report = toMotionGPUErrorReport(/* @__PURE__ */ new Error("Canvas element is not available"), "initialization");
+			setErrorReport(report);
+			const historyLimit = getNormalizedErrorHistoryLimit(runtimePropsRef.current.errorHistoryLimit);
+			if (historyLimit > 0) {
+				const nextHistory = [report].slice(-historyLimit);
+				setErrorHistory(nextHistory);
+				runtimePropsRef.current.onErrorHistory?.(nextHistory);
+			}
+			runtimePropsRef.current.onError?.(report);
+			return () => {
+				runtime.registry.clear();
+			};
+		}
+		const runtimeLoop = createMotionGPURuntimeLoop({
+			canvas,
+			registry: runtime.registry,
+			size: runtime.size,
+			dpr: runtime.dprState,
+			maxDelta: runtime.maxDeltaState,
+			getMaterial: () => runtimePropsRef.current.material,
+			getRenderTargets: () => runtimePropsRef.current.renderTargets,
+			getPasses: () => runtimePropsRef.current.passes,
+			getClearColor: () => runtimePropsRef.current.clearColor,
+			getOutputColorSpace: () => runtimePropsRef.current.outputColorSpace,
+			getAdapterOptions: () => runtimePropsRef.current.adapterOptions,
+			getDeviceDescriptor: () => runtimePropsRef.current.deviceDescriptor,
+			getOnError: () => runtimePropsRef.current.onError,
+			getErrorHistoryLimit: () => runtimePropsRef.current.errorHistoryLimit,
+			getOnErrorHistory: () => runtimePropsRef.current.onErrorHistory,
+			reportErrorHistory: (history) => {
+				setErrorHistory(history);
+			},
+			reportError: (report) => {
+				setErrorReport(report);
+			}
+		});
+		runtime.requestFrameSignalRef.current = runtimeLoop.requestFrame;
+		return () => {
+			runtime.requestFrameSignalRef.current = null;
+			runtimeLoop.destroy();
+		};
+	}, [runtime]);
+	const canvasStyle = {
+		position: "absolute",
+		inset: 0,
+		display: "block",
+		width: "100%",
+		height: "100%",
+		...style
+	};
+	return /* @__PURE__ */ jsx(FrameRegistryReactContext.Provider, {
+		value: runtime.registry,
+		children: /* @__PURE__ */ jsx(MotionGPUReactContext.Provider, {
+			value: runtime.context,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "motiongpu-canvas-wrap",
+				style: {
+					position: "relative",
+					width: "100%",
+					height: "100%",
+					minWidth: 0,
+					minHeight: 0,
+					overflow: "hidden"
+				},
+				children: [
+					/* @__PURE__ */ jsx("canvas", {
+						className,
+						style: canvasStyle,
+						ref: (node) => {
+							runtime.canvasRef.current = node ?? void 0;
+						}
+					}),
+					showErrorOverlay && errorReport ? errorRenderer ? errorRenderer(errorReport) : /* @__PURE__ */ jsx(MotionGPUErrorOverlay, { report: errorReport }) : null,
+					children
+				]
+			})
+		})
+	});
 }
+//#endregion
+export { FragCanvas };
+
+//# sourceMappingURL=FragCanvas.js.map

package/dist/react/FragCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FragCanvas.js","names":[],"sources":["../../src/lib/react/FragCanvas.tsx"],"sourcesContent":["import { createCurrentWritable as currentWritable } from '../core/current-value.js';\nimport { toMotionGPUErrorReport, type MotionGPUErrorReport } from '../core/error-report.js';\nimport type { FragMaterial } from '../core/material.js';\nimport { createFrameRegistry } from '../core/frame-registry.js';\nimport { createMotionGPURuntimeLoop } from '../core/runtime-loop.js';\nimport type {\n\tAnyPass,\n\tOutputColorSpace,\n\tRenderMode,\n\tRenderTargetDefinitionMap\n} from '../core/types.js';\nimport { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';\nimport { FrameRegistryReactContext } from './frame-context.js';\nimport { MotionGPUErrorOverlay } from './MotionGPUErrorOverlay.js';\nimport { MotionGPUReactContext, type MotionGPUContext } from './motiongpu-context.js';\n\nexport interface FragCanvasProps {\n\tmaterial: FragMaterial;\n\trenderTargets?: RenderTargetDefinitionMap;\n\tpasses?: AnyPass[];\n\tclearColor?: [number, number, number, number];\n\toutputColorSpace?: OutputColorSpace;\n\trenderMode?: RenderMode;\n\tautoRender?: boolean;\n\tmaxDelta?: number;\n\tadapterOptions?: GPURequestAdapterOptions;\n\tdeviceDescriptor?: GPUDeviceDescriptor;\n\tdpr?: number;\n\tshowErrorOverlay?: boolean;\n\terrorRenderer?: (report: MotionGPUErrorReport) => ReactNode;\n\tonError?: (report: MotionGPUErrorReport) => void;\n\terrorHistoryLimit?: number;\n\tonErrorHistory?: (history: MotionGPUErrorReport[]) => void;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tchildren?: ReactNode;\n}\n\ninterface RuntimePropsSnapshot {\n\tmaterial: FragMaterial;\n\trenderTargets: RenderTargetDefinitionMap;\n\tpasses: AnyPass[];\n\tclearColor: [number, number, number, number];\n\toutputColorSpace: OutputColorSpace;\n\tadapterOptions: GPURequestAdapterOptions | undefined;\n\tdeviceDescriptor: GPUDeviceDescriptor | undefined;\n\tonError: ((report: MotionGPUErrorReport) => void) | undefined;\n\terrorHistoryLimit: number;\n\tonErrorHistory: ((history: MotionGPUErrorReport[]) => void) | undefined;\n}\n\ninterface FragCanvasRuntimeState {\n\tregistry: ReturnType<typeof createFrameRegistry>;\n\tcontext: MotionGPUContext;\n\tcanvasRef: { current: HTMLCanvasElement | undefined };\n\tsize: ReturnType<typeof currentWritable<{ width: number; height: number }>>;\n\tdprState: ReturnType<typeof currentWritable<number>>;\n\tmaxDeltaState: ReturnType<typeof currentWritable<number>>;\n\trenderModeState: ReturnType<typeof currentWritable<RenderMode>>;\n\tautoRenderState: ReturnType<typeof currentWritable<boolean>>;\n\trequestFrameSignalRef: { current: (() => void) | null };\n\trequestFrame: () => void;\n\tinvalidateFrame: () => void;\n\tadvanceFrame: () => void;\n}\n\nfunction getInitialDpr(): number {\n\tif (typeof window === 'undefined') {\n\t\treturn 1;\n\t}\n\n\treturn window.devicePixelRatio ?? 1;\n}\n\nfunction createRuntimeState(initialDpr: number): FragCanvasRuntimeState {\n\tconst registry = createFrameRegistry({ maxDelta: 0.1 });\n\tconst canvasRef = { current: undefined as HTMLCanvasElement | undefined };\n\tconst requestFrameSignalRef = { current: null as (() => void) | null };\n\tconst requestFrame = (): void => {\n\t\trequestFrameSignalRef.current?.();\n\t};\n\tconst invalidateFrame = (): void => {\n\t\tregistry.invalidate();\n\t\trequestFrame();\n\t};\n\tconst advanceFrame = (): void => {\n\t\tregistry.advance();\n\t\trequestFrame();\n\t};\n\n\tconst size = currentWritable({ width: 0, height: 0 });\n\tconst dprState = currentWritable(initialDpr, requestFrame);\n\tconst maxDeltaState = currentWritable(0.1, (value) => {\n\t\tregistry.setMaxDelta(value);\n\t\trequestFrame();\n\t});\n\tconst renderModeState = currentWritable<RenderMode>('always', (value) => {\n\t\tregistry.setRenderMode(value);\n\t\trequestFrame();\n\t});\n\tconst autoRenderState = currentWritable<boolean>(true, (value) => {\n\t\tregistry.setAutoRender(value);\n\t\trequestFrame();\n\t});\n\tconst userState = currentWritable<Record<string | symbol, unknown>>({});\n\n\tconst context: MotionGPUContext = {\n\t\tget canvas() {\n\t\t\treturn canvasRef.current;\n\t\t},\n\t\tsize,\n\t\tdpr: dprState,\n\t\tmaxDelta: maxDeltaState,\n\t\trenderMode: renderModeState,\n\t\tautoRender: autoRenderState,\n\t\tuser: userState,\n\t\tinvalidate: invalidateFrame,\n\t\tadvance: advanceFrame,\n\t\tscheduler: {\n\t\t\tcreateStage: registry.createStage,\n\t\t\tgetStage: registry.getStage,\n\t\t\tsetDiagnosticsEnabled: registry.setDiagnosticsEnabled,\n\t\t\tgetDiagnosticsEnabled: registry.getDiagnosticsEnabled,\n\t\t\tgetLastRunTimings: registry.getLastRunTimings,\n\t\t\tgetSchedule: registry.getSchedule,\n\t\t\tsetProfilingEnabled: registry.setProfilingEnabled,\n\t\t\tsetProfilingWindow: registry.setProfilingWindow,\n\t\t\tresetProfiling: registry.resetProfiling,\n\t\t\tgetProfilingEnabled: registry.getProfilingEnabled,\n\t\t\tgetProfilingWindow: registry.getProfilingWindow,\n\t\t\tgetProfilingSnapshot: registry.getProfilingSnapshot\n\t\t}\n\t};\n\n\treturn {\n\t\tregistry,\n\t\tcontext,\n\t\tcanvasRef,\n\t\tsize,\n\t\tdprState,\n\t\tmaxDeltaState,\n\t\trenderModeState,\n\t\tautoRenderState,\n\t\trequestFrameSignalRef,\n\t\trequestFrame,\n\t\tinvalidateFrame,\n\t\tadvanceFrame\n\t};\n}\n\nfunction getNormalizedErrorHistoryLimit(value: number): number {\n\tif (!Number.isFinite(value) || value <= 0) {\n\t\treturn 0;\n\t}\n\n\treturn Math.floor(value);\n}\n\nexport function FragCanvas({\n\tmaterial,\n\trenderTargets = {},\n\tpasses = [],\n\tclearColor = [0, 0, 0, 1],\n\toutputColorSpace = 'srgb',\n\trenderMode = 'always',\n\tautoRender = true,\n\tmaxDelta = 0.1,\n\tadapterOptions = undefined,\n\tdeviceDescriptor = undefined,\n\tdpr = getInitialDpr(),\n\tshowErrorOverlay = true,\n\terrorRenderer,\n\tonError = undefined,\n\terrorHistoryLimit = 0,\n\tonErrorHistory = undefined,\n\tclassName = '',\n\tstyle,\n\tchildren\n}: FragCanvasProps) {\n\tconst runtimeRef = useRef<FragCanvasRuntimeState | null>(null);\n\tif (!runtimeRef.current) {\n\t\truntimeRef.current = createRuntimeState(getInitialDpr());\n\t}\n\tconst runtime = runtimeRef.current;\n\n\tconst runtimePropsRef = useRef<RuntimePropsSnapshot>({\n\t\tmaterial,\n\t\trenderTargets,\n\t\tpasses,\n\t\tclearColor,\n\t\toutputColorSpace,\n\t\tadapterOptions,\n\t\tdeviceDescriptor,\n\t\tonError,\n\t\terrorHistoryLimit,\n\t\tonErrorHistory\n\t});\n\truntimePropsRef.current = {\n\t\tmaterial,\n\t\trenderTargets,\n\t\tpasses,\n\t\tclearColor,\n\t\toutputColorSpace,\n\t\tadapterOptions,\n\t\tdeviceDescriptor,\n\t\tonError,\n\t\terrorHistoryLimit,\n\t\tonErrorHistory\n\t};\n\n\tconst [errorReport, setErrorReport] = useState<MotionGPUErrorReport | null>(null);\n\tconst [errorHistory, setErrorHistory] = useState<MotionGPUErrorReport[]>([]);\n\n\tuseEffect(() => {\n\t\truntime.renderModeState.set(renderMode);\n\t}, [renderMode, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.autoRenderState.set(autoRender);\n\t}, [autoRender, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.maxDeltaState.set(maxDelta);\n\t}, [maxDelta, runtime]);\n\n\tuseEffect(() => {\n\t\truntime.dprState.set(dpr);\n\t}, [dpr, runtime]);\n\n\tuseEffect(() => {\n\t\tconst limit = getNormalizedErrorHistoryLimit(errorHistoryLimit);\n\t\tif (limit <= 0) {\n\t\t\tif (errorHistory.length === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetErrorHistory([]);\n\t\t\tonErrorHistory?.([]);\n\t\t\treturn;\n\t\t}\n\n\t\tif (errorHistory.length <= limit) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst trimmed = errorHistory.slice(errorHistory.length - limit);\n\t\tsetErrorHistory(trimmed);\n\t\tonErrorHistory?.(trimmed);\n\t}, [errorHistory, errorHistoryLimit, onErrorHistory]);\n\n\tuseEffect(() => {\n\t\tconst canvas = runtime.canvasRef.current;\n\t\tif (!canvas) {\n\t\t\tconst report = toMotionGPUErrorReport(\n\t\t\t\tnew Error('Canvas element is not available'),\n\t\t\t\t'initialization'\n\t\t\t);\n\t\t\tsetErrorReport(report);\n\t\t\tconst historyLimit = getNormalizedErrorHistoryLimit(\n\t\t\t\truntimePropsRef.current.errorHistoryLimit\n\t\t\t);\n\t\t\tif (historyLimit > 0) {\n\t\t\t\tconst nextHistory = [report].slice(-historyLimit);\n\t\t\t\tsetErrorHistory(nextHistory);\n\t\t\t\truntimePropsRef.current.onErrorHistory?.(nextHistory);\n\t\t\t}\n\t\t\truntimePropsRef.current.onError?.(report);\n\t\t\treturn () => {\n\t\t\t\truntime.registry.clear();\n\t\t\t};\n\t\t}\n\n\t\tconst runtimeLoop = createMotionGPURuntimeLoop({\n\t\t\tcanvas,\n\t\t\tregistry: runtime.registry,\n\t\t\tsize: runtime.size,\n\t\t\tdpr: runtime.dprState,\n\t\t\tmaxDelta: runtime.maxDeltaState,\n\t\t\tgetMaterial: () => runtimePropsRef.current.material,\n\t\t\tgetRenderTargets: () => runtimePropsRef.current.renderTargets,\n\t\t\tgetPasses: () => runtimePropsRef.current.passes,\n\t\t\tgetClearColor: () => runtimePropsRef.current.clearColor,\n\t\t\tgetOutputColorSpace: () => runtimePropsRef.current.outputColorSpace,\n\t\t\tgetAdapterOptions: () => runtimePropsRef.current.adapterOptions,\n\t\t\tgetDeviceDescriptor: () => runtimePropsRef.current.deviceDescriptor,\n\t\t\tgetOnError: () => runtimePropsRef.current.onError,\n\t\t\tgetErrorHistoryLimit: () => runtimePropsRef.current.errorHistoryLimit,\n\t\t\tgetOnErrorHistory: () => runtimePropsRef.current.onErrorHistory,\n\t\t\treportErrorHistory: (history) => {\n\t\t\t\tsetErrorHistory(history);\n\t\t\t},\n\t\t\treportError: (report) => {\n\t\t\t\tsetErrorReport(report);\n\t\t\t}\n\t\t});\n\t\truntime.requestFrameSignalRef.current = runtimeLoop.requestFrame;\n\n\t\treturn () => {\n\t\t\truntime.requestFrameSignalRef.current = null;\n\t\t\truntimeLoop.destroy();\n\t\t};\n\t}, [runtime]);\n\n\tconst canvasStyle: CSSProperties = {\n\t\tposition: 'absolute',\n\t\tinset: 0,\n\t\tdisplay: 'block',\n\t\twidth: '100%',\n\t\theight: '100%',\n\t\t...style\n\t};\n\n\treturn (\n\t\t<FrameRegistryReactContext.Provider value={runtime.registry}>\n\t\t\t<MotionGPUReactContext.Provider value={runtime.context}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"motiongpu-canvas-wrap\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\tminHeight: 0,\n\t\t\t\t\t\toverflow: 'hidden'\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<canvas\n\t\t\t\t\t\tclassName={className}\n\t\t\t\t\t\tstyle={canvasStyle}\n\t\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\t\truntime.canvasRef.current = node ?? undefined;\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showErrorOverlay && errorReport ? (\n\t\t\t\t\t\terrorRenderer ? (\n\t\t\t\t\t\t\terrorRenderer(errorReport)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<MotionGPUErrorOverlay report={errorReport} />\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</MotionGPUReactContext.Provider>\n\t\t</FrameRegistryReactContext.Provider>\n\t);\n}\n"],"mappings":"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"}

package/dist/react/MotionGPUErrorOverlay.d.ts

@@ -4,3 +4,4 @@ interface MotionGPUErrorOverlayProps {
 }
 export declare function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=MotionGPUErrorOverlay.d.ts.map

package/dist/react/MotionGPUErrorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MotionGPUErrorOverlay.d.ts","sourceRoot":"","sources":["../../src/lib/react/MotionGPUErrorOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGpE,UAAU,0BAA0B;IACnC,MAAM,EAAE,oBAAoB,CAAC;CAC7B;AA8ZD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAwG3E"}