Test Component.fromScene

packages/example/src/TestUi2Component.tsx

@@ -1,14 +1,13 @@
 import Godot from "godot"
 import { useState } from "react"
 import { Component } from "react-godot-renderer"
-import TestUi1 from "./TestUi1"
 
 
 const HFlowContainer = Component.make(Godot.HFlowContainer)
 const VFlowContainer = Component.make(Godot.VFlowContainer)
 const Label = Component.make(Godot.Label)
 const CheckBox = Component.make(Godot.CheckBox)
-const TestUi1FC = Component.make(TestUi1)
+const TestUi1FC = Component.fromScene("res://src/TestUi1.tscn")
 
 export function TestUi2Component() {
     const [show, setShow] = useState(false)

packages/react-godot-renderer/src/Component.ts

@@ -31,7 +31,7 @@ export const make = <T extends Godot.Node<Godot.NodePathMap>>(
     class_: new (...args: any[]) => T
 ): Component<T> => Object.setPrototypeOf(
     Object.assign(
-        (props: Props<T>) => React.createElement("element", { ...props, class: class_ }),
+        (props: Props<T>) => React.createElement("node", { ...props, class: class_ }),
         { displayName: class_.name },
     ),
     Prototype,
@@ -44,11 +44,11 @@ export declare namespace fromScene {
 }
 
 export const fromScene = <A extends fromScene.SceneNames>(
-    name: A
+    path: A
 ): Component<Godot.ResourceTypes[A] extends Godot.PackedScene<infer T> ? T : never> => Object.setPrototypeOf(
     Object.assign(
-        (props: Props<Godot.ResourceTypes[A]>) => React.createElement("element", { ...props }),
+        (props: Props<Godot.ResourceTypes[A]>) => React.createElement("scene", { ...props, path }),
-        { displayName: name },
+        { displayName: path },
     ),
     Prototype,
 )

packages/react-godot-renderer/src/Reconciler.ts

@@ -1,6 +1,6 @@
-import { ClassDB, Node, type NodePathMap } from "godot"
+import { Node, type NodePathMap, type PackedScene, ResourceLoader } from "godot"
 import ReactReconciler, { type HostConfig } from "react-reconciler"
-import { camelToSnake, hasProperty, snakeToPascal } from "./utils.js"
+import { hasProperty } from "./utils.js"
 
 
 const DefaultEventPriority = 32
@@ -29,16 +29,24 @@ export const make = () => {
 
         createInstance(type, props) {
             let instance: Node
-            if (type === "element") {
+            if (type === "node") {
                 if (!hasProperty(props, "class"))
-                    throw new Error("Property 'class' required when using the 'element' intrinsic type")
+                    throw new Error("Property 'class' required when using the 'node' intrinsic type")
                 instance = new (props.class as any)()
             }
+            else if (type === "scene") {
+                if (!hasProperty(props, "path"))
+                    throw new Error("Property 'path' required when using the 'scene' intrinsic type")
+                if (typeof props.path !== "string")
+                    throw new Error("Property 'path' is not a string")
+                instance = (ResourceLoader.load(props.path) as PackedScene<Node<NodePathMap>>).instantiate()
+            }
             else {
-                const className = snakeToPascal(camelToSnake(type))
+                // const className = snakeToPascal(camelToSnake(type))
-                if (!ClassDB.class_exists(className))
+                // if (!ClassDB.class_exists(className))
-                    throw new Error(`Class is invalid: '${className}' (declared as '${type}') is not a valid engine or GDExtension class`)
+                //     throw new Error(`Class is invalid: '${className}' (declared as '${type}') is not a valid engine or GDExtension class`)
-                instance = ClassDB.instantiate(className)
+                // instance = ClassDB.instantiate(className)
+                throw new Error(`Unsupported JSX type: '${ type }'`)
             }
 
             if (!(instance instanceof Node))