Example work

packages/example/gen/godot/src/form/ControlledForm.nodes.gen.ts

@@ -0,0 +1,5 @@
+declare module "godot" {
+    interface SceneNodes {
+        "src/form/ControlledForm.tscn": {};
+    }
+}

packages/example/gen/godot/src/form/ControlledForm.tscn.gen.ts

@@ -0,0 +1,5 @@
+declare module "godot" {
+    interface ResourceTypes {
+        "res://src/form/ControlledForm.tscn": PackedScene<Control<SceneNodes["src/form/ControlledForm.tscn"]>>;
+    }
+}

packages/example/src/form/ControlledForm.ts

@@ -0,0 +1,6 @@
+import { Control } from "godot"
+import { Class } from "react-godot-renderer"
+import { ControlledFormRoot } from "./ControlledFormRoot"
+
+
+export default class ControlledForm extends Class.make(Control, ControlledFormRoot) {}

packages/example/src/form/ControlledForm.ts.uid

@@ -0,0 +1 @@
+uid://c7c43wpsjchhs

packages/example/src/form/ControlledForm.tscn

@@ -0,0 +1,12 @@
+[gd_scene load_steps=2 format=3 uid="uid://dmvgc7era5i4e"]
+
+[ext_resource type="Script" uid="uid://c7c43wpsjchhs" path="res://src/form/ControlledForm.ts" id="1_4ihd3"]
+
+[node name="ControlledForm" type="Control"]
+layout_mode = 3
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+script = ExtResource("1_4ihd3")

packages/example/src/form/ControlledFormRoot.tsx

@@ -0,0 +1,24 @@
+import Godot from "godot"
+import { Component } from "react-godot-renderer"
+
+
+const CenterContainer = Component.fromClass(Godot.CenterContainer)
+const VFlowContainer = Component.fromClass(Godot.VFlowContainer)
+const Label = Component.fromClass(Godot.Label)
+
+/**
+ * A form UI where React controls the state
+ */
+export function ControlledFormRoot() {
+    return (
+        <CenterContainer
+            anchors_preset={1}
+        >
+            <VFlowContainer>
+                <CenterContainer>
+                    <Label text="Register" />
+                </CenterContainer>
+            </VFlowContainer>
+        </CenterContainer>
+    )
+}