@remote-dom/polyfill 1.4.6 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @remote-dom/polyfill
 
+## 1.5.0
+
+### Minor Changes
+
+- [#593](https://github.com/Shopify/remote-dom/pull/593) [`61f5cba`](https://github.com/Shopify/remote-dom/commit/61f5cbaa9965f7befbea3d3dfc2d2b2a0798c958) Thanks [@developit](https://github.com/developit)! - Add support for `not` in query-selectors
+
+## 1.4.7
+
+### Patch Changes
+
+- [#594](https://github.com/Shopify/remote-dom/pull/594) [`789a7c7`](https://github.com/Shopify/remote-dom/commit/789a7c7480a445d1e5973bd6e2aa4e8889ec6f85) Thanks [@robin-drexler](https://github.com/robin-drexler)! - add `FocusEvent`, `ClipboardEvent` and `ToggleEvent` to polyfill
+
 ## 1.4.6
 
 ### Patch Changes

package/build/cjs/ClipboardEvent.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Event = require('./Event.cjs');
+
+// https://w3c.github.io/clipboard-apis/#clipboardevent-interface
+class ClipboardEvent extends Event.Event {
+  constructor(type, eventInitDict = {}) {
+    super(type, eventInitDict);
+    this.clipboardData = eventInitDict.clipboardData ?? null;
+  }
+}
+
+exports.ClipboardEvent = ClipboardEvent;

package/build/cjs/FocusEvent.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Event = require('./Event.cjs');
+
+// https://w3c.github.io/uievents/#interface-focusevent
+class FocusEvent extends Event.Event {
+  constructor(type, eventInitDict = {}) {
+    super(type, eventInitDict);
+    this.relatedTarget = eventInitDict.relatedTarget ?? null;
+  }
+}
+
+exports.FocusEvent = FocusEvent;

package/build/cjs/ToggleEvent.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Event = require('./Event.cjs');
+
+// https://html.spec.whatwg.org/multipage/popover.html#toggleevent
+class ToggleEvent extends Event.Event {
+  constructor(type, eventInitDict) {
+    super(type, eventInitDict);
+    this.oldState = eventInitDict.oldState;
+    this.newState = eventInitDict.newState;
+  }
+}
+
+exports.ToggleEvent = ToggleEvent;

package/build/cjs/Window.cjs

@@ -8,6 +8,9 @@ const EventTarget = require('./EventTarget.cjs');
 const CustomEvent = require('./CustomEvent.cjs');
 const ErrorEvent = require('./ErrorEvent.cjs');
 const PromiseRejectionEvent = require('./PromiseRejectionEvent.cjs');
+const ToggleEvent = require('./ToggleEvent.cjs');
+const FocusEvent = require('./FocusEvent.cjs');
+const ClipboardEvent = require('./ClipboardEvent.cjs');
 const Node = require('./Node.cjs');
 const ParentNode = require('./ParentNode.cjs');
 const ChildNode = require('./ChildNode.cjs');
@@ -37,6 +40,9 @@ class Window extends EventTarget.EventTarget {
   Event = (() => Event.Event)();
   ErrorEvent = (() => ErrorEvent.ErrorEvent)();
   PromiseRejectionEvent = (() => PromiseRejectionEvent.PromiseRejectionEvent)();
+  ToggleEvent = (() => ToggleEvent.ToggleEvent)();
+  FocusEvent = (() => FocusEvent.FocusEvent)();
+  ClipboardEvent = (() => ClipboardEvent.ClipboardEvent)();
   EventTarget = (() => EventTarget.EventTarget)();
   CustomEvent = (() => CustomEvent.CustomEvent)();
   Node = (() => Node.Node)();

package/build/cjs/selectors.cjs

@@ -53,7 +53,7 @@ function parseSelector(selector) {
     matchers: []
   };
   const parts = [part];
-  const tokenizer = /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:]+)|:(\w+)(?:\((.*?)\))?)/gi;
+  const tokenizer = /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:+~]+)|:(\w+)(?:\((.*?)\))?)/gi;
   let token;
   while (token = tokenizer.exec(selector)) {
     // [1]: ancestor/parent/sibling/adjacent
@@ -80,8 +80,12 @@ function parseSelector(selector) {
       type = token[5] === '#' ? MatcherType.Id : MatcherType.Class;
     } else if (token[7]) {
       type = token[8] == null ? MatcherType.Pseudo : MatcherType.Function;
-    } else if (token[6] && ELEMENT_SELECTOR_TEST.test(token[6])) {
-      type = MatcherType.Element;
+    } else if (token[6]) {
+      if (token[6] === '*') {
+        type = MatcherType.Unknown; // Universal selector matches all
+      } else if (ELEMENT_SELECTOR_TEST.test(token[6])) {
+        type = MatcherType.Element;
+      }
     }
     part.matchers.push({
       type,
@@ -127,19 +131,34 @@ function matchesSelectorRecursive(element, parts) {
   }
   const link = combinator === Combinator.Child || combinator === Combinator.Descendant ? constants.PARENT : constants.PREV;
   let ref = element[link];
-  if (!ref || !matchesSelectorMatcher(ref, matchers)) {
-    return false;
-  }
+  if (!ref) return false;
   if (combinator === Combinator.Descendant || combinator === Combinator.Sibling) {
-    while (ref = ref[link]) {
-      if (matchesSelectorMatcher(ref, matchers)) {
+    // For descendant/sibling combinators, search through all ancestors/siblings
+    while (ref) {
+      if (shared.isElementNode(ref) && matchesSelectorMatcher(ref, matchers)) {
         const pp = parts.slice(0, -1);
         if (pp.length === 0) return true;
         if (matchesSelectorRecursive(element, pp)) return true;
       }
+      ref = ref[link];
+    }
+    return false;
+  } else {
+    // For child/adjacent combinators, check only the immediate parent/sibling
+    // For sibling combinators, skip non-element siblings
+    if (combinator === Combinator.Adjacent && !shared.isElementNode(ref)) {
+      // Skip to next element sibling
+      while (ref && !shared.isElementNode(ref)) {
+        ref = ref[link];
+      }
+      if (!ref) return false;
+    }
+    if (!shared.isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
+      return false;
     }
+    const pp = parts.slice(0, -1);
+    return pp.length === 0 || matchesSelectorRecursive(element, pp);
   }
-  return false;
 }
 function matchesSelectorPart(element, {
   combinator,
@@ -150,15 +169,24 @@ function matchesSelectorPart(element, {
   }
   const link = combinator === Combinator.Child || combinator === Combinator.Descendant ? constants.PARENT : constants.PREV;
   let ref = element[link];
-  if (!ref || !matchesSelectorMatcher(ref, matchers)) {
+  if (!ref) return false;
+
+  // For sibling combinators, skip non-element siblings
+  if (combinator === Combinator.Adjacent && !shared.isElementNode(ref)) {
+    while (ref && !shared.isElementNode(ref)) {
+      ref = ref[link];
+    }
+    if (!ref) return false;
+  }
+  if (!shared.isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
     return false;
   }
   if (combinator === Combinator.Descendant || combinator === Combinator.Sibling) {
     while (ref = ref[link]) {
-      if (matchesSelectorMatcher(ref, matchers)) return true;
+      if (shared.isElementNode(ref) && matchesSelectorMatcher(ref, matchers)) return true;
     }
   }
-  return false;
+  return true;
 }
 function matchesSelectorMatcher(element, matcher) {
   if (!element) return false;
@@ -174,12 +202,17 @@ function matchesSelectorMatcher(element, matcher) {
     value
   } = matcher;
   switch (type) {
+    case MatcherType.Unknown:
+      return name === '*';
+    // Universal selector
     case MatcherType.Element:
       return element.localName === name;
     case MatcherType.Id:
       return element.getAttribute('id') === name;
     case MatcherType.Class:
-      return element.getAttribute('class') === name;
+      const classAttr = element.getAttribute('class');
+      if (!classAttr) return false;
+      return classAttr.split(/\s+/).includes(name);
     case MatcherType.Attribute:
       return value == null ? element.hasAttribute(name) : element.getAttribute(name) === value;
     case MatcherType.Pseudo:
@@ -191,6 +224,8 @@ function matchesSelectorMatcher(element, matcher) {
       switch (name) {
         case 'has':
           return matchesSelector(element, value || '');
+        case 'not':
+          return !matchesSelector(element, value || '');
         default:
           throw Error(`Function :${name}(${value}) not implemented`);
       }

package/build/esm/ClipboardEvent.mjs

@@ -0,0 +1,11 @@
+import { Event } from './Event.mjs';
+
+// https://w3c.github.io/clipboard-apis/#clipboardevent-interface
+class ClipboardEvent extends Event {
+  constructor(type, eventInitDict = {}) {
+    super(type, eventInitDict);
+    this.clipboardData = eventInitDict.clipboardData ?? null;
+  }
+}
+
+export { ClipboardEvent };

package/build/esm/FocusEvent.mjs

@@ -0,0 +1,11 @@
+import { Event } from './Event.mjs';
+
+// https://w3c.github.io/uievents/#interface-focusevent
+class FocusEvent extends Event {
+  constructor(type, eventInitDict = {}) {
+    super(type, eventInitDict);
+    this.relatedTarget = eventInitDict.relatedTarget ?? null;
+  }
+}
+
+export { FocusEvent };

package/build/esm/ToggleEvent.mjs

@@ -0,0 +1,12 @@
+import { Event } from './Event.mjs';
+
+// https://html.spec.whatwg.org/multipage/popover.html#toggleevent
+class ToggleEvent extends Event {
+  constructor(type, eventInitDict) {
+    super(type, eventInitDict);
+    this.oldState = eventInitDict.oldState;
+    this.newState = eventInitDict.newState;
+  }
+}
+
+export { ToggleEvent };

package/build/esm/Window.mjs

@@ -4,6 +4,9 @@ import { EventTarget } from './EventTarget.mjs';
 import { CustomEvent } from './CustomEvent.mjs';
 import { ErrorEvent } from './ErrorEvent.mjs';
 import { PromiseRejectionEvent } from './PromiseRejectionEvent.mjs';
+import { ToggleEvent } from './ToggleEvent.mjs';
+import { FocusEvent } from './FocusEvent.mjs';
+import { ClipboardEvent } from './ClipboardEvent.mjs';
 import { Node } from './Node.mjs';
 import { ParentNode } from './ParentNode.mjs';
 import { ChildNode } from './ChildNode.mjs';
@@ -33,6 +36,9 @@ class Window extends EventTarget {
   Event = (() => Event)();
   ErrorEvent = (() => ErrorEvent)();
   PromiseRejectionEvent = (() => PromiseRejectionEvent)();
+  ToggleEvent = (() => ToggleEvent)();
+  FocusEvent = (() => FocusEvent)();
+  ClipboardEvent = (() => ClipboardEvent)();
   EventTarget = (() => EventTarget)();
   CustomEvent = (() => CustomEvent)();
   Node = (() => Node)();

package/build/esm/selectors.mjs

@@ -49,7 +49,7 @@ function parseSelector(selector) {
     matchers: []
   };
   const parts = [part];
-  const tokenizer = /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:]+)|:(\w+)(?:\((.*?)\))?)/gi;
+  const tokenizer = /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:+~]+)|:(\w+)(?:\((.*?)\))?)/gi;
   let token;
   while (token = tokenizer.exec(selector)) {
     // [1]: ancestor/parent/sibling/adjacent
@@ -76,8 +76,12 @@ function parseSelector(selector) {
       type = token[5] === '#' ? MatcherType.Id : MatcherType.Class;
     } else if (token[7]) {
       type = token[8] == null ? MatcherType.Pseudo : MatcherType.Function;
-    } else if (token[6] && ELEMENT_SELECTOR_TEST.test(token[6])) {
-      type = MatcherType.Element;
+    } else if (token[6]) {
+      if (token[6] === '*') {
+        type = MatcherType.Unknown; // Universal selector matches all
+      } else if (ELEMENT_SELECTOR_TEST.test(token[6])) {
+        type = MatcherType.Element;
+      }
     }
     part.matchers.push({
       type,
@@ -123,19 +127,34 @@ function matchesSelectorRecursive(element, parts) {
   }
   const link = combinator === Combinator.Child || combinator === Combinator.Descendant ? PARENT : PREV;
   let ref = element[link];
-  if (!ref || !matchesSelectorMatcher(ref, matchers)) {
-    return false;
-  }
+  if (!ref) return false;
   if (combinator === Combinator.Descendant || combinator === Combinator.Sibling) {
-    while (ref = ref[link]) {
-      if (matchesSelectorMatcher(ref, matchers)) {
+    // For descendant/sibling combinators, search through all ancestors/siblings
+    while (ref) {
+      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers)) {
         const pp = parts.slice(0, -1);
         if (pp.length === 0) return true;
         if (matchesSelectorRecursive(element, pp)) return true;
       }
+      ref = ref[link];
+    }
+    return false;
+  } else {
+    // For child/adjacent combinators, check only the immediate parent/sibling
+    // For sibling combinators, skip non-element siblings
+    if (combinator === Combinator.Adjacent && !isElementNode(ref)) {
+      // Skip to next element sibling
+      while (ref && !isElementNode(ref)) {
+        ref = ref[link];
+      }
+      if (!ref) return false;
+    }
+    if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
+      return false;
     }
+    const pp = parts.slice(0, -1);
+    return pp.length === 0 || matchesSelectorRecursive(element, pp);
   }
-  return false;
 }
 function matchesSelectorPart(element, {
   combinator,
@@ -146,15 +165,24 @@ function matchesSelectorPart(element, {
   }
   const link = combinator === Combinator.Child || combinator === Combinator.Descendant ? PARENT : PREV;
   let ref = element[link];
-  if (!ref || !matchesSelectorMatcher(ref, matchers)) {
+  if (!ref) return false;
+
+  // For sibling combinators, skip non-element siblings
+  if (combinator === Combinator.Adjacent && !isElementNode(ref)) {
+    while (ref && !isElementNode(ref)) {
+      ref = ref[link];
+    }
+    if (!ref) return false;
+  }
+  if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
     return false;
   }
   if (combinator === Combinator.Descendant || combinator === Combinator.Sibling) {
     while (ref = ref[link]) {
-      if (matchesSelectorMatcher(ref, matchers)) return true;
+      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers)) return true;
     }
   }
-  return false;
+  return true;
 }
 function matchesSelectorMatcher(element, matcher) {
   if (!element) return false;
@@ -170,12 +198,17 @@ function matchesSelectorMatcher(element, matcher) {
     value
   } = matcher;
   switch (type) {
+    case MatcherType.Unknown:
+      return name === '*';
+    // Universal selector
     case MatcherType.Element:
       return element.localName === name;
     case MatcherType.Id:
       return element.getAttribute('id') === name;
     case MatcherType.Class:
-      return element.getAttribute('class') === name;
+      const classAttr = element.getAttribute('class');
+      if (!classAttr) return false;
+      return classAttr.split(/\s+/).includes(name);
     case MatcherType.Attribute:
       return value == null ? element.hasAttribute(name) : element.getAttribute(name) === value;
     case MatcherType.Pseudo:
@@ -187,6 +220,8 @@ function matchesSelectorMatcher(element, matcher) {
       switch (name) {
         case 'has':
           return matchesSelector(element, value || '');
+        case 'not':
+          return !matchesSelector(element, value || '');
         default:
           throw Error(`Function :${name}(${value}) not implemented`);
       }

package/build/esnext/ClipboardEvent.esnext

@@ -0,0 +1,11 @@
+import { Event } from './Event.esnext';
+
+class ClipboardEvent extends Event {
+  clipboardData;
+  constructor(type, eventInitDict = {}) {
+    super(type, eventInitDict);
+    this.clipboardData = eventInitDict.clipboardData ?? null;
+  }
+}
+
+export { ClipboardEvent };

package/build/esnext/FocusEvent.esnext

@@ -0,0 +1,11 @@
+import { Event } from './Event.esnext';
+
+class FocusEvent extends Event {
+  relatedTarget;
+  constructor(type, eventInitDict = {}) {
+    super(type, eventInitDict);
+    this.relatedTarget = eventInitDict.relatedTarget ?? null;
+  }
+}
+
+export { FocusEvent };

package/build/esnext/ToggleEvent.esnext

@@ -0,0 +1,13 @@
+import { Event } from './Event.esnext';
+
+class ToggleEvent extends Event {
+  oldState;
+  newState;
+  constructor(type, eventInitDict) {
+    super(type, eventInitDict);
+    this.oldState = eventInitDict.oldState;
+    this.newState = eventInitDict.newState;
+  }
+}
+
+export { ToggleEvent };

package/build/esnext/Window.esnext

@@ -4,6 +4,9 @@ import { EventTarget } from './EventTarget.esnext';
 import { CustomEvent } from './CustomEvent.esnext';
 import { ErrorEvent } from './ErrorEvent.esnext';
 import { PromiseRejectionEvent } from './PromiseRejectionEvent.esnext';
+import { ToggleEvent } from './ToggleEvent.esnext';
+import { FocusEvent } from './FocusEvent.esnext';
+import { ClipboardEvent } from './ClipboardEvent.esnext';
 import { Node } from './Node.esnext';
 import { ParentNode } from './ParentNode.esnext';
 import { ChildNode } from './ChildNode.esnext';
@@ -33,6 +36,9 @@ class Window extends EventTarget {
   Event = Event;
   ErrorEvent = ErrorEvent;
   PromiseRejectionEvent = PromiseRejectionEvent;
+  ToggleEvent = ToggleEvent;
+  FocusEvent = FocusEvent;
+  ClipboardEvent = ClipboardEvent;
   EventTarget = EventTarget;
   CustomEvent = CustomEvent;
   Node = Node;

package/build/esnext/selectors.esnext

@@ -28,7 +28,7 @@ function querySelectorAll(within, selector) {
 function parseSelector(selector) {
   let part = { combinator: 4 /* Inner */, matchers: [] };
   const parts = [part];
-  const tokenizer = /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:]+)|:(\w+)(?:\((.*?)\))?)/gi;
+  const tokenizer = /\s*?([>\s+~]?)\s*?(?:(?:\[\s*([^\]=]+)(?:=(['"])(.*?)\3)?\s*\])|([#.]?)([^\s#.[>:+~]+)|:(\w+)(?:\((.*?)\))?)/gi;
   let token;
   while (token = tokenizer.exec(selector)) {
     if (token[1]) {
@@ -46,8 +46,12 @@ function parseSelector(selector) {
       type = token[5] === "#" ? 2 /* Id */ : 3 /* Class */;
     } else if (token[7]) {
       type = token[8] == null ? 5 /* Pseudo */ : 6 /* Function */;
-    } else if (token[6] && ELEMENT_SELECTOR_TEST.test(token[6])) {
-      type = 1 /* Element */;
+    } else if (token[6]) {
+      if (token[6] === "*") {
+        type = 0 /* Unknown */;
+      } else if (ELEMENT_SELECTOR_TEST.test(token[6])) {
+        type = 1 /* Element */;
+      }
     }
     part.matchers.push({
       type,
@@ -90,19 +94,30 @@ function matchesSelectorRecursive(element, parts) {
   }
   const link = combinator === 1 /* Child */ || combinator === 0 /* Descendant */ ? PARENT : PREV;
   let ref = element[link];
-  if (!ref || !matchesSelectorMatcher(ref, matchers)) {
-    return false;
-  }
+  if (!ref) return false;
   if (combinator === 0 /* Descendant */ || combinator === 2 /* Sibling */) {
-    while (ref = ref[link]) {
-      if (matchesSelectorMatcher(ref, matchers)) {
+    while (ref) {
+      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers)) {
         const pp = parts.slice(0, -1);
         if (pp.length === 0) return true;
         if (matchesSelectorRecursive(element, pp)) return true;
       }
+      ref = ref[link];
+    }
+    return false;
+  } else {
+    if (combinator === 3 /* Adjacent */ && !isElementNode(ref)) {
+      while (ref && !isElementNode(ref)) {
+        ref = ref[link];
+      }
+      if (!ref) return false;
+    }
+    if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
+      return false;
     }
+    const pp = parts.slice(0, -1);
+    return pp.length === 0 || matchesSelectorRecursive(element, pp);
   }
-  return false;
 }
 function matchesSelectorPart(element, { combinator, matchers }) {
   if (combinator === 4 /* Inner */) {
@@ -110,15 +125,23 @@ function matchesSelectorPart(element, { combinator, matchers }) {
   }
   const link = combinator === 1 /* Child */ || combinator === 0 /* Descendant */ ? PARENT : PREV;
   let ref = element[link];
-  if (!ref || !matchesSelectorMatcher(ref, matchers)) {
+  if (!ref) return false;
+  if (combinator === 3 /* Adjacent */ && !isElementNode(ref)) {
+    while (ref && !isElementNode(ref)) {
+      ref = ref[link];
+    }
+    if (!ref) return false;
+  }
+  if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers)) {
     return false;
   }
   if (combinator === 0 /* Descendant */ || combinator === 2 /* Sibling */) {
     while (ref = ref[link]) {
-      if (matchesSelectorMatcher(ref, matchers)) return true;
+      if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers))
+        return true;
     }
   }
-  return false;
+  return true;
 }
 function matchesSelectorMatcher(element, matcher) {
   if (!element) return false;
@@ -130,12 +153,17 @@ function matchesSelectorMatcher(element, matcher) {
   }
   const { type, name, value } = matcher;
   switch (type) {
+    case 0 /* Unknown */:
+      return name === "*";
+    // Universal selector
     case 1 /* Element */:
       return element.localName === name;
     case 2 /* Id */:
       return element.getAttribute("id") === name;
     case 3 /* Class */:
-      return element.getAttribute("class") === name;
+      const classAttr = element.getAttribute("class");
+      if (!classAttr) return false;
+      return classAttr.split(/\s+/).includes(name);
     case 4 /* Attribute */:
       return value == null ? element.hasAttribute(name) : element.getAttribute(name) === value;
     case 5 /* Pseudo */:
@@ -147,6 +175,8 @@ function matchesSelectorMatcher(element, matcher) {
       switch (name) {
         case "has":
           return matchesSelector(element, value || "");
+        case "not":
+          return !matchesSelector(element, value || "");
         default:
           throw Error(`Function :${name}(${value}) not implemented`);
       }