Introduce babel support

README.jp.md

@@ -871,6 +871,7 @@ p: markdown: Tag with **inline** markdown!
 | less: | less | コンパイル時 | less コードを埋め込み、style タグで囲む |
 | styl: | styl | コンパイル時 | stylus コードを埋め込み、 style タグで囲む |
 | coffee: | coffee-script | コンパイル時 | CoffeeScript をコンパイルし、 script タグで囲む |
+| babel: | babel-transpiler | コンパイル時 | ES6 をトランスパイルし、 script タグで囲む。**Tilt >= 2.0.2が必要** |
 | asciidoc: | asciidoctor | コンパイル時 + 展開 | AsciiDoc をコンパイルし、テキスト中の # \{variables} を展開 |
 | markdown: | redcarpet/rdiscount/kramdown | コンパイル時 + 展開 | Markdown をコンパイルし、テキスト中の # \{variables} を展開 |
 | textile: | redcloth | コンパイル時 + 展開 | textile をコンパイルし、テキスト中の # \{variables} を展開 |

README.md

@@ -871,6 +871,7 @@ Supported engines:
 | less: | less | Compile time | Embed less css code and wrap in style tag |
 | styl: | styl | Compile time | Embed stylus css code and wrap in style tag |
 | coffee: | coffee-script | Compile time | Compile coffee script code and wrap in script tag |
+| babel: | babel-transpiler | Compile time | Transpile ES6 code and wrap in script tag. **Requires Tilt >= 2.0.2** |
 | asciidoc: | asciidoctor | Compile time + Interpolation | Compile AsciiDoc code and interpolate #\{variables} in text |
 | markdown: | redcarpet/rdiscount/kramdown | Compile time + Interpolation | Compile markdown code and interpolate #\{variables} in text |
 | textile: | redcloth | Compile time + Interpolation | Compile textile code and interpolate #\{variables} in text |

lib/slim/embedded.rb

@@ -132,7 +132,16 @@ def collect_newlines(body)
     # Basic tilt engine
     class TiltEngine < Engine
       def on_slim_embedded(engine, body)
-        tilt_engine = Tilt[engine] || raise(Temple::FilterError, "Tilt engine #{engine} is not available.")
+        begin
+          tilt_engine = Tilt[engine]
+        rescue
+          if engine == :balel
+            raise(Temple::FilterError, "babel engine is available for Tilt version 2.0.2 or above.")
+          else
+            raise(Temple::FilterError, "Tilt engine #{engine} is not available.")
+          end
+        end
+
         tilt_options = options[engine.to_sym] || {}
         [:multi, tilt_render(tilt_engine, tilt_options, collect_text(body)), collect_newlines(body)]
       end
@@ -253,6 +262,7 @@ def on_slim_embedded(engine, body)
     # These engines are executed at compile time
     register :coffee,     JavaScriptEngine, engine: TiltEngine
     register :opal,       JavaScriptEngine, engine: TiltEngine
+    register :babel,      JavaScriptEngine, engine: TiltEngine
     register :less,       TagEngine, tag: :style,  attributes: { type: 'text/css' },         engine: TiltEngine
     register :styl,       TagEngine, tag: :style,  attributes: { type: 'text/css' },         engine: TiltEngine
     register :sass,       TagEngine, :pretty, tag: :style, attributes: { type: 'text/css' }, engine: SassEngine

test/core/test_embedded_engines.rb

@@ -114,7 +114,7 @@ def test_render_with_wiki
   def test_render_with_javascript
     # Keep the trailing space behind "javascript:   "!
     source = %q{
-javascript:   
+javascript:
   $(function() {});
 
 
@@ -139,6 +139,24 @@ def test_render_with_opal
     assert_match '$puts("hello from opal")', render(source)
   end
 
+  def test_render_with_babel
+    begin
+      # HACK: babel-transpiler registers itself in Tilt
+      require 'babel-transpiler'
+    rescue LoadError
+      return
+    end
+
+    source = %q{
+babel:
+  const str = 'World'
+  alert(`Hello ${str}`)
+p Hi
+}
+    assert_html %{<script>'use strict';\n\nvar str = 'World';\nalert('Hello ' + str);</script><p>Hi</p>}, source
+  end
+
+
   def test_render_with_javascript_with_tabs
     source = "javascript:\n\t$(function() {});\n\talert('hello')\np Hi"
     assert_html "<script>$(function() {});\nalert('hello')</script><p>Hi</p>", source
@@ -148,7 +166,7 @@ def test_render_with_javascript_including_variable
     # Keep the trailing space behind "javascript:   "!
     source = %q{
 - func = "alert('hello');"
-javascript:   
+javascript:
   $(function() { #{func} });
 }
     assert_html %q|<script>$(function() { alert(&#39;hello&#39;); });</script>|, source