@remote-dom/polyfill 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @remote-dom/polyfill
 
+## 1.2.1
+
+### Patch Changes
+
+- [#419](https://github.com/Shopify/remote-dom/pull/419) [`3c6bd29`](https://github.com/Shopify/remote-dom/commit/3c6bd291121b9fa02cac4ba57274601e97b2a2d2) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix synchronization of `slot` property in some edge cases
+
+## 1.2.0
+
+### Minor Changes
+
+- [#411](https://github.com/Shopify/remote-dom/pull/411) [`3bec698`](https://github.com/Shopify/remote-dom/commit/3bec6983756c4b8a6834a037ac520438ef59d28f) Thanks [@lemonmade](https://github.com/lemonmade)! - Add CommonJS export conditions
+
 ## 1.1.0
 
 ### Minor Changes

package/build/cjs/Attr.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const Node = require('./Node.cjs');
+
+class Attr extends Node.Node {
+  nodeType = constants.NodeType.ATTRIBUTE_NODE;
+  [constants.NS] = null;
+  [constants.NEXT] = null;
+  [constants.OWNER_ELEMENT] = null;
+  isConnected = false;
+  constructor(name, value, namespace) {
+    super();
+    this[constants.NAME] = name;
+    this[constants.VALUE] = value;
+    if (namespace) this[constants.NS] = namespace;
+  }
+  get nodeName() {
+    return this[constants.NAME];
+  }
+  set nodeName(_readonly) {}
+  get name() {
+    return this[constants.NAME];
+  }
+  set name(_readonly) {}
+  get value() {
+    return this[constants.VALUE];
+  }
+  set value(value) {
+    const str = String(value);
+    this[constants.VALUE] = str;
+    const ownerElement = this[constants.OWNER_ELEMENT];
+    if (!ownerElement) return;
+    this[constants.HOOKS].setAttribute?.(ownerElement, this[constants.NAME], str, this[constants.NS]);
+  }
+  get nodeValue() {
+    return this.value;
+  }
+  set nodeValue(value) {
+    this.value = value;
+  }
+  get ownerElement() {
+    return this[constants.OWNER_ELEMENT];
+  }
+  get namespaceURI() {
+    return this[constants.NS];
+  }
+  get specified() {
+    return true;
+  }
+}
+
+exports.Attr = Attr;

package/build/cjs/CharacterData.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const ChildNode = require('./ChildNode.cjs');
+
+class CharacterData extends ChildNode.ChildNode {
+  [constants.DATA] = '';
+  constructor(data) {
+    super();
+    this[constants.DATA] = data == null ? '' : String(data);
+  }
+  setData(data) {
+    let str = '';
+    if (data != null) {
+      str = typeof data === 'string' ? data : String(data);
+    }
+    this[constants.DATA] = str;
+    this[constants.HOOKS].setText?.(this, str);
+  }
+  get data() {
+    return this[constants.DATA];
+  }
+  set data(data) {
+    this.setData(data);
+  }
+}
+
+exports.CharacterData = CharacterData;

package/build/cjs/ChildNode.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const Node = require('./Node.cjs');
+
+class ChildNode extends Node.Node {
+  remove() {
+    const parent = this.parentNode;
+    if (!parent) return;
+    parent.removeChild(this);
+  }
+  replaceWith(...nodes) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const node = toNode(parent, nodes[0]);
+    const next = node[constants.NEXT];
+    parent.replaceChild(this, node);
+    for (let i = 1; i < nodes.length; i++) {
+      parent.insertBefore(toNode(parent, nodes[i]), next);
+    }
+  }
+  before(...nodes) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    for (const node of nodes) {
+      parent.insertBefore(toNode(parent, node), this);
+    }
+  }
+  after(...nodes) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const next = this[constants.NEXT];
+    for (const node of nodes) {
+      parent.insertBefore(toNode(parent, node), next);
+    }
+  }
+}
+function toNode(parent, node) {
+  if (node instanceof Node.Node) return node;
+  const ownerDocument = parent.ownerDocument;
+  return ownerDocument.createTextNode(String(node));
+}
+
+exports.ChildNode = ChildNode;
+exports.toNode = toNode;

package/build/cjs/Comment.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const CharacterData = require('./CharacterData.cjs');
+
+class Comment extends CharacterData.CharacterData {
+  nodeType = 8;
+  [constants.NAME] = '#comment';
+}
+
+exports.Comment = Comment;

package/build/cjs/CustomElementRegistry.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+class CustomElementRegistryImplementation {
+  registry = new Map();
+  listenersByName = new Map();
+  define(name, Constructor, _options) {
+    this.registry.set(name, Constructor);
+    const listeners = this.listenersByName.get(name);
+    if (listeners == null) return;
+    this.listenersByName.delete(name);
+    for (const listener of listeners) {
+      listener(Constructor);
+    }
+  }
+  get(name) {
+    return this.registry.get(name);
+  }
+  getName(Constructor) {
+    for (const [name, value] of this.registry) {
+      if (value === Constructor) return name;
+    }
+    return null;
+  }
+  whenDefined(name) {
+    const Constructor = this.registry.get(name);
+    if (Constructor != null) return Promise.resolve(Constructor);
+    let listeners = this.listenersByName.get(name);
+    if (listeners == null) {
+      listeners = [];
+      this.listenersByName.set(name, listeners);
+    }
+    return new Promise(resolve => {
+      listeners.push(resolve);
+    });
+  }
+  upgrade(_root) {
+    // TODO
+  }
+}
+
+exports.CustomElementRegistryImplementation = CustomElementRegistryImplementation;

package/build/cjs/CustomEvent.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Event = require('./Event.cjs');
+
+class CustomEvent extends Event.Event {
+  /**
+   * Returns any custom data event was created with. Typically used for synthetic events.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+   */
+
+  constructor(type, eventInitDict) {
+    super(type, eventInitDict);
+    this.detail = eventInitDict?.detail;
+  }
+
+  /**
+   * Returns any custom data event was created with. Typically used for synthetic events.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+   */
+  initCustomEvent(type, bubbles, cancelable, detail) {
+    super.initEvent(type, bubbles, cancelable);
+    this.detail = detail;
+  }
+}
+
+exports.CustomEvent = CustomEvent;

package/build/cjs/Document.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const Event = require('./Event.cjs');
+const ParentNode = require('./ParentNode.cjs');
+const Element = require('./Element.cjs');
+const SVGElement = require('./SVGElement.cjs');
+const Text = require('./Text.cjs');
+const Comment = require('./Comment.cjs');
+const DocumentFragment = require('./DocumentFragment.cjs');
+const HTMLTemplateElement = require('./HTMLTemplateElement.cjs');
+const shared = require('./shared.cjs');
+const HTMLBodyElement = require('./HTMLBodyElement.cjs');
+const HTMLHeadElement = require('./HTMLHeadElement.cjs');
+const HTMLHtmlElement = require('./HTMLHtmlElement.cjs');
+
+class Document extends ParentNode.ParentNode {
+  nodeType = constants.NodeType.DOCUMENT_NODE;
+  [constants.NAME] = '#document';
+  constructor(defaultView) {
+    super();
+    this.defaultView = defaultView;
+    this[constants.OWNER_DOCUMENT] = this;
+    this.documentElement = setupElement(new HTMLHtmlElement.HTMLHtmlElement(), this, 'html');
+    this.body = setupElement(new HTMLBodyElement.HTMLBodyElement(), this, 'body');
+    this.head = setupElement(new HTMLHeadElement.HTMLHeadElement(), this, 'head');
+    this.documentElement.appendChild(this.head);
+    this.documentElement.appendChild(this.body);
+  }
+  createElement(localName) {
+    return createElement(this, localName);
+  }
+  createElementNS(namespaceURI, localName) {
+    return createElement(this, localName, namespaceURI);
+  }
+  createTextNode(data) {
+    return createNode(new Text.Text(data), this);
+  }
+  createComment(data) {
+    return createNode(new Comment.Comment(data), this);
+  }
+  createDocumentFragment() {
+    return createNode(new DocumentFragment.DocumentFragment(), this);
+  }
+  createEvent() {
+    return new Event.Event('');
+  }
+  importNode(node, deep) {
+    return shared.cloneNode(node, deep, this);
+  }
+  adoptNode(node) {
+    if (node[constants.OWNER_DOCUMENT] === this) return node;
+    node.parentNode?.removeChild(node);
+    adoptNode(node, this);
+    return node;
+  }
+}
+function createNode(node, ownerDocument) {
+  Object.defineProperty(node, constants.OWNER_DOCUMENT, {
+    value: ownerDocument,
+    writable: true,
+    enumerable: false
+  });
+  return node;
+}
+function createElement(ownerDocument, name, namespace) {
+  let element;
+  const lowerName = String(name).toLowerCase();
+  if (namespace === constants.NamespaceURI.SVG) {
+    element = new SVGElement.SVGElement();
+  } else if (lowerName === 'template') {
+    element = new HTMLTemplateElement.HTMLTemplateElement();
+  } else {
+    const CustomElement = ownerDocument.defaultView.customElements.get(name);
+    element = CustomElement ? new CustomElement() : new Element.Element();
+  }
+  return setupElement(element, ownerDocument, name, namespace);
+}
+function setupElement(element, ownerDocument, name, namespace) {
+  createNode(element, ownerDocument);
+  Object.defineProperty(element, constants.NAME, {
+    value: name
+  });
+  if (namespace) {
+    Object.defineProperty(element, constants.NS, {
+      value: namespace
+    });
+  }
+  ownerDocument[constants.HOOKS].createElement?.(element, namespace);
+  return element;
+}
+function adoptNode(node, document) {
+  node[constants.OWNER_DOCUMENT] = document;
+  if (shared.isParentNode(node)) {
+    for (const child of node.childNodes) {
+      adoptNode(child, document);
+    }
+  }
+}
+
+exports.Document = Document;
+exports.adoptNode = adoptNode;
+exports.createElement = createElement;
+exports.createNode = createNode;
+exports.setupElement = setupElement;

package/build/cjs/DocumentFragment.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const ParentNode = require('./ParentNode.cjs');
+
+class DocumentFragment extends ParentNode.ParentNode {
+  nodeType = constants.NodeType.DOCUMENT_FRAGMENT_NODE;
+  [constants.NAME] = '#document-fragment';
+  [constants.OWNER_DOCUMENT] = window.document;
+}
+
+exports.DocumentFragment = DocumentFragment;

package/build/cjs/Element.cjs

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const ParentNode = require('./ParentNode.cjs');
+const NamedNodeMap = require('./NamedNodeMap.cjs');
+const Attr = require('./Attr.cjs');
+const serialization = require('./serialization.cjs');
+
+class Element extends ParentNode.ParentNode {
+  nodeType = constants.NodeType.ELEMENT_NODE;
+  [constants.NS] = constants.NamespaceURI.XHTML;
+  get namespaceURI() {
+    return this[constants.NS];
+  }
+  get tagName() {
+    return this.nodeName;
+  }
+  get slot() {
+    return this.getAttribute('slot') ?? '';
+  }
+  set slot(slot) {
+    const finalSlot = String(slot);
+    if (this.getAttribute('slot') !== finalSlot) {
+      this.attributes.setNamedItem(new Attr.Attr('slot', finalSlot));
+    }
+  }
+  get attributes() {
+    let attributes = this[constants.ATTRIBUTES];
+    if (!attributes) {
+      attributes = new NamedNodeMap.NamedNodeMap(this);
+      this[constants.ATTRIBUTES] = attributes;
+    }
+    return attributes;
+  }
+  get firstElementChild() {
+    return this.children[0] ?? null;
+  }
+  get lastElementChild() {
+    return this.children[this.children.length - 1] ?? null;
+  }
+  get nextElementSibling() {
+    let sib = this.nextSibling;
+    while (sib && sib.nodeType !== 1) sib = sib.nextSibling;
+    return sib;
+  }
+  get previewElementSibling() {
+    let sib = this.previousSibling;
+    while (sib && sib.nodeType !== 1) sib = sib.previousSibling;
+    return sib;
+  }
+  setAttribute(name, value) {
+    this.attributes.setNamedItem(new Attr.Attr(name, String(value)));
+  }
+  setAttributeNS(namespace, name, value) {
+    this.attributes.setNamedItemNS(new Attr.Attr(name, String(value), namespace));
+  }
+  getAttribute(name) {
+    const attr = this.attributes.getNamedItem(name);
+    return attr && attr.value;
+  }
+  getAttributeNS(namespace, name) {
+    const attr = this.attributes.getNamedItemNS(namespace, name);
+    return attr && attr.value;
+  }
+  hasAttribute(name) {
+    const attr = this.attributes.getNamedItem(name);
+    return attr != null;
+  }
+  hasAttributeNS(namespace, name) {
+    const attr = this.attributes.getNamedItemNS(namespace, name);
+    return attr != null;
+  }
+  removeAttribute(name) {
+    this.attributes.removeNamedItem(name);
+  }
+  removeAttributeNS(namespace, name) {
+    this.attributes.removeNamedItemNS(namespace, name);
+  }
+  get outerHTML() {
+    return serialization.serializeNode(this);
+  }
+  get innerHTML() {
+    return serialization.serializeChildren(this);
+  }
+  set innerHTML(html) {
+    if (html == null || html === '') {
+      this.replaceChildren();
+    } else {
+      const fragment = serialization.parseHtml(String(html), this);
+      this.replaceChildren(fragment);
+    }
+  }
+}
+
+exports.Element = Element;

package/build/cjs/Event.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+
+let EventPhase = /*#__PURE__*/function (EventPhase) {
+  EventPhase[EventPhase["NONE"] = 0] = "NONE";
+  EventPhase[EventPhase["CAPTURING_PHASE"] = 1] = "CAPTURING_PHASE";
+  EventPhase[EventPhase["AT_TARGET"] = 2] = "AT_TARGET";
+  EventPhase[EventPhase["BUBBLING_PHASE"] = 3] = "BUBBLING_PHASE";
+  return EventPhase;
+}({});
+const CAPTURE_MARKER = '@';
+const now = typeof performance === 'undefined' ? Date.now : performance.now.bind(performance);
+class Event {
+  static NONE = EventPhase.NONE;
+  static CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
+  static AT_TARGET = EventPhase.AT_TARGET;
+  static BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
+
+  // NONE = EventPhase.NONE;
+  // CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
+  // AT_TARGET = EventPhase.AT_TARGET;
+  // BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
+
+  timeStamp = now();
+  target = null;
+  currentTarget = null;
+  srcElement = null;
+  bubbles = false;
+  cancelable = false;
+  composed = false;
+  defaultPrevented = false;
+  cancelBubble = false;
+  immediatePropagationStopped = false;
+  eventPhase = 0;
+  path = [];
+  // private inPassiveListener = false;
+
+  constructor(type, options) {
+    this.type = type;
+    Object.defineProperty(this, constants.IS_TRUSTED, {
+      writable: true,
+      value: false
+    });
+    if (options) {
+      if (options.bubbles) this.bubbles = options.bubbles;
+      if (options.cancelable) this.cancelable = options.cancelable;
+      if (options.composed) this.composed = options.composed;
+    }
+  }
+  get composedPath() {
+    return this.path;
+  }
+  get isTrusted() {
+    return this[constants.IS_TRUSTED];
+  }
+  stopPropagation() {
+    this.cancelBubble = true;
+  }
+  stopImmediatePropagation() {
+    this.immediatePropagationStopped = true;
+  }
+  preventDefault() {
+    this.defaultPrevented = true;
+  }
+  set returnValue(value) {
+    this.defaultPrevented = value;
+  }
+  get returnValue() {
+    return this.defaultPrevented;
+  }
+
+  /** @deprecated */
+  initEvent(type, bubbles, cancelable) {
+    this.type = type;
+    this.bubbles = Boolean(bubbles);
+    this.cancelable = Boolean(cancelable);
+  }
+}
+function fireEvent(event, target, phase) {
+  const listeners = target[constants.LISTENERS];
+  const list = listeners?.get(`${event.type}${phase === EventPhase.CAPTURING_PHASE ? CAPTURE_MARKER : ''}`);
+  if (!list) return false;
+  let defaultPrevented = false;
+  for (const listener of list) {
+    event.eventPhase = phase;
+    event.currentTarget = target;
+    try {
+      if (typeof listener === 'object') {
+        listener.handleEvent(event);
+      } else {
+        listener.call(target, event);
+      }
+    } catch (err) {
+      setTimeout(thrower, 0, err);
+    }
+    if (event.defaultPrevented === true) {
+      defaultPrevented = true;
+    }
+    if (event.immediatePropagationStopped) {
+      break;
+    }
+  }
+  return defaultPrevented;
+}
+function thrower(error) {
+  throw error;
+}
+
+exports.CAPTURE_MARKER = CAPTURE_MARKER;
+exports.Event = Event;
+exports.EventPhase = EventPhase;
+exports.fireEvent = fireEvent;

package/build/cjs/EventTarget.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const Event = require('./Event.cjs');
+
+const ONCE_LISTENERS = Symbol('onceListeners');
+class EventTarget {
+  /**
+   * Property set by entities that extend this class that are part of the DOM tree.
+   * @internal
+   */
+
+  addEventListener(type, listener, options) {
+    if (listener == null) return;
+    const capture = options === true || options && options.capture === true;
+    const once = typeof options === 'object' && options.once === true;
+    const signal = typeof options === 'object' ? options.signal : undefined;
+    const key = `${type}${capture ? Event.CAPTURE_MARKER : ''}`;
+    let normalizedListener = listener;
+    if (once) {
+      normalizedListener = function normalizedListener(...args) {
+        this.removeEventListener(type, listener, options);
+        return typeof listener === 'object' ? listener.handleEvent(...args) : listener.call(this, ...args);
+      };
+      let onceListeners = this[ONCE_LISTENERS];
+      if (!onceListeners) {
+        onceListeners = new WeakMap();
+        this[ONCE_LISTENERS] = onceListeners;
+      }
+      onceListeners.set(listener, normalizedListener);
+    }
+    let listeners = this[constants.LISTENERS];
+    if (!listeners) {
+      listeners = new Map();
+      this[constants.LISTENERS] = listeners;
+    }
+    let list = listeners.get(key);
+    if (!list) {
+      list = new Set();
+      listeners.set(key, list);
+    }
+    if (list.has(normalizedListener)) return;
+    signal?.addEventListener('abort', () => {
+      removeEventListener.call(this, type, listener, options);
+    }, {
+      once: true
+    });
+    list.add(normalizedListener);
+    this[constants.OWNER_DOCUMENT]?.defaultView[constants.HOOKS].addEventListener?.(this, type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    return removeEventListener.call(this, type, listener, options);
+  }
+
+  // function isChildNode(node: EventTarget): node is ChildNode {
+  //   return PARENT in node;
+  // }
+
+  dispatchEvent(event) {
+    const path = [];
+    // instanceof here is just to keep TypeScript happy
+    let target = this;
+    while (target != null) {
+      path.push(target);
+      target = target.parentNode;
+    }
+    // while (target instanceof Node && (target = target.parentNode)) {
+    //   path.push(target);
+    // }
+    event.target = this;
+    event.srcElement = this;
+    event.path = path;
+    let defaultPrevented = false;
+    for (let i = path.length; --i;) {
+      if (Event.fireEvent(event, path[i], Event.EventPhase.CAPTURING_PHASE)) {
+        defaultPrevented = true;
+      }
+    }
+    if (Event.fireEvent(event, this, Event.EventPhase.AT_TARGET)) {
+      defaultPrevented = true;
+    }
+    for (let i = 1; i < path.length; i++) {
+      if (Event.fireEvent(event, path[i], Event.EventPhase.BUBBLING_PHASE)) {
+        defaultPrevented = true;
+      }
+    }
+    return !defaultPrevented;
+  }
+}
+function removeEventListener(type, listener, options) {
+  if (listener == null) return;
+  const onceListeners = this[ONCE_LISTENERS];
+  const normalizedListener = onceListeners?.get(listener) ?? listener;
+  onceListeners?.delete(listener);
+  const capture = options === true || options && options.capture === true;
+  const key = `${type}${capture ? Event.CAPTURE_MARKER : ''}`;
+  const list = this[constants.LISTENERS]?.get(key);
+  if (list) {
+    const deleted = list.delete(normalizedListener);
+    if (deleted) {
+      this[constants.OWNER_DOCUMENT]?.defaultView[constants.HOOKS].removeEventListener?.(this, type, listener, options);
+    }
+  }
+}
+
+exports.EventTarget = EventTarget;

package/build/cjs/HTMLBodyElement.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Element = require('./Element.cjs');
+
+class HTMLBodyElement extends Element.Element {}
+
+exports.HTMLBodyElement = HTMLBodyElement;