@tresjs/core 5.3.3 → 5.4.0

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

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.3.3
+  * version: v5.4.0
   * (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.3.3
+  * version: v5.4.0
   * (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.3.3
+  * version: v5.4.0
   * (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 vue6 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";
@@ -321,11 +321,11 @@ declare function useRendererManager({
   onRender: _vueuse_core0.EventHookOn<TresRenderer>;
   onError: _vueuse_core0.EventHookOn<TresRendererError>;
   invalidate: (amountOfFramesToInvalidate?: number) => void;
-  canBeInvalidated: vue4.ComputedRef<boolean>;
+  canBeInvalidated: vue6.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: vue6.Ref<boolean, boolean>;
+  error: vue6.Ref<TresRendererError | null, TresRendererError | null>;
 };
 type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;
 //#endregion
@@ -437,6 +437,8 @@ type TresPrimitive = TresInstance & {
 interface TresScene extends THREE.Scene {
   __tres: {
     root: TresContext;
+    objects: TresObject[];
+    isUnmounting: boolean;
   };
 }
 interface MathRepresentation {
@@ -510,7 +512,7 @@ declare function buildGraph(object: Object3D | TresObject): TresObjectMap;
 //#endregion
 //#region src/composables/useLoader/component.vue.d.ts
 declare const __VLS_export$1: <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: vue6.PublicProps & __VLS_PrettifyLocal<{
     /**
      * The THREE.js loader to use
      */
@@ -524,8 +526,8 @@ declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable
      */
     manager?: LoadingManager;
   } & {
-    onLoaded?: ((result: T) => any) | undefined;
     onError?: ((error: unknown) => any) | undefined;
+    onLoaded?: ((result: T) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});
@@ -533,20 +535,20 @@ declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable
   attrs: any;
   slots: {
     default?: (props: {
-      state: vue4.UnwrapRef<T>;
+      state: vue6.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);
+}>) => vue6.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>) => vue4.ComputedRef<TresObjectMap | undefined>;
+declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue6.ComputedRef<TresObjectMap | undefined>;
 //#endregion
 //#region src/utils/createPriorityEventHook.d.ts
 type Callback<T> = Parameters<EventHookOff<T>>[0];
@@ -597,7 +599,7 @@ type LoopContext = RafLoopContext & TresPartialContext;
 declare const useLoop: () => {
   stop: () => void;
   start: () => void;
-  isActive: Readonly<vue4.ShallowRef<boolean>>;
+  isActive: Readonly<vue6.ShallowRef<boolean>>;
   onBeforeRender: PriorityEventHookOn<LoopContext>;
   onRender: PriorityEventHookOn<LoopContext>;
   render: (fn: RenderFunction) => void;
@@ -704,7 +706,7 @@ interface TresCanvasInstance {
 type __VLS_Slots = {
   default: () => any;
 };
-declare const __VLS_base: vue4.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {
+declare const __VLS_base: vue6.DefineComponent<ContextProps, TresCanvasInstance, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {
   click: (event: TresPointerEvent) => any;
   contextmenu: (event: TresPointerEvent) => any;
   pointermove: (event: TresPointerEvent) => any;
@@ -718,13 +720,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, vue6.PublicProps, Readonly<ContextProps> & Readonly<{
   onClick?: ((event: TresPointerEvent) => any) | undefined;
   onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
   onPointermove?: ((event: TresPointerEvent) => any) | undefined;
@@ -738,14 +740,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;
@@ -760,8 +763,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, vue6.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,20 +1,20 @@
 /**
   * name: @tresjs/core
-  * version: v5.3.3
+  * version: v5.4.0
   * (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 * 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 { ACESFilmicToneMapping, ArrowHelper, BackSide, BufferAttribute, BufferGeometry, Clock, Color, DirectionalLightHelper, DoubleSide, Float32BufferAttribute, HemisphereLightHelper, Layers, Line, LineBasicMaterial, Material, MathUtils, Mesh, MeshBasicMaterial, 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";
 import { camel, isEqual, isFunction, isNumber, isObject, isString, isUndefined } from "radashi";
 import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 
 //#region package.json
-var version = "5.3.3";
+var version = "5.4.0";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -824,7 +824,6 @@ Error details: ${rendererError.message}`, rendererError);
 			errorEventHook.trigger(rendererError);
 		}
 	};
-	initializeRenderer();
 	const renderEventHook = createEventHook();
 	const notifyFrameRendered = () => {
 		frames.value = isModeAlways.value ? 1 : Math.max(0, frames.value - 1);
@@ -864,6 +863,7 @@ Error details: ${rendererError.message}`, rendererError);
 		if (!isInitialized.value) return;
 		setPixelRatio(renderer, sizes.pixelRatio.value, toValue(options.dpr));
 	});
+	initializeRenderer();
 	if (toValue(options.renderMode) === "on-demand") invalidate();
 	if (toValue(options.renderMode) === "manual") useTimeout(100, { callback: advance });
 	const clearColorAndAlpha = computed(() => {
@@ -996,7 +996,11 @@ const [useTresContextProvider, _useTresContext] = createInjectionState(({ scene,
 		extend,
 		events
 	};
-	ctx.scene.value.__tres = { root: ctx };
+	ctx.scene.value.__tres = {
+		root: ctx,
+		objects: [],
+		isUnmounting: false
+	};
 	return ctx;
 }, { injectionKey: "useTres" });
 const useTresContext = () => {
@@ -1116,9 +1120,24 @@ const isSupportedPointerEvent = (event) => supportedPointerEvents.includes(event
 
 //#endregion
 //#region src/core/nodeOps.ts
+const textNodeSymbol = Symbol("tresTextNode");
+const commentNodeSymbol = Symbol("tresComment");
 const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 	const scene = context.scene.value;
-	function createElement(tag, _isSVG, _anchor, props) {
+	const createTextNode = () => {
+		if (scene?.__tres?.isUnmounting) return;
+		return {
+			[textNodeSymbol]: true,
+			__tres: { parent: null }
+		};
+	};
+	const createCommentNode = () => ({
+		[commentNodeSymbol]: true,
+		__tres: { parent: null }
+	});
+	const isTextNode = (node) => !!node && typeof node === "object" && textNodeSymbol in node;
+	const isCommentNode = (node) => !!node && typeof node === "object" && commentNodeSymbol in node;
+	function createElement(tag, _namespace, _isCustomizedBuiltIn, props) {
 		if (!props) props = {};
 		if (!props.args) props.args = [];
 		if (isHTMLTag(tag)) return null;
@@ -1164,9 +1183,19 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 		}, context);
 		return obj;
 	}
-	function insert(child, parent) {
+	function insert(child, parent, anchor) {
 		if (!child) return;
 		parent = parent || scene;
+		if (isTextNode(child) || isCommentNode(child)) {
+			const parentInstance$1 = parent.__tres ? parent : prepareTresInstance(parent, {}, context);
+			child.__tres.parent = parentInstance$1;
+			if (parentInstance$1.__tres.objects) {
+				const insertIndex = anchor ? parentInstance$1.__tres.objects.findIndex((obj) => obj === anchor) : -1;
+				if (insertIndex >= 0) parentInstance$1.__tres.objects.splice(insertIndex, 0, child);
+				else parentInstance$1.__tres.objects.push(child);
+			}
+			return;
+		}
 		const childInstance = child.__tres ? child : prepareTresInstance(child, {}, context);
 		const parentInstance = parent.__tres ? parent : prepareTresInstance(parent, {}, context);
 		child = unboxTresPrimitive(childInstance);
@@ -1178,7 +1207,11 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 			child.dispatchEvent({ type: "added" });
 		}
 		childInstance.__tres.parent = parentInstance;
-		if (parentInstance.__tres.objects && !parentInstance.__tres.objects.includes(childInstance)) parentInstance.__tres.objects.push(childInstance);
+		if (parentInstance.__tres.objects && !parentInstance.__tres.objects.includes(childInstance)) {
+			const insertIndex = anchor ? parentInstance.__tres.objects.findIndex((obj) => obj === anchor) : -1;
+			if (~insertIndex) parentInstance.__tres.objects.splice(insertIndex, 0, childInstance);
+			else parentInstance.__tres.objects.push(childInstance);
+		}
 	}
 	/**
 	* @param node – the node root to remove
@@ -1186,6 +1219,12 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 	*/
 	function remove(node, dispose) {
 		if (!node) return;
+		if (isTextNode(node) || isCommentNode(node)) {
+			const parent = node.__tres.parent;
+			if (parent?.__tres?.objects) filterInPlace(parent.__tres.objects, (obj) => obj !== node);
+			node.__tres.parent = null;
+			return;
+		}
 		dispose = isUndefined(dispose) ? "default" : dispose;
 		const userDispose = node.__tres?.dispose;
 		if (!isUndefined(userDispose)) if (userDispose === null) dispose = false;
@@ -1285,23 +1324,10 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 	function parentNode(node) {
 		return node?.__tres?.parent || null;
 	}
-	/**
-	* createComment
-	*
-	* Creates a comment object that can be used to represent a commented out string in a vue template
-	* Used by Vue's internal runtime as a placeholder for v-if'd elements
-	*
-	* @param comment Any commented out string contaiend in a vue template, typically this is `v-if`
-	* @returns TresObject
-	*/
-	function createComment(comment) {
-		const commentObj = prepareTresInstance(new Object3D(), { type: "Comment" }, context);
-		commentObj.name = comment;
-		return commentObj;
-	}
 	function nextSibling(node) {
+		if (!node || !("__tres" in node)) return null;
 		const siblings = parentNode(node)?.__tres?.objects || [];
-		const index = siblings.indexOf(node);
+		const index = siblings.findIndex((sibling) => sibling === node);
 		if (index < 0 || index >= siblings.length - 1) return null;
 		return siblings[index + 1];
 	}
@@ -1312,8 +1338,8 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 		createElement,
 		patchProp,
 		parentNode,
-		createText: noop,
-		createComment,
+		createText: createTextNode,
+		createComment: createCommentNode,
 		setText: noop,
 		setElementText: noop,
 		nextSibling,
@@ -2031,7 +2057,11 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					context$1.renderer.instance.forceContextLoss();
 				}
 			}
-			scene.value.__tres = { root: context$1 };
+			scene.value.__tres = {
+				root: context$1,
+				objects: [],
+				isUnmounting: true
+			};
 		};
 		const context = shallowRef(useTresContextProvider({
 			scene: scene.value,
@@ -2044,12 +2074,13 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			dispose: () => dispose(context.value, true)
 		});
 		const handleHMR = (context$1) => {
-			dispose(context$1);
 			mountCustomRenderer(context$1);
 		};
 		const unmountCanvas = () => {
-			dispose(context.value);
+			const isTresScene = (value) => isScene(value) && "__tres" in value;
+			if (isTresScene(scene.value)) scene.value.__tres.isUnmounting = true;
 			mountCustomRenderer(context.value, true);
+			dispose(context.value);
 		};
 		const { camera, renderer } = context.value;
 		const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
@@ -2495,7 +2526,7 @@ const vLightHelper = {
 		el.parent?.add(new CurrentHelper(el, 1, el.color.getHex()));
 	},
 	updated: (el) => {
-		currentInstance = el.parent.children.find((child) => child instanceof CurrentHelper);
+		currentInstance = el.parent?.children.find((child) => child instanceof CurrentHelper);
 		if (currentInstance instanceof RectAreaLightHelper) return;
 		currentInstance.update();
 	},
@@ -2504,7 +2535,7 @@ const vLightHelper = {
 			logWarning(`${el.type} is not a light`);
 			return;
 		}
-		currentInstance = el.parent.children.find((child) => child instanceof CurrentHelper);
+		currentInstance = el.parent?.children.find((child) => child instanceof CurrentHelper);
 		if (currentInstance && currentInstance.dispose) currentInstance.dispose();
 		if (el.parent) el.parent.remove(currentInstance);
 	}

package/package.json

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