JSX children prop support

adeira-source-id: 0866bdaf44d6bda747390a9a246fa33d12b8e94f

.changeset/calm-laws-march.md

@@ -0,0 +1,5 @@
+---
+"@triplex/server": patch
+---
+
+The `children` prop can now be edited inside the element panel for all supported types.

.changeset/ninety-candles-grow.md

@@ -0,0 +1,5 @@
+---
+"@triplex/server": patch
+---
+
+The `attach` prop for React Three Fiber elements is now visible in the elements panel.

examples/test-fixture/src/component-roots.tsx

@@ -12,11 +12,15 @@ export function ThreeFiberRootFromAnotherModule() {
 }
 
 export function ReactRoot() {
-  return <div data-testid="react-root" style={{  height: '100vh', width: '100vh' }}>Hello World</div>;
+  return (
+    <div data-testid="react-root" style={{ height: "100vh", width: "100vh" }}>
+      Hello World
+    </div>
+  );
 }
 
 export function ReactRootFromAnotherModule() {
-  return <Button text="Button"/>;
+  return <Button>Button</Button>;
 }
 
 export function Unknown() {

examples/test-fixture/src/react-roots.tsx

@@ -7,15 +7,15 @@
 import { Canvas } from "@react-three/fiber";
 
 export function Button({
+  children,
   color = "red",
-  text,
 }: {
+  children: string;
   color?: "red" | "blue";
-  text: string;
 }) {
   return (
     <button style={{ color, height: "100vh", width: "100vh" }} type="submit">
-      {text}
+      {children}
     </button>
   );
 }