diff --git a/packages/example/src/TestUi1Component.tsx b/packages/example/src/TestUi1Component.tsx index 71ca6be..ef31053 100644 --- a/packages/example/src/TestUi1Component.tsx +++ b/packages/example/src/TestUi1Component.tsx @@ -1,17 +1,25 @@ -import { Control } from "godot" -import { Node } from "react-godot-renderer" +import { Control, Label } from "godot" +import { Component } from "react-godot-renderer" +const ControlFC = Component.make(Control) +const LabelFC = Component.make(Label) + export function TestUi1Component() { return ( - + anchor_top={0} + anchor_right={0} + anchor_bottom={0} + > + + + + ) } - -Node({ - class: Control, - -}) diff --git a/packages/react-godot-renderer/src/Component.ts b/packages/react-godot-renderer/src/Component.ts new file mode 100644 index 0000000..5b6927f --- /dev/null +++ b/packages/react-godot-renderer/src/Component.ts @@ -0,0 +1,15 @@ +import type * as Godot from "godot" +import * as React from "react" +import type * as JSX from "./JSX.js" + + +export type Props = JSX.PropsFromInstance +export type Component = React.FunctionComponent> + +export const make = ( + class_: new (...args: any[]) => T +): Component => { + const f = (props: Props) => React.createElement("element", { ...props, class: class_ }) + f.displayName = class_.name + return f +} diff --git a/packages/react-godot-renderer/src/JSX.ts b/packages/react-godot-renderer/src/JSX.ts index 1d397d2..6a2db2d 100644 --- a/packages/react-godot-renderer/src/JSX.ts +++ b/packages/react-godot-renderer/src/JSX.ts @@ -17,7 +17,7 @@ export type GodotIntrinsicElements = { } export type PropsFromInstance = { - // biome-ignore lint/complexity/noBannedTypes: it's completely fine + // biome-ignore lint/complexity/noBannedTypes: using Function here is completely fine [K in keyof T as T[K] extends Function ? never : K]?: T[K] } @@ -25,6 +25,10 @@ declare global { namespace React { namespace JSX { interface IntrinsicElements extends GodotIntrinsicElements {} + interface IntrinsicAttributes { + children?: React.ReactNode + name?: string + } } } } diff --git a/packages/react-godot-renderer/src/Node.ts b/packages/react-godot-renderer/src/Node.ts deleted file mode 100644 index 097b343..0000000 --- a/packages/react-godot-renderer/src/Node.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type * as Godot from "godot" -import * as React from "react" -import type * as JSX from "./JSX.js" - - -export type NodeProps = { - readonly class: new (...args: any[]) => T -} & JSX.PropsFromInstance> - -export function Node( - props: NodeProps -): React.JSX.Element { - return React.createElement("element", props) -} diff --git a/packages/react-godot-renderer/src/index.ts b/packages/react-godot-renderer/src/index.ts index b420194..ac10b65 100644 --- a/packages/react-godot-renderer/src/index.ts +++ b/packages/react-godot-renderer/src/index.ts @@ -1,4 +1,4 @@ +export * as Component from "./Component.js" export * as JSX from "./JSX.js" -export * from "./Node.js" export * as Reconciler from "./Reconciler.js" export * as Renderer from "./Renderer.js"