Merge pull request #57 from Ledzz/feature/react-name

Add properties.name to all react components

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 package-lock.json
-.DS_Store
+.DS_Store
+.idea

packages/react/src/container.tsx

@@ -13,6 +13,7 @@ import {
 import { ComponentInternals, useComponentInternals } from './ref.js'
 
 export type ContainerProperties = {
+  name?: string
   children?: ReactNode
 } & BaseContainerProperties &
   EventHandlers
@@ -36,6 +37,9 @@ export const Container: (
       ),
     [parent, propertySignals],
   )
+
+  internals.interactionPanel.name = properties.name ?? ''
+
   useEffect(() => {
     const subscriptions: Subscriptions = []
     initialize(internals.initializers, subscriptions)

packages/react/src/content.tsx

@@ -8,6 +8,7 @@ import { ComponentInternals, useComponentInternals } from './ref.js'
 import { ContentProperties as BaseContentProperties } from '../../uikit/dist/components/content.js'
 
 export type ContentProperties = {
+  name?: string
   children?: ReactNode
 } & BaseContentProperties &
   EventHandlers
@@ -30,6 +31,9 @@ export const Content: (props: ContentProperties & RefAttributes<ComponentInterna
         ),
       [parent, propertySignals],
     )
+
+    internals.interactionPanel.name = properties.name ?? ''
+
     useEffect(() => {
       const subscriptions: Subscriptions = []
       initialize(internals.initializers, subscriptions)

packages/react/src/custom.tsx

@@ -14,6 +14,7 @@ import {
 import { ComponentInternals, useComponentInternals } from './ref.js'
 
 export type CustomContainerProperties = {
+  name?: string
   children?: ReactNode
   customDepthMaterial?: Material
   customDistanceMaterial?: Material
@@ -47,6 +48,12 @@ export const CustomContainer: (
 
   useComponentInternals(ref, parent.root.pixelSize, propertySignals.style, internals, innerRef)
 
+  useEffect(() => {
+    if (innerRef.current && properties.name) {
+      innerRef.current.name = properties.name
+    }
+  }, [properties.name])
+
   return (
     <AddHandlers userHandlers={properties} handlers={internals.handlers} ref={outerRef}>
       <ParentProvider value={undefined}>

packages/react/src/icon.tsx

@@ -18,6 +18,7 @@ export type IconProperties = BaseIconProperties &
     svgWidth: number
     svgHeight: number
     children?: ReactNode
+    name?: string
   }
 
 export const Icon: (props: IconProperties & RefAttributes<ComponentInternals<IconProperties>>) => ReactNode =
@@ -39,6 +40,9 @@ export const Icon: (props: IconProperties & RefAttributes<ComponentInternals<Ico
         ),
       [parent, properties.svgHeight, properties.svgWidth, properties.text, propertySignals],
     )
+
+    internals.interactionPanel.name = properties.name ?? ''
+
     useEffect(() => {
       const subscriptions: Subscriptions = []
       initialize(internals.initializers, subscriptions)

packages/react/src/image.tsx

@@ -15,6 +15,7 @@ import type { EventHandlers } from '@react-three/fiber/dist/declarations/src/cor
 export type ImageProperties = BaseImageProperties &
   EventHandlers & {
     children?: ReactNode
+    name?: string
   }
 
 export const Image: (props: ImageProperties & RefAttributes<ComponentInternals<ImageProperties>>) => ReactNode =
@@ -36,6 +37,9 @@ export const Image: (props: ImageProperties & RefAttributes<ComponentInternals<I
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [],
     )
+
+    internals.interactionPanel.name = properties.name ?? ''
+
     useEffect(() => {
       const subscriptions: Subscriptions = []
       initialize(internals.initializers, subscriptions)

packages/react/src/input.tsx

@@ -20,7 +20,10 @@ export type InputInternals = ComponentInternals<InputProperties> & {
   focus: () => void
 }
 
-export type InputProperties = BaseInputProperties & EventHandlers
+export type InputProperties = BaseInputProperties &
+  EventHandlers & {
+    name?: string
+  }
 
 export const Input: (props: InputProperties & RefAttributes<InputInternals>) => ReactNode = forwardRef(
   (properties, ref) => {
@@ -44,6 +47,8 @@ export const Input: (props: InputProperties & RefAttributes<InputInternals>) =>
       [],
     )
 
+    internals.interactionPanel.name = properties.name ?? ''
+
     useEffect(() => {
       const subscriptions: Subscriptions = []
       initialize(internals.initializers, subscriptions)

packages/react/src/root.tsx

@@ -21,6 +21,7 @@ import { Signal, computed, signal } from '@preact/signals-core'
 export type RootProperties = BaseRootProperties &
   WithReactive<{ pixelSize?: number }> & {
     children?: ReactNode
+    name?: string
   } & EventHandlers
 
 export const Root: (props: RootProperties & RefAttributes<ComponentInternals<RootProperties>>) => ReactNode =
@@ -62,6 +63,9 @@ export const Root: (props: RootProperties & RefAttributes<ComponentInternals<Roo
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [invalidate],
     )
+
+    internals.interactionPanel.name = properties.name ?? ''
+
     useEffect(() => {
       const subscriptions: Subscriptions = []
       initialize(internals.initializers, subscriptions)

packages/react/src/svg.tsx

@@ -12,7 +12,11 @@ import { ParentProvider, useParent } from './context.js'
 import { ComponentInternals, useComponentInternals } from './ref.js'
 import type { EventHandlers } from '@react-three/fiber/dist/declarations/src/core/events.js'
 
-export type SvgProperties = BaseSvgProperties & EventHandlers & { children?: ReactNode }
+export type SvgProperties = BaseSvgProperties &
+  EventHandlers & {
+    children?: ReactNode
+    name?: string
+  }
 
 export const Svg: (props: SvgProperties & RefAttributes<ComponentInternals<SvgProperties>>) => ReactNode = forwardRef(
   (properties, ref) => {
@@ -32,6 +36,9 @@ export const Svg: (props: SvgProperties & RefAttributes<ComponentInternals<SvgPr
         ),
       [parent, propertySignals],
     )
+
+    internals.interactionPanel.name = properties.name ?? ''
+
     useEffect(() => {
       const subscriptions: Subscriptions = []
       initialize(internals.initializers, subscriptions)

packages/react/src/text.tsx

@@ -17,6 +17,7 @@ import { useFontFamilies } from './font.js'
 
 export type TextProperties = {
   children: string | Array<string | Signal<string>> | Signal<string>
+  name?: string
 } & BaseTextProperties &
   EventHandlers
 
@@ -45,6 +46,9 @@ export const Text: (props: TextProperties & RefAttributes<ComponentInternals<Tex
         ),
       [fontFamilies, parent, propertySignals, textSignal],
     )
+
+    internals.interactionPanel.name = properties.name ?? ''
+
     useEffect(() => {
       const subscriptions: Subscriptions = []
       initialize(internals.initializers, subscriptions)