Examples can have sub examples, nested ui layout

benchmarks/avatarIKBenchmark.tsx

@@ -10,7 +10,7 @@ export const metadata = {
   description: ''
 }
 
-export default function () {
+export default function AvatarIKBenchmarkEntry() {
   const sceneEntity = useRouteScene()
   return sceneEntity.value ? (
     <>

benchmarksRoute.tsx

@@ -1,28 +1,43 @@
 import React from 'react'
 
 import '@etherealengine/client-core/src/world/LocationModule'
+import AvatarBenchmarkEntry from './benchmarks/avatarBenchmark'
+import AvatarIKBenchmarkEntry from './benchmarks/avatarIKBenchmark'
+import HeapBenchmarkEntry from './benchmarks/heapBenchmark'
+import ParticlesBenchmarkEntry from './benchmarks/particlesBenchmark'
+import PhysicsBenchmarkEntry from './benchmarks/physicsBenchmark'
 import Routes, { RouteData } from './sceneRoute'
 
-const prefix = './benchmarks/'
-
-//@ts-ignore
-const importedMetadata = import.meta.glob<any>('./benchmarks/*.tsx', {
-  import: 'metadata',
-  eager: true
-})
-
-//@ts-ignore
-const imports = import.meta.glob<any>('./benchmarks/*.tsx')
-const routes = Object.entries(imports).reduce(
-  (prev, [route, lazy]) => ({
-    ...prev,
-    [route]: { page: React.lazy(lazy), metadata: importedMetadata[route] } as RouteData
-  }),
-  {}
-) as Record<string, RouteData>
+export const benchmarks: RouteData[] = [
+  {
+    name: 'Avatar Benchmark',
+    description: '',
+    entry: AvatarBenchmarkEntry
+  },
+  {
+    name: 'Avatar IK Benchmark',
+    description: '',
+    entry: AvatarIKBenchmarkEntry
+  },
+  {
+    name: 'Particles Benchmark',
+    description: '',
+    entry: ParticlesBenchmarkEntry
+  },
+  {
+    name: 'Physics Benchmark',
+    description: '',
+    entry: PhysicsBenchmarkEntry
+  },
+  {
+    name: 'Heap Benchmark',
+    description: '',
+    entry: HeapBenchmarkEntry
+  }
+]
 
 const BenchmarkRoutes = () => {
-  return <Routes routes={routes} prefix={prefix} header="Benchmarks" />
+  return <Routes routes={benchmarks} header="Benchmarks" />
 }
 
 export default BenchmarkRoutes

engine/examples/ComponentNamesUI.tsx

@@ -1,23 +1,26 @@
 // @ts-ignore
 import styles from './ComponentNamesUI.css?inline'
 
-import ECS, { getComponent, useComponent, useEntityContext } from '@etherealengine/ecs'
+import ECS, { getOptionalComponent, useComponent, useEntityContext } from '@etherealengine/ecs'
 import { useHookstate } from '@etherealengine/hyperflux'
 import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
 import React, { useEffect } from 'react'
-import { ExamplesComponent } from './ExamplesComponent'
+import { EntityComponent } from '../../examples/utils/entityComponent'
 
 const ComponentNamesUI: React.FC = (props) => {
   const entity = useEntityContext()
   const names = useHookstate<string[]>([])
   const parent = useComponent(entity, EntityTreeComponent).parentEntity
-  const examplesComponent = useComponent(parent.value, ExamplesComponent)
+  const examplesComponent = useComponent(parent.value, EntityComponent)
 
   useEffect(() => {
-    const currExample = examplesComponent.currExampleEntity.value
+    const currExample = examplesComponent.value
     if (!currExample) return
 
-    const children = getComponent(currExample, EntityTreeComponent).children
+    const tree = getOptionalComponent(currExample, EntityTreeComponent)
+    if (!tree) return
+
+    const children = tree.children
     const entities = [currExample, ...children]
 
     const componentNamesSet = new Set<string>()
@@ -34,9 +37,7 @@ const ComponentNamesUI: React.FC = (props) => {
       (name) => !['RenderOrder', 'ObjectLayer', 'Scene', 'Network', 'Resource'].some((val) => name.includes(val))
     )
     names.set(componentNames)
-
-    return () => {}
-  }, [examplesComponent.currExampleEntity])
+  }, [examplesComponent])
 
   return (
     <>

engine/examples/ExamplesComponent.tsx

@@ -33,7 +33,6 @@ import { SplineComponent } from '@etherealengine/engine/src/scene/components/Spl
 import { SplineTrackComponent } from '@etherealengine/engine/src/scene/components/SplineTrackComponent'
 import { Heuristic, VariantComponent } from '@etherealengine/engine/src/scene/components/VariantComponent'
 import { VideoComponent } from '@etherealengine/engine/src/scene/components/VideoComponent'
-import { VolumetricComponent } from '@etherealengine/engine/src/scene/components/VolumetricComponent'
 import { SplineHelperComponent } from '@etherealengine/engine/src/scene/components/debug/SplineHelperComponent'
 import { GeometryTypeEnum } from '@etherealengine/engine/src/scene/constants/GeometryTypeEnum'
 import { NO_PROXY, useHookstate } from '@etherealengine/hyperflux'
@@ -356,42 +355,42 @@ export const examples: Example[] = [
         onLoad(entity)
       }, [callback])
 
-      return null
-    }
-  },
-  {
-    name: 'UVOL',
-    description: 'Add volumetric models to your scene',
-    Reactor: (props: { parent: Entity; onLoad: (entity: Entity) => void }) => {
-      const { parent, onLoad } = props
-      const entity = useExampleEntity(parent)
-      const modelEntity = useExampleEntity(entity)
-      const outfitEntity = useExampleEntity(entity)
-      const model = useOptionalComponent(modelEntity, VolumetricComponent)
-      const outfit = useOptionalComponent(outfitEntity, VolumetricComponent)
-
-      useEffect(() => {
-        setComponent(entity, NameComponent, 'UVOL-Example')
-        setVisibleComponent(entity, true)
-
-        setComponent(modelEntity, NameComponent, 'Model-Example')
-        setComponent(modelEntity, VolumetricComponent, {
-          paths: ['https://resources-volumetric.etherealengine.com/alex_walk_performer.json']
-        })
-        setVisibleComponent(modelEntity, true)
-
-        setComponent(outfitEntity, NameComponent, 'Outfit-Example')
-        setComponent(outfitEntity, VolumetricComponent, {
-          paths: ['https://resources-volumetric.etherealengine.com/alex_walk_sundress_businessCasual.json']
-        })
-        setVisibleComponent(outfitEntity, true)
-
-        onLoad(entity)
-      }, [])
-
       return null
     }
   }
+  // {
+  //   name: 'UVOL',
+  //   description: 'Add volumetric models to your scene',
+  //   Reactor: (props: { parent: Entity; onLoad: (entity: Entity) => void }) => {
+  //     const { parent, onLoad } = props
+  //     const entity = useExampleEntity(parent)
+  //     const modelEntity = useExampleEntity(entity)
+  //     const outfitEntity = useExampleEntity(entity)
+  //     const model = useOptionalComponent(modelEntity, VolumetricComponent)
+  //     const outfit = useOptionalComponent(outfitEntity, VolumetricComponent)
+
+  //     useEffect(() => {
+  //       setComponent(entity, NameComponent, 'UVOL-Example')
+  //       setVisibleComponent(entity, true)
+
+  //       setComponent(modelEntity, NameComponent, 'Model-Example')
+  //       setComponent(modelEntity, VolumetricComponent, {
+  //         paths: ['https://resources-volumetric.etherealengine.com/alex_walk_performer.json']
+  //       })
+  //       setVisibleComponent(modelEntity, true)
+
+  //       setComponent(outfitEntity, NameComponent, 'Outfit-Example')
+  //       setComponent(outfitEntity, VolumetricComponent, {
+  //         paths: ['https://resources-volumetric.etherealengine.com/alex_walk_sundress_businessCasual.json']
+  //       })
+  //       setVisibleComponent(outfitEntity, true)
+
+  //       onLoad(entity)
+  //     }, [])
+
+  //     return null
+  //   }
+  // }
 ]
 
 export const ExamplesComponent = defineComponent({

examples/avatarMocap.tsx

@@ -231,7 +231,7 @@ function AvatarMocap(props: { sceneEntity: Entity }) {
   )
 }
 
-export default function () {
+export default function AvatarMocapEntry() {
   const sceneEntity = useRouteScene()
   return sceneEntity.value ? <AvatarMocap sceneEntity={sceneEntity.value} /> : null
 }