pseudo-dom 0.10.0 → 0.11.0

package/dist/factories/parseHTML.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Parse an HTML string into the nodes it describes (siblings at the top level, exactly like the DOM's own HTML
+ * parsing does for innerHTML / insertAdjacentHTML - there is no single root unless the markup itself has one).
+ * @memberOf module:factories
+ * @param {string} html
+ * @param {*} ownerDocument The document the new nodes belong to (matches what innerHTML etc. would set), or null
+ * @param {function(new: *, {tagName: string})} ElementClass The class to build each parsed element with
+ * @returns {Array<*>}
+ */
+declare const parseHTML: (html: string, ownerDocument: any, ElementClass: new (options: {
+    tagName: string;
+}) => any) => Array<any>;
+export default parseHTML;

package/dist/factories/parseHTML.js

@@ -0,0 +1,84 @@
+'use strict'
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+})
+/**
+ * @file Parses an HTML string into pseudo-dom nodes, for innerHTML / outerHTML / insertAdjacentHTML. Built on
+ * htmlparser2's Parser (a SAX-style tokenizer) with a custom handler which builds pseudo-dom nodes directly -
+ * htmlparser2's own default DomHandler / domutils tree (which this never uses) is stubbed out of the browser bundle
+ * by the browser.ignore config, the same way css-select's unused default adapter already is.
+ *
+ * The class to build parsed elements with is given by the caller (rather than imported here) so this has no
+ * dependency on ElementService / HTMLElementService - importing either here, from a factory ElementService itself
+ * would need to call, would create an import cycle.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @version 1.0.0
+ */
+const htmlparser2_1 = require('htmlparser2')
+const NodeService_1 = require('../services/NodeService')
+/**
+ * Parse an HTML string into the nodes it describes (siblings at the top level, exactly like the DOM's own HTML
+ * parsing does for innerHTML / insertAdjacentHTML - there is no single root unless the markup itself has one).
+ * @memberOf module:factories
+ * @param {string} html
+ * @param {*} ownerDocument The document the new nodes belong to (matches what innerHTML etc. would set), or null
+ * @param {function(new: *, {tagName: string})} ElementClass The class to build each parsed element with
+ * @returns {Array<*>}
+ */
+const parseHTML = (html, ownerDocument, ElementClass) => {
+  const roots = []
+  const stack = []
+  const appendNode = node => {
+    node.ownerDocumentStore = ownerDocument
+    if (stack.length) {
+      stack[stack.length - 1].appendChild(node)
+    } else {
+      roots.push(node)
+    }
+  }
+  const parser = new htmlparser2_1.Parser({
+    onopentagname (name) {
+      const element = new ElementClass({
+        tagName: name
+      })
+      appendNode(element)
+      stack.push(element)
+    },
+    onattribute (name, value) {
+      if (!stack.length) {
+        return
+      }
+      const element = stack[stack.length - 1]
+      // pseudo-dom's className / classList and style are not kept in sync with a literal 'class' / 'style'
+      // attribute the way setAttribute usually is (there is no such special-casing here, unlike a real DOM) - route
+      // them to the real objects directly, the same way cssSelectAdapter does for reading 'class' when matching a
+      // CSS selector, so parsed markup's class="..." / style="..." actually populates className/classList and style.
+      if (name === 'class') {
+        element.className = value
+        return
+      }
+      if (name === 'style' && element.style) {
+        element.style.cssText = value
+        return
+      }
+      element.setAttribute(name, value)
+    },
+    ontext (text) {
+      appendNode(new NodeService_1.TextService(text))
+    },
+    oncomment (data) {
+      appendNode(new NodeService_1.CommentService(data))
+    },
+    onclosetag () {
+      stack.pop()
+    }
+  }, {
+    lowerCaseTags: true,
+    lowerCaseAttributeNames: true
+  })
+  parser.write(String(html || ''))
+  parser.end()
+  return roots
+}
+exports.default = parseHTML

package/dist/factories/parseHTML.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const htmlparser2_1=require("htmlparser2"),NodeService_1=require("../services/NodeService"),parseHTML=(e,t,r)=>{const s=[],n=[],o=e=>{e.ownerDocumentStore=t,n.length?n[n.length-1].appendChild(e):s.push(e)},a=new htmlparser2_1.Parser({onopentagname(e){const t=new r({tagName:e});o(t),n.push(t)},onattribute(e,t){if(!n.length)return;const r=n[n.length-1];"class"!==e?"style"===e&&r.style?r.style.cssText=t:r.setAttribute(e,t):r.className=t},ontext(e){o(new NodeService_1.TextService(e))},oncomment(e){o(new NodeService_1.CommentService(e))},onclosetag(){n.pop()}},{lowerCaseTags:!0,lowerCaseAttributeNames:!0});return a.write(String(e||"")),a.end(),s};exports.default=parseHTML;

package/dist/factories/serializeHTML.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A node's children, serialized in order (this is what innerHTML returns).
+ * @memberOf module:factories
+ * @param {*} node
+ * @returns {string}
+ */
+declare const serializeChildren: (node: any) => string;
+/**
+ * An element itself, serialized with its children (this is what outerHTML returns).
+ * @memberOf module:factories
+ * @param {*} element
+ * @returns {string}
+ */
+declare const serializeOuter: (element: any) => string;
+export { serializeChildren, serializeOuter };

package/dist/factories/serializeHTML.js

@@ -0,0 +1,114 @@
+'use strict'
+
+require('core-js/modules/esnext.iterator.constructor.js')
+require('core-js/modules/esnext.iterator.filter.js')
+require('core-js/modules/esnext.iterator.map.js')
+require('core-js/modules/esnext.set.add-all.js')
+require('core-js/modules/esnext.set.delete-all.js')
+require('core-js/modules/esnext.set.difference.js')
+require('core-js/modules/esnext.set.every.js')
+require('core-js/modules/esnext.set.filter.js')
+require('core-js/modules/esnext.set.find.js')
+require('core-js/modules/esnext.set.intersection.js')
+require('core-js/modules/esnext.set.is-disjoint-from.js')
+require('core-js/modules/esnext.set.is-subset-of.js')
+require('core-js/modules/esnext.set.is-superset-of.js')
+require('core-js/modules/esnext.set.join.js')
+require('core-js/modules/esnext.set.map.js')
+require('core-js/modules/esnext.set.reduce.js')
+require('core-js/modules/esnext.set.some.js')
+require('core-js/modules/esnext.set.symmetric-difference.js')
+require('core-js/modules/esnext.set.union.js')
+Object.defineProperty(exports, '__esModule', {
+  value: true
+})
+exports.serializeOuter = exports.serializeChildren = void 0
+/**
+ * @file Serializes pseudo-dom nodes back into an HTML string, for innerHTML / outerHTML.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @version 1.0.0
+ */
+const NodeService_1 = require('../services/NodeService')
+// Void elements are self-closing and never serialize a closing tag or children (there is no HTML parsing of their
+// content either - the DOM never lets them have children in the first place).
+const VOID_ELEMENTS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'])
+// These property-backed names (see ElementService / HTMLElementService's constructors) are not real HTML content
+// attributes - offsetWidth and friends describe layout, which does not exist here, and innerHTML is JS-only - so
+// they must never appear in serialized markup, however getAttributeNames() may report them.
+const NEVER_SERIALIZE = new Set(['innerHTML', 'clientHeight', 'clientLeft', 'clientTop', 'clientWidth', 'scrollHeight', 'scrollLeft', 'scrollTop', 'scrollWidth', 'offsetHeight', 'offsetLeft', 'offsetParent', 'offsetTop', 'offsetWidth'])
+// The attribute name to serialize a property-backed name as, when it differs from the property name
+const ATTRIBUTE_NAME = {
+  className: 'class'
+}
+// Boolean HTML attributes: present (with no value) when true, absent entirely when false
+const BOOLEAN_ATTRIBUTES = new Set(['hidden'])
+/**
+ * Escape text so it is safe inside HTML text content.
+ * @param {string} text
+ * @returns {string}
+ */
+const escapeText = text => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+/**
+ * Escape a value so it is safe inside a double-quoted HTML attribute.
+ * @param {string} value
+ * @returns {string}
+ */
+const escapeAttributeValue = value => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;')
+/**
+ * Every attribute of the element, serialized (class instead of className, boolean attributes bare, the never-real
+ * mock properties left out, style added from the live CSSStyleDeclaration when it is not empty).
+ * @param {*} element
+ * @returns {string}
+ */
+const serializeAttributes = element => {
+  let result = (element.getAttributeNames ? element.getAttributeNames() : []).filter(name => !NEVER_SERIALIZE.has(name)).map(name => {
+    if (BOOLEAN_ATTRIBUTES.has(name)) {
+      return element[name] ? ` ${name}` : ''
+    }
+    const value = element.getAttribute(name)
+    return value === '' ? '' : ` ${ATTRIBUTE_NAME[name] || name}="${escapeAttributeValue(value)}"`
+  }).join('')
+  const style = element.style
+  if (style && style.cssText) {
+    result += ` style="${escapeAttributeValue(style.cssText)}"`
+  }
+  return result
+}
+/**
+ * One node, serialized (its own markup only - see serializeChildren for its descendants too).
+ * @param {*} node
+ * @returns {string}
+ */
+const serializeNode = node => {
+  if (node.nodeType === NodeService_1.NodeService.TEXT_NODE) {
+    return escapeText(node.nodeValue || '')
+  }
+  if (node.nodeType === NodeService_1.NodeService.COMMENT_NODE) {
+    return `<!--${node.nodeValue || ''}-->`
+  }
+  if (node.nodeType !== NodeService_1.NodeService.ELEMENT_NODE) {
+    return ''
+  }
+  const tagName = node.tagName
+  const attributes = serializeAttributes(node)
+  if (VOID_ELEMENTS.has(tagName)) {
+    return `<${tagName}${attributes}>`
+  }
+  return `<${tagName}${attributes}>${serializeChildren(node)}</${tagName}>`
+}
+/**
+ * A node's children, serialized in order (this is what innerHTML returns).
+ * @memberOf module:factories
+ * @param {*} node
+ * @returns {string}
+ */
+const serializeChildren = node => Array.from(node.childNodes).map(serializeNode).join('')
+exports.serializeChildren = serializeChildren
+/**
+ * An element itself, serialized with its children (this is what outerHTML returns).
+ * @memberOf module:factories
+ * @param {*} element
+ * @returns {string}
+ */
+const serializeOuter = element => serializeNode(element)
+exports.serializeOuter = serializeOuter

package/dist/factories/serializeHTML.min.js

@@ -0,0 +1 @@
+"use strict";require("core-js/modules/esnext.iterator.constructor.js"),require("core-js/modules/esnext.iterator.filter.js"),require("core-js/modules/esnext.iterator.map.js"),require("core-js/modules/esnext.set.add-all.js"),require("core-js/modules/esnext.set.delete-all.js"),require("core-js/modules/esnext.set.difference.js"),require("core-js/modules/esnext.set.every.js"),require("core-js/modules/esnext.set.filter.js"),require("core-js/modules/esnext.set.find.js"),require("core-js/modules/esnext.set.intersection.js"),require("core-js/modules/esnext.set.is-disjoint-from.js"),require("core-js/modules/esnext.set.is-subset-of.js"),require("core-js/modules/esnext.set.is-superset-of.js"),require("core-js/modules/esnext.set.join.js"),require("core-js/modules/esnext.set.map.js"),require("core-js/modules/esnext.set.reduce.js"),require("core-js/modules/esnext.set.some.js"),require("core-js/modules/esnext.set.symmetric-difference.js"),require("core-js/modules/esnext.set.union.js"),Object.defineProperty(exports,"__esModule",{value:!0}),exports.serializeOuter=exports.serializeChildren=void 0;const NodeService_1=require("../services/NodeService"),VOID_ELEMENTS=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),NEVER_SERIALIZE=new Set(["innerHTML","clientHeight","clientLeft","clientTop","clientWidth","scrollHeight","scrollLeft","scrollTop","scrollWidth","offsetHeight","offsetLeft","offsetParent","offsetTop","offsetWidth"]),ATTRIBUTE_NAME={className:"class"},BOOLEAN_ATTRIBUTES=new Set(["hidden"]),escapeText=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),escapeAttributeValue=e=>e.replace(/&/g,"&amp;").replace(/"/g,"&quot;"),serializeAttributes=e=>{let s=(e.getAttributeNames?e.getAttributeNames():[]).filter(e=>!NEVER_SERIALIZE.has(e)).map(s=>{if(BOOLEAN_ATTRIBUTES.has(s))return e[s]?` ${s}`:"";const r=e.getAttribute(s);return""===r?"":` ${ATTRIBUTE_NAME[s]||s}="${escapeAttributeValue(r)}"`}).join("");const r=e.style;return r&&r.cssText&&(s+=` style="${escapeAttributeValue(r.cssText)}"`),s},serializeNode=e=>{if(e.nodeType===NodeService_1.NodeService.TEXT_NODE)return escapeText(e.nodeValue||"");if(e.nodeType===NodeService_1.NodeService.COMMENT_NODE)return`\x3c!--${e.nodeValue||""}--\x3e`;if(e.nodeType!==NodeService_1.NodeService.ELEMENT_NODE)return"";const s=e.tagName,r=serializeAttributes(e);return VOID_ELEMENTS.has(s)?`<${s}${r}>`:`<${s}${r}>${serializeChildren(e)}</${s}>`},serializeChildren=e=>Array.from(e.childNodes).map(serializeNode).join("");exports.serializeChildren=serializeChildren;const serializeOuter=e=>serializeNode(e);exports.serializeOuter=serializeOuter;

package/dist/interfaces/PseudoElement.d.ts

@@ -618,10 +618,10 @@ export interface PseudoElement extends PseudoNode {
      */
     insertAdjacentElement(position: string, element: PseudoElement): PseudoElement | null;
     /**
-     * Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given. Not implemented
-     * yet (HTML parsing is out of scope for now).
+     * Parses the text as HTML and inserts the resulting nodes into the tree in the position given.
      * @param {string} position beforebegin, afterbegin, beforeend or afterend
      * @param {string} text The markup to parse
+     * @throws {Error} When the position is not one of the four above
      */
     insertAdjacentHTML(position: string, text: string): void;
     /**

package/dist/interfaces/PseudoShadowRoot.d.ts

@@ -1,12 +1,12 @@
-import { PseudoDocumentFragment } from './PseudoDocumentFragment';
-import { PseudoElement } from './PseudoElement';
-export interface PseudoShadowRoot extends PseudoDocumentFragment {
-    /**
-     * The element this shadow root is attached to.
-     */
-    get host(): PseudoElement;
-    /**
-     * 'open' (reachable via element.shadowRoot) or 'closed' (not).
-     */
-    get mode(): string;
-}
+import { PseudoDocumentFragment } from './PseudoDocumentFragment';
+import { PseudoElement } from './PseudoElement';
+export interface PseudoShadowRoot extends PseudoDocumentFragment {
+    /**
+     * The element this shadow root is attached to.
+     */
+    get host(): PseudoElement;
+    /**
+     * 'open' (reachable via element.shadowRoot) or 'closed' (not).
+     */
+    get mode(): string;
+}

package/dist/services/ElementService.d.ts

@@ -41,7 +41,6 @@ type DOMRect = {
  */
 export declare class ElementService extends NodeService implements Partial<PseudoElement> {
     id: string;
-    innerHTML: string;
     type: string;
     clientHeight: number;
     clientLeft: number;
@@ -113,6 +112,17 @@ export declare class ElementService extends NodeService implements Partial<Pseud
      * @returns {string|null}
      */
     get prefix(): string | null;
+    /**
+     * The HTML markup of this element's children. Only the getter is here (the setter, which needs to build new
+     * elements from parsed HTML, is on HTMLElementService - see its class comment).
+     * @returns {string}
+     */
+    get innerHTML(): string;
+    /**
+     * The HTML markup of this element itself, including its children. Only the getter is here (see innerHTML).
+     * @returns {string}
+     */
+    get outerHTML(): string;
     get nodeType(): number;
     get attributes(): PseudoNamedNodeMap;
     get classList(): PseudoDOMTokenList;

package/dist/services/ElementService.js

@@ -44,6 +44,7 @@ const cloneObject_1 = __importDefault(require('si-funciona/dist/helpers/objects/
 const isEqual_1 = __importDefault(require('si-funciona/dist/helpers/objects/isEqual'))
 const query_1 = require('../factories/query')
 const ShadowRootService_1 = require('./ShadowRootService')
+const serializeHTML_1 = require('../factories/serializeHTML')
 const zeroRect = () => ({
   x: 0,
   y: 0,
@@ -104,9 +105,6 @@ class ElementService extends NodeService_1.NodeService {
     }, {
       name: 'id',
       value: ''
-    }, {
-      name: 'innerHTML',
-      value: ''
     },
     // Layout is not really computed (there is no rendering engine here): these start at 0, like an unrendered
     // element's would, but can be set directly to whatever a test needs code under test to see.
@@ -241,6 +239,23 @@ class ElementService extends NodeService_1.NodeService {
     return null
   }
 
+  /**
+   * The HTML markup of this element's children. Only the getter is here (the setter, which needs to build new
+   * elements from parsed HTML, is on HTMLElementService - see its class comment).
+   * @returns {string}
+   */
+  get innerHTML () {
+    return (0, serializeHTML_1.serializeChildren)(this)
+  }
+
+  /**
+   * The HTML markup of this element itself, including its children. Only the getter is here (see innerHTML).
+   * @returns {string}
+   */
+  get outerHTML () {
+    return (0, serializeHTML_1.serializeOuter)(this)
+  }
+
   get nodeType () {
     return NodeService_1.NodeService.ELEMENT_NODE
   }

package/dist/services/ElementService.min.js

@@ -1 +1 @@
-"use strict";require("core-js/modules/esnext.iterator.constructor.js"),require("core-js/modules/esnext.iterator.every.js"),require("core-js/modules/esnext.iterator.find.js"),require("core-js/modules/esnext.iterator.for-each.js"),require("core-js/modules/esnext.iterator.map.js"),require("core-js/modules/esnext.iterator.some.js"),require("core-js/modules/esnext.set.add-all.js"),require("core-js/modules/esnext.set.delete-all.js"),require("core-js/modules/esnext.set.difference.js"),require("core-js/modules/esnext.set.every.js"),require("core-js/modules/esnext.set.filter.js"),require("core-js/modules/esnext.set.find.js"),require("core-js/modules/esnext.set.intersection.js"),require("core-js/modules/esnext.set.is-disjoint-from.js"),require("core-js/modules/esnext.set.is-subset-of.js"),require("core-js/modules/esnext.set.is-superset-of.js"),require("core-js/modules/esnext.set.join.js"),require("core-js/modules/esnext.set.map.js"),require("core-js/modules/esnext.set.reduce.js"),require("core-js/modules/esnext.set.some.js"),require("core-js/modules/esnext.set.symmetric-difference.js"),require("core-js/modules/esnext.set.union.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ElementService=void 0;const createEvent_1=__importDefault(require("../factories/createEvent")),NodeService_1=require("./NodeService"),AttrService_1=require("./AttrService"),DOMTokenListService_1=require("./DOMTokenListService"),NamedNodeMapService_1=require("./NamedNodeMapService"),getParentNodesFromAttribute_1=__importDefault(require("../functions/getParentNodesFromAttribute")),HTMLCollectionService_1=require("./HTMLCollectionService"),cloneObject_1=__importDefault(require("si-funciona/dist/helpers/objects/cloneObject")),isEqual_1=__importDefault(require("si-funciona/dist/helpers/objects/isEqual")),query_1=require("../factories/query"),ShadowRootService_1=require("./ShadowRootService"),zeroRect=()=>({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});class ElementService extends NodeService_1.NodeService{constructor({tagName:e="",attributes:t=[],parent:r=null,children:s=[]}={}){super(),this.boundingClientRect=zeroRect(),this.clientRects=[],this.animations=[],this.isVisible=!0,this.capturedPointers=new Set,this.shadowRootInstance=null,this.defaultEventApplied=!1,this.tokenList=new DOMTokenListService_1.DOMTokenListService,this.tag=e,this.attributeList=t.concat([{name:"className",value:""},{name:"id",value:""},{name:"innerHTML",value:""},{name:"clientHeight",value:0},{name:"clientLeft",value:0},{name:"clientTop",value:0},{name:"clientWidth",value:0},{name:"scrollHeight",value:0},{name:"scrollLeft",value:0},{name:"scrollTop",value:0},{name:"scrollWidth",value:0}]),this.propertyAttributes=this.attributeList.map(({name:e})=>e),this.attributeList.forEach(({name:e,value:t})=>{this[e]=t}),s.forEach(e=>{if(!e||"number"!=typeof e.nodeType)throw new TypeError("The children of an element must be nodes.");this.appendChild(e)}),r&&r.appendChild(this)}currentAttributes(){return this.attributeList.map(({name:e,value:t})=>({name:e,value:this.propertyAttributes.indexOf(e)>=0?this[e]:t}))}get nodeName(){return this.tag}cloneShallow(){const e=new this.constructor({tagName:this.tag});return e.attributeList.length=0,this.currentAttributes().forEach(({name:t,value:r})=>{const s="object"==typeof r&&null!==r?(0,cloneObject_1.default)(r):r;e.attributeList.push({name:t,value:s}),e.propertyAttributes.indexOf(t)>=0&&(e[t]=s)}),e.ownerDocumentStore=this.ownerDocumentStore,e}equalsShallow(e){const t=this.currentAttributes(),r=e.currentAttributes();return this.nodeName===e.nodeName&&t.length===r.length&&t.every(({name:e,value:t})=>{const s=r.find(t=>t.name===e);return void 0!==s&&(0,isEqual_1.default)(t,s.value)})}get tagName(){return this.tag}get localName(){return this.tag}get prefix(){return null}get nodeType(){return NodeService_1.NodeService.ELEMENT_NODE}get attributes(){return new NamedNodeMapService_1.NamedNodeMapService(this.currentAttributes().map(({name:e,value:t})=>new AttrService_1.AttrService(e,String(t),this)))}get classList(){return this.tokenList}get className(){return this.tokenList.value}set className(e){this.tokenList.value=e}get children(){return new HTMLCollectionService_1.HTMLCollectionService(this)}get childElementCount(){return this.children.length}get firstElementChild(){return this.children.item(0)}get lastElementChild(){const e=this.children;return e.item(e.length-1)}get nextElementSibling(){let e=this.nextSibling;for(;e&&e.nodeType!==NodeService_1.NodeService.ELEMENT_NODE;)e=e.nextSibling;return e}get previousElementSibling(){let e=this.previousSibling;for(;e&&e.nodeType!==NodeService_1.NodeService.ELEMENT_NODE;)e=e.previousSibling;return e}insertAdjacentElement(e,t){return this.insertAdjacent(e,t)}insertAdjacentText(e,t){this.insertAdjacent(e,t)}insertAdjacent(e,t){switch(e){case"beforebegin":return this.parentNode?(this.before(t),t):null;case"afterbegin":return this.prepend(t),t;case"beforeend":return this.append(t),t;case"afterend":return this.parentNode?(this.after(t),t):null;default:throw new Error(`"${e}" is not one of beforebegin, afterbegin, beforeend or afterend.`)}}insertAdjacentHTML(e,t){throw new Error("ElementService.insertAdjacentHTML() is not implemented yet.")}matches(e){return(0,query_1.matches)(this,e)}closest(e){return(0,query_1.closest)(this,e)}applyDefaultEvent(){let e=e=>{};if(this.defaultEventApplied)return e;switch(this.tagName){case"button":case"input":e=e=>{const t=String(this.getAttribute("type")||this.type||"").toLowerCase(),r="button"===this.tagName?"button"!==t&&"reset"!==t:/^(submit|image)$/.test(t),s=(0,getParentNodesFromAttribute_1.default)("tagName","form",this);r&&s.length&&!this.hasAttribute("disabled")&&s[s.length-1].dispatchEvent((0,createEvent_1.default)("submit",{},{browser:!0,trusted:e.isTrusted}))},super.setDefaultEvent("click",e),this.defaultEventApplied=!0}return e}childInserted(e){"function"==typeof e.applyDefaultEvent&&e.applyDefaultEvent()}hasAttribute(e){return this.attributeList.some(({name:t})=>t===e)}setAttribute(e,t){const r=this.attributeList.find(({name:t})=>t===e);r?r.value=t:this.attributeList.push({name:e,value:t}),this.propertyAttributes.indexOf(e)>=0&&(this[e]=t)}getAttribute(e){const t=this.currentAttributes().find(({name:t})=>t===e);return t?t.value:null}removeAttribute(e){const t=this.attributeList.findIndex(({name:t})=>t===e);t>=0&&this.attributeList.splice(t,1)}getAttributeNames(){return this.currentAttributes().map(({name:e})=>e)}hasAttributes(){return this.attributeList.length>0}toggleAttribute(e,t){const r=this.hasAttribute(e),s="boolean"==typeof t?t:!r;return s&&!r?this.setAttribute(e,""):!s&&r&&this.removeAttribute(e),s}getBoundingClientRect(){return this.boundingClientRect}getClientRects(){return this.clientRects}getAnimations(){return this.animations}checkVisibility(){return this.isVisible}computedStyleMap(){const e=this.style;return{get:t=>{const r=e?e.getPropertyValue(t):"";return""===r?void 0:r}}}hasPointerCapture(e){return this.capturedPointers.has(e)}setPointerCapture(e){this.capturedPointers.add(e)}releasePointerCapture(e){this.capturedPointers.delete(e)}scroll(e=0,t=0){if("number"==typeof e)return this.scrollLeft=e,void(this.scrollTop=t);"number"==typeof e.left&&(this.scrollLeft=e.left),"number"==typeof e.top&&(this.scrollTop=e.top)}scrollTo(e=0,t=0){this.scroll(e,t)}scrollBy(e=0,t=0){"number"!=typeof e?this.scroll({left:this.scrollLeft+(e.left||0),top:this.scrollTop+(e.top||0)}):this.scroll(this.scrollLeft+e,this.scrollTop+t)}scrollIntoView(){}requestFullscreen(){return Promise.resolve()}requestPointerLock(){return Promise.resolve()}attachShadow(e){if(this.shadowRootInstance)throw new Error("Shadow root cannot be created on a host which already hosts a shadow tree.");const t=new ShadowRootService_1.ShadowRootService;return t.host=this,t.mode=e.mode,this.shadowRootInstance=t,t}get shadowRoot(){return this.shadowRootInstance&&"open"===this.shadowRootInstance.mode?this.shadowRootInstance:null}}exports.ElementService=ElementService;
+"use strict";require("core-js/modules/esnext.iterator.constructor.js"),require("core-js/modules/esnext.iterator.every.js"),require("core-js/modules/esnext.iterator.find.js"),require("core-js/modules/esnext.iterator.for-each.js"),require("core-js/modules/esnext.iterator.map.js"),require("core-js/modules/esnext.iterator.some.js"),require("core-js/modules/esnext.set.add-all.js"),require("core-js/modules/esnext.set.delete-all.js"),require("core-js/modules/esnext.set.difference.js"),require("core-js/modules/esnext.set.every.js"),require("core-js/modules/esnext.set.filter.js"),require("core-js/modules/esnext.set.find.js"),require("core-js/modules/esnext.set.intersection.js"),require("core-js/modules/esnext.set.is-disjoint-from.js"),require("core-js/modules/esnext.set.is-subset-of.js"),require("core-js/modules/esnext.set.is-superset-of.js"),require("core-js/modules/esnext.set.join.js"),require("core-js/modules/esnext.set.map.js"),require("core-js/modules/esnext.set.reduce.js"),require("core-js/modules/esnext.set.some.js"),require("core-js/modules/esnext.set.symmetric-difference.js"),require("core-js/modules/esnext.set.union.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ElementService=void 0;const createEvent_1=__importDefault(require("../factories/createEvent")),NodeService_1=require("./NodeService"),AttrService_1=require("./AttrService"),DOMTokenListService_1=require("./DOMTokenListService"),NamedNodeMapService_1=require("./NamedNodeMapService"),getParentNodesFromAttribute_1=__importDefault(require("../functions/getParentNodesFromAttribute")),HTMLCollectionService_1=require("./HTMLCollectionService"),cloneObject_1=__importDefault(require("si-funciona/dist/helpers/objects/cloneObject")),isEqual_1=__importDefault(require("si-funciona/dist/helpers/objects/isEqual")),query_1=require("../factories/query"),ShadowRootService_1=require("./ShadowRootService"),serializeHTML_1=require("../factories/serializeHTML"),zeroRect=()=>({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0});class ElementService extends NodeService_1.NodeService{constructor({tagName:e="",attributes:t=[],parent:r=null,children:s=[]}={}){super(),this.boundingClientRect=zeroRect(),this.clientRects=[],this.animations=[],this.isVisible=!0,this.capturedPointers=new Set,this.shadowRootInstance=null,this.defaultEventApplied=!1,this.tokenList=new DOMTokenListService_1.DOMTokenListService,this.tag=e,this.attributeList=t.concat([{name:"className",value:""},{name:"id",value:""},{name:"clientHeight",value:0},{name:"clientLeft",value:0},{name:"clientTop",value:0},{name:"clientWidth",value:0},{name:"scrollHeight",value:0},{name:"scrollLeft",value:0},{name:"scrollTop",value:0},{name:"scrollWidth",value:0}]),this.propertyAttributes=this.attributeList.map(({name:e})=>e),this.attributeList.forEach(({name:e,value:t})=>{this[e]=t}),s.forEach(e=>{if(!e||"number"!=typeof e.nodeType)throw new TypeError("The children of an element must be nodes.");this.appendChild(e)}),r&&r.appendChild(this)}currentAttributes(){return this.attributeList.map(({name:e,value:t})=>({name:e,value:this.propertyAttributes.indexOf(e)>=0?this[e]:t}))}get nodeName(){return this.tag}cloneShallow(){const e=new this.constructor({tagName:this.tag});return e.attributeList.length=0,this.currentAttributes().forEach(({name:t,value:r})=>{const s="object"==typeof r&&null!==r?(0,cloneObject_1.default)(r):r;e.attributeList.push({name:t,value:s}),e.propertyAttributes.indexOf(t)>=0&&(e[t]=s)}),e.ownerDocumentStore=this.ownerDocumentStore,e}equalsShallow(e){const t=this.currentAttributes(),r=e.currentAttributes();return this.nodeName===e.nodeName&&t.length===r.length&&t.every(({name:e,value:t})=>{const s=r.find(t=>t.name===e);return void 0!==s&&(0,isEqual_1.default)(t,s.value)})}get tagName(){return this.tag}get localName(){return this.tag}get prefix(){return null}get innerHTML(){return(0,serializeHTML_1.serializeChildren)(this)}get outerHTML(){return(0,serializeHTML_1.serializeOuter)(this)}get nodeType(){return NodeService_1.NodeService.ELEMENT_NODE}get attributes(){return new NamedNodeMapService_1.NamedNodeMapService(this.currentAttributes().map(({name:e,value:t})=>new AttrService_1.AttrService(e,String(t),this)))}get classList(){return this.tokenList}get className(){return this.tokenList.value}set className(e){this.tokenList.value=e}get children(){return new HTMLCollectionService_1.HTMLCollectionService(this)}get childElementCount(){return this.children.length}get firstElementChild(){return this.children.item(0)}get lastElementChild(){const e=this.children;return e.item(e.length-1)}get nextElementSibling(){let e=this.nextSibling;for(;e&&e.nodeType!==NodeService_1.NodeService.ELEMENT_NODE;)e=e.nextSibling;return e}get previousElementSibling(){let e=this.previousSibling;for(;e&&e.nodeType!==NodeService_1.NodeService.ELEMENT_NODE;)e=e.previousSibling;return e}insertAdjacentElement(e,t){return this.insertAdjacent(e,t)}insertAdjacentText(e,t){this.insertAdjacent(e,t)}insertAdjacent(e,t){switch(e){case"beforebegin":return this.parentNode?(this.before(t),t):null;case"afterbegin":return this.prepend(t),t;case"beforeend":return this.append(t),t;case"afterend":return this.parentNode?(this.after(t),t):null;default:throw new Error(`"${e}" is not one of beforebegin, afterbegin, beforeend or afterend.`)}}insertAdjacentHTML(e,t){throw new Error("ElementService.insertAdjacentHTML() is not implemented yet.")}matches(e){return(0,query_1.matches)(this,e)}closest(e){return(0,query_1.closest)(this,e)}applyDefaultEvent(){let e=e=>{};if(this.defaultEventApplied)return e;switch(this.tagName){case"button":case"input":e=e=>{const t=String(this.getAttribute("type")||this.type||"").toLowerCase(),r="button"===this.tagName?"button"!==t&&"reset"!==t:/^(submit|image)$/.test(t),s=(0,getParentNodesFromAttribute_1.default)("tagName","form",this);r&&s.length&&!this.hasAttribute("disabled")&&s[s.length-1].dispatchEvent((0,createEvent_1.default)("submit",{},{browser:!0,trusted:e.isTrusted}))},super.setDefaultEvent("click",e),this.defaultEventApplied=!0}return e}childInserted(e){"function"==typeof e.applyDefaultEvent&&e.applyDefaultEvent()}hasAttribute(e){return this.attributeList.some(({name:t})=>t===e)}setAttribute(e,t){const r=this.attributeList.find(({name:t})=>t===e);r?r.value=t:this.attributeList.push({name:e,value:t}),this.propertyAttributes.indexOf(e)>=0&&(this[e]=t)}getAttribute(e){const t=this.currentAttributes().find(({name:t})=>t===e);return t?t.value:null}removeAttribute(e){const t=this.attributeList.findIndex(({name:t})=>t===e);t>=0&&this.attributeList.splice(t,1)}getAttributeNames(){return this.currentAttributes().map(({name:e})=>e)}hasAttributes(){return this.attributeList.length>0}toggleAttribute(e,t){const r=this.hasAttribute(e),s="boolean"==typeof t?t:!r;return s&&!r?this.setAttribute(e,""):!s&&r&&this.removeAttribute(e),s}getBoundingClientRect(){return this.boundingClientRect}getClientRects(){return this.clientRects}getAnimations(){return this.animations}checkVisibility(){return this.isVisible}computedStyleMap(){const e=this.style;return{get:t=>{const r=e?e.getPropertyValue(t):"";return""===r?void 0:r}}}hasPointerCapture(e){return this.capturedPointers.has(e)}setPointerCapture(e){this.capturedPointers.add(e)}releasePointerCapture(e){this.capturedPointers.delete(e)}scroll(e=0,t=0){if("number"==typeof e)return this.scrollLeft=e,void(this.scrollTop=t);"number"==typeof e.left&&(this.scrollLeft=e.left),"number"==typeof e.top&&(this.scrollTop=e.top)}scrollTo(e=0,t=0){this.scroll(e,t)}scrollBy(e=0,t=0){"number"!=typeof e?this.scroll({left:this.scrollLeft+(e.left||0),top:this.scrollTop+(e.top||0)}):this.scroll(this.scrollLeft+e,this.scrollTop+t)}scrollIntoView(){}requestFullscreen(){return Promise.resolve()}requestPointerLock(){return Promise.resolve()}attachShadow(e){if(this.shadowRootInstance)throw new Error("Shadow root cannot be created on a host which already hosts a shadow tree.");const t=new ShadowRootService_1.ShadowRootService;return t.host=this,t.mode=e.mode,this.shadowRootInstance=t,t}get shadowRoot(){return this.shadowRootInstance&&"open"===this.shadowRootInstance.mode?this.shadowRootInstance:null}}exports.ElementService=ElementService;

package/dist/services/HTMLElementService.d.ts

@@ -1,87 +1,119 @@
-/**
- * @file Substitute for the DOM HTMLElement Class.
- * @author Joshua Heagle <joshuaheagle@gmail.com>
- * @version 1.0.0
- */
-import { PseudoHTMLElement } from '../interfaces/PseudoHTMLElement';
-import { PseudoNode } from '../interfaces/PseudoNode';
-import { NodeService } from './NodeService';
-import { ElementService } from './ElementService';
-import { CSSStyleDeclarationService } from './CSSStyleDeclarationService';
-/**
- * Simulate the behaviour of the HTMLElement Class when there is no DOM available.
- * @author Joshua Heagle <joshuaheagle@gmail.com>
- * @class
- * @augments PseudoElement
- * @property {boolean} hidden - State of whether element is visible
- * @property {number} offsetHeight - The height of the element as offset by the parent element
- * @property {number} offsetLeft - The position of the left side of the element based on the parent element
- * @property {PseudoHTMLElement} offsetParent - A reference to the closest positioned parent element
- * @property {number} offsetTop - The position of the top side of the element based on the parent element
- * @property {number} offsetWidth - The width of the element as offset by the parent element
- * @property {CSSStyleDeclarationService} style - The element's inline styles, live and settable per property
- * @property {Object.<string, string>} dataset - The element's data-* attributes, live, under their camelCase names
- * @property {string} title - The title attribute which affects the text visible on hover
- */
-export declare class HTMLElementService extends ElementService implements Partial<PseudoHTMLElement> {
-    private readonly styleDeclaration;
-    private readonly datasetProxy;
-    /**
-     * Simulate the HTMLElement object when the Dom is not available
-     * @param {Object} [elementOptions={}]
-     * @param {string} [elementOptions.tagName='']
-     * @param {PseudoNode|Object} [elementOptions.parent={}]
-     * @param {Array} [elementOptions.children=[]]
-     * @constructor
-     */
-    constructor({ tagName, parent, children }?: {
-        tagName?: string;
-        parent?: PseudoNode | null;
-        children?: Array<any>;
-    });
-    /**
-     * The element's inline styles: a live CSSStyleDeclaration-like object, so both style.setProperty('color', 'red')
-     * and style.color = 'red' work.
-     * @returns {CSSStyleDeclarationService}
-     */
-    get style(): CSSStyleDeclarationService;
-    /**
-     * The element's data-* attributes, live, under their camelCase names (data-foo-bar <-> dataset.fooBar). Backed
-     * directly by getAttribute / setAttribute, so it is never out of sync with the attributes themselves.
-     * @returns {Object.<string, string>}
-     */
-    get dataset(): {
-        [key: string]: string;
-    };
-    /**
-     * Style is not attribute-backed like most properties (see the constructor), so cloneNode needs its own copy of it.
-     * @returns {NodeService}
-     */
-    protected cloneShallow(): NodeService;
-    /**
-     * Style is not attribute-backed like most properties, so isEqualNode needs to compare it separately too.
-     * @param {NodeService} other The node to compare with
-     * @returns {boolean}
-     */
-    protected equalsShallow(other: NodeService): boolean;
-    /**
-     * Whether this element can have the focus: form controls and links which are not disabled, and anything with a tabindex.
-     * @returns {boolean}
-     */
-    get canFocus(): boolean;
-    /**
-     * Click the element: a click event is sent to it, which bubbles and can be cancelled, like one from a user but a
-     * script made it (so it is not trusted). A disabled element does nothing.
-     */
-    click(): void;
-    /**
-     * Give the element the focus. The element which had it gets blur then focusout, and this one gets focus then
-     * focusin (blur and focus do not bubble, focusin and focusout do). Nothing happens when the element cannot have the
-     * focus or already has it.
-     */
-    focus(): void;
-    /**
-     * Take the focus away from the element, when it has it: it gets blur then focusout.
-     */
-    blur(): void;
-}
+/**
+ * @file Substitute for the DOM HTMLElement Class.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @version 1.0.0
+ */
+import { PseudoHTMLElement } from '../interfaces/PseudoHTMLElement';
+import { PseudoNode } from '../interfaces/PseudoNode';
+import { NodeService } from './NodeService';
+import { ElementService } from './ElementService';
+import { CSSStyleDeclarationService } from './CSSStyleDeclarationService';
+/**
+ * Simulate the behaviour of the HTMLElement Class when there is no DOM available.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @class
+ * @augments PseudoElement
+ * @property {boolean} hidden - State of whether element is visible
+ * @property {number} offsetHeight - The height of the element as offset by the parent element
+ * @property {number} offsetLeft - The position of the left side of the element based on the parent element
+ * @property {PseudoHTMLElement} offsetParent - A reference to the closest positioned parent element
+ * @property {number} offsetTop - The position of the top side of the element based on the parent element
+ * @property {number} offsetWidth - The width of the element as offset by the parent element
+ * @property {CSSStyleDeclarationService} style - The element's inline styles, live and settable per property
+ * @property {Object.<string, string>} dataset - The element's data-* attributes, live, under their camelCase names
+ * @property {string} title - The title attribute which affects the text visible on hover
+ */
+export declare class HTMLElementService extends ElementService implements Partial<PseudoHTMLElement> {
+    private readonly styleDeclaration;
+    private readonly datasetProxy;
+    /**
+     * Simulate the HTMLElement object when the Dom is not available
+     * @param {Object} [elementOptions={}]
+     * @param {string} [elementOptions.tagName='']
+     * @param {PseudoNode|Object} [elementOptions.parent={}]
+     * @param {Array} [elementOptions.children=[]]
+     * @constructor
+     */
+    constructor({ tagName, parent, children }?: {
+        tagName?: string;
+        parent?: PseudoNode | null;
+        children?: Array<any>;
+    });
+    /**
+     * The element's inline styles: a live CSSStyleDeclaration-like object, so both style.setProperty('color', 'red')
+     * and style.color = 'red' work.
+     * @returns {CSSStyleDeclarationService}
+     */
+    get style(): CSSStyleDeclarationService;
+    /**
+     * The element's data-* attributes, live, under their camelCase names (data-foo-bar <-> dataset.fooBar). Backed
+     * directly by getAttribute / setAttribute, so it is never out of sync with the attributes themselves.
+     * @returns {Object.<string, string>}
+     */
+    get dataset(): {
+        [key: string]: string;
+    };
+    /**
+     * Style is not attribute-backed like most properties (see the constructor), so cloneNode needs its own copy of it.
+     * @returns {NodeService}
+     */
+    protected cloneShallow(): NodeService;
+    /**
+     * Style is not attribute-backed like most properties, so isEqualNode needs to compare it separately too.
+     * @param {NodeService} other The node to compare with
+     * @returns {boolean}
+     */
+    protected equalsShallow(other: NodeService): boolean;
+    /**
+     * Parses html with this class building each new element (matches HTML: parsed elements behave like plain
+     * HTMLElements, not whatever specialized class happens to be setting innerHTML / outerHTML).
+     * @param {string} html
+     * @returns {Array<*>}
+     */
+    private parse;
+    /**
+     * Replace this element's children by parsing html. innerHTML's setter is here rather than on ElementService (which
+     * only has the getter) because building the new elements needs a concrete element class - see parse().
+     * @param {string} html
+     * @returns {undefined}
+     */
+    set innerHTML(html: string);
+    get innerHTML(): string;
+    /**
+     * Replace this element itself, in its parent, by parsing html. Does nothing when it has no parent, like
+     * replaceWith. outerHTML's setter is here rather than on ElementService for the same reason as innerHTML's.
+     * @param {string} html
+     * @returns {undefined}
+     */
+    set outerHTML(html: string);
+    get outerHTML(): string;
+    /**
+     * Parse html and insert the resulting nodes at the given position, like insertAdjacentElement /
+     * insertAdjacentText.
+     * @param {string} position beforebegin, afterbegin, beforeend or afterend
+     * @param {string} html The markup to parse
+     * @returns {undefined}
+     * @throws {Error} When the position is not one of the four above
+     */
+    insertAdjacentHTML(position: string, html: string): void;
+    /**
+     * Whether this element can have the focus: form controls and links which are not disabled, and anything with a tabindex.
+     * @returns {boolean}
+     */
+    get canFocus(): boolean;
+    /**
+     * Click the element: a click event is sent to it, which bubbles and can be cancelled, like one from a user but a
+     * script made it (so it is not trusted). A disabled element does nothing.
+     */
+    click(): void;
+    /**
+     * Give the element the focus. The element which had it gets blur then focusout, and this one gets focus then
+     * focusin (blur and focus do not bubble, focusin and focusout do). Nothing happens when the element cannot have the
+     * focus or already has it.
+     */
+    focus(): void;
+    /**
+     * Take the focus away from the element, when it has it: it gets blur then focusout.
+     */
+    blur(): void;
+}