vue_rails 0.1.1

data/Rakefile

@@ -0,0 +1,10 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+end
+
+task :default => :test

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "vue_rails"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/generators/vue/install_generator.rb

@@ -0,0 +1,31 @@
+require 'rails/generators'
+
+module Vue
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      desc "add vue_ujs to javascripts/packs"
+      source_root File.expand_path('../../../../', __FILE__)
+
+      def add_initializer
+        javascript_packs_dir = ::Webpacker.config.source_entry_path
+        javascript_dir = javascript_packs_dir.parent
+        template "vue_ujs/vue_ujs.js", "#{javascript_dir}/rails_vue_ujs.js"
+        create_file "#{javascript_packs_dir}/vue_server_render.js"
+
+        setup_js = <<-JS
+import RailsVueUJS from '../rails_vue_ujs';
+var componentRequireContext = require.context("vue_components", true);
+RailsVueUJS.initialComponentsContext(componentRequireContext);
+self.RailsVueUJS = RailsVueUJS;
+        JS
+        append_file "#{javascript_packs_dir}/vue_server_render.js", setup_js
+        append_file "#{javascript_packs_dir}/application.js", setup_js
+        empty_directory "#{javascript_dir}/vue_components"
+        remove_file "#{javascript_dir}/app.vue"
+        remove_file "#{javascript_packs_dir}/hello_vue.js"
+        template "vue_ujs/hello.vue", "#{javascript_dir}/vue_components/hello.vue"
+        `yarn add vue-server-renderer`
+      end
+    end
+  end
+end

data/lib/vue_rails.rb

@@ -0,0 +1,8 @@
+require "vue_rails/version"
+require "vue_rails/renderer"
+require "vue_rails/engine"
+
+module VueRails
+  class Error < StandardError; end
+  # Your code goes here...
+end

data/lib/vue_rails/asset_finder.rb

@@ -0,0 +1,99 @@
+require 'open-uri'
+
+module VueRails
+  class WebpackerAssetFinder
+    begin
+      MAJOR, MINOR, PATCH, _ = Bundler.locked_gems.specs.find { |gem_spec| gem_spec.name == 'webpacker' }.version.segments
+    rescue
+      MAJOR, MINOR, PATCH, _ = [0,0,0]
+    end
+
+    # This pattern matches the code that initializes the dev-server client.
+    CLIENT_REQUIRE = %r{__webpack_require__\(.*webpack-dev-server\/client\/index\.js.*\n}
+
+    def self.compatible?
+      !!defined?(Webpacker)
+    end
+
+    if MAJOR < 3
+      def find_path(logical_path)
+        asset_path = manifest.lookup(logical_path).to_s
+        asset_path.start_with?('http') ? asset_path : file_path(logical_path).to_s
+      end
+
+      def find_asset(logical_path)
+        # raises if not found
+        asset_path = manifest.lookup(logical_path).to_s
+        if asset_path.start_with?('http')
+          # Get a file from the webpack-dev-server
+          dev_server_asset = open(asset_path).read
+          # Remove `webpack-dev-server/client/index.js` code which causes ExecJS to 💥
+          dev_server_asset.sub!(CLIENT_REQUIRE, '//\0')
+          dev_server_asset
+        else
+          # Read the already-compiled pack:
+          full_path = file_path(logical_path).to_s
+          File.read(full_path)
+        end
+      end
+    else
+      def find_path(logical_path)
+        asset_path = Webpacker.manifest.lookup(logical_path).to_s
+        Webpacker.dev_server.running? ? asset_path : file_path(logical_path)
+      end
+
+      def find_asset(logical_path)
+        asset_path = Webpacker.manifest.lookup(logical_path).to_s
+        if Webpacker.dev_server.running?
+          ds = Webpacker.dev_server
+          # Remove the protocol and host from the asset path. Sometimes webpacker includes this, sometimes it does not
+          asset_path.slice!("#{ds.protocol}://#{ds.host_with_port}")
+          dev_server_asset = open("#{ds.protocol}://#{ds.host_with_port}#{asset_path}").read
+          dev_server_asset.sub!(CLIENT_REQUIRE, '//\0')
+          dev_server_asset
+        else
+          File.read(file_path(logical_path))
+        end
+      end
+    end
+
+    if MAJOR < 3
+      def manifest
+        Webpacker::Manifest
+      end
+    else
+      def manifest
+        Webpacker.manifest
+      end
+    end
+
+    if MAJOR < 3
+      def config
+        Webpacker::Configuration
+      end
+    else
+      def config
+        Webpacker.config
+      end
+    end
+
+    if (MAJOR == 1 && MINOR >= 2) || MAJOR == 2
+      def file_path path
+        manifest.lookup_path(path)
+      end
+    elsif MAJOR == 3
+      def file_path path
+        ::Rails.root.join('public', manifest.lookup(path)[1..-1])
+      end
+    else # 1.0 and 1.1 support
+      def file_path path
+        File.join(output_path, manifest.lookup(path).split('/')[2..-1])
+      end
+    end
+
+    def output_path
+      # Webpack1 /:output/:entry, Webpack3 /public/:output
+      config.respond_to?(:output_path) ? config.output_path : 'public'
+    end
+  end
+end

data/lib/vue_rails/engine.rb

@@ -0,0 +1,11 @@
+require "vue_rails/view_helper"
+
+module VueRails
+  class Engine < ::Rails::Engine
+    isolate_namespace VueRails
+
+    initializer "vue_rails.engine" do
+      ActionView::Base.send :include, VueRails::ViewHelper
+    end
+  end
+end

data/lib/vue_rails/renderer.rb

@@ -0,0 +1,56 @@
+require 'vue_rails/asset_finder'
+
+module VueRails
+  class Renderer
+    GLOBAL_WRAPPER = <<-JS
+        var global = global || this;
+        var self = self || this;
+    JS
+
+    CONSOLE_POLYFILL = <<-JS
+      var console = { history: [] };
+      ['error', 'log', 'info', 'warn'].forEach(function (fn) {
+        console[fn] = function () {
+          console.history.push({level: fn, arguments: Array.prototype.slice.call(arguments)});
+        };
+      });
+    JS
+
+    cattr_accessor :context
+    attr_accessor :component, :props, :router_push_to, :state
+
+    def initialize component, props, router_push_to=nil, state={}
+      self.component = component
+      self.props = props
+      self.router_push_to = router_push_to
+      self.state = state
+    end
+
+    def self.server_render *args
+      new(*args).render
+    end
+
+    def render
+      if Rails.env.production?
+        self.context ||= (
+        js_code = VueRails::WebpackerAssetFinder.new.find_asset("vue_server_render.js")
+        ExecJS.compile(GLOBAL_WRAPPER + CONSOLE_POLYFILL + js_code)
+        )
+      else
+        self.context = (
+        js_code = VueRails::WebpackerAssetFinder.new.find_asset("vue_server_render.js")
+        ExecJS.compile(GLOBAL_WRAPPER + CONSOLE_POLYFILL + js_code)
+        )
+      end
+
+      self.context.eval("RailsVueUJS.serverRender('#{component}', #{props}, '#{router_push_to}', #{state})")
+    end
+
+    private
+
+    def cache_key
+      path = VueRails::WebpackerAssetFinder.new.find_path("vue_server_render.js")
+      Digest::MD5.hexdigest("#{component}_#{JSON.parse(props).delete_if {|k, _| k.to_s == "csrf_token"}}_#{router_push_to}_#{path}_#{state}")
+    end
+  end
+end

data/lib/vue_rails/version.rb

@@ -0,0 +1,3 @@
+module VueRails
+  VERSION = "0.1.1"
+end

data/lib/vue_rails/view_helper.rb

@@ -0,0 +1,14 @@
+module VueRails
+  module ViewHelper
+    def vue_component(component_name, data={}, options={})
+      data[:csrf_token] = form_authenticity_token
+      options.merge!(name: component_name, __is_vue_component__: true)
+      prerender = options.delete(:prerender)
+      state = (options.delete(:state) || {}).to_json
+      router_push_to = prerender && prerender.is_a?(String) ? prerender : nil
+      content = prerender ?
+                    VueRails::Renderer.server_render(component_name, data.to_json, router_push_to, state)&.html_safe : nil
+      content_tag(:div, content, options.merge(data: {vue_data: data.to_json, vue_state: state}))
+    end
+  end
+end

data/vue_on_rails.gemspec

@@ -0,0 +1,30 @@
+
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "vue_rails/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "vue_rails"
+  spec.version       = VueRails::VERSION
+  spec.authors       = ["纪亚荣"]
+  spec.email         = ["583255925@qq.com"]
+
+  spec.summary       = 'Vue integration for Ruby on Rails'
+  spec.description   = 'initialize Vue Components in Rails Views and server render'
+  spec.homepage      = "https://github.com/jiyarong/vue_rails"
+  spec.license       = "MIT"
+
+  spec.files         = Dir.chdir(File.expand_path('..', __FILE__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib", "vue_ujs"]
+
+  spec.add_development_dependency 'bundler', '>= 1.2.2'
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "minitest", "~> 5.0"
+  spec.add_development_dependency 'rails', '>= 5.1'
+  spec.add_development_dependency 'webpacker'
+  spec.add_dependency 'execjs'
+end

data/vue_ujs/hello.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data: function () {
+      return {
+        message: "Hello Vue!"
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  p {
+    font-size: 2em;
+    text-align: center;
+  }
+</style>

data/vue_ujs/vue_ujs.js

@@ -0,0 +1,147 @@
+import Vue from 'vue/dist/vue.esm.js'
+var renderVueComponentToString = require("vue-server-renderer/basic.js");
+
+self.Vue = Vue;
+
+var RailsVueUJS = {
+  initialComponentsContext: function (context) {
+    self.RailsVueUJS.getConstructorByName = function (componentName) {
+      return context(`./${componentName}`).default;
+    }
+  },
+
+  handleVueDestructionOn: function(turbolinksEvent, vue) {
+    document.addEventListener(turbolinksEvent, function teardown() {
+      vue.$destroy();
+      document.removeEventListener(turbolinksEvent, teardown);
+    });
+  },
+
+  TurbolinksAdapter: function(Vue) {
+    Vue.mixin({
+      beforeMount: function() {
+        // If this is the root component, we want to cache the original element contents to replace later
+        // We don't care about sub-components, just the root
+        if (this == this.$root && this.$el) {
+          var destroyEvent = this.$options.turbolinksDestroyEvent || 'turbolinks:visit';
+          RailsVueUJS.handleVueDestructionOn(destroyEvent, this);
+          this.$originalEl = this.$el.outerHTML;
+        }
+      },
+
+      destroyed: function() {
+        // We only need to revert the html for the root component
+        if (this == this.$root && this.$el) {
+          this.$el.outerHTML = this.$originalEl;
+        }
+      }
+    })
+  },
+
+  use: function (...ms) {
+    ms.forEach((m) => {
+      self.Vue.use(m);
+    })
+  },
+
+  initializeVuexStore: function (store) {
+    RailsVueUJS.store = store
+  },
+
+  serverRender: function (componentName, props={}, router_to=null, initialState={}) {
+    let component = self.RailsVueUJS.getConstructorByName(componentName);
+    let componentInitialName = componentName.split("/").pop();
+    let componentsArgs = {};
+    componentsArgs[componentInitialName] = component;
+    let initializeObject = {
+      data: {data: props},
+      template: `<${componentInitialName} :outside="data" :env_ssr="true" />`,
+      components: componentsArgs
+    };
+
+    if (RailsVueUJS.store !== undefined) {
+      let currentState = RailsVueUJS.store.state;
+      Object.keys(initialState).forEach((k) => {
+        currentState[k] = initialState[k]
+      });
+
+      RailsVueUJS.store.replaceState(currentState);
+
+      initializeObject.store = RailsVueUJS.store
+    }
+
+    let v = new self.Vue(initializeObject);
+
+    if (component.router && router_to !== null)
+      component.router.push(router_to);
+
+    let str = "";
+
+    renderVueComponentToString(v, (err, res) => {
+      str = res
+    });
+
+    (function (history) {
+      if (history && history.length > 0) {
+        str += '\n<scr'+'ipt>';
+        history.forEach(function (msg) {
+          str += '\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
+        });
+        str += '\n</scr'+'ipt>';
+      }
+    })(console.history);
+
+    return str
+  },
+
+  detectComponents: function () {
+    document.querySelectorAll("[__is_vue_component__=true]").forEach((d) => {
+      let componentName = d.getAttribute('name');
+      let vueComponent = self.RailsVueUJS.getConstructorByName(componentName);
+      let componentInitialName = componentName.split("/").pop();
+      let componentsArgs = {};
+      componentsArgs[componentInitialName] = vueComponent;
+
+      let initializeObject = {
+        el: d,
+        data: {data: JSON.parse(d.dataset.vueData)},
+        template: `<${componentInitialName} :outside="data" :env_ssr="false" />`,
+        components: componentsArgs
+      };
+
+      if (RailsVueUJS.store !== undefined) {
+        let currentState = RailsVueUJS.store.state;
+        let replaceState = JSON.parse(d.dataset.vueState);
+        Object.keys(replaceState).forEach((k) => {
+          currentState[k] = replaceState[k]
+        });
+
+        RailsVueUJS.store.replaceState(currentState);
+        initializeObject.store = RailsVueUJS.store
+      }
+
+      new Vue(initializeObject)
+    })
+  },
+
+  detectEvents: function () {
+    self.addEventListener('load', function () {
+      let TurbolinksDetected = 'Turbolinks' in window && Turbolinks.supported;
+      if (TurbolinksDetected) {
+        RailsVueUJS.use(RailsVueUJS.TurbolinksAdapter);
+
+        self.addEventListener('turbolinks:load', function () {
+          RailsVueUJS.detectComponents();
+        })
+      }
+      RailsVueUJS.detectComponents();
+    });
+  }
+};
+
+if (typeof window !== "undefined") {
+  RailsVueUJS.detectEvents();
+}
+
+self.RailsVueUJS = RailsVueUJS;
+export default RailsVueUJS;