Coffee Tags

[shreeve]

CoffeeTags

• tiny addition to the native CoffeeScript lexer and rewriter for rendering HTML
• most useful with projects like Vuejs or React, but can be used by many others
• no new language or syntax to learn, just use all the power of normal CoffeeScript
• resembles HTML, but is actually active/executable code
• invokes a render function to process tags for the target framework (React, Vue, etc.)
• doesn't require tags to be closed, uses indentation level to determine
• doesn't require tags to be predeclared to use (no more {div, table, th, tr} = React.DOM)
• allows custom render function using <!myRenderer!> (the default render function is h)
• allows selector-like syntax for tags (e.g. - <div.active@menu> yields <div class="active" id="menu">
• allows default tag name of div (i.e. - <>, <.note>, and <.active@sidebar!> are all valid)
• allows trailing ! on tags for unescaped content (e.g. - <span.note!> "Note: #{text}")
• allows trailing ? on tags for showing debugging output (e.g. - <div?>)
• allows naked tags (e.g. - you don't have to type div(), you can just use <div>)
• allows reserved words to be used as attributes (no more using <div className: 'foo'>)
• allows attributes to be skipped (no more using div null, "Hello")
• allows children to be passed as a list without having to pass them as an explicit array
• allows the first argument to indicate if the tag should be skipped (via truthy Boolean or Number)
• TODO: allows dynamic tags (e.g. - <"h#{ level }"> can produce <h3>)

Example

CoffeeScript source

render: (h) ->
  <table.active.fixed@inbox>
    <tr>
      <th> 'From'
      <th> 'Subject'
      <th> 'Received'
    for item in @list
      <tr> class:item.tags,
        <td> <p> item.from
        <td> item.subj
        <td> <p> item.date

CoffeeScript output

render: function(h) {
  var item;
  return h('table.active.fixed@inbox', h('tr', h('th', 'From'), h('th', 'Subject'), h('th', 'Received')), (function() {
    var i, len, ref, results;
    ref = this.list;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
      item = ref[i];
      results.push(h('tr', {
        "class": item.tags
      }, h('td', h('p', item.from)), h('td', item.subj), h('td', h('p', item.date))));
    }
    return results;
  }).call(this));
}

[shreeve]

Hrm... this is an updated PR from #4346

@GeoffreyBooth asked for a new custom render function, this PR contains that.

[GeoffreyBooth]

Let’s please keep this in #4346 to preserve the conversation history. I’ve reopened that pull request. As you push more commits to your branch, that PR is updated automatically.

[shreeve]

@GeoffreyBooth - It's weird, this duplicate PR is from the same branch where I've made my updates. Only this PR updates when I push a commit, the one from #4346 doesn't update.

[shreeve]

@GeoffreyBooth - ok cool... looks like it's working now. I'll do everything over in #4346