Skip to content
Browse files

Added missing elements from the HTML 5 spec (both valid and obsolete)…

…. Closes #66 (thanks @aeosynth).
  • Loading branch information...
1 parent 74b3cf1 commit 059ec7d628c11a105ea7c2bbad3473933631f82b @mauricemach committed Aug 20, 2011
Showing with 84 additions and 49 deletions.
  1. +1 −0 CHANGELOG.md
  2. +44 −34 docs/coffeekup.html
  3. +39 −15 src/coffeekup.coffee
View
1 CHANGELOG.md
@@ -1,6 +1,7 @@
**v0.3.0beta2** (xxxx-xx-xx):
- Fixed #64 (`hardcode` option masked in express adapter). [smathy]
+ - Added missing elements from the HTML 5 spec (both valid and obsolete). Closes #66 (thanks @aeosynth).
**v0.3.0beta** (2011-07-27):
View
78 docs/coffeekup.html
@@ -42,23 +42,33 @@
<span class="s2"> for (var i = 0, l = this.length; i &lt; l; i++) {</span>
<span class="s2"> if (this[i] === item) return i;</span>
<span class="s2"> } return -1; };</span>
-<span class="s2">&quot;&quot;&quot;</span><span class="p">.</span><span class="nx">replace</span> <span class="sr">/\n/g</span><span class="p">,</span> <span class="s1">&#39;&#39;</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>All possible HTML tags, from all versions (hopefully). But only those
-referenced in the template will be included in the compiled function.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">coffeekup.tags = </span><span class="s1">&#39;a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont</span>
-<span class="s1">|bdo|big|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup</span>
-<span class="s1">|command|datalist|dd|del|details|dfn|dir|div|dl|dt|em|embed|fieldset|figcaption</span>
-<span class="s1">|figure|font|footer|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr</span>
-<span class="s1">|html|i|iframe|img|input|ins|keygen|kbd|label|legend|li|link|map|mark|menu|meta</span>
-<span class="s1">|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre</span>
-<span class="s1">|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strike</span>
-<span class="s1">|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title</span>
-<span class="s1">|tr|tt|u|ul|video|xmp&#39;</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\n/g</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">).</span><span class="nx">split</span> <span class="s1">&#39;|&#39;</span>
-
-<span class="nv">coffeekup.self_closing = </span><span class="p">[</span><span class="s1">&#39;area&#39;</span><span class="p">,</span> <span class="s1">&#39;base&#39;</span><span class="p">,</span> <span class="s1">&#39;basefont&#39;</span><span class="p">,</span> <span class="s1">&#39;br&#39;</span><span class="p">,</span> <span class="s1">&#39;col&#39;</span><span class="p">,</span> <span class="s1">&#39;frame&#39;</span><span class="p">,</span> <span class="s1">&#39;hr&#39;</span><span class="p">,</span>
- <span class="s1">&#39;img&#39;</span><span class="p">,</span> <span class="s1">&#39;input&#39;</span><span class="p">,</span> <span class="s1">&#39;link&#39;</span><span class="p">,</span> <span class="s1">&#39;meta&#39;</span><span class="p">,</span> <span class="s1">&#39;param&#39;</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>This is the basic material from which compiled templates will be formed.
+<span class="s2">&quot;&quot;&quot;</span><span class="p">.</span><span class="nx">replace</span> <span class="sr">/\n/g</span><span class="p">,</span> <span class="s1">&#39;&#39;</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>Private HTML element reference.
+Please mind the gap (1 space at the beginning of each subsequent line).</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">elements =</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>Valid HTML 5 elements requiring a closing tag.
+Note: the <code>var</code> element is out for obvious reasons, please use <code>tag 'var'</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">regular: </span><span class="s1">&#39;a abbr address article aside audio b bdi bdo blockquote body button</span>
+<span class="s1"> canvas caption cite code colgroup datalist dd del details dfn div dl dt em</span>
+<span class="s1"> fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup</span>
+<span class="s1"> html i iframe ins kbd label legend li map mark menu meter nav noscript object</span>
+<span class="s1"> ol optgroup option output p pre progress q rp rt ruby s samp script section</span>
+<span class="s1"> select small span strong style sub summary sup table tbody td textarea tfoot</span>
+<span class="s1"> th thead time title tr u ul video&#39;</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>Valid self-closing HTML 5 elements.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">void: </span><span class="s1">&#39;area base br col command embed hr img input keygen link meta param</span>
+<span class="s1"> source track wbr&#39;</span>
+
+ <span class="nv">obsolete: </span><span class="s1">&#39;applet acronym bgsound dir frameset noframes isindex listing</span>
+<span class="s1"> nextid noembed plaintext rb strike xmp big blink center font marquee multicol</span>
+<span class="s1"> nobr spacer tt&#39;</span>
+
+ <span class="nv">obsolete_void: </span><span class="s1">&#39;basefont frame&#39;</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>Create a unique list of element names merging the desired groups.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">merge_elements = </span><span class="nf">(args...) -&gt;</span>
+ <span class="nv">result = </span><span class="p">[]</span>
+ <span class="k">for</span> <span class="nx">a</span> <span class="k">in</span> <span class="nx">args</span>
+ <span class="k">for</span> <span class="nx">element</span> <span class="k">in</span> <span class="nx">elements</span><span class="p">[</span><span class="nx">a</span><span class="p">].</span><span class="nx">split</span> <span class="s1">&#39; &#39;</span>
+ <span class="nx">result</span><span class="p">.</span><span class="nx">push</span> <span class="nx">element</span> <span class="nx">unless</span> <span class="nx">result</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span>
+ <span class="nx">result</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>Public/customizable list of possible elements.
+For each name in this list that is also present in the input template code,
+a function with the same name will be added to the compiled template.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">coffeekup.tags = </span><span class="nx">merge_elements</span> <span class="s1">&#39;regular&#39;</span><span class="p">,</span> <span class="s1">&#39;obsolete&#39;</span><span class="p">,</span> <span class="s1">&#39;void&#39;</span><span class="p">,</span> <span class="s1">&#39;obsolete_void&#39;</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>Public/customizable list of elements that should be rendered self-closed.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">coffeekup.self_closing = </span><span class="nx">merge_elements</span> <span class="s1">&#39;void&#39;</span><span class="p">,</span> <span class="s1">&#39;obsolete_void&#39;</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>This is the basic material from which compiled templates will be formed.
It will be manipulated in its string form at the <code>coffeekup.compile</code> function
-to generate the final template function. </p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">skeleton = </span><span class="nf">(data = {}) -&gt;</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>Whether to generate formatted HTML with indentation and line breaks, or
-just the natural "faux-minified" output.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">data</span><span class="p">.</span><span class="nx">format</span> <span class="o">?=</span> <span class="kc">off</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>Whether to autoescape all content or let you handle it on a case by case
-basis with the <code>h</code> function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">data</span><span class="p">.</span><span class="nx">autoescape</span> <span class="o">?=</span> <span class="kc">off</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>Internal CoffeeKup stuff.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">__ck =</span>
+to generate the final template function. </p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">skeleton = </span><span class="nf">(data = {}) -&gt;</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>Whether to generate formatted HTML with indentation and line breaks, or
+just the natural "faux-minified" output.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">data</span><span class="p">.</span><span class="nx">format</span> <span class="o">?=</span> <span class="kc">off</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>Whether to autoescape all content or let you handle it on a case by case
+basis with the <code>h</code> function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">data</span><span class="p">.</span><span class="nx">autoescape</span> <span class="o">?=</span> <span class="kc">off</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Internal CoffeeKup stuff.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">__ck =</span>
<span class="nv">buffer: </span><span class="p">[]</span>
<span class="nv">esc: </span><span class="nf">(txt) -&gt;</span>
@@ -68,7 +78,7 @@
<span class="nv">repeat: </span><span class="nf">(string, count) -&gt;</span> <span class="nb">Array</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">).</span><span class="nx">join</span> <span class="nx">string</span>
- <span class="nv">indent: </span><span class="o">-&gt;</span> <span class="nx">text</span> <span class="nx">@repeat</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">,</span> <span class="nx">@tabs</span><span class="p">)</span> <span class="k">if</span> <span class="nx">data</span><span class="p">.</span><span class="nx">format</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>Adapter to keep the builtin tag functions DRY.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">tag: </span><span class="nf">(name, args) -&gt;</span>
+ <span class="nv">indent: </span><span class="o">-&gt;</span> <span class="nx">text</span> <span class="nx">@repeat</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">,</span> <span class="nx">@tabs</span><span class="p">)</span> <span class="k">if</span> <span class="nx">data</span><span class="p">.</span><span class="nx">format</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Adapter to keep the builtin tag functions DRY.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">tag: </span><span class="nf">(name, args) -&gt;</span>
<span class="nv">combo = </span><span class="p">[</span><span class="nx">name</span><span class="p">]</span>
<span class="nx">combo</span><span class="p">.</span><span class="nx">push</span> <span class="nx">i</span> <span class="k">for</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">args</span>
<span class="nx">tag</span><span class="p">.</span><span class="nx">apply</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">combo</span>
@@ -92,8 +102,8 @@
<span class="nx">text</span> <span class="s1">&#39;&quot;&#39;</span>
<span class="nv">render_attrs: </span><span class="nf">(obj) -&gt;</span>
- <span class="k">for</span> <span class="nx">k</span><span class="p">,</span> <span class="nx">v</span> <span class="k">of</span> <span class="nx">obj</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>true is rendered as <code>selected="selected"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;boolean&#39;</span> <span class="o">and</span> <span class="nx">v</span>
- <span class="nv">v = </span><span class="nx">k</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>undefined, false and null result in the attribute not being rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="nx">v</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>strings, numbers, objects, arrays and functions are rendered "as is".</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">text</span> <span class="s2">&quot; #{k}=\&quot;#{@esc(v)}\&quot;&quot;</span>
+ <span class="k">for</span> <span class="nx">k</span><span class="p">,</span> <span class="nx">v</span> <span class="k">of</span> <span class="nx">obj</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>true is rendered as <code>selected="selected"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;boolean&#39;</span> <span class="o">and</span> <span class="nx">v</span>
+ <span class="nv">v = </span><span class="nx">k</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>undefined, false and null result in the attribute not being rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="nx">v</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>strings, numbers, objects, arrays and functions are rendered "as is".</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">text</span> <span class="s2">&quot; #{k}=\&quot;#{@esc(v)}\&quot;&quot;</span>
<span class="nv">render_contents: </span><span class="nf">(contents) -&gt;</span>
<span class="k">switch</span> <span class="k">typeof</span> <span class="nx">contents</span>
@@ -169,39 +179,39 @@
<span class="nx">text</span> <span class="s1">&#39;\n&#39;</span> <span class="k">if</span> <span class="nx">data</span><span class="p">.</span><span class="nx">format</span>
<span class="nv">coffeescript = </span><span class="nf">(param) -&gt;</span>
- <span class="k">switch</span> <span class="k">typeof</span> <span class="nx">param</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p><code>coffeescript -&gt; alert 'hi'</code> becomes:
+ <span class="k">switch</span> <span class="k">typeof</span> <span class="nx">param</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p><code>coffeescript -&gt; alert 'hi'</code> becomes:
<code>&lt;script&gt;;(function () {return alert('hi');})();&lt;/script&gt;</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">when</span> <span class="s1">&#39;function&#39;</span>
- <span class="nx">script</span> <span class="s2">&quot;#{__ck.coffeescript_helpers}(#{param}).call(this);&quot;</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p><code>coffeescript "alert 'hi'"</code> becomes:
+ <span class="nx">script</span> <span class="s2">&quot;#{__ck.coffeescript_helpers}(#{param}).call(this);&quot;</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><code>coffeescript "alert 'hi'"</code> becomes:
<code>&lt;script type="text/coffeescript"&gt;alert 'hi'&lt;/script&gt;</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">when</span> <span class="s1">&#39;string&#39;</span>
- <span class="nx">script</span> <span class="nv">type: </span><span class="s1">&#39;text/coffeescript&#39;</span><span class="p">,</span> <span class="o">-&gt;</span> <span class="nx">param</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p><code>coffeescript src: 'script.coffee'</code> becomes:
+ <span class="nx">script</span> <span class="nv">type: </span><span class="s1">&#39;text/coffeescript&#39;</span><span class="p">,</span> <span class="o">-&gt;</span> <span class="nx">param</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><code>coffeescript src: 'script.coffee'</code> becomes:
<code>&lt;script type="text/coffeescript" src="script.coffee"&gt;&lt;/script&gt;</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">when</span> <span class="s1">&#39;object&#39;</span>
<span class="nv">param.type = </span><span class="s1">&#39;text/coffeescript&#39;</span>
<span class="nx">script</span> <span class="nx">param</span>
- </pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Conditional IE comments.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">ie = </span><span class="nf">(condition, contents) -&gt;</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>Conditional IE comments.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">ie = </span><span class="nf">(condition, contents) -&gt;</span>
<span class="nx">__ck</span><span class="p">.</span><span class="nx">indent</span><span class="p">()</span>
<span class="nx">text</span> <span class="s2">&quot;&lt;!--[if #{condition}]&gt;&quot;</span>
<span class="nx">__ck</span><span class="p">.</span><span class="nx">render_contents</span><span class="p">(</span><span class="nx">contents</span><span class="p">)</span>
<span class="nx">text</span> <span class="s2">&quot;&lt;![endif]--&gt;&quot;</span>
<span class="nx">text</span> <span class="s1">&#39;\n&#39;</span> <span class="k">if</span> <span class="nx">data</span><span class="p">.</span><span class="nx">format</span>
- <span class="kc">null</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>Stringify the skeleton and unwrap it from its enclosing <code>function(){}</code>, then
+ <span class="kc">null</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>Stringify the skeleton and unwrap it from its enclosing <code>function(){}</code>, then
add the CoffeeScript helpers.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">skeleton = </span><span class="nb">String</span><span class="p">(</span><span class="nx">skeleton</span><span class="p">)</span>
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/function\s*\(.*\)\s*\{/</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/return null;\s*\}$/</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">)</span>
-<span class="nv">skeleton = </span><span class="nx">coffeescript_helpers</span> <span class="o">+</span> <span class="nx">skeleton</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Compiles a template into a standalone JavaScript function.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">coffeekup.compile = </span><span class="nf">(template, options = {}) -&gt;</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>The template can be provided as either a function or a CoffeeScript string
+<span class="nv">skeleton = </span><span class="nx">coffeescript_helpers</span> <span class="o">+</span> <span class="nx">skeleton</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>Compiles a template into a standalone JavaScript function.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">coffeekup.compile = </span><span class="nf">(template, options = {}) -&gt;</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>The template can be provided as either a function or a CoffeeScript string
(in the latter case, the CoffeeScript compiler must be available).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">template</span> <span class="o">is</span> <span class="s1">&#39;function&#39;</span> <span class="k">then</span> <span class="nv">template = </span><span class="nb">String</span><span class="p">(</span><span class="nx">template</span><span class="p">)</span>
<span class="k">else</span> <span class="k">if</span> <span class="k">typeof</span> <span class="nx">template</span> <span class="o">is</span> <span class="s1">&#39;string&#39;</span> <span class="o">and</span> <span class="nx">coffee</span><span class="o">?</span>
<span class="nv">template = </span><span class="nx">coffee</span><span class="p">.</span><span class="nx">compile</span> <span class="nx">template</span><span class="p">,</span> <span class="nv">bare: </span><span class="kc">yes</span>
- <span class="nv">template = </span><span class="s2">&quot;function(){#{template}}&quot;</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>If an object <code>hardcode</code> is provided, insert the stringified value
+ <span class="nv">template = </span><span class="s2">&quot;function(){#{template}}&quot;</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>If an object <code>hardcode</code> is provided, insert the stringified value
of each variable directly in the function body. This is a less flexible but
faster alternative to the standard method of using <code>with</code> (see below). </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">hardcoded_locals = </span><span class="s1">&#39;&#39;</span>
<span class="k">if</span> <span class="nx">options</span><span class="p">.</span><span class="nx">hardcode</span>
<span class="k">for</span> <span class="nx">k</span><span class="p">,</span> <span class="nx">v</span> <span class="k">of</span> <span class="nx">options</span><span class="p">.</span><span class="nx">hardcode</span>
- <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;function&#39;</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>Make sure these functions have access to <code>data</code> as <code>@/this</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = function(){return (#{v}).apply(data, arguments);};&quot;</span>
- <span class="k">else</span> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = #{JSON.stringify v};&quot;</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>Add a function for each tag this template references. We don't want to have
+ <span class="k">if</span> <span class="k">typeof</span> <span class="nx">v</span> <span class="o">is</span> <span class="s1">&#39;function&#39;</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>Make sure these functions have access to <code>data</code> as <code>@/this</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = function(){return (#{v}).apply(data, arguments);};&quot;</span>
+ <span class="k">else</span> <span class="nx">hardcoded_locals</span> <span class="o">+=</span> <span class="s2">&quot;var #{k} = #{JSON.stringify v};&quot;</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>Add a function for each tag this template references. We don't want to have
all hundred-odd tags wasting space in the compiled function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">tag_functions = </span><span class="s1">&#39;&#39;</span>
<span class="nv">tags_used = </span><span class="p">[]</span>
@@ -211,19 +221,19 @@
<span class="nx">tag_functions</span> <span class="o">+=</span> <span class="s2">&quot;var #{tags_used.join &#39;,&#39;};&quot;</span>
<span class="k">for</span> <span class="nx">t</span> <span class="k">in</span> <span class="nx">tags_used</span>
- <span class="nx">tag_functions</span> <span class="o">+=</span> <span class="s2">&quot;#{t} = function(){return __ck.tag(&#39;#{t}&#39;, arguments);};&quot;</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>Main function assembly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">code = </span><span class="nx">tag_functions</span> <span class="o">+</span> <span class="nx">hardcoded_locals</span> <span class="o">+</span> <span class="nx">skeleton</span>
+ <span class="nx">tag_functions</span> <span class="o">+=</span> <span class="s2">&quot;#{t} = function(){return __ck.tag(&#39;#{t}&#39;, arguments);};&quot;</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>Main function assembly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">code = </span><span class="nx">tag_functions</span> <span class="o">+</span> <span class="nx">hardcoded_locals</span> <span class="o">+</span> <span class="nx">skeleton</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.doctypes = #{JSON.stringify coffeekup.doctypes};&quot;</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.coffeescript_helpers = #{JSON.stringify coffeescript_helpers};&quot;</span>
- <span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.self_closing = #{JSON.stringify coffeekup.self_closing};&quot;</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>If <code>locals</code> is set, wrap the template inside a <code>with</code> block. This is the
+ <span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;__ck.self_closing = #{JSON.stringify coffeekup.self_closing};&quot;</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>If <code>locals</code> is set, wrap the template inside a <code>with</code> block. This is the
most flexible but slower approach to specifying local variables.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">code</span> <span class="o">+=</span> <span class="s1">&#39;with(data.locals){&#39;</span> <span class="k">if</span> <span class="nx">options</span><span class="p">.</span><span class="nx">locals</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;(#{template}).call(data);&quot;</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s1">&#39;}&#39;</span> <span class="k">if</span> <span class="nx">options</span><span class="p">.</span><span class="nx">locals</span>
<span class="nx">code</span> <span class="o">+=</span> <span class="s2">&quot;return __ck.buffer.join(&#39;&#39;);&quot;</span>
-
+
<span class="k">new</span> <span class="nb">Function</span><span class="p">(</span><span class="s1">&#39;data&#39;</span><span class="p">,</span> <span class="nx">code</span><span class="p">)</span>
-<span class="nv">cache = </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>Template in, HTML out. Accepts functions or strings as does <code>coffeekup.compile</code>.</p>
+<span class="nv">cache = </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>Template in, HTML out. Accepts functions or strings as does <code>coffeekup.compile</code>.</p>
<p>Accepts an option <code>cache</code>, by default <code>false</code>. If set to <code>false</code> templates will
be recompiled each time.</p>
@@ -241,9 +251,9 @@
<span class="nx">tpl</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span>
<span class="nx">unless</span> <span class="nb">window</span><span class="o">?</span>
- <span class="nv">coffeekup.adapters =</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>Legacy adapters for when CoffeeKup expected data in the <code>context</code> attribute.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">simple: </span><span class="nx">coffeekup</span><span class="p">.</span><span class="nx">render</span>
+ <span class="nv">coffeekup.adapters =</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>Legacy adapters for when CoffeeKup expected data in the <code>context</code> attribute.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">simple: </span><span class="nx">coffeekup</span><span class="p">.</span><span class="nx">render</span>
<span class="nv">meryl: </span><span class="nx">coffeekup</span><span class="p">.</span><span class="nx">render</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>Allows <code>partial 'foo'</code> instead of <code>text @partial 'foo'</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">express:</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>Allows <code>partial 'foo'</code> instead of <code>text @partial 'foo'</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">express:</span>
<span class="nv">compile: </span><span class="nf">(template, data) -&gt;</span>
<span class="nx">data</span><span class="p">.</span><span class="nx">hardcode</span> <span class="o">?=</span> <span class="p">{}</span>
<span class="nv">data.hardcode.partial = </span><span class="o">-&gt;</span>
View
54 src/coffeekup.coffee
@@ -52,20 +52,44 @@ coffeescript_helpers = """
} return -1; };
""".replace /\n/g, ''
-# All possible HTML tags, from all versions (hopefully). But only those
-# referenced in the template will be included in the compiled function.
-coffeekup.tags = 'a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont
-|bdo|big|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup
-|command|datalist|dd|del|details|dfn|dir|div|dl|dt|em|embed|fieldset|figcaption
-|figure|font|footer|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr
-|html|i|iframe|img|input|ins|keygen|kbd|label|legend|li|link|map|mark|menu|meta
-|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre
-|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strike
-|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title
-|tr|tt|u|ul|video|xmp'.replace(/\n/g, '').split '|'
-
-coffeekup.self_closing = ['area', 'base', 'basefont', 'br', 'col', 'frame', 'hr',
- 'img', 'input', 'link', 'meta', 'param']
+# Private HTML element reference.
+# Please mind the gap (1 space at the beginning of each subsequent line).
+elements =
+ # Valid HTML 5 elements requiring a closing tag.
+ # Note: the `var` element is out for obvious reasons, please use `tag 'var'`.
+ regular: 'a abbr address article aside audio b bdi bdo blockquote body button
+ canvas caption cite code colgroup datalist dd del details dfn div dl dt em
+ fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup
+ html i iframe ins kbd label legend li map mark menu meter nav noscript object
+ ol optgroup option output p pre progress q rp rt ruby s samp script section
+ select small span strong style sub summary sup table tbody td textarea tfoot
+ th thead time title tr u ul video'
+
+ # Valid self-closing HTML 5 elements.
+ void: 'area base br col command embed hr img input keygen link meta param
+ source track wbr'
+
+ obsolete: 'applet acronym bgsound dir frameset noframes isindex listing
+ nextid noembed plaintext rb strike xmp big blink center font marquee multicol
+ nobr spacer tt'
+
+ obsolete_void: 'basefont frame'
+
+# Create a unique list of element names merging the desired groups.
+merge_elements = (args...) ->
+ result = []
+ for a in args
+ for element in elements[a].split ' '
+ result.push element unless result.indexOf(element) > -1
+ result
+
+# Public/customizable list of possible elements.
+# For each name in this list that is also present in the input template code,
+# a function with the same name will be added to the compiled template.
+coffeekup.tags = merge_elements 'regular', 'obsolete', 'void', 'obsolete_void'
+
+# Public/customizable list of elements that should be rendered self-closed.
+coffeekup.self_closing = merge_elements 'void', 'obsolete_void'
# This is the basic material from which compiled templates will be formed.
# It will be manipulated in its string form at the `coffeekup.compile` function
@@ -281,7 +305,7 @@ coffeekup.compile = (template, options = {}) ->
code += "(#{template}).call(data);"
code += '}' if options.locals
code += "return __ck.buffer.join('');"
-
+
new Function('data', code)
cache = {}

0 comments on commit 059ec7d

Please sign in to comment.
Something went wrong with that request. Please try again.