nuicpp/nui/nui-cpp

div{
    class_ = "my-class",
    id = "my-id",
    onClick = [](Nui::val event) { std::cout << "clicked\n"; },
    "change"_event = [](Nui::val event) { /* custom event */ },
    "data-foo"_attr = "bar",          // custom data attributes
    "value"_prop = "something",       // DOM properties
}(
    /* children - parentheses are NEVER omitted */
    span{}("child text"),
    text{"plain text content"}()      // use text{} for mixed text+children
)

#include <nui/event_system/observed_value.hpp>
 
Nui::Observed<std::string> label{"Hello"};
Nui::Observed<std::vector<std::string>> items;

#include <nui/event_system/listen.hpp>

// Basic: callback receives the new value by const-ref
Nui::listen(myObserved, [](std::string const& newValue) {
    Nui::WebApi::Console::log("changed to: " + newValue);
});
 
// Early-out: return false to automatically deregister after first fire
Nui::listen(myObserved, [](int val) -> bool {
    if (val == 42) return false;  // unregistered after this call
    return true;                  // keep listening
});
 
// shared_ptr overload: event is auto-removed when the Observed is destroyed
auto sharedObs = std::make_shared<Nui::Observed<int>>(0);
Nui::listen(sharedObs, [](int val) { /* ... */ });

// Must store the remover -- discarding it immediately removes the listener!
auto remover = Nui::smartListen(myObserved, [&otherObs](std::string const& newValue) {
    // Safe to modify other Observed values here:
    otherObs = "derived: " + newValue;
    Nui::globalEventContext.executeActiveEventsImmediately();  // flush if outside event handler
});

struct MyWidget::Implementation {
    Nui::Observed<std::string> query{};
    Nui::Observed<std::vector<std::string>> results{};
    Nui::ListenRemover<Nui::Observed<std::string>> queryListener;
 
    Implementation()
        : queryListener{Nui::smartListen(query, [this](std::string const& q) {
              // Kick off a fetch, update results, etc.
              results.assign({});
              Nui::globalEventContext.executeActiveEventsImmediately();
          })}
    {}
};

auto sharedObs = std::make_shared<Nui::Observed<int>>(0);
auto remover = Nui::smartListen(sharedObs, [](int val) {
    // callback fires only while sharedObs is alive
});

remover.removeEvent();   // detach now (also called by destructor)
remover.disarm();        // prevent destructor from removing (ownership transfer)

div{
    class_ = Nui::observe(label).generate([](std::string const& txt) {
        return fmt::format("active {}", txt);
    })
}()

div{
    style = Nui::observe(visible).generate([](bool v) {
        return fmt::format("display: {};", v ? "flex" : "none");
    })
}()

div{}(label)   // renders label's value as text, auto-updates

div{}(
    Nui::observe(label),
    [](std::string const& txt) -> Nui::ElementRenderer {
        return span{}(txt);
    }
)

div{}(
    Nui::range(items),
    [](long long /*index - must be long long, not auto*/, auto const& item) -> Nui::ElementRenderer {
        return span{}(item);
    }
)

div{}(
    Nui::range(items)
        .before(
            div{}("Header"),
            div{}("Subheader")
        )
        .after(
            div{}("Footer")
        ),
    [](long long i, auto const& item) -> Nui::ElementRenderer {
        return div{}(std::to_string(item));
    }
)

#include <nui/frontend/elements/nil.hpp>
 
div{}(
    Nui::observe(showBanner),
    [](bool show) -> Nui::ElementRenderer {
        if (!show)
            return Nui::nil();
        return div{class_ = "banner"}("Hello!");
    }
)

#include <nui/frontend/elements/fragment.hpp>
 
div{}(
    fragment(
        span{}("First"),
        span{}("Second"),
        span{}("Third")
    )
)

#include <nui/frontend/val_wrapper.hpp>   // Nui::ValWrapper base
#include <nui/frontend/api/mouse_event.hpp>

div{
    onClick = [](Nui::WebApi::MouseEvent event) {
        double x = event.clientX();
        double y = event.clientY();
        bool shifted = event.shiftKey();
        bool ctrl = event.ctrlKey();
        int btn = event.button();   // 0=left, 1=middle, 2=right
        // event.val() gives the raw Nui::val back if needed
    }
}()

onClick = [](Nui::val event) {
    auto target = event["target"];
    std::string value = target["value"].as<std::string>();
}

#include <nui/frontend/utility/val_conversion.hpp>

// Fundamental and string types
Nui::val n = Nui::convertToVal(42);
Nui::val s = Nui::convertToVal(std::string{"hello"});
 
// Vector becomes a JS array
std::vector<int> nums = {1, 2, 3};
Nui::val arr = Nui::convertToVal(nums);
 
// Map becomes a JS object
std::map<std::string, int> m = {{"x", 1}, {"y", 2}};
Nui::val obj = Nui::convertToVal(m);
 
// Boost-described struct becomes a JS object with matching property names
BOOST_DESCRIBE_STRUCT(MyPoint, (), (x, y))
struct MyPoint { double x; double y; };
Nui::val pt = Nui::convertToVal(MyPoint{1.0, 2.0}); // {x: 1.0, y: 2.0}
 
// Pass to JS function
Nui::val::global("someJsFunction").call<void>("call",
    Nui::val::global("window"), Nui::convertToVal(pt));
 
// std::monostate converts to JS undefined
Nui::val undef = Nui::convertToVal(std::monostate{});

Nui::val jsObj = /* ... from event or fetch response ... */;
 
std::string str;
Nui::convertFromVal(jsObj["name"], str);
 
std::vector<int> vec;
Nui::convertFromVal(jsObj["items"], vec);
 
// Boost-described struct: missing required members throw std::invalid_argument,
// optional members become std::nullopt if absent.
MyPoint pt;
Nui::convertFromVal(jsObj, pt);