Supporting JSX-like reusable nodes

[1998marcom]

I have some experience with React and JSX and I really like their syntax for writing UI components/nodes.

I have written a python script that can transpile from JSX-like code to GDScript, at least for simple cases.
You can find it on my gitlab.

Example

JSX-like syntax

var _content_container := HFlowContainer.new()
var panel_title := "Panel Title"

func _ready():
    GDX_ADD(<VBoxContainer>
        <HBoxContainer>
            <Label text=panel_title/>
            <Button text="Close" pressed.connect(queue_free)/>
        </HBoxContainer>
        <MarginContainer>
            _content_container
        </MarginContainer>
    </VBoxContainer>)

Equivalent-ish GDScript code

var _content_container := HFlowContainer.new()
var panel_title := "Panel Title"

func _ready():
    var gdx_block1_VBoxContainer0 = VBoxContainer.new()

    var gdx_block1_HBoxContainer0 = HBoxContainer.new()

    var gdx_block1_Label0 = Label.new()
    gdx_block1_Label0.text=panel_title
    gdx_block1_HBoxContainer0.add_child(gdx_block1_Label0, true)

    var gdx_block1_Button0 = Button.new()
    gdx_block1_Button0.text="Close"
    gdx_block1_Button0.pressed.connect(queue_free)
    gdx_block1_HBoxContainer0.add_child(gdx_block1_Button0, true)

    gdx_block1_VBoxContainer0.add_child(gdx_block1_HBoxContainer0, true)

    var gdx_block1_MarginContainer0 = MarginContainer.new()
    gdx_block1_MarginContainer0.add_child(_content_container, true)
    gdx_block1_VBoxContainer0.add_child(gdx_block1_MarginContainer0, true)
    add_child(gdx_block1_VBoxContainer0, true)

Positive aspects of a similar workflow

The actual GDScript code output of the script tests whether parents' nodes have the "add_gdx_child" method, and uses that instead of the "add_child" method:

if gdx_block1_HBoxContainer0.has_method("add_gdx_child"):
    gdx_block1_HBoxContainer0.add_gdx_child(gdx_block1_Button0)
else:
    gdx_block1_HBoxContainer0.add_child(gdx_block1_Button0, true)

This has the nice effect of allowing one to customize how children get added to a custom class.

Supporting a JSX-like syntax would most likely also mean solving the issue of allowing add_child overrides (see, for example, my own question here).

Example code would solve my issue as of now:

GDX_ADD(<PanelMarginContainer>my_desired_child</PanelMarginContainer>)

What is discussed here is kind-of related, as they are trying to build reusable containers. In GDX their problem could be tackled with:

<CustomContainer header=my_instanced_header footer=my_instanced_footer>
    instanced_main_content
</CustomContainer>

Just like they could solve it now with GDScript by making the scenes at runtime instead of making them at compile-time with the editor.

Downsides

Human work-hours needed for proper integration with Godot and somewhat more processing time consumed, as node trees aren't created at compile time but at runtime.

Implementation

This could be a plugin that adds support for a different format of source files (say. for example, *.gdx), transpiles those sources continuously, gets the errors from the GDScript code, and puts them back at the right line in the gdx code editor.

Or it could be some enhancement directly for GDScript.

Your thoughts

Would you like to use a syntax like this? What are your thoughts?

P:S. Thanks to all contributors for all the incredible work on Godot.

[bever1337]

I think this is a great proposal. In both frameworks, it is poor form to query the resulting tree, but React gives developers confidence in the shape of their DOM tree. Ex, I returned a <p> during render so I know the DOM contains a paragraph.

Godot nodes are flexible with their children - any node can be attached to any other node from the context of any other node! In react, all children are explicit. JSX clarifies which Nodes expect children and how children are used.

I could see two other approaches fitting in with godot:

• xslt transforms - given a node tree, and a desired transformation, apply changes everywhere possible
• jquery - quickly and safely query and edit nodes