@tresjs/core 5.2.0 → 5.2.1

package/dist/{chunk-DADVwcMf.js → chunk-BRx1-uMz.js}

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/template-compiler-options.d.mts

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/template-compiler-options.mjs

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/tres.d.ts

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import * as vue10 from "vue";
+import * as vue0 from "vue";
 import { App, ComputedRef, DefineComponent, MaybeRef, MaybeRefOrGetter, Reactive, Ref, ShallowRef, VNode, VNodeRef } from "vue";
 import * as THREE from "three";
 import { BufferGeometry, Camera, Color, ColorRepresentation, ColorSpace, Event, Fog, Group, Layers, Light, Loader, LoadingManager, Material, Mesh, Object3D, Object3DEventMap, OrthographicCamera, PerspectiveCamera, Scene, ShadowMapType, ToneMapping, Vector3, WebGLRenderer } from "three";
@@ -72,8 +72,9 @@ interface RafLoopContext {
 //#endregion
 //#region src/composables/useSizes/index.d.ts
 interface SizesType {
-  height: Readonly<Ref<number>>;
   width: Readonly<Ref<number>>;
+  height: Readonly<Ref<number>>;
+  pixelRatio: Readonly<Ref<number>>;
   aspectRatio: ComputedRef<number>;
 }
 //#endregion
@@ -311,7 +312,7 @@ declare function useRendererManager({
   onReady: _vueuse_core0.EventHookOn<TresRenderer>;
   onRender: _vueuse_core0.EventHookOn<TresRenderer>;
   invalidate: (amountOfFramesToInvalidate?: number) => void;
-  canBeInvalidated: vue10.ComputedRef<boolean>;
+  canBeInvalidated: vue0.ComputedRef<boolean>;
   mode: "always" | "on-demand" | "manual" | undefined;
   replaceRenderFunction: (fn: RenderFunction) => void;
 };
@@ -514,27 +515,27 @@ declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable
   } & {
     onLoaded?: ((result: T) => any) | undefined;
     onError?: ((error: unknown) => any) | undefined;
-  }> & vue10.PublicProps & (typeof globalThis extends {
+  }> & vue0.PublicProps & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
   expose: (exposed: {}) => void;
   attrs: any;
   slots: {
     default?: (props: {
-      state: vue10.UnwrapRef<T>;
+      state: vue0.UnwrapRef<T>;
       isLoading: boolean;
       error: unknown;
     }) => any;
   };
   emit: ((evt: "loaded", result: T) => void) & ((evt: "error", error: unknown) => void);
-}>) => vue10.VNode & {
+}>) => vue0.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default$1: typeof __VLS_export$1;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 //#region src/composables/useGraph/index.d.ts
-declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue10.ComputedRef<TresObjectMap | undefined>;
+declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue0.ComputedRef<TresObjectMap | undefined>;
 //#endregion
 //#region src/utils/createPriorityEventHook.d.ts
 type Callback<T> = Parameters<EventHookOff<T>>[0];
@@ -585,7 +586,7 @@ type LoopContext = RafLoopContext & TresPartialContext;
 declare const useLoop: () => {
   stop: () => void;
   start: () => void;
-  isActive: Readonly<vue10.ShallowRef<boolean>>;
+  isActive: Readonly<vue0.ShallowRef<boolean>>;
   onBeforeRender: PriorityEventHookOn<LoopContext>;
   onRender: PriorityEventHookOn<LoopContext>;
   render: (fn: RenderFunction) => void;
@@ -670,11 +671,14 @@ type TresCanvasEmits = {
   beforeLoop: [context: TresContextWithClock];
   loop: [context: TresContextWithClock];
 } & { [key in TresPointerEventName]: [event: TresPointerEvent] };
-declare const _default: typeof __VLS_export;
-declare const __VLS_export: __VLS_WithSlots<vue10.DefineComponent<TresCanvasProps, {
-  context: vue10.ShallowRef<TresContext | null, TresContext | null>;
+interface TresCanvasInstance {
+  get context(): TresContext | undefined;
   dispose: () => void;
-}, {}, {}, {}, vue10.ComponentOptionsMixin, vue10.ComponentOptionsMixin, {
+}
+type __VLS_Slots = {
+  default: () => any;
+};
+declare const __VLS_base: vue0.DefineComponent<TresCanvasProps, TresCanvasInstance, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -693,7 +697,7 @@ declare const __VLS_export: __VLS_WithSlots<vue10.DefineComponent<TresCanvasProp
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue10.PublicProps, Readonly<TresCanvasProps> & Readonly<{
+}, string, vue0.PublicProps, Readonly<TresCanvasProps> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -714,7 +718,6 @@ declare const __VLS_export: __VLS_WithSlots<vue10.DefineComponent<TresCanvasProp
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
 }>, {
   windowSize: boolean;
-  enableProvideBridge: boolean;
   antialias: boolean;
   stencil: boolean;
   depth: boolean;
@@ -729,9 +732,10 @@ declare const __VLS_export: __VLS_WithSlots<vue10.DefineComponent<TresCanvasProp
   shadowMapType: THREE.ShadowMapType;
   useLegacyLights: boolean;
   renderMode: "always" | "on-demand" | "manual";
-}, {}, {}, {}, string, vue10.ComponentProvideOptions, false, {}, any>, {
-  default: () => any;
-}>;
+  enableProvideBridge: boolean;
+}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
@@ -1063,4 +1067,4 @@ interface TresPlugin {
 }
 declare const plugin: TresPlugin;
 //#endregion
-export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, type TresCanvasEmits, type TresCanvasProps, TresCatalogue, TresColor, TresColorArray, type TresContext, TresContextWithClock, TresControl, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, TresPrimitive, TresQuaternion, TresRenderer, TresRendererSetupContext, TresScene, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$1 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, plugin as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };
+export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, type TresCanvasEmits, type TresCanvasInstance, type TresCanvasProps, TresCatalogue, TresColor, TresColorArray, type TresContext, TresContextWithClock, TresControl, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, TresPrimitive, TresQuaternion, TresRenderer, TresRendererSetupContext, TresScene, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$1 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, plugin as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };

package/dist/tres.js

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.2.0
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import { Fragment, computed, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect, withCtx } from "vue";
 import * as THREE from "three";
 import { ACESFilmicToneMapping, ArrowHelper, BackSide, BufferAttribute, BufferGeometry, Clock, Color, DirectionalLightHelper, DoubleSide, Float32BufferAttribute, HemisphereLightHelper, Layers, Line, LineBasicMaterial, Material, MathUtils, Mesh, MeshBasicMaterial, Object3D, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, Scene, SpotLightHelper, Vector3, WebGLRenderer } from "three";
 import { createEventHook, createInjectionState, promiseTimeout, refDebounced, tryOnScopeDispose, unrefElement, useAsyncState, useDevicePixelRatio, useElementSize, useFps, useMemory, useRafFn, useTimeout, useWindowSize, whenever } from "@vueuse/core";
@@ -14,7 +14,7 @@ import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 
 //#region package.json
-var version = "5.2.0";
+var version = "5.2.1";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -826,9 +826,8 @@ function useRendererManager({ scene, canvas, options, contextParts: { sizes, cam
 		}
 		invalidateOnDemand();
 	}, { immediate: true });
-	const { pixelRatio } = useDevicePixelRatio();
 	watchEffect(() => {
-		setPixelRatio(renderer, pixelRatio.value, toValue(options.dpr));
+		setPixelRatio(renderer, sizes.pixelRatio.value, toValue(options.dpr));
 	});
 	if (toValue(options.renderMode) === "on-demand") invalidate();
 	if (toValue(options.renderMode) === "manual") useTimeout(100, { callback: advance });
@@ -895,12 +894,14 @@ function useRendererManager({ scene, canvas, options, contextParts: { sizes, cam
 //#endregion
 //#region src/composables/useSizes/index.ts
 function useSizes(windowSize, canvas, debounceMs = 10) {
+	const { pixelRatio } = useDevicePixelRatio();
 	const reactiveSize = toValue(windowSize) ? useWindowSize() : useElementSize(computed(() => toValue(canvas).parentElement));
 	const debouncedReactiveWidth = readonly(refDebounced(reactiveSize.width, debounceMs));
 	const debouncedReactiveHeight = readonly(refDebounced(reactiveSize.height, debounceMs));
 	return {
-		height: debouncedReactiveHeight,
 		width: debouncedReactiveWidth,
+		height: debouncedReactiveHeight,
+		pixelRatio,
 		aspectRatio: computed(() => debouncedReactiveWidth.value / debouncedReactiveHeight.value)
 	};
 }
@@ -1808,10 +1809,9 @@ function registerTresDevtools(app, tres) {
 }
 
 //#endregion
-//#region src/components/TresCanvas.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = ["data-scene", "data-tres"];
-var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "TresCanvas",
+//#region src/components/Context.vue?vue&type=script&setup=true&lang.ts
+var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Context",
 	props: {
 		camera: {
 			type: null,
@@ -1819,28 +1819,23 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		windowSize: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		enableProvideBridge: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
 		},
 		antialias: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
 		},
 		stencil: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		depth: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		precision: {
 			type: String,
@@ -1848,13 +1843,11 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		logarithmicDepthBuffer: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		preserveDrawingBuffer: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		powerPreference: {
 			type: null,
@@ -1862,8 +1855,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		alpha: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		premultipliedAlpha: {
 			type: Boolean,
@@ -1871,8 +1863,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		failIfMajorPerformanceCaveat: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		clearColor: {
 			type: [
@@ -1880,33 +1871,27 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				String,
 				Number
 			],
-			required: false,
-			default: "#000000"
+			required: false
 		},
 		clearAlpha: {
 			type: Number,
-			required: false,
-			default: 1
+			required: false
 		},
 		shadows: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		toneMapping: {
 			type: null,
-			required: false,
-			default: ACESFilmicToneMapping
+			required: false
 		},
 		shadowMapType: {
 			type: null,
-			required: false,
-			default: PCFSoftShadowMap
+			required: false
 		},
 		useLegacyLights: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		outputColorSpace: {
 			type: null,
@@ -1918,8 +1903,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		renderMode: {
 			type: String,
-			required: false,
-			default: "always"
+			required: false
 		},
 		dpr: {
 			type: [Number, Array],
@@ -1928,6 +1912,10 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		renderer: {
 			type: Function,
 			required: false
+		},
+		canvas: {
+			type: null,
+			required: true
 		}
 	},
 	emits: [
@@ -1954,7 +1942,6 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const canvasRef = ref();
 		const scene = shallowRef(new Scene());
 		const instance = getCurrentInstance();
 		extend(THREE);
@@ -1994,7 +1981,12 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			}
 			scene.value.__tres = { root: context$1 };
 		};
-		const context = shallowRef(null);
+		const context = shallowRef(useTresContextProvider({
+			scene: scene.value,
+			canvas: props.canvas,
+			windowSize: props.windowSize ?? false,
+			rendererOptions: props
+		}));
 		__expose({
 			context,
 			dispose: () => dispose(context.value, true)
@@ -2007,71 +1999,224 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			dispose(context.value);
 			mountCustomRenderer(context.value, true);
 		};
-		onMounted(() => {
-			const existingCanvas = canvasRef;
-			context.value = useTresContextProvider({
-				scene: scene.value,
-				canvas: existingCanvas,
-				windowSize: props.windowSize ?? false,
-				rendererOptions: props
-			});
-			const { camera, renderer } = context.value;
-			const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
-			mountCustomRenderer(context.value);
-			const addDefaultCamera = () => {
-				const camera$1 = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 1e3);
-				camera$1.position.set(3, 3, 3);
-				camera$1.lookAt(0, 0, 0);
-				registerCamera(camera$1);
-				const unwatch = watchEffect(() => {
-					if (cameras.value.length >= 2) {
-						camera$1.removeFromParent();
-						deregisterCamera(camera$1);
-						unwatch?.();
-					}
-				});
-			};
-			context.value.events.onPointerMissed((event) => {
-				emit("pointermissed", event);
-			});
-			watch(() => props.camera, (newCamera, oldCamera) => {
-				if (newCamera) registerCamera(toValue(newCamera), true);
-				if (oldCamera) {
-					toValue(oldCamera).removeFromParent();
-					deregisterCamera(toValue(oldCamera));
+		const { camera, renderer } = context.value;
+		const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
+		mountCustomRenderer(context.value);
+		const addDefaultCamera = () => {
+			const camera$1 = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 1e3);
+			camera$1.position.set(3, 3, 3);
+			camera$1.lookAt(0, 0, 0);
+			registerCamera(camera$1);
+			const unwatch = watchEffect(() => {
+				if (cameras.value.length >= 2) {
+					camera$1.removeFromParent();
+					deregisterCamera(camera$1);
+					unwatch?.();
 				}
-			}, { immediate: true });
-			if (!activeCamera.value) addDefaultCamera();
-			renderer.onRender(() => {
-				if (context.value) emit("render", context.value);
 			});
-			renderer.loop.onLoop((loopContext) => {
-				if (context.value) emit("loop", {
-					...context.value,
-					...loopContext
-				});
-			});
-			renderer.loop.onBeforeLoop((loopContext) => {
-				if (context.value) emit("beforeLoop", {
-					...context.value,
-					...loopContext
-				});
+		};
+		context.value.events.onPointerMissed((event) => {
+			emit("pointermissed", event);
+		});
+		watch(() => props.camera, (newCamera, oldCamera) => {
+			if (newCamera) registerCamera(toValue(newCamera), true);
+			if (oldCamera) {
+				toValue(oldCamera).removeFromParent();
+				deregisterCamera(toValue(oldCamera));
+			}
+		}, { immediate: true });
+		if (!activeCamera.value) addDefaultCamera();
+		renderer.onRender(() => {
+			if (context.value) emit("render", context.value);
+		});
+		renderer.loop.onLoop((loopContext) => {
+			if (context.value) emit("loop", {
+				...context.value,
+				...loopContext
 			});
-			renderer.onReady(() => {
-				emit("ready", context.value);
+		});
+		renderer.loop.onBeforeLoop((loopContext) => {
+			if (context.value) emit("beforeLoop", {
+				...context.value,
+				...loopContext
 			});
-			if (import.meta.hot && context.value) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
 		});
+		renderer.onReady(() => {
+			emit("ready", context.value);
+		});
+		if (import.meta.hot) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
 		onMounted(async () => {
 			await promiseTimeout(3e3);
-			if (context.value && (!context.value.sizes.width || !context.value.sizes.height.value)) console.warn(`TresCanvas: The canvas has no area, so nothing can be rendered. Set it manually on the parent element or use the prop windowSize.`);
+			if (!context.value.sizes.width || !context.value.sizes.height.value) console.warn(`TresCanvas: The canvas has no area, so nothing can be rendered. Set it manually on the parent element or use the prop windowSize.`);
 		});
 		onUnmounted(unmountCanvas);
+		return () => {};
+	}
+});
+
+//#endregion
+//#region src/components/Context.vue
+var Context_default = Context_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/TresCanvas.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-scene", "data-tres"];
+var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TresCanvas",
+	props: {
+		camera: {
+			type: null,
+			required: false
+		},
+		windowSize: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		enableProvideBridge: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		antialias: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		stencil: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		depth: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		precision: {
+			type: String,
+			required: false
+		},
+		logarithmicDepthBuffer: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		preserveDrawingBuffer: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		powerPreference: {
+			type: null,
+			required: false
+		},
+		alpha: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		premultipliedAlpha: {
+			type: Boolean,
+			required: false
+		},
+		failIfMajorPerformanceCaveat: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		clearColor: {
+			type: [
+				Object,
+				String,
+				Number
+			],
+			required: false,
+			default: "#000000"
+		},
+		clearAlpha: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		shadows: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		toneMapping: {
+			type: null,
+			required: false,
+			default: ACESFilmicToneMapping
+		},
+		shadowMapType: {
+			type: null,
+			required: false,
+			default: PCFSoftShadowMap
+		},
+		useLegacyLights: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		outputColorSpace: {
+			type: null,
+			required: false
+		},
+		toneMappingExposure: {
+			type: Number,
+			required: false
+		},
+		renderMode: {
+			type: String,
+			required: false,
+			default: "always"
+		},
+		dpr: {
+			type: [Number, Array],
+			required: false
+		},
+		renderer: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: [
+		"ready",
+		"pointermissed",
+		"render",
+		"beforeLoop",
+		"loop",
+		"click",
+		"contextmenu",
+		"pointermove",
+		"pointerenter",
+		"pointerleave",
+		"pointerover",
+		"pointerout",
+		"dblclick",
+		"pointerdown",
+		"pointerup",
+		"pointercancel",
+		"lostpointercapture",
+		"wheel"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const canvasRef = ref();
+		const contextRef = shallowRef();
+		__expose({
+			get context() {
+				return contextRef.value?.context;
+			},
+			dispose: () => contextRef.value?.dispose()
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("canvas", {
 				ref_key: "canvasRef",
 				ref: canvasRef,
-				"data-scene": scene.value.uuid,
+				"data-scene": contextRef.value?.context?.scene.value.uuid,
 				class: normalizeClass(_ctx.$attrs.class),
 				"data-tres": `tresjs ${unref(version)}`,
 				style: normalizeStyle({
@@ -2085,7 +2230,34 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					touchAction: "none",
 					..._ctx.$attrs.style
 				})
-			}, null, 14, _hoisted_1);
+			}, [canvasRef.value ? (openBlock(), createBlock(Context_default, mergeProps({
+				key: 0,
+				ref_key: "contextRef",
+				ref: contextRef,
+				canvas: canvasRef.value
+			}, props, {
+				onReady: _cache[0] || (_cache[0] = ($event) => emit("ready", $event)),
+				onPointermissed: _cache[1] || (_cache[1] = ($event) => emit("pointermissed", $event)),
+				onRender: _cache[2] || (_cache[2] = ($event) => emit("render", $event)),
+				onBeforeLoop: _cache[3] || (_cache[3] = ($event) => emit("beforeLoop", $event)),
+				onLoop: _cache[4] || (_cache[4] = ($event) => emit("loop", $event)),
+				onClick: _cache[5] || (_cache[5] = ($event) => emit("click", $event)),
+				onContextmenu: _cache[6] || (_cache[6] = ($event) => emit("contextmenu", $event)),
+				onPointermove: _cache[7] || (_cache[7] = ($event) => emit("pointermove", $event)),
+				onPointerenter: _cache[8] || (_cache[8] = ($event) => emit("pointerenter", $event)),
+				onPointerleave: _cache[9] || (_cache[9] = ($event) => emit("pointerleave", $event)),
+				onPointerover: _cache[10] || (_cache[10] = ($event) => emit("pointerover", $event)),
+				onPointerout: _cache[11] || (_cache[11] = ($event) => emit("pointerout", $event)),
+				onDblclick: _cache[12] || (_cache[12] = ($event) => emit("dblclick", $event)),
+				onPointerdown: _cache[13] || (_cache[13] = ($event) => emit("pointerdown", $event)),
+				onPointerup: _cache[14] || (_cache[14] = ($event) => emit("pointerup", $event)),
+				onPointercancel: _cache[15] || (_cache[15] = ($event) => emit("pointercancel", $event)),
+				onLostpointercapture: _cache[16] || (_cache[16] = ($event) => emit("lostpointercapture", $event)),
+				onWheel: _cache[17] || (_cache[17] = ($event) => emit("wheel", $event))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["canvas"])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
 		};
 	}
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",