rough in support for vue

Author: rubys

.gitignore

@@ -5,3 +5,4 @@ demo/assets
 *.gemspec
 Gemfile.lock
 demo/calendar/public/assets
+node_modules

Rakefile

@@ -69,6 +69,20 @@ task :gemspec do
   File.open(file, "w") {|f| f << spec.to_ruby }
 end
 
+namespace :vendor do
+  task :vue do
+    # [sudo] npm install -g browserify
+    # [sudo] npm install -g uglify-es
+    sh 'npm install'
+    sh 'curl -s -S https://vuejs.org/js/vue.min.js > ' +
+      'lib/wunderbar/vendor/vue.min.js'
+    sh 'browserify -r vue -r ./data/vue-render.js:vue-server | uglifyjs >' +
+      'lib/wunderbar/vendor/vue-server.min.js'
+    sh %{echo "Vue=require('vue');VueServer=require('vue-server');" >> \
+      lib/wunderbar/vendor/vue-server.min.js}
+  end
+end
+
 # If you don't want to generate the .gemspec file, just remove this line. Reasons
 # why you might want to generate a gemspec:
 #  - using bundler with a git source

data/vue-render.js

@@ -0,0 +1,18 @@
+const Vue = require('vue');
+
+module.exports = {
+  renderToString: function(app) {
+    const renderer = require('vue-server-renderer').createRenderer();
+
+    renderer.renderToString(app, (err, html) => {
+      if (err) {
+        console.log('<pre>' + err.stack.replace('&', '&amp;').
+          replace('<', '&lt;').replace('>', '&gt;') + '</pre>')
+      } else {
+        console.log(html) 
+      } 
+    })
+  }
+}
+
+

lib/wunderbar/react.rb

@@ -16,7 +16,7 @@ def self.server(common)
     "ReactDOMServer.renderToString(#{common})"
   end
 
-  def self.client(common, element)
+  def self.client(common, element, target)
     "ReactDOM.render(#{common}, #{element})"
   end
 
@@ -29,3 +29,17 @@ def self.eval(scripts, server)
       "</pre>"
   end
 end
+
+# Monkeypatch to address https://github.com/sstephenson/execjs/pull/180
+require 'execjs'
+class ExecJS::ExternalRuntime::Context
+  alias_method :w_write_to_tempfile, :write_to_tempfile
+  def write_to_tempfile(*args)
+    tmpfile = w_write_to_tempfile(*args).path.untaint
+    tmpfile = Struct.new(:path, :to_str).new(tmpfile, tmpfile)
+    def tmpfile.unlink
+      File.unlink path
+    end
+    tmpfile
+  end
+end

lib/wunderbar/render.rb

@@ -63,10 +63,10 @@ def render(container, &block)
     end
 
     # build client and server scripts
-    common = Ruby2JS.convert(block, 
-      Wunderbar::Render::RUBY2JS_OPTIONS.merge(scope: @_scope))
+    options = Wunderbar::Render::RUBY2JS_OPTIONS.merge(scope: @_scope)
+    common = Ruby2JS.convert(block, options)
     server = Wunderbar::Render.server(common)
-    client = Wunderbar::Render.client(common, element)
+    client = Wunderbar::Render.client(common, element, target)
 
     # extract content of scripts
     scripts.map! do |script|
@@ -116,6 +116,7 @@ def render(container, &block)
     # concatenate and execute scripts on server
     scripts.unshift *setup.uniq
     html = Wunderbar::Render.eval(scripts, server)
+    html.untaint
 
     # insert results into target
     nodes = builder._ { html }
@@ -177,17 +178,3 @@ def sourcemap_etag
   sourcemap[:sources].map! {|source| source.sub base, ''}
   JSON.pretty_generate sourcemap
 end
-
-# Monkeypatch to address https://github.com/sstephenson/execjs/pull/180
-require 'execjs'
-class ExecJS::ExternalRuntime::Context
-  alias_method :w_write_to_tempfile, :write_to_tempfile
-  def write_to_tempfile(*args)
-    tmpfile = w_write_to_tempfile(*args).path.untaint
-    tmpfile = Struct.new(:path, :to_str).new(tmpfile, tmpfile)
-    def tmpfile.unlink
-      File.unlink path
-    end
-    tmpfile
-  end
-end

lib/wunderbar/vendor/vue-server.min.js

@@ -0,0 +1,31 @@
+require 'wunderbar/render'
+require 'ruby2js/filter/vue'
+
+vue = File.expand_path('../vendor/vue.min.js', __FILE__)
+Wunderbar::Asset.script name: 'vue.min.js', file: vue, render: true,
+  server: File.expand_path('../vendor/vue-server.min.js', __FILE__)
+
+class Wunderbar::Render
+  RUBY2JS_OPTIONS = {vue_h: '$h'}
+
+  def self.server(common)
+    "VueServer.renderToString(new Vue({render: function($h) {return #{common}}}))"
+  end
+
+  def self.client(common, element, target)
+    wrap = "$h(#{target.name.inspect}, " +
+      "{attrs: {#{target.attrs.map {|name, value|
+      "#{name}: #{value.inspect}"}.join(' ')}}}, [#{common}])"
+    "new Vue({el: #{element}, render: function($h) {return #{wrap}}})"
+  end
+
+  def self.eval(scripts, server)
+    output, status = Open3.capture3 'nodejs',
+      stdin_data: scripts.compact.join(";\n") + ";\n" + server
+    output.untaint
+  rescue => e
+    Wunderbar.error e
+    "<pre>" + e.message.gsub('&', '&amp;').gsub('<', '&lt;').gsub('>', '&gt;') +
+      "</pre>"
+  end
+end

lib/wunderbar/vendor/vue.min.js

@@ -0,0 +1,16 @@
+{
+  "package": "wunderbar-vendor",
+  "version": "0.0.0",
+  "license": "MIT",
+
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rubys/wunderbar"
+  },
+
+  "devDependencies": {
+    "vue": ">0",
+    "vue-server-renderer": ">0"
+  }
+}
+