refactor: threading logic of breeze-ui and js

The concept is that any js callback should be run in js thread, and any dom operation should be locked with rt_lock. We post the task to js thread in detached mode, and add the lock to dom operation apis, then it would be safe to operate dom anywhere in js as no js code would block breeze-ui update/render anymore.

Author: std-microblock

dependencies/breeze-ui.lua

@@ -5,7 +5,7 @@ package("breeze-glfw")
 
 package("breeze-ui")
     add_urls("https://github.com/std-microblock/breeze-ui.git")
-    add_versions("2025.10.06", "2c98b78472a1e493a9f0a961b472b4e0a8601e55")
+    add_versions("2025.10.07", "f39fa973d50499825535cddac9ad6202c9239824")
     add_deps("breeze-glfw", "nanovg", "glad", "nanosvg")
     add_configs("shared", {description = "Build shared library.", default = false, type = "boolean", readonly = true})
 

src/shell/script/binding_types.cc

@@ -467,11 +467,10 @@ void network::get_async(std::string url,
                         std::function<void(std::string)> callback,
                         std::function<void(std::string)> error_callback) {
     std::thread([url, callback, error_callback,
-                 &lock = ui::render_target::current->rt_lock]() {
+                 &ctx = *qjs::Context::current]() {
         try {
             auto res = get(url);
-            std::lock_guard l(lock);
-            callback(res);
+            ctx.enqueueJob([=]() { callback(res); });
         } catch (std::exception &e) {
             std::cerr << "Error in network::get_async: " << e.what()
                       << std::endl;
@@ -484,11 +483,10 @@ void network::post_async(std::string url, std::string data,
                          std::function<void(std::string)> callback,
                          std::function<void(std::string)> error_callback) {
     std::thread([url, data, callback, error_callback,
-                 &lock = ui::render_target::current->rt_lock]() {
+                 &ctx = *qjs::Context::current]() {
         try {
             auto res = post(url, data);
-            std::lock_guard l(lock);
-            callback(res);
+            ctx.enqueueJob([=]() { callback(res); });
         } catch (std::exception &e) {
             std::cerr << "Error in network::post_async: " << e.what()
                       << std::endl;
@@ -544,11 +542,10 @@ subproc_result_data subproc::run(std::string cmd) {
 }
 void subproc::run_async(std::string cmd,
                         std::function<void(subproc_result_data)> callback) {
-    std::thread([cmd, callback, &lock = ui::render_target::current->rt_lock]() {
+    std::thread([cmd, callback, &ctx = *qjs::Context::current]() {
         try {
             auto res = run(cmd);
-            std::lock_guard l(lock);
-            callback(res);
+            ctx.enqueueJob([=]() { callback(res); });
         } catch (std::exception &e) {
             std::cerr << "Error in subproc::run_async: " << e.what()
                       << std::endl;
@@ -640,12 +637,12 @@ void network::download_async(std::string url, std::string path,
                              std::function<void(std::string)> error_callback) {
 
     std::thread([url, path, callback, error_callback,
-                 &lock = ui::render_target::current->rt_lock]() {
+                 &ctx = *qjs::Context::current]() {
         try {
             auto data = get(url);
             fs::write_binary(path,
                              std::vector<uint8_t>(data.begin(), data.end()));
-            std::lock_guard l(lock);
+            ctx.enqueueJob([=]() { callback(); });
             callback();
         } catch (std::exception &e) {
             error_callback(e.what());
@@ -822,11 +819,10 @@ void subproc::open(std::string path, std::string args) {
 void subproc::open_async(std::string path, std::string args,
                          std::function<void()> callback) {
     std::thread([path, callback, args,
-                 &lock = ui::render_target::current->rt_lock]() {
+                 &ctx = *qjs::Context::current]() {
         try {
             open(path, args);
-            std::lock_guard l(lock);
-            callback();
+            ctx.enqueueJob([=]() { callback(); });
         } catch (std::exception &e) {
             std::cerr << "Error in subproc::open_async: " << e.what()
                       << std::endl;
@@ -981,7 +977,7 @@ std::string infra::btoa(std::string str) {
 
 void fs::copy_shfile(std::string src_path, std::string dest_path,
                      std::function<void(bool, std::string)> callback) {
-    std::thread([=, &lock = ui::render_target::current->rt_lock] {
+    std::thread([=, &ctx = *qjs::Context::current] {
         SHFILEOPSTRUCTW FileOp = {GetForegroundWindow()};
         std::wstring wsrc = utf8_to_wstring(src_path);
         std::wstring wdest = utf8_to_wstring(dest_path);
@@ -1026,14 +1022,14 @@ void fs::copy_shfile(std::string src_path, std::string dest_path,
         }
 
         std::string utf8_path = wstring_to_utf8(final_path);
-        std::lock_guard l(lock);
-        callback(success, utf8_path);
+
+        ctx.enqueueJob([=]() { callback(success, utf8_path); });
     }).detach();
 }
 
 void fs::move_shfile(std::string src_path, std::string dest_path,
                      std::function<void(bool)> callback) {
-    std::thread([=, &lock = ui::render_target::current->rt_lock] {
+    std::thread([=, &ctx = *qjs::Context::current] {
         SHFILEOPSTRUCTW FileOp = {GetForegroundWindow()};
         std::wstring wsrc = utf8_to_wstring(src_path);
         std::wstring wdest = utf8_to_wstring(dest_path);
@@ -1043,8 +1039,7 @@ void fs::move_shfile(std::string src_path, std::string dest_path,
         FileOp.pTo = wdest.c_str();
 
         auto res = SHFileOperationW(&FileOp);
-        std::lock_guard l(lock);
-        callback(res == 0);
+        ctx.enqueueJob([=]() { callback(res == 0); });
     }).detach();
 }
 size_t win32::load_file_icon(std::string path) {

src/shell/script/binding_types_breeze_ui.cc

@@ -23,6 +23,7 @@ namespace mb_shell::js {
         auto widget = std::dynamic_pointer_cast<widget_type>($widget);         \
         if (!widget)                                                           \
             return;                                                            \
+        auto lock = $rt_lock();                                                \
         widget->prop_name->animate_to(value);                                  \
     }
 
@@ -38,6 +39,7 @@ namespace mb_shell::js {
         auto widget = std::dynamic_pointer_cast<widget_type>($widget);         \
         if (!widget)                                                           \
             return;                                                            \
+        auto lock = $rt_lock();                                                \
         widget->prop_name = value;                                             \
     }
 
@@ -53,6 +55,7 @@ namespace mb_shell::js {
         auto widget = std::dynamic_pointer_cast<widget_type>($widget);         \
         if (!widget)                                                           \
             return;                                                            \
+        auto lock = $rt_lock();                                                \
         widget->prop_name = callback;                                          \
     }
 
@@ -93,6 +96,7 @@ namespace mb_shell::js {
         auto widget = std::dynamic_pointer_cast<widget_type>($widget);         \
         if (!widget || !paint)                                                 \
             return;                                                            \
+        auto lock = $rt_lock();                                                \
         widget->prop_name = paint->$paint;                                     \
     }
 
@@ -119,6 +123,7 @@ void breeze_ui::js_text_widget::set_text(std::string text) {
     auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
     if (!text_widget)
         return;
+    auto lock = $rt_lock();
     text_widget->text = text;
     text_widget->needs_repaint = true;
 }
@@ -134,6 +139,7 @@ void breeze_ui::js_text_widget::set_font_size(int size) {
     auto text_widget = std::dynamic_pointer_cast<ui::text_widget>($widget);
     if (!text_widget)
         return;
+    auto lock = $rt_lock();
     text_widget->font_size = size;
     text_widget->needs_repaint = true;
 }
@@ -163,7 +169,11 @@ void breeze_ui::js_text_widget::set_color(
 
 void breeze_ui::js_widget::append_child_after(std::shared_ptr<js_widget> child,
                                               int after_index) {
+    if (!$widget)
+        return;
+    auto lock = $rt_lock();
     if (child && child->$widget) {
+        child->$widget->owner_rt = $widget->owner_rt;
         $widget->children_dirty = true;
         $widget->needs_repaint = true;
         if (after_index < 0) {
@@ -186,8 +196,9 @@ void breeze_ui::js_widget::prepend_child(std::shared_ptr<js_widget> child) {
 void breeze_ui::js_widget::remove_child(std::shared_ptr<js_widget> child) {
     if (!$widget)
         return;
-
+    auto lock = $rt_lock();
     if (child && child->$widget) {
+        child->$widget->owner_rt = nullptr;
         auto it = std::find($widget->children.begin(), $widget->children.end(),
                             child->$widget);
         if (it != $widget->children.end()) {
@@ -306,40 +317,40 @@ struct widget_js_base : public ui::widget_flex {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_update]() mutable {
                         callback(ctx);
-                    });
+                    }, true);
             }
 
             if (ctx.hovered(this) && ctx.mouse_clicked && on_click) {
                 ctx.rt.post_loop_thread_task(
-                    [callback = this->on_click]() mutable { callback(0); });
+                    [callback = this->on_click]() mutable { callback(0); }, true);
             }
 
             if (ctx.hovered(this) && !previous_hovered && on_mouse_enter) {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_mouse_enter]() mutable {
                         callback();
-                    });
+                    }, true);
             } else if (!ctx.hovered(this) && previous_hovered &&
                        on_mouse_leave) {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_mouse_leave]() mutable {
                         callback();
-                    });
+                    }, true);
             }
 
             previous_hovered = ctx.hovered(this);
             if (ctx.mouse_down_on(this) && on_mouse_down) {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_mouse_down]() mutable {
                         callback();
-                    });
+                    }, true);
             }
 
             if (ctx.mouse_up && on_mouse_up) {
                 ctx.rt.post_loop_thread_task(
                     [=, callback = this->on_mouse_up]() mutable {
                         callback();
-                    });
+                    }, true);
             }
 
             if (ctx.mouse_x != prev_mouse_x || ctx.mouse_y != prev_mouse_y) {
@@ -593,4 +604,12 @@ void breeze_ui::js_widget::set_animation(std::string variable_name,
 #undef IMPL_COLOR_PROP
 #undef IMPL_PAINT_PROP
 
+std::optional<std::unique_lock<std::recursive_mutex>>
+breeze_ui::js_widget::$rt_lock() {
+    if ($widget && $widget->owner_rt) {
+        return std::optional<std::unique_lock<std::recursive_mutex>>{
+            std::in_place, $widget->owner_rt->rt_lock};
+    }
+    return std::nullopt;
+}
 } // namespace mb_shell::js

src/shell/script/binding_types_breeze_ui.h

@@ -1,6 +1,7 @@
 #pragma once
 #include <functional>
 #include <memory>
+#include <mutex>
 #include <optional>
 #include <string>
 #include <tuple>
@@ -28,6 +29,8 @@ struct breeze_ui {
         js_widget(std::shared_ptr<ui::widget> widget) : $widget(widget) {}
         virtual ~js_widget() = default;
 
+        std::optional<std::unique_lock<std::recursive_mutex>> $rt_lock();
+
         std::vector<std::shared_ptr<js_widget>> children() const;
         void append_child(std::shared_ptr<js_widget> child);
         void prepend_child(std::shared_ptr<js_widget> child);