@salve-software/react-native-nitro-jsdom 1.1.0 → 2.0.0

package/cpp/quickjs/bindings/FormBindings.cpp

@@ -125,6 +125,229 @@ const char* kFormBootstrapScript = R"JS(
     // Per spec, submit() bypasses the "submit" event and constraint validation.
     // There is no real navigation in this sandbox, so this is intentionally inert.
   };
+
+  // ── Constraint Validation API (ValidityState, checkValidity, ...) ─────────
+  // Covers the subset real-world CMS forms actually hit: required, pattern,
+  // min/max/minlength/maxlength, type="email"/"url"/"number" and custom
+  // validity. `step` is intentionally not modeled (stepMismatch is always
+  // false) — it needs the same "default step base" arithmetic per input type
+  // that browsers hardcode, which isn't worth it for this sandbox's scope.
+  // reportValidity() has no UI to report against here, so it's just an alias
+  // for checkValidity() (same outcome jsdom has, for the same reason).
+
+  var VALIDITY_KEYS = [
+    'valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'tooShort',
+    'rangeUnderflow', 'rangeOverflow', 'stepMismatch', 'badInput', 'customError',
+  ];
+
+  function ValidityState(flags) {
+    this._flags = flags;
+  }
+  VALIDITY_KEYS.forEach(function(key) {
+    Object.defineProperty(ValidityState.prototype, key, {
+      enumerable: true,
+      get: function() { return !!this._flags[key]; },
+    });
+  });
+  Object.defineProperty(ValidityState.prototype, 'valid', {
+    enumerable: true,
+    get: function() {
+      var flags = this._flags;
+      return !VALIDITY_KEYS.some(function(key) { return flags[key]; });
+    },
+  });
+  globalThis.ValidityState = ValidityState;
+
+  var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  var URL_RE = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\/\S+$/;
+
+  function isFieldElement(el) {
+    return el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA';
+  }
+
+  function fieldType(el) {
+    if (el.tagName === 'TEXTAREA') return 'textarea';
+    if (el.tagName === 'SELECT') return 'select';
+    return (el.getAttribute('type') || 'text').toLowerCase();
+  }
+
+  function computeValidityFlags(el) {
+    var flags = {};
+    if (el._customValidity) flags.customError = true;
+
+    if (!isFieldElement(el) || el.hasAttribute('disabled')) return flags;
+
+    var type = fieldType(el);
+    if (type === 'hidden') return flags;
+
+    var required = el.hasAttribute('required');
+
+    if (type === 'checkbox' || type === 'radio') {
+      if (required && !el.checked) flags.valueMissing = true;
+      return flags;
+    }
+
+    var value = el.value;
+
+    if (el.tagName === 'SELECT') {
+      if (required && !value) flags.valueMissing = true;
+      return flags;
+    }
+
+    if (required && value === '') flags.valueMissing = true;
+    if (value === '') return flags;
+
+    if (type === 'email' && !EMAIL_RE.test(value)) flags.typeMismatch = true;
+    if (type === 'url' && !URL_RE.test(value)) flags.typeMismatch = true;
+
+    var pattern = el.getAttribute('pattern');
+    if (pattern) {
+      try {
+        if (!new RegExp('^(?:' + pattern + ')$').test(value)) flags.patternMismatch = true;
+      } catch (e) {
+        // Invalid pattern attribute: browsers treat this as never matching,
+        // but silently ignoring it is the safer default for a headless sandbox.
+      }
+    }
+
+    var maxlength = el.getAttribute('maxlength');
+    if (maxlength !== null && value.length > parseInt(maxlength, 10)) flags.tooLong = true;
+
+    var minlength = el.getAttribute('minlength');
+    if (minlength !== null && value.length < parseInt(minlength, 10)) flags.tooShort = true;
+
+    if (type === 'number' || type === 'range') {
+      var num = Number(value);
+      if (value.trim() === '' || isNaN(num)) {
+        flags.badInput = true;
+      } else {
+        var min = el.getAttribute('min');
+        var max = el.getAttribute('max');
+        if (min !== null && num < Number(min)) flags.rangeUnderflow = true;
+        if (max !== null && num > Number(max)) flags.rangeOverflow = true;
+      }
+    }
+
+    return flags;
+  }
+
+  Object.defineProperty(Element.prototype, 'validity', {
+    configurable: true,
+    get: function() { return new ValidityState(computeValidityFlags(this)); },
+  });
+
+  Object.defineProperty(Element.prototype, 'willValidate', {
+    configurable: true,
+    get: function() {
+      return isFieldElement(this) && !this.hasAttribute('disabled') && fieldType(this) !== 'hidden';
+    },
+  });
+
+  var DEFAULT_MESSAGES = {
+    valueMissing: 'Please fill out this field.',
+    typeMismatch: 'Please enter a valid value.',
+    patternMismatch: 'Please match the requested format.',
+    tooLong: 'Please shorten this text.',
+    tooShort: 'Please lengthen this text.',
+    rangeUnderflow: 'Value must be greater than or equal to the minimum.',
+    rangeOverflow: 'Value must be less than or equal to the maximum.',
+    badInput: 'Please enter a valid value.',
+  };
+
+  Object.defineProperty(Element.prototype, 'validationMessage', {
+    configurable: true,
+    get: function() {
+      if (this._customValidity) return this._customValidity;
+      var flags = computeValidityFlags(this);
+      for (var i = 0; i < VALIDITY_KEYS.length; i++) {
+        if (flags[VALIDITY_KEYS[i]]) return DEFAULT_MESSAGES[VALIDITY_KEYS[i]] || '';
+      }
+      return '';
+    },
+  });
+
+  Element.prototype.setCustomValidity = function(message) {
+    this._customValidity = message == null ? '' : String(message);
+  };
+
+  function fieldCheckValidity(el) {
+    var valid = new ValidityState(computeValidityFlags(el)).valid;
+    if (!valid) {
+      var evt = new Event('invalid', { bubbles: false, cancelable: true });
+      el.dispatchEvent(evt);
+    }
+    return valid;
+  }
+
+  function formFields(form) {
+    return Array.prototype.filter.call(form.querySelectorAll('input, select, textarea'), function(el) {
+      return !el.hasAttribute('disabled');
+    });
+  }
+
+  Element.prototype.checkValidity = function() {
+    if (this.tagName === 'FORM') {
+      var fields = formFields(this);
+      var allValid = true;
+      for (var i = 0; i < fields.length; i++) {
+        if (!fieldCheckValidity(fields[i])) allValid = false;
+      }
+      return allValid;
+    }
+    return fieldCheckValidity(this);
+  };
+
+  Element.prototype.reportValidity = function() {
+    return this.checkValidity();
+  };
+
+  // ── element.form / form.elements ────────────────────────────────────────
+  var FORM_ASSOCIATED_TAGS = ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON', 'FIELDSET', 'OUTPUT'];
+
+  function formControls(form) {
+    return Array.prototype.slice.call(form.querySelectorAll('input, select, textarea, button, fieldset, output'));
+  }
+
+  Object.defineProperty(Element.prototype, 'form', {
+    configurable: true,
+    get: function() {
+      if (FORM_ASSOCIATED_TAGS.indexOf(this.tagName) === -1) return undefined;
+      var formId = this.getAttribute('form');
+      if (formId) {
+        var byId = document.getElementById(formId);
+        if (byId && byId.tagName === 'FORM') return byId;
+      }
+      return this.closest('form');
+    },
+  });
+
+  Object.defineProperty(Element.prototype, 'elements', {
+    configurable: true,
+    get: function() {
+      if (this.tagName !== 'FORM') return undefined;
+      return formControls(this);
+    },
+  });
+
+  var LABELABLE_TAGS = ['BUTTON', 'INPUT', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA'];
+
+  Object.defineProperty(Element.prototype, 'labels', {
+    configurable: true,
+    get: function() {
+      if (LABELABLE_TAGS.indexOf(this.tagName) === -1) return null;
+      if (this.tagName === 'INPUT' && (this.getAttribute('type') || '').toLowerCase() === 'hidden') return null;
+      var result = [];
+      if (this.id) {
+        var candidates = this.ownerDocument.querySelectorAll('label[for]');
+        for (var i = 0; i < candidates.length; i++) {
+          if (candidates[i].getAttribute('for') === this.id) result.push(candidates[i]);
+        }
+      }
+      var wrapping = this.closest('label');
+      if (wrapping && result.indexOf(wrapping) === -1) result.push(wrapping);
+      return result;
+    },
+  });
 })();
 )JS";
 

package/cpp/quickjs/bindings/FormBindings.hpp

@@ -4,11 +4,15 @@
 
 namespace margelo::nitro::nitrojsdom {
 
-// Registers globalThis.FormData and Element.prototype.requestSubmit/submit
-// (tag-checked for "form" internally, mirroring ElementBindings' value/checked
-// pattern). Pure JS on top of the already-exposed querySelectorAll/Event
-// primitives — no native code needed. Must run after ElementBindings (for
-// globalThis.Element) and EventBindings (for globalThis.Event).
+// Registers globalThis.FormData, Element.prototype.requestSubmit/submit, and
+// the Constraint Validation API (globalThis.ValidityState,
+// Element.prototype.validity/willValidate/validationMessage/checkValidity()/
+// reportValidity()/setCustomValidity()). Tag-checked for "form"/"input"/
+// "select"/"textarea" internally, mirroring ElementBindings' value/checked
+// pattern. Pure JS on top of the already-exposed getAttribute/value/checked/
+// querySelectorAll/Event primitives — no native code needed. Must run after
+// ElementBindings (for globalThis.Element) and EventBindings (for
+// globalThis.Event).
 struct FormBindings {
   static void install(JSContext* ctx);
 };

package/cpp/quickjs/bindings/LayoutStubBindings.cpp

@@ -0,0 +1,104 @@
+#include "LayoutStubBindings.hpp"
+#include <cstring>
+
+namespace margelo::nitro::nitrojsdom {
+
+namespace {
+
+const char* kLayoutStubBootstrapScript = R"JS(
+(function() {
+  function definePositiveInt(proto, name) {
+    Object.defineProperty(proto, name, { get: function() { return 0; }, configurable: true });
+  }
+
+  // ── offset*/client*/scroll* dimensions ────────────────────────────────
+  ['offsetWidth', 'offsetHeight', 'offsetTop', 'offsetLeft',
+   'clientWidth', 'clientHeight', 'clientTop', 'clientLeft',
+   'scrollWidth', 'scrollHeight'].forEach(function(name) {
+    definePositiveInt(Element.prototype, name);
+  });
+  Object.defineProperty(Element.prototype, 'offsetParent', {
+    get: function() { return null; },
+    configurable: true,
+  });
+
+  // scrollTop/scrollLeft are real per-element state (jsdom does the same) —
+  // nothing reads them back to affect layout, but round-tripping a value a
+  // script just set is more useful than hardcoding 0.
+  Object.defineProperty(Element.prototype, 'scrollTop', {
+    get: function() { return this._scrollTop || 0; },
+    set: function(v) { this._scrollTop = Number(v) || 0; },
+    configurable: true,
+  });
+  Object.defineProperty(Element.prototype, 'scrollLeft', {
+    get: function() { return this._scrollLeft || 0; },
+    set: function(v) { this._scrollLeft = Number(v) || 0; },
+    configurable: true,
+  });
+
+  // ── scrollIntoView / scrollTo / scrollBy / scroll ─────────────────────
+  Element.prototype.scrollIntoView = function() {};
+  Element.prototype.scrollTo = function() {};
+  Element.prototype.scrollBy = function() {};
+  Element.prototype.scroll = function() {};
+
+  globalThis.scrollX = 0;
+  globalThis.scrollY = 0;
+  globalThis.pageXOffset = 0;
+  globalThis.pageYOffset = 0;
+  globalThis.scrollTo = function() {};
+  globalThis.scrollBy = function() {};
+  globalThis.scroll = function() {};
+
+  // ── document.elementFromPoint / elementsFromPoint ─────────────────────
+  document.elementFromPoint = function() { return null; };
+  document.elementsFromPoint = function() { return []; };
+
+  // ── ResizeObserver / IntersectionObserver ─────────────────────────────
+  function ResizeObserver(callback) {
+    if (typeof callback !== 'function') {
+      throw new TypeError("Failed to construct 'ResizeObserver': parameter 1 is not a function.");
+    }
+    this._callback = callback;
+  }
+  ResizeObserver.prototype.observe = function() {};
+  ResizeObserver.prototype.unobserve = function() {};
+  ResizeObserver.prototype.disconnect = function() {};
+  globalThis.ResizeObserver = ResizeObserver;
+
+  function normalizeThreshold(threshold) {
+    if (threshold === undefined) return [0];
+    var arr = Array.isArray(threshold) ? threshold.slice() : [threshold];
+    return arr.length ? arr : [0];
+  }
+
+  function IntersectionObserver(callback, options) {
+    if (typeof callback !== 'function') {
+      throw new TypeError("Failed to construct 'IntersectionObserver': parameter 1 is not a function.");
+    }
+    options = options || {};
+    this._callback = callback;
+    this.root = options.root || null;
+    this.rootMargin = options.rootMargin || '0px';
+    this.thresholds = normalizeThreshold(options.threshold);
+  }
+  IntersectionObserver.prototype.observe = function() {};
+  IntersectionObserver.prototype.unobserve = function() {};
+  IntersectionObserver.prototype.disconnect = function() {};
+  IntersectionObserver.prototype.takeRecords = function() { return []; };
+  globalThis.IntersectionObserver = IntersectionObserver;
+})();
+)JS";
+
+} // namespace
+
+void LayoutStubBindings::install(JSContext* ctx) {
+  JSValue result = JS_Eval(ctx, kLayoutStubBootstrapScript, strlen(kLayoutStubBootstrapScript),
+                            "<layout-stub-bootstrap>", JS_EVAL_TYPE_GLOBAL);
+  if (JS_IsException(result)) {
+    JS_FreeValue(ctx, JS_GetException(ctx));
+  }
+  JS_FreeValue(ctx, result);
+}
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/LayoutStubBindings.hpp

@@ -0,0 +1,28 @@
+#pragma once
+
+// No layout/rendering engine backs this sandbox, so every geometry- and
+// scroll-related API here is an inert stub rather than a real computation —
+// same stance as CSSOMBindings' getComputedStyle and ElementBindings'
+// getBoundingClientRect (both already all-zero without a cascade/layout
+// pass). This file covers the rest of that surface: scrollIntoView/scrollTo/
+// scrollBy/scroll (no-ops), offset*/client*/scroll* dimensions (0, except
+// scrollTop/scrollLeft which are real per-element state — jsdom does the
+// same), document.elementFromPoint/elementsFromPoint (null/[]), and
+// ResizeObserver/IntersectionObserver (constructible, observe()/unobserve()/
+// disconnect() no-op, callback never fires). jsdom itself doesn't expose
+// Resize/IntersectionObserver at all; this project adds them as defensive
+// "don't throw ReferenceError" stubs instead, matching the precedent set by
+// window.history/window.getSelection().
+//
+// Must run after ElementBindings (globalThis.Element) and DocumentBindings
+// (globalThis.document).
+
+#include "quickjs.h"
+
+namespace margelo::nitro::nitrojsdom {
+
+struct LayoutStubBindings {
+  static void install(JSContext* ctx);
+};
+
+} // namespace margelo::nitro::nitrojsdom

package/cpp/quickjs/bindings/LiveCollectionBindings.cpp

@@ -138,6 +138,51 @@ const char* kIteratorBootstrapScript = R"JS(
       }
     };
   };
+
+  proto.forEach = function(callback, thisArg) {
+    for (var i = 0; i < this.length; i++) callback.call(thisArg, this[i], i, this);
+  };
+
+  function arrayLikeIterator(self, mapEntry) {
+    var i = 0;
+    return {
+      next: function() {
+        if (i >= self.length) return { value: undefined, done: true };
+        var value = mapEntry(i, self[i]);
+        i++;
+        return { value: value, done: false };
+      },
+      [Symbol.iterator]: function() { return this; },
+    };
+  }
+
+  proto.entries = function() {
+    return arrayLikeIterator(this, function(i, v) { return [i, v]; });
+  };
+  proto.keys = function() {
+    return arrayLikeIterator(this, function(i) { return i; });
+  };
+  proto.values = function() {
+    return arrayLikeIterator(this, function(i, v) { return v; });
+  };
+
+  proto.item = function(index) {
+    return index >= 0 && index < this.length ? this[index] : null;
+  };
+
+  // namedItem() is spec'd on HTMLCollection only (matches by id, then by
+  // name), not NodeList — but both share this one LiveCollection class (see
+  // the forEach() comment above), so this stays a no-op-safe lookup for
+  // NodeLists of non-Elements (text/comment nodes have no getAttribute).
+  proto.namedItem = function(name) {
+    for (var i = 0; i < this.length; i++) {
+      var item = this[i];
+      if (typeof item.getAttribute !== 'function') continue;
+      if (item.getAttribute('id') === name || item.getAttribute('name') === name) return item;
+    }
+    return null;
+  };
+
   delete globalThis.__LiveCollectionProto;
 })();
 )JS";

package/cpp/quickjs/bindings/TimerBindings.cpp

@@ -107,6 +107,85 @@ const char* kTimerBootstrapScript = R"JS(
   globalThis.queueMicrotask = function(callback) {
     Promise.resolve().then(function() { callback(); });
   };
+
+  globalThis.requestIdleCallback = function(callback, options) {
+    var timeout = options && options.timeout;
+    return setTimeout(function() {
+      callback({
+        didTimeout: false,
+        timeRemaining: function() { return 50; },
+      });
+    }, typeof timeout === 'number' ? Math.min(timeout, 1) : 1);
+  };
+  globalThis.cancelIdleCallback = function(id) {
+    clearTimeout(id);
+  };
+
+  var __perfEntries = [];
+  function __perfFindMark(name) {
+    for (var i = __perfEntries.length - 1; i >= 0; i--) {
+      if (__perfEntries[i].name === name && __perfEntries[i].entryType === 'mark') return __perfEntries[i];
+    }
+    return null;
+  }
+  function __perfRequireMark(name) {
+    var entry = __perfFindMark(name);
+    if (!entry) {
+      throw new DOMException(
+        "Failed to execute 'measure' on 'Performance': The mark '" + name + "' does not exist.", 'SyntaxError');
+    }
+    return entry.startTime;
+  }
+  performance.mark = function(name, options) {
+    var entry = {
+      name: String(name),
+      entryType: 'mark',
+      startTime: (options && options.startTime !== undefined) ? options.startTime : performance.now(),
+      duration: 0,
+      detail: (options && options.detail !== undefined) ? options.detail : null,
+    };
+    __perfEntries.push(entry);
+    return entry;
+  };
+  performance.measure = function(name, startOrOptions, endMark) {
+    var startTime = 0;
+    var endTime = performance.now();
+    var detail = null;
+    if (typeof startOrOptions === 'string') {
+      startTime = __perfRequireMark(startOrOptions);
+      if (endMark !== undefined) endTime = __perfRequireMark(endMark);
+    } else if (startOrOptions && typeof startOrOptions === 'object') {
+      if (startOrOptions.detail !== undefined) detail = startOrOptions.detail;
+      if (startOrOptions.start !== undefined) {
+        startTime = typeof startOrOptions.start === 'string' ? __perfRequireMark(startOrOptions.start) : startOrOptions.start;
+      }
+      if (startOrOptions.end !== undefined) {
+        endTime = typeof startOrOptions.end === 'string' ? __perfRequireMark(startOrOptions.end) : startOrOptions.end;
+      } else if (startOrOptions.duration !== undefined) {
+        endTime = startTime + startOrOptions.duration;
+      }
+    }
+    var entry = { name: String(name), entryType: 'measure', startTime: startTime, duration: endTime - startTime, detail: detail };
+    __perfEntries.push(entry);
+    return entry;
+  };
+  performance.getEntries = function() { return __perfEntries.slice(); };
+  performance.getEntriesByType = function(type) {
+    return __perfEntries.filter(function(e) { return e.entryType === type; });
+  };
+  performance.getEntriesByName = function(name, type) {
+    return __perfEntries.filter(function(e) { return e.name === name && (!type || e.entryType === type); });
+  };
+  performance.clearMarks = function(name) {
+    __perfEntries = __perfEntries.filter(function(e) {
+      return e.entryType !== 'mark' || (name !== undefined && e.name !== name);
+    });
+  };
+  performance.clearMeasures = function(name) {
+    __perfEntries = __perfEntries.filter(function(e) {
+      return e.entryType !== 'measure' || (name !== undefined && e.name !== name);
+    });
+  };
 })();
 )JS";