feat(devtools): object state inspector tree

plugins/vite-plugin-tres/client/.nuxt/components.d.ts

@@ -6,10 +6,12 @@ declare module 'vue' {
     'ModuleAuthorNote': typeof import("../components/ModuleAuthorNote.vue")['default']
     'Pane': typeof import("../components/Pane.vue")['default']
     'PerformanceMonitor': typeof import("../components/PerformanceMonitor.vue")['default']
-    'PropertyTree': typeof import("../components/PropertyTree.vue")['default']
     'SceneGraphItem': typeof import("../components/SceneGraphItem.vue")['default']
     'TheHeader': typeof import("../components/TheHeader.vue")['default']
+    'InspectorBranch': typeof import("../components/inspector/InspectorBranch.vue")['default']
     'InspectorState': typeof import("../components/inspector/InspectorState.vue")['default']
+    'InspectorTree': typeof import("../components/inspector/InspectorTree.vue")['default']
+    'InspectorProps': typeof import("../components/inspector/props")['default']
     'ProgramsModule': typeof import("../components/programs-module/index.vue")['default']
     'ProgramsModuleItem': typeof import("../components/programs-module/item.vue")['default']
     'UnoIcon': typeof import("../../../../node_modules/.pnpm/@unocss+nuxt@0.58.3_postcss@8.4.33_rollup@3.29.4_vite@5.0.11_webpack@5.89.0/node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']
@@ -110,10 +112,12 @@ declare module 'vue' {
     'LazyModuleAuthorNote': typeof import("../components/ModuleAuthorNote.vue")['default']
     'LazyPane': typeof import("../components/Pane.vue")['default']
     'LazyPerformanceMonitor': typeof import("../components/PerformanceMonitor.vue")['default']
-    'LazyPropertyTree': typeof import("../components/PropertyTree.vue")['default']
     'LazySceneGraphItem': typeof import("../components/SceneGraphItem.vue")['default']
     'LazyTheHeader': typeof import("../components/TheHeader.vue")['default']
+    'LazyInspectorBranch': typeof import("../components/inspector/InspectorBranch.vue")['default']
     'LazyInspectorState': typeof import("../components/inspector/InspectorState.vue")['default']
+    'LazyInspectorTree': typeof import("../components/inspector/InspectorTree.vue")['default']
+    'LazyInspectorProps': typeof import("../components/inspector/props")['default']
     'LazyProgramsModule': typeof import("../components/programs-module/index.vue")['default']
     'LazyProgramsModuleItem': typeof import("../components/programs-module/item.vue")['default']
     'LazyUnoIcon': typeof import("../../../../node_modules/.pnpm/@unocss+nuxt@0.58.3_postcss@8.4.33_rollup@3.29.4_vite@5.0.11_webpack@5.89.0/node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']
@@ -217,10 +221,12 @@ export const Graph: typeof import("../components/Graph.vue")['default']
 export const ModuleAuthorNote: typeof import("../components/ModuleAuthorNote.vue")['default']
 export const Pane: typeof import("../components/Pane.vue")['default']
 export const PerformanceMonitor: typeof import("../components/PerformanceMonitor.vue")['default']
-export const PropertyTree: typeof import("../components/PropertyTree.vue")['default']
 export const SceneGraphItem: typeof import("../components/SceneGraphItem.vue")['default']
 export const TheHeader: typeof import("../components/TheHeader.vue")['default']
+export const InspectorBranch: typeof import("../components/inspector/InspectorBranch.vue")['default']
 export const InspectorState: typeof import("../components/inspector/InspectorState.vue")['default']
+export const InspectorTree: typeof import("../components/inspector/InspectorTree.vue")['default']
+export const InspectorProps: typeof import("../components/inspector/props")['default']
 export const ProgramsModule: typeof import("../components/programs-module/index.vue")['default']
 export const ProgramsModuleItem: typeof import("../components/programs-module/item.vue")['default']
 export const UnoIcon: typeof import("../../../../node_modules/.pnpm/@unocss+nuxt@0.58.3_postcss@8.4.33_rollup@3.29.4_vite@5.0.11_webpack@5.89.0/node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']
@@ -321,10 +327,12 @@ export const LazyGraph: typeof import("../components/Graph.vue")['default']
 export const LazyModuleAuthorNote: typeof import("../components/ModuleAuthorNote.vue")['default']
 export const LazyPane: typeof import("../components/Pane.vue")['default']
 export const LazyPerformanceMonitor: typeof import("../components/PerformanceMonitor.vue")['default']
-export const LazyPropertyTree: typeof import("../components/PropertyTree.vue")['default']
 export const LazySceneGraphItem: typeof import("../components/SceneGraphItem.vue")['default']
 export const LazyTheHeader: typeof import("../components/TheHeader.vue")['default']
+export const LazyInspectorBranch: typeof import("../components/inspector/InspectorBranch.vue")['default']
 export const LazyInspectorState: typeof import("../components/inspector/InspectorState.vue")['default']
+export const LazyInspectorTree: typeof import("../components/inspector/InspectorTree.vue")['default']
+export const LazyInspectorProps: typeof import("../components/inspector/props")['default']
 export const LazyProgramsModule: typeof import("../components/programs-module/index.vue")['default']
 export const LazyProgramsModuleItem: typeof import("../components/programs-module/item.vue")['default']
 export const LazyUnoIcon: typeof import("../../../../node_modules/.pnpm/@unocss+nuxt@0.58.3_postcss@8.4.33_rollup@3.29.4_vite@5.0.11_webpack@5.89.0/node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']

plugins/vite-plugin-tres/client/.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1704703577188}
+{"id":"dev","timestamp":1704731621284}

plugins/vite-plugin-tres/client/.nuxt/manifest/meta/dev.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1704703577188,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
+{"id":"dev","timestamp":1704731621284,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

plugins/vite-plugin-tres/client/.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2024-01-08T08:46:26.202Z",
+  "date": "2024-01-08T16:33:50.487Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.8.1"
   },
   "dev": {
-    "pid": 31766,
+    "pid": 43585,
     "workerAddress": {
-      "socketPath": "/var/folders/66/14k3nnbx1g505216sq4xdfdc0000gn/T/nitro/worker-31766-2.sock"
+      "socketPath": "/var/folders/66/14k3nnbx1g505216sq4xdfdc0000gn/T/nitro/worker-43585-2.sock"
     }
   }
 }

plugins/vite-plugin-tres/client/components/PropertyTree.vue

@@ -1,7 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  Property Tree
-</template>

plugins/vite-plugin-tres/client/components/inspector/InspectorBranch.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const props = defineProps<{
+  entry: any
+  depth?: number
+}>()
+
+const isObject = value => value && typeof value === 'object' && !Array.isArray(value)
+
+const isArray = value => Array.isArray(value)
+
+const data = computed(() => {
+  // Handle both objects and arrays
+  const entries = isObject(props.entry) ? Object.entries(props.entry) : props.entry
+  return entries.map((entry, index) => {
+    const [key, value] = isObject(props.entry) ? entry : [index, entry]
+    return {
+      key,
+      value,
+      uuid: Math.random().toString(36).substring(7),
+      expandable: isObject(value) || isArray(value),
+    }
+  })
+})
+
+// Reactive state to track collapsed/expanded states
+const collapsedKeys = reactive({})
+
+// Toggle the collapsed state
+const toggleCollapse = (uuid) => {
+  collapsedKeys[uuid] = !collapsedKeys[uuid]
+}
+
+const isExpanded = uuid => collapsedKeys[uuid]
+</script>
+
+<template>
+  <div
+    v-for="item in data"
+    :key="item.key"
+    class="pb1 text-sm"
+  >
+    <!-- Check if the item is expandable (either an object or an array) -->
+    <template v-if="item.expandable && depth < 2">
+      <div
+        class="flex items-center"
+        @click="toggleCollapse(item.uuid)"
+      >
+        <Icon
+          class="mr-2"
+          :name="isExpanded(item.uuid) ? 'i-carbon-caret-down' : 'i-carbon-caret-right'"
+        />
+        {{ item.key }} : {{ isArray(item.value) ? 'Array' : 'Object' }}
+      </div>
+      <div
+        v-show="isExpanded(item.uuid)"
+        class="pl-8 py2"
+      >
+        <!-- Handle Objects -->
+        <template v-if="isObject(item.value)">
+          <InspectorBranch
+            :entry="item.value"
+            :depth="depth + 1"
+          />
+        </template>
+        <!-- Handle Arrays -->
+        <template v-if="isArray(item.value)">
+          <div
+            v-for="(elem, index) in item.value"
+            :key="index"
+          >
+            <!-- This assumes you want to show each array element. Adjust as needed. -->
+            <!--  <InspectorBranch :entry="elem" /> -->
+          </div>
+        </template>
+      </div>
+    </template>
+    <!-- Non-expandable items (primitive types) -->
+    <template v-else>
+      <div class="flex gap-1">
+        <label for="">{{ item.key }}</label> : 
+        <input
+          :value="item.value"
+          :type="typeof item.value"
+        >
+      </div>
+    </template>
+  </div>
+</template>

plugins/vite-plugin-tres/client/components/inspector/InspectorState.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import PropertyTree from '../PropertyTree.vue'
 import CodeView from '../CodeView.vue'
+import InspectorTree from './InspectorTree.vue'
 
 const tabs = ref([
   {
-    slug: 'property-tree',
-    name: PropertyTree,
-    path: '/property-tree',
+    slug: 'inspector-tree',
+    name: 'Inspector Tree',
+    component: InspectorTree,
+    path: '/inspector-tree',
     icon: 'i-carbon-tree-view',
   },
   {
     slug: 'code-view',
-    name: CodeView,
+    name: 'Code View',
+    component: CodeView,
     path: '/code-view',
     icon: 'i-iconoir-code',
   },
@@ -44,7 +46,7 @@ const { internal } = useDevtoolsHook()
     </div>
   </header>
   <div class="w-full p4 overflow-y-scroll h-full">
-    <component :is="tabs[currentTab].name" />
+    <component :is="tabs[currentTab].component" />
     <!--  <template v-if="currentTab.slug === 'property-tree'">
       <PropertyTree />
     </template>

plugins/vite-plugin-tres/client/components/inspector/InspectorTree.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { internal } = useDevtoolsHook()
+</script>
+
+<template>
+  <InspectorBranch
+    :entry="internal.selectedObject"
+    :depth="0"
+  />
+</template>

plugins/vite-plugin-tres/client/components/inspector/props.js

@@ -0,0 +1,6 @@
+import { defineProps } from 'vue';
+
+export const props = defineProps < {
+label: string,
+value: any
+} > ();