feat: add MutationObserver support. (#508)

Fixed #405

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

---------

Author: andycall

bridge/CMakeLists.txt

@@ -248,6 +248,7 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
     bindings/qjs/union_base.cc
     # Core sources
     core/executing_context.cc
+    core/script_forbidden_scope.cc
     core/script_state.cc
     core/page.cc
     core/dart_methods.cc
@@ -287,6 +288,7 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
     core/binding_object.cc
     core/dom/node.cc
     core/dom/node_list.cc
+    core/dom/static_node_list.cc
     core/dom/node_traversal.cc
     core/dom/live_node_list_base.cc
     core/dom/character_data.cc
@@ -305,6 +307,11 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
     core/dom/document_fragment.cc
     core/dom/child_node_list.cc
     core/dom/empty_node_list.cc
+    core/dom/mutation_observer.cc
+    core/dom/mutation_observer_registration.cc
+    core/dom/mutation_observer_interest_group.cc
+    core/dom/mutation_record.cc
+    core/dom/child_list_mutation_scope.cc
     core/dom/container_node.cc
     core/html/custom/widget_element.cc
     core/events/error_event.cc
@@ -407,6 +414,10 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
     out/qjs_touch.cc
     out/qjs_touch_init.cc
     out/qjs_touch_list.cc
+    out/qjs_mutation_record.cc
+    out/qjs_mutation_observer.cc
+    out/qjs_mutation_observer_init.cc
+    out/qjs_mutation_observer_registration.cc
     out/qjs_touch_event.cc
     out/qjs_touch_event_init.cc
     out/qjs_pointer_event.cc
@@ -444,6 +455,7 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
     out/qjs_node_list.cc
     out/event_type_names.cc
     out/built_in_string.cc
+    out/mutation_record_types.cc
     out/binding_call_methods.cc
     out/qjs_scroll_options.cc
     out/qjs_scroll_to_options.cc

bridge/bindings/qjs/binding_initializer.cc

@@ -61,6 +61,9 @@
 #include "qjs_message_event.h"
 #include "qjs_module_manager.h"
 #include "qjs_mouse_event.h"
+#include "qjs_mutation_observer.h"
+#include "qjs_mutation_observer_registration.h"
+#include "qjs_mutation_record.h"
 #include "qjs_node.h"
 #include "qjs_node_list.h"
 #include "qjs_performance.h"
@@ -166,6 +169,9 @@ void InstallBindings(ExecutingContext* context) {
   QJSTouch::Install(context);
   QJSTouchList::Install(context);
   QJSDOMStringMap::Install(context);
+  QJSMutationObserver::Install(context);
+  QJSMutationRecord::Install(context);
+  QJSMutationObserverRegistration::Install(context);
   QJSDOMTokenList::Install(context);
   QJSPerformance::Install(context);
   QJSPerformanceEntry::Install(context);

bridge/bindings/qjs/converter_impl.h

@@ -237,6 +237,10 @@ struct Converter<IDLOptional<IDLDOMString>> : public ConverterBase<IDLDOMString>
   }
   static JSValue ToValue(JSContext* ctx, const std::string& str) { return Converter<IDLDOMString>::ToValue(ctx, str); }
   static JSValue ToValue(JSContext* ctx, typename Converter<IDLDOMString>::ImplType value) {
+    if (value == AtomicString::Null()) {
+      return JS_UNDEFINED;
+    }
+
     return Converter<IDLDOMString>::ToValue(ctx, std::move(value));
   }
 };
@@ -250,7 +254,12 @@ struct Converter<IDLNullable<IDLDOMString>> : public ConverterBase<IDLDOMString>
   }
 
   static JSValue ToValue(JSContext* ctx, const std::string& value) { return AtomicString(ctx, value).ToQuickJS(ctx); }
-  static JSValue ToValue(JSContext* ctx, const AtomicString& value) { return value.ToQuickJS(ctx); }
+  static JSValue ToValue(JSContext* ctx, const AtomicString& value) {
+    if (value == AtomicString::Null()) {
+      return JS_NULL;
+    }
+    return value.ToQuickJS(ctx);
+  }
 };
 
 template <>
@@ -347,6 +356,8 @@ struct Converter<IDLOptional<IDLSequence<T>>> : public ConverterBase<IDLSequence
 
     return Converter<IDLSequence<T>>::FromValue(ctx, value, exception_state);
   }
+
+  static JSValue ToValue(JSContext* ctx, ImplType value) { return Converter<IDLSequence<T>>::ToValue(ctx, value); }
 };
 
 template <typename T>

bridge/bindings/qjs/cppgc/member.h

@@ -10,6 +10,7 @@
 #include "bindings/qjs/qjs_engine_patch.h"
 #include "bindings/qjs/script_value.h"
 #include "bindings/qjs/script_wrappable.h"
+#include "core/executing_context.h"
 #include "foundation/casting.h"
 #include "mutation_scope.h"
 
@@ -25,24 +26,22 @@ class ScriptWrappable;
 template <typename T, typename = std::is_base_of<ScriptWrappable, T>>
 class Member {
  public:
+  struct KeyHasher {
+    std::size_t operator()(const Member& k) const { return reinterpret_cast<std::size_t>(k.raw_); }
+  };
+
   Member() = default;
   Member(T* ptr) { SetRaw(ptr); }
   Member(const Member<T>& other) {
     raw_ = other.raw_;
     runtime_ = other.runtime_;
     js_object_ptr_ = other.js_object_ptr_;
+    ((JSRefCountHeader*)other.js_object_ptr_)->ref_count++;
   }
   ~Member() {
     if (raw_ != nullptr) {
       assert(runtime_ != nullptr);
-      // There are two ways to free the member values:
-      //  One is by GC marking and sweep stage.
-      //  Two is by free directly when running out of function body.
-      // We detect the GC phase to handle case two, and free our members by hand(call JS_FreeValueRT directly).
-      JSGCPhaseEnum phase = JS_GetEnginePhase(runtime_);
-      if (phase == JS_GC_PHASE_DECREF || phase == JS_GC_PHASE_REMOVE_CYCLES) {
-        JS_FreeValueRT(runtime_, JS_MKPTR(JS_TAG_OBJECT, js_object_ptr_));
-      }
+      JS_FreeValueRT(runtime_, JS_MKPTR(JS_TAG_OBJECT, js_object_ptr_));
     }
   };
 
@@ -70,6 +69,7 @@ class Member {
     raw_ = other.raw_;
     runtime_ = other.runtime_;
     js_object_ptr_ = other.js_object_ptr_;
+    ((JSRefCountHeader*)other.js_object_ptr_)->ref_count++;
     return *this;
   }
   // Move assignment.
@@ -94,6 +94,12 @@ class Member {
   T* operator->() const { return Get(); }
   T& operator*() const { return *Get(); }
 
+  T* Release() {
+    T* result = Get();
+    Clear();
+    return result;
+  }
+
  private:
   void SetRaw(T* p) {
     if (p != nullptr) {

bridge/bindings/qjs/heap_vector.h

@@ -12,19 +12,27 @@ class HeapVector final {
  public:
   HeapVector() = default;
 
-  void Trace(GCVisitor* visitor) const;
+  void TraceValue(GCVisitor* visitor) const;
+  void TraceMember(GCVisitor* visitor) const;
 
  private:
   std::vector<V> entries_;
 };
 
 template <typename V>
-void HeapVector<V>::Trace(GCVisitor* visitor) const {
+void HeapVector<V>::TraceValue(GCVisitor* visitor) const {
   for (auto& item : entries_) {
     visitor->TraceValue(item);
   }
 }
 
+template <typename V>
+void HeapVector<V>::TraceMember(GCVisitor* visitor) const {
+  for (auto& item : entries_) {
+    visitor->TraceMember(item);
+  }
+}
+
 }  // namespace webf
 
 #endif  // BRIDGE_BINDINGS_QJS_HEAP_VECTOR_H_

bridge/bindings/qjs/qjs_function.cc

@@ -60,7 +60,7 @@ ScriptValue QJSFunction::Invoke(JSContext* ctx, const ScriptValue& this_val, int
   JSValue returnValue = JS_Call(ctx, function_, this_val.QJSValue(), argc, argv);
 
   ExecutingContext* context = ExecutingContext::From(ctx);
-  context->DrainPendingPromiseJobs();
+  context->DrainMicrotasks();
 
   // Free the previous duplicated function.
   JS_FreeValue(ctx, function_);

bridge/bindings/qjs/script_promise_resolver.cc

@@ -54,7 +54,7 @@ void ScriptPromiseResolver::ResolveOrRejectImmediately(JSValue value) {
       JS_FreeValue(context_->ctx(), return_value);
     }
   }
-  context_->DrainPendingPromiseJobs();
+  context_->DrainMicrotasks();
 }
 
 }  // namespace webf

bridge/bindings/qjs/script_wrappable.h

@@ -8,7 +8,6 @@
 
 #include <quickjs/quickjs.h>
 #include "bindings/qjs/cppgc/garbage_collected.h"
-#include "core/executing_context.h"
 #include "foundation/macros.h"
 #include "wrapper_type_info.h"
 

bridge/bindings/qjs/wrapper_type_info.h

@@ -70,6 +70,9 @@ enum {
   JS_CLASS_HTML_LINK_ELEMENT,
   JS_CLASS_HTML_CANVAS_ELEMENT,
   JS_CLASS_IMAGE,
+  JS_CLASS_MUTATION_OBSERVER,
+  JS_CLASS_MUTATION_RECORD,
+  JS_CLASS_MUTATION_OBSERVER_REGISTRATION,
   JS_CLASS_CANVAS_RENDERING_CONTEXT,
   JS_CLASS_CANVAS_RENDERING_CONTEXT_2_D,
   JS_CLASS_CANVAS_GRADIENT,

bridge/core/binding_object.cc

@@ -8,6 +8,7 @@
 #include "bindings/qjs/exception_state.h"
 #include "bindings/qjs/script_promise_resolver.h"
 #include "core/dom/events/event_target.h"
+#include "core/dom/mutation_observer_interest_group.h"
 #include "core/executing_context.h"
 #include "foundation/native_string.h"
 #include "foundation/native_value_converter.h"
@@ -123,6 +124,17 @@ NativeValue BindingObject::SetBindingProperty(const AtomicString& prop,
         "Can not set binding property on BindingObject, dart binding object had been disposed");
     return Native_NewNull();
   }
+
+  if (auto element = const_cast<WidgetElement*>(DynamicTo<WidgetElement>(this))) {
+    if (std::shared_ptr<MutationObserverInterestGroup> recipients =
+            MutationObserverInterestGroup::CreateForAttributesMutation(*element, prop)) {
+      NativeValue old_native_value = GetBindingProperty(prop, exception_state);
+      ScriptValue old_value = ScriptValue(ctx(), old_native_value);
+      recipients->EnqueueMutationRecord(
+          MutationRecord::CreateAttributes(element, prop, AtomicString::Null(), old_value.ToString(ctx())));
+    }
+  }
+
   GetExecutingContext()->FlushUICommand();
   const NativeValue argv[] = {Native_NewString(prop.ToNativeString(GetExecutingContext()->ctx()).release()), value};
   return InvokeBindingMethod(BindingMethodCallOperations::kSetProperty, 2, argv, exception_state);