feat!: update Nuxt to support version ^3.16.0

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

@@ -19,17 +19,17 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20]
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - run: corepack enable
+      # workaround for npm registry key change
+      # ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
+      # - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
+      - run: npm i -g --force corepack && corepack enable
       - uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: lts/*
           cache: pnpm
       - name: Install dependencies
         run: pnpm install

client/components/DevtoolsGraph.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from '#imports'
 
 const props = withDefaults(defineProps<{
-  points: Array<number> // Array of y-values
-  value: number
-  unit: string
-  label: string
-  color: string
+  points?: Array<number> // Array of y-values
+  value?: number
+  unit?: string
+  label?: string
+  color?: 'green' | 'yellow'
 }>(), {
   points: () => [],
   value: 0,
@@ -15,6 +15,10 @@ const props = withDefaults(defineProps<{
   color: 'green',
 })
 
+const textColor = computed(() => { // ''
+  return props.color === 'yellow' ? 'text-[#827717] dark:text-[#EAB306]' : 'text-[#15803D] dark:text-[#34E676]'
+})
+
 const height = 40
 const strokeWidth = 2
 
@@ -47,7 +51,10 @@ const pointsF = computed(() => props.points.map(
       font-sans
     "
   >
-    <div class="absolute bottom-0.5 right-0.5 font-mono text-xs">
+    <div
+      class="absolute bottom-0.5 right-1 font-mono text-xs"
+      :class="textColor"
+    >
       {{ Math.round(value) }} {{ unit }}
     </div>
     <svg
@@ -58,10 +65,10 @@ const pointsF = computed(() => props.points.map(
       <polyline
         :points="pointsF"
         fill="none"
-        :stroke="color"
         :stroke-width="strokeWidth"
         stroke-linecap="round"
         stroke-linejoin="round"
+        :class="color"
       />
     </svg>
   </div>
@@ -73,7 +80,16 @@ const pointsF = computed(() => props.points.map(
   color: rgba(var(--nui-c-context), 1);
 }
 
-.graph polyline {
-  stroke: rgba(var(--nui-c-context), 1);
+.graph polyline.green {
+  stroke: #15803d;
+}
+.graph polyline.yellow {
+  stroke: #827717;
+}
+.dark .graph polyline.green {
+  stroke: #34E676;
+}
+.dark .graph polyline.yellow {
+  stroke: #EAB306;
 }
 </style>

client/components/DevtoolsPane.vue

@@ -20,7 +20,8 @@ defineProps<{
       bg-white
       text-xs
       dark:bg-[#151515]
-      text-gray-400
+      dark:text-gray-400
+      text-gray-500
       px-2
       rounded
       -top-2

client/components/PerformanceMonitor.vue

@@ -11,7 +11,7 @@ const { fps, memory, renderer } = useDevtoolsHook()
       class="col-span-1"
       n="green"
     >
-      <Graph
+      <DevtoolsGraph
         :points="fps.accumulator"
         :value="fps.value"
         color="green"
@@ -24,7 +24,7 @@ const { fps, memory, renderer } = useDevtoolsHook()
       class="col-span-1"
       n="green"
     >
-      <Graph
+      <DevtoolsGraph
         :points="memory.accumulator"
         :value="memory.currentMem"
         color="yellow"
@@ -33,68 +33,73 @@ const { fps, memory, renderer } = useDevtoolsHook()
         label="memory"
       />
     </NCard>
-    <Pane title="Memory ">
+    <DevtoolsPane title="Memory ">
       <div class="flex p4 justify-around w-full">
         <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" />
           </div>
-          <span class="text-xs text-gray-500">Geometries</span>
+          <span class="text-xs dark:text-gray-400 text-gray-500">Geometries</span>
         </div>
         <div class="flex flex-col items-center gap-2">
-          <div class="flex items-center font-mono gap-2">
+          <div class="flex items-center font-mono gap-2 ">
             {{ renderer.info?.memory?.textures || 0 }}
             <i class="i-iconoir-select-face-3d" />
           </div>
-          <span class="text-xs text-gray-500">Textures</span>
+          <span class="text-xs dark:text-gray-400 text-gray-500">Textures</span>
         </div>
       </div>
       <div class="p4">
         <NTip class="text-sm">
-          <Icon
-            class="mr2"
-            name="carbon:information"
-          />Memory allocated by objects is aprox <strong>{{ bytesToKB(memory.allocatedMem) }} KB </strong>
+          <div class="flex items-center gap-2 dark:text-gray-400 text-gray-500">
+            <Icon
+              class="flex-shrink-0"
+              name="carbon:information"
+            />
+            <span class="flex items-center">
+              Memory allocated by objects is approx <strong class="ml-1">{{ bytesToKB(memory.allocatedMem) }} KB</strong>
+            </span>
+          </div>
         </NTip>
       </div>
-    </Pane>
-    <Pane title="Render">
+    </DevtoolsPane>
+    <DevtoolsPane title="Render">
       <div class="grid grid-cols-2 p4 justify-around w-full">
         <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" />
           </div>
-          <span class="text-xs text-gray-500">Calls</span>
+          <span class="text-xs dark:text-gray-400 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" />
           </div>
-          <span class="text-xs text-gray-500">Triangles</span>
+          <span class="text-xs dark:text-gray-400 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" />
           </div>
-          <span class="text-xs text-gray-500">Points</span>
+          <span class="text-xs dark:text-gray-400 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" />
           </div>
-          <span class="text-xs text-gray-500">Lines</span>
+          <span class="text-xs dark:text-gray-400 text-gray-500">Lines</span>
         </div>
       </div>
-    </Pane>
+    </DevtoolsPane>
   </div>
   <div class="">
-    <Pane title="Programs">
+    <DevtoolsPane title="Programs">
       <ProgramsModule />
-    </Pane>
+    </DevtoolsPane>
   </div>
 </template>

client/components/programs-module/ProgramsModule.vue → client/components/ProgramsModule.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useDevtoolsHook } from '../composables/useDevtoolsHook'
+import { computed } from '#imports'
+
 const { renderer } = useDevtoolsHook()
 
 const icons: Record<string, string> = {
@@ -8,8 +11,11 @@ const icons: Record<string, string> = {
 const programs = computed(() => renderer.info.programs.map(
   item => ({
     ...item,
+    // @ts-expect-error there is a complex relationship between gl and tresjs types
     icon: icons[item.type] || 'i-file-icons-vertexshader',
+    // @ts-expect-error xxxx
     uniforms: item.getUniforms(),
+    // @ts-expect-error xxxx
     attributes: item.getAttributes(),
   }),
 ))

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { ProgramObject } from '~/types'
+import type { ProgramObject } from '../types'
+import { ref } from '#imports'
 
 withDefaults(defineProps<{
   item: ProgramObject
@@ -13,21 +14,21 @@ const isExpanded = ref(false)
 
 <template>
   <div
-    class="text-sm text-gray-400 font-mono"
+    class="text-sm dark:text-gray-400 text-gray-500 font-mono"
   >
     <div
       class="flex gap-2 items-end cursor-pointer pt2 mb2"
       @click="isExpanded = !isExpanded"
     >
       <span
         v-if="depth > 0"
-        class="h-1 border-b border-gray-300 w-4"
+        class="h-1 border-b dark:border-gray-400 border-gray-500 w-4"
       />
       <div class="flex gap-2 items-center -mb2.5">
         <i :class="item.icon" />
         <!-- <Icon :name="item.icon" /> -->
         <!-- <i :class="item.icon" /> -->{{ item.type }} <UBadge
-          v-if="item.name "
+          v-if="item.name"
           variant="soft"
         >
           {{ item.name }}
@@ -37,8 +38,8 @@ const isExpanded = ref(false)
     <div
       v-if="isExpanded"
     >
-      <div class="p4 text-gray-400 text-xs font-mono">
-        <p class="text-xs font-bold text-gray-600 mb2">
+      <div class="p4 dark:text-gray-400 text-gray-500 text-xs font-mono">
+        <p class="text-xs font-bold dark:text-gray-300/80 text-gray-700/80 mb2 op-80">
           Uniforms
         </p>
         <div

client/components/SceneGraphItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SceneGraphObject } from '../types'
+import { ref } from '#imports'
 
 withDefaults(defineProps<{
   item: SceneGraphObject

client/composables/useDevtoolsHook.ts

@@ -1,15 +1,17 @@
 import type { TresContext, TresObject } from '@tresjs/core'
 import type { Scene } from 'three'
-import type { SceneGraphObject } from '../types'
+import type { SceneGraphObject, ProgramObject } from '../types'
+import { reactive } from '#imports'
+import type { UnwrapNestedRefs } from '#imports'
 
-interface FPSState {
+export interface FPSState {
   value: number
   accumulator: number[]
   lastLoggedTime: number
   logInterval: number
 }
 
-interface MemoryState {
+export interface MemoryState {
   currentMem: number
   averageMem: number
   maxMemory: number
@@ -19,7 +21,13 @@ interface MemoryState {
   logInterval: number
 }
 
-interface RendererState {
+export interface RendererType {
+  fps: UnwrapNestedRefs<FPSState>
+  memory: UnwrapNestedRefs<MemoryState>
+  renderer: UnwrapNestedRefs<RendererState>
+}
+
+export interface RendererState {
   info: {
     render: {
       frame: number
@@ -36,7 +44,7 @@ interface RendererState {
   }
 }
 
-interface DevtoolsHookReturn {
+export interface DevtoolsHookReturn {
   scene: {
     objects: number
     graph: Record<string, unknown>
@@ -89,7 +97,7 @@ const gl = {
       programs: [],
     },
   }),
-}
+} satisfies RendererType
 
 const icons: Record<string, string> = {
   scene: 'i-carbon-web-services-container',
@@ -177,7 +185,7 @@ export function useDevtoolsHook(): DevtoolsHookReturn {
       scene.objects = countObjectsInScene(context.scene.value)
       Object.assign(gl.renderer.info.render, context.renderer.value.info.render)
       Object.assign(gl.renderer.info.memory, context.renderer.value.info.memory)
-      gl.renderer.info.programs = [...context.renderer.value.info.programs as WebGLProgram[]]
+      gl.renderer.info.programs = [...(context.renderer.value.info.programs || []) as unknown as ProgramObject[]]
       Object.assign(gl.fps, context.perf.fps)
       gl.fps.accumulator = [...context.perf.fps.accumulator]
       Object.assign(gl.memory, context.perf.memory)

client/nuxt.config.ts

@@ -22,6 +22,14 @@ export default defineNuxtConfig({
     },
   },
 
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@nuxt/devtools-kit/iframe-client',
+      ],
+    },
+  },
+
   icon: {
     size: '24px', // default <Icon> size applied
     class: 'icon', // default <Icon> class applied

client/package.json

@@ -1,5 +1,14 @@
 {
   "name": "tres-nuxt-module",
   "type": "module",
-  "private": true
+  "private": true,
+  "devDependencies": {
+    "@nuxt/devtools-ui-kit": "^2.4.1",
+    "@nuxt/icon": "^1.10.2",
+    "@nuxt/ui": "^2.20.0",
+    "@unocss/nuxt": "^66.1.2"
+  },
+  "dependencies": {
+    "vue": "^3.5.14"
+  }
 }