Lifting elements into components

[mavam]

I wonder what's the best practice for lifting elements into components. I have a helper function that works like this, but feels like this is (1) either an anti-pattern, or (2) there's a native way for this already.

/// Lifts an FTXUI element into a component.
template <class T>
auto component(T x) -> ftxui::Component {
  return ftxui::Renderer([x = std::move(x)]() {
    return x;
  });
}

Any guidance would be appreciated.

[ArthurSonzogni]

Hello,
You are free to use what works for you.

My preference is making a class deriving from ComponentBase. This way, we don't make a deeply nested component. Only one:

Component MakeOne() {
  class Impl : public ComponentBase {
    int counter_up = 0;
    int counter_down = 0;

    Element Render() final {
      return vbox({
          text("counter_up = " + std::to_string(counter_up)),
          text("counter_down = " + std::to_string(counter_down)),
      });
    }

    bool OnEvent(Event event) final {
      if (event == Event::ArrowUp) {
        counter_up++;
        return true;
      }

      if (event == Event::ArrowDown) {
        counter_down++;
        return true;
      }

      return true;
    }
  };

  return Make<Impl>();
}

---

Renderer() shorthand can be used if one wants something quick and only need to override the Render function.

CatchEvent() is similar, but for the OnEvent function.

[mavam]

I see, so you always prefer classes. This makes sense for stateful components.

I thought there might be an obvious utility function when you already have a Element given. Rewriting this without Renderer in your pattern would be:

Component MakeOne(Element e) {
  class Impl : public ComponentBase {
  public:
    explicit Impl(Element e) : element_{std::move(e)} {
    }

    Element Render() final {
      return element_;
    }

  private:
    Element element_;
  };

  return Make<Impl>(std::move(e));
}