Blam NPM | npm.io

blam.js

Simple, Tiny, Fast (enough)

Example usage (in CoffeeScript):

blam(->
  html(
    head(
      title( "Hello" )
      script( src:"/my-script.js" )
      link(
        rel:"stylesheet"
        type:"text/css"
        href:"/my-styles.css"
      )
    )
    body(
      article( id:"main",
        section.content(
          p("Loading...")
        )
        aside.sidebar( "Nav here" )
      )
    )
  )
)

You can use it in JavaScript too (but it's much prettier in CoffeeScript):

blam(function(){
  return html(
    head(
      title( "Hello" ), 
      script({ src: "/my-script.js" }),
      link({ rel: "stylesheet", type: "text/css", href: "/my-styles.css" })), 
      body(
        article({ id: "main" }, 
          section.content(
            p("Loading...")
          ), 
        aside.sidebar( "Nav here")
      )
    )
  )
});

New "Fancy" Mode

Using the fancy mode, now enabled by default, during the compilation phase it adds support for assigning classnames via a dot syntax like slim or haml. Example:

html= blam ->
  div.container(
    div.header( 
      id:'my-header'
      h1("Header")
    )
    div.content(
      "Content"
    )
    div.footer.hidden (
      "Multiple classes too"
    )
  )

Will generate:

<div class="container"><div class="header" id="my-header"><h1>Header</h1></div><div class="content">Content</div><div class="footer hidden">Multiple classes too</div></div>

Note: The lack of extra whitespace/indentation is intentional, blam generates html for the browser to read, humans not so much.

Notes

Clocks in at ~1K minified and gzipped.

Supports adding custom tags:

blam.define 'jqmpage', (args...)->
  div 'data-role':'page',
    div 'data-role':'header', args...

Passes initial arguments on to markup block:

blam name:'Matt', (user)->
  div( id:'user-block',
    p("Hello ", user.name)
  )

Can be "compiled" into an executable function (good for often repeated bits of code):

template= blam.compile (user)->
  div( id:'user-block',
    p("Hello ", user.name)
  )

html+= template(user) for user in all_users

For array elements you can use the each tag:

template= blam.compile (users)->
  div( id:'user-block',
    each(users, (user)->
      p("Hello ", user.name)
    )
  )

html+= template(all_users)

BackBone Example

class TweetListView extends Backbone.View
  className: 'tweet-list'

  initialize: ->
    # bind to @collection changes to add/remove TweetViews
    
  render: ->
    @collection.each (tweet)-> 
      tweetView= new TweetView( model:tweet )
      @el.append tweetView.render().el


class TweetView extends Backbone.View
  className: 'tweet'
  
  events:
    "click .reply": "doReply"
  
  doReply: (e)=>
    alert "Do reply code here..."
    
  render: ->
    @el.attr 'id', @model.get(id)
    @el.append blam(@model, (model)->
      div.body(
        div.actions(
          button.reply( "Reply..." )
          button.retweet( "Retweet..." )
        )
        model.get('body')
      )
    )

Todo

Would like to support all the modern browsers and possibly as far back as IE8? (run tests!!!)
Need to test AMD support.
Extract and expose tag building helpers.
Dasherize attributes? (dataRole:"page" would expand to 'data-role="page"')