jabs 0.1.0

data/lightning.jabs

@@ -0,0 +1,33 @@
+get 'http://github.com/githubapi'+window.location.href.match(/~(.*)/)[1]
+  user.repositories.each fun repository
+    $#repositories
+      .append render(:repository, repository)
+      
+def show_messages
+  &.winner
+    .removeClass :winner
+  $.repository:not(.faded)
+    if .siblings.get(0)
+      .addClass :winner
+      $#winners_circle
+        .show
+        .replaceWith render(:winners_circle, ../@repository)
+    else
+      $#winners_circle
+        .hide
+$.repo
+  &a:click
+    event.stopPropagation()
+  :click
+    .toggleClass :faded
+    .show_messages
+ 
+$[href=#show]
+  $.repository
+    .removeClass :faded
+  .show_messages
+      
+$[href=#hide]
+  $.repository
+    .addClass :faded
+  .show_messages

data/rspec/fixtures/example.js

@@ -0,0 +1,36 @@
+var check_feed = function() {
+  $('#feed').load("/live/last_item");
+  setTimeout(check_feed, 60000);
+}
+
+$(function() {
+  $('input[@default_value]').each(function() {
+    // clear default value when user clicks
+    $(this)
+      .focus(function () {
+        if (this.value == this.getAttribute('default_value')) {
+          $(this)
+            .removeClass("grey")
+            .attr({'value': ''});
+        }
+      })
+      .blur(function() {
+        if(this.value == '') {
+          $(this)
+            .addClass("grey")
+            .attr({'value': this.getAttribute('default_value')})
+        }
+      })
+      .blur()
+  });
+
+  // blank out all elements
+  // submitted without the user modifying the element
+  $('form').submit(function() { $('input[@default_value]').focus(); });
+
+  $('#comments').autolineheight({minWidth:100,ratio:.03});
+  
+  // No live feed for the moment
+  // check_feed();
+});
+

data/rspec/fixtures/example.js.jabs

@@ -0,0 +1,24 @@
+fun checkFeed
+  $#feed
+    load("/live/last_item")
+  // Setup the timeout
+  setTimeout(checkFeed, 60000)
+
+:ready
+  checkFeed()
+
+$input[@default_value]
+  :focus
+    if @value == @default_value
+      this.removeClass("grey")
+      @value = "something"
+  :blur
+    if @value == ''
+      this.addClass("grey")
+      @value = @default_value
+  blur()
+
+$form
+  :submit
+    $input[@default_value]
+      focus()

data/rspec/fixtures/mephisto.js

@@ -0,0 +1,56 @@
+ToolBox = Class.create();
+ToolBox.current = null;
+ToolBox.prototype = { 
+  initialize: function(element) {
+    this.toolbox = $(element);
+    if(!this.toolbox) return;
+    this.timeout = null;
+    this.tools = this.findTools();
+    
+    Event.observe(this.toolbox, 'mouseover', this.onHover.bindAsEventListener(this), true);
+    Event.observe(this.toolbox, 'mouseout', this.onBlur.bindAsEventListener(this), true);
+    Event.observe(this.tools, 'mouseover', this.onHover.bindAsEventListener(this));
+    Event.observe(this.tools, 'mouseout', this.onBlur.bindAsEventListener(this));
+  },
+  
+  show: function() {
+    if(this.timeout) { 
+      clearTimeout(this.timeout); 
+      this.timeout = null;
+    }
+    
+    if(ToolBox.current) {
+      ToolBox.current.hideTools();
+    }
+    
+    if(this.tools) { 
+      Element.show(this.tools); 
+      ToolBox.current = this;
+    }    
+  },
+
+  onHover: function(event) {
+    this.show();
+  },
+
+  onBlur: function(event) {
+    this.considerHidingTools();
+  },
+
+  considerHidingTools: function() {
+    if(this.timeout) { clearTimeout(this.timeout); }
+    this.timeout = setTimeout(this.hideTools.bind(this), 500);
+  },
+
+  hideTools: function() {
+    clearTimeout(this.timeout);
+    this.timeout = null;
+    Element.hide(this.tools);          
+  },
+
+  findTools: function() { 
+    var tools = document.getElementsByClassName('tools', this.toolbox)[0];
+    if(!tools) { throw "You called new ToolBox() on an element which has no class=\"tools\" child element"; }
+    return tools;
+  }
+}

data/rspec/fixtures/mephisto.js.jabl

@@ -0,0 +1,25 @@
+
+
+:ready
+  $#toolbox
+
+    fun stopHideTimer
+      if @timeout
+        clearTimeout(@timeout)
+        @timeout = null
+
+    fun startHideTimer
+      stophideTimer()
+      @timeout = setTimeout(disappear, 500)
+
+    fun disappear
+      stopHideTimer()
+      &.tools
+        hide()
+
+    :blur startHideTimer
+    &.tools
+      :hover
+        dissappear()
+        this.show()
+      :blur startHideTimer

data/rspec/jabs/jabs_engine_spec.rb

@@ -0,0 +1,472 @@
+require 'rspec/jabs_spec_helper'
+require 'colored'
+# $LOAD_PATH << "~/code/johnson/js" unless $LOAD_PATH.include?("~/code/johnson/js")
+
+describe Jabs::Engine do
+  def assert_jabs src, target
+    jabsed = Jabs::Engine.new(src).render
+    src = Johnson::Parser.parse(jabsed).to_ecma
+    target = Johnson::Parser.parse(target).to_ecma
+    src.should include(target)
+  rescue Exception => e
+    puts "\n"*2
+    puts description
+    puts Jabs::Engine.new(src).render
+    puts src
+    puts target
+    raise e
+  end
+
+  describe "line" do
+    it "passes through" do
+      assert_jabs "use.real[\"javascript\"] == true;", "use.real[\"javascript\"] == true;"
+    end
+
+    it "renders multiple lines" do
+      assert_jabs "one;\ntwo;", "one;\ntwo;"
+    end
+
+    it "doesn't throw up when given nested lines" do
+      assert_jabs %{var coolio = { val: \"to the store\"};}, %{ 
+var coolio = {
+  val: "to the store"
+};
+}
+    end
+
+    it "understands function literals across lines" do
+      assert_jabs %{
+function() {
+  doCall.apply(null);
+}
+}, %{function() {doCall.apply(null);}}
+    end
+  end
+
+  describe "functions" do
+    it "compiles funs with arbirtrary javascript" do
+      assert_jabs %{
+fun one
+  var a = b
+  fun two
+}, %{
+function one() {
+  var a = b;
+  function two() {}
+}
+}
+
+    end
+    it "compiles funs into functions" do
+      assert_jabs "fun do_something", "function do_something() {}"
+    end
+
+    it "compiles with argument lists" do
+      assert_jabs "fun do_something has, arguments", "function do_something(has, arguments) {}"
+    end
+
+    it "compiles on multiple lines" do
+      assert_jabs "fun one\nfun two", "function one() {}; function two() {};"
+    end
+    
+
+    it "compiles nesting funs" do
+      assert_jabs %{
+fun outer
+  fun inner
+  fun inner_two
+},%{
+function outer() {
+  function inner() {
+  }
+  function inner_two() {
+  }
+}  
+}
+    end
+
+    it "compiles REAL javascript" do
+      assert_jabs %{
+fun real
+  whatever.you['want'] = "Goes here"
+  !stop == true
+},%{
+function real() {
+  whatever.you['want'] = "Goes here";
+  !stop == true;
+}  
+}
+    end
+
+    it "compiles empty functions across lines" do
+      assert_jabs %{function(){\r\n}}, %{function(){}}
+    end
+  end
+
+  describe "def" do
+    it "adds functions to JQuery.fn" do
+      assert_jabs "def whatever", "jQuery.fn.whatever = function() {var $this = this;}"
+    end
+
+    it "adds functions with arguments to jQuery.fn" do
+      assert_jabs "def whatever you, want", "jQuery.fn.whatever = function(you, want) {var $this = this;}"
+    end
+
+    it "compiles jabs normally within def" do
+      assert_jabs %{
+def sets_default_value
+  &[default_value]
+}, %{
+jQuery.fn.sets_default_value = function() {
+  var $this = this;
+  (function($this) {})($this.find('[default_value]'))
+}
+}
+    end
+  end
+
+  describe "selectors" do
+    before(:each) do
+      @css = "#very .complex, style.selector[value=\"pants\"]"
+    end
+
+    it "makes a query" do
+      assert_jabs "$#{@css}", "(function($this) {})(jQuery('#{@css}'));"
+    end
+
+    it "renders iterator" do
+      assert_jabs "$#{@css}\n  this.rules();", "(function($this) {this.rules();})(jQuery('#{@css}'));"
+    end
+
+#     it "wraps with document.ready if not already wrapped" do
+#       assert_jabs "$#{@css}", "jQuery(document).bind(\"ready\", function() {jQuery(\"#{@css}\").each(function() {});});"
+#     end
+  end
+
+  describe "events" do
+    it "has a special :ready event" do
+      assert_jabs(":ready", "jQuery(function() {\n  (function($this) {  })(jQuery(window));\n});")
+    end
+
+    it "has it's own $this" do
+      assert_jabs ":click", "var $this = jQuery(this);"
+    end
+
+    it "binds events to 'this' and preserves namespace" do
+      assert_jabs ":click.awesomely", "$this.live(\"click.awesomely\", function(e){var $this = jQuery(this);});"
+    end
+
+    it "renders callback" do
+      assert_jabs ":click.awesomely\n  a()\n  b()", "$this.live(\"click.awesomely\", function(e){var $this = jQuery(this);a();b();});"
+    end
+
+    it "compiles nested with anything with arbitraty javascript inbetween" do
+      assert_jabs %{
+fun test
+  var cat = yum
+  :click
+},%{ 
+function test() {
+  var cat = yum;
+  $this.live( 'click', function(e) {var $this = jQuery(this);});
+}
+}
+    end
+
+    it "compiles nested in selector with arbirtary javascript in between" do
+      assert_jabs %{
+$document
+  cars++
+  :click
+    var cool = "beans"
+},%{
+(function($this) {
+  cars++;
+  $this.live('click', function(e) {
+    var $this = jQuery(this);
+    var cool = "beans"
+  });
+})(jQuery("document"));
+}
+    end
+
+    it "compiles among arbirtary javascript" do
+      assert_jabs %{
+var cat = poo
+:click
+  slot++
+}, %{
+var cat = poo;
+$this.live('click', function(e) {
+  var $this = jQuery(this);
+  slot++;
+});
+}
+    end
+  end
+
+  describe "sub selections" do
+    before(:each) {@css= "#some.convoluted:selector"}
+    it "queries against this" do
+      assert_jabs "&#{@css}", "(function($this) {})($this.find(\"#{@css}\"));"
+    end
+
+    it "renders iterator" do
+      assert_jabs "&#{@css}\n  a()\n  b()", "(function($this) {a();b();})($this.find(\"#{@css}\"));"
+    end
+  end
+
+  describe "conditionals" do
+    it "compiles if statements" do
+      assert_jabs "if 3 == 4", "if(3 == 4) {}"
+    end
+
+    it "compiles unless statements" do
+      assert_jabs "unless 3 == 4", "if(!(3 == 4)) {}"
+    end
+  
+    it "compiles nesting conditionals" do
+      assert_jabs %{
+if 3 === 4
+  unless 4 === 3
+    if 3 === 3
+}, %{
+if(3 === 4) {
+  if(!(4 === 3)) {
+    if(3 === 3) {
+    }
+  }
+}
+}
+    end
+  
+    it "compiles nesting conditionals with arbitrary code" do
+      assert_jabs %{
+var a = cat
+if 3 === 4
+  var elk = "3"
+  unless 4 === 3
+    wear.your.pants()
+    if 3 === 3
+}, %{
+var a = cat;
+if(3 === 4) {
+  var elk = "3";
+  if(!(4 === 3)) {
+    wear.your.pants();
+    if(3 === 3) {
+    }
+  }
+}
+}
+    end
+
+     it "compiles else branches" do
+       assert_jabs %{
+if 3 == 4
+  onething
+else
+  something
+}, %{
+if(3 == 4) {onething;}
+else {something;}
+}
+     end
+ 
+     it "compiles else if branches" do
+       assert_jabs %{      
+if 1 == 2
+  yay
+else if 3 == 4
+  poo
+else
+  wtf
+}, "if(1 == 2) {yay;} else if(3 == 4) {poo;} else {wtf;}"
+     end
+ 
+     it "compiles else unless branches" do
+       assert_jabs %{
+if true
+  yay
+else unless 3 == 4
+  yay
+       }, "if(true) { yay } else if(!(3 == 4)) { yay }"
+     end
+  end
+
+  describe "../.. access" do
+    it "access prevObject" do
+      assert_jabs "..", "$this.prevObject"
+    end
+
+    it "accesses multiple previous objects" do
+      assert_jabs "../..", "$this.prevObject.prevObject"
+    end
+
+    it "provides access to attributes of previous objects" do 
+      assert_jabs "..@value", "$this.prevObject.attr('value')"
+    end
+
+    it "sets attributes of previous objects" do
+      assert_jabs "../..@value = 'neat'", %{$this.prevObject.prevObject.attr('value', 'neat')}
+    end
+
+    it "works inline with current object access and attribute setting" do
+      assert_jabs "..@value = @value", "$this.prevObject.attr('value', $this.attr('value'))"
+    end
+
+    it "works inline with current object access and attribute setting reveres" do
+      assert_jabs "@value = ..@value", "$this.attr('value', $this.prevObject.attr('value'))"
+    end
+
+    it "allows method calls" do
+      assert_jabs "...hide()", "$this.prevObject.hide()"
+    end
+    
+    it "doesn't preclude auto-calling methods" do
+      assert_jabs "...hide :slow", "$this.prevObject.hide('slow')"
+    end
+
+    it "works within conditionals" do
+      assert_jabs "if ...is('.awesome')", "if($this.prevObject.is('.awesome')) {}"
+    end
+  end
+
+  describe "argument compilation" do
+    it "compiles symbols to strings" do
+      assert_jabs ".addClass :class_name", %{$this.addClass("class_name")}
+    end
+
+    it "doesn't render multiple commas" do
+      assert_jabs ".methodCall 1, 2", %{$this.methodCall(1, 2)}
+    end  
+  end
+
+  describe "nested function calls" do
+    it "assumes previous line returns jquery object" do
+      assert_jabs %{
+.methodA :val
+  .methodB :name
+      },
+      %{
+(function($this){
+  $this.methodB('name')
+})($this.methodA('val'))
+      }
+    end
+  end
+
+  describe "ajax" do
+    describe "get" do
+      it "makes a basic ajax call" # do
+      #   assert_jabs "get", "jQuery.ajax()"
+      # end
+      
+      
+      it "uses a url passed to it" # do
+      #         assert_jabs 'get "http://google.com"', '
+      #           jQuery.ajax({
+      #             url: "http://google.com"
+      #           })
+      #         '
+      #       end
+    end
+    
+    describe "post" do
+      it "makes post requests"
+    end
+    
+    describe "put" do
+      it "makes put requests"
+    end
+    
+    describe "delete" do
+      it "makes delete requests"
+    end
+  end
+
+  describe "dot.access" do
+    it "cheats to $this.whatever" do
+      assert_jabs ".width()", "$this.width()"
+    end
+    
+    it "allows method chaining" do
+      assert_jabs ".siblings.get(0)", "$this.siblings().get(0)"
+    end
+    
+    it "does not require parenthesis" do
+      assert_jabs ".width", "$this.width()"
+    end
+    
+    it "renders children appropriately" do
+      assert_jabs %{
+.css({
+  a: 1
+  ,b: 2
+})
+      }, "$this.css({a:1, b:2})"
+    end
+  end
+
+  describe "@ttribute access" do
+    it "gets attributes from DOM" do
+      assert_jabs "@value", "$this.attr('value')"
+    end
+
+    it "happens anywhere on the line" do
+      assert_jabs "@value && @other", "$this.attr('value') && $this.attr('other')"
+    end
+
+    it "allows for comparison" do
+      assert_jabs "@value == @other", "$this.attr('value') == $this.attr('other')"
+    end
+
+    it "allows for strict comparison" do
+      assert_jabs "@value === @other", "$this.attr('value') === $this.attr('other')"
+    end
+  end
+
+  describe "@attribute setting" do
+    it "sets attributes" do
+      assert_jabs "@value = 4", "$this.attr('value', 4)"
+    end
+
+    it "sets attributes to other attributes" do
+      assert_jabs "@value = @other", "$this.attr('value', $this.attr('other'))"
+    end
+  end
+
+#   it "compiles jabs to js" do
+#     assert_jabs %{
+# :ready
+#   $input[default_value]
+#     var _default = this.attr('default_value')
+#     :blur
+#       if this.val() === ''
+#         this.val(_default)
+# 
+#     :focus
+#       if this.val() === _default
+#         this.val('')
+# 
+#     this.blur()      
+# },%{
+# jQuery(function() {
+#   (function() {
+#     var _default = this.attr('default_value');
+#     this.live("blur", function() {
+#       if(this.val() === '') {
+#         this.val(_default);
+#       }
+#     });
+#     this.live("focus", function() {
+#       if(this.val() === _default) {
+#         this.val('');
+#       }
+#     });
+#     this.blur();
+#   })(jQuery("input[default_value]"));
+# });
+# }
+#   end
+end