@tresjs/core 5.8.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.8.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.8.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,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.0
+  * version: v5.8.1
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -528,6 +528,7 @@ declare const __VLS_export$2: <T extends TresObjectMap>(__VLS_props: NonNullable
      * Optional THREE.js LoadingManager
      */
     manager?: LoadingManager;
+    extensions?: (res: T) => void;
   } & {
     onError?: ((error: unknown) => any) | undefined;
     onLoaded?: ((result: T) => any) | undefined;

package/dist/tres.js

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.8.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.8.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);
 		});
@@ -1397,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"];
@@ -2071,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 = {};
@@ -2089,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);
@@ -2125,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;
@@ -2175,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.`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.8.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": [