Reactive doesn't seem to work at all

[kamenomagic]

import time
from textual.app import App
from textual.reactive import reactive
from textual.widgets import Header, Footer, Label


class MyApp(App):
    BINDINGS = [("t", "test", "Test")]

    name = reactive("default")

    def compose(self):
        yield Header()
        yield Label(self.name)
        yield Footer()

    def action_test(self):
        self.name = str(time.time())


app = MyApp()

if __name__ == "__main__":
    app.run()

I'm using version
textual = {extras = ["dev"], version = "^0.10.1"}

When I run this, the text shows "default". If I hit t, it does not update the name value. If I query_one and update the label, that works, but bypasses the whole point of reactive.

I've also tried instantiating it with Reactive instead, same result.

[nitzan-shaked]

I don't think it's supposed to work like that? You initialize the label once and that's it. You would need a Label subclass that has watch_name.

[willmcgugan]

Textual calls compose only once during the mount process. It's not quite equivalent to HTML.

You can react to a changing attribute with a watch method, and update any children accordingly. Here's an example...

import time
from textual.app import App
from textual.reactive import reactive
from textual.widgets import Header, Footer, Label


class MyApp(App):
    BINDINGS = [("t", "test", "Test")]

    name = reactive("default", init=False)

    def compose(self):
        yield Header()
        yield Label(self.name)
        yield Footer()

    def action_test(self):
        self.name = str(time.time())

    def watch_name(self, name: str) -> None:
        self.query_one(Label).update(name)


app = MyApp()

if __name__ == "__main__":
    app.run()

[nitzan-shaked]

Something like this:

import time
from textual.app import App
from textual.reactive import reactive
from textual.widgets import Header, Footer, Label


class MyLabel(Label):
    name = reactive("default")

    def watch_name(self):
        self.update(self.name)


class MyApp(App):
    BINDINGS = [("t", "test", "Test")]

    def compose(self):
        self.label = MyLabel()
        yield Header()
        yield self.label
        yield Footer()

    def action_test(self):
        self.label.name = str(time.time())


app = MyApp()

if __name__ == "__main__":
    app.run()

[kamenomagic]

oh ok. I had a similar thing working to that. The documentation might be slightly misleading then. Right at the top of https://textual.textualize.io/guide/reactivity/#reactive-attributes it says:
You can get and set these attributes in the same way as if you had assigned them in an __init__ method. For instance self.name = "Jessica", self.count += 1, or print(self.is_cool).
And furthermore, if I can't set the reactive property in this way, what makes it different from not using it at all, since I'm setting the value on the widget anyway; wouldn't that work for any label with a string?

The watch method seems useful, I'll probably use that. But the "Smart Refresh" ability seems totally indistinguishable from just setting the value. Example:

import time
from textual.app import App
from textual.widgets import Header, Footer, Label


class MyApp(App):
    BINDINGS = [("t", "test", "Test")]

    def compose(self):
        yield Header()
        yield Label("default")
        yield Footer()

    def action_test(self):
        self.query_one(Label).update(str(time.time()))


app = MyApp()

if __name__ == "__main__":
    app.run()

This doesn't use reactive at all. In that case, it seems like the smart refresh doesn't actually exist. (The other "superpowers" seem cool though and will work, mostly just curious now)

Thanks for the response, by the way

[kamenomagic]

Also found this on that same page, this seems pretty close to what I was going for; however it does use the render method. Is the render method called multiple times (on update etc.)?

from textual.app import App, ComposeResult
from textual.reactive import reactive
from textual.widget import Widget
from textual.widgets import Input


class Name(Widget):
    """Generates a greeting."""

    who = reactive("name")

    def render(self) -> str:
        return f"Hello, {self.who}!"


class WatchApp(App):
    CSS_PATH = "refresh01.css"

    def compose(self) -> ComposeResult:
        yield Input(placeholder="Enter your name")
        yield Name()

    def on_input_changed(self, event: Input.Changed) -> None:
        self.query_one(Name).who = event.value


if __name__ == "__main__":
    app = WatchApp()
    app.run()

[willmcgugan]

You can get and set these attributes in the same way as if you had assigned them in an init method. For instance self.name = "Jessica", self.count += 1, or print(self.is_cool).
And furthermore, if I can't set the reactive property in this way, what makes it different from not using it at all, since I'm setting the value on the widget anyway; wouldn't that work for any label with a string?

You may have assumed more superpowers than are implemented (or perhaps possible).

Setting a reactive attribute refreshes that object. But it won't automatically refresh child widgets that referenced the attribute. If you construct a child widget with self.name it is treated the same as any other variable.

Ok, I see you have figured it out already...

[kamenomagic]

That's super helpful actually to understand what the sentence means, thanks for all the help!

And yeah I think I've got a hang of it now. Love the library, may try to contribute at some point. Thanks!

[kamenomagic]

Ok this works pretty well.

import time
from textual.app import App
from textual.reactive import reactive
from textual.widget import Widget
from textual.widgets import Header, Footer


class Test(Widget):
    name = reactive("default")

    def render(self):
        return self.name


class MyApp(App):
    BINDINGS = [("t", "test", "Test")]

    def compose(self):
        self.test = Test()
        yield Header()
        yield self.test
        yield Footer()

    def action_test(self):
        self.test.name = str(time.time())


app = MyApp()

if __name__ == "__main__":
    app.run()

I sort of wish it worked with the compose method. But that's ok, I'm good to close the discussion knowing that render smartly follows a reactive value. I also like the prettiness of not having to query in this example.

Thanks again folks!