@remote-dom/polyfill 1.2.1 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,175 @@
 # @remote-dom/polyfill
 
+## 1.3.1
+
+### Patch Changes
+
+- [#436](https://github.com/Shopify/remote-dom/pull/436) [`5979797`](https://github.com/Shopify/remote-dom/commit/59797975a3ccf2bee825809f67e05ca4a28e2647) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Ensure the `createText` hook is called when creating a new text node
+
+## 1.3.0
+
+### Minor Changes
+
+- [#389](https://github.com/Shopify/remote-dom/pull/389) [`2479b21`](https://github.com/Shopify/remote-dom/commit/2479b21406f6149063bfc095dbb6c3a019386403) Thanks [@lemonmade](https://github.com/lemonmade)! - Added native support for synchronizing attributes and event listeners
+
+  Previously, Remote DOM only offered “remote properties” as a way to synchronize element state between the host and remote environments. These remote properties effectively synchronize a subset of a custom element’s instance properties. The `RemoteElement` class offers [a declarative way to define the properties that should be synchronized](/packages/core/README.md#remote-properties).
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteProperties() {
+      return ['label'];
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+  myElement.label = 'Hello, World!';
+  ```
+
+  The same `remoteProperties` configuration can create special handling for attributes and event listeners. By default, a remote property is automatically updated when setting an [attribute](https://developer.mozilla.org/en-US/docs/Glossary/Attribute) of the same name:
+
+  ```ts
+  const myElement = document.createElement('my-element');
+  myElement.setAttribute('label', 'Hello, World!');
+
+  // myElement.label === 'Hello, World!', and this value is synchronized
+  // with the host environment as a “remote property”
+  ```
+
+  Similarly, a remote property can be automatically updated when adding an event listener based on a conventional `on` property naming prefix:
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteProperties() {
+      return {
+        onChange: {
+          event: true,
+        },
+      };
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+
+  // This adds a callback property that is synchronized with the host environment
+  myElement.onChange = () => console.log('Changed!');
+
+  // And so does this, but using the `addEventListener` method instead
+  myElement.addEventListener('change', () => console.log('Changed!'));
+  ```
+
+  These utilities are handy, but they don’t align with patterns in native DOM elements, particularly when it comes to events. Now, both of these can be represented in a fashion that is more conventional in HTML. The `remoteAttributes` configuration allows you to define a set of element attributes that will be synchronized directly the host environment, instead of being treated as instance properties:
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteAttributes() {
+      return ['label'];
+    }
+
+    // If you want to add instance properties, you can do it with getters and
+    // setters that manipulate the attribute value:
+    //
+    // get label() {
+    //   return this.getAttribute('label');
+    // }
+    //
+    // set label(value) {
+    //   this.setAttribute('label', value);
+    // }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+  myElement.setAttribute('label', 'Hello, World!');
+  ```
+
+  Similarly, the `remoteEvents` configuration allows you to define a set of event listeners that will be synchronized directly with the host environment:
+
+  ```ts
+  import {RemoteElement} from '@remote-dom/core/elements';
+
+  class MyElement extends RemoteElement {
+    static get remoteEvents() {
+      return ['change'];
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+
+  // And so does this, but using the `addEventListener` method instead
+  myElement.addEventListener('change', () => console.log('Changed!'));
+
+  // No `myElement.onChange` property is created
+  ```
+
+  The `remoteProperties` configuration will continue to be supported for cases where you want to synchronize instance properties. Because instance properties can be any JavaScript type, properties are the highest-fidelity field that can be synchronized between the remote and host environments. However, adding event listeners using the `remoteProperties.event` configuration is **deprecated and will be removed in the next major version**. You should use the `remoteEvents` configuration instead. If you were previously defining remote properties which only accepted strings, consider using the `remoteAttributes` configuration, which stores the value entirely in an HTML attribute instead.
+
+  This change is being released in a backwards-compatible way, so you can continue to use the existing `remoteProperties` configuration on host and/or remote environments without any code changes.
+
+  All host utilities have been updated to support the new `attributes` and `eventListeners` property that are synchronized with the remote environment. This includes updates to the [React](/packages/react/README.md#event-listener-props) and [Preact hosts to map events to conventional callback props](/packages/preact/README.md#event-listener-props), and updates to the [`DOMRemoteReceiver` class](/packages/core/README.md#domremotereceiver), which now applies fields to the host element exactly as they were applied in the remote environment:
+
+  ```ts
+  // Remote environment:
+
+  class MyElement extends RemoteElement {
+    static get remoteEvents() {
+      return ['change'];
+    }
+  }
+
+  customElements.define('my-element', MyElement);
+
+  const myElement = document.createElement('my-element');
+
+  myElement.addEventListener('change', (event) => {
+    console.log('Changed! New value: ', event.detail);
+  });
+
+  // Host environment:
+
+  class MyElement extends HTMLElement {
+    connectedCallback() {
+      // Emit a change event on this element, with detail that will be passed
+      // to the remote environment
+      this.addEventListener('change', (event) => {
+        event.stopImmediatePropagation();
+
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            detail: this.value,
+          }),
+        );
+      });
+    }
+
+    // Additional implementation details of the host custom element...
+  }
+
+  customElements.define('my-element', MyElement);
+  ```
+
+### Patch Changes
+
+- [#389](https://github.com/Shopify/remote-dom/pull/389) [`2479b21`](https://github.com/Shopify/remote-dom/commit/2479b21406f6149063bfc095dbb6c3a019386403) Thanks [@lemonmade](https://github.com/lemonmade)! - Bug fixes to event dispatching
+
+  - Listeners on the target are now called during both the capture and bubble phases.
+  - `stopPropagation` now respected.
+  - `stopImmediatePropagation` now also stops regular propagation.
+
+- [#389](https://github.com/Shopify/remote-dom/pull/389) [`2479b21`](https://github.com/Shopify/remote-dom/commit/2479b21406f6149063bfc095dbb6c3a019386403) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix `Event.bubbles` and `Event.composedPath()` implementations
+
 ## 1.2.1
 
 ### Patch Changes

package/build/cjs/Attr.cjs

@@ -6,7 +6,7 @@ const constants = require('./constants.cjs');
 const Node = require('./Node.cjs');
 
 class Attr extends Node.Node {
-  nodeType = constants.NodeType.ATTRIBUTE_NODE;
+  nodeType = (() => constants.NodeType.ATTRIBUTE_NODE)();
   [constants.NS] = null;
   [constants.NEXT] = null;
   [constants.OWNER_ELEMENT] = null;

package/build/cjs/CustomElementRegistry.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 class CustomElementRegistryImplementation {
-  registry = new Map();
-  listenersByName = new Map();
+  registry = (() => new Map())();
+  listenersByName = (() => new Map())();
   define(name, Constructor, _options) {
     this.registry.set(name, Constructor);
     const listeners = this.listenersByName.get(name);

package/build/cjs/Document.cjs

@@ -17,7 +17,7 @@ const HTMLHeadElement = require('./HTMLHeadElement.cjs');
 const HTMLHtmlElement = require('./HTMLHtmlElement.cjs');
 
 class Document extends ParentNode.ParentNode {
-  nodeType = constants.NodeType.DOCUMENT_NODE;
+  nodeType = (() => constants.NodeType.DOCUMENT_NODE)();
   [constants.NAME] = '#document';
   constructor(defaultView) {
     super();
@@ -36,7 +36,9 @@ class Document extends ParentNode.ParentNode {
     return createElement(this, localName, namespaceURI);
   }
   createTextNode(data) {
-    return createNode(new Text.Text(data), this);
+    const text = createNode(new Text.Text(data), this);
+    this[constants.HOOKS].createText?.(text, String(data));
+    return text;
   }
   createComment(data) {
     return createNode(new Comment.Comment(data), this);

package/build/cjs/DocumentFragment.cjs

@@ -6,9 +6,9 @@ const constants = require('./constants.cjs');
 const ParentNode = require('./ParentNode.cjs');
 
 class DocumentFragment extends ParentNode.ParentNode {
-  nodeType = constants.NodeType.DOCUMENT_FRAGMENT_NODE;
+  nodeType = (() => constants.NodeType.DOCUMENT_FRAGMENT_NODE)();
   [constants.NAME] = '#document-fragment';
-  [constants.OWNER_DOCUMENT] = window.document;
+  [constants.OWNER_DOCUMENT] = (() => window.document)();
 }
 
 exports.DocumentFragment = DocumentFragment;

package/build/cjs/Element.cjs

@@ -9,8 +9,8 @@ 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;
+  nodeType = (() => constants.NodeType.ELEMENT_NODE)();
+  [constants.NS] = (() => constants.NamespaceURI.XHTML)();
   get namespaceURI() {
     return this[constants.NS];
   }
@@ -34,6 +34,9 @@ class Element extends ParentNode.ParentNode {
     }
     return attributes;
   }
+  getAttributeNames() {
+    return [...this.attributes].map(attr => attr.name);
+  }
   get firstElementChild() {
     return this.children[0] ?? null;
   }

package/build/cjs/Event.cjs

@@ -14,17 +14,17 @@ let EventPhase = /*#__PURE__*/function (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;
+  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();
+  timeStamp = (() => now())();
   target = null;
   currentTarget = null;
   srcElement = null;
@@ -33,11 +33,11 @@ class Event {
   composed = false;
   defaultPrevented = false;
   cancelBubble = false;
-  immediatePropagationStopped = false;
   eventPhase = 0;
-  path = [];
   // private inPassiveListener = false;
 
+  [constants.PATH] = [];
+  [constants.STOP_IMMEDIATE_PROPAGATION] = false;
   constructor(type, options) {
     this.type = type;
     Object.defineProperty(this, constants.IS_TRUSTED, {
@@ -50,17 +50,18 @@ class Event {
       if (options.composed) this.composed = options.composed;
     }
   }
-  get composedPath() {
-    return this.path;
-  }
   get isTrusted() {
     return this[constants.IS_TRUSTED];
   }
+  composedPath() {
+    return this[constants.PATH];
+  }
   stopPropagation() {
     this.cancelBubble = true;
   }
   stopImmediatePropagation() {
-    this.immediatePropagationStopped = true;
+    this[constants.STOP_IMMEDIATE_PROPAGATION] = true;
+    this.cancelBubble = true;
   }
   preventDefault() {
     this.defaultPrevented = true;
@@ -79,31 +80,24 @@ class Event {
     this.cancelable = Boolean(cancelable);
   }
 }
-function fireEvent(event, target, phase) {
-  const listeners = target[constants.LISTENERS];
+function fireEvent(event, currentTarget, phase) {
+  const listeners = currentTarget[constants.LISTENERS];
   const list = listeners?.get(`${event.type}${phase === EventPhase.CAPTURING_PHASE ? CAPTURE_MARKER : ''}`);
-  if (!list) return false;
-  let defaultPrevented = false;
+  if (!list) return;
   for (const listener of list) {
-    event.eventPhase = phase;
-    event.currentTarget = target;
+    event.eventPhase = event.target === currentTarget ? EventPhase.AT_TARGET : phase;
+    event.currentTarget = currentTarget;
     try {
       if (typeof listener === 'object') {
         listener.handleEvent(event);
       } else {
-        listener.call(target, event);
+        listener.call(currentTarget, event);
       }
     } catch (err) {
       setTimeout(thrower, 0, err);
     }
-    if (event.defaultPrevented === true) {
-      defaultPrevented = true;
-    }
-    if (event.immediatePropagationStopped) {
-      break;
-    }
+    if (event[constants.STOP_IMMEDIATE_PROPAGATION]) break;
   }
-  return defaultPrevented;
 }
 function thrower(error) {
   throw error;

package/build/cjs/EventTarget.cjs

@@ -71,22 +71,17 @@ class EventTarget {
     // }
     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;
+    event[constants.PATH] = path;
+    for (let i = path.length; i--;) {
+      Event.fireEvent(event, path[i], Event.EventPhase.CAPTURING_PHASE);
+      if (event.cancelBubble) return event.defaultPrevented;
     }
-    for (let i = 1; i < path.length; i++) {
-      if (Event.fireEvent(event, path[i], Event.EventPhase.BUBBLING_PHASE)) {
-        defaultPrevented = true;
-      }
+    const bubblePath = event.bubbles ? path : path.slice(0, 1);
+    for (let i = 0; i < bubblePath.length; i++) {
+      Event.fireEvent(event, bubblePath[i], Event.EventPhase.BUBBLING_PHASE);
+      if (event.cancelBubble) return event.defaultPrevented;
     }
-    return !defaultPrevented;
+    return event.defaultPrevented;
   }
 }
 function removeEventListener(type, listener, options) {

package/build/cjs/Node.cjs

@@ -7,7 +7,7 @@ const EventTarget = require('./EventTarget.cjs');
 const shared = require('./shared.cjs');
 
 class Node extends EventTarget.EventTarget {
-  nodeType = constants.NodeType.NODE;
+  nodeType = (() => constants.NodeType.NODE)();
   [constants.NAME] = '';
   [constants.PARENT] = null;
   [constants.CHILD] = null;

package/build/cjs/ParentNode.cjs

@@ -8,8 +8,8 @@ const NodeList = require('./NodeList.cjs');
 const selectors = require('./selectors.cjs');
 
 class ParentNode extends ChildNode.ChildNode {
-  childNodes = new NodeList.NodeList();
-  children = new NodeList.NodeList();
+  childNodes = (() => new NodeList.NodeList())();
+  children = (() => new NodeList.NodeList())();
   appendChild(child) {
     this.insertInto(child, null);
   }
@@ -49,6 +49,7 @@ class ParentNode extends ChildNode.ChildNode {
       const children = this.children;
       children.splice(children.indexOf(child), 1);
     }
+    child.disconnectedCallback?.();
     this[constants.HOOKS].removeChild?.(this, child, childNodesIndex);
   }
   replaceChild(newChild, oldChild) {
@@ -124,6 +125,7 @@ class ParentNode extends ChildNode.ChildNode {
       childNodes.push(child);
       if (isElement) this.children.push(child);
     }
+    child.connectedCallback?.();
     this[constants.HOOKS].insertChild?.(this, child, insertIndex);
   }
 }

package/build/cjs/SVGElement.cjs

@@ -6,7 +6,7 @@ const constants = require('./constants.cjs');
 const Element = require('./Element.cjs');
 
 class SVGElement extends Element.Element {
-  [constants.NS] = constants.NamespaceURI.SVG;
+  [constants.NS] = (() => constants.NamespaceURI.SVG)();
   get ownerSVGElement() {
     let root = null;
     let parent = this.parentNode;

package/build/cjs/Text.cjs

@@ -6,7 +6,7 @@ const constants = require('./constants.cjs');
 const CharacterData = require('./CharacterData.cjs');
 
 class Text extends CharacterData.CharacterData {
-  nodeType = constants.NodeType.TEXT_NODE;
+  nodeType = (() => constants.NodeType.TEXT_NODE)();
   [constants.NAME] = '#text';
 }
 

package/build/cjs/Window.cjs

@@ -27,26 +27,26 @@ class Window extends EventTarget.EventTarget {
   parent = this;
   self = this;
   top = this;
-  document = new Document.Document(this);
-  customElements = new CustomElementRegistry.CustomElementRegistryImplementation();
-  location = globalThis.location;
-  navigator = globalThis.navigator;
-  Event = Event.Event;
-  EventTarget = EventTarget.EventTarget;
-  CustomEvent = CustomEvent.CustomEvent;
-  Node = Node.Node;
-  ParentNode = ParentNode.ParentNode;
-  ChildNode = ChildNode.ChildNode;
-  DocumentFragment = DocumentFragment.DocumentFragment;
-  Document = Document.Document;
-  CharacterData = CharacterData.CharacterData;
-  Comment = Comment.Comment;
-  Text = Text.Text;
-  Element = Element.Element;
-  HTMLElement = HTMLElement.HTMLElement;
-  SVGElement = SVGElement.SVGElement;
-  HTMLTemplateElement = HTMLTemplateElement.HTMLTemplateElement;
-  MutationObserver = MutationObserver.MutationObserver;
+  document = (() => new Document.Document(this))();
+  customElements = (() => new CustomElementRegistry.CustomElementRegistryImplementation())();
+  location = (() => globalThis.location)();
+  navigator = (() => globalThis.navigator)();
+  Event = (() => Event.Event)();
+  EventTarget = (() => EventTarget.EventTarget)();
+  CustomEvent = (() => CustomEvent.CustomEvent)();
+  Node = (() => Node.Node)();
+  ParentNode = (() => ParentNode.ParentNode)();
+  ChildNode = (() => ChildNode.ChildNode)();
+  DocumentFragment = (() => DocumentFragment.DocumentFragment)();
+  Document = (() => Document.Document)();
+  CharacterData = (() => CharacterData.CharacterData)();
+  Comment = (() => Comment.Comment)();
+  Text = (() => Text.Text)();
+  Element = (() => Element.Element)();
+  HTMLElement = (() => HTMLElement.HTMLElement)();
+  SVGElement = (() => SVGElement.SVGElement)();
+  HTMLTemplateElement = (() => HTMLTemplateElement.HTMLTemplateElement)();
+  MutationObserver = (() => MutationObserver.MutationObserver)();
   static setGlobal(window) {
     const properties = Object.getOwnPropertyDescriptors(window);
     delete properties.self;

package/build/cjs/constants.cjs

@@ -15,6 +15,8 @@ const PARENT = Symbol('parent');
 const DATA = Symbol('data');
 const LISTENERS = Symbol('listeners');
 const IS_TRUSTED = Symbol('isTrusted');
+const PATH = Symbol('path');
+const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
 const CONTENT = Symbol('content');
 const HOOKS = Symbol('hooks');
 
@@ -55,5 +57,7 @@ exports.NodeType = NodeType;
 exports.OWNER_DOCUMENT = OWNER_DOCUMENT;
 exports.OWNER_ELEMENT = OWNER_ELEMENT;
 exports.PARENT = PARENT;
+exports.PATH = PATH;
 exports.PREV = PREV;
+exports.STOP_IMMEDIATE_PROPAGATION = STOP_IMMEDIATE_PROPAGATION;
 exports.VALUE = VALUE;

package/build/esm/Attr.mjs

@@ -2,7 +2,7 @@ import { NodeType, NS, NEXT, OWNER_ELEMENT, NAME, VALUE, HOOKS } from './constan
 import { Node } from './Node.mjs';
 
 class Attr extends Node {
-  nodeType = NodeType.ATTRIBUTE_NODE;
+  nodeType = (() => NodeType.ATTRIBUTE_NODE)();
   [NS] = null;
   [NEXT] = null;
   [OWNER_ELEMENT] = null;

package/build/esm/CustomElementRegistry.mjs

@@ -1,6 +1,6 @@
 class CustomElementRegistryImplementation {
-  registry = new Map();
-  listenersByName = new Map();
+  registry = (() => new Map())();
+  listenersByName = (() => new Map())();
   define(name, Constructor, _options) {
     this.registry.set(name, Constructor);
     const listeners = this.listenersByName.get(name);

package/build/esm/Document.mjs

@@ -1,4 +1,4 @@
-import { NodeType, NAME, OWNER_DOCUMENT, NamespaceURI, NS, HOOKS } from './constants.mjs';
+import { NodeType, NAME, OWNER_DOCUMENT, HOOKS, NamespaceURI, NS } from './constants.mjs';
 import { Event } from './Event.mjs';
 import { ParentNode } from './ParentNode.mjs';
 import { Element } from './Element.mjs';
@@ -13,7 +13,7 @@ import { HTMLHeadElement } from './HTMLHeadElement.mjs';
 import { HTMLHtmlElement } from './HTMLHtmlElement.mjs';
 
 class Document extends ParentNode {
-  nodeType = NodeType.DOCUMENT_NODE;
+  nodeType = (() => NodeType.DOCUMENT_NODE)();
   [NAME] = '#document';
   constructor(defaultView) {
     super();
@@ -32,7 +32,9 @@ class Document extends ParentNode {
     return createElement(this, localName, namespaceURI);
   }
   createTextNode(data) {
-    return createNode(new Text(data), this);
+    const text = createNode(new Text(data), this);
+    this[HOOKS].createText?.(text, String(data));
+    return text;
   }
   createComment(data) {
     return createNode(new Comment(data), this);

package/build/esm/DocumentFragment.mjs

@@ -2,9 +2,9 @@ import { NodeType, NAME, OWNER_DOCUMENT } from './constants.mjs';
 import { ParentNode } from './ParentNode.mjs';
 
 class DocumentFragment extends ParentNode {
-  nodeType = NodeType.DOCUMENT_FRAGMENT_NODE;
+  nodeType = (() => NodeType.DOCUMENT_FRAGMENT_NODE)();
   [NAME] = '#document-fragment';
-  [OWNER_DOCUMENT] = window.document;
+  [OWNER_DOCUMENT] = (() => window.document)();
 }
 
 export { DocumentFragment };

package/build/esm/Element.mjs

@@ -5,8 +5,8 @@ import { Attr } from './Attr.mjs';
 import { serializeNode, serializeChildren, parseHtml } from './serialization.mjs';
 
 class Element extends ParentNode {
-  nodeType = NodeType.ELEMENT_NODE;
-  [NS] = NamespaceURI.XHTML;
+  nodeType = (() => NodeType.ELEMENT_NODE)();
+  [NS] = (() => NamespaceURI.XHTML)();
   get namespaceURI() {
     return this[NS];
   }
@@ -30,6 +30,9 @@ class Element extends ParentNode {
     }
     return attributes;
   }
+  getAttributeNames() {
+    return [...this.attributes].map(attr => attr.name);
+  }
   get firstElementChild() {
     return this.children[0] ?? null;
   }