feat!: update Nuxt to support version ^3.16.0

client/components/PerformanceMonitor.vue

@@ -51,11 +51,16 @@ const { fps, memory, renderer } = useDevtoolsHook()
         </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>
+        <NTip class="text-sm flex items-center gap-2">
+          <div class="flex items-center gap-2">
+            <Icon
+              class="flex-shrink-0"
+              name="carbon:information"
+            />
+            <span class="flex items-center text-blue-gray-300">
+              Memory allocated by objects is approx <strong class="ml-1">{{ bytesToKB(memory.allocatedMem) }} KB</strong>
+            </span>
+          </div>
         </NTip>
       </div>
     </DevtoolsPane>

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

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useDevtoolsHook } from '../composables/useDevtoolsHook'
+
 const { renderer } = useDevtoolsHook()
 
 const icons: Record<string, string> = {
@@ -8,15 +11,18 @@ const icons: Record<string, string> = {
 const programs = computed(() => renderer.info.programs.map(
   item => ({
     ...item,
+    // @ts-expect-error xxxx
     icon: icons[item.type] || 'i-file-icons-vertexshader',
+    // @ts-expect-error xxxx
     uniforms: item.getUniforms(),
+    // @ts-expect-error xxxx
     attributes: item.getAttributes(),
   }),
 ))
 </script>
 
 <template>
-  <ProgramsModuleitem
+  <ProgramsModuleItem
     v-for="item in programs"
     :key="item.id"
     :item="item"

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

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

client/components/SceneGraphItem.vue

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

client/composables/useDevtoolsHook.ts

@@ -1,15 +1,16 @@
 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, type UnwrapNestedRefs } from 'vue'
 
-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 +20,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 +43,7 @@ interface RendererState {
   }
 }
 
-interface DevtoolsHookReturn {
+export interface DevtoolsHookReturn {
   scene: {
     objects: number
     graph: Record<string, unknown>
@@ -89,7 +96,7 @@ const gl = {
       programs: [],
     },
   }),
-}
+} satisfies RendererType
 
 const icons: Record<string, string> = {
   scene: 'i-carbon-web-services-container',
@@ -177,7 +184,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/types/index.ts

@@ -52,14 +52,17 @@ export interface PerfData {
   scene: Scene | undefined
 }
 
-export interface ProgramObject {
+export type ProgramObject = {
   type: string
   name: string
   id: number
   vertexShader: string
   fragmentShader: string
-  uniforms: Record<string, unknown>
-  attributes: Record<string, unknown>
-  program: WebGLProgram
+  getUniforms: () => Record<string, unknown>
+  getAttributes: () => Record<string, unknown>
   usedTimes: number
+  program: WebGLProgram
+  uniforms: Record<string, { value: unknown }>
+  attributes: Record<string, { value: unknown }>
+  isProgram: true
 }