snappiti

Emmet/Zen Style Coding for Titanium

SnappiTi

A emmet/zencoding style code generator for Titanium

Install

$ [sudo] npm install -g snappiti

Usage

$ snappiti compile [code]

There is an optional flag to hide style option generation. E.g.

$ snappiti comiple [code] -s
$ snappiti compile [code] --hide-style

#Examples

  Window#win

becomes

  var win = Ti.UI.createWindow(styles['#win'])
Window#win>View#container>Label.white#label+Button.green

becomes

  var win = Ti.UI.createWindow(styles['#win'])
  var container = Ti.UI.createView(styles['#container'])
  win.add(container)
  var label = Ti.UI.createLabel(_.defaults(styles['#label'],styles['.white']))
  container.add(label)
  container.add(Ti.UI.createButton(_.defaults({},styles['.green']))
  View#container>View#num$.button*8

becomes

  var container = Ti.UI.createView(styles['#container'])
  var num1 = Ti.UI.createView(_.defaults(styles['#num1'],styles['.button']))
  container.add(num1)
  var num2 = Ti.UI.createView(_.defaults(styles['#num2'],styles['.button']))
  container.add(num2)
  var num3 = Ti.UI.createView(_.defaults(styles['#num3'],styles['.button']))
  container.add(num3)
  var num4 = Ti.UI.createView(_.defaults(styles['#num4'],styles['.button']))
  container.add(num4)
  var num5 = Ti.UI.createView(_.defaults(styles['#num5'],styles['.button']))
  container.add(num5)
  var num6 = Ti.UI.createView(_.defaults(styles['#num6'],styles['.button']))
  container.add(num6)
  var num7 = Ti.UI.createView(_.defaults(styles['#num7'],styles['.button']))
  container.add(num7)
  var num8 = Ti.UI.createView(_.defaults(styles['#num8'],styles['.button']))
  container.add(num8)

see the snippets.json file

  module#MainWindow>Window#win>(View#top.white>Label#label)+(View#bottom.green>Button#exit)

becomes

 
/******     STYLES     *****/
 
var styles = {
  '#MainWindow': {
    
  },
  '#bottom': {
    
  },
  '#exit': {
    
  },
  '#label': {
    
  },
  '#top': {
    
  },
  '#win': {
    
  },
  '.green': {
    
  },
  '.white': {
    
  }
};
 
/******      VIEWS     *****/
 
var _ = require('/lib/underscore');
 
function MainWindow(o){
  var win = Ti.UI.createWindow(styles['#win'])
  var top = Ti.UI.createView(_.defaults(styles['#top'],styles['.white']))
  win.add(top)
  var label = Ti.UI.createLabel(styles['#label'])
  top.add(label)
  var bottom = Ti.UI.createView(_.defaults(styles['#bottom'],styles['.green']))
  win.add(bottom)
  var exit = Ti.UI.createButton(styles['#exit'])
  bottom.add(exit)
 
}
 
module.exports = MainWindow
 
  module#MainWindow>Window#win>(View.white>Label#label)+(View.green>Button#exit)

becomes

/******     STYLES     *****/
 
var styles = {
  '#MainWindow': {
    
  },
  '#exit': {
    
  },
  '#label': {
    
  },
  '#win': {
    
  },
  '.green': {
    
  },
  '.white': {
    
  }
};
 
/******      VIEWS     *****/
 
var _ = require('/lib/underscore');
 
function MainWindow(o){
  var win = Ti.UI.createWindow(styles['#win'])
  var _view8 = Ti.UI.createView(_.defaults(styles['#_view8'],styles['.white']))
  win.add(_view8)
  var label = Ti.UI.createLabel(styles['#label'])
  _view8.add(label)
  var _view16 = Ti.UI.createView(_.defaults(styles['#_view16'],styles['.green']))
  win.add(_view16)
  var exit = Ti.UI.createButton(styles['#exit'])
  _view16.add(exit)
 
}
 
module.exports = MainWindow
 

Editor Plugins

Hopefully this list will continue to be updated