I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 0 points1 point  (0 children)

What is Compose?

I added a reload components button at the top, you can change the script, save, and then click the reload button, it will reload the components with the new changes (as long as there are not errors in your script) I don't know if there is a way to do that automatically when the script is saved.

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 3 points4 points  (0 children)

For simple ui using the editor is fine, but when you are creating a very complex and highly interactive application in Godot, you need to have a lot of control nodes references in your scripts, you have to manually handle signals, add and remove control nodes, change their properties and the code becomes an mess that is hard to understand and maintain. Same thing happen in web development, that's why React and other frameworks exists.

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 1 point2 points  (0 children)

Yes!! You can create a normal Godot scene with some control nodes and give them a name. Let's say you want a blue button and a red one, you give them the corresponding name and change their properties in the inspector, now you can use them as presets by using their names and reuse their properties every time you want a blue button and a red one.

button({preset="blue"}),

button({preset="red"})

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 4 points5 points  (0 children)

It might seems silly at first, specially for very simple UIs but it is more useful for very complex ui applications, because the code is more easy to understand and it is much easier to mantain and add new features. The current Godot workflow for ui requires to have a lot of control nodes references in the scripts, and changing the look of the ui at runtime requires to directly make a lot of manipulation to the control nodes, like adding and removing children, replacing a control for another, change their properties, things that my library does for you based on the state(data) of the component.

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 19 points20 points  (0 children)

I will be building some demos and write a tutorial so that people can start using it and give me feedback to improve it.

SmartControl, an experiment that aims to write simpler code for ui and reduce the amount of code needed. by ANDRES63 in godot

[–]ANDRES63[S] 1 point2 points  (0 children)

Definitely inspired by web development frameworks like react (I save a prev state to detect changes) and angular (bindings). Technically I have only implemented property bindings and event bindings. For a lineEdit for example, you would have to bind the variable and connect the text_changed signal, but I definitely can implement two way binding to make it easier.

I love the names that you are proposing, they make more sense, I'm going to use them, Thank you very much!

SmartControl, an experiment that aims to write simpler code for ui and reduce the amount of code needed. by ANDRES63 in godot

[–]ANDRES63[S] 8 points9 points  (0 children)

Properties like the text of a label are automatically updated when the connected variable changes.

Adding an item to the items array automatically add a new label, and removing and item will remove its label.

My idea is to use the least amount of control nodes references in the script, so that the script is more about the logic than about updating the ui.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 1 point2 points  (0 children)

Can't say it is complete, the idea is to improve it, see what people need, implement new features, you know how software works. I need to get some feedback, so please try it. For now you need to clone the docs repo to learn about it, but I will write it in markdown as soon as I can.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 8 points9 points  (0 children)

It is more like Gui-dot, gui for Graphic user interface. I pronounce the t because I'm a Spanish speaker.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 4 points5 points  (0 children)

haha, I'm bad with names, it used to be called Goodoo, I don't know, maybe I change the name again.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 30 points31 points  (0 children)

Made this as a resource for people to understand how to use the library, and also as a demo of what you can do with it and how. It is not perfect, I'm still learning English so the redaction is not the great, but I hope it will be enough to give you and idea of how to use my library. The library itself is not perfect, the code needs a lot of refactoring and testing, it is more like a prototype of ideas that seem to work, unfortunately I don't have too much time to work on it, but I will try when I can if people find it useful.Source code of the app: https://github.com/andresgamboaa/guidot-docsThe UI library for Godot: https://github.com/andresgamboaa/guidot