mutation-summary
Version:
Makes observing the DOM fast and easy
403 lines (392 loc) • 24.8 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>mutation-summary</title>
<meta name="description" content="Documentation for mutation-summary">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
<script async src="assets/js/search.js" id="search-script"></script>
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">mutation-summary</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<h1>mutation-summary</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<a href="#introduction" id="introduction" style="color: inherit; text-decoration: none;">
<h1>Introduction</h1>
</a>
<p>This is the API documentation for the <a href="https://github.com/mmacfadden/mutation-summary/">Mutation Summary</a> library. Mutation Summary is a JavaScript library that makes observing changes to the DOM fast, easy and safe. It is built on top of (and requires) a new API called <a href="http://dom.spec.whatwg.org/#mutation-observers">DOM Mutation Observers</a>.</p>
<a href="#basic-usage" id="basic-usage" style="color: inherit; text-decoration: none;">
<h1>Basic Usage</h1>
</a>
<p>The main class is the <a href="classes/mutationsummary.html">MutationSummary</a> class. To use the library construct a new <a href="classes/mutationsummary.html">MutationSummary</a> passing it options telling it where and what to listen to, and how to notify you of changes.</p>
<pre><code class="language-typescript"><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">ms</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">MutationSummary</span><span style="color: #000000">({</span>
<span style="color: #000000"> </span><span style="color: #795E26">callback</span><span style="color: #000000">(</span><span style="color: #001080">summaries</span><span style="color: #000000">: </span><span style="color: #267F99">Summary</span><span style="color: #000000">[]) {</span>
<span style="color: #000000"> </span><span style="color: #001080">summaries</span><span style="color: #000000">.</span><span style="color: #795E26">forEach</span><span style="color: #000000">((</span><span style="color: #001080">summary</span><span style="color: #000000">: </span><span style="color: #267F99">Summary</span><span style="color: #000000">) </span><span style="color: #0000FF">=></span><span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">summary</span><span style="color: #000000">));</span>
<span style="color: #000000"> },</span>
<span style="color: #000000"> </span><span style="color: #001080">queries:</span><span style="color: #000000"> [</span>
<span style="color: #000000"> { </span><span style="color: #001080">all:</span><span style="color: #000000"> </span><span style="color: #0000FF">true</span><span style="color: #000000"> }</span>
<span style="color: #000000"> ]</span>
<span style="color: #000000">});</span>
</code></pre>
<a href="#queries" id="queries" style="color: inherit; text-decoration: none;">
<h1>Queries</h1>
</a>
<p>Queries determine which elements and changes are observed and reported on. There are four types of Query objects:</p>
<ul>
<li><strong><a href="#attribute-query">attribute</a></strong></li>
<li><strong><a href="#element-query">element</a></strong></li>
<li><strong><a href="#character-data-query">characterData</a></strong></li>
<li><strong><a href="#all-query">all</a></strong></li>
</ul>
<a href="#attribute-query" id="attribute-query" style="color: inherit; text-decoration: none;">
<h2>Attribute Query</h2>
</a>
<p>Summarize changes to the presence and value of the given attribute throughout the observed subtree.</p>
<a href="#query-format" id="query-format" style="color: inherit; text-decoration: none;">
<h3>Query Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * The name of a single attribute to observe throughout the subtree.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> attribute: </span><span style="color: #001080">string</span><span style="color: #000000"> </span>
<span style="color: #000000">}</span>
</code></pre>
<a href="#summary-format" id="summary-format" style="color: inherit; text-decoration: none;">
<h3>Summary Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All elements presently in the subtree and having the given attribute,</span>
<span style="color: #008000"> * but that were not in the subtree, lacked the given attribute or both.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> added: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All elements previously in the subtree and having the given attribute,</span>
<span style="color: #008000"> * but that now are not in the subtree, lack the given attribute or both.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> removed: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All elements previously and presently in the subtree and previously and</span>
<span style="color: #008000"> * presently having the given attribute, for whom the value of the given</span>
<span style="color: #008000"> * attribute change.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> valueChanged: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000">}</span>
</code></pre>
<a href="#element-query" id="element-query" style="color: inherit; text-decoration: none;">
<h2>Element Query</h2>
</a>
<p>Summarize the changes to the presence and location of the elements matching the given selector string, and (optionally) changes to the given set of attribute <em>of those elements</em> throughout the observed subtree.</p>
<a href="#query-format-1" id="query-format-1" style="color: inherit; text-decoration: none;">
<h3>Query Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * A “selector” string which describes what elements are to be observed.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> element: </span><span style="color: #001080">string</span>
<span style="color: #000000"> </span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * A space separated list of attributes to observe for value changes</span>
<span style="color: #008000"> * on the specified element.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> </span><span style="color: #001080">elementAttributes</span><span style="color: #000000">?: </span><span style="color: #001080">string</span>
<span style="color: #000000">}</span>
</code></pre>
<a href="#summary-format-1" id="summary-format-1" style="color: inherit; text-decoration: none;">
<h3>Summary Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All elements are presently in the subtree and match at least one</span>
<span style="color: #008000"> * pattern, but previously were not in the subtree, now match zero</span>
<span style="color: #008000"> * patterns or both.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> added: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All elements were previously in the subtree and matched at least one</span>
<span style="color: #008000"> * pattern, but which now are not in the subtree, new match zero patterns</span>
<span style="color: #008000"> * or both.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> removed: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All elements previously & presently in the subtree and previously &</span>
<span style="color: #008000"> * presently matching at least one pattern, which were moved to be </span>
<span style="color: #008000"> * children of a new parent (their present parentNode is distinct from</span>
<span style="color: #008000"> * the previous parentNode). </span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> reparented: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * An object reporting attribute value changes. The object contains one key</span>
<span style="color: #008000"> * for each attribute name contained in `elementAttributes`. The value of</span>
<span style="color: #008000"> * each key is an array of elements previously & presently in the subtree</span>
<span style="color: #008000"> * and previously & presently matching at least one pattern for whom the</span>
<span style="color: #008000"> * corresponding attribute changed value. Only present if elementAttributes</span>
<span style="color: #008000"> * was specified</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> attributeChanged: {</span>
<span style="color: #000000"> attributeName1: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> attributeName2: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> ...</span>
<span style="color: #000000"> }</span>
<span style="color: #000000">}</span>
</code></pre>
<a href="#character-data-query" id="character-data-query" style="color: inherit; text-decoration: none;">
<h2>Character Data Query</h2>
</a>
<p>Summarize the effective changes to the presence and value of characterData nodes in the observed subtree.</p>
<a href="#query-format-2" id="query-format-2" style="color: inherit; text-decoration: none;">
<h3>Query Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * Indicates to observe to characterData nodes.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> characterData: </span><span style="color: #0000FF">true</span><span style="color: #000000"> </span>
<span style="color: #000000">}</span>
</code></pre>
<a href="#summary-format-2" id="summary-format-2" style="color: inherit; text-decoration: none;">
<h3>Summary Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All character data nodes presently in the subtree, but previously </span>
<span style="color: #008000"> * were not in the subtree.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> added: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All character data nodes previously in the subtree, which now are</span>
<span style="color: #008000"> * not in the subtree.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> removed: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All character data nodes previously & presently in the subtree,</span>
<span style="color: #008000"> * which were moved to be children of a new parent (their present </span>
<span style="color: #008000"> * parentNode is distinct from the previous parentNode).</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> reparented: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All character data nodes previously & presently whose value changed.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> valueChanged: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000">}</span>
</code></pre>
<a href="#all-query" id="all-query" style="color: inherit; text-decoration: none;">
<h2>All Query</h2>
</a>
<p>Observes all changes to a given subtree.</p>
<a href="#query-format-3" id="query-format-3" style="color: inherit; text-decoration: none;">
<h3>Query Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * Indicates that all modifications to the subtree should be</span>
<span style="color: #008000"> * observed.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> all: </span><span style="color: #0000FF">true</span><span style="color: #000000"> </span>
<span style="color: #000000">}</span>
</code></pre>
<a href="#summary-format-3" id="summary-format-3" style="color: inherit; text-decoration: none;">
<h3>Summary Format</h3>
</a>
<pre><code class="language-typescript"><span style="color: #000000">{</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All nodes presently in the subtree, but previously were not in the</span>
<span style="color: #008000"> * subtree.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> added: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All nodes previously in the subtree, which now are not in the subtree.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> removed: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All nodes previously & presently in the subtree, which were moved to be</span>
<span style="color: #008000"> * children of a new parent (their present parentNode is distinct from the</span>
<span style="color: #008000"> * previous parentNode).</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> reparented: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All nodes previously & presently in the subtree and previously &</span>
<span style="color: #008000"> * presently are children of the same parent, but have moved to a new</span>
<span style="color: #008000"> * location in their parentNode’s childList.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> reorderd: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * An object reporting attribute value changes. The object contains one key</span>
<span style="color: #008000"> * for each attribute name contained in `elementAttributes`. The value of</span>
<span style="color: #008000"> * each key is an array of elements previously & presently in the subtree</span>
<span style="color: #008000"> * and previously & presently matching at least one pattern for whom the</span>
<span style="color: #008000"> * corresponding attribute changed value. Only present if </span>
<span style="color: #008000"> * elementAttributes specified</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> attributeChanged: {</span>
<span style="color: #000000"> attributeName1: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> attributeName2: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000"> ...</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> </span><span style="color: #008000">/**</span>
<span style="color: #008000"> * All characterData nodes previously & presently whose value changed.</span>
<span style="color: #008000"> */</span>
<span style="color: #000000"> characterDataChanged: </span><span style="color: #001080">Node</span><span style="color: #000000">[]</span>
<span style="color: #000000">}</span>
</code></pre>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class=" ">
<a href="modules.html">Exports</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
<li class=" tsd-kind-enum">
<a href="enums/movement.html" class="tsd-kind-icon">Movement</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/childlistchange.html" class="tsd-kind-icon">Child<wbr>List<wbr>Change</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/mutationprojection.html" class="tsd-kind-icon">Mutation<wbr>Projection</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/mutationsummary.html" class="tsd-kind-icon">Mutation<wbr>Summary</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/nodechange.html" class="tsd-kind-icon">Node<wbr>Change</a>
</li>
<li class=" tsd-kind-class tsd-has-type-parameter">
<a href="classes/nodemap.html" class="tsd-kind-icon">Node<wbr>Map</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/qualifier.html" class="tsd-kind-icon">Qualifier</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/selector.html" class="tsd-kind-icon">Selector</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/summary.html" class="tsd-kind-icon">Summary</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/treechanges.html" class="tsd-kind-icon">Tree<wbr>Changes</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/treemirror.html" class="tsd-kind-icon">Tree<wbr>Mirror</a>
</li>
<li class=" tsd-kind-class">
<a href="classes/treemirrorclient.html" class="tsd-kind-icon">Tree<wbr>Mirror<wbr>Client</a>
</li>
<li class=" tsd-kind-interface">
<a href="interfaces/iattributedata.html" class="tsd-kind-icon">IAttribute<wbr>Data</a>
</li>
<li class=" tsd-kind-interface">
<a href="interfaces/imutationsummaryoptions.html" class="tsd-kind-icon">IMutation<wbr>Summary<wbr>Options</a>
</li>
<li class=" tsd-kind-interface">
<a href="interfaces/inodedata.html" class="tsd-kind-icon">INode<wbr>Data</a>
</li>
<li class=" tsd-kind-interface tsd-has-type-parameter">
<a href="interfaces/inumbermap.html" class="tsd-kind-icon">INumber<wbr>Map</a>
</li>
<li class=" tsd-kind-interface">
<a href="interfaces/ipositiondata.html" class="tsd-kind-icon">IPosition<wbr>Data</a>
</li>
<li class=" tsd-kind-interface">
<a href="interfaces/iquery.html" class="tsd-kind-icon">IQuery</a>
</li>
<li class=" tsd-kind-interface">
<a href="interfaces/iqueryvalidator.html" class="tsd-kind-icon">IQuery<wbr>Validator</a>
</li>
<li class=" tsd-kind-interface tsd-has-type-parameter">
<a href="interfaces/istringmap.html" class="tsd-kind-icon">IString<wbr>Map</a>
</li>
<li class=" tsd-kind-interface">
<a href="interfaces/itextdata.html" class="tsd-kind-icon">IText<wbr>Data</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
</body>
</html>