Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

417 lines (308 sloc) 107.031 kb
<!DOCTYPE html> <html> <head> <title>postscribe.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> postscribe.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <pre><code>postscribe.js 1.0
(c) 2012 Krux
postscribe is freely distributable under the MIT license.
For all details and documentation:
http://krux.github.com/postscribe
</code></pre> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">globals</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Debug write tasks.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">DEBUG</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>Turn on to debug how each chunk affected the DOM.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">DEBUG_CHUNK</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h1>Helper Functions</h1> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">slice</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>A function that intentionally does nothing.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">doNothing</span><span class="p">()</span> <span class="p">{}</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Is value a function?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">isFunction</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">&quot;function&quot;</span> <span class="o">==</span> <span class="k">typeof</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Loop over each item in an array-like value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">each</span><span class="p">(</span><span class="nx">arr</span><span class="p">,</span> <span class="nx">fn</span><span class="p">,</span> <span class="nx">_this</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arr</span> <span class="o">&amp;&amp;</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">for</span><span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">fn</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">_this</span><span class="p">,</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">i</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Loop over each key/value pair in a hash.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">eachKey</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="nx">fn</span><span class="p">,</span> <span class="nx">_this</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">key</span><span class="p">;</span>
<span class="k">for</span><span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">fn</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">_this</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Extend hash by rest of arguments</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">orig</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">rest</span> <span class="o">=</span> <span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="nx">each</span><span class="p">(</span><span class="nx">rest</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arg</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">eachKey</span><span class="p">(</span><span class="nx">arg</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">orig</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">orig</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Set default options where some option was not specified.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">defaults</span><span class="p">(</span><span class="nx">options</span><span class="p">,</span> <span class="nx">_defaults</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
<span class="nx">eachKey</span><span class="p">(</span><span class="nx">_defaults</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">val</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">options</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">val</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">options</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Convert value (e.g., a NodeList) to an array.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">toArray</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">each</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Test if token is a script tag.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">isScript</span><span class="p">(</span><span class="nx">tok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="sr">/^script$/i</span><span class="p">).</span><span class="nx">test</span><span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">tagName</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <h1>Class WriteStream</h1> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Stream static html to an element, where "static html" denotes "html without scripts".</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>This class maintains a <em>history of writes devoid of any attributes</em> or "proxy history".
Injecting the proxy history into a temporary div has no side-effects,
other than to create proxy elements for previously written elements.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Given the <code>staticHtml</code> of a new write, a <code>tempDiv</code>'s innerHTML is set to <code>proxy_history + staticHtml</code>.
The <em>structure</em> of <code>tempDiv</code>'s contents, (i.e., the placement of new nodes beside or inside of proxy elements),
reflects the DOM structure that would have resulted if all writes had been squashed into a single write.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>For each descendent <code>node</code> of <code>tempDiv</code> whose parentNode is a <em>proxy</em>, <code>node</code> is appended to the corresponding <em>real</em> element within the DOM.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Proxy elements are mapped to <em>actual</em> elements in the DOM by injecting a data-id attribute into each start tag in <code>staticHtml</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">WriteStream</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>Prefix for data attributes on DOM elements.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">BASEATTR</span> <span class="o">=</span> <span class="s1">&#39;data-ps-&#39;</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>get / set data attributes</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">data</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">name</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">attr</span> <span class="o">=</span> <span class="nx">BASEATTR</span> <span class="o">+</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>Get</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="nx">attr</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>IE 8 returns a number if it's a number</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">val</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="nx">val</span> <span class="o">:</span> <span class="nb">String</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span><span class="p">(</span> <span class="nx">value</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">&amp;&amp;</span> <span class="nx">value</span> <span class="o">!==</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Set</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">el</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="nx">attr</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Remove</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">el</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="nx">attr</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">WriteStream</span><span class="p">(</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>Actual elements by id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">actuals</span> <span class="o">=</span> <span class="p">[</span><span class="nx">root</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Embodies the "structure" of what's been written so far, devoid of attributes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">proxyHistory</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Create a proxy of the root element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">proxyRoot</span> <span class="o">=</span> <span class="nx">root</span><span class="p">.</span><span class="nx">ownerDocument</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">root</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">);</span>
<span class="nx">data</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">proxyRoot</span><span class="p">,</span> <span class="s1">&#39;proxyof&#39;</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">WriteStream</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">buildChunk</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">tokens</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">nextId</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">actuals</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>The raw html of this chunk.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">raw</span> <span class="o">=</span> <span class="p">[],</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>The html to create the nodes in the tokens (with id's injected).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">actual</span> <span class="o">=</span> <span class="p">[],</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Html that can later be used to proxy the nodes in the tokens.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">proxy</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">each</span><span class="p">(</span><span class="nx">tokens</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tok</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">raw</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">text</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">attrs</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Visit a token with attributes (startTag or atomicTag).
Ignore noscript tags. They are atomic, so we don't have to worry about children.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="sr">/^noscript$/i</span><span class="p">).</span><span class="nx">test</span><span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">tagName</span><span class="p">))</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="nx">nextId</span><span class="o">++</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Actual: inject id attribute: replace '>' at end of start tag with id attribute + '>'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">actual</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span>
<span class="nx">tok</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(\/?&gt;)/</span><span class="p">,</span> <span class="s1">&#39; &#39;</span><span class="o">+</span><span class="nx">BASEATTR</span><span class="o">+</span><span class="s1">&#39;id=&#39;</span><span class="o">+</span><span class="nx">id</span><span class="o">+</span><span class="s1">&#39; $1&#39;</span><span class="p">)</span>
<span class="p">);</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Proxy: strip all attributes and inject proxyof attribute</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">proxy</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>ignore atomic tags (e.g., style): they have no "structural" effect</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tok</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;atomicTag&#39;</span> <span class="o">?</span> <span class="s1">&#39;&#39;</span> <span class="o">:</span>
<span class="s1">&#39;&lt;&#39;</span><span class="o">+</span><span class="nx">tok</span><span class="p">.</span><span class="nx">tagName</span><span class="o">+</span><span class="s1">&#39; &#39;</span><span class="o">+</span><span class="nx">BASEATTR</span><span class="o">+</span><span class="s1">&#39;proxyof=&#39;</span><span class="o">+</span><span class="nx">id</span><span class="o">+</span><span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">unary</span> <span class="o">?</span> <span class="s1">&#39;/&gt;&#39;</span> <span class="o">:</span> <span class="s1">&#39;&gt;&#39;</span><span class="p">)</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>Visit any other type of token
Actual: append.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">actual</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">text</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Proxy: append endTags. Ignore everything else.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">proxy</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;endTag&#39;</span> <span class="o">?</span> <span class="nx">tok</span><span class="p">.</span><span class="nx">text</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">tokens</span><span class="o">:</span> <span class="nx">tokens</span><span class="p">,</span>
<span class="nx">raw</span><span class="o">:</span> <span class="nx">raw</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">),</span>
<span class="nx">actual</span><span class="o">:</span> <span class="nx">actual</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">),</span>
<span class="nx">proxy</span><span class="o">:</span> <span class="nx">proxy</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)</span>
<span class="p">};</span>
<span class="p">};</span>
<span class="nx">WriteStream</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">write</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tokens</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">chunk</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">buildChunk</span><span class="p">(</span><span class="nx">tokens</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">chunk</span><span class="p">.</span><span class="nx">actual</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <p>e.g., no tokens, or a noscript that got ignored</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">chunk</span><span class="p">.</span><span class="nx">html</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">proxyHistory</span> <span class="o">+</span> <span class="nx">chunk</span><span class="p">.</span><span class="nx">actual</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">proxyHistory</span> <span class="o">+=</span> <span class="nx">chunk</span><span class="p">.</span><span class="nx">proxy</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">proxyRoot</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">chunk</span><span class="p">.</span><span class="nx">html</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">DEBUG_CHUNK</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">chunk</span><span class="p">.</span><span class="nx">proxyInnerHTML</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">proxyRoot</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">walkNodes</span><span class="p">();</span>
<span class="k">if</span><span class="p">(</span><span class="nx">DEBUG_CHUNK</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">chunk</span><span class="p">.</span><span class="nx">actualInnerHTML</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">actuals</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">;</span> <span class="c1">//root</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">chunk</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">WriteStream</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">walkNodes</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">node</span><span class="p">,</span> <span class="nx">stack</span> <span class="o">=</span> <span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">proxyRoot</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <p>use shift/unshift so that children are walked in document order</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span><span class="p">((</span><span class="nx">node</span> <span class="o">=</span> <span class="nx">stack</span><span class="p">.</span><span class="nx">shift</span><span class="p">())</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">isElement</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="mi">1</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">isProxy</span> <span class="o">=</span> <span class="nx">isElement</span> <span class="o">&amp;&amp;</span> <span class="nx">data</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="s1">&#39;proxyof&#39;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <p>Ignore proxies</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">isProxy</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">isElement</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <p>New actual element: register it and remove the the id attr.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">actuals</span><span class="p">[</span><span class="nx">data</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="s1">&#39;id&#39;</span><span class="p">)]</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
<span class="nx">data</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="s1">&#39;id&#39;</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <p>Is node's parent just a proxy?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">parentIsProxyOf</span> <span class="o">=</span> <span class="nx">node</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="nx">data</span><span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">,</span> <span class="s1">&#39;proxyof&#39;</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">parentIsProxyOf</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <p>Move node under actual parent.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">actuals</span><span class="p">[</span><span class="nx">parentIsProxyOf</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <p>prepend childNodes to stack</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">stack</span><span class="p">.</span><span class="nx">unshift</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">stack</span><span class="p">,</span> <span class="nx">toArray</span><span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">WriteStream</span><span class="p">;</span>
<span class="p">}());</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <h1>Class Worker</h1>
<p>Perform tasks in the context of an element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Worker</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">Worker</span><span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">root</span> <span class="o">=</span> <span class="nx">el</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">stream</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WriteStream</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">root</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">parser</span> <span class="o">=</span> <span class="nx">globals</span><span class="p">.</span><span class="nx">htmlParser</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">autoFix</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>init document and window references</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">doc</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">root</span><span class="p">.</span><span class="nx">ownerDocument</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">win</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">win</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">defaultView</span> <span class="o">||</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">parentWindow</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <p>Creates win.eval in IE. I can't remember where I saw this trick.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span> <span class="nx">win</span><span class="p">.</span><span class="nx">execScript</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">win</span><span class="p">[</span><span class="s1">&#39;eval&#39;</span><span class="p">]</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">win</span><span class="p">.</span><span class="nx">execScript</span><span class="p">(</span><span class="s1">&#39;0&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">Worker</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">exec</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">run</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">task</span><span class="p">.</span><span class="nx">_this</span><span class="p">);</span>
<span class="k">delete</span> <span class="nx">task</span><span class="p">.</span><span class="nx">run</span><span class="p">;</span>
<span class="k">delete</span> <span class="nx">task</span><span class="p">.</span><span class="nx">_this</span><span class="p">;</span>
<span class="nx">done</span><span class="p">();</span>
<span class="p">};</span>
<span class="nx">Worker</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">script_inline</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">win</span><span class="p">[</span><span class="s1">&#39;eval&#39;</span><span class="p">](</span><span class="nx">task</span><span class="p">.</span><span class="nx">expr</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">done</span><span class="p">();</span>
<span class="p">};</span>
<span class="nx">Worker</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">script_remote</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">doc</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">_done</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">s</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">onreadystatechange</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="nx">done</span><span class="p">();</span>
<span class="p">};</span>
<span class="nx">s</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">onreadystatechange</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span> <span class="o">!</span><span class="nx">s</span><span class="p">.</span><span class="nx">readyState</span> <span class="o">||</span> <span class="sr">/^(loaded|complete)$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span> <span class="nx">s</span><span class="p">.</span><span class="nx">readyState</span> <span class="p">)</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">_done</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">;</span>
<span class="nx">s</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">({</span> <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;remote script failed &#39;</span> <span class="o">+</span> <span class="nx">task</span><span class="p">.</span><span class="nx">src</span> <span class="p">});</span>
<span class="nx">_done</span><span class="p">();</span>
<span class="p">};</span>
<span class="nx">s</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">task</span><span class="p">.</span><span class="nx">src</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">root</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">s</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <p>Write task</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Worker</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">write</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="nx">flow</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">task</span><span class="p">.</span><span class="nx">html</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">tok</span><span class="p">,</span> <span class="nx">tokens</span> <span class="o">=</span> <span class="p">[];</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <p>stop if we see a script token</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span><span class="p">((</span><span class="nx">tok</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">readToken</span><span class="p">())</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">isScript</span><span class="p">(</span><span class="nx">tok</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">tokens</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tok</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <p>Write out this chunk of tokens</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">chunk</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">stream</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">tokens</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">DEBUG_CHUNK</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">chunk</span> <span class="o">=</span> <span class="nx">chunk</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span><span class="p">(</span><span class="nx">tok</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onScriptToken</span><span class="p">(</span><span class="nx">tok</span><span class="p">,</span> <span class="nx">flow</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">done</span><span class="p">();</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <p>We encountered a script token while writing.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Worker</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">onScriptToken</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tok</span><span class="p">,</span> <span class="nx">flow</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <p>Stash remainder of parser for during this script.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">remainder</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <p>Subtask: Run this script.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">src</span> <span class="o">=</span> <span class="nx">tok</span><span class="p">.</span><span class="nx">attrs</span><span class="p">.</span><span class="nx">src</span> <span class="o">||</span> <span class="nx">tok</span><span class="p">.</span><span class="nx">attrs</span><span class="p">.</span><span class="nx">SRC</span><span class="p">;</span>
<span class="nx">flow</span><span class="p">.</span><span class="nx">subtask</span><span class="p">(</span> <span class="nx">src</span> <span class="o">?</span></pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#182;</a> </div> <p>Remote script: cannot be inlined.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;script_remote&#39;</span><span class="p">,</span> <span class="nx">src</span><span class="o">:</span> <span class="nx">src</span> <span class="p">}</span> <span class="o">:</span></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#182;</a> </div> <p>Inline script.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;script_inline&#39;</span><span class="p">,</span> <span class="nx">inlinable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">expr</span><span class="o">:</span> <span class="p">(</span><span class="nx">tok</span><span class="p">.</span><span class="nx">content</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#182;</a> </div> <p>remove CDATA and HTML comments</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&lt;!\[CDATA\[([\s\S]*?)\]\]&gt;/g</span><span class="p">,</span> <span class="s2">&quot;$1&quot;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&lt;!--([\s\S]*?)--&gt;/g</span><span class="p">,</span> <span class="s2">&quot;$1&quot;</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">);</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">&#182;</a> </div> <p>Subtask: Write remainder behind script.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="nx">remainder</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">flow</span><span class="p">.</span><span class="nx">subtask</span><span class="p">({</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;write&#39;</span><span class="p">,</span> <span class="nx">html</span><span class="o">:</span> <span class="nx">remainder</span><span class="p">,</span> <span class="nx">inlinable</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">Worker</span><span class="p">;</span>
<span class="p">}());</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">&#182;</a> </div> <h2>Class Flow</h2>
<p>Controls the flow of a tree of tasks with subtasks
Subtasks of a task are those tasks that are added while that task is the active task.
1. task <em>A</em> and all its "subtasks" are done before any tasks following <em>A</em> (in tree order)
2. A task is inlined if it is inlinable and there are no deferred tasks (because of point #1). Else it is defered.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-58"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58">&#182;</a> </div> <p>Special task properties:</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">&#182;</a> </div> <ul>
<li>type</li>
<li>start</li>
<li>complete</li>
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Flow</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-60"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60">&#182;</a> </div> <p>param worker<a href="task, done">task.type</a>: an object with async callbacks to execute each task type.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">Flow</span><span class="p">(</span><span class="nx">worker</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-61"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-61">&#182;</a> </div> <p>The worker performs the tasks.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">worker</span> <span class="o">=</span> <span class="nx">worker</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">taskAdd</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">taskAdd</span> <span class="o">||</span> <span class="nx">doNothing</span><span class="p">;</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">taskStart</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">taskStart</span> <span class="o">||</span> <span class="nx">doNothing</span><span class="p">;</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">taskDone</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">taskDone</span> <span class="o">||</span> <span class="nx">doNothing</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-62"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-62">&#182;</a> </div> <p>Flow is initialized stopped by default.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">stopRequested</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-63"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-63">&#182;</a> </div> <p>The active (currently executing) task.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">active</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-64"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-64">&#182;</a> </div> <p>The list of deferred tasks.
Only done when idle.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">deferred</span> <span class="o">=</span> <span class="p">[];</span></pre></div> </td> </tr> <tr id="section-65"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-65">&#182;</a> </div> <p>The active task's deferred decendant subtasks.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_deferred</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">deferred</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">&#182;</a> </div> <p>Add a "root" task.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Flow</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">task</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">taskAdd</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">deferred</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">task</span><span class="p">,</span> <span class="nx">done</span> <span class="o">||</span> <span class="nx">doNothing</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">nextIfIdle</span><span class="p">();</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-67"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-67">&#182;</a> </div> <p>Add a subtask of active task.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Flow</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">subtask</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">taskAdd</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">child</span><span class="p">.</span><span class="nx">inlinable</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_deferred</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">&#182;</a> </div> <p>Inline this child.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">startTask</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">&#182;</a> </div> <p>Defer this child.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_deferred</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">&#182;</a> </div> <p>Start a task.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Flow</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">startTask</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_this</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">stopRequested</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_deferred</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">&#182;</a> </div> <p>Functions are light-weight tasks.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">task</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">nextIfIdle</span><span class="p">();</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-72"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-72">&#182;</a> </div> <p>Stash the active task and queue</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">stash</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">active</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">,</span> <span class="nx">_deferred</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_deferred</span> <span class="p">};</span></pre></div> </td> </tr> <tr id="section-73"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-73">&#182;</a> </div> <p>Collect deferred subtasks for this task.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="p">{</span> <span class="nx">active</span><span class="o">:</span> <span class="nx">task</span><span class="p">,</span> <span class="nx">_deferred</span><span class="o">:</span> <span class="p">[]</span> <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">taskStart</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-74"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-74">&#182;</a> </div> <p>Worker's method is passed the task, done callback, and this flow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">worker</span><span class="p">[</span><span class="nx">task</span><span class="p">.</span><span class="nx">type</span><span class="p">](</span><span class="nx">task</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">_this</span><span class="p">.</span><span class="nx">doneTask</span><span class="p">(</span><span class="nx">stash</span><span class="p">);</span>
<span class="p">},</span> <span class="k">this</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-75"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-75">&#182;</a> </div> <p>Called when active task is done.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Flow</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">doneTask</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">stash</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">taskDone</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-76"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-76">&#182;</a> </div> <p>Prepend deferred to stashed deferred in-place.
When idle, this.deferred will hold all _deferred in the right order.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">[].</span><span class="nx">unshift</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">stash</span><span class="p">.</span><span class="nx">_deferred</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_deferred</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">&#182;</a> </div> <p>Restore stashed state.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">stash</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-78"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-78">&#182;</a> </div> <p>Are we are waiting to stop?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">onStop</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">active</span> <span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">onStop</span><span class="p">();</span> <span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">onStop</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">nextIfIdle</span><span class="p">();</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-79"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-79">&#182;</a> </div> <p>Run the next deferred task if no other task is running.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Flow</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">nextIfIdle</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-80"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-80">&#182;</a> </div> <p>!this.active &lt;==> (this._deferred === this.deferred)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">task</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">active</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">deferred</span><span class="p">.</span><span class="nx">shift</span><span class="p">();</span>
<span class="k">if</span><span class="p">(</span><span class="nx">task</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">startTask</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-81"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-81">&#182;</a> </div> <p>Stop this flow</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Flow</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">stop</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">onStop</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-82"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-82">&#182;</a> </div> <p>Callback when flow has actually stopped.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onStop</span> <span class="o">=</span> <span class="nx">onStop</span> <span class="o">||</span> <span class="nx">doNothing</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">stopRequested</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-83"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-83">&#182;</a> </div> <p>We are ready to stop now.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onStop</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-84"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-84">&#182;</a> </div> <p>We will stop when next we are idle.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">onStop</span> <span class="o">=</span> <span class="nx">onStop</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-85"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-85">&#182;</a> </div> <p>Start this flow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Flow</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">start</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">stopRequested</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">onStop</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">nextIfIdle</span><span class="p">();</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">Flow</span><span class="p">;</span>
<span class="p">}());</span>
<span class="kd">var</span> <span class="nx">Tracer</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">Tracer</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tasks</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">roots</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">active</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">Tracer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">taskAdd</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tasks</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tasks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="s1">&#39;waiting&#39;</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">cause</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
<span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">.</span><span class="nx">effects</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">.</span><span class="nx">effects</span> <span class="o">||</span> <span class="p">[]).</span><span class="nx">push</span><span class="p">(</span><span class="nx">task</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">task</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">Tracer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">taskStart</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">parent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">active</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">parent</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">parent</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
<span class="p">(</span><span class="nx">parent</span><span class="p">.</span><span class="nx">childIds</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">childIds</span> <span class="o">||</span> <span class="p">[]).</span><span class="nx">push</span><span class="p">(</span><span class="nx">task</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">(</span><span class="nx">parent</span><span class="p">.</span><span class="nx">children</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">children</span> <span class="o">||</span> <span class="p">[]).</span><span class="nx">push</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">roots</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="s1">&#39;started&#39;</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">active</span> <span class="o">=</span> <span class="nx">task</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">Tracer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">taskDone</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">task</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">task</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="s1">&#39;done&#39;</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">active</span> <span class="o">=</span> <span class="nx">task</span><span class="p">.</span><span class="nx">parent</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">?</span> <span class="k">this</span><span class="p">.</span><span class="nx">tasks</span><span class="p">[</span><span class="nx">task</span><span class="p">.</span><span class="nx">parent</span><span class="p">]</span> <span class="o">:</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">Tracer</span><span class="p">;</span>
<span class="p">}());</span></pre></div> </td> </tr> <tr id="section-86"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-86">&#182;</a> </div> <p>Public-facing interface and queuing</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">postscribe</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">start</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">rootTask</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-87"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-87">&#182;</a> </div> <p>Create the flow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">worker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Worker</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">flow</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Flow</span><span class="p">(</span><span class="nx">worker</span><span class="p">,</span> <span class="nx">DEBUG</span> <span class="o">&amp;&amp;</span> <span class="k">new</span> <span class="nx">Tracer</span><span class="p">());</span>
<span class="nx">flow</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="nx">postscribe</span><span class="p">.</span><span class="nx">writers</span><span class="p">[</span><span class="nx">flow</span><span class="p">.</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">flow</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-88"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-88">&#182;</a> </div> <p>Override document.write.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">ownerDocument</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">stash</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">write</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">write</span><span class="p">,</span> <span class="nx">writeln</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">writeln</span> <span class="p">};</span>
<span class="kd">function</span> <span class="nx">write</span><span class="p">(</span><span class="nx">str</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">flow</span><span class="p">.</span><span class="nx">subtask</span><span class="p">({</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;write&#39;</span><span class="p">,</span> <span class="nx">html</span><span class="o">:</span> <span class="nx">str</span><span class="p">,</span> <span class="nx">inlinable</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span>
<span class="k">if</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">afterWrite</span><span class="p">)</span> <span class="p">{</span> <span class="nx">options</span><span class="p">.</span><span class="nx">afterWrite</span><span class="p">(</span><span class="nx">str</span><span class="p">);</span> <span class="p">}</span>
<span class="p">}</span>
<span class="nx">extend</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="p">{</span> <span class="nx">write</span><span class="o">:</span> <span class="nx">write</span><span class="p">,</span> <span class="nx">writeln</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">str</span><span class="p">)</span> <span class="p">{</span> <span class="nx">write</span><span class="p">(</span><span class="nx">str</span> <span class="o">+</span> <span class="s1">&#39;\n&#39;</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span></pre></div> </td> </tr> <tr id="section-89"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-89">&#182;</a> </div> <p>Start the flow</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">flow</span><span class="p">.</span><span class="nx">task</span><span class="p">(</span><span class="nx">rootTask</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-90"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-90">&#182;</a> </div> <p>restore document.write</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">extend</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">stash</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span> <span class="nx">options</span><span class="p">.</span><span class="nx">done</span><span class="p">();</span> <span class="p">}</span>
<span class="nx">done</span><span class="p">();</span>
<span class="p">}).</span><span class="nx">start</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">queue</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Flow</span><span class="p">({</span>
<span class="nx">rootTask</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">done</span><span class="p">);</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">flow</span> <span class="o">=</span> <span class="nx">start</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}).</span><span class="nx">start</span><span class="p">();</span>
<span class="kd">function</span> <span class="nx">postscribe</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">html</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">rootTask</span> <span class="o">=</span> <span class="nx">isFunction</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span> <span class="o">?</span>
<span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;exec&#39;</span><span class="p">,</span> <span class="nx">run</span><span class="o">:</span> <span class="nx">html</span> <span class="p">}</span> <span class="o">:</span>
<span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;write&#39;</span><span class="p">,</span> <span class="nx">html</span><span class="o">:</span> <span class="nx">html</span> <span class="p">};</span>
<span class="kd">var</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">([</span><span class="nx">el</span><span class="p">,</span> <span class="nx">rootTask</span><span class="p">,</span> <span class="nx">options</span><span class="p">],</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;rootTask&#39;</span> <span class="p">});</span>
<span class="nx">queue</span><span class="p">.</span><span class="nx">task</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">postscribe</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">stop</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">flow</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">args</span><span class="p">.</span><span class="nx">flow</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-91"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-91">&#182;</a> </div> <p>Set a root task that does nothing.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">args</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;exec&quot;</span><span class="p">,</span> <span class="nx">run</span><span class="o">:</span> <span class="nx">doNothing</span> <span class="p">};</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">postscribe</span><span class="p">,</span> <span class="p">{</span> <span class="nx">writers</span><span class="o">:</span> <span class="p">{},</span> <span class="nx">queue</span><span class="o">:</span> <span class="nx">queue</span> <span class="p">});</span>
<span class="p">}());</span></pre></div> </td> </tr> <tr id="section-92"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-92">&#182;</a> </div> <p>export postscribe</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">globals</span><span class="p">.</span><span class="nx">postscribe</span> <span class="o">=</span> <span class="nx">postscribe</span><span class="p">;</span>
<span class="p">}());</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
Jump to Line
Something went wrong with that request. Please try again.