feat: more typesafe version of the debugger

packages/devtools/package.json

@@ -41,6 +41,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@fibbojs/2d": "^0.0.1",
+    "@fibbojs/3d": "^0.0.1",
     "@fibbojs/core": "^0.0.1"
   }
 }

packages/devtools/src/components/FDebugPanel.ce.vue

@@ -2,142 +2,94 @@
   <div class="f-debug-panel">
     <h1>{{ title }}</h1>
     <div v-if="scene">
-      <div v-for="component in scene.components" :key="component.__ID__">
-        <h3 class="f-component-id">{{ component.__ID__ }}</h3>
-        <div
-        class="f-debug-properties"
-        :class="{
-          'f-debug-properties--hidden': property.shown === false
-        }"
-        v-for="property in properties"
-        :key="property.label"
-        >
-          <div class="f-debug-property" v-if="property.shown && !property.isNested">
-            <p>{{ property.label }}</p>
-            <!-- @vue-skip -->
-            <p>{{ String(component[property.label]).slice(0, 5) }}</p>
-          </div>
-          <div class="f-debug-property" v-if="property.isNested && property.properties">
-            <div class="f-debug-sub-property" v-for="subProperty in property.properties" :key="subProperty.label">
-              <div class="f-debug-property" v-if="subProperty.shown">
-                <p>{{ subProperty.label }}</p>
-                <!-- @vue-skip -->
-                <p>{{ String(component[property.label][subProperty.label]).slice(0, 5) }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <FDebugPanel2d
+        v-if="is2dComponent(scene.components[0])"
+        :components="scene.components as FComponent2d[]"
+      />
+      <FDebugPanel3d
+        v-if="is3dComponent(scene.components[0])"
+        :components="scene.components as FComponent3d[]"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { PropType, Ref } from 'vue'
-import { defineProps, onMounted, ref } from 'vue'
-import type { FScene } from '@fibbojs/core'
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent, FScene } from '@fibbojs/core'
+import type { FComponent2d } from '@fibbojs/2d'
+import type { FComponent3d } from '@fibbojs/3d'
+import FDebugPanel2d from './FDebugPanel2d.vue'
+import FDebugPanel3d from './FDebugPanel3d.vue'
 
-// List of properties defined in the component
-// Each is an object with the name of the property and wether or not it should be shown in the debug panel
-interface ComponentProperty {
-  label: string
-  shown: boolean
-  isNested: boolean
-  properties?: ComponentProperty[]
+// Explore prototype chain of given FComponent to get all the classes in the chain
+function getPrototypeChain(component: FComponent) {
+  let proto = component;
+  const names = [];
+  while (proto) {
+    names.push(proto.constructor.name);
+    proto = Object.getPrototypeOf(proto);
+  }
+  return names;
+}
+
+// Tell if a given FComponent is an instance of FComponent2d
+function is2dComponent(component: FComponent) {
+  return getPrototypeChain(component).includes('FComponent2d');
 }
-const properties: Ref<ComponentProperty[]> = ref([])
 
-// Object describing properties that should be shown by default
-// This is used to avoid showing all properties at once
-const defaultProperties: any = {
-  position: {
-    x: true,
-    y: true,
-    z: true
-  },
-  rotation: true
+// Tell if a given FComponent is an instance of FComponent3d
+function is3dComponent(component: FComponent) {
+  return getPrototypeChain(component).includes('FComponent3d');
 }
 
-const props = defineProps({
+defineProps({
   title: String,
   scene: {
     type: Object as PropType<FScene>,
     default: null
   }
 })
-
-onMounted(() => {
-  if (props.scene) {
-    props.scene.onComponentAdded((component) => {
-      properties.value = Object.keys(component).map((key) => ({
-        label: key,
-        shown: false,
-        // @ts-expect-error - We know this is an object
-        isNested: typeof component[key] === 'object',
-        // @ts-expect-error - We know this is an object
-        properties: typeof component[key] === 'object' ? Object.keys(component[key]).map((nestedKey) => ({
-          label: nestedKey,
-          shown: false,
-          isNested: false
-        })) : []
-      }))
-      // Show default properties
-      properties.value.forEach((property) => {
-        if (defaultProperties[property.label]) {
-          if (property.isNested && property.properties) {
-            property.shown = true
-            property.properties.forEach((nestedProperty) => {
-              if (defaultProperties[property.label][nestedProperty.label]) {
-                nestedProperty.shown = true
-              }
-            })
-          } else {
-            property.shown = true
-          }
-        }
-      })
-    })
-  }
-})
 </script>
 
 <style scoped>
-  .f-component-id {
-    color: #fff;
-    margin: 0;
-  }
+.f-component-id {
+  color: #fff;
+  margin: 0;
+}
 
-  .f-debug-panel {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    bottom: 10px;
-    width: 300px;
-    background: #0000009f;
-    border-radius: 8px;
-    overflow: auto;
-  }
+.f-debug-panel {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  bottom: 10px;
+  width: 300px;
+  background: #0000009f;
+  border-radius: 8px;
+  overflow: auto;
+}
 
-  .f-debug-properties--hidden {
-    display: none;
-  }
+.f-debug-properties--hidden {
+  display: none;
+}
 
-  h1 {
-    color: red;
-  }
+h1 {
+  color: red;
+}
 
-  .f-debug-properties {
-    padding: 10px;
-    border-bottom: 1px solid #fff;
-  }
+.f-debug-properties {
+  padding: 10px;
+  border-bottom: 1px solid #fff;
+}
 
-  .f-debug-property {
-    display: flex;
-    justify-content: space-between;
-  }
+.f-debug-property {
+  display: flex;
+  justify-content: space-between;
+}
 
-  .f-debug-property p {
-    margin: 0;
-    color: #fff;
-  }
+.f-debug-property p {
+  margin: 0;
+  color: #fff;
+}
 </style>

packages/devtools/src/components/FDebugPanel2d.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="f-debug-panel-2d">
+    <div v-for="component in components" :key="component.__ID__">
+      <h3 class="f-component-id">{{ component.__ID__ }}</h3>
+      <div class="f-debug-property">
+        <div class="f-debug-property-group">
+          <h4>Position</h4>
+          <p>x : {{ component.position.x }}</p>
+          <p>y : {{ component.position.y }}</p>
+        </div>
+        <p>r : {{ component.rotation }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent2d } from '@fibbojs/2d';
+
+defineProps({
+  components: {
+    type: Array as PropType<FComponent2d[]>,
+    default: () => []
+  }
+})
+</script>
+
+<style scoped>
+.f-component-id {
+  color: #fff;
+  margin: 0;
+}
+
+.f-debug-properties {
+  padding: 10px;
+  border-bottom: 1px solid #fff;
+}
+
+.f-debug-property {
+  display: flex;
+  justify-content: space-between;
+}
+
+.f-debug-property p {
+  margin: 0;
+  color: #fff;
+}
+</style>

packages/devtools/src/components/FDebugPanel3d.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="f-debug-panel-3d">
+    <div v-for="component in components" :key="component.__ID__">
+      <h3 class="f-component-id">{{ component.__ID__ }}</h3>
+      <div class="f-debug-property">
+        <div class="f-debug-property-group">
+          <h4>Position</h4>
+          <p>x : {{ component.position.x }}</p>
+          <p>y : {{ component.position.y }}</p>
+          <p>y : {{ component.position.z }}</p>
+        </div>
+        <div class="f-debug-property-group">
+          <h4>Rotation</h4>
+          <p>x : {{ component.rotation.x }}</p>
+          <p>y : {{ component.rotation.y }}</p>
+          <p>y : {{ component.rotation.z }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent3d } from '@fibbojs/3d';
+
+defineProps({
+  components: {
+    type: Array as PropType<FComponent3d[]>,
+    default: () => []
+  }
+})
+</script>
+
+<style scoped>
+  .f-component-id {
+    color: #fff;
+    margin: 0;
+  }
+
+  .f-debug-properties {
+    padding: 10px;
+    border-bottom: 1px solid #fff;
+  }
+
+  .f-debug-property {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .f-debug-property p {
+    margin: 0;
+    color: #fff;
+  }
+</style>

packages/devtools/vite.config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
+import wasm from 'vite-plugin-wasm'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
@@ -20,5 +21,5 @@ export default defineConfig({
       },
     },
   },
-  plugins: [vue()],
+  plugins: [vue(), wasm()],
 })