chore: fix lint

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

@@ -2,8 +2,7 @@
 import { useTresContext } 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
 
 model.position.set(0, 1, 0)
@@ -15,4 +14,4 @@ state.invalidate()
 
 <template>
   <primitive :object="model" />
-</template>
+</template>

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

@@ -56,11 +56,11 @@ useRafFn(({ timestamp }) => {
       bg-white
       dark:bg-dark
       shadow-xl
-      rounded 
-      border-4 
-      border-solid 
-      bg-primary 
-      border-primary 
+      rounded
+      border-4
+      border-solid
+      bg-primary
+      border-primary
       pointer-events-none
       overflow-hidden"
   >
@@ -98,4 +98,4 @@ useRafFn(({ timestamp }) => {
       </svg>
     </div>
   </div>
-</template>
+</template>

docs/.vitepress/theme/components/OnDemandRendering.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
 import { useState } from '../composables/state'
 import BlenderCube from './BlenderCube.vue'
 import GraphPane from './GraphPane.vue'
@@ -11,7 +9,6 @@ const { renderingTimes } = useState()
 
 function onRender() {
   renderingTimes.value = 1
-
 }
 </script>
 
@@ -37,4 +34,4 @@ function onRender() {
       :intensity="0.7"
     />
   </TresCanvas>
-</template>
+</template>

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { onMounted } from 'vue'
-import { useState } from '../composables/state'
 
-const { renderingTimes } = useState()
+/* const { renderingTimes } = useState() */
 
 const state = useTresContext()
 
@@ -21,4 +20,4 @@ onMounted(() => {
   <OrbitControls
     @change="manualInvalidate"
   />
-</template>
+</template>

docs/.vitepress/theme/composables/state.ts

@@ -6,6 +6,6 @@ const state = reactive({
 export function useState() {
   return {
     ...toRefs(state),
-    
+
   }
-}
+}

docs/advanced/performance.md

@@ -6,7 +6,7 @@ We are running WebGL on the browser, which can be quite expensive and it will de
 
 ## On-demand rendering <Badge type="tip" text="^4.0.0" />
 
-By default, Tres.js will render your scene on every frame. This is great for most applications, but if you are building a game or a complex application, you might want to control when the scene is rendered. 
+By default, Tres.js will render your scene on every frame. This is great for most applications, but if you are building a game or a complex application, you might want to control when the scene is rendered.
 
 Otherwise it might drain your device battery 🔋 🔜 🪫 and make your computer sound like an airplane 🛫.
 
@@ -14,7 +14,6 @@ Ideally, you only want to **render the scene when necessary**, for example when
 
 You can do that by setting the `renderMode` prop to `on-demand` or `manual`:
 
-
 ### Mode `on-demand`
 
 <ClientOnly>
@@ -23,7 +22,6 @@ You can do that by setting the `renderMode` prop to `on-demand` or `manual`:
   </div>
 </ClientOnly>
 
-
 ```vue
 <TresCanvas render-mode="on-demand">
   <!-- Your scene goes here -->
@@ -61,7 +59,6 @@ setTimeout(() => {
 
 Since it is not really possible to observe all the possible changes in your application, you can also manually invalidate the frame by calling the `invalidate()` method from the [`useTresContext` composable](../api/composables.md#usetrescontext):
 
-
 ::: code-group
 
 ```vue [App.vue]
@@ -102,11 +99,10 @@ watch(boxRef.value, () => {
 
 :::
 
-### Mode `always` 
+### Mode `always`
 
 In this rendering mode, Tres will continously render the scene on every frame. This is the default mode and the easiest to use, but it's also the most resource expensive one.
 
-
 ### Mode `manual`
 
 If you want to have full control of when the scene is rendered, you can set the `render-mode` prop to `manual`:
@@ -128,4 +124,3 @@ const { advance } = useTres()
 advance()
 </script>
 ```
-

playground/src/components/AkuAku.vue

@@ -2,8 +2,7 @@
 import { useTresContext } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
 
-const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/AkuAku.glb', 
-  { draco: true })
+const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/AkuAku.glb', { draco: true })
 const model = nodes.Cube
 
 model.position.set(0, 1, 0)
@@ -15,4 +14,4 @@ state.invalidate()
 
 <template>
   <primitive :object="model" />
-</template>
+</template>

playground/src/components/BlenderCube.vue

@@ -2,8 +2,7 @@
 import { useTresContext } 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
 
 model.position.set(0, 1, 0)
@@ -15,4 +14,4 @@ state.invalidate()
 
 <template>
   <primitive :object="model" />
-</template>
+</template>

playground/src/components/DynamicModel.vue

@@ -2,11 +2,10 @@
 import { useControls } from '@tresjs/leches'
 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 { scene: AkuAku, nodes: akukuNodes } = await useGLTF(
+const { scene: AkuAku } = await useGLTF(
   'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf',
   { draco: true },
 )
@@ -20,4 +19,4 @@ const model = computed(() => isCube.value ? nodes.Cube : AkuAku)
 
 <template>
   <primitive :object="model" />
-</template>
+</template>

playground/src/components/GraphPane.vue

@@ -56,11 +56,11 @@ useRafFn(({ timestamp }) => {
       bg-white
       dark:bg-dark
       shadow-xl
-      rounded 
-      border-4 
-      border-solid 
-      bg-primary 
-      border-primary 
+      rounded
+      border-4
+      border-solid
+      bg-primary
+      border-primary
       pointer-events-none
       overflow-hidden"
   >
@@ -98,4 +98,4 @@ useRafFn(({ timestamp }) => {
       </svg>
     </div>
   </div>
-</template>
+</template>

playground/src/components/RenderingLogger.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { useTresContext } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { onMounted } from 'vue'
-import { useState } from '../composables/state'
 
-const { renderingTimes } = useState()
+/* const { renderingTimes } = useState() */
 
 const state = useTresContext()
 
@@ -21,4 +20,4 @@ onMounted(() => {
   <OrbitControls
     @change="manualInvalidate"
   />
-</template>
+</template>

playground/src/composables/state.ts

@@ -6,6 +6,6 @@ const state = reactive({
 export function useState() {
   return {
     ...toRefs(state),
-    
+
   }
-}
+}

playground/src/pages/basic/Multiple.vue

@@ -1,30 +1,10 @@
 <script setup lang="ts">
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { reactive, shallowRef, ref } from 'vue'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
-
-const state = reactive({
-  clearColor: '#82DBC5',
-  shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
-})
-
-const { onLoop } = useRenderLoop()
+import { TresCanvas } from '@tresjs/core'
+import { ref, shallowRef } from 'vue'
 
 const boxRef = shallowRef(null)
 const showBox = ref(true)
 
-/* onLoop(({ elapsed }) => {
-  if (boxRef.value) {
-    boxRef.value.rotation.y = elapsed
-    boxRef.value.rotation.z = elapsed
-  }
-}) */
-
 setInterval(() => {
   showBox.value = !showBox.value
 }, 3000)

playground/src/pages/basic/PiercedProps.vue

@@ -15,12 +15,18 @@ const label = shallowRef('')
 
 const refs = [x, y, z, rx, ry, rz, sx, sy, sz]
 const labels = [
-  'position-x', 'position-y', 'position-z', 
-  'rotation-x', 'rotation-y', 'rotation-z', 
-  'scale-x', 'scale-y', 'scale-z',
+  'position-x',
+  'position-y',
+  'position-z',
+  'rotation-x',
+  'rotation-y',
+  'rotation-z',
+  'scale-x',
+  'scale-y',
+  'scale-z',
 ]
 
-const PI2 = Math.PI * 2
+/* const PI2 = Math.PI * 2 */
 
 useRenderLoop().onLoop(({ elapsed }) => {
   const i = Math.floor(elapsed % refs.length)
@@ -54,8 +60,8 @@ useRenderLoop().onLoop(({ elapsed }) => {
 
 <style>
 .overlay {
-    position: fixed;
-    padding: 10px;
-    font-family: sans-serif;
+  position: fixed;
+  padding: 10px;
+  font-family: sans-serif;
 }
-</style>
+</style>

playground/src/pages/basic/Primitives.vue

@@ -1,16 +1,16 @@
+<!-- eslint-disable no-console -->
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
-import { 
+import {
   BasicShadowMap,
-  SRGBColorSpace,
-  NoToneMapping,
+  Group,
   Mesh,
-  TorusGeometry,
   MeshToonMaterial,
+  NoToneMapping,
+  SRGBColorSpace,
+  SphereGeometry,
+  TorusGeometry,
   TorusKnotGeometry,
-  PlaneGeometry,
-  Group,
-  SphereGeometry, 
 } from 'three'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
@@ -74,7 +74,7 @@ secondGroup.add(sphere)
 
 const primitiveRef = ref()
 
-useRenderLoop().onLoop(() => {  
+useRenderLoop().onLoop(() => {
   if (primitiveRef.value) {
     primitiveRef.value.rotation.x += 0.01
     primitiveRef.value.rotation.y += 0.01
@@ -85,14 +85,14 @@ watchEffect(() => {
   console.log('primitiveRef.value', primitiveRef.value)
 })
 
-const reactivePrimitiveRef = ref(new Mesh(
+/* const reactivePrimitiveRef = ref(new Mesh(
   new TorusKnotGeometry(1, 0.5, 100, 16),
   new MeshToonMaterial({
     color: 'orange',
   }),
 ))
 
-const modelArray = ref([torus, torusKnot, sphere])
+const modelArray = ref([torus, torusKnot, sphere]) */
 </script>
 
 <template>

playground/src/pages/cameras/index.vue

@@ -32,8 +32,7 @@ const { cameraType, manual } = useControls({
     }, {
       text: 'Orthographic',
       value: 'orthographic',
-    },
-    ],
+    }],
     value: state.cameraType,
   },
   manual: false,

playground/src/pages/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import {
   basicRoutes,
-  perfRoutes,
-  eventsRoutes,
   cameraRoutes,
-  modelsRoutes,
+  eventsRoutes,
   miscRoutes,
+  modelsRoutes,
+  perfRoutes,
 } from '../router/routes'
 
 const sections = [
@@ -23,7 +23,7 @@ const sections = [
     class="
   container mx-auto max-w-3xl
   font-sans text-xs color-gray
-  bg-white 
+  bg-white
   "
   >
     <div class="mx-4">
@@ -38,7 +38,7 @@ const sections = [
             src="/logo.svg"
             alt="TresJS logo"
             class="max-w-24 sm:max-w-48 align-baseline"
-          >
+          />
         </div>
         <div class="sm:w-2/3">
           <h1

playground/src/pages/models/PrimitivesModel.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-import { 
+import {
   BasicShadowMap,
-  SRGBColorSpace,
   NoToneMapping,
-  Mesh,
-  TorusGeometry,
-  MeshToonMaterial,
-  TorusKnotGeometry,
-  PlaneGeometry,
-  Group,
-  SphereGeometry, 
+  SRGBColorSpace,
 } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'

playground/src/pages/perf/OnDemand.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-import { OrbitControls } from '@tresjs/cientos'
 import { useState } from '../../composables/state'
 import BlenderCube from '../../components/BlenderCube.vue'
 import GraphPane from '../../components/GraphPane.vue'
@@ -11,7 +9,6 @@ const { renderingTimes } = useState()
 
 function onRender() {
   renderingTimes.value = 1
-
 }
 </script>
 
@@ -37,4 +34,4 @@ function onRender() {
       :intensity="0.7"
     />
   </TresCanvas>
-</template>
+</template>

playground/src/router/routes/basic.ts

@@ -39,4 +39,4 @@ export const basicRoutes = [
     name: 'Pierced Props',
     component: () => import('../../pages/basic/PiercedProps.vue'),
   },
-]
+]

playground/src/router/routes/cameras.ts

@@ -14,4 +14,4 @@ export const cameraRoutes = [
     name: 'Multiple Cameras',
     component: () => import('../../pages/cameras/MultipleCameras.vue'),
   },
-]
+]

playground/src/router/routes/events.ts

@@ -4,4 +4,4 @@ export const eventsRoutes = [
     name: 'Events',
     component: () => import('../../pages/events/index.vue'),
   },
-]
+]

playground/src/router/routes/index.ts

@@ -12,4 +12,4 @@ export {
   cameraRoutes,
   modelsRoutes,
   miscRoutes,
-}
+}

playground/src/router/routes/misc.ts

@@ -4,4 +4,4 @@ export const miscRoutes = [
     name: 'Text 3D',
     component: () => import('../../pages/misc/Text3DDemo.vue'),
   },
-]
+]

playground/src/router/routes/models.ts

@@ -4,4 +4,4 @@ export const modelsRoutes = [
     name: 'Model Primitives',
     component: () => import('../../pages/models/PrimitivesModel.vue'),
   },
-]
+]

playground/src/router/routes/performance.ts

@@ -4,4 +4,4 @@ export const perfRoutes = [
     name: 'On Demand',
     component: () => import('../../pages/perf/OnDemand.vue'),
   },
-]
+]

src/composables/useRenderer/index.ts

@@ -94,12 +94,7 @@ export interface UseRendererOptions extends TransformToMaybeRefOrGetter<WebGLRen
   preset?: MaybeRefOrGetter<RendererPresetsType>
   renderMode?: MaybeRefOrGetter<'always' | 'on-demand' | 'manual'>
 }
-/**
- * Reactive three.js WebGLRenderer instance
- *
- * @param canvas
- * @param {UseRendererOptions} [options]
- */
+
 export function useRenderer(
   {
     scene,

src/core/nodeOpts.test.ts

@@ -101,12 +101,12 @@ describe('nodeOps', () => {
       root: {
         registerCamera: () => { },
         registerObjectAtPointerEventHandler: () => { },
-      }
+      },
     }
     const child = new Mesh()
 
     child.__tres = {
-      root: null
+      root: null,
     }
 
     // Fake vnodes
@@ -145,7 +145,7 @@ describe('nodeOps', () => {
     node.__tres = {
       root: {
         invalidate: () => { },
-      }
+      },
     }
     const prop = 'visible'
     const nextValue = false
@@ -163,7 +163,7 @@ describe('nodeOps', () => {
     node.__tres = {
       root: {
         invalidate: () => { },
-      }
+      },
     }
     const prop = 'position-x'
     const nextValue = 5
@@ -181,7 +181,7 @@ describe('nodeOps', () => {
     node.__tres = {
       root: {
         invalidate: () => { },
-      }
+      },
     }
     const prop = 'cast-shadow'
     const nextValue = true
@@ -195,19 +195,19 @@ describe('nodeOps', () => {
 
   it('patchProp should preserve ALL_CAPS_CASE in pierced props', () => {
     // Issue: https://github.com/Tresjs/tres/issues/605
-    const {createElement, patchProp} = nodeOps()
+    const { createElement, patchProp } = nodeOps()
     const node = createElement('TresMeshStandardMaterial', null, null, {})
     const allCapsKey = 'STANDARD'
     const allCapsUnderscoresKey = 'USE_UVS'
     const allCapsValue = 'hello'
     const allCapsUnderscoresValue = 'goodbye'
 
-    patchProp(node, 'defines-' + allCapsKey, null, allCapsValue)
-    patchProp(node, 'defines-' + allCapsUnderscoresKey, null, allCapsUnderscoresValue)
+    patchProp(node, `defines-${allCapsKey}`, null, allCapsValue)
+    patchProp(node, `defines-${allCapsUnderscoresKey}`, null, allCapsUnderscoresValue)
 
     expect(node.defines[allCapsKey]).equals(allCapsValue)
     expect(node.defines[allCapsUnderscoresKey]).equals(allCapsUnderscoresValue)
-  }) 
+  })
 
   it('parentNode: returns parent of a node', async () => {
     // Setup

src/types/index.ts

@@ -55,7 +55,7 @@ export interface TresObject3D extends THREE.Object3D<THREE.Object3DEventMap> {
   material?: THREE.Material & TresBaseObject
 }
 
-export type TresObject = 
+export type TresObject =
   TresBaseObject & (TresObject3D | THREE.BufferGeometry | THREE.Material | THREE.Fog) & { __tres: LocalState }
 
 export interface TresScene extends THREE.Scene {