pseudo-dom 0.8.0 → 0.9.0

package/dist/interfaces/PseudoHTMLElement.d.ts

@@ -1,22 +1,33 @@
-/**
- * @file Substitute for the DOM HTMLElement Class.
- * @author Joshua Heagle <joshuaheagle@gmail.com>
- * @version 1.0.0
- */
-import { PseudoElement } from './PseudoElement';
-/**
- * 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 {Object} style - A container to define all applied inline-styles
- * @property {string} title - The title attribute which affects the text visible on hover
- */
-export interface PseudoHTMLElement extends PseudoElement {
-}
+/**
+ * @file Substitute for the DOM HTMLElement Class.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @version 1.0.0
+ */
+import { PseudoElement } from './PseudoElement';
+import { PseudoCSSStyleDeclaration } from './PseudoCSSStyleDeclaration';
+/**
+ * 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 {string} title - The title attribute which affects the text visible on hover
+ */
+export interface PseudoHTMLElement extends PseudoElement {
+    /**
+     * The element's inline styles, live and settable per property (style.color = 'red') as well as through the real
+     * CSSStyleDeclaration methods (getPropertyValue, setProperty, removeProperty, cssText).
+     */
+    get style(): PseudoCSSStyleDeclaration;
+    /**
+     * The element's data-* attributes, live, under their camelCase names (data-foo-bar <-> dataset.fooBar).
+     */
+    get dataset(): {
+        [key: string]: string;
+    };
+}

package/dist/services/CSSStyleDeclarationService.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @file Substitute for the DOM CSSStyleDeclaration Class (the object behind Element.style).
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @version 1.0.0
+ */
+/**
+ * Simulate the behaviour of the CSSStyleDeclaration Class when there is no DOM available: an ordered map of CSS
+ * property/value pairs, parsed from and serialized back to a cssText string. Values are stored and returned as
+ * given, with no unit conversion, shorthand expansion or validation - this is a data structure, not a real CSS
+ * engine. Named property access (declaration.backgroundColor, camelCase) is added on top of this by
+ * createStyleDeclaration, which wraps an instance of this class in a Proxy.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @class
+ */
+export declare class CSSStyleDeclarationService {
+    private readonly properties;
+    /**
+     * @param {string} [cssText=''] Initial declarations, as CSS text ("color: red; font-size: 12px;")
+     * @constructor
+     */
+    constructor(cssText?: string);
+    /**
+     * How many properties are currently set.
+     * @returns {number}
+     */
+    get length(): number;
+    /**
+     * The name of the property at the given index, in the order it was set, or '' when there is none (matches the
+     * DOM's CSSStyleDeclaration, which is array-like).
+     * @param {number} index
+     * @returns {string}
+     */
+    item(index: number): string;
+    /**
+     * The value of the given property, or '' when it is not set.
+     * @param {string} property A CSS property name (kebab-case, e.g. "background-color")
+     * @returns {string}
+     */
+    getPropertyValue(property: string): string;
+    /**
+     * "important" when the property was set with !important, otherwise ''.
+     * @param {string} property A CSS property name (kebab-case)
+     * @returns {string}
+     */
+    getPropertyPriority(property: string): string;
+    /**
+     * Set a property's value (and optionally its priority). An empty, null or undefined value removes the property
+     * instead, like the DOM.
+     * @param {string} property A CSS property name (kebab-case)
+     * @param {string} value The value, or '' to remove the property
+     * @param {string} [priority=''] "important" to mark it !important
+     * @returns {undefined}
+     */
+    setProperty(property: string, value: string, priority?: string): void;
+    /**
+     * Remove a property, returning the value it had (or '' when it was not set).
+     * @param {string} property A CSS property name (kebab-case)
+     * @returns {string}
+     */
+    removeProperty(property: string): string;
+    /**
+     * All the declarations as one CSS text string.
+     * @returns {string}
+     */
+    get cssText(): string;
+    /**
+     * Replace every declaration by parsing a CSS text string ("color: red; font-size: 12px !important;").
+     * @param {string} cssText
+     * @returns {undefined}
+     */
+    set cssText(cssText: string);
+}
+export default CSSStyleDeclarationService;

package/dist/services/CSSStyleDeclarationService.js

@@ -0,0 +1,156 @@
+'use strict'
+
+/**
+ * @file Substitute for the DOM CSSStyleDeclaration Class (the object behind Element.style).
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @version 1.0.0
+ */
+require('core-js/modules/esnext.iterator.constructor.js')
+require('core-js/modules/esnext.iterator.for-each.js')
+require('core-js/modules/esnext.iterator.map.js')
+require('core-js/modules/esnext.map.delete-all.js')
+require('core-js/modules/esnext.map.every.js')
+require('core-js/modules/esnext.map.filter.js')
+require('core-js/modules/esnext.map.find.js')
+require('core-js/modules/esnext.map.find-key.js')
+require('core-js/modules/esnext.map.includes.js')
+require('core-js/modules/esnext.map.key-of.js')
+require('core-js/modules/esnext.map.map-keys.js')
+require('core-js/modules/esnext.map.map-values.js')
+require('core-js/modules/esnext.map.merge.js')
+require('core-js/modules/esnext.map.reduce.js')
+require('core-js/modules/esnext.map.some.js')
+require('core-js/modules/esnext.map.update.js')
+Object.defineProperty(exports, '__esModule', {
+  value: true
+})
+exports.CSSStyleDeclarationService = void 0
+/**
+ * Simulate the behaviour of the CSSStyleDeclaration Class when there is no DOM available: an ordered map of CSS
+ * property/value pairs, parsed from and serialized back to a cssText string. Values are stored and returned as
+ * given, with no unit conversion, shorthand expansion or validation - this is a data structure, not a real CSS
+ * engine. Named property access (declaration.backgroundColor, camelCase) is added on top of this by
+ * createStyleDeclaration, which wraps an instance of this class in a Proxy.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @class
+ */
+class CSSStyleDeclarationService {
+  /**
+   * @param {string} [cssText=''] Initial declarations, as CSS text ("color: red; font-size: 12px;")
+   * @constructor
+   */
+  constructor (cssText = '') {
+    this.properties = new Map()
+    this.cssText = cssText
+  }
+
+  /**
+   * How many properties are currently set.
+   * @returns {number}
+   */
+  get length () {
+    return this.properties.size
+  }
+
+  /**
+   * The name of the property at the given index, in the order it was set, or '' when there is none (matches the
+   * DOM's CSSStyleDeclaration, which is array-like).
+   * @param {number} index
+   * @returns {string}
+   */
+  item (index) {
+    return Array.from(this.properties.keys())[index] || ''
+  }
+
+  /**
+   * The value of the given property, or '' when it is not set.
+   * @param {string} property A CSS property name (kebab-case, e.g. "background-color")
+   * @returns {string}
+   */
+  getPropertyValue (property) {
+    const entry = this.properties.get(property)
+    return entry ? entry.value : ''
+  }
+
+  /**
+   * "important" when the property was set with !important, otherwise ''.
+   * @param {string} property A CSS property name (kebab-case)
+   * @returns {string}
+   */
+  getPropertyPriority (property) {
+    const entry = this.properties.get(property)
+    return entry ? entry.priority : ''
+  }
+
+  /**
+   * Set a property's value (and optionally its priority). An empty, null or undefined value removes the property
+   * instead, like the DOM.
+   * @param {string} property A CSS property name (kebab-case)
+   * @param {string} value The value, or '' to remove the property
+   * @param {string} [priority=''] "important" to mark it !important
+   * @returns {undefined}
+   */
+  setProperty (property, value, priority = '') {
+    if (value === '' || value === null || typeof value === 'undefined') {
+      this.removeProperty(property)
+      return
+    }
+    this.properties.set(property, {
+      value: String(value),
+      priority
+    })
+  }
+
+  /**
+   * Remove a property, returning the value it had (or '' when it was not set).
+   * @param {string} property A CSS property name (kebab-case)
+   * @returns {string}
+   */
+  removeProperty (property) {
+    const value = this.getPropertyValue(property)
+    this.properties.delete(property)
+    return value
+  }
+
+  /**
+   * All the declarations as one CSS text string.
+   * @returns {string}
+   */
+  get cssText () {
+    return Array.from(this.properties.entries()).map(([property, {
+      value,
+      priority
+    }]) => `${property}: ${value}${priority ? ` !${priority}` : ''};`).join(' ')
+  }
+
+  /**
+   * Replace every declaration by parsing a CSS text string ("color: red; font-size: 12px !important;").
+   * @param {string} cssText
+   * @returns {undefined}
+   */
+  set cssText (cssText) {
+    this.properties.clear()
+    String(cssText || '').split(';').forEach(declaration => {
+      const colon = declaration.indexOf(':')
+      if (colon < 0) {
+        return
+      }
+      const property = declaration.slice(0, colon).trim()
+      let value = declaration.slice(colon + 1).trim()
+      let priority = ''
+      const important = value.match(/!\s*important\s*$/i)
+      if (important && typeof important.index === 'number') {
+        priority = 'important'
+        value = value.slice(0, important.index).trim()
+      }
+      if (property && value) {
+        this.properties.set(property, {
+          value,
+          priority
+        })
+      }
+    })
+  }
+}
+exports.CSSStyleDeclarationService = CSSStyleDeclarationService
+exports.default = CSSStyleDeclarationService

package/dist/services/CSSStyleDeclarationService.min.js

@@ -0,0 +1 @@
+"use strict";require("core-js/modules/esnext.iterator.constructor.js"),require("core-js/modules/esnext.iterator.for-each.js"),require("core-js/modules/esnext.iterator.map.js"),require("core-js/modules/esnext.map.delete-all.js"),require("core-js/modules/esnext.map.every.js"),require("core-js/modules/esnext.map.filter.js"),require("core-js/modules/esnext.map.find.js"),require("core-js/modules/esnext.map.find-key.js"),require("core-js/modules/esnext.map.includes.js"),require("core-js/modules/esnext.map.key-of.js"),require("core-js/modules/esnext.map.map-keys.js"),require("core-js/modules/esnext.map.map-values.js"),require("core-js/modules/esnext.map.merge.js"),require("core-js/modules/esnext.map.reduce.js"),require("core-js/modules/esnext.map.some.js"),require("core-js/modules/esnext.map.update.js"),Object.defineProperty(exports,"__esModule",{value:!0}),exports.CSSStyleDeclarationService=void 0;class CSSStyleDeclarationService{constructor(e=""){this.properties=new Map,this.cssText=e}get length(){return this.properties.size}item(e){return Array.from(this.properties.keys())[e]||""}getPropertyValue(e){const r=this.properties.get(e);return r?r.value:""}getPropertyPriority(e){const r=this.properties.get(e);return r?r.priority:""}setProperty(e,r,s=""){""!==r&&null!=r?this.properties.set(e,{value:String(r),priority:s}):this.removeProperty(e)}removeProperty(e){const r=this.getPropertyValue(e);return this.properties.delete(e),r}get cssText(){return Array.from(this.properties.entries()).map(([e,{value:r,priority:s}])=>`${e}: ${r}${s?` !${s}`:""};`).join(" ")}set cssText(e){this.properties.clear(),String(e||"").split(";").forEach(e=>{const r=e.indexOf(":");if(r<0)return;const s=e.slice(0,r).trim();let t=e.slice(r+1).trim(),o="";const i=t.match(/!\s*important\s*$/i);i&&"number"==typeof i.index&&(o="important",t=t.slice(0,i.index).trim()),s&&t&&this.properties.set(s,{value:t,priority:o})})}}exports.CSSStyleDeclarationService=CSSStyleDeclarationService,exports.default=CSSStyleDeclarationService;

package/dist/services/DocumentFragmentService.d.ts

@@ -1,21 +1,21 @@
-import { NodeService } from './NodeService';
-import { PseudoDocumentFragment } from '../interfaces/PseudoDocumentFragment';
-import { PseudoElement } from '../interfaces/PseudoElement';
-/**
- * Simulate the behaviour of the DocumentFragment Class when there is no DOM available: a container for nodes which is
- * not part of a tree, when it is inserted its children are moved into the tree instead.
- * @author Joshua Heagle <joshuaheagle@gmail.com>
- * @class
- * @augments NodeService
- */
-export declare class DocumentFragmentService extends NodeService implements PseudoDocumentFragment {
-    get nodeName(): string;
-    get nodeType(): number;
-    /**
-     * The first element, in tree order, whose id matches the given value, or null when there is none (the DOM's
-     * NonElementParentNode mixin, which Document and DocumentFragment both implement).
-     * @param {string} id
-     * @returns {PseudoElement|null}
-     */
-    getElementById(id: string): PseudoElement | null;
-}
+import { NodeService } from './NodeService';
+import { PseudoDocumentFragment } from '../interfaces/PseudoDocumentFragment';
+import { PseudoElement } from '../interfaces/PseudoElement';
+/**
+ * Simulate the behaviour of the DocumentFragment Class when there is no DOM available: a container for nodes which is
+ * not part of a tree, when it is inserted its children are moved into the tree instead.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @class
+ * @augments NodeService
+ */
+export declare class DocumentFragmentService extends NodeService implements PseudoDocumentFragment {
+    get nodeName(): string;
+    get nodeType(): number;
+    /**
+     * The first element, in tree order, whose id matches the given value, or null when there is none (the DOM's
+     * NonElementParentNode mixin, which Document and DocumentFragment both implement).
+     * @param {string} id
+     * @returns {PseudoElement|null}
+     */
+    getElementById(id: string): PseudoElement | null;
+}

package/dist/services/DocumentFragmentService.js

@@ -1,42 +1,42 @@
-'use strict'
-
-const __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule
-    ? mod
-    : {
-        default: mod
-      }
-}
-Object.defineProperty(exports, '__esModule', {
-  value: true
-})
-exports.DocumentFragmentService = void 0
-const NodeService_1 = require('./NodeService')
-const getElementById_1 = __importDefault(require('../functions/getElementById'))
-/**
- * Simulate the behaviour of the DocumentFragment Class when there is no DOM available: a container for nodes which is
- * not part of a tree, when it is inserted its children are moved into the tree instead.
- * @author Joshua Heagle <joshuaheagle@gmail.com>
- * @class
- * @augments NodeService
- */
-class DocumentFragmentService extends NodeService_1.NodeService {
-  get nodeName () {
-    return '#document-fragment'
-  }
-
-  get nodeType () {
-    return NodeService_1.NodeService.DOCUMENT_FRAGMENT_NODE
-  }
-
-  /**
-   * The first element, in tree order, whose id matches the given value, or null when there is none (the DOM's
-   * NonElementParentNode mixin, which Document and DocumentFragment both implement).
-   * @param {string} id
-   * @returns {PseudoElement|null}
-   */
-  getElementById (id) {
-    return (0, getElementById_1.default)(this, id)
-  }
-}
-exports.DocumentFragmentService = DocumentFragmentService
+'use strict'
+
+const __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule
+    ? mod
+    : {
+        default: mod
+      }
+}
+Object.defineProperty(exports, '__esModule', {
+  value: true
+})
+exports.DocumentFragmentService = void 0
+const NodeService_1 = require('./NodeService')
+const getElementById_1 = __importDefault(require('../functions/getElementById'))
+/**
+ * Simulate the behaviour of the DocumentFragment Class when there is no DOM available: a container for nodes which is
+ * not part of a tree, when it is inserted its children are moved into the tree instead.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @class
+ * @augments NodeService
+ */
+class DocumentFragmentService extends NodeService_1.NodeService {
+  get nodeName () {
+    return '#document-fragment'
+  }
+
+  get nodeType () {
+    return NodeService_1.NodeService.DOCUMENT_FRAGMENT_NODE
+  }
+
+  /**
+   * The first element, in tree order, whose id matches the given value, or null when there is none (the DOM's
+   * NonElementParentNode mixin, which Document and DocumentFragment both implement).
+   * @param {string} id
+   * @returns {PseudoElement|null}
+   */
+  getElementById (id) {
+    return (0, getElementById_1.default)(this, id)
+  }
+}
+exports.DocumentFragmentService = DocumentFragmentService

package/dist/services/DocumentService.d.ts

@@ -1,46 +1,46 @@
-import { NodeService, TextService, CommentService } from './NodeService';
-import { PseudoDocument } from '../interfaces/PseudoDocument';
-import { PseudoElement } from '../interfaces/PseudoElement';
-import { DocumentFragmentService } from './DocumentFragmentService';
-/**
- * Simulate the behaviour of the Document Class when there is no DOM available.
- * @author Joshua Heagle <joshuaheagle@gmail.com>
- * @class
- * @augments NodeService
- */
-export declare class DocumentService extends NodeService implements PseudoDocument {
-    get nodeName(): string;
-    get nodeType(): number;
-    get textContent(): string | null;
-    set textContent(text: string | null);
-    /**
-     * The first element, in tree order, whose id matches the given value, or null when there is none.
-     * @param {string} id
-     * @returns {PseudoElement|null}
-     */
-    getElementById(id: string): PseudoElement | null;
-    /**
-     * Make an element of the given type which belongs to this document but is not added anywhere until it is appended.
-     * @param {string} [tagName='div'] The type of element to create
-     * @returns {PseudoElement}
-     */
-    createElement(tagName?: string): PseudoElement;
-    /**
-     * Make a text node which belongs to this document.
-     * @param {string} [data=''] The text
-     * @returns {TextService}
-     */
-    createTextNode(data?: string): TextService;
-    /**
-     * Make a comment which belongs to this document.
-     * @param {string} [data=''] The comment
-     * @returns {CommentService}
-     */
-    createComment(data?: string): CommentService;
-    /**
-     * Make an empty document fragment which belongs to this document, a container for nodes which can be built up and
-     * then inserted in one go.
-     * @returns {DocumentFragmentService}
-     */
-    createDocumentFragment(): DocumentFragmentService;
-}
+import { NodeService, TextService, CommentService } from './NodeService';
+import { PseudoDocument } from '../interfaces/PseudoDocument';
+import { PseudoElement } from '../interfaces/PseudoElement';
+import { DocumentFragmentService } from './DocumentFragmentService';
+/**
+ * Simulate the behaviour of the Document Class when there is no DOM available.
+ * @author Joshua Heagle <joshuaheagle@gmail.com>
+ * @class
+ * @augments NodeService
+ */
+export declare class DocumentService extends NodeService implements PseudoDocument {
+    get nodeName(): string;
+    get nodeType(): number;
+    get textContent(): string | null;
+    set textContent(text: string | null);
+    /**
+     * The first element, in tree order, whose id matches the given value, or null when there is none.
+     * @param {string} id
+     * @returns {PseudoElement|null}
+     */
+    getElementById(id: string): PseudoElement | null;
+    /**
+     * Make an element of the given type which belongs to this document but is not added anywhere until it is appended.
+     * @param {string} [tagName='div'] The type of element to create
+     * @returns {PseudoElement}
+     */
+    createElement(tagName?: string): PseudoElement;
+    /**
+     * Make a text node which belongs to this document.
+     * @param {string} [data=''] The text
+     * @returns {TextService}
+     */
+    createTextNode(data?: string): TextService;
+    /**
+     * Make a comment which belongs to this document.
+     * @param {string} [data=''] The comment
+     * @returns {CommentService}
+     */
+    createComment(data?: string): CommentService;
+    /**
+     * Make an empty document fragment which belongs to this document, a container for nodes which can be built up and
+     * then inserted in one go.
+     * @returns {DocumentFragmentService}
+     */
+    createDocumentFragment(): DocumentFragmentService;
+}