@remote-dom/polyfill 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/build/cjs/Attr.cjs +1 -2
  3. package/build/cjs/CustomElementRegistry.cjs +2 -2
  4. package/build/cjs/Document.cjs +6 -2
  5. package/build/cjs/DocumentFragment.cjs +2 -2
  6. package/build/cjs/Element.cjs +2 -2
  7. package/build/cjs/Event.cjs +5 -5
  8. package/build/cjs/Node.cjs +6 -8
  9. package/build/cjs/ParentNode.cjs +21 -6
  10. package/build/cjs/SVGElement.cjs +1 -1
  11. package/build/cjs/Text.cjs +1 -1
  12. package/build/cjs/Window.cjs +20 -20
  13. package/build/cjs/constants.cjs +2 -0
  14. package/build/cjs/shared.cjs +20 -0
  15. package/build/esm/Attr.mjs +1 -2
  16. package/build/esm/CustomElementRegistry.mjs +2 -2
  17. package/build/esm/Document.mjs +7 -3
  18. package/build/esm/DocumentFragment.mjs +2 -2
  19. package/build/esm/Element.mjs +2 -2
  20. package/build/esm/Event.mjs +5 -5
  21. package/build/esm/Node.mjs +8 -10
  22. package/build/esm/ParentNode.mjs +22 -7
  23. package/build/esm/SVGElement.mjs +1 -1
  24. package/build/esm/Text.mjs +1 -1
  25. package/build/esm/Window.mjs +20 -20
  26. package/build/esm/constants.mjs +2 -1
  27. package/build/esm/shared.mjs +20 -2
  28. package/build/esnext/Attr.esnext +0 -1
  29. package/build/esnext/Document.esnext +6 -2
  30. package/build/esnext/Node.esnext +7 -9
  31. package/build/esnext/ParentNode.esnext +20 -5
  32. package/build/esnext/constants.esnext +2 -1
  33. package/build/esnext/shared.esnext +20 -2
  34. package/build/tsconfig.tsbuildinfo +1 -1
  35. package/build/typescript/Attr.d.ts +0 -1
  36. package/build/typescript/Attr.d.ts.map +1 -1
  37. package/build/typescript/Document.d.ts +2 -1
  38. package/build/typescript/Document.d.ts.map +1 -1
  39. package/build/typescript/Node.d.ts +3 -1
  40. package/build/typescript/Node.d.ts.map +1 -1
  41. package/build/typescript/ParentNode.d.ts.map +1 -1
  42. package/build/typescript/constants.d.ts +1 -0
  43. package/build/typescript/constants.d.ts.map +1 -1
  44. package/build/typescript/shared.d.ts +2 -0
  45. package/build/typescript/shared.d.ts.map +1 -1
  46. package/package.json +1 -1
  47. package/source/Attr.ts +0 -1
  48. package/source/Document.ts +6 -1
  49. package/source/Node.ts +10 -7
  50. package/source/ParentNode.ts +22 -4
  51. package/source/constants.ts +1 -0
  52. package/source/shared.ts +28 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @remote-dom/polyfill
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#446](https://github.com/Shopify/remote-dom/pull/446) [`b297fc5`](https://github.com/Shopify/remote-dom/commit/b297fc5efecc6479fa5e0e3bdcdb48dea721df43) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Implement node.isConnected
8
+
9
+ ### Patch Changes
10
+
11
+ - [#446](https://github.com/Shopify/remote-dom/pull/446) [`b297fc5`](https://github.com/Shopify/remote-dom/commit/b297fc5efecc6479fa5e0e3bdcdb48dea721df43) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Ensure that the insert and remove hooks are only called for element parents.
12
+
13
+ - [#446](https://github.com/Shopify/remote-dom/pull/446) [`b297fc5`](https://github.com/Shopify/remote-dom/commit/b297fc5efecc6479fa5e0e3bdcdb48dea721df43) Thanks [@jakearchibald](https://github.com/jakearchibald)! - Make connectedCallback and disconnectedCallback call on connect/disconnect recursively
14
+
15
+ ## 1.3.1
16
+
17
+ ### Patch Changes
18
+
19
+ - [#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
20
+
3
21
  ## 1.3.0
4
22
 
5
23
  ### Minor Changes
@@ -6,11 +6,10 @@ const constants = require('./constants.cjs');
6
6
  const Node = require('./Node.cjs');
7
7
 
8
8
  class Attr extends Node.Node {
9
- nodeType = constants.NodeType.ATTRIBUTE_NODE;
9
+ nodeType = (() => constants.NodeType.ATTRIBUTE_NODE)();
10
10
  [constants.NS] = null;
11
11
  [constants.NEXT] = null;
12
12
  [constants.OWNER_ELEMENT] = null;
13
- isConnected = false;
14
13
  constructor(name, value, namespace) {
15
14
  super();
16
15
  this[constants.NAME] = name;
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  class CustomElementRegistryImplementation {
6
- registry = new Map();
7
- listenersByName = new Map();
6
+ registry = (() => new Map())();
7
+ listenersByName = (() => new Map())();
8
8
  define(name, Constructor, _options) {
9
9
  this.registry.set(name, Constructor);
10
10
  const listeners = this.listenersByName.get(name);
@@ -17,8 +17,9 @@ const HTMLHeadElement = require('./HTMLHeadElement.cjs');
17
17
  const HTMLHtmlElement = require('./HTMLHtmlElement.cjs');
18
18
 
19
19
  class Document extends ParentNode.ParentNode {
20
- nodeType = constants.NodeType.DOCUMENT_NODE;
20
+ nodeType = (() => constants.NodeType.DOCUMENT_NODE)();
21
21
  [constants.NAME] = '#document';
22
+ [constants.IS_CONNECTED] = true;
22
23
  constructor(defaultView) {
23
24
  super();
24
25
  this.defaultView = defaultView;
@@ -26,6 +27,7 @@ class Document extends ParentNode.ParentNode {
26
27
  this.documentElement = setupElement(new HTMLHtmlElement.HTMLHtmlElement(), this, 'html');
27
28
  this.body = setupElement(new HTMLBodyElement.HTMLBodyElement(), this, 'body');
28
29
  this.head = setupElement(new HTMLHeadElement.HTMLHeadElement(), this, 'head');
30
+ this.appendChild(this.documentElement);
29
31
  this.documentElement.appendChild(this.head);
30
32
  this.documentElement.appendChild(this.body);
31
33
  }
@@ -36,7 +38,9 @@ class Document extends ParentNode.ParentNode {
36
38
  return createElement(this, localName, namespaceURI);
37
39
  }
38
40
  createTextNode(data) {
39
- return createNode(new Text.Text(data), this);
41
+ const text = createNode(new Text.Text(data), this);
42
+ this[constants.HOOKS].createText?.(text, String(data));
43
+ return text;
40
44
  }
41
45
  createComment(data) {
42
46
  return createNode(new Comment.Comment(data), this);
@@ -6,9 +6,9 @@ const constants = require('./constants.cjs');
6
6
  const ParentNode = require('./ParentNode.cjs');
7
7
 
8
8
  class DocumentFragment extends ParentNode.ParentNode {
9
- nodeType = constants.NodeType.DOCUMENT_FRAGMENT_NODE;
9
+ nodeType = (() => constants.NodeType.DOCUMENT_FRAGMENT_NODE)();
10
10
  [constants.NAME] = '#document-fragment';
11
- [constants.OWNER_DOCUMENT] = window.document;
11
+ [constants.OWNER_DOCUMENT] = (() => window.document)();
12
12
  }
13
13
 
14
14
  exports.DocumentFragment = DocumentFragment;
@@ -9,8 +9,8 @@ const Attr = require('./Attr.cjs');
9
9
  const serialization = require('./serialization.cjs');
10
10
 
11
11
  class Element extends ParentNode.ParentNode {
12
- nodeType = constants.NodeType.ELEMENT_NODE;
13
- [constants.NS] = constants.NamespaceURI.XHTML;
12
+ nodeType = (() => constants.NodeType.ELEMENT_NODE)();
13
+ [constants.NS] = (() => constants.NamespaceURI.XHTML)();
14
14
  get namespaceURI() {
15
15
  return this[constants.NS];
16
16
  }
@@ -14,17 +14,17 @@ let EventPhase = /*#__PURE__*/function (EventPhase) {
14
14
  const CAPTURE_MARKER = '@';
15
15
  const now = typeof performance === 'undefined' ? Date.now : performance.now.bind(performance);
16
16
  class Event {
17
- static NONE = EventPhase.NONE;
18
- static CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
19
- static AT_TARGET = EventPhase.AT_TARGET;
20
- static BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
17
+ static NONE = (() => EventPhase.NONE)();
18
+ static CAPTURING_PHASE = (() => EventPhase.CAPTURING_PHASE)();
19
+ static AT_TARGET = (() => EventPhase.AT_TARGET)();
20
+ static BUBBLING_PHASE = (() => EventPhase.BUBBLING_PHASE)();
21
21
 
22
22
  // NONE = EventPhase.NONE;
23
23
  // CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
24
24
  // AT_TARGET = EventPhase.AT_TARGET;
25
25
  // BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
26
26
 
27
- timeStamp = now();
27
+ timeStamp = (() => now())();
28
28
  target = null;
29
29
  currentTarget = null;
30
30
  srcElement = null;
@@ -7,12 +7,13 @@ const EventTarget = require('./EventTarget.cjs');
7
7
  const shared = require('./shared.cjs');
8
8
 
9
9
  class Node extends EventTarget.EventTarget {
10
- nodeType = constants.NodeType.NODE;
10
+ nodeType = (() => constants.NodeType.NODE)();
11
11
  [constants.NAME] = '';
12
12
  [constants.PARENT] = null;
13
13
  [constants.CHILD] = null;
14
14
  [constants.PREV] = null;
15
15
  [constants.NEXT] = null;
16
+ [constants.IS_CONNECTED] = false;
16
17
  get [constants.HOOKS]() {
17
18
  return this[constants.OWNER_DOCUMENT].defaultView[constants.HOOKS];
18
19
  }
@@ -25,6 +26,9 @@ class Node extends EventTarget.EventTarget {
25
26
  get ownerDocument() {
26
27
  return this[constants.OWNER_DOCUMENT];
27
28
  }
29
+ get isConnected() {
30
+ return this[constants.IS_CONNECTED];
31
+ }
28
32
  isDefaultNamespace(namespace) {
29
33
  return namespace === constants.NamespaceURI.XHTML;
30
34
  }
@@ -76,17 +80,11 @@ class Node extends EventTarget.EventTarget {
76
80
  get textContent() {
77
81
  if (shared.isCharacterData(this)) return this.data;
78
82
  let text = '';
79
- function walk(node) {
83
+ for (const node of shared.descendants(this)) {
80
84
  if (shared.isTextNode(node)) {
81
85
  text += node.data;
82
86
  }
83
- const child = node[constants.CHILD];
84
- if (child) walk(child);
85
- const sibling = node[constants.NEXT];
86
- if (sibling) walk(sibling);
87
87
  }
88
- const child = this[constants.CHILD];
89
- if (child) walk(child);
90
88
  return text;
91
89
  }
92
90
  set textContent(data) {
@@ -6,10 +6,11 @@ const constants = require('./constants.cjs');
6
6
  const ChildNode = require('./ChildNode.cjs');
7
7
  const NodeList = require('./NodeList.cjs');
8
8
  const selectors = require('./selectors.cjs');
9
+ const shared = require('./shared.cjs');
9
10
 
10
11
  class ParentNode extends ChildNode.ChildNode {
11
- childNodes = new NodeList.NodeList();
12
- children = new NodeList.NodeList();
12
+ childNodes = (() => new NodeList.NodeList())();
13
+ children = (() => new NodeList.NodeList())();
13
14
  appendChild(child) {
14
15
  this.insertInto(child, null);
15
16
  }
@@ -49,8 +50,15 @@ class ParentNode extends ChildNode.ChildNode {
49
50
  const children = this.children;
50
51
  children.splice(children.indexOf(child), 1);
51
52
  }
52
- child.disconnectedCallback?.();
53
- this[constants.HOOKS].removeChild?.(this, child, childNodesIndex);
53
+ if (this[constants.IS_CONNECTED]) {
54
+ for (const node of shared.selfAndDescendants(child)) {
55
+ node[constants.IS_CONNECTED] = false;
56
+ node.disconnectedCallback?.();
57
+ }
58
+ }
59
+ if (this.nodeType === constants.NodeType.ELEMENT_NODE) {
60
+ this[constants.HOOKS].removeChild?.(this, child, childNodesIndex);
61
+ }
54
62
  }
55
63
  replaceChild(newChild, oldChild) {
56
64
  if (oldChild.parentNode !== this) {
@@ -125,8 +133,15 @@ class ParentNode extends ChildNode.ChildNode {
125
133
  childNodes.push(child);
126
134
  if (isElement) this.children.push(child);
127
135
  }
128
- child.connectedCallback?.();
129
- this[constants.HOOKS].insertChild?.(this, child, insertIndex);
136
+ if (this[constants.IS_CONNECTED]) {
137
+ for (const node of shared.selfAndDescendants(child)) {
138
+ node[constants.IS_CONNECTED] = true;
139
+ node.connectedCallback?.();
140
+ }
141
+ }
142
+ if (this.nodeType === constants.NodeType.ELEMENT_NODE) {
143
+ this[constants.HOOKS].insertChild?.(this, child, insertIndex);
144
+ }
130
145
  }
131
146
  }
132
147
 
@@ -6,7 +6,7 @@ const constants = require('./constants.cjs');
6
6
  const Element = require('./Element.cjs');
7
7
 
8
8
  class SVGElement extends Element.Element {
9
- [constants.NS] = constants.NamespaceURI.SVG;
9
+ [constants.NS] = (() => constants.NamespaceURI.SVG)();
10
10
  get ownerSVGElement() {
11
11
  let root = null;
12
12
  let parent = this.parentNode;
@@ -6,7 +6,7 @@ const constants = require('./constants.cjs');
6
6
  const CharacterData = require('./CharacterData.cjs');
7
7
 
8
8
  class Text extends CharacterData.CharacterData {
9
- nodeType = constants.NodeType.TEXT_NODE;
9
+ nodeType = (() => constants.NodeType.TEXT_NODE)();
10
10
  [constants.NAME] = '#text';
11
11
  }
12
12
 
@@ -27,26 +27,26 @@ class Window extends EventTarget.EventTarget {
27
27
  parent = this;
28
28
  self = this;
29
29
  top = this;
30
- document = new Document.Document(this);
31
- customElements = new CustomElementRegistry.CustomElementRegistryImplementation();
32
- location = globalThis.location;
33
- navigator = globalThis.navigator;
34
- Event = Event.Event;
35
- EventTarget = EventTarget.EventTarget;
36
- CustomEvent = CustomEvent.CustomEvent;
37
- Node = Node.Node;
38
- ParentNode = ParentNode.ParentNode;
39
- ChildNode = ChildNode.ChildNode;
40
- DocumentFragment = DocumentFragment.DocumentFragment;
41
- Document = Document.Document;
42
- CharacterData = CharacterData.CharacterData;
43
- Comment = Comment.Comment;
44
- Text = Text.Text;
45
- Element = Element.Element;
46
- HTMLElement = HTMLElement.HTMLElement;
47
- SVGElement = SVGElement.SVGElement;
48
- HTMLTemplateElement = HTMLTemplateElement.HTMLTemplateElement;
49
- MutationObserver = MutationObserver.MutationObserver;
30
+ document = (() => new Document.Document(this))();
31
+ customElements = (() => new CustomElementRegistry.CustomElementRegistryImplementation())();
32
+ location = (() => globalThis.location)();
33
+ navigator = (() => globalThis.navigator)();
34
+ Event = (() => Event.Event)();
35
+ EventTarget = (() => EventTarget.EventTarget)();
36
+ CustomEvent = (() => CustomEvent.CustomEvent)();
37
+ Node = (() => Node.Node)();
38
+ ParentNode = (() => ParentNode.ParentNode)();
39
+ ChildNode = (() => ChildNode.ChildNode)();
40
+ DocumentFragment = (() => DocumentFragment.DocumentFragment)();
41
+ Document = (() => Document.Document)();
42
+ CharacterData = (() => CharacterData.CharacterData)();
43
+ Comment = (() => Comment.Comment)();
44
+ Text = (() => Text.Text)();
45
+ Element = (() => Element.Element)();
46
+ HTMLElement = (() => HTMLElement.HTMLElement)();
47
+ SVGElement = (() => SVGElement.SVGElement)();
48
+ HTMLTemplateElement = (() => HTMLTemplateElement.HTMLTemplateElement)();
49
+ MutationObserver = (() => MutationObserver.MutationObserver)();
50
50
  static setGlobal(window) {
51
51
  const properties = Object.getOwnPropertyDescriptors(window);
52
52
  delete properties.self;
@@ -19,6 +19,7 @@ const PATH = Symbol('path');
19
19
  const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
20
20
  const CONTENT = Symbol('content');
21
21
  const HOOKS = Symbol('hooks');
22
+ const IS_CONNECTED = Symbol('is_connected');
22
23
 
23
24
  // @TODO remove explicit values
24
25
  let NodeType = /*#__PURE__*/function (NodeType) {
@@ -47,6 +48,7 @@ exports.CHILD = CHILD;
47
48
  exports.CONTENT = CONTENT;
48
49
  exports.DATA = DATA;
49
50
  exports.HOOKS = HOOKS;
51
+ exports.IS_CONNECTED = IS_CONNECTED;
50
52
  exports.IS_TRUSTED = IS_TRUSTED;
51
53
  exports.LISTENERS = LISTENERS;
52
54
  exports.NAME = NAME;
@@ -55,11 +55,31 @@ function cloneNode(node, deep, document = node.ownerDocument) {
55
55
  return cloned;
56
56
  }
57
57
  }
58
+ function descendants(node) {
59
+ const nodes = [];
60
+ const walk = node => {
61
+ nodes.push(node);
62
+ const child = node[constants.CHILD];
63
+ if (child) walk(child);
64
+ const sibling = node[constants.NEXT];
65
+ if (sibling) walk(sibling);
66
+ };
67
+ const child = node[constants.CHILD];
68
+ if (child) walk(child);
69
+ return nodes;
70
+ }
71
+ function selfAndDescendants(node) {
72
+ const nodes = descendants(node);
73
+ nodes.unshift(node);
74
+ return nodes;
75
+ }
58
76
 
59
77
  exports.cloneNode = cloneNode;
78
+ exports.descendants = descendants;
60
79
  exports.isCharacterData = isCharacterData;
61
80
  exports.isCommentNode = isCommentNode;
62
81
  exports.isDocumentFragmentNode = isDocumentFragmentNode;
63
82
  exports.isElementNode = isElementNode;
64
83
  exports.isParentNode = isParentNode;
65
84
  exports.isTextNode = isTextNode;
85
+ exports.selfAndDescendants = selfAndDescendants;
@@ -2,11 +2,10 @@ import { NodeType, NS, NEXT, OWNER_ELEMENT, NAME, VALUE, HOOKS } from './constan
2
2
  import { Node } from './Node.mjs';
3
3
 
4
4
  class Attr extends Node {
5
- nodeType = NodeType.ATTRIBUTE_NODE;
5
+ nodeType = (() => NodeType.ATTRIBUTE_NODE)();
6
6
  [NS] = null;
7
7
  [NEXT] = null;
8
8
  [OWNER_ELEMENT] = null;
9
- isConnected = false;
10
9
  constructor(name, value, namespace) {
11
10
  super();
12
11
  this[NAME] = name;
@@ -1,6 +1,6 @@
1
1
  class CustomElementRegistryImplementation {
2
- registry = new Map();
3
- listenersByName = new Map();
2
+ registry = (() => new Map())();
3
+ listenersByName = (() => new Map())();
4
4
  define(name, Constructor, _options) {
5
5
  this.registry.set(name, Constructor);
6
6
  const listeners = this.listenersByName.get(name);
@@ -1,4 +1,4 @@
1
- import { NodeType, NAME, OWNER_DOCUMENT, NamespaceURI, NS, HOOKS } from './constants.mjs';
1
+ import { NodeType, NAME, IS_CONNECTED, OWNER_DOCUMENT, HOOKS, NamespaceURI, NS } from './constants.mjs';
2
2
  import { Event } from './Event.mjs';
3
3
  import { ParentNode } from './ParentNode.mjs';
4
4
  import { Element } from './Element.mjs';
@@ -13,8 +13,9 @@ import { HTMLHeadElement } from './HTMLHeadElement.mjs';
13
13
  import { HTMLHtmlElement } from './HTMLHtmlElement.mjs';
14
14
 
15
15
  class Document extends ParentNode {
16
- nodeType = NodeType.DOCUMENT_NODE;
16
+ nodeType = (() => NodeType.DOCUMENT_NODE)();
17
17
  [NAME] = '#document';
18
+ [IS_CONNECTED] = true;
18
19
  constructor(defaultView) {
19
20
  super();
20
21
  this.defaultView = defaultView;
@@ -22,6 +23,7 @@ class Document extends ParentNode {
22
23
  this.documentElement = setupElement(new HTMLHtmlElement(), this, 'html');
23
24
  this.body = setupElement(new HTMLBodyElement(), this, 'body');
24
25
  this.head = setupElement(new HTMLHeadElement(), this, 'head');
26
+ this.appendChild(this.documentElement);
25
27
  this.documentElement.appendChild(this.head);
26
28
  this.documentElement.appendChild(this.body);
27
29
  }
@@ -32,7 +34,9 @@ class Document extends ParentNode {
32
34
  return createElement(this, localName, namespaceURI);
33
35
  }
34
36
  createTextNode(data) {
35
- return createNode(new Text(data), this);
37
+ const text = createNode(new Text(data), this);
38
+ this[HOOKS].createText?.(text, String(data));
39
+ return text;
36
40
  }
37
41
  createComment(data) {
38
42
  return createNode(new Comment(data), this);
@@ -2,9 +2,9 @@ import { NodeType, NAME, OWNER_DOCUMENT } from './constants.mjs';
2
2
  import { ParentNode } from './ParentNode.mjs';
3
3
 
4
4
  class DocumentFragment extends ParentNode {
5
- nodeType = NodeType.DOCUMENT_FRAGMENT_NODE;
5
+ nodeType = (() => NodeType.DOCUMENT_FRAGMENT_NODE)();
6
6
  [NAME] = '#document-fragment';
7
- [OWNER_DOCUMENT] = window.document;
7
+ [OWNER_DOCUMENT] = (() => window.document)();
8
8
  }
9
9
 
10
10
  export { DocumentFragment };
@@ -5,8 +5,8 @@ import { Attr } from './Attr.mjs';
5
5
  import { serializeNode, serializeChildren, parseHtml } from './serialization.mjs';
6
6
 
7
7
  class Element extends ParentNode {
8
- nodeType = NodeType.ELEMENT_NODE;
9
- [NS] = NamespaceURI.XHTML;
8
+ nodeType = (() => NodeType.ELEMENT_NODE)();
9
+ [NS] = (() => NamespaceURI.XHTML)();
10
10
  get namespaceURI() {
11
11
  return this[NS];
12
12
  }
@@ -10,17 +10,17 @@ let EventPhase = /*#__PURE__*/function (EventPhase) {
10
10
  const CAPTURE_MARKER = '@';
11
11
  const now = typeof performance === 'undefined' ? Date.now : performance.now.bind(performance);
12
12
  class Event {
13
- static NONE = EventPhase.NONE;
14
- static CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
15
- static AT_TARGET = EventPhase.AT_TARGET;
16
- static BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
13
+ static NONE = (() => EventPhase.NONE)();
14
+ static CAPTURING_PHASE = (() => EventPhase.CAPTURING_PHASE)();
15
+ static AT_TARGET = (() => EventPhase.AT_TARGET)();
16
+ static BUBBLING_PHASE = (() => EventPhase.BUBBLING_PHASE)();
17
17
 
18
18
  // NONE = EventPhase.NONE;
19
19
  // CAPTURING_PHASE = EventPhase.CAPTURING_PHASE;
20
20
  // AT_TARGET = EventPhase.AT_TARGET;
21
21
  // BUBBLING_PHASE = EventPhase.BUBBLING_PHASE;
22
22
 
23
- timeStamp = now();
23
+ timeStamp = (() => now())();
24
24
  target = null;
25
25
  currentTarget = null;
26
26
  srcElement = null;
@@ -1,14 +1,15 @@
1
- import { NodeType, NAME, PARENT, CHILD, PREV, NEXT, HOOKS, OWNER_DOCUMENT, NamespaceURI } from './constants.mjs';
1
+ import { NodeType, NAME, PARENT, CHILD, PREV, NEXT, IS_CONNECTED, HOOKS, OWNER_DOCUMENT, NamespaceURI } from './constants.mjs';
2
2
  import { EventTarget } from './EventTarget.mjs';
3
- import { isCharacterData, isParentNode, cloneNode, isTextNode } from './shared.mjs';
3
+ import { isCharacterData, descendants, isTextNode, isParentNode, cloneNode } from './shared.mjs';
4
4
 
5
5
  class Node extends EventTarget {
6
- nodeType = NodeType.NODE;
6
+ nodeType = (() => NodeType.NODE)();
7
7
  [NAME] = '';
8
8
  [PARENT] = null;
9
9
  [CHILD] = null;
10
10
  [PREV] = null;
11
11
  [NEXT] = null;
12
+ [IS_CONNECTED] = false;
12
13
  get [HOOKS]() {
13
14
  return this[OWNER_DOCUMENT].defaultView[HOOKS];
14
15
  }
@@ -21,6 +22,9 @@ class Node extends EventTarget {
21
22
  get ownerDocument() {
22
23
  return this[OWNER_DOCUMENT];
23
24
  }
25
+ get isConnected() {
26
+ return this[IS_CONNECTED];
27
+ }
24
28
  isDefaultNamespace(namespace) {
25
29
  return namespace === NamespaceURI.XHTML;
26
30
  }
@@ -72,17 +76,11 @@ class Node extends EventTarget {
72
76
  get textContent() {
73
77
  if (isCharacterData(this)) return this.data;
74
78
  let text = '';
75
- function walk(node) {
79
+ for (const node of descendants(this)) {
76
80
  if (isTextNode(node)) {
77
81
  text += node.data;
78
82
  }
79
- const child = node[CHILD];
80
- if (child) walk(child);
81
- const sibling = node[NEXT];
82
- if (sibling) walk(sibling);
83
83
  }
84
- const child = this[CHILD];
85
- if (child) walk(child);
86
84
  return text;
87
85
  }
88
86
  set textContent(data) {
@@ -1,11 +1,12 @@
1
- import { PREV, NEXT, CHILD, HOOKS, NodeType, OWNER_DOCUMENT, PARENT } from './constants.mjs';
1
+ import { PREV, NEXT, CHILD, IS_CONNECTED, NodeType, HOOKS, OWNER_DOCUMENT, PARENT } from './constants.mjs';
2
2
  import { ChildNode, toNode } from './ChildNode.mjs';
3
3
  import { NodeList } from './NodeList.mjs';
4
4
  import { querySelectorAll, querySelector } from './selectors.mjs';
5
+ import { selfAndDescendants } from './shared.mjs';
5
6
 
6
7
  class ParentNode extends ChildNode {
7
- childNodes = new NodeList();
8
- children = new NodeList();
8
+ childNodes = (() => new NodeList())();
9
+ children = (() => new NodeList())();
9
10
  appendChild(child) {
10
11
  this.insertInto(child, null);
11
12
  }
@@ -45,8 +46,15 @@ class ParentNode extends ChildNode {
45
46
  const children = this.children;
46
47
  children.splice(children.indexOf(child), 1);
47
48
  }
48
- child.disconnectedCallback?.();
49
- this[HOOKS].removeChild?.(this, child, childNodesIndex);
49
+ if (this[IS_CONNECTED]) {
50
+ for (const node of selfAndDescendants(child)) {
51
+ node[IS_CONNECTED] = false;
52
+ node.disconnectedCallback?.();
53
+ }
54
+ }
55
+ if (this.nodeType === NodeType.ELEMENT_NODE) {
56
+ this[HOOKS].removeChild?.(this, child, childNodesIndex);
57
+ }
50
58
  }
51
59
  replaceChild(newChild, oldChild) {
52
60
  if (oldChild.parentNode !== this) {
@@ -121,8 +129,15 @@ class ParentNode extends ChildNode {
121
129
  childNodes.push(child);
122
130
  if (isElement) this.children.push(child);
123
131
  }
124
- child.connectedCallback?.();
125
- this[HOOKS].insertChild?.(this, child, insertIndex);
132
+ if (this[IS_CONNECTED]) {
133
+ for (const node of selfAndDescendants(child)) {
134
+ node[IS_CONNECTED] = true;
135
+ node.connectedCallback?.();
136
+ }
137
+ }
138
+ if (this.nodeType === NodeType.ELEMENT_NODE) {
139
+ this[HOOKS].insertChild?.(this, child, insertIndex);
140
+ }
126
141
  }
127
142
  }
128
143
 
@@ -2,7 +2,7 @@ import { NS, NamespaceURI } from './constants.mjs';
2
2
  import { Element } from './Element.mjs';
3
3
 
4
4
  class SVGElement extends Element {
5
- [NS] = NamespaceURI.SVG;
5
+ [NS] = (() => NamespaceURI.SVG)();
6
6
  get ownerSVGElement() {
7
7
  let root = null;
8
8
  let parent = this.parentNode;
@@ -2,7 +2,7 @@ import { NodeType, NAME } from './constants.mjs';
2
2
  import { CharacterData } from './CharacterData.mjs';
3
3
 
4
4
  class Text extends CharacterData {
5
- nodeType = NodeType.TEXT_NODE;
5
+ nodeType = (() => NodeType.TEXT_NODE)();
6
6
  [NAME] = '#text';
7
7
  }
8
8
 
@@ -23,26 +23,26 @@ class Window extends EventTarget {
23
23
  parent = this;
24
24
  self = this;
25
25
  top = this;
26
- document = new Document(this);
27
- customElements = new CustomElementRegistryImplementation();
28
- location = globalThis.location;
29
- navigator = globalThis.navigator;
30
- Event = Event;
31
- EventTarget = EventTarget;
32
- CustomEvent = CustomEvent;
33
- Node = Node;
34
- ParentNode = ParentNode;
35
- ChildNode = ChildNode;
36
- DocumentFragment = DocumentFragment;
37
- Document = Document;
38
- CharacterData = CharacterData;
39
- Comment = Comment;
40
- Text = Text;
41
- Element = Element;
42
- HTMLElement = HTMLElement;
43
- SVGElement = SVGElement;
44
- HTMLTemplateElement = HTMLTemplateElement;
45
- MutationObserver = MutationObserver;
26
+ document = (() => new Document(this))();
27
+ customElements = (() => new CustomElementRegistryImplementation())();
28
+ location = (() => globalThis.location)();
29
+ navigator = (() => globalThis.navigator)();
30
+ Event = (() => Event)();
31
+ EventTarget = (() => EventTarget)();
32
+ CustomEvent = (() => CustomEvent)();
33
+ Node = (() => Node)();
34
+ ParentNode = (() => ParentNode)();
35
+ ChildNode = (() => ChildNode)();
36
+ DocumentFragment = (() => DocumentFragment)();
37
+ Document = (() => Document)();
38
+ CharacterData = (() => CharacterData)();
39
+ Comment = (() => Comment)();
40
+ Text = (() => Text)();
41
+ Element = (() => Element)();
42
+ HTMLElement = (() => HTMLElement)();
43
+ SVGElement = (() => SVGElement)();
44
+ HTMLTemplateElement = (() => HTMLTemplateElement)();
45
+ MutationObserver = (() => MutationObserver)();
46
46
  static setGlobal(window) {
47
47
  const properties = Object.getOwnPropertyDescriptors(window);
48
48
  delete properties.self;
@@ -15,6 +15,7 @@ const PATH = Symbol('path');
15
15
  const STOP_IMMEDIATE_PROPAGATION = Symbol('stop_immediate_propagation');
16
16
  const CONTENT = Symbol('content');
17
17
  const HOOKS = Symbol('hooks');
18
+ const IS_CONNECTED = Symbol('is_connected');
18
19
 
19
20
  // @TODO remove explicit values
20
21
  let NodeType = /*#__PURE__*/function (NodeType) {
@@ -38,4 +39,4 @@ let NamespaceURI = /*#__PURE__*/function (NamespaceURI) {
38
39
  return NamespaceURI;
39
40
  }({});
40
41
 
41
- export { ATTRIBUTES, CHILD, CONTENT, DATA, HOOKS, IS_TRUSTED, LISTENERS, NAME, NEXT, NS, NamespaceURI, NodeType, OWNER_DOCUMENT, OWNER_ELEMENT, PARENT, PATH, PREV, STOP_IMMEDIATE_PROPAGATION, VALUE };
42
+ export { ATTRIBUTES, CHILD, CONTENT, DATA, HOOKS, IS_CONNECTED, IS_TRUSTED, LISTENERS, NAME, NEXT, NS, NamespaceURI, NodeType, OWNER_DOCUMENT, OWNER_ELEMENT, PARENT, PATH, PREV, STOP_IMMEDIATE_PROPAGATION, VALUE };