@depup/jsdom 28.1.0-depup.1

package/lib/jsdom/living/helpers/create-event-accessor.js

@@ -0,0 +1,209 @@
+"use strict";
+
+// Event handler attributes (e.g. onclick, onload) have three layers:
+//
+// 1. **Generated wrapper (type conversion)**: For webidl2js-generated classes, the IDL wrapper handles converting the
+//    JS value to the appropriate callback type (EventHandlerNonNull, OnErrorEventHandlerNonNull, or
+//    OnBeforeUnloadEventHandlerNonNull). Window is not webidl2js-generated, so Window.js manually defines these
+//    property descriptors with the same conversion logic.
+//
+// 2. **Impl property (createEventAccessor)**: `createEventAccessor` defines `on<event>` property descriptors on impl
+//    prototypes. These delegate to `_getEventHandlerFor`/`_setEventHandlerFor` on the impl, which in turn use
+//    `_getEventHandlerTarget` to determine where the handler is actually stored. For body/frameset elements, the
+//    "determine the target of an event handler" spec algorithm routes certain events to the Window.
+//
+// 3. **Handler storage and invocation**: `_setEventHandlerFor` stores the handler and calls `appendHandler` to register
+//    an event listener. `appendHandler` implements the "event handler processing algorithm", with special invocation
+//    logic: `onerror` on Window receives expanded arguments (message, source, lineno, colno, error) instead of the
+//    event object, and `onbeforeunload` has special return value handling for cancellation.
+//
+// Content attribute handlers (e.g. `<div onclick="...">`) flow through `_globalEventChanged`, which stores the raw
+// body string. On first access, `getCurrentEventHandlerValue` compiles the string into a function, wrapping it in the
+// appropriate scope chain (document, form owner, element) per the spec.
+
+const idlUtils = require("../../../generated/idl/utils");
+const ErrorEvent = require("../../../generated/idl/ErrorEvent");
+const BeforeUnloadEvent = require("../../../generated/idl/BeforeUnloadEvent");
+const EventHandlerNonNull = require("../../../generated/idl/EventHandlerNonNull.js");
+const OnBeforeUnloadEventHandlerNonNull = require("../../../generated/idl/OnBeforeUnloadEventHandlerNonNull.js");
+const OnErrorEventHandlerNonNull = require("../../../generated/idl/OnErrorEventHandlerNonNull.js");
+const reportException = require("./runtime-script-errors");
+
+exports.appendHandler = (el, eventName) => {
+  // tryImplForWrapper() is currently required due to use in Window.js
+  idlUtils.tryImplForWrapper(el).addEventListener(eventName, event => {
+    // https://html.spec.whatwg.org/#the-event-handler-processing-algorithm
+    const callback = exports.getCurrentEventHandlerValue(el, eventName);
+    if (callback === null) {
+      return;
+    }
+
+    const specialError = ErrorEvent.isImpl(event) && event.type === "error" &&
+      event.currentTarget.constructor.name === "Window";
+
+    let returnValue = null;
+    // https://heycam.github.io/webidl/#es-invoking-callback-functions
+    if (typeof callback === "function") {
+      if (specialError) {
+        returnValue = callback.call(
+          event.currentTarget,
+          event.message,
+          event.filename,
+          event.lineno,
+          event.colno,
+          event.error
+        );
+      } else {
+        returnValue = callback.call(event.currentTarget, event);
+      }
+    }
+
+    if (event.type === "beforeunload" && BeforeUnloadEvent.isImpl(event)) {
+      if (returnValue !== null) {
+        event._canceledFlag = true;
+        if (event.returnValue === "") {
+          event.returnValue = returnValue;
+        }
+      }
+    } else if (specialError) {
+      if (returnValue === true) {
+        event._canceledFlag = true;
+      }
+    } else if (returnValue === false) {
+      event._canceledFlag = true;
+    }
+  });
+};
+
+// "Simple" in this case means "no content attributes involved"
+exports.setupForSimpleEventAccessors = (prototype, events) => {
+  prototype._getEventHandlerFor = function (event) {
+    return this._eventHandlers ? this._eventHandlers[event] : undefined;
+  };
+
+  prototype._setEventHandlerFor = function (event, handler) {
+    if (!this._registeredHandlers) {
+      this._registeredHandlers = new Set();
+      this._eventHandlers = Object.create(null);
+    }
+
+    if (!this._registeredHandlers.has(event) && handler !== null) {
+      this._registeredHandlers.add(event);
+      exports.appendHandler(this, event);
+    }
+    this._eventHandlers[event] = handler;
+  };
+
+  for (const event of events) {
+    exports.createEventAccessor(prototype, event);
+  }
+};
+
+// https://html.spec.whatwg.org/multipage/webappapis.html#getting-the-current-value-of-the-event-handler
+exports.getCurrentEventHandlerValue = (target, event) => {
+  const value = target._getEventHandlerFor(event);
+  if (!value) {
+    return null;
+  }
+
+  if (value.body !== undefined) {
+    let element, document, fn;
+    if (target.constructor.name === "Window") {
+      element = null;
+      document = idlUtils.implForWrapper(target.document);
+    } else {
+      element = target;
+      document = element.ownerDocument;
+    }
+    const { body } = value;
+
+    const formOwner = element !== null && element.form ? element.form : null;
+    const window = target.constructor.name === "Window" && target._document ? target : document.defaultView;
+
+    try {
+      // eslint-disable-next-line no-new-func
+      Function(body); // properly error out on syntax errors
+      // Note: this won't execute body; that would require `Function(body)()`.
+    } catch (e) {
+      if (window) {
+        reportException(window, e);
+      }
+      target._setEventHandlerFor(event, null);
+      return null;
+    }
+
+    // Note: the with (window) { } is not necessary in Node, but is necessary in a browserified environment.
+
+    const createFunction = document.defaultView.Function;
+    if (event === "error" && element === null) {
+      const sourceURL = document ? `\n//# sourceURL=${document.URL}` : "";
+
+      fn = createFunction(`\
+with (arguments[0]) { return function onerror(event, source, lineno, colno, error) {
+${body}
+}; }${sourceURL}`)(window);
+
+      fn = OnErrorEventHandlerNonNull.convert(window, fn);
+    } else {
+      const calls = [];
+      if (element !== null) {
+        calls.push(idlUtils.wrapperForImpl(document));
+      }
+
+      if (formOwner !== null) {
+        calls.push(idlUtils.wrapperForImpl(formOwner));
+      }
+
+      if (element !== null) {
+        calls.push(idlUtils.wrapperForImpl(element));
+      }
+
+      let wrapperBody = `\
+with (arguments[0]) { return function on${event}(event) {
+${body}
+}; }`;
+
+      // eslint-disable-next-line no-unused-vars
+      for (const call of calls) {
+        wrapperBody = `\
+with (arguments[0]) { return function () {
+${wrapperBody}
+}; }`;
+      }
+
+      if (document) {
+        wrapperBody += `\n//# sourceURL=${document.URL}`;
+      }
+
+      fn = createFunction(wrapperBody)(window);
+      for (const call of calls) {
+        fn = fn(call);
+      }
+
+      if (event === "beforeunload") {
+        fn = OnBeforeUnloadEventHandlerNonNull.convert(window, fn);
+      } else {
+        fn = EventHandlerNonNull.convert(window, fn);
+      }
+    }
+
+    target._setEventHandlerFor(event, fn);
+  }
+
+  return target._getEventHandlerFor(event);
+};
+
+// https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes
+// TODO: Consider replacing this with `[ReflectEvent]`
+exports.createEventAccessor = (obj, event) => {
+  Object.defineProperty(obj, "on" + event, {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return exports.getCurrentEventHandlerValue(this, event);
+    },
+    set(val) {
+      this._setEventHandlerFor(event, val);
+    }
+  });
+};

package/lib/jsdom/living/helpers/custom-elements.js

@@ -0,0 +1,272 @@
+"use strict";
+
+const DOMException = require("../../../generated/idl/DOMException");
+const isPotentialCustomElementName = require("is-potential-custom-element-name");
+
+const NODE_TYPE = require("../node-type");
+const { HTML_NS } = require("./namespaces");
+const { shadowIncludingRoot } = require("./shadow-dom");
+const reportException = require("./runtime-script-errors");
+
+const { implForWrapper, wrapperForImpl } = require("../../../generated/idl/utils");
+
+// https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions-stack
+class CEReactionsStack {
+  constructor() {
+    this._stack = [];
+
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#backup-element-queue
+    this.backupElementQueue = [];
+
+    // https://html.spec.whatwg.org/multipage/custom-elements.html#processing-the-backup-element-queue
+    this.processingBackupElementQueue = false;
+  }
+
+  push(elementQueue) {
+    this._stack.push(elementQueue);
+  }
+
+  pop() {
+    return this._stack.pop();
+  }
+
+  get currentElementQueue() {
+    const { _stack } = this;
+    return _stack[_stack.length - 1];
+  }
+
+  isEmpty() {
+    return this._stack.length === 0;
+  }
+}
+
+// In theory separate cross-origin Windows created by separate JSDOM instances could have separate stacks. But, we would
+// need to implement the whole agent architecture. Which is kind of questionable given that we don't run our Windows in
+// their own separate threads, which is what agents are meant to represent.
+const customElementReactionsStack = new CEReactionsStack();
+
+// https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions
+function ceReactionsPreSteps() {
+  customElementReactionsStack.push([]);
+}
+function ceReactionsPostSteps() {
+  const queue = customElementReactionsStack.pop();
+  invokeCEReactions(queue);
+}
+
+const RESTRICTED_CUSTOM_ELEMENT_NAME = new Set([
+  "annotation-xml",
+  "color-profile",
+  "font-face",
+  "font-face-src",
+  "font-face-uri",
+  "font-face-format",
+  "font-face-name",
+  "missing-glyph"
+]);
+
+// https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
+function isValidCustomElementName(name) {
+  if (RESTRICTED_CUSTOM_ELEMENT_NAME.has(name)) {
+    return false;
+  }
+
+  return isPotentialCustomElementName(name);
+}
+
+// https://html.spec.whatwg.org/multipage/custom-elements.html#concept-upgrade-an-element
+function upgradeElement(definition, element) {
+  if (element._ceState !== "undefined" || element._ceState === "uncustomized") {
+    return;
+  }
+
+  element._ceDefinition = definition;
+  element._ceState = "failed";
+
+  for (const attribute of element._attributeList) {
+    const { _localName, _namespace, _value } = attribute;
+    enqueueCECallbackReaction(element, "attributeChangedCallback", [_localName, null, _value, _namespace]);
+  }
+
+  if (shadowIncludingRoot(element).nodeType === NODE_TYPE.DOCUMENT_NODE) {
+    enqueueCECallbackReaction(element, "connectedCallback", []);
+  }
+
+  definition.constructionStack.push(element);
+
+  const { constructionStack, constructor: C } = definition;
+
+  let constructionError;
+  try {
+    if (definition.disableShadow === true && element._shadowRoot !== null) {
+      throw DOMException.create(element._globalObject, [
+        "Can't upgrade a custom element with a shadow root if shadow is disabled",
+        "NotSupportedError"
+      ]);
+    }
+
+    element._ceState = "precustomized";
+
+    const constructionResult = C.construct();
+    const constructionResultImpl = implForWrapper(constructionResult);
+
+    if (constructionResultImpl !== element) {
+      throw new TypeError("Invalid custom element constructor return value");
+    }
+  } catch (error) {
+    constructionError = error;
+  }
+
+  constructionStack.pop();
+
+  if (constructionError !== undefined) {
+    element._ceDefinition = null;
+    element._ceReactionQueue = [];
+
+    throw constructionError;
+  }
+
+  element._ceState = "custom";
+}
+
+// https://html.spec.whatwg.org/#concept-try-upgrade
+function tryUpgradeElement(element) {
+  const { _ownerDocument, _namespaceURI, _localName, _isValue } = element;
+  const definition = lookupCEDefinition(_ownerDocument, _namespaceURI, _localName, _isValue);
+
+  if (definition !== null) {
+    enqueueCEUpgradeReaction(element, definition);
+  }
+}
+
+// https://html.spec.whatwg.org/#look-up-a-custom-element-definition
+function lookupCEDefinition(document, namespace, localName, isValue) {
+  const definition = null;
+
+  if (namespace !== HTML_NS) {
+    return definition;
+  }
+
+  if (!document._defaultView) {
+    return definition;
+  }
+
+  const registry = implForWrapper(document._globalObject._customElementRegistry);
+
+  const definitionByName = registry._customElementDefinitions.find(def => {
+    return def.name === def.localName && def.localName === localName;
+  });
+  if (definitionByName !== undefined) {
+    return definitionByName;
+  }
+
+  const definitionByIs = registry._customElementDefinitions.find(def => {
+    return def.name === isValue && def.localName === localName;
+  });
+  if (definitionByIs !== undefined) {
+    return definitionByIs;
+  }
+
+  return definition;
+}
+
+// https://html.spec.whatwg.org/multipage/custom-elements.html#invoke-custom-element-reactions
+function invokeCEReactions(elementQueue) {
+  while (elementQueue.length > 0) {
+    const element = elementQueue.shift();
+
+    const reactions = element._ceReactionQueue;
+
+    try {
+      while (reactions.length > 0) {
+        const reaction = reactions.shift();
+
+        switch (reaction.type) {
+          case "upgrade":
+            upgradeElement(reaction.definition, element);
+            break;
+
+          case "callback":
+            reaction.callback.apply(wrapperForImpl(element), reaction.args);
+            break;
+        }
+      }
+    } catch (error) {
+      reportException(element._globalObject, error);
+    }
+  }
+}
+
+// https://html.spec.whatwg.org/multipage/custom-elements.html#enqueue-an-element-on-the-appropriate-element-queue
+function enqueueElementOnAppropriateElementQueue(element) {
+  if (customElementReactionsStack.isEmpty()) {
+    customElementReactionsStack.backupElementQueue.push(element);
+
+    if (customElementReactionsStack.processingBackupElementQueue) {
+      return;
+    }
+
+    customElementReactionsStack.processingBackupElementQueue = true;
+
+    Promise.resolve().then(() => {
+      const elementQueue = customElementReactionsStack.backupElementQueue;
+      invokeCEReactions(elementQueue);
+
+      customElementReactionsStack.processingBackupElementQueue = false;
+    });
+  } else {
+    customElementReactionsStack.currentElementQueue.push(element);
+  }
+}
+
+// https://html.spec.whatwg.org/multipage/custom-elements.html#enqueue-a-custom-element-callback-reaction
+function enqueueCECallbackReaction(element, callbackName, args) {
+  const { _ceDefinition: { lifecycleCallbacks, observedAttributes } } = element;
+
+  const callback = lifecycleCallbacks[callbackName];
+  if (callback === null) {
+    return;
+  }
+
+  if (callbackName === "attributeChangedCallback") {
+    const attributeName = args[0];
+    if (!observedAttributes.includes(attributeName)) {
+      return;
+    }
+  }
+
+  element._ceReactionQueue.push({
+    type: "callback",
+    callback,
+    args
+  });
+
+  enqueueElementOnAppropriateElementQueue(element);
+}
+
+// https://html.spec.whatwg.org/#enqueue-a-custom-element-upgrade-reaction
+function enqueueCEUpgradeReaction(element, definition) {
+  element._ceReactionQueue.push({
+    type: "upgrade",
+    definition
+  });
+
+  enqueueElementOnAppropriateElementQueue(element);
+}
+
+module.exports = {
+  customElementReactionsStack,
+
+  ceReactionsPreSteps,
+  ceReactionsPostSteps,
+
+  isValidCustomElementName,
+
+  upgradeElement,
+  tryUpgradeElement,
+
+  lookupCEDefinition,
+  enqueueCEUpgradeReaction,
+  enqueueCECallbackReaction,
+  invokeCEReactions
+};