@tresjs/core 5.7.0 → 5.8.1

package/README.md

@@ -0,0 +1,80 @@
+<p align="center">
+  <a href="https://npmx.dev/package/@tresjs/core"><img src="https://npmx.dev/api/registry/badge/version/@tresjs/core" alt="version"></a>
+  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/dm/@tresjs/core?color=82DBA1" alt="npm downloads"></a>
+  <a href="https://tresjs.org/discord"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
+</p>
+<br/>
+
+# TresJS Core
+
+> Declarative ThreeJS using Vue Components
+
+- 💡 Build 3D scenes with Vue components
+- ⚡️ Powered by Vite
+- 🎨 Vue custom renderer for Three.js
+- 🥰 Always up-to-date with the latest Three.js features
+- 🦾 Fully Typed
+
+TresJS is a Vue custom renderer that lets you build Three.js scenes declaratively using Vue components. Any Three.js class can be used as a component by prefixing it with `Tres` (e.g., `<TresMesh>`, `<TresBoxGeometry>`).
+
+## Installation
+
+```bash
+pnpm i @tresjs/core three
+```
+
+## TypeScript
+
+Install Three.js type definitions:
+
+```bash
+pnpm i @types/three -D
+```
+
+### Vite Configuration
+
+Add the template compiler options to your `vite.config.ts` to make the custom renderer work and avoid console warnings:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      ...templateCompilerOptions,
+    }),
+  ],
+})
+```
+
+## Docs
+
+Checkout the [docs](https://docs.tresjs.org/)
+
+### Build
+
+To build the package run:
+
+```bash
+pnpm run build
+```
+
+### Test
+
+```bash
+pnpm run test
+```
+
+### Playground
+
+To run the playground:
+
+```bash
+pnpm run playground
+```
+
+## License
+
+[MIT](/LICENSE)

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

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.7.0
+  * version: v5.8.1
   * (c) 2026
   * 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.7.0
+  * version: v5.8.1
   * (c) 2026
   * 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.7.0
+  * version: v5.8.1
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import * as vue4 from "vue";
+import * as vue15 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";
@@ -297,12 +297,14 @@ interface UseRendererOptions {
   scene: ShallowRef<TresScene>;
   canvas: MaybeRef<HTMLCanvasElement>;
   options: Reactive<RendererOptions>;
+  fpsLimit?: MaybeRefOrGetter<number>;
   contextParts: Pick<TresContext, 'sizes' | 'camera'>;
 }
 declare function useRendererManager({
   scene,
   canvas,
   options,
+  fpsLimit,
   contextParts: {
     sizes,
     camera
@@ -321,11 +323,11 @@ declare function useRendererManager({
   onRender: _vueuse_core0.EventHookOn<TresRenderer>;
   onError: _vueuse_core0.EventHookOn<TresRendererError>;
   invalidate: (amountOfFramesToInvalidate?: number) => void;
-  canBeInvalidated: vue4.ComputedRef<boolean>;
+  canBeInvalidated: vue15.ComputedRef<boolean>;
   mode: "always" | "on-demand" | "manual" | undefined;
   replaceRenderFunction: (fn: RenderFunction) => void;
-  isInitialized: vue4.Ref<boolean, boolean>;
-  error: vue4.Ref<TresRendererError | null, TresRendererError | null>;
+  isInitialized: vue15.Ref<boolean, boolean>;
+  error: vue15.Ref<TresRendererError | null, TresRendererError | null>;
 };
 type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;
 //#endregion
@@ -357,6 +359,7 @@ interface TresContext {
 declare const useTresContextProvider: (args_0: {
   scene: TresScene;
   canvas: MaybeRef<HTMLCanvasElement>;
+  fpsLimit?: MaybeRefOrGetter<number>;
   windowSize: MaybeRefOrGetter<boolean>;
   rendererOptions: RendererOptions;
 }) => TresContext;
@@ -512,7 +515,7 @@ declare function buildGraph(object: Object3D | TresObject): TresObjectMap;
 //#endregion
 //#region src/composables/useLoader/component.vue.d.ts
 declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue4.PublicProps & __VLS_PrettifyLocal<{
+  props: vue15.PublicProps & __VLS_PrettifyLocal<{
     /**
      * The THREE.js loader to use
      */
@@ -525,9 +528,10 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
      * Optional THREE.js LoadingManager
      */
     manager?: LoadingManager;
+    extensions?: (res: T) => void;
   } & {
-    onLoaded?: ((result: T) => any) | undefined;
     onError?: ((error: unknown) => any) | undefined;
+    onLoaded?: ((result: T) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
@@ -535,20 +539,20 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
   attrs: any;
   slots: {
     default?: (props: {
-      state: vue4.UnwrapRef<T>;
+      state: vue15.UnwrapRef<T>;
       isLoading: boolean;
       error: unknown;
     }) => any;
   };
-  emit: ((evt: "loaded", result: T) => void) & ((evt: "error", error: unknown) => void);
-}>) => vue4.VNode & {
+  emit: ((evt: "error", error: unknown) => void) & ((evt: "loaded", result: T) => void);
+}>) => vue15.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default$2: typeof __VLS_export$2;
 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>) => vue4.ComputedRef<TresObjectMap | undefined>;
+declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue15.ComputedRef<TresObjectMap | undefined>;
 //#endregion
 //#region src/utils/createPriorityEventHook.d.ts
 type Callback<T> = Parameters<EventHookOff<T>>[0];
@@ -599,7 +603,7 @@ type LoopContext = RafLoopContext & TresPartialContext;
 declare const useLoop: () => {
   stop: () => void;
   start: () => void;
-  isActive: Readonly<vue4.ShallowRef<boolean>>;
+  isActive: Readonly<vue15.ShallowRef<boolean>>;
   onBeforeRender: PriorityEventHookOn<LoopContext>;
   onRender: PriorityEventHookOn<LoopContext>;
   render: (fn: RenderFunction) => void;
@@ -675,6 +679,11 @@ interface ContextProps extends RendererOptions {
    * @default false
    */
   windowSize?: boolean;
+  /**
+   * The maximum number of frames per second to render
+   * @default undefined
+   */
+  fpsLimit?: number;
   /**
    * Whether to enable the provide/inject bridge between Vue and TresJS
    * When true, Vue's provide/inject will work across the TresJS boundary
@@ -701,10 +710,10 @@ type __VLS_Props = ContextProps & {
 type __VLS_Slots$1 = {
   default: () => any;
 };
-declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {
-  context: vue4.ShallowRef<TresContext, TresContext>;
+declare const __VLS_base$1: vue15.DefineComponent<__VLS_Props, {
+  context: vue15.ShallowRef<TresContext, TresContext>;
   dispose: () => void;
-}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {
+}, {}, {}, {}, vue15.ComponentOptionsMixin, vue15.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -718,13 +727,13 @@ declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {
   pointercancel: (event: TresPointerEvent) => any;
   lostpointercapture: (event: TresPointerEvent) => any;
   wheel: (event: TresPointerEvent) => any;
-  error: (error: Error) => any;
   ready: (context: TresContext) => any;
+  error: (error: Error) => any;
   pointermissed: (event: TresPointerEvent) => any;
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue4.PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, vue15.PublicProps, Readonly<__VLS_Props> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -738,13 +747,13 @@ declare const __VLS_base$1: vue4.DefineComponent<__VLS_Props, {
   onPointercancel?: ((event: TresPointerEvent) => any) | undefined;
   onLostpointercapture?: ((event: TresPointerEvent) => any) | undefined;
   onWheel?: ((event: TresPointerEvent) => any) | undefined;
-  onError?: ((error: Error) => any) | undefined;
   onReady?: ((context: TresContext) => any) | undefined;
+  onError?: ((error: Error) => any) | undefined;
   onPointermissed?: ((event: TresPointerEvent) => any) | undefined;
   onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue15.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
 declare const _default$1: typeof __VLS_export$1;
 type __VLS_WithSlots$1<T, S> = T & {
@@ -763,7 +772,7 @@ interface TresCanvasInstance {
 type __VLS_Slots = {
   default: () => any;
 };
-declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {
+declare const __VLS_base: vue15.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue15.ComponentOptionsMixin, vue15.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -777,13 +786,13 @@ declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance,
   pointercancel: (event: TresPointerEvent) => any;
   lostpointercapture: (event: TresPointerEvent) => any;
   wheel: (event: TresPointerEvent) => any;
-  error: (error: Error) => any;
   ready: (context: TresContext) => any;
+  error: (error: Error) => any;
   pointermissed: (event: TresPointerEvent) => any;
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
-}, string, vue4.PublicProps, Readonly<ContextProps> & Readonly<{
+}, string, vue15.PublicProps, Readonly<ContextProps> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -797,14 +806,15 @@ declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance,
   onPointercancel?: ((event: TresPointerEvent) => any) | undefined;
   onLostpointercapture?: ((event: TresPointerEvent) => any) | undefined;
   onWheel?: ((event: TresPointerEvent) => any) | undefined;
-  onError?: ((error: Error) => any) | undefined;
   onReady?: ((context: TresContext) => any) | undefined;
+  onError?: ((error: Error) => any) | undefined;
   onPointermissed?: ((event: TresPointerEvent) => any) | undefined;
   onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
 }>, {
   windowSize: boolean;
+  enableProvideBridge: boolean;
   antialias: boolean;
   stencil: boolean;
   depth: boolean;
@@ -819,8 +829,7 @@ declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance,
   shadowMapType: THREE.ShadowMapType;
   useLegacyLights: boolean;
   renderMode: "always" | "on-demand" | "manual";
-  enableProvideBridge: boolean;
-}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue15.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 & {

package/dist/tres.js

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.7.0
+  * version: v5.8.1
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, 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, Color, DirectionalLightHelper, DoubleSide, Float32BufferAttribute, HemisphereLightHelper, Layers, Line, LineBasicMaterial, Material, MathUtils, Mesh, MeshBasicMaterial, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, REVISION, 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.7.0";
+var version = "5.8.1";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -533,13 +533,20 @@ var component_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		manager: {
 			type: Object,
 			required: false
+		},
+		extensions: {
+			type: Function,
+			required: false
 		}
 	},
 	emits: ["loaded", "error"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { state, isLoading, error } = useLoader(props.loader, props.path, { manager: props.manager });
+		const { state, isLoading, error } = useLoader(props.loader, props.path, {
+			manager: props.manager,
+			extensions: props.extensions
+		});
 		whenever(error, (err) => {
 			if (err) emit("error", err);
 		});
@@ -763,7 +770,7 @@ function createTimer() {
 /**
 * @param cycleFn the function that is called before the after event hook is triggered and after the before event hook is triggered.
 */
-const useCreateRafLoop = (cycleFn) => {
+const useCreateRafLoop = (cycleFn, { fpsLimit } = {}) => {
 	const timer = createTimer();
 	const eventHooks = {
 		before: createEventHook(),
@@ -778,7 +785,10 @@ const useCreateRafLoop = (cycleFn) => {
 		eventHooks.before.trigger(context);
 		cycleFn();
 		eventHooks.after.trigger(context);
-	}, { immediate: false });
+	}, {
+		immediate: false,
+		fpsLimit
+	});
 	const start = () => {
 		timer.start();
 		resume();
@@ -808,7 +818,7 @@ var TresRendererError = class extends Error {
 
 //#endregion
 //#region src/composables/useRenderer/useRendererManager.ts
-function useRendererManager({ scene, canvas, options, contextParts: { sizes, camera } }) {
+function useRendererManager({ scene, canvas, options, fpsLimit, contextParts: { sizes, camera } }) {
 	const getRenderer = () => {
 		if (isFunction(options.renderer)) return options.renderer({
 			sizes,
@@ -883,7 +893,7 @@ Error details: ${rendererError.message}`, rendererError);
 	};
 	const loop = useCreateRafLoop(() => {
 		if (frames.value) renderFunction(notifyFrameRendered);
-	});
+	}, { fpsLimit });
 	readyEventHook.on(() => {
 		if (isInitialized.value) loop.start();
 	});
@@ -1009,7 +1019,7 @@ function useEventManager({ canvas, contextParts: { scene, camera, renderer } })
 //#endregion
 //#region src/composables/useTresContextProvider/index.ts
 const INJECTION_KEY = "useTres";
-const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene, canvas, windowSize, rendererOptions }) => {
+const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene, canvas, fpsLimit, windowSize, rendererOptions }) => {
 	const localScene = shallowRef(scene);
 	const sizes = useSizes(windowSize, canvas);
 	const camera = useCameraManager({ sizes });
@@ -1017,6 +1027,7 @@ const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene,
 		scene: localScene,
 		canvas,
 		options: rendererOptions,
+		fpsLimit,
 		contextParts: {
 			sizes,
 			camera
@@ -1393,6 +1404,15 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 	};
 };
 
+//#endregion
+//#region src/core/roots.ts
+const _roots = /* @__PURE__ */ new Map();
+const getRoot = (canvas) => _roots.get(canvas);
+const setRoot = (canvas, root) => {
+	_roots.set(canvas, root);
+};
+const deleteRoot = (canvas) => _roots.delete(canvas);
+
 //#endregion
 //#region src/devtools/DevtoolsMessenger.ts
 const QUEUEABLE_MESSAGE_TYPES = ["asset-load"];
@@ -1934,6 +1954,10 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			type: Boolean,
 			required: false
 		},
+		fpsLimit: {
+			type: Number,
+			required: false
+		},
 		enableProvideBridge: {
 			type: Boolean,
 			required: false
@@ -2063,7 +2087,7 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const scene = shallowRef(new Scene());
 		const instance = getCurrentInstance();
 		extend(THREE);
-		const createInternalComponent = (context$1, empty = false) => defineComponent({ setup() {
+		const createInternalComponent = (context$1, hmrTick) => defineComponent({ setup() {
 			const ctx = getCurrentInstance()?.appContext;
 			if (ctx) ctx.app = instance?.appContext.app;
 			const provides = {};
@@ -2081,15 +2105,27 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			provide(INJECTION_KEY, context$1);
 			provide("extend", extend);
 			if (typeof window !== "undefined" && ctx?.app) registerTresDevtools(ctx?.app, context$1);
-			return () => h(Fragment, null, !empty ? slots.default() : []);
+			return () => {
+				hmrTick.value;
+				return h(Fragment, null, slots.default?.() ?? []);
+			};
 		} });
-		const mountCustomRenderer = (context$1, empty = false) => {
-			const InternalComponent = createInternalComponent(context$1, empty);
-			const { render } = createRenderer(nodeOps({
+		const mountCustomRenderer = (context$1) => {
+			const canvas = props.canvas;
+			if (getRoot(canvas)) return;
+			const hmrTick = ref(0);
+			const internalComponent = createInternalComponent(context$1, hmrTick);
+			const renderer$1 = createRenderer(nodeOps({
 				context: context$1,
 				options: props.customRendererOptions
 			}));
-			render(h(InternalComponent), scene.value);
+			renderer$1.render(h(internalComponent), scene.value);
+			setRoot(canvas, {
+				renderer: renderer$1,
+				internalComponent,
+				hmrTick,
+				context: context$1
+			});
 		};
 		const dispose = (context$1, force = false) => {
 			disposeObject3D(context$1.scene.value);
@@ -2109,6 +2145,7 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const context = shallowRef(useTresContextProvider({
 			scene: scene.value,
 			canvas: props.canvas,
+			fpsLimit: () => props.fpsLimit ?? Infinity,
 			windowSize: props.windowSize ?? false,
 			rendererOptions: props
 		}));
@@ -2116,14 +2153,18 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			context,
 			dispose: () => dispose(context.value, true)
 		});
-		const handleHMR = (context$1) => {
-			mountCustomRenderer(context$1);
+		const handleHMR = () => {
+			const root = getRoot(props.canvas);
+			if (root) root.hmrTick.value++;
 		};
 		const unmountCanvas = () => {
+			const root = getRoot(props.canvas);
+			if (!root) return;
 			const isTresScene = (value) => isScene(value) && "__tres" in value;
 			if (isTresScene(scene.value)) scene.value.__tres.isUnmounting = true;
-			mountCustomRenderer(context.value, true);
+			root.renderer.render(null, scene.value);
 			dispose(context.value);
+			deleteRoot(props.canvas);
 		};
 		const { camera, renderer } = context.value;
 		const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
@@ -2166,14 +2207,20 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			});
 		});
 		renderer.onReady(() => {
-			mountCustomRenderer(context.value, false);
+			mountCustomRenderer(context.value);
 			emit("ready", context.value);
 			if (!activeCamera.value) addDefaultCamera();
 		});
 		renderer.onError((error) => {
 			emit("error", error);
 		});
-		if (import.meta.hot) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
+		if (import.meta.hot) {
+			const hmrHandler = () => handleHMR();
+			import.meta.hot.on("vite:afterUpdate", hmrHandler);
+			onBeforeUnmount(() => {
+				import.meta.hot?.off?.("vite:afterUpdate", hmrHandler);
+			});
+		}
 		onMounted(async () => {
 			await promiseTimeout(3e3);
 			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.`);
@@ -2202,6 +2249,10 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			required: false,
 			default: void 0
 		},
+		fpsLimit: {
+			type: Number,
+			required: false
+		},
 		enableProvideBridge: {
 			type: Boolean,
 			required: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.7.0",
+  "version": "5.8.1",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -77,7 +77,7 @@
     "vue": "^3.5.22",
     "vue-demi": "^0.14.10",
     "vue-tsc": "^3.2.1",
-    "@tresjs/eslint-config": "1.5.1"
+    "@tresjs/eslint-config": "1.6.0"
   },
   "nx": {
     "implicitDependencies": [