riot_js-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 7d683957b5d3a585f6e493b42f17f4908075264b
+  data.tar.gz: 8532cc7d6277124a95475144d6198b6774e30bfc
+SHA512:
+  metadata.gz: 771a137a6e2e9e16a327b1b12e9b65f30fbc0dff2bab1b4983188a6a54a1e6167f1817a54d83ab12b8189589866455a68595260f2ef1fa64a1a440aaa36991dd
+  data.tar.gz: a7b03afec4071dfee9105283308b82d706c6f670c10dd528405b4ae5fa74f755569752ac7d0dd08132f06a40cdd56cab40b20f6f033f7ee6748d749966d8f261

data/.gitignore

@@ -0,0 +1,12 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+/.idea
+/*.gem
+/.editorconfig

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in riot_js-rails.gemspec
+gemspec

data/README.md

@@ -0,0 +1,27 @@
+# RiotJs::Rails
+
+Muut Riot integration with Rails
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'riot_js-rails'
+```
+
+And then execute:
+
+    $ bundle
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/riot_js-rails/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,10 @@
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new do |t|
+  t.libs << 'test'
+end
+
+desc "Run tests"
+task :default => :test

data/lib/riot_js/rails.rb

@@ -0,0 +1,8 @@
+require 'riot_js/rails/version'
+require 'riot_js/rails/engine' if defined?(Rails)
+require 'riot_js/rails/railtie' if defined?(Rails)
+
+module RiotJs
+  module Rails
+  end
+end

data/lib/riot_js/rails/engine.rb

@@ -0,0 +1,8 @@
+require 'rails/engine'
+
+module RiotJs
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/riot_js/rails/helper.rb

@@ -0,0 +1,51 @@
+module RiotJs
+  module Rails
+    module Helper
+
+      def riot_component(*args, &block)
+        case args.count
+          when 2
+            custom_tag_riot_component(*args, &block)
+          when 3
+            html_tag_riot_component(*args, &block)
+          else
+            raise ArgumentError, 'wrong number of arguments (required 2 or 3)'
+        end
+      end
+
+      private
+
+      def custom_tag_riot_component(name, data, &block)
+        component_name, attributes = component_attributes(name, data)
+
+        component_tag(component_name, attributes, &block)
+      end
+
+      def html_tag_riot_component(tag, name, data, &block)
+        component_name, attributes = component_attributes(name, data)
+        attributes['riot-tag'] = component_name
+
+        component_tag(tag, attributes, &block)
+      end
+
+      def component_attributes(name, data)
+        component_name = name.to_s.gsub('_', '-')
+        attributes = {
+          id: "riot-#{component_name}-#{Random.rand(10000000)}",
+          class: 'riot-rails-component',
+          data: { opts: data.to_json }
+        }
+        return component_name, attributes
+      end
+
+      def component_tag(tag_name, attributes, &block)
+        if block_given?
+          content_tag(tag_name, attributes, &block)
+        else
+          content_tag(tag_name, attributes) {}
+        end
+      end
+
+    end
+  end
+end

data/lib/riot_js/rails/processors/compiler.rb

@@ -0,0 +1,38 @@
+require 'action_view'
+require 'execjs'
+require 'byebug'
+
+module RiotJs
+  module Rails
+    class Compiler
+      include ::ActionView::Helpers::JavaScriptHelper
+
+      JS_RUNTIME = ::ExecJS::ExternalRuntime.new(
+          name: 'Node.js (V8)',
+          command: ['nodejs', 'node'],
+          encoding: 'UTF-8',
+          runner_path: File.expand_path('../../../../../vendor/assets/javascripts/compiler/node_runner.js', __FILE__),
+      )
+
+      RIOT_COMPILER_PATH = File.expand_path('../../../../../vendor/assets/javascripts/compiler/compiler.js', __FILE__)
+
+      def self.instance
+        @@instance ||= new
+      end
+
+      def self.compile(tag_source)
+        instance.compile(tag_source)
+      end
+
+      def compile(tag_source)
+        compiler_source = <<-JS
+          var compiler = require("#{RIOT_COMPILER_PATH}");
+          return compiler.compile("#{escape_javascript(tag_source)}");
+        JS
+
+        JS_RUNTIME.exec(compiler_source)
+      end
+
+    end
+  end
+end

data/lib/riot_js/rails/processors/processor.rb

@@ -0,0 +1,34 @@
+require 'riot_js/rails/processors/compiler'
+
+module RiotJs
+  module Rails
+    class Processor
+      def self.instance
+        @instance ||= new
+      end
+
+      def self.call(input)
+        instance.call(input)
+      end
+
+      def call(input)
+        prepare(input)
+
+        data = compile_tag
+
+        @context.metadata.merge(data: data)
+      end
+
+      private
+
+      def prepare(input)
+        @context = input[:environment].context_class.new(input)
+        @data = input[:data]
+      end
+
+      def compile_tag
+        ::RiotJs::Rails::Compiler.compile(@data)
+      end
+    end
+  end
+end

data/lib/riot_js/rails/railtie.rb

@@ -0,0 +1,25 @@
+require 'rails/railtie'
+require 'riot_js/rails/processors/processor'
+require 'riot_js/rails/helper'
+
+module RiotJs
+  module Rails
+    class Railtie < ::Rails::Railtie
+      initializer :setup_sprockets do |app|
+        app.assets.register_engine '.tag', Processor, mime_type: 'application/javascript'
+
+        if defined?(::Haml)
+          require 'tilt/haml'
+          app.assets.register_engine '.haml', ::Tilt::HamlTemplate, mime_type: 'text/html'
+        end
+      end
+
+      initializer :add_helpers do |app|
+        helpers = %q{ include ::RiotJs::Rails::Helper }
+        ::ActionView::Base.module_eval(helpers)
+        ::Rails.application.assets.context_class.class_eval(helpers)
+      end
+
+    end
+  end
+end

data/lib/riot_js/rails/version.rb

@@ -0,0 +1,5 @@
+module RiotJs
+  module Rails
+    VERSION = "0.1.0"
+  end
+end

data/riot_js-rails.gemspec

@@ -0,0 +1,30 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'riot_js/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'riot_js-rails'
+  spec.version       = RiotJs::Rails::VERSION
+  spec.authors       = ['Bartosz Jaroszewski']
+  spec.email         = ['b.jarosze@gmail.com']
+
+  spec.summary       = %q{Muut Riot integration with Rails.}
+  spec.description   = %q{This gem provides integration of Muut Riot with Rails}
+  spec.homepage      = 'https://github.com/bjarosze/riot_js-rails'
+  spec.license       = 'MIT'
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = 'exe'
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ['lib']
+
+
+  spec.add_dependency 'rails', '~> 4'
+  spec.add_dependency 'execjs', '~> 2'
+
+  spec.add_development_dependency 'bundler', '~> 1.8'
+  spec.add_development_dependency 'rake', '~> 10.0'
+  spec.add_development_dependency 'minitest', '~> 5.1'
+  spec.add_development_dependency 'byebug', '~> 5.0'
+end

data/vendor/assets/javascripts/compiler/compiler.js

@@ -0,0 +1,16 @@
+var compilerPath = require('path').join(__dirname, './compiler_core.js')
+
+global.riot = require(process.env.RIOT || '../riot')
+global.riot.parsers = require('./parsers')
+
+// Evaluate the compiler shared functions in this context
+/*eslint-disable*/
+eval(require('fs').readFileSync(compilerPath, 'utf8'))
+/*eslint-enable*/
+
+module.exports = {
+  compile: compile,
+  html: compileHTML,
+  style: compileCSS,
+  js: compileJS
+}

data/vendor/assets/javascripts/compiler/compiler_core.js

@@ -0,0 +1,234 @@
+var BOOL_ATTR = ('allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,'+
+  'defaultchecked,defaultmuted,defaultselected,defer,disabled,draggable,enabled,formnovalidate,hidden,'+
+  'indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,'+
+  'pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,spellcheck,translate,truespeed,'+
+  'typemustmatch,visible').split(','),
+  // these cannot be auto-closed
+  VOID_TAGS = 'area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr'.split(','),
+  /*
+    Following attributes give error when parsed on browser with { exrp_values }
+
+    'd' describes the SVG <path>, Chrome gives error if the value is not valid format
+    https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+  */
+  PREFIX_ATTR = ['style', 'src', 'd'],
+
+  LINE_TAG = /^<([\w\-]+)>(.*)<\/\1>/gim,
+  QUOTE = /=({[^}]+})([\s\/\>]|$)/g,
+  SET_ATTR = /([\w\-]+)=(["'])([^\2]+?)\2/g,
+  EXPR = /{\s*([^}]+)\s*}/g,
+  // (tagname) (html) (javascript) endtag
+  CUSTOM_TAG = /^<([\w\-]+)\s?([^>]*)>([^\x00]*[\w\/}"']>$)?([^\x00]*?)^<\/\1>/gim,
+  SCRIPT = /<script(?:\s+type=['"]?([^>'"]+)['"]?)?>([^\x00]*?)<\/script>/gi,
+  STYLE = /<style(?:\s+([^>]+))?>([^\x00]*?)<\/style>/gi,
+  CSS_SELECTOR = /(^|\}|\{)\s*([^\{\}]+)\s*(?=\{)/g,
+  HTML_COMMENT = /<!--.*?-->/g,
+  CLOSED_TAG = /<([\w\-]+)([^>]*)\/\s*>/g,
+  BLOCK_COMMENT = /\/\*[\s\S]*?\*\//g,
+  LINE_COMMENT = /^\s*\/\/.*$/gm,
+  INPUT_NUMBER = /(<input\s[^>]*?)type=['"]number['"]/gm
+
+function mktag(name, html, css, attrs, js) {
+  return 'riot.tag(\'' +
+    name + '\', \'' +
+    html + '\'' +
+    (css ? ', \'' + css + '\'' : '') +
+    (attrs ? ', \'' + attrs.replace(/'/g, "\\'") + '\'' : '') +
+    ', function(opts) {' + js + '\n});'
+}
+
+function compileHTML(html, opts, type) {
+
+  if (!html) return ''
+
+  var brackets = riot.util.brackets,
+      b0 = brackets(0),
+      b1 = brackets(1)
+
+  // foo={ bar } --> foo="{ bar }"
+  html = html.replace(brackets(QUOTE), '="$1"$2')
+
+  // whitespace
+  html = opts.whitespace ? html.replace(/\r\n?|\n/g, '\\n') : html.replace(/\s+/g, ' ')
+
+  // strip comments
+  html = html.trim().replace(HTML_COMMENT, '')
+
+  // input type=numbr
+  html = html.replace(INPUT_NUMBER, '$1riot-type='+ b0 +'"number"'+ b1) // fake expression
+
+  // alter special attribute names
+  html = html.replace(SET_ATTR, function(full, name, _, expr) {
+    if (expr.indexOf(b0) >= 0) {
+      name = name.toLowerCase()
+
+      if (PREFIX_ATTR.indexOf(name) >= 0) name = 'riot-' + name
+
+      // IE8 looses boolean attr values: `checked={ expr }` --> `__checked={ expr }`
+      else if (BOOL_ATTR.indexOf(name) >= 0) name = '__' + name
+    }
+
+    return name + '="' + expr + '"'
+  })
+
+  // run expressions trough parser
+  if (opts.expr) {
+    html = html.replace(brackets(EXPR), function(_, expr) {
+      var ret = compileJS(expr, opts, type).trim().replace(/[\r\n]+/g, '').trim()
+      if (ret.slice(-1) == ';') ret = ret.slice(0, -1)
+      return b0 + ret + b1
+    })
+  }
+
+  // <foo/> -> <foo></foo>
+  html = html.replace(CLOSED_TAG, function(_, name, attr) {
+    var tag = '<' + name + (attr ? ' ' + attr.trim() : '') + '>'
+
+    // Do not self-close HTML5 void tags
+    if (VOID_TAGS.indexOf(name.toLowerCase()) == -1) tag += '</' + name + '>'
+    return tag
+  })
+
+  // escape single quotes
+  html = html.replace(/'/g, "\\'")
+
+  // \{ jotain \} --> \\{ jotain \\}
+  html = html.replace(brackets(/\\{|\\}/g), '\\$&')
+
+  // compact: no whitespace between tags
+  if (opts.compact) html = html.replace(/> </g, '><')
+
+  return html
+
+}
+
+
+function riotjs(js) {
+
+  // strip comments
+  js = js.replace(LINE_COMMENT, '').replace(BLOCK_COMMENT, '')
+
+  // ES6 method signatures
+  var lines = js.split('\n'),
+      es6Ident = ''
+
+  lines.forEach(function(line, i) {
+    var l = line.trim()
+
+    // method start
+    if (l[0] != '}' && ~l.indexOf('(')) {
+      var end = l.match(/[{}]$/),
+          m = end && line.match(/^(\s+)([$\w]+)\s*\(([$\w,\s]*)\)\s*\{/)
+
+      if (m && !/^(if|while|switch|for|catch|function)$/.test(m[2])) {
+        lines[i] = m[1] + 'this.' + m[2] + ' = function(' + m[3] + ') {'
+
+        // foo() { }
+        if (end[0] == '}') {
+          lines[i] += ' ' + l.slice(m[0].length - 1, -1) + '}.bind(this)'
+
+        } else {
+          es6Ident = m[1]
+        }
+      }
+
+    }
+
+    // method end
+    if (line.slice(0, es6Ident.length + 1) == es6Ident + '}') {
+      lines[i] = es6Ident + '}.bind(this);'
+      es6Ident = ''
+    }
+
+  })
+
+  return lines.join('\n')
+
+}
+
+function scopedCSS (tag, style, type) {
+  // 1. Remove CSS comments
+  // 2. Find selectors and separate them by conmma
+  // 3. keep special selectors as is
+  // 4. prepend tag and [riot-tag]
+  return style.replace(BLOCK_COMMENT, '').replace(CSS_SELECTOR, function (m, p1, p2) {
+    return p1 + ' ' + p2.split(/\s*,\s*/g).map(function(sel) {
+      var s = sel.trim()
+      var t = (/:scope/.test(s) ? '' : ' ') + s.replace(/:scope/, '')
+      return s[0] == '@' || s == 'from' || s == 'to' || /%$/.test(s) ? s :
+        tag + t + ', [riot-tag="' + tag + '"]' + t
+    }).join(',')
+  }).trim()
+}
+
+function compileJS(js, opts, type) {
+  if (!js) return ''
+  var parser = opts.parser || (type ? riot.parsers.js[type] : riotjs)
+  if (!parser) throw new Error('Parser not found "' + type + '"')
+  return parser(js.replace(/\r\n?/g, '\n'), opts)
+}
+
+function compileTemplate(lang, html) {
+  var parser = riot.parsers.html[lang]
+  if (!parser) throw new Error('Template parser not found "' + lang + '"')
+  return parser(html.replace(/\r\n?/g, '\n'))
+}
+
+function compileCSS(style, tag, type, scoped) {
+  if (type === 'scoped-css') scoped = 1
+  else if (riot.parsers.css[type]) style = riot.parsers.css[type](tag, style)
+  else if (type !== 'css') throw new Error('CSS parser not found: "' + type + '"')
+  if (scoped) style = scopedCSS(tag, style)
+  return style.replace(/\s+/g, ' ').replace(/\\/g, '\\\\').replace(/'/g, "\\'").trim()
+}
+
+function compile(src, opts) {
+
+  if (!opts) opts = {}
+  else {
+
+    if (opts.brackets) riot.settings.brackets = opts.brackets
+
+    if (opts.template) src = compileTemplate(opts.template, src)
+  }
+
+  src = src.replace(LINE_TAG, function(_, tagName, html) {
+    return mktag(tagName, compileHTML(html, opts), '', '', '')
+  })
+
+  return src.replace(CUSTOM_TAG, function(_, tagName, attrs, html, js) {
+    var style = '',
+        type = opts.type
+
+    if (html) {
+
+      // js wrapped inside <script> tag
+      if (!js.trim()) {
+        html = html.replace(SCRIPT, function(_, _type, script) {
+          if (_type) type = _type.replace('text/', '')
+          js = script
+          return ''
+        })
+      }
+
+      // styles in <style> tag
+      html = html.replace(STYLE, function(_, types, _style) {
+        var scoped = /(?:^|\s+)scoped(\s|=|$)/i.test(types),
+            type = types && types.match(/(?:^|\s+)type\s*=\s*['"]?([^'"\s]+)['"]?/i)
+        if (type) type = type[1].replace('text/', '')
+        style += (style ? ' ' : '') + compileCSS(_style.trim(), tagName, type || 'css', scoped)
+        return ''
+      })
+    }
+
+    return mktag(
+      tagName,
+      compileHTML(html, opts, type),
+      style,
+      compileHTML(attrs, ''),
+      compileJS(js, opts, type)
+    )
+
+  })
+
+}