Commit b6352fa

comes in handy for advanced use cases such as</p>

<p>What&#39;s nice about these methods is that all renders go through the same

scheduling pipeline and VTrees are shared across all other renders.</p>

</strong></td>

<pre><code class="language-js">import { innerHTML } from &#39;diffhtml&#39;;

innerHTML(document.body, `

what has changed. Additionally updates the attributes of the parent. If the

element you&#39;re modifying has a parent, you may also change the element type,

but this isn&#39;t really recommended.</p>

<td><ul><li><strong>tasks:</strong> An array of tasks to run. Can swap these out to modify the render flow.</li><li><strong>parser:</strong> Settings which influence the HTML parser.</li></ul></td>

<p><a name="to-string"></a></p>

<h2 id="a-hrefto-stringtostringa-input-options"><a href="#to-string">toString</a> <strong><code>(input, options)</code></strong></h2>

<p>Takes any valid input and returns a serialized string of XML/HTML markup.</p>

<td><ul><li><strong>tasks:</strong> An array of tasks to run. Can swap these out to modify the render flow.</li><li><strong>parser:</strong> Settings which influence the HTML parser.</li></ul></td>

<p><a name="html"></a></p>

<h2 id="a-hrefhtmlhtmla-markup"><a href="#html">html</a> <strong><code>(markup)</code></strong></h2>

to &quot;interpolate&quot; or mix dynamic values with the HTML string content. This is

useful when working with Web Components, DOM events,</p>

<p>When you pass a single element and provide newlines and whitespace before and

<p>A simple example of its usage along with interpolation.</p>

<pre><code class="language-js">const vTree = html`

&lt;body&gt;

<a href="#examples" title="null">Examples</a>

section

below.</p>

<p><a name="use"></a></p>

<h2 id="a-hrefuseusea-middlewarefunction-or-middlewareobject"><a href="#use">use</a> <strong><code>(middlewareFunction or middlewareObject)</code></strong></h2>

<a href="/middleware.html" title="null"><strong>Refer to the Middleware documentation for documentation on writing your own

and find existing plugins.</strong></a>

</p>

<td>Use this when you don&#39;t care about the transaction start/stop, and want a cleaner way to monitor the VTree lifecycle. <ul><li>displayName</li><li>createNodeHook</li><li>createTreeHook</li><li>syncTreeHook</li><li>releaseHook</li><li>subscribe</li><li>unsubscribe</li></ul></td>

<h4 id="logging-the-start-of-a-render-transaction">Logging the start of a render transaction</h4>

<pre><code class="language-js">function someTask(transaction) {

console.log(&#39;Start of render transaction:&#39;, transaction);

<a href="middleware.html#inline-transitions" title="null">diffhtml-inline-transitions

plugin</a>

.</p>

<li>Remove the second element</li>

<p>The two required inputs are a reference element and new element to compare.

Although &quot;element&quot; is used, the actual input can be of various input types

all representing an element (or many elements).</p>

method will remove all transition callbacks. When invoked with the name

argument it will remove all transition state callbacks matching the name, and

so on for the callback.</p>

<td><em>Optional</em> Filter events to remove by the callback reference</td>

<p><a name="create-tree"></a></p>

<h2 id="a-hrefcreate-treecreatetreea-nodename-attributes-childnodes"><a href="#create-tree">createTree</a> <strong><code>(nodeName, attributes, ...childNodes)</code></strong></h2>

<p>Creates a Virtual Tree (VTree) which can be interpolated and rendered. This has

a similar purpose to hyperscript&#39;s <code>h()</code> and React&#39;s <code>createElement</code>.</p>

<td>An array of child nodes, or a single element merged with any additional arguments</td>

<p><a name="release"></a></p>

<h2 id="a-hrefreleasereleasea-mount"><a href="#release">release</a> <strong><code>(mount)</code></strong></h2>

<p>Use this method if you need to clean up memory allocations and anything else

internal to diffHTML associated with your element. This is very useful for unit

testing and general cleanup when you&#39;re done with an element. Applications will

probably not use this if the app lives as long as the tab.</p>

<td>Release memory and all internal references to the DOM node.</td>

<p><a name="internals"></a></p>

<h2 id="a-hrefinternalsinternalsa"><a href="#internals">Internals</a></h2>

</a>

<footer>

<span>Created by @tbranyen</span>

</a>

<span style="margin: 0 15px;"> | </span>

<span>Logo by @s0phinie</span>

</a>

<span style="margin-left: 15px;"> | </span>

</footer>

</layer>