Eliminate all magic values

[nmay231]

Note

I am new to the library, so I might have missed something that solves this issue for me. I apologize if I missed something obvious.

Problem

While the title is a bit pretentious and maybe not even completely feasible, I feel it would be good to build an API that doesn't communicate through "magic" for hooking up event handlers and other plumbing.

class MyWidget(Widget):
    def compose(self) -> ComposeResult:
        yield Button("asdf", id="child")  # <-- magic value

    @on(Button.Pressed, "#child")  # <-- magic value
    def button_pressed(self):
        button = self.query_one("#child")  # <-- magic value

You can fix that with attributes, but it's clunky.

class MyWidget(Widget):
    BUTTON_ID = "child"
    def compose(self) -> ComposeResult:
        self.button = Button("asdf", id=self.BUTTON_ID)
        yield self.button

    @on(Button.Pressed, f"#{BUTTON_ID}")  # <-- What if I forget the '#' for the ID
    def button_pressed(self):
        button = self.button

There are also other similar issues like automatic message handler naming.

Possible solution

I propose a child() function. It allows the attributes to be defined in the class body so you have access to it there similar to @property and @[property_name].setter.

class MyWidget(Widget):
    button = child(Button)
    def compose(self) -> ComposeResult:
        yield self.button("asdf", id="child")

    @button.on(Button.Pressed)
    def button_pressed(self, button):
        # Use the parameter, or the following when outside an event handler
        button = self.button.widget

It also allows easy access to nested events.

modal = child(CustomModal)

@modal.confirm_button.on(Button.Pressed)
def handle_confirm(self, button):
    pass

Other Notes

I know that a lot of the API has been built to model web development (hence the blatant borrowing of CSS, event bubbling, etc.), but vanilla js web development has its issues which is part of why so many web frameworks exist. I think magic values make small projects easy to quickly develop, but makes it much harder to maintain in the future

One can argue the form of CSS that is present is also a "bag of magic", but I am unable to think of a solution without a cruddy css-in-js equivalent.

[willmcgugan]

Your suggestion would capture a subset of use cases. Bear in mind that you can handle events emitted from children or other sources, and handlers may handle events from multiple sources. It's also complicated by the fact that widgets can be far more dynamic than your example. There may be an arbitrary number of buttons depending on your input.

I'm not unsympathetic to wanting to making things play nice with static analysis, but UIs tend to be too dynamic to fully capture that way.

[nmay231]

My title is a bit exagerated :P I don't think you should deprecate these dynamic strategies of event-handling just for my idea. That's why I stuck with the API @child_button.on(Button.Pressed) to be consistent with what you have instead of a simpler @child_button.on_pressed.

I simply propose this as an alternative API. I don't need this exact form, but something like this would be beneficial.