.github/ISSUE_TEMPLATE/bug_report.yml

@@ -18,7 +18,7 @@ body:
     id: reproduction
     attributes:
       label: Reproduction
-      description: Please provide a link via [stackblitz](https://stackblitz.com/edit/tresjs-basic?file=package.json,src%2Fcomponents%2FTheExperience.vue) or a link to a repo that can reproduce the problem you ran into. A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required ([Why?](https://antfu.me/posts/why-reproductions-are-required)). If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided after 3 days, it will be auto-closed.
+      description: Please provide a link using [Nuxt + Tres minimal reproduction](https://stackblitz.com/~/edit/tres-nuxt-starter-z2w6ry?file=components/TheExperience.vue) or a link to a repo that can reproduce the problem you ran into. A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required ([Why?](https://antfu.me/posts/why-reproductions-are-required)). If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided after 3 days, it will be auto-closed.
       placeholder: Reproduction URL
     validations:
       required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,6 @@
-name: "New feature proposal \U0001FA90"
+name: New feature proposal 🪐
 description: Propose a new feature to be added to TresJS
-labels: ["enhancement"]
+labels: [enhancement]
 body:
   - type: markdown
     attributes:
@@ -10,15 +10,15 @@ body:
     id: feature-description
     attributes:
       label: Description
-      description: "Clear and concise description of the problem. Please make the reason and usecases as detailed as possible. If you intend to submit a PR for this issue, tell us in the description. Thanks!"
+      description: 'Clear and concise description of the problem. Please make the reason and usecases as detailed as possible. If you intend to submit a PR for this issue, tell us in the description. Thanks!'
       placeholder: As a developer using TresJS I want [goal / wish] so that [benefit].
     validations:
       required: true
   - type: textarea
     id: suggested-solution
     attributes:
       label: Suggested solution
-      description: "In module [xy] we could provide following implementation..."
+      description: 'In module [xy] we could provide following implementation...'
     validations:
       required: true
   - type: textarea

.github/workflows/actions/pnpm/action.yml

@@ -1,18 +1,18 @@
 # From https://github.com/remirror/template/blob/4f8c5f5629a081217672a8cce1df085510f43913/.github/actions/pnpm/action.yml
-name: 'pnpm installation'
-description: 'Install and audit dependencies for pnpm'
+name: pnpm installation
+description: Install and audit dependencies for pnpm
 inputs:
   cache: # id of input
-    description: 'The location of the pnpm cache'
+    description: The location of the pnpm cache
     required: true
-    default: '.pnpm-store'
+    default: .pnpm-store
   version: # id of input
-    description: 'The version to use'
+    description: The version to use
     required: false
     default: 6.10.0
 
 runs:
-  using: 'composite'
+  using: composite
   steps:
     - name: install pnpm
       run: npm install pnpm@${{ inputs.version }} -g

.github/workflows/lint-pr.yml

@@ -1,4 +1,4 @@
-name: 'Lint PR'
+name: Lint PR
 
 on:
   pull_request_target:

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -23,7 +23,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Run Lint

CODE_OF_CONDUCT.md

@@ -28,16 +28,16 @@ Project maintainers are responsible for clarifying the standards of acceptable b
 
 Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
 
-## Scope
+## Scope
 
 This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
 
-## Enforcement
+## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [TresJS Discord](https://discord.gg/UCr96AQmWn). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.
 
-## Attribution
+## Attribution
 
 This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

CONTRIBUTING.md

@@ -72,6 +72,6 @@ Before opening a pull request, make sure to run `pnpm lint` to make sure the cod
   - Create a `fix/{issue-number}-fix-test-in-core` branch for this bug fix.
   - If you are resolving a special issue, add `(fix #xxx[,#xxx])` (#xxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.
 
-## Keep core small
+## Keep core small
 
 The core package should be as small as possible, it should only contain the core functionality of the library. If you are adding a new feature, please consider adding it as a plugin instead, for example, if you want to add support for [Effect Composer](https://threejs.org/examples/?q=compo#webgl_postprocessing_effectcomposer) you should create a new package called `@tresjs/postprocessing` and add it as a plugin. If it's a smaller scope you can always add it to `cientos` package.

README.md

@@ -26,14 +26,7 @@ Official Nuxt module for TresJS. Build 3D scenes as they were Vue components.
 1. Add `@tresjs/nuxt` dependency to your project
 
 ```bash
-# Using pnpm
-pnpm add @tresjs/nuxt
-
-# Using yarn
-yarn add @tresjs/nuxt
-
-# Using npm
-npm install @tresjs/nuxt
+npx nuxi@latest module add tresjs
 ```
 
 2. Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`
@@ -61,10 +54,9 @@ TresJS nuxt module comes with a devtools extension that allows you to inspect th
 
 To activate the devtools, you need to add the `devtools` option to the `tres` section of `nuxt.config.ts`.
 
-
 ```js
 export default defineNuxtConfig({
-  modules: ['@tresjs/nuxt', '@nuxt/devtools' ],
+  modules: ['@tresjs/nuxt', '@nuxt/devtools'],
   tres: {
     devtools: true,
   },
@@ -77,7 +69,7 @@ TresJS nuxt module comes with a vite plugin that allows you to import GLSL shade
 
 ```js
 export default defineNuxtConfig({
-  modules: ['@tresjs/nuxt', '@nuxt/devtools' ],
+  modules: ['@tresjs/nuxt', '@nuxt/devtools'],
   tres: {
     glsl: true,
   },
@@ -112,8 +104,6 @@ const uniforms = {
 </template>
 ```
 
-
-
 ## Development
 
 ```bash

client/components/Graph.vue

@@ -7,16 +7,14 @@ const props = withDefaults(defineProps<{
   unit: string
   label: string
   color: string
-}>(),
-{
+}>(), {
   points: () => [],
   value: 0,
   unit: '',
   label: '',
   color: 'green',
 })
 
-const width = 160
 const height = 40
 const strokeWidth = 2
 
@@ -32,7 +30,7 @@ watchEffect(() => {
 const pointsF = computed(() => props.points.map(
   (point, index) =>
     `${index * strokeWidth},${height - (point * height / maxValue.value)}`,
-).join(' '))  
+).join(' '))
 </script>
 
 <template>
@@ -43,7 +41,7 @@ const pointsF = computed(() => props.points.map(
       p-1
       rounded
       text-right
-      text-xs 
+      text-xs
       outline-none
       border-none
       font-sans
@@ -78,4 +76,4 @@ const pointsF = computed(() => props.points.map(
 .graph polyline {
   stroke: rgba(var(--nui-c-context), 1);
 }
-</style>
+</style>

client/components/ModuleAuthorNote.vue

@@ -17,7 +17,7 @@
       target="_blank"
     >
       nuxt/devtools
-    </NLink> repository.<br>
+    </NLink> repository.<br />
     The UI components are coming from <NLink
       href="https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit"
       target="_blank"

client/components/Pane.vue

@@ -26,6 +26,6 @@ defineProps<{
       -top-2
       left-2"
     >{{ title }}</span>
-    <slot />
+    <slot></slot>
   </div>
-</template>
+</template>

client/components/PerformanceMonitor.vue

@@ -38,14 +38,14 @@ const { fps, memory, renderer } = useDevtoolsHook()
         <div class="flex flex-col items-center gap-2">
           <div class="flex items-center font-mono gap-2">
             {{ renderer.info?.memory?.geometries || 0 }}
-            <i class="i-iconoir-box-3d-three-points" />
+            <i class="i-iconoir-box-3d-three-points"></i>
           </div>
           <span class="text-xs text-gray-500">Geometries</span>
         </div>
         <div class="flex flex-col items-center gap-2">
           <div class="flex items-center font-mono gap-2">
             {{ renderer.info?.memory?.textures || 0 }}
-            <i class="i-iconoir-select-face-3d" />
+            <i class="i-iconoir-select-face-3d"></i>
           </div>
           <span class="text-xs text-gray-500">Textures</span>
         </div>
@@ -64,28 +64,28 @@ const { fps, memory, renderer } = useDevtoolsHook()
         <div class="flex flex-col items-center gap-2 mb4">
           <div class="flex items-center font-mono gap-2">
             {{ renderer?.info?.render?.calls || 0 }}
-            <i class="i-iconoir-comp-align-left" />
+            <i class="i-iconoir-comp-align-left"></i>
           </div>
           <span class="text-xs text-gray-500">Calls</span>
         </div>
         <div class="flex flex-col items-center gap-2 mb4">
           <div class="flex items-center font-mono gap-2">
             {{ renderer?.info?.render?.triangles || 0 }}
-            <i class="i-iconoir-triangle" />
+            <i class="i-iconoir-triangle"></i>
           </div>
           <span class="text-xs text-gray-500">Triangles</span>
         </div>
         <div class="flex flex-col items-center gap-2 mb4">
           <div class="flex items-center font-mono gap-2">
             {{ renderer?.info?.render?.points || 0 }}
-            <i class="i-iconoir-one-point-circle" />
+            <i class="i-iconoir-one-point-circle"></i>
           </div>
           <span class="text-xs text-gray-500">Points</span>
         </div>
         <div class="flex flex-col items-center gap-2 mb4">
           <div class="flex items-center font-mono gap-2">
             {{ renderer?.info?.render?.lines || 0 }}
-            <i class="i-iconoir-linear" />
+            <i class="i-iconoir-linear"></i>
           </div>
           <span class="text-xs text-gray-500">Lines</span>
         </div>
@@ -97,4 +97,4 @@ const { fps, memory, renderer } = useDevtoolsHook()
       <ProgramsModule />
     </Pane>
   </div>
-</template>
+</template>

client/components/SceneGraphItem.vue

@@ -26,7 +26,7 @@ function roundNumber(num: number) {
       <span
         v-if="depth > 0"
         class="h-1 border-b border-gray-300 w-4"
-      />
+      ></span>
       <div class="flex gap-2 items-center -mb2.5">
         <Icon :name="item.icon" />
         <!-- <i :class="item.icon" /> -->{{ item.type }} <UBadge
@@ -39,17 +39,17 @@ function roundNumber(num: number) {
           <UBadge
             color="gray"
             variant="soft"
-          > 
+          >
             <span
               class="w4 h4 rounded-full mr-2 border border-gray-200"
               :style="{ backgroundColor: `#${item.color}` }"
-            />
+            ></span>
             #{{ item.color }}
           </UBadge>
           <UBadge
             color="green"
             variant="soft"
-          > 
+          >
             {{ item.intensity }}
           </UBadge>
         </template>
@@ -110,42 +110,42 @@ function roundNumber(num: number) {
               color="gray"
               variant="soft"
             >
-              <i class="i-iconoir-box-3d-three-points mr2" />
+              <i class="i-iconoir-box-3d-three-points mr2"></i>
               <a
                 :href="`https://threejs.org/docs/#api/en/geometries/${item.geometry.type}`"
                 target="_blank"
               >
                 {{ item.geometry.type.replace('Geometry', '') }}
-              </a> 
+              </a>
             </UBadge>
           </div>
           <div
             v-if="item.material"
             class="mb-2 flex items-center gap-2"
           >
             <strong>Material</strong>
-   
+
             <UBadge
               color="gray"
               variant="soft"
-            > 
-              <i class="i-iconoir-select-face-3d mr2" />
+            >
+              <i class="i-iconoir-select-face-3d mr2"></i>
               <a
                 :href="`https://threejs.org/docs/#api/en/materials/${item.material.type}`"
                 target="_blank"
               >
                 {{ item.material?.type.replace('Material', '') }}
-              </a> 
+              </a>
             </UBadge>
 
             <UBadge
               color="gray"
               variant="soft"
-            > 
+            >
               <span
                 class="w4 h4 rounded-full mr-2 border border-gray-200"
                 :style="{ backgroundColor: `#${item.material.color.getHexString()}` }"
-              />
+              ></span>
               #{{ item.material.color.getHexString() }}
             </UBadge>
           </div>
@@ -160,11 +160,11 @@ function roundNumber(num: number) {
               <UBadge
                 color="gray"
                 variant="soft"
-              > 
+              >
                 <span
                   class="w4 h4 rounded-full mr-2 border border-gray-200"
                   :style="{ backgroundColor: `#${item.color}` }"
-                />
+                ></span>
                 #{{ item.color }}
               </UBadge>
             </UTooltip>
@@ -180,7 +180,7 @@ function roundNumber(num: number) {
               <UBadge
                 color="gray"
                 variant="soft"
-              > 
+              >
                 {{ item.intensity }}
               </UBadge>
             </UTooltip>
@@ -191,9 +191,9 @@ function roundNumber(num: number) {
             >
               <i
                 class="i-iconoir-axes mr1"
-              />
+              ></i>
             </UTooltip>
-            
+
             <UTooltip
               text="X"
             >
@@ -229,9 +229,9 @@ function roundNumber(num: number) {
             <UTooltip
               text="Rotation"
             >
-              <i class="i-carbon-rotate-clockwise mr-1" />
+              <i class="i-carbon-rotate-clockwise mr-1"></i>
             </UTooltip>
-            
+
             <UTooltip
               text="X"
             >
@@ -270,9 +270,9 @@ function roundNumber(num: number) {
             <UTooltip
               text="Scale"
             >
-              <i class="i-iconoir-ellipse-3d-three-points mr-1" />
+              <i class="i-iconoir-ellipse-3d-three-points mr-1"></i>
             </UTooltip>
-            
+
             <UTooltip
               text="X"
             >
@@ -308,4 +308,4 @@ function roundNumber(num: number) {
       </template>
     </div>
   </div>
-</template>
+</template>

client/components/programs-module/index.vue

@@ -1,4 +1,4 @@
 <script setup lang="ts">
 const { renderer } = useDevtoolsHook()
 
 const icons: Record<string, string> = {
@@ -11,7 +11,8 @@
     icon: icons[item.type] || 'i-file-icons-vertexshader',
     uniforms: item.getUniforms(),
     attributes: item.getAttributes(),
-  })))
+  }),
+))
 </script>
 
 <template>
@@ -20,4 +21,4 @@
     :key="item.id"
     :item="item"
   />
-</template>
+</template>

client/components/programs-module/item.vue

@@ -1,4 +1,4 @@
 <script setup lang="ts">
 import type { ProgramObject } from '~/types'
 
 withDefaults(defineProps<{
@@ -22,9 +22,9 @@
       <span
         v-if="depth > 0"
         class="h-1 border-b border-gray-300 w-4"
-      />
+      ></span>
       <div class="flex gap-2 items-center -mb2.5">
-        <i :class="item.icon" />
+        <i :class="item.icon"></i>
         <!-- <Icon :name="item.icon" /> -->
         <!-- <i :class="item.icon" /> -->{{ item.type }} <UBadge
           v-if="item.name "
@@ -55,4 +55,4 @@
       </div>
     </div>
   </div>
-</template>
+</template>

client/composables/useDevtoolsHook.ts

@@ -1,5 +1,5 @@
 import type { TresContext, TresObject } from '@tresjs/core'
-import type { Scene, WebGLRenderer } from 'three'
+import type { Scene } from 'three'
 import type { SceneGraphObject } from '../types'
 
 interface FPSState {
@@ -142,7 +142,6 @@ function createNode(object: TresObject) {
 }
 
 function getSceneGraph(scene: TresObject) {
-
   function buildGraph(object: TresObject, node: SceneGraphObject) {
     object.children.forEach((child: TresObject) => {
       const childNode = createNode(child)
@@ -184,7 +183,7 @@ export function useDevtoolsHook(): DevtoolsHookReturn {
       Object.assign(gl.memory, context.perf.memory)
       gl.memory.accumulator = [...context.perf.memory.accumulator]
       scene.graph = getSceneGraph(context.scene.value as unknown as TresObject)
-      /* 
+      /*
       console.log('Devtools hook updated', context.renderer.value.info.render.triangles) */
     },
   }
@@ -197,4 +196,4 @@ export function useDevtoolsHook(): DevtoolsHookReturn {
     memory: gl.memory,
     renderer: gl.renderer,
   }
-}
+}

client/global.d.ts

@@ -1,6 +1,6 @@
 interface Window {
   __TRES__DEVTOOLS__?: {
-    cb: Function;
+    cb: Function
     // You can add other properties of __TRES__DEVTOOLS__ here if needed
-  };
-}
+  }
+}

client/pages/index.vue

@@ -16,14 +16,14 @@ const { scene, memory, fps } = useDevtoolsHook()
     >
       <div class="flex items-center gap-4">
         <img
-        
+
           src="/logo.svg"
           alt="tres logo"
-        >
+        />
         <h2 class="text-xl opacity-60 font-bold">
           TresJS DevTools
         </h2>
-      </div>  
+      </div>
       <div class="flex items-center gap-2">
         <UButton
           variant="ghost"
@@ -53,7 +53,7 @@ const { scene, memory, fps } = useDevtoolsHook()
         </UButton>
       </div>
     </header>
- 
+
     <div
       v-if="client && scene.objects > 0"
       class="flex flex-col gap-2"

client/types/index.ts

@@ -62,4 +62,4 @@ export interface ProgramObject {
   attributes: Record<string, unknown>
   program: WebGLProgram
   usedTimes: number
-}
+}

client/utils/index.ts

@@ -1 +1 @@
-export * from './perf'
+export * from './perf'

client/utils/perf.ts

@@ -9,7 +9,7 @@ export function calculateMemoryUsage(object: TresObject | Scene) {
       const geometry = node.geometry
       const verticesMemory = geometry.attributes.position.count * 3 * Float32Array.BYTES_PER_ELEMENT
       const facesMemory = geometry.index ? geometry.index.count * Uint32Array.BYTES_PER_ELEMENT : 0
-      const normalsMemory 
+      const normalsMemory
         = geometry.attributes.normal ? geometry.attributes.normal.count * 3 * Float32Array.BYTES_PER_ELEMENT : 0
       const uvsMemory = geometry.attributes.uv ? geometry.attributes.uv.count * 2 * Float32Array.BYTES_PER_ELEMENT : 0
 
@@ -31,4 +31,4 @@ export function bytesToMB(bytes: number): string {
 
 export function bytesToGB(bytes: number): string {
   return (bytes / 1024 / 1024 / 1024).toFixed(2)
-}
+}

eslint.config.js

@@ -0,0 +1,7 @@
+import { nuxt, tresLintConfig } from '@tresjs/eslint-config'
+
+export default tresLintConfig({}, nuxt, {
+  rules: {
+    'style/max-statements-per-line': 'off',
+  },
+})

package.json

@@ -38,48 +38,49 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "release": "release-it",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:watch": "vitest watch"
   },
   "peerDependencies": {
     "three": ">=0.133"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^1.0.8",
-    "@nuxt/kit": "^3.10.0",
-    "@nuxt/ui": "^2.13.0",
-    "@tresjs/core": "3.7.0",
-    "@tresjs/nuxt": "2.1.0",
-    "@types/three": "^0.160.0",
-    "@unocss/nuxt": "^0.58.4",
+    "@nuxt/devtools-kit": "^1.2.0",
+    "@nuxt/kit": "^3.11.2",
+    "@nuxt/ui": "^2.16.0",
+    "@tresjs/core": "3.9.0",
+    "@tresjs/nuxt": "2.1.1",
+    "@types/three": "^0.164.0",
+    "@unocss/nuxt": "^0.59.4",
     "defu": "^6.1.4",
-    "mlly": "^1.5.0",
-    "pkg-types": "^1.0.3",
+    "mlly": "^1.7.0",
+    "pkg-types": "^1.1.0",
     "sirv": "^2.0.4",
-    "typescript": "^5.3.3",
-    "vite-plugin-glsl": "^1.2.1"
+    "typescript": "^5.4.5",
+    "vite-plugin-glsl": "^1.3.0"
   },
   "devDependencies": {
-    "@alvarosabu/eslint-config-vue": "^0.4.0",
-    "@iconify-json/carbon": "^1.1.28",
+    "@iconify-json/carbon": "^1.1.32",
     "@iconify-json/file-icons": "^1.1.8",
-    "@iconify-json/iconoir": "^1.1.40",
-    "@iconify-json/ph": "^1.1.10",
-    "@nuxt/devtools-ui-kit": "^1.0.8",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.10.0",
-    "@nuxt/test-utils": "^3.11.0",
+    "@iconify-json/iconoir": "^1.1.44",
+    "@iconify-json/ph": "^1.1.13",
+    "@nuxt/devtools-ui-kit": "^1.2.0",
+    "@nuxt/eslint-config": "^0.3.10",
+    "@nuxt/module-builder": "^0.6.0",
+    "@nuxt/schema": "^3.11.2",
+    "@nuxt/test-utils": "^3.12.1",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@types/node": "^20.11.13",
+    "@tresjs/eslint-config": "^1.0.0",
+    "@types/node": "^20.12.11",
     "changelogen": "^0.5.5",
-    "eslint": "^8.56.0",
-    "nuxt": "^3.10.0",
-    "nuxt-icon": "^0.6.8",
-    "playwright": "^1.41.1",
-    "release-it": "^17.0.3",
-    "three": "^0.161.0",
-    "vitest": "^1.2.2"
+    "eslint": "^9.2.0",
+    "nuxt": "^3.11.2",
+    "nuxt-icon": "^0.6.10",
+    "playwright": "^1.44.0",
+    "release-it": "^17.2.1",
+    "three": "^0.164.1",
+    "vitest": "^1.6.0"
   },
   "build": {
     "externals": [

playground/app.vue

@@ -2,4 +2,4 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
-</template>
+</template>

playground/components/NuxtStones.vue

@@ -35,7 +35,7 @@ onLoop(({ elapsed }) => {
 })
 
 const ctx = useNuxtApp()
-//eslint-disable-next-line no-console
+// eslint-disable-next-line no-console
 console.log({ ctx, useFetch: await useFetch('api/url') })
 </script>
 
@@ -44,9 +44,9 @@ console.log({ ctx, useFetch: await useFetch('api/url') })
   <primitive :object="nodes.Logo" />
   <primitive :object="nodes.Stone" />
   <primitive :object="nodes.StoneCarved" />
-  <primitive 
-    v-for="stone in littleStones" 
-    :key="stone.id" 
-    :object="stone" 
+  <primitive
+    v-for="stone in littleStones"
+    :key="stone.id"
+    :object="stone"
   />
 </template>

playground/components/UglyNakedBunny.vue

@@ -3,7 +3,7 @@ const { scene: model, animations } = await useGLTF(
   'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf',
 )
 
-const { actions, mixer } = useAnimations(animations, model)
+const { actions } = useAnimations(animations, model)
 
 const currentAction = ref(actions.Greeting)
 

playground/layouts/default.vue

@@ -24,9 +24,9 @@
         </a>
       </div>
     </header>
-    <slot />
+    <slot></slot>
   </div>
-</template> 
+</template>
 
 <style>
 .menu {
@@ -41,4 +41,4 @@
   align-items: center;
   z-index: 100;
 }
-</style>
+</style>

src/devtools.ts

@@ -1,4 +1,4 @@
-import { existsSync } from 'fs'
+import { existsSync } from 'node:fs'
 import type { Nuxt } from 'nuxt/schema'
 import type { Resolver } from '@nuxt/kit'
 
@@ -8,7 +8,7 @@ const DEVTOOLS_UI_LOCAL_PORT = 3300
 export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
   const clientPath = resolver.resolve('./client')
   const isProductionBuild = existsSync(clientPath)
-  
+
   // Serve production-built client (used when package is published)
   if (isProductionBuild) {
     nuxt.hook('vite:serverCreated', async (server) => {

src/module.ts

@@ -1,5 +1,5 @@
-import { readFile } from 'fs/promises'
-import { defineNuxtModule, addImports, addComponent, createResolver, resolvePath, addVitePlugin } from '@nuxt/kit'
+import { readFile } from 'node:fs/promises'
+import { addComponent, addImports, addVitePlugin, createResolver, defineNuxtModule, resolvePath } from '@nuxt/kit'
 import * as core from '@tresjs/core'
 import { templateCompilerOptions } from '@tresjs/core'
 import { readPackageJSON } from 'pkg-types'
@@ -60,10 +60,10 @@ export default defineNuxtModule<ModuleOptions>({
     const coreDeps = Object.keys({ ...pkg.dependencies, ...pkg.devDependencies }).filter(d => d.startsWith('@tresjs/'))
 
     for (const mod of new Set([...options.modules, ...coreDeps])) {
-      if (mod === '@tresjs/core' || mod === '@tresjs/nuxt') continue
+      if (mod === '@tresjs/core' || mod === '@tresjs/nuxt') { continue }
 
       const entry = await resolvePath(mod)
-      if (entry === mod) continue
+      if (entry === mod) { continue }
 
       const imports = findExportNames(await readFile(entry, 'utf8'))
 
@@ -103,10 +103,8 @@ export default defineNuxtModule<ModuleOptions>({
       }),
     ])
 
-    if (options.devtools)
-      setupDevToolsUI(nuxt, resolver)
+    if (options.devtools) { setupDevToolsUI(nuxt, resolver) }
 
-    if (options.glsl)
-      addVitePlugin(glsl())
+    if (options.glsl) { addVitePlugin(glsl()) }
   },
 })

src/runtime/TresCanvas.client.vue

@@ -4,6 +4,6 @@ import { TresCanvas as CoreTresCanvas } from '@tresjs/core'
 
 <template>
   <CoreTresCanvas>
-    <slot />
+    <slot></slot>
   </CoreTresCanvas>
 </template>

src/runtime/TresCanvas.server.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  <span />
+  <span></span>
 </template>

src/runtime/TresCanvas.vue.d.ts

@@ -1,2 +1,2 @@
-const _default: typeof import('@tresjs/core')['TresCanvas'];
-export default _default;
+const _default: typeof import('@tresjs/core')['TresCanvas']
+export default _default

test/basic.test.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url'
-import { describe, it, expect } from 'vitest'
-import { setup, $fetch, createPage, url } from '@nuxt/test-utils'
+import { describe, expect, it } from 'vitest'
+import { $fetch, createPage, setup, url } from '@nuxt/test-utils'
 
 describe('ssr', async () => {
   await setup({