Examples

Filtering list

# get name of all properties on Element var items = Object.keys(Element:prototype).sort tag App prop query default: "" def render <self> # bind the input to our query property <input[query] type='text'> # render list with some inline css <ul css:height=200 css:overflow='auto'> # filter list while iterating for item in data when item.indexOf(query) >= 0 <li> item Imba.mount <App[items]>function iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; }; var Imba = require('imba'), _4 = Imba.createTagList, _2 = Imba.createTagMap, _t1, _1 = Imba.createElementFactory(/*SCOPEID*/), _3 = Imba.createTagScope(/*SCOPEID*/); // get name of all properties on Element var items = Object.keys(Element.prototype).sort(); var App = _3.defineTag('App', function(tag){ tag.prototype.__query = {'default': "",name: 'query'}; tag.prototype.query = function(v){ return this._query; } tag.prototype.setQuery = function(v){ this._query = v; return this; } tag.prototype._query = ""; tag.prototype.render = function (){ var _t1, _t2, $ = this.$, self = this; return self.$open(0).setChildren($.$ = $.$ || [ // bind the input to our query property _1('input',$,0,self).setType('text'), // render list with some inline css _1('ul',$,1,self).css('height',200).css('overflow','auto') ],2).synced(( $[0].bindData(self,'query',[]).end(), $[1].setContent( // filter list while iterating (function tagLoop($0) { var _t3, $$ = $0.$iter(); for (let i = 0, ary = iter$(self.data()), len = ary.length, item; i < len; i++) { item = ary[i]; if (item.indexOf(self.query()) < 0) { continue; }; $$.push(($0[i] || _1('li',$0,i)).setContent(item,3)); };return $$; })($[2] || _2($,2,$[1])) ,5).end() ,true)); }; }); Imba.mount((_1(App)).setData(items).end());

Master - Details

# get name of all properties on Element var notes = [ {body: "First note"} ] tag App prop note def addItem notes.unshift(body: "New Note") def render <self.hbox css:height=200> <aside> <ul> for item in notes <li .selected=(note == item) :tap.setNote(item)> <span> item:body <footer> <button :tap.addItem> "New note" if note <section> <textarea[note:body].full> Imba.mount <App>var Imba = require('imba'), _2 = Imba.createTagList, _t1, _1 = Imba.createElementFactory(/*SCOPEID*/), _3 = Imba.createTagScope(/*SCOPEID*/); // get name of all properties on Element var notes = [ {body: "First note"} ]; var App = _3.defineTag('App', function(tag){ tag.prototype.note = function(v){ return this._note; } tag.prototype.setNote = function(v){ this._note = v; return this; }; tag.prototype.addItem = function (){ return notes.unshift({body: "New Note"}); }; tag.prototype.render = function (){ var _t1, _t2, $ = this.$, _t3, self = this, _t4; return self.$open(0).flag('hbox').css('height',200).setChildren([ ($[0] || _1('aside',$,0,self).setContent([ _1('ul',$,1,0), _1('footer',$,3,0).setContent($[4] || _1('button',$,4,3).on$(0,['tap','addItem'],self).setText("New note"),2) ],2)).end(( $[1].setContent((function tagLoop($0) { var _t4, _t5, t0; for (let i = 0, len = $0.taglen = notes.length, item; i < len; i++) { item = notes[i]; (t0 = $0[i] || (t0=_1('li',$0,i)).setContent( t0.$.A || _1('span',t0.$,'A',t0) ,2)).flagIf('selected',(self.note() == item)).on$(0,['tap',['setNote',item]],self).end(( t0.$.A.setContent(item.body,3) ,true)); };return $0; })($[2] || _2($,2,$[1])),4) ,true)), self.note() ? ( ($[5] || _1('section',$,5,self).setContent($[6] || _1('textarea',$,6,5).flag('full'),2)).end(( $[6].bindData(self.note(),'body').end() ,true)) ) : void(0) ],1).synced(); }; }); Imba.mount((_1(App)).end());

Simple todo list

tag App prop items def addItem if @input.value items.push(title: @input.value) @input.value = "" def toggleItem item item:completed = !item:completed Imba.mount <App.vbox items=[] -> <form.bar :submit.prevent.addItem> <input@input> <button> 'add' <ul> for item in items <li .done=item:completed :tap.toggleItem(item)> item:titlefunction iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; }; var _t1, Imba = require('imba'), _3 = Imba.createTagList, _1 = Imba.createTagScope(/*SCOPEID*/), _2 = Imba.createElementFactory(/*SCOPEID*/); var App = _1.defineTag('App', function(tag){ tag.prototype.items = function(v){ return this._items; } tag.prototype.setItems = function(v){ this._items = v; return this; }; tag.prototype.addItem = function (){ var v_; if (this._input.value()) { this.items().push({title: this._input.value()}); return (this._input.setValue(v_ = ""),v_); }; }; tag.prototype.toggleItem = function (item){ return item.completed = !item.completed; }; }); Imba.mount((t0 = (t0=_2(App)).flag('vbox').setItems([]).setTemplate(function() { var _t2, $ = this.$, _t3, self = this, t0, t1; return Imba.static([ (t1 = $[0] || (t1=_2('form',$,0,t0)).flag('bar').on$(0,['submit','prevent','addItem'],self).setContent([ self._input = self._input||_2('input',t1).flag('input'), _2('button',$,1,t1).setText('add') ],2)).end(( self._input.end() ,true)), ($[2] || _2('ul',$,2,t0)).setContent((function tagLoop($0) { var _t31; for (let i = 0, items = iter$(self.items()), len = $0.taglen = items.length, item; i < len; i++) { item = items[i]; ($0[i] || _2('li',$0,i)).flagIf('done',item.completed).on$(0,['tap',['toggleItem',item]],self).setContent(item.title,3); };return $0; })($[3] || _3($,3,$[2])),4) ],2,1); })).end());

More examples

Imba.io

This whole website is written in Imba. It uses the same code for server and client. After the initial load, all navigation in the browser is happening with history push/popState, and rendered directly on the client, yet any hard refresh should land you at the same spot when rendered from the server, thanks to using the same logic for routing as well. Grab it over at GitHub.

TodoMVC

The basic Imba implementation of TodoMVC is a good place to start playing around.

Hello World

Tiny application with webpack/imbapack setup.