@salve-software/react-native-nitro-jsdom 1.0.0

package/cpp/quickjs/bindings/FetchBindings.cpp

@@ -0,0 +1,347 @@
+#include "FetchBindings.hpp"
+#include "../DOMBindingsInternal.hpp"
+#include "../QuickJSRuntime.hpp"
+#include <cstring>
+#include <optional>
+#include <string>
+
+namespace margelo::nitro::nitrojsdom {
+
+namespace {
+
+JSValue js_fetch_native(JSContext* ctx, JSValue, int argc, JSValue* argv) {
+  auto* rctx = get_ctx(ctx);
+  if (!rctx || !rctx->fetch_callback) {
+    JSValue result = JS_NewObject(ctx);
+    JS_SetPropertyStr(ctx, result, "error", JS_NewString(ctx, "fetch is not available: no onFetch handler configured"));
+    return result;
+  }
+
+  auto toStr = [&](JSValue v, bool& had_exception) -> std::string {
+    JSValue s = JS_ToString(ctx, v);
+    if (JS_IsException(s)) { had_exception = true; return ""; }
+    const char* c = JS_ToCString(ctx, s);
+    std::string out = c ? c : "";
+    if (c) JS_FreeCString(ctx, c);
+    JS_FreeValue(ctx, s);
+    return out;
+  };
+
+  bool ex = false;
+  std::string url    = argc >= 1 ? toStr(argv[0], ex) : "";
+  if (ex) return JS_EXCEPTION;
+  std::string method = argc >= 2 ? toStr(argv[1], ex) : "GET";
+  if (ex) return JS_EXCEPTION;
+  std::string headersJson = argc >= 3 ? toStr(argv[2], ex) : "{}";
+  if (ex) return JS_EXCEPTION;
+  std::optional<std::string> body;
+  if (argc >= 4 && !JS_IsUndefined(argv[3]) && !JS_IsNull(argv[3])) {
+    body = toStr(argv[3], ex);
+    if (ex) return JS_EXCEPTION;
+  }
+
+  std::string response;
+  try {
+    response = rctx->fetch_callback(url, method, headersJson, body);
+  } catch (const std::exception& e) {
+    return JS_ThrowInternalError(ctx, "fetch callback threw: %s", e.what());
+  } catch (...) {
+    return JS_ThrowInternalError(ctx, "fetch callback threw an unknown exception");
+  }
+
+  JSValue parsed = JS_ParseJSON(ctx, response.c_str(), response.size(), "<fetch-response>");
+  if (JS_IsException(parsed)) {
+    JS_FreeValue(ctx, JS_GetException(ctx));
+    JSValue result = JS_NewObject(ctx);
+    JS_SetPropertyStr(ctx, result, "error", JS_NewString(ctx, "fetch: invalid response from native layer"));
+    return result;
+  }
+  return parsed;
+}
+
+const char* kFetchBootstrapScript = R"JS(
+(function() {
+  function normalizeHeaders(h) {
+    var out = {};
+    if (!h) return out;
+    if (Array.isArray(h)) {
+      for (var i = 0; i < h.length; i++) {
+        var pair = h[i];
+        if (Array.isArray(pair) && pair.length >= 2)
+          out[String(pair[0]).toLowerCase()] = String(pair[1]);
+      }
+    } else if (typeof h.entries === 'function') {
+      for (var pair of h.entries()) out[String(pair[0]).toLowerCase()] = String(pair[1]);
+    } else {
+      for (var k in h) if (Object.prototype.hasOwnProperty.call(h, k)) out[String(k).toLowerCase()] = String(h[k]);
+    }
+    return out;
+  }
+
+  function Headers(init) {
+    this._map = {};
+    var norm = normalizeHeaders(init);
+    for (var k in norm) this._map[String(k).toLowerCase()] = String(norm[k]);
+  }
+  Headers.prototype.get = function(name) {
+    var v = this._map[String(name).toLowerCase()];
+    return v === undefined ? null : v;
+  };
+  Headers.prototype.has = function(name) {
+    return Object.prototype.hasOwnProperty.call(this._map, String(name).toLowerCase());
+  };
+  Headers.prototype.set = function(name, value) {
+    this._map[String(name).toLowerCase()] = String(value);
+  };
+  Headers.prototype.forEach = function(cb) {
+    for (var k in this._map) cb(this._map[k], k, this);
+  };
+  Headers.prototype.entries = function() {
+    var self = this;
+    var keys = Object.keys(this._map);
+    var i = 0;
+    var iter = {
+      next: function() {
+        if (i >= keys.length) return { done: true, value: undefined };
+        var k = keys[i++];
+        return { done: false, value: [k, self._map[k]] };
+      }
+    };
+    iter[Symbol.iterator] = function() { return iter; };
+    return iter;
+  };
+  globalThis.Headers = Headers;
+
+  function Response(bodyText, init) {
+    init = init || {};
+    this._bodyText = (bodyText === undefined || bodyText === null) ? '' : bodyText;
+    this.status = init.status !== undefined ? init.status : 200;
+    this.statusText = init.statusText !== undefined ? init.statusText : '';
+    this.ok = this.status >= 200 && this.status < 300;
+    this.headers = init.headers instanceof Headers ? init.headers : new Headers(init.headers);
+    this.bodyUsed = false;
+  }
+  Response.prototype.text = function() {
+    this.bodyUsed = true;
+    return Promise.resolve(this._bodyText);
+  };
+  Response.prototype.json = function() {
+    this.bodyUsed = true;
+    try {
+      return Promise.resolve(JSON.parse(this._bodyText));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  Response.prototype.clone = function() {
+    return new Response(this._bodyText, { status: this.status, statusText: this.statusText, headers: this.headers });
+  };
+  globalThis.Response = Response;
+
+  globalThis.fetch = function(input, init) {
+    return new Promise(function(resolve, reject) {
+      try {
+        var url = typeof input === 'string' ? input : (input && input.url);
+        init = init || {};
+        var method = (init.method || 'GET').toUpperCase();
+        var headers = normalizeHeaders(init.headers);
+        var headersJson = JSON.stringify(headers);
+        var body = (init.body === undefined || init.body === null) ? undefined : String(init.body);
+
+        var raw = __nativeFetchSync(url, method, headersJson, body);
+        if (raw.error) {
+          reject(new TypeError(String(raw.error)));
+          return;
+        }
+
+        var respHeaders = {};
+        try { respHeaders = JSON.parse(raw.headersJson || '{}'); } catch (e) {}
+
+        resolve(new Response(raw.body, {
+          status: raw.status,
+          statusText: raw.statusText,
+          headers: respHeaders,
+        }));
+      } catch (e) {
+        reject(e);
+      }
+    });
+  };
+
+  // ── XMLHttpRequest ──────────────────────────────────────────────────────
+  // send() is fully synchronous: __nativeFetchSync blocks the calling thread
+  // until the response arrives, so all readyState transitions and events
+  // fire within the same call frame, before send() returns.
+
+  function XMLHttpRequest() {
+    this.readyState = XMLHttpRequest.UNSENT;
+    this.status = 0;
+    this.statusText = '';
+    this.responseText = '';
+    this.responseURL = '';
+    this._method = null;
+    this._url = null;
+    this._requestHeaders = {};
+    this._responseHeaders = {};
+    this._listeners = {};
+    this.onreadystatechange = null;
+    this.onload = null;
+    this.onerror = null;
+    this.onabort = null;
+    this.onloadend = null;
+  }
+
+  XMLHttpRequest.UNSENT = 0;
+  XMLHttpRequest.OPENED = 1;
+  XMLHttpRequest.HEADERS_RECEIVED = 2;
+  XMLHttpRequest.LOADING = 3;
+  XMLHttpRequest.DONE = 4;
+
+  XMLHttpRequest.prototype.UNSENT = 0;
+  XMLHttpRequest.prototype.OPENED = 1;
+  XMLHttpRequest.prototype.HEADERS_RECEIVED = 2;
+  XMLHttpRequest.prototype.LOADING = 3;
+  XMLHttpRequest.prototype.DONE = 4;
+
+  Object.defineProperty(XMLHttpRequest.prototype, 'response', {
+    get: function() { return this.responseText; }
+  });
+
+  XMLHttpRequest.prototype._setReadyState = function(state) {
+    this.readyState = state;
+    this._dispatch('readystatechange');
+  };
+
+  XMLHttpRequest.prototype._dispatch = function(type) {
+    var evt = new Event(type);
+    evt.target = this;
+    var handlerName = 'on' + type;
+    if (typeof this[handlerName] === 'function') {
+      try { this[handlerName](evt); } catch (e) {}
+    }
+    var listeners = this._listeners[type];
+    if (listeners) {
+      listeners.slice().forEach(function(cb) {
+        try { cb(evt); } catch (e) {}
+      });
+    }
+  };
+
+  XMLHttpRequest.prototype.open = function(method, url) {
+    this._method = String(method || 'GET').toUpperCase();
+    this._url = String(url || '');
+    this._requestHeaders = {};
+    this._responseHeaders = {};
+    this.status = 0;
+    this.statusText = '';
+    this.responseText = '';
+    this.responseURL = '';
+    this._setReadyState(XMLHttpRequest.OPENED);
+  };
+
+  XMLHttpRequest.prototype.setRequestHeader = function(name, value) {
+    if (this.readyState !== XMLHttpRequest.OPENED) {
+      var err = new Error('InvalidStateError: setRequestHeader() requires open() to have been called first');
+      err.name = 'InvalidStateError';
+      throw err;
+    }
+    this._requestHeaders[String(name).toLowerCase()] = String(value);
+  };
+
+  XMLHttpRequest.prototype.send = function(body) {
+    if (this.readyState !== XMLHttpRequest.OPENED) {
+      var err = new Error('InvalidStateError: send() requires open() to have been called first');
+      err.name = 'InvalidStateError';
+      throw err;
+    }
+
+    var headersJson = JSON.stringify(this._requestHeaders);
+    var bodyArg = (body === undefined || body === null) ? undefined : String(body);
+
+    var raw = __nativeFetchSync(this._url, this._method, headersJson, bodyArg);
+
+    if (raw.error) {
+      this.status = 0;
+      this.statusText = '';
+      this.responseText = '';
+      this.responseURL = '';
+      this._responseHeaders = {};
+      this._setReadyState(XMLHttpRequest.DONE);
+      this._dispatch('error');
+      this._dispatch('loadend');
+      return;
+    }
+
+    var respHeaders = {};
+    try { respHeaders = JSON.parse(raw.headersJson || '{}'); } catch (e) {}
+    var normalized = {};
+    for (var k in respHeaders) normalized[String(k).toLowerCase()] = String(respHeaders[k]);
+    this._responseHeaders = normalized;
+    this.status = raw.status;
+    this.statusText = raw.statusText || '';
+    this.responseURL = this._url;
+
+    this._setReadyState(XMLHttpRequest.HEADERS_RECEIVED);
+    this._setReadyState(XMLHttpRequest.LOADING);
+    this.responseText = raw.body || '';
+    this._setReadyState(XMLHttpRequest.DONE);
+    this._dispatch('load');
+    this._dispatch('loadend');
+  };
+
+  XMLHttpRequest.prototype.abort = function() {
+    if (this.readyState === XMLHttpRequest.UNSENT || this.readyState === XMLHttpRequest.DONE) {
+      return;
+    }
+    this.status = 0;
+    this.statusText = '';
+    this.responseText = '';
+    this._setReadyState(XMLHttpRequest.DONE);
+    this._dispatch('abort');
+    this._dispatch('loadend');
+  };
+
+  XMLHttpRequest.prototype.getAllResponseHeaders = function() {
+    var lines = [];
+    for (var k in this._responseHeaders) lines.push(k + ': ' + this._responseHeaders[k]);
+    return lines.join('\r\n');
+  };
+
+  XMLHttpRequest.prototype.getResponseHeader = function(name) {
+    var v = this._responseHeaders[String(name).toLowerCase()];
+    return v === undefined ? null : v;
+  };
+
+  XMLHttpRequest.prototype.addEventListener = function(type, cb) {
+    if (typeof cb !== 'function') return;
+    if (!this._listeners[type]) this._listeners[type] = [];
+    this._listeners[type].push(cb);
+  };
+
+  XMLHttpRequest.prototype.removeEventListener = function(type, cb) {
+    var arr = this._listeners[type];
+    if (!arr) return;
+    var idx = arr.indexOf(cb);
+    if (idx !== -1) arr.splice(idx, 1);
+  };
+
+  globalThis.XMLHttpRequest = XMLHttpRequest;
+})();
+)JS";
+
+} // namespace
+
+void FetchBindings::install(JSContext* ctx) {
+  JSValue global = JS_GetGlobalObject(ctx);
+  JS_SetPropertyStr(ctx, global, "__nativeFetchSync", JS_NewCFunction(ctx, js_fetch_native, "__nativeFetchSync", 4));
+  JS_FreeValue(ctx, global);
+
+  JSValue bootstrap_result = JS_Eval(ctx, kFetchBootstrapScript, strlen(kFetchBootstrapScript),
+                                      "<fetch-bootstrap>", JS_EVAL_TYPE_GLOBAL);
+  if (JS_IsException(bootstrap_result)) {
+    JS_FreeValue(ctx, JS_GetException(ctx));
+  }
+  JS_FreeValue(ctx, bootstrap_result);
+}
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/FetchBindings.hpp

@@ -0,0 +1,16 @@
+#pragma once
+
+// fetch()/Headers/Response/XMLHttpRequest. The native side (__nativeFetchSync)
+// bridges to the RN onFetch callback synchronously; the JS-level bootstrap
+// script builds the spec-shaped wrapper objects on top of it.
+
+#include "quickjs.h"
+
+namespace margelo::nitro::nitrojsdom {
+
+class FetchBindings {
+public:
+  static void install(JSContext* ctx);
+};
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/StyleBindings.cpp

@@ -0,0 +1,245 @@
+#include "StyleBindings.hpp"
+#include "../DOMBindingsInternal.hpp"
+#include <lexbor/dom/dom.h>
+#include <algorithm>
+#include <utility>
+#include <vector>
+
+namespace margelo::nitro::nitrojsdom {
+
+namespace {
+
+JSClassID js_style_class_id = 0;
+
+lxb_dom_element_t* unwrap_style(JSContext* ctx, JSValue val) {
+  return static_cast<lxb_dom_element_t*>(JS_GetOpaque(val, js_style_class_id));
+}
+
+std::string get_style_attr(lxb_dom_element_t* el) {
+  size_t len = 0;
+  const lxb_char_t* val = lxb_dom_element_get_attribute(el,
+      reinterpret_cast<const lxb_char_t*>("style"), 5, &len);
+  return val ? std::string(reinterpret_cast<const char*>(val), len) : "";
+}
+
+void set_style_attr(lxb_dom_element_t* el, const std::string& css) {
+  if (css.empty()) {
+    lxb_dom_element_remove_attribute(el, reinterpret_cast<const lxb_char_t*>("style"), 5);
+  } else {
+    lxb_dom_element_set_attribute(el,
+        reinterpret_cast<const lxb_char_t*>("style"), 5,
+        reinterpret_cast<const lxb_char_t*>(css.data()), css.size());
+  }
+}
+
+std::string trim_ws(const std::string& s) {
+  size_t a = s.find_first_not_of(" \t\n\r");
+  if (a == std::string::npos) return "";
+  size_t b = s.find_last_not_of(" \t\n\r");
+  return s.substr(a, b - a + 1);
+}
+
+// Parses "color: red; font-size: 12px" into ordered (name, value) pairs.
+std::vector<std::pair<std::string, std::string>> parse_style_decls(const std::string& css) {
+  std::vector<std::pair<std::string, std::string>> decls;
+  size_t pos = 0;
+  while (pos < css.size()) {
+    size_t semi = std::string::npos;
+    int depth = 0;
+    for (size_t i = pos; i < css.size(); i++) {
+      char c = css[i];
+      if (c == '(') depth++;
+      else if (c == ')' && depth > 0) depth--;
+      else if (c == ';' && depth == 0) { semi = i; break; }
+    }
+    std::string decl = css.substr(pos, semi == std::string::npos ? std::string::npos : semi - pos);
+    pos = (semi == std::string::npos) ? css.size() : semi + 1;
+
+    size_t colon = decl.find(':');
+    if (colon == std::string::npos) continue;
+    std::string name = trim_ws(decl.substr(0, colon));
+    std::string value = trim_ws(decl.substr(colon + 1));
+    if (!name.empty()) decls.emplace_back(name, value);
+  }
+  return decls;
+}
+
+std::string serialize_style_decls(const std::vector<std::pair<std::string, std::string>>& decls) {
+  std::string out;
+  for (auto& kv : decls) { out += kv.first; out += ": "; out += kv.second; out += "; "; }
+  if (!out.empty()) out.pop_back();
+  return out;
+}
+
+int js_style_get_own_property(JSContext* ctx, JSPropertyDescriptor* desc, JSValue obj, JSAtom prop) {
+  auto* el = unwrap_style(ctx, obj);
+  if (!el) return 0;
+  JSValue key_val = JS_AtomToString(ctx, prop);
+  const char* key = JS_ToCString(ctx, key_val);
+  JS_FreeValue(ctx, key_val);
+  if (!key) return 0;
+  std::string prop_name = camel_to_attr_suffix(key);
+  JS_FreeCString(ctx, key);
+
+  auto decls = parse_style_decls(get_style_attr(el));
+  for (auto& kv : decls) {
+    if (kv.first == prop_name) {
+      if (desc) {
+        desc->flags = JS_PROP_ENUMERABLE | JS_PROP_WRITABLE | JS_PROP_CONFIGURABLE;
+        desc->value = JS_NewStringLen(ctx, kv.second.data(), kv.second.size());
+        desc->getter = JS_UNDEFINED;
+        desc->setter = JS_UNDEFINED;
+      }
+      return 1;
+    }
+  }
+  return 0;
+}
+
+int js_style_define_own_property(JSContext* ctx, JSValue this_obj, JSAtom prop, JSValue val,
+                                  JSValue, JSValue, int) {
+  auto* el = unwrap_style(ctx, this_obj);
+  if (!el) return 0;
+  JSValue key_val = JS_AtomToString(ctx, prop);
+  const char* key = JS_ToCString(ctx, key_val);
+  JS_FreeValue(ctx, key_val);
+  if (!key) return 0;
+  std::string prop_name = camel_to_attr_suffix(key);
+  JS_FreeCString(ctx, key);
+
+  const char* str = JS_ToCString(ctx, val);
+  if (str) {
+    auto decls = parse_style_decls(get_style_attr(el));
+    bool found = false;
+    for (auto& kv : decls) { if (kv.first == prop_name) { kv.second = str; found = true; break; } }
+    if (!found) decls.emplace_back(prop_name, str);
+    set_style_attr(el, serialize_style_decls(decls));
+    JS_FreeCString(ctx, str);
+  }
+  return 1;
+}
+
+int js_style_delete_property(JSContext* ctx, JSValue obj, JSAtom prop) {
+  auto* el = unwrap_style(ctx, obj);
+  if (!el) return 1;
+  JSValue key_val = JS_AtomToString(ctx, prop);
+  const char* key = JS_ToCString(ctx, key_val);
+  JS_FreeValue(ctx, key_val);
+  if (!key) return 1;
+  std::string prop_name = camel_to_attr_suffix(key);
+  JS_FreeCString(ctx, key);
+
+  auto decls = parse_style_decls(get_style_attr(el));
+  decls.erase(std::remove_if(decls.begin(), decls.end(),
+      [&](auto& kv) { return kv.first == prop_name; }), decls.end());
+  set_style_attr(el, serialize_style_decls(decls));
+  return 1;
+}
+
+int js_style_get_own_property_names(JSContext* ctx, JSPropertyEnum** ptab, uint32_t* plen, JSValue obj) {
+  *ptab = nullptr;
+  *plen = 0;
+  auto* el = unwrap_style(ctx, obj);
+  if (!el) return 0;
+  auto decls = parse_style_decls(get_style_attr(el));
+
+  auto* tab = static_cast<JSPropertyEnum*>(js_malloc(ctx, sizeof(JSPropertyEnum) * (decls.empty() ? 1 : decls.size())));
+  if (!tab) return -1;
+  for (size_t i = 0; i < decls.size(); i++) {
+    tab[i].is_enumerable = 1;
+    tab[i].atom = JS_NewAtom(ctx, attr_suffix_to_camel(decls[i].first).c_str());
+  }
+  *ptab = tab;
+  *plen = (uint32_t)decls.size();
+  return 0;
+}
+
+JSClassExoticMethods js_style_exotic = {
+  .get_own_property       = js_style_get_own_property,
+  .get_own_property_names = js_style_get_own_property_names,
+  .delete_property        = js_style_delete_property,
+  .define_own_property    = js_style_define_own_property,
+};
+
+JSClassDef js_style_class = { "CSSStyleDeclaration", .finalizer = nullptr, .exotic = &js_style_exotic };
+
+JSValue js_style_get_cssText(JSContext* ctx, JSValue this_val) {
+  auto* el = unwrap_style(ctx, this_val);
+  if (!el) return JS_NewString(ctx, "");
+  return JS_NewString(ctx, get_style_attr(el).c_str());
+}
+
+JSValue js_style_set_cssText(JSContext* ctx, JSValue this_val, JSValue val) {
+  auto* el = unwrap_style(ctx, this_val);
+  if (!el) return JS_UNDEFINED;
+  const char* str = JS_ToCString(ctx, val);
+  if (str) { set_style_attr(el, str); JS_FreeCString(ctx, str); }
+  return JS_UNDEFINED;
+}
+
+JSValue js_style_setProperty(JSContext* ctx, JSValue this_val, int argc, JSValue* argv) {
+  auto* el = unwrap_style(ctx, this_val);
+  if (!el || argc < 2) return JS_UNDEFINED;
+  const char* name  = JS_ToCString(ctx, argv[0]);
+  const char* value = JS_ToCString(ctx, argv[1]);
+  if (name && value) {
+    auto decls = parse_style_decls(get_style_attr(el));
+    bool found = false;
+    for (auto& kv : decls) { if (kv.first == name) { kv.second = value; found = true; break; } }
+    if (!found) decls.emplace_back(name, value);
+    set_style_attr(el, serialize_style_decls(decls));
+  }
+  if (name)  JS_FreeCString(ctx, name);
+  if (value) JS_FreeCString(ctx, value);
+  return JS_UNDEFINED;
+}
+
+JSValue js_style_getPropertyValue(JSContext* ctx, JSValue this_val, int argc, JSValue* argv) {
+  auto* el = unwrap_style(ctx, this_val);
+  if (!el || argc < 1) return JS_NewString(ctx, "");
+  const char* name = JS_ToCString(ctx, argv[0]);
+  if (!name) return JS_NewString(ctx, "");
+  auto decls = parse_style_decls(get_style_attr(el));
+  std::string result;
+  for (auto& kv : decls) { if (kv.first == name) { result = kv.second; break; } }
+  JS_FreeCString(ctx, name);
+  return JS_NewString(ctx, result.c_str());
+}
+
+JSValue js_style_removeProperty(JSContext* ctx, JSValue this_val, int argc, JSValue* argv) {
+  auto* el = unwrap_style(ctx, this_val);
+  if (!el || argc < 1) return JS_NewString(ctx, "");
+  const char* name = JS_ToCString(ctx, argv[0]);
+  if (!name) return JS_NewString(ctx, "");
+  auto decls = parse_style_decls(get_style_attr(el));
+  std::string removed;
+  decls.erase(std::remove_if(decls.begin(), decls.end(), [&](auto& kv) {
+    if (kv.first == name) { removed = kv.second; return true; }
+    return false;
+  }), decls.end());
+  set_style_attr(el, serialize_style_decls(decls));
+  JS_FreeCString(ctx, name);
+  return JS_NewString(ctx, removed.c_str());
+}
+
+} // namespace
+
+void StyleBindings::install(JSContext* ctx) {
+  if (js_style_class_id == 0) JS_NewClassID(&js_style_class_id);
+  JS_NewClass(JS_GetRuntime(ctx), js_style_class_id, &js_style_class);
+
+  JSValue proto = JS_NewObject(ctx);
+  JS_SetPropertyStr(ctx, proto, "setProperty",      JS_NewCFunction(ctx, js_style_setProperty,      "setProperty",      2));
+  JS_SetPropertyStr(ctx, proto, "getPropertyValue", JS_NewCFunction(ctx, js_style_getPropertyValue, "getPropertyValue", 1));
+  JS_SetPropertyStr(ctx, proto, "removeProperty",   JS_NewCFunction(ctx, js_style_removeProperty,   "removeProperty",   1));
+  define_prop(ctx, proto, "cssText", js_style_get_cssText, js_style_set_cssText);
+  JS_SetClassProto(ctx, js_style_class_id, proto);
+}
+
+JSValue StyleBindings::make(JSContext* ctx, lxb_dom_element_t* el) {
+  JSValue obj = JS_NewObjectClass(ctx, js_style_class_id);
+  JS_SetOpaque(obj, el);
+  return obj;
+}
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/StyleBindings.hpp

@@ -0,0 +1,22 @@
+#pragma once
+
+// element.style, a CSSStyleDeclaration-like object mirroring the `style`
+// attribute. Same exotic-property technique as DatasetBindings: individual
+// longhand properties (backgroundColor) go through get/define/delete_property
+// against the parsed `style` attribute text; cssText/setProperty/etc. live on
+// the class prototype, a plain object that doesn't re-enter the exotic hooks.
+
+#include "quickjs.h"
+
+struct lxb_dom_element;
+typedef struct lxb_dom_element lxb_dom_element_t;
+
+namespace margelo::nitro::nitrojsdom {
+
+class StyleBindings {
+public:
+  static void install(JSContext* ctx);
+  static JSValue make(JSContext* ctx, lxb_dom_element_t* el);
+};
+
+} // namespace margelo::nitro::nitrojsdom