chore: fix lint and update deps (#821)

* chore: fix lint and update deps

* chore: lint issues

.github/workflows/pkg.pr.new.yml

@@ -1,6 +1,5 @@
 name: Publish Any Commit
 on:
-  pull_request:
   push:
     branches:
       - '**'

docs/.vitepress/config/index.ts

@@ -1,11 +1,11 @@
 import { defineConfig } from 'vitepress'
+import { deConfig } from './de'
 import { enConfig } from './en'
 import { esConfig } from './es'
 import { frConfig } from './fr'
-import { deConfig } from './de'
+import { nlConfig } from './nl'
 import { sharedConfig } from './shared'
 import { zhConfig } from './zh'
-import { nlConfig } from './nl'
 
 export default defineConfig({
   ...sharedConfig,

docs/.vitepress/config/shared.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vitepress'
 import { resolve } from 'pathe'
+import { defineConfig } from 'vitepress'
 
 export const sharedConfig = defineConfig({
   title: 'TresJS',

docs/.vitepress/theme/TresLayout.vue

@@ -1,7 +1,7 @@
 <script setup>
 import Theme from 'vitepress/theme'
-import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
 import HomeSponsors from './components/HomeSponsors.vue'
+import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
 
 const { Layout } = Theme
 </script>

docs/.vitepress/theme/components/BlenderCube.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
+import { useTresContext } from '@tresjs/core'
 
 const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = nodes.Cube

docs/.vitepress/theme/components/Cookbook.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed } from 'vue'
 import { useData } from 'vitepress'
+import { computed } from 'vue'
 import { data as recipes } from '../recipes.data.ts'
 
 const { lang } = useData()

docs/.vitepress/theme/components/DonutExample.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
-import { OrbitControls } from '@tresjs/cientos'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
   clearColor: '#82DBC5',

docs/.vitepress/theme/components/FirstScene.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
 
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 const gl = {
   clearColor: '#82DBC5',

docs/.vitepress/theme/components/GraphPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useRafFn } from '@vueuse/core'
+import { ref } from 'vue'
 import { useState } from '../composables/state'
 
 const width = 160

docs/.vitepress/theme/components/LocalOrbitControls.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { Camera } from 'three'
+import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
+import { useEventListener } from '@vueuse/core'
 import { OrbitControls } from 'three-stdlib'
 import { onMounted, onUnmounted, shallowRef, unref } from 'vue'
 import type { TresVector3 } from '@tresjs/core'
-import { extend, useRenderLoop, useTresContext } from '@tresjs/core'
-import { useEventListener } from '@vueuse/core'
+import type { Camera } from 'three'
 
 export interface OrbitControlsProps {
   /**

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -2,9 +2,9 @@
 /// <reference types="vite-svg-loader" />
 import { gsap } from 'gsap'
 import { onMounted, shallowRef } from 'vue'
-import Triangle from '../assets/triangle.svg'
 import SecondRow from '../assets/second-row.svg'
 import ThirdRow from '../assets/third-row.svg'
+import Triangle from '../assets/triangle.svg'
 
 const triangleRef = shallowRef()
 const secondRowRef = shallowRef()

docs/.vitepress/theme/components/RenderingLogger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { useTresContext } from '@tresjs/core'
 import { onMounted } from 'vue'
 
 /* const { renderingTimes } = useState() */

docs/.vitepress/theme/components/StackBlitzEmbed.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { EmbedOptions } from '@stackblitz/sdk'
 import sdk from '@stackblitz/sdk'
 import { ref, watch } from 'vue'
+import type { EmbedOptions } from '@stackblitz/sdk'
 
 const props = withDefaults(
   defineProps<{

docs/.vitepress/theme/index.ts

@@ -1,10 +1,10 @@
-import type { Theme } from 'vitepress'
 import VPTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
 
-import 'uno.css'
+import TresLayout from './TresLayout.vue'
 import './custom.css'
 
-import TresLayout from './TresLayout.vue'
+import 'uno.css'
 
 /* const plausible = createPlausible({
   init: {

docs/.vitepress/theme/recipes.data.ts

@@ -22,7 +22,8 @@ export default createContentLoader('/**/cookbook/*.md', {
         thumbnail: frontmatter.thumbnail,
         difficulty: frontmatter.difficulty,
         excerpt: frontmatter.excerpt || frontmatter.description || excerpt,
-      })).filter(recipe => recipe.title)
+      }))
+      .filter(recipe => recipe.title)
       .sort((a, b) => b.title - a.title)
   },
 })

docs/advanced/performance.md

@@ -78,8 +78,8 @@ import Scene from './Scene.vue'
 
 ```vue [Scene.vue]
 <script setup>
-import { shallowRef, watch } from 'vue'
 import { useTres } from '@tresjs/core'
+import { shallowRef, watch } from 'vue'
 
 const boxRef = shallowRef(null)
 const { invalidate } = useTres()
@@ -143,12 +143,9 @@ To avoid errors and unwanted sideeffects, resources created programatically with
   import { dispose } from '@tresjs/core'
   import { useGLTF } from '@tresjs/cientos'
 
-  const { nodes } = await useGLTF(
-    'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
-    {
-      draco: true,
-    },
-  )
+  const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', {
+    draco: true,
+  })
   const model = nodes.Cube
 
   onUnmounted(() => {

docs/advanced/primitive.md

@@ -32,11 +32,7 @@ The same pointer events available on the TresJS components are available on the
 
 ```html
 <template>
-  <primitive
-    :object="meshWithMaterial"
-    @click="onClick"
-    @pointermove="onPointerMove"
-  />
+  <primitive :object="meshWithMaterial" @click="onClick" @pointermove="onPointerMove" />
 </template>
 ```
 

docs/api/composables.md

@@ -91,8 +91,8 @@ import AnimatedBox from './AnimatedBox.vue'
 
 ```vue [AnimatedBox.vue]
 <script setup>
-import { shallowRef } from 'vue'
 import { useLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

docs/cookbook/lights-shadows.md

@@ -24,8 +24,8 @@ I'm going to use [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#a
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -151,8 +151,8 @@ Now we have all the necessary steps to add shadows to our scene, and if we apply
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

docs/cookbook/orbit-controls.md

@@ -114,8 +114,8 @@ It just works. 💯
 
 ```vue {3,12}
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>

docs/cookbook/shaders.md

@@ -21,8 +21,8 @@ Lastly just to help us with the location, let's add a simple plane, rotated in t
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -114,9 +114,9 @@ Similar to what we learn in the [Basic animations](/cookbook/basic-animations) e
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

docs/cookbook/tweakpane.md

@@ -32,11 +32,11 @@ In this example, we will create a simple scene with a cube and use Tweakpane to
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-
 import { Pane } from 'tweakpane'
 
+import { ref } from 'vue'
+
 const state = reactive({
   clearColor: '#c0ffee',
   wireframe: false

docs/de/cookbook/lights-shadows.md

@@ -24,8 +24,8 @@ Wir verwenden das [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -153,8 +153,8 @@ Jetzt haben wir alle notwendigen Schritte, um Schatten zu unserer Szene hinzuzuf
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

docs/de/cookbook/orbit-controls.md

@@ -113,8 +113,8 @@ Es funktioniert einfach. 💯
 
 ```vue {3,12}
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>

docs/de/cookbook/shaders.md

@@ -122,9 +122,9 @@ void main() {
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

docs/de/guide/getting-started.md

@@ -45,8 +45,8 @@ pnpm add @types/three -D
 Du kannst TresJS wie jedes andere Vue-Plugin installieren.
 
 ```ts
-import { createApp } from 'vue'
 import Tres from '@tresjs/core'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 export const app = createApp(App)

docs/de/guide/index.md

@@ -93,8 +93,8 @@ Das einzige Problem ist, dass die Kombination von Compilern und Renderern in Vue
 
 ```ts
 // Example Vite setup
-import { createApp } from 'vue'
 import { createApp as createLunchboxApp } from 'lunchboxjs'
+import { createApp } from 'vue'
 import App from './App.vue'
 import LunchboxApp from './LunchboxApp.vue'
 

docs/de/guide/troubleshooting.md

@@ -61,9 +61,9 @@ Derzeit gibt es keine native Unterstützung von Vue, um den verwendeten Renderer
 Öffne `vite.config.ts` und füge die folgende Konfiguration zum `@vitejs/plugin-vue` hinzu um die Warnung aus der Konsole zu entfernen:
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [

docs/directives/v-rotate.md

@@ -10,8 +10,8 @@ When you want to simply add rotation to your mesh, you have to use the template
 
 ```vue
 <script setup lang="ts">
-import { shallowRef, watch } from 'vue'
 import { useRenderLoop } from '@tresjs/core'
+import { shallowRef, watch } from 'vue'
 
 const boxRef = shallowRef()
 

docs/es/cookbook/lights-shadows.md

@@ -25,8 +25,8 @@ Voy a usar [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -152,8 +152,8 @@ Ahora tenemos todos los pasos necesarios para agregar sombras a nuestra escena,
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

docs/es/cookbook/orbit-controls.md

@@ -114,8 +114,8 @@ Simplemente funciona. 💯
 
 ```vue {3,12}
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>

docs/es/cookbook/shaders.md

@@ -29,8 +29,8 @@ Por último, para ayudarnos con la ubicación, agreguemos un plano simple, rotad
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -122,9 +122,9 @@ Similar a lo que aprendimos en el ejemplo de [Animaciones básicas](/cookbook/ba
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

docs/es/guide/getting-started.md

@@ -45,8 +45,8 @@ pnpm add @types/three -D
 Puedes instalar TresJS como cualquier otro complemento de Vue
 
 ```ts
-import { createApp } from 'vue'
 import Tres from '@tresjs/core'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 export const app = createApp(App)

docs/es/guide/index.md

@@ -93,8 +93,8 @@ El único problema es que mezclar compiladores y renderizadores en Vue 3 es algo
 
 ```ts
 // Example Vite setup
-import { createApp } from 'vue'
 import { createApp as createLunchboxApp } from 'lunchboxjs'
+import { createApp } from 'vue'
 import App from './App.vue'
 import LunchboxApp from './LunchboxApp.vue'
 

docs/es/guide/troubleshooting.md

@@ -61,9 +61,9 @@ En este momento, no hay soporte nativo de Vue para definir el renderizador utili
 Ve a tu archivo `vite.config.ts` y agrega la siguiente configuración al `@vitejs/plugin-vue`:
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [

docs/fr/cookbook/lights-shadows.md

@@ -25,8 +25,8 @@ Nous allons utiliser [MeshToonMaterial](https://threejs.org/docs/index.html?q=to
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -152,8 +152,8 @@ Nous avons maintenant toutes les étapes nécessaires pour ajouter des ombres à
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

docs/fr/cookbook/shaders.md

@@ -29,8 +29,8 @@ Enfin, pour nous aider avec le placement, ajoutons un plan simple, tourné sur l
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -122,9 +122,9 @@ Semblable à ce que nous avons appris dans l'exemple des [Animations de bases](/
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

docs/fr/guide/getting-started.md

@@ -45,8 +45,8 @@ pnpm add @types/three -D
 Vous pouvez installer TresJS comme n'importe quel autre plugin Vue
 
 ```ts
-import { createApp } from 'vue'
 import Tres from '@tresjs/core'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 export const app = createApp(App)

docs/fr/guide/index.md

@@ -95,8 +95,8 @@ Le seul problème concerne le mélange des compilateurs et des moteurs de rendu
 
 ```ts
 // Example Vite setup
-import { createApp } from 'vue'
 import { createApp as createLunchboxApp } from 'lunchboxjs'
+import { createApp } from 'vue'
 import App from './App.vue'
 import LunchboxApp from './LunchboxApp.vue'
 

docs/fr/guide/troubleshooting.md

@@ -61,9 +61,9 @@ Actuellement, il n'est pas possible de définir nativement un autre moteur de re
 Dans votre `vite.config.ts`, ajoutez la configuration pour le plugin `@vitejs/plugin-vue`:
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [

docs/guide/getting-started.md

@@ -45,8 +45,8 @@ pnpm add @types/three -D
 You can install TresJS as any other Vue plugin
 
 ```ts
-import { createApp } from 'vue'
 import Tres from '@tresjs/core'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 export const app = createApp(App)

docs/guide/troubleshooting.md

@@ -61,9 +61,9 @@ At this moment, there is no native Vue support to define the renderer used on th
 Got to your `vite.config.ts` and add the following configuration to the `@vitejs/plugin-vue`:
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [

docs/nl/cookbook/lights-shadows.md

@@ -25,8 +25,8 @@ Ik ga [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/mater
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -152,8 +152,8 @@ Nu hebben we alle noodzakelijke stappen om schaduwen aan onze scène toe te voeg
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

docs/nl/cookbook/orbit-controls.md

@@ -114,8 +114,8 @@ It just works. 💯
 
 ```vue {3,12}
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>

docs/nl/cookbook/shaders.md

@@ -21,8 +21,8 @@ Om ons ten slotte te helpen met de locatie, voegen we een eenvoudig vlak toe, ge
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -114,9 +114,9 @@ Vergelijkbaar met wat we leren in het voorbeeld van [Basic Animations](/nl/cookb
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

docs/nl/guide/getting-started.md

@@ -45,8 +45,8 @@ pnpm add @types/three -D
 Je kan TresJS installeren als elke andere Vue plugin
 
 ```ts
-import { createApp } from 'vue'
 import Tres from '@tresjs/core'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 export const app = createApp(App)

docs/nl/guide/index.md

@@ -93,8 +93,8 @@ Het enige probleem hiermee is dat het mixen van compilers-renderers in Vue 3 iet
 
 ```ts
 // Voorbeeld Vite setup
-import { createApp } from 'vue'
 import { createApp as createLunchboxApp } from 'lunchboxjs'
+import { createApp } from 'vue'
 import App from './App.vue'
 import LunchboxApp from './LunchboxApp.vue'
 

docs/nl/guide/troubleshooting.md

@@ -61,9 +61,9 @@ Op dit moment is er geen native Vue-ondersteuning om de renderer te definiëren
 Ga naar je `vite.config.ts` en voeg de volgende configuratie toe aan `@vitejs/plugin-vue`:
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [

docs/package.json

@@ -13,9 +13,9 @@
     "tweakpane": "^4.0.4"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.43",
-    "@iconify-json/mdi": "^1.1.67",
-    "unocss": "^0.61.3",
+    "@iconify-json/logos": "^1.2.0",
+    "@iconify-json/mdi": "^1.2.0",
+    "unocss": "^0.62.3",
     "vite-svg-loader": "^5.1.0"
   }
 }

docs/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
+import { presetIcons, presetUno } from 'unocss'
 import Unocss from 'unocss/vite'
-import svgLoader from 'vite-svg-loader'
 import Components from 'unplugin-vue-components/vite'
-import { presetIcons, presetUno } from 'unocss'
+import { defineConfig } from 'vite'
+import svgLoader from 'vite-svg-loader'
 
 export default defineConfig({
   plugins: [

docs/zh/cookbook/lights-shadows.md

@@ -24,8 +24,8 @@ difficulty: 0
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -153,8 +153,8 @@ _AmbientLight 在这里不会生成任何类型的阴影_
 
 ```vue
 <script setup>
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

docs/zh/cookbook/shaders.md

@@ -20,8 +20,8 @@ _需要了解着色器工作原理的基本知识_
 
 ```vue
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 </script>
 
 <template>
@@ -113,9 +113,9 @@ void main() {
 
 ```vue
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const blobRef = shallowRef(null)
 // ...

docs/zh/guide/getting-started.md

@@ -45,8 +45,8 @@ pnpm add @types/three -D
 你可以像其他的 Vue 插件一样安装 TresJS
 
 ```ts
-import { createApp } from 'vue'
 import Tres from '@tresjs/core'
+import { createApp } from 'vue'
 import App from './App.vue'
 
 export const app = createApp(App)

docs/zh/guide/index.md

@@ -95,8 +95,8 @@ React 生态系统中有一个令人印象深刻的使用**自定义渲染器**
 
 ```ts
 // Example Vite setup
-import { createApp } from 'vue'
 import { createApp as createLunchboxApp } from 'lunchboxjs'
+import { createApp } from 'vue'
 import App from './App.vue'
 import LunchboxApp from './LunchboxApp.vue'
 

docs/zh/guide/troubleshooting.md

@@ -61,9 +61,9 @@ body {
 在你的 `vite.config.ts` 中将以下配置添加到 `@vitejs/plugin-vue`：
 
 ```ts
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import { templateCompilerOptions } from '@tresjs/core'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [

package.json

@@ -73,26 +73,26 @@
   "dependencies": {
     "@alvarosabu/utils": "^3.2.0",
     "@vue/devtools-api": "^6.6.3",
-    "@vueuse/core": "^10.11.0"
+    "@vueuse/core": "^11.0.3"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
     "@stackblitz/sdk": "^1.11.0",
     "@tresjs/cientos": "4.0.2",
-    "@tresjs/eslint-config": "^1.1.0",
+    "@tresjs/eslint-config": "^1.2.0",
     "@types/three": "^0.168.0",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
     "@typescript-eslint/parser": "^8.4.0",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vitest/coverage-c8": "^0.33.0",
     "@vitest/coverage-v8": "^2.0.2",
     "@vitest/ui": "^2.0.2",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.6.0",
+    "eslint": "^9.9.1",
     "eslint-plugin-vue": "^9.28.0",
     "esno": "^4.7.0",
     "gsap": "^3.12.5",
-    "husky": "^9.0.11",
+    "husky": "^9.1.5",
     "jsdom": "^25.0.0",
     "kolorist": "^1.8.0",
     "ohmyfetch": "^0.4.21",
@@ -105,16 +105,16 @@
     "three": "^0.168.0",
     "unocss": "^0.62.3",
     "unplugin": "^1.13.1",
-    "unplugin-vue-components": "^0.27.2",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.3",
     "vite-plugin-banner": "^0.8.0",
     "vite-plugin-dts": "4.1.0",
-    "vite-plugin-inspect": "^0.8.4",
+    "vite-plugin-inspect": "^0.8.7",
     "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^5.1.0",
     "vitepress": "1.3.4",
     "vitest": "^2.0.2",
-    "vue": "3.5.0",
-    "vue-demi": "^0.14.8"
+    "vue": "3.5.3",
+    "vue-demi": "^0.14.10"
   }
 }

playground/nuxt/components/EnvironmentLocal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { CubeReflectionMapping, type CubeTexture, CubeTextureLoader, EquirectangularReflectionMapping, type Texture } from 'three'
-import type { LoaderProto } from '@tresjs/core'
 import { useLoader, useTresContext } from '@tresjs/core'
+import { CubeReflectionMapping, type CubeTexture, CubeTextureLoader, EquirectangularReflectionMapping, type Texture } from 'three'
 import { RGBELoader } from 'three-stdlib'
+import type { LoaderProto } from '@tresjs/core'
 
 /* const files = ref(['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']) */
 const files = ref('venice/venice_sunset_1k.hdr')

playground/vue/src/components/BlenderCube.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { dispose } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
+import { dispose } from '@tresjs/core'
 import { useControls } from '@tresjs/leches'
 
 const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })

playground/vue/src/components/DynamicModel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useControls } from '@tresjs/leches'
 import { useGLTF } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
 
 const { nodes }
   = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })

playground/vue/src/components/GraphPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useRafFn } from '@vueuse/core'
+import { ref } from 'vue'
 import { useState } from '../composables/state'
 
 const width = 160

playground/vue/src/components/TheExperience.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { ref, watchEffect } from 'vue'
 import TheSphere from './TheSphere.vue'
 import '@tresjs/leches/styles'
 

playground/vue/src/composables/useFBX.ts

@@ -1,5 +1,5 @@
-import { FBXLoader } from 'three-stdlib'
 import { useLoader } from '@tresjs/core'
+import { FBXLoader } from 'three-stdlib'
 import type { Object3D } from 'three'
 
 /**

playground/vue/src/composables/useGLTF.ts

@@ -1,6 +1,6 @@
 import { type TresLoader, type TresObject3D, useLoader } from '@tresjs/core'
-import type { AnimationClip, Material, Scene } from 'three'
 import { DRACOLoader, GLTFLoader } from 'three-stdlib'
+import type { AnimationClip, Material, Scene } from 'three'
 import type { GLTF } from 'three-stdlib'
 
 export interface GLTFLoaderOptions {

playground/vue/src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 import { router } from './router'
+import './style.css'
 import 'uno.css'
 
 const app = createApp(App)

playground/vue/src/pages/advanced/Memory.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
 import { TresLeches, useControls } from '@tresjs/leches'
+
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import '@tresjs/leches/styles'
 
 const gl = {

playground/vue/src/pages/advanced/devicePixelRatio/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 import type { WebGLRenderer } from 'three'
 
 const rendererRef = shallowRef<WebGLRenderer | null>(null)

playground/vue/src/pages/advanced/disposal/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const boxRef = shallowRef()
 

playground/vue/src/pages/advanced/fbo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
 import FBOCube from './FBOCube.vue'
 import '@tresjs/leches/styles'
 

playground/vue/src/pages/advanced/fbo/useFBO.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 import { useLoop, useTresContext } from '@tresjs/core'
-import type { Camera, WebGLRenderTargetOptions } from 'three'
+import { useThrottleFn } from '@vueuse/core'
 import { DepthTexture, FloatType, HalfFloatType, LinearFilter, WebGLRenderTarget } from 'three'
-import type { Ref } from 'vue'
 import { isReactive, onBeforeUnmount, reactive, ref, toRefs, watchEffect } from 'vue'
-import { useThrottleFn } from '@vueuse/core'
+import type { Camera, WebGLRenderTargetOptions } from 'three'
+import type { Ref } from 'vue'
 
 export interface FboOptions {
   /*

playground/vue/src/pages/advanced/manual/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { useState } from '../../../composables/state'
-
 import GraphPane from '../../../components/GraphPane.vue'
+
+import { useState } from '../../../composables/state'
 import ManualExperience from './experience.vue'
 
 const { renderingTimes } = useState()

playground/vue/src/pages/advanced/on-demand/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { useState } from '../../../composables/state'
 import GraphPane from '../../../components/GraphPane.vue'
+import { useState } from '../../../composables/state'
 import OnDemandExperience from './experience.vue'
 
 const { renderingTimes } = useState()

playground/vue/src/pages/advanced/suspense/AsyncComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useTresContext } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
+import { useTresContext } from '@tresjs/core'
 
 const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf', { draco: true })
 useTresContext().invalidate()

playground/vue/src/pages/advanced/suspense/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { Perf, TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-import { OrbitControls } from '@tresjs/cientos'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import AsyncComponent from './AsyncComponent.vue'
+import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#82DBC5',

playground/vue/src/pages/advanced/takeOverRender/TakeOverRenderExperience.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useLoop } from '@tresjs/core'
-
 import { OrbitControls } from '@tresjs/cientos'
+
+import { useLoop } from '@tresjs/core'
 import { useControls } from '@tresjs/leches'
 
 const { render, pauseRender, resumeRender } = useLoop()

playground/vue/src/pages/advanced/takeOverRender/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import TakeOverLoopExperience from './TakeOverRenderExperience.vue'
 import '@tresjs/leches/styles'
 

playground/vue/src/pages/basic/Conditional.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { BasicShadowMap, MeshPhongMaterial, NoToneMapping, SRGBColorSpace } from 'three'
-import { reactive } from 'vue'
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { BasicShadowMap, MeshPhongMaterial, NoToneMapping, SRGBColorSpace } from 'three'
+import { reactive } from 'vue'
 import '@tresjs/leches/styles'
 
 const state = reactive({

playground/vue/src/pages/basic/Groups.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { ref } from 'vue'
-import { OrbitControls } from '@tresjs/cientos'
 
 const { onLoop } = useRenderLoop()
 

playground/vue/src/pages/basic/Lights.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { TresObject } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas, vDistanceTo, vLightHelper, vLog } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
-import { OrbitControls } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
 
 const gl = {
   clearColor: '#82DBC5',

playground/vue/src/pages/basic/PiercedProps.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const x = shallowRef(1)
 const y = shallowRef(1)

playground/vue/src/pages/basic/Primitives.vue

@@ -1,20 +1,20 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
 import {
   BasicShadowMap,
   Group,
   Mesh,
   MeshToonMaterial,
   NoToneMapping,
-  SRGBColorSpace,
   SphereGeometry,
+  SRGBColorSpace,
   TorusGeometry,
   TorusKnotGeometry,
 } from 'three'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import { TresLeches, useControls } from '@tresjs/leches'
+import { ref, watchEffect } from 'vue'
 import '@tresjs/leches/styles'
 
 const gl = {

playground/vue/src/pages/basic/Textures.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { TresCanvas, UseTexture } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, UseTexture } from '@tresjs/core'
 
 const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg'
 </script>

playground/vue/src/pages/basic/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { BasicShadowMap, MeshToonMaterial, NoToneMapping, SRGBColorSpace } from 'three'
 import { reactive, ref } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
 
 const state = reactive({
   clearColor: '#ffffff',

playground/vue/src/pages/basic/ready/LoopCallbackWatcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useLoop } from '@tresjs/core'
-import { type ShallowRef, ref, shallowRef } from 'vue'
+import { ref, type ShallowRef, shallowRef } from 'vue'
 
 const isCalled = ref(false)
 

playground/vue/src/pages/basic/ready/OnTresReadyWatcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type TresContext, onTresReady } from '@tresjs/core'
-import { type ShallowRef, ref, shallowRef } from 'vue'
+import { onTresReady, type TresContext } from '@tresjs/core'
+import { ref, type ShallowRef, shallowRef } from 'vue'
 
 const isCalled = ref(false)
 

playground/vue/src/pages/basic/ready/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TresContext } from '@tresjs/core'
 import { TresCanvas } from '@tresjs/core'
-import type { ShallowRef } from 'vue'
 import { ref } from 'vue'
+import type { TresContext } from '@tresjs/core'
+import type { ShallowRef } from 'vue'
 import LoopCallbackWatcher from './LoopCallbackWatcher.vue'
 import OnTresReadyWatcher from './OnTresReadyWatcher.vue'
 

playground/vue/src/pages/cameras/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { Box } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, OrthographicCamera, PerspectiveCamera, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { BasicShadowMap, NoToneMapping, OrthographicCamera, PerspectiveCamera, SRGBColorSpace } from 'three'
 import '@tresjs/leches/styles'
-import { Box } from '@tresjs/cientos'
 
 const gl = {
   clearColor: '#82DBC5',

playground/vue/src/pages/cameras/multipleCameras/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Camera } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
-import { OrbitControls } from '@tresjs/cientos'
-import '@tresjs/leches/styles'
+import type { Camera } from 'three'
 import TheCameraOperator from './TheCameraOperator.vue'
+import '@tresjs/leches/styles'
 
 const state = reactive({
   clearColor: '#4f4f4f',

playground/vue/src/pages/events/DynamicObjects.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { Box, OrbitControls, Sphere, StatsGl } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { reactive } from 'vue'
 
 const hotspots = reactive([
   {

playground/vue/src/pages/events/FpsDropsReproduction.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { TresCanvas } from '@tresjs/core'
 import { Icosahedron, OrbitControls, StatsGl } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import {
   AgXToneMapping,
   PCFSoftShadowMap,

playground/vue/src/pages/events/index.vue

@@ -1,10 +1,10 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
-import type { ThreeEvent } from '@tresjs/core'
+import { OrbitControls, StatsGl } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
-import { OrbitControls, StatsGl } from '@tresjs/cientos'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import type { ThreeEvent } from '@tresjs/core'
 import '@tresjs/leches/styles'
 
 const gl = {

playground/vue/src/pages/events/propagation/Box.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
 import { useRenderLoop } from '@tresjs/core'
 import { Color } from 'three'
+import { ref, shallowRef } from 'vue'
 
 const props = defineProps(['position', 'name'])
 

playground/vue/src/pages/events/propagation/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { onUnmounted, ref } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
 import {
   TresCanvas,
 } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
-import '@tresjs/leches/styles'
+import { onUnmounted, ref } from 'vue'
 import Box from './Box.vue'
+import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#202020',

playground/vue/src/pages/issues/701/TheExperience.vue

@@ -1,7 +1,6 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
-import { onUnmounted, shallowRef } from 'vue'
-import type { BufferGeometry, Camera, Material } from 'three'
+import { useLoop } from '@tresjs/core'
 import {
   BoxGeometry,
   Group,
@@ -12,7 +11,8 @@ import {
   SphereGeometry,
   TorusGeometry,
 } from 'three'
-import { useLoop } from '@tresjs/core'
+import { onUnmounted, shallowRef } from 'vue'
+import type { BufferGeometry, Camera, Material } from 'three'
 
 const box = (() => {
   const box = new Mesh(
@@ -82,7 +82,7 @@ const elapsed = shallowRef(0)
 
 const pool: {
 
-  click: Function
+  click: (...rest: unknown[]) => void
   pos: number[]
   group: Group
   mesh: Mesh

playground/vue/src/pages/issues/717/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
 import MyBox from './MyBox.vue'
 
 const boxRef = shallowRef()

playground/vue/src/pages/issues/749/TheExperience.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
-import { shallowRef } from 'vue'
 import { useLoop } from '@tresjs/core'
+import { shallowRef } from 'vue'
 
 const tOrF = shallowRef(false)
 const tOrFSlow = shallowRef(false)

playground/vue/src/pages/misc/GUI.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace, Vector3 } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
-
+import { TresCanvas } from '@tresjs/core'
 // import { OrbitControls, Box } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
+
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace, Vector3 } from 'three'
 import '@tresjs/leches/styles'
 
 const gl = reactive({

playground/vue/src/pages/misc/directives/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
 import DirectiveSubComponent from './DirectiveSubComponent.vue'
 
 const gl = {

playground/vue/src/pages/misc/text3D/Text3D.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { extend, useTexture } from '@tresjs/core'
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
-import { extend, useTexture } from '@tresjs/core'
 
 extend({ TextGeometry })
 

playground/vue/src/pages/misc/text3D/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import Text3D from './Text3D.vue'
 
 import '@tresjs/leches/styles'