chore: trying to update deps

client/components/Pane.vue → client/components/DevtoolsPane.vue

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

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/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>
+            <i class="i-iconoir-box-3d-three-points" />
           </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>
+            <i class="i-iconoir-select-face-3d" />
           </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>
+            <i class="i-iconoir-comp-align-left" />
           </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>
+            <i class="i-iconoir-triangle" />
           </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>
+            <i class="i-iconoir-one-point-circle" />
           </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>
+            <i class="i-iconoir-linear" />
           </div>
           <span class="text-xs text-gray-500">Lines</span>
         </div>

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
@@ -43,7 +43,7 @@ function roundNumber(num: number) {
             <span
               class="w4 h4 rounded-full mr-2 border border-gray-200"
               :style="{ backgroundColor: `#${item.color}` }"
-            ></span>
+            />
             #{{ item.color }}
           </UBadge>
           <UBadge
@@ -110,7 +110,7 @@ function roundNumber(num: number) {
               color="gray"
               variant="soft"
             >
-              <i class="i-iconoir-box-3d-three-points mr2"></i>
+              <i class="i-iconoir-box-3d-three-points mr2" />
               <a
                 :href="`https://threejs.org/docs/#api/en/geometries/${item.geometry.type}`"
                 target="_blank"
@@ -129,7 +129,7 @@ function roundNumber(num: number) {
               color="gray"
               variant="soft"
             >
-              <i class="i-iconoir-select-face-3d mr2"></i>
+              <i class="i-iconoir-select-face-3d mr2" />
               <a
                 :href="`https://threejs.org/docs/#api/en/materials/${item.material.type}`"
                 target="_blank"
@@ -145,7 +145,7 @@ function roundNumber(num: number) {
               <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>
@@ -164,7 +164,7 @@ function roundNumber(num: number) {
                 <span
                   class="w4 h4 rounded-full mr-2 border border-gray-200"
                   :style="{ backgroundColor: `#${item.color}` }"
-                ></span>
+                />
                 #{{ item.color }}
               </UBadge>
             </UTooltip>
@@ -191,7 +191,7 @@ function roundNumber(num: number) {
             >
               <i
                 class="i-iconoir-axes mr1"
-              ></i>
+              />
             </UTooltip>
 
             <UTooltip
@@ -229,7 +229,7 @@ function roundNumber(num: number) {
             <UTooltip
               text="Rotation"
             >
-              <i class="i-carbon-rotate-clockwise mr-1"></i>
+              <i class="i-carbon-rotate-clockwise mr-1" />
             </UTooltip>
 
             <UTooltip
@@ -270,7 +270,7 @@ function roundNumber(num: number) {
             <UTooltip
               text="Scale"
             >
-              <i class="i-iconoir-ellipse-3d-three-points mr-1"></i>
+              <i class="i-iconoir-ellipse-3d-three-points mr-1" />
             </UTooltip>
 
             <UTooltip

client/components/programs-module/item.vue → client/components/programs-module/ProgramsModuleitem.vue

@@ -22,9 +22,9 @@ const isExpanded = ref(false)
       <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>
+        <i :class="item.icon" />
         <!-- <Icon :name="item.icon" /> -->
         <!-- <i :class="item.icon" /> -->{{ item.type }} <UBadge
           v-if="item.name "

client/nuxt.config.ts

@@ -1,26 +1,32 @@
 import { resolve } from 'pathe'
 
 export default defineNuxtConfig({
-  ssr: false,
+
   modules: [
     '@nuxt/devtools-ui-kit',
     '@unocss/nuxt',
     '@nuxt/ui',
     '@nuxt/icon',
   ],
+  ssr: false,
+
+  app: {
+    baseURL: '/__tres_nuxt_devtools',
+  },
+
+  compatibilityDate: '2024-12-19',
+
   nitro: {
     output: {
       publicDir: resolve(__dirname, '../dist/client'),
     },
   },
+
   icon: {
     size: '24px', // default <Icon> size applied
     class: 'icon', // default <Icon> class applied
     aliases: {
       mesh: 'carbon:cube',
     },
   },
-  app: {
-    baseURL: '/__tres_nuxt_devtools',
-  },
 })

client/pages/index.vue

@@ -19,7 +19,7 @@ const { scene, memory, fps } = useDevtoolsHook()
 
           src="/logo.svg"
           alt="tres logo"
-        />
+        >
         <h2 class="opacity-60 font-bold">
           TresJS DevTools
         </h2>

client/types/index.ts

@@ -24,7 +24,7 @@ export interface SceneGraphObject {
   material?: Material
   geometry?: BufferGeometry
   children: SceneGraphObject[]
-  [key: string]: any
+  [key: string]: unknown
 }
 
 export interface MemoryUsageData {

eslint.config.mjs

@@ -0,0 +1,25 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
+export default createConfigForNuxt({
+  features: {
+    // Rules for module authors
+    tooling: true,
+    // Rules for formatting
+    stylistic: true,
+
+  },
+  dirs: {
+    src: [
+      './playground',
+    ],
+  },
+}, {
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+})
+  .append(
+    // your custom flat config here...
+  )

package.json

@@ -2,7 +2,7 @@
   "name": "@tresjs/nuxt",
   "type": "module",
   "version": "3.0.7",
-  "packageManager": "pnpm@9.12.0",
+  "packageManager": "pnpm@9.15.0",
   "description": "TresJS integration for Nuxt.",
   "author": "Daniel Roe (https://github.com/danielroe/)",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "client:dev": "nuxi dev client --port 3300",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "release-it",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -46,41 +46,40 @@
     "three": ">=0.133"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^1.4.1",
-    "@nuxt/kit": "^3.13.1",
-    "@nuxt/ui": "^2.18.4",
-    "@tresjs/core": "4.2.10",
-    "@tresjs/nuxt": "3.0.7",
-    "@types/three": "^0.168.0",
-    "@unocss/nuxt": "^0.62.3",
+    "@nuxt/kit": "^3.14.1592",
+    "@nuxt/ui": "^2.20.0",
+    "@tresjs/core": "4.3.1",
+    "@unocss/nuxt": "^0.65.2",
     "defu": "^6.1.4",
-    "mlly": "^1.7.1",
-    "pkg-types": "^1.2.0",
-    "sirv": "^2.0.4",
-    "typescript": "^5.5.4",
-    "vite-plugin-glsl": "^1.3.0"
+    "mlly": "^1.7.3",
+    "pkg-types": "^1.2.1",
+    "sirv": "^3.0.0",
+    "vite-plugin-glsl": "^1.3.1"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.2.1",
-    "@iconify-json/file-icons": "^1.2.0",
-    "@iconify-json/iconoir": "^1.2.0",
-    "@iconify-json/ph": "^1.2.0",
-    "@nuxt/devtools-ui-kit": "^1.4.1",
-    "@nuxt/eslint-config": "^0.5.6",
-    "@nuxt/icon": "^1.5.1",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxt/test-utils": "^3.14.1",
-    "@release-it/conventional-changelog": "^8.0.1",
-    "@tresjs/eslint-config": "^1.2.0",
-    "@types/node": "^22.5.4",
-    "changelogen": "^0.5.5",
-    "eslint": "^9.9.1",
-    "nuxt": "^3.13.1",
-    "playwright": "^1.47.0",
-    "release-it": "^17.6.0",
-    "three": "^0.168.0",
-    "vitest": "^2.0.5"
+    "@iconify-json/carbon": "^1.2.5",
+    "@iconify-json/file-icons": "^1.2.1",
+    "@iconify-json/iconoir": "^1.2.6",
+    "@iconify-json/ph": "^1.2.2",
+    "@nuxt/devtools": "^1.6.4",
+    "@nuxt/devtools-ui-kit": "^1.6.4",
+    "@nuxt/eslint-config": "^0.7.3",
+    "@nuxt/icon": "^1.10.2",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.14.1592",
+    "@nuxt/test-utils": "^3.15.1",
+    "@release-it/conventional-changelog": "^9.0.3",
+    "@tresjs/cientos": "^4.0.3",
+    "@types/node": "^22.10.2",
+    "@types/three": "^0.171.0",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.17.0",
+    "nuxt": "^3.14.1592",
+    "playwright": "^1.49.1",
+    "release-it": "^17.10.0",
+    "three": "^0.171.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.8"
   },
   "build": {
     "externals": [

playground/components/NuxtStones.vue

@@ -35,7 +35,7 @@ onLoop(({ elapsed }) => {
 })
 
 const ctx = useNuxtApp()
-// eslint-disable-next-line no-console
+
 console.log({ ctx, useFetch: await useFetch('api/url') })
 </script>
 

playground/layouts/default.vue

@@ -24,7 +24,7 @@
         </a>
       </div>
     </header>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

playground/nuxt.config.ts

@@ -1,17 +1,8 @@
 export default defineNuxtConfig({
-  ssr: true,
   modules: ['../src/module', '@nuxt/devtools'],
+  ssr: true,
 
-  // for testing purposes
-  // imports: {
-  //   autoImport: false,
-  // },
-  tres: {
-    // for testing purposes, and so we test both deduplication + auto-detection capabilities
-    modules: ['@tresjs/cientos'],
-    devtools: true,
-    glsl: true,
-  },
+  compatibilityDate: '2024-07-17',
 
   // for testing purposes: include some nuxt build tests
   nitro: {
@@ -21,5 +12,14 @@ export default defineNuxtConfig({
     },
   },
 
-  compatibilityDate: '2024-07-17',
+  // for testing purposes
+  // imports: {
+  //   autoImport: false,
+  // },
+  tres: {
+    // for testing purposes, and so we test both deduplication + auto-detection capabilities
+    // modules: ['@tresjs/cientos'],
+    devtools: true,
+    glsl: true,
+  },
 })