vueport 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 45dc87f34b0a0b04c7de4f4754b968397e6a3cfa
+  data.tar.gz: 7b1e46d1c085bf4679c7db3c0c4fe7751d0b6bc8
+SHA512:
+  metadata.gz: fdd177551b9f4b464ce3ac8076e8187fb9bf8a6494698f3b639f987cec6f2c6cc99af1930f6bb39c9063cfdda40300099cc4059a34e3c45a6ad0c4d488cea1af
+  data.tar.gz: 1463e24bf2e439afb5aab46a9ea47f450f4ef760e5ae04f078175f71ff973eef9f757fa397c4a86b95498f720183ea8828dd900806792d4d97b4195e503cb96f

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.rubocop.yml

@@ -0,0 +1,7 @@
+inherit_from: 'https://raw.githubusercontent.com/samtgarson/my-config/master/.rubucop.yml'
+
+AllCops:
+  TargetRubyVersion: 2.3
+
+Rails/OutputSafety:
+  Enabled: false

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.3.0
+before_install: gem install bundler -v 1.12.5

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at samtgarson@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in vueport.gemspec
+gemspec
+
+group :test do
+  gem 'pry-byebug'
+  gem 'pry-rails'
+end

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Sam Garson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,160 @@
+# Vueport
+>Single file components and SSR for Rails with Vue JS and Webpack
+
+[![CircleCI](https://img.shields.io/circleci/project/github/samtgarson/vueport.svg)](https://circleci.com/gh/samtgarson/vueport) [![Gem Version](https://img.shields.io/gem/v/vueport.svg)](https://rubygems.org/gems/vueport) [![Gem Downloads](https://img.shields.io/gem/dt/vueport.svg)](https://rubygems.org/gems/vueport)
+
+Vueport provides your Rails app with a modern, componentized approach to UI development by using Webpack and Vue.js to enable single file, reactive components rendered on the server and the client and seamless integration with your Rails views.
+
+Take a look at the Vue.js [documentation on single file components](https://vuejs.org/guide/single-file-components.html) for more information on that side of things.
+
+Vueport piggybacks onto the [WebpackRails gem](https://github.com/mipearson/webpack-rails) to get Webpack setup with Rails, so check that out for more information.
+
+## Example Rails App
+
+[Here](https://github.com/samtgarson/vueport-example).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'vueport'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install vueport
+
+Then just run 
+
+```shell
+rails generate vueport:install
+```
+
+to bootstrap everything you need to get started (this will install WebpackRails and also everything Vueport needs on top).
+
+To run your app, execute
+
+```shell
+bundle exec foreman start -f Procfile.dev
+```
+
+to boot the Webpack Dev server and your Rails app!
+
+## Production Deployment
+
+Ensure to run `rails vueport:compile` as part of your deployment process to production. This compiles the production version of your client side bundle, as well as compiling the server side bundle for our Node JS app to use.
+
+In production we send HTTP requests to a basic NodeJS server to render our content. To run the Rails app and the Node server concurrently, use `Procfile`.
+
+## Usage
+
+### View Helper
+
+Wrap your application in the `vueport` helper, to render out your components. E.g. in your `application.html.erb`:
+
+```erb
+<body>
+    <%= vueport do %>
+        <%= render partial: 'shared/nav' %>
+        <%= yield %>
+    <% end %>
+</body>
+```
+
+It can also accept a single argument. E.g.:
+
+```erb
+<body>
+    <%= vueport yield %>
+</body>
+```
+
+### Asset Setup
+
+Add the Webpack Rails helpers to your layout to include your Javascript and CSS (see the [WebpackRails readme](https://github.com/mipearson/webpack-rails) for more information).
+
+**Ensure you place the JS entrypoint after the Vueport helper!**
+
+E.g.:
+
+```erb
+<head>
+    <%= stylesheet_link_tag *webpack_asset_paths('application', extension:  'css') %>
+</head>
+<body>
+    <%= vueport do %>
+        <%= render partial: 'shared/nav' %>
+        <%= yield %>
+    <% end %>
+
+    <%= javascript_include_tag *webpack_asset_paths("application", extension: 'js') %>
+</body>
+```
+
+### Default config
+
+Out of the box, Vueport expects your components to live in _app/components_, and compiles assets to _public/webpack_. To change these, you'll need to change both the Webpack config (in _config/webpack.config.js_ and _config/webpack.server.js_) and the Vue gem application config. To do this, in an initializer do:
+
+```ruby
+Vueport.configure do |config|
+    config[:server_port] = 3001
+end
+```
+
+_Check out the WebpackRails gem for information on its configuration._
+
+## How does it work?
+
+To see how WebpackRails works, take a look at [this section of the readme](https://github.com/mipearson/webpack-rails#how-it-works).
+
+Vueport extends the functionality of WebpackRails by adding a few extra features:
+
+- Webpack setup to read and compile Vue components
+- Webpack setup to enable HMR (Hot Module Reloading) for an A+ development experience
+- Server Side rendering in production.
+
+### Server Side Rendering (SSR)
+
+To enable Server Side rendering, I created a simple NodeJS app which uses the [Vue Server Renderer](https://www.npmjs.com/package/vue-server-renderer) to render out the contents of the page on each request. To enable Client Side rehydration, we also attach the original view contents in a template for the Client Side Vue instance to pick up.
+
+SSR is only enabled in production.
+
+## Why Vue.js?
+
+My experience of working with many modern UI libraries, and particulary with integrating them with Rails apps (especially React and Vue JS), has lead me to the conclusion that Vue JS seems to be a more explcit and 'batteries included' library when building compnents for Rails. 
+
+I use React on a regular basis for SPAs and love its functional philosophy, but for writing components to fit into a Rails frontend, Vue seems to provide me with the least complexity, and seems to be easiest for Ruby developers to reason about.
+
+For a Vue.js and React [collaborative](https://github.com/vuejs/vuejs.org/issues/364) comparison, [check this out](https://vuejs.org/guide/comparison.html).
+
+## To Do
+
+- [x] Handle SSR
+- [ ] Make webpack config more like the config from the [Vue CLI template](https://github.com/vuejs-templates/webpack/tree/master/template/build)
+- [ ] Optimize SSR interaction with NodeJS
+- [ ] JS Component test setup
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/samtgarson/vueport. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Thanks
+
+- Many thanks to [Evan You](https://github.com/yyx990803) and the VueJS for sustaining such a vibrant and supporting community around Vue JS
+- Many thanks also to [mipearson](https://github.com/mipearson) for his WebpackRails gem which this gem completely cannibalizes
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,6 @@
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "vueport"
+
+# 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

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/example/Procfile

@@ -0,0 +1,2 @@
+rails: bundle exec rails server
+webpack: npm run start

data/example/Procfile.dev

@@ -0,0 +1,2 @@
+rails: bundle exec rails server
+webpack: npm run dev-server

data/example/application.js

@@ -0,0 +1,5 @@
+import 'babel-polyfill'
+import setup from './setup'
+
+window.vm = setup('#vueport-template')
+vm.$mount('#vueport-wrapper')

data/example/babelrc

@@ -0,0 +1,3 @@
+{
+  presets: ['es2015', 'stage-0']
+}

data/example/index.js

@@ -0,0 +1,35 @@
+const app = require('express')()
+const fs = require('fs');
+const path = require('path');
+const bodyParser = require('body-parser')
+const vueServerRenderer = require('vue-server-renderer');
+const morgan = require('morgan')
+
+const filePath = path.join(__dirname, './public/webpack/bundle.server.js')
+const code = fs.readFileSync(filePath, 'utf8');
+const bundleRenderer = vueServerRenderer.createBundleRenderer(code);
+
+const PORT = process.env['PORT'] || 5000
+
+app.use(bodyParser.text())
+app.use(morgan('tiny'))
+
+const render = html => {
+  return p = new Promise((resolve, reject) => {
+    bundleRenderer.renderToString({body: html}, (err, html) => {
+      if (err) return reject(err)
+      else return resolve(html)
+    })
+  })
+}
+
+app.post('/render', (req, res) => {
+  render(req.body)
+    .catch(err => {
+      console.error(err)
+      res.status(500).send(JSON.stringify(err))
+    })
+    .then(html => res.send(html))
+})
+
+app.listen(PORT, () => console.log('listening on', PORT))

data/example/server.js

@@ -0,0 +1,10 @@
+import 'babel-polyfill'
+import Vue from 'vue'
+import setup from './setup';
+
+export default function(context) {
+  const app = setup(context.body)
+  return new Promise((resolve, reject) => {
+    resolve(app);
+  });
+};

data/example/setup.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+// Import your components here, then include it in your Vue application below.
+// (We've added /app to our webpack resolves for convenience)
+
+// import MyComponent from 'components/my-component'
+
+export default function (template) {
+  return new Vue({
+    template: template,
+    components: {
+      //MyComponent
+    }
+  })
+}

data/example/webpack.server.js

@@ -0,0 +1,59 @@
+// Example webpack configuration with asset fingerprinting in production.
+'use strict';
+
+var path = require('path');
+var webpack = require('webpack');
+
+var config = {
+  target: 'node', // !different
+  entry: './webpack/server.js',
+  output: {
+    libraryTarget: 'commonjs2', // !different
+    path: path.join(__dirname, '..', 'public', 'webpack'),
+    publicPath: '/webpack/',
+    filename: 'bundle.server.js',
+  },
+  resolve: {
+    root: path.join(__dirname, '..', 'webpack'),
+    extensions: ['', '.js', '.vue'],
+    fallback: [path.join(__dirname, '../node_modules'), path.join(__dirname, '../app/')]
+  },
+
+  plugins: [
+    new webpack.NoErrorsPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: { warnings: false },
+      sourceMap: false
+    }),
+    new webpack.DefinePlugin({
+      'process.env': { NODE_ENV: JSON.stringify('production') }
+    }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurenceOrderPlugin()
+  ],
+
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        loaders: ['babel'],
+        test: /\.js$/,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(sc|sa|c)ss$/,
+        loaders: ['style', 'css', 'sass']
+      }
+    ]
+  }
+};
+
+
+module.exports = config;

data/lib/generators/vueport/install_generator.rb

@@ -0,0 +1,166 @@
+module Vueport
+  class InstallGenerator < ::Rails::Generators::Base
+    source_root File.expand_path('../../../../example', __FILE__)
+    desc 'Install extras for using Vue with WebpackRails'
+
+    def add_webpack_rails
+      gem 'webpack-rails'
+    end
+
+    def bundle_and_install_webpack
+      run 'gem install webpack-rails'
+      generate 'webpack_rails:install'
+    end
+
+    def add_to_gitignore
+      append_to_file '.gitignore' do
+        <<-EOF.strip_heredoc
+        npm-debug.log
+        EOF
+      end
+    end
+
+    def insert_resolve
+      inject_into_file 'config/webpack.config.js', after: "root: path.join(__dirname, '..', 'webpack')" do
+        <<~HEREDOC
+        ,
+            extensions: ['', '.js', '.vue'],
+            fallback: [path.join(__dirname, '../node_modules'), path.join(__dirname, '../app/'),],
+            alias: {
+              // Use the standalone build to compile our page at runtime
+              'vue$': 'vue/dist/vue.common.js'
+            }
+        HEREDOC
+      end
+    end
+
+    def insert_module
+      inject_into_file 'config/webpack.config.js', after: "assets: true\n    })]" do
+        <<~HEREDOC
+        ,
+            // Use the necessary loaders to process our components
+            module: {
+              loaders: [
+                {
+                  test: /\.vue$/,
+                  loader: 'vue'
+                },
+                {
+                  loaders: ['babel'],
+                  test: /\.js$/,
+                  exclude: /node_modules/
+                },
+                {
+                  test: /\.css$/,
+                  loader: production ? ExtractTextPlugin.extract('vue-style', 'css') : 'style!css',
+                  fallbackLoader: 'vue-style-loader'
+                }
+              ]
+            },
+            vue: {
+              loaders: {
+                css: production ? ExtractTextPlugin.extract('vue-style', "css") : 'style!css'
+              }
+            }
+      HEREDOC
+      end
+    end
+
+    def update_procfile
+      remove_file 'Procfile'
+      copy_file 'Procfile.dev', 'Procfile.dev'
+      copy_file 'Procfile', 'Procfile'
+    end
+
+    def insert_css_extract
+      inject_into_file 'config/webpack.config.js', after: "var StatsPlugin = require('stats-webpack-plugin');" do
+        <<~HEREDOC
+
+          var ExtractTextPlugin = require("extract-text-webpack-plugin");
+        HEREDOC
+      end
+
+      inject_into_file 'config/webpack.config.js', after: 'new webpack.optimize.OccurenceOrderPlugin()' do
+        <<~HEREDOC
+        ,
+            new ExtractTextPlugin('[name]-[chunkhash].css')
+      HEREDOC
+      end
+    end
+
+    def update_dev_tool
+      gsub_file 'config/webpack.config.js', 'cheap-module-eval-source-map', '#eval-source-map'
+    end
+
+    def create_server_config
+      copy_file 'webpack.server.js', 'config/webpack.server.js'
+    end
+
+    def create_setup_files
+      remove_file 'webpack/application.js'
+      copy_file 'application.js', 'webpack/application.js'
+      copy_file 'setup.js', 'webpack/setup.js'
+      copy_file 'server.js', 'webpack/server.js'
+      copy_file 'index.js', 'index.js'
+      copy_file 'babelrc', '.babelrc'
+      empty_directory 'app/components'
+    end
+
+    def add_npm_scripts
+      inject_into_file 'package.json', before: '"dependencies": {' do
+        <<~HEREDOC
+        "scripts": {
+            "dev-server": "./node_modules/.bin/webpack-dev-server --hot --inline --config config/webpack.config.js --host 0.0.0.0",
+            "start": "NODE_ENV=production node ."
+          },
+
+      HEREDOC
+      end
+    end
+
+    def add_npm_dependencies
+      inject_into_file 'package.json', after: '"webpack-dev-server": "^1.9.0"' do
+        <<~HEREDOC
+        ,
+            "body-parser": "^1.15.2",
+            "express": "^4.14.0",
+            "morgan": "^1.7.0",
+            "extract-text-webpack-plugin": "^1.0.1",
+            "vue": "^2.1.3",
+            "vue-server-renderer": "^2.1.3",
+            "babel-core": "^6.17.0",
+            "babel-loader": "^6.2.5",
+            "babel-polyfill": "^6.16.0",
+            "babel-preset-es2015": "^6.16.0",
+            "babel-preset-stage-0": "^6.16.0",
+            "css-loader": "^0.25.0",
+            "style-loader": "^0.13.1",
+            "vue-loader": "^10.0.1",
+            "vue-style-loader": "^1.0.0",
+            "vue-template-compiler": "^2.1.3"
+      HEREDOC
+      end
+    end
+
+    def run_npm_install
+      run 'npm install' if yes?("Would you like me to run 'npm install' for you (I've added a few things since last time?) [y/N]")
+    end
+
+    def whats_next
+      # rubocop:disable Rails/Output
+      puts <<-EOF.strip_heredoc
+
+        I've added a few things here and there to set you up using Vue in your Rails app.
+
+        Now you're already to create your first Vue component in app/components.
+        Run 'foreman start' to run the webpack-dev-server and rails server.
+
+        See the README.md for this gem at
+        https://github.com/samtgarson/vueport
+        for more info.
+        Thanks for using Vueport!
+      EOF
+      # rubocop:enable Rails/Output
+    end
+  end
+end

data/lib/tasks/vueport.rake

@@ -0,0 +1,24 @@
+namespace :vueport do
+  desc 'Compile client and server bundles'
+  task compile: :environment do
+    ENV['NODE_ENV'] = 'production'
+    webpack_bin = ::Rails.root.join(::Rails.configuration.webpack.binary)
+    config_file = ::Rails.root.join(::Rails.configuration.webpack.config_file)
+    server_config_file = ::Rails.root.join(Vueport.config[:server_config_file])
+
+    unless File.exist?(webpack_bin)
+      raise "Can't find our webpack executable at #{webpack_bin} - have you run `npm install`?"
+    end
+
+    unless File.exist?(config_file)
+      raise "Can't find our webpack config file at #{config_file}"
+    end
+
+    unless File.exist?(server_config_file)
+      raise "Can't find our webpack server config file at #{config_file}"
+    end
+
+    sh "#{webpack_bin} --config #{config_file} --bail"
+    sh "#{webpack_bin} --config #{server_config_file} --bail"
+  end
+end

data/lib/vueport.rb

@@ -0,0 +1,25 @@
+require 'httparty'
+
+require 'vueport/helper'
+require 'vueport/renderer'
+require 'vueport/node_client'
+require 'vueport/version'
+
+module Vueport
+  module_function
+
+  def config
+    @config ||= {
+      server_host: 'localhost',
+      server_port: 5000,
+      server_config_file: 'config/webpack.server.js',
+      ssr_enabled: false
+    }
+  end
+
+  def configure(&_block)
+    yield config if block_given?
+  end
+end
+
+require 'vueport/railtie' if defined? ::Rails::Railtie

data/lib/vueport/helper.rb

@@ -0,0 +1,8 @@
+module Vueport
+  module Helper
+    def vueport(content = nil, &block)
+      content = capture(&block) if block_given?
+      Vueport::Renderer.new(content).render
+    end
+  end
+end

data/lib/vueport/node_client.rb

@@ -0,0 +1,40 @@
+
+module Vueport
+  class RenderError < StandardError; end
+
+  class NodeClient
+    attr_accessor :content
+
+    def initialize(content)
+      self.content = content
+    end
+
+    def run!
+      render.html_safe
+    end
+
+    private
+
+      def render
+        raise(RenderError.new, response.body) if response.code != 200
+        response.body
+      end
+
+      def response
+        @response ||= HTTParty.post("http://#{server_uri}/render", post_params)
+      end
+
+      def post_params
+        {
+          body: content,
+          headers: {
+            'Content-Type': 'text/plain'
+          }
+        }
+      end
+
+      def server_uri
+        "#{Vueport.config[:server_host]}:#{Vueport.config[:server_port]}"
+      end
+  end
+end

data/lib/vueport/railtie.rb

@@ -0,0 +1,22 @@
+require 'rails'
+require 'rails/railtie'
+require 'vueport'
+
+module Vueport
+  # :nodoc:
+  class Railtie < ::Rails::Railtie
+    Vueport.configure do |config|
+      config[:ssr_enabled] = ::Rails.env.production?
+    end
+
+    config.after_initialize do
+      ActiveSupport.on_load(:action_view) do
+        include Vueport::Helper
+      end
+    end
+
+    rake_tasks do
+      load 'tasks/vueport.rake'
+    end
+  end
+end

data/lib/vueport/renderer.rb

@@ -0,0 +1,42 @@
+module Vueport
+  class Renderer
+    include ActionView::Helpers::TagHelper
+
+    CONTENT_WRAPPER_ID = 'vueport-wrapper'.freeze
+    TEMPLATE_ID = 'vueport-template'.freeze
+
+    attr_accessor :content
+
+    def initialize(content)
+      self.content = content
+    end
+
+    def render
+      safe_join [rendered_content, template]
+    end
+
+    private
+
+      def rendered_content
+        ssr_enabled? ? ssr_content : wrapper
+      end
+
+      def template
+        content_tag :script, wrapper(content), type: 'text/x-template', id: TEMPLATE_ID
+      end
+
+      def ssr_content
+        Vueport::NodeClient.new(wrapper(content)).run!
+      rescue Vueport::RenderError
+        wrapper
+      end
+
+      def wrapper(content = '')
+        content_tag :div, content, id: CONTENT_WRAPPER_ID
+      end
+
+      def ssr_enabled?
+        Vueport.config[:ssr_enabled]
+      end
+  end
+end

data/lib/vueport/version.rb

@@ -0,0 +1,3 @@
+module Vueport
+  VERSION = '0.1.0'.freeze
+end

data/vueport.gemspec

@@ -0,0 +1,33 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'vueport/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'vueport'
+  spec.version       = Vueport::VERSION
+  spec.authors       = ['Sam Garson']
+  spec.email         = ['samtgarson@gmail.com']
+
+  spec.summary       = 'Single file components for Rails with Vue JS and Webpack'
+  spec.description   = 'Use webpack and Vue js to get modern front end technology in your Rails app, including hotloading and single file components.'
+  spec.homepage      = 'http://github.com/samtgarson/vueport'
+  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_development_dependency 'bundler', '~> 1.12'
+  spec.add_development_dependency 'rake', '~> 10.0'
+  spec.add_development_dependency 'rspec', '~> 3.0'
+  spec.add_development_dependency 'rubocop', '~> 0.45.0'
+  spec.add_development_dependency 'rspec-html-matchers', '~> 0.8.1'
+
+  spec.add_dependency 'rails', '>= 3.2.0'
+  spec.add_dependency 'webpack-rails', '~> 0.9.9'
+  spec.add_dependency 'httparty', '~> 0.14.0'
+
+  spec.required_ruby_version = '>= 2.0.0'
+end

metadata

@@ -0,0 +1,185 @@
+--- !ruby/object:Gem::Specification
+name: vueport
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Sam Garson
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-12-08 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.45.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.45.0
+- !ruby/object:Gem::Dependency
+  name: rspec-html-matchers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.8.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.8.1
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: webpack-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.9.9
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.9.9
+- !ruby/object:Gem::Dependency
+  name: httparty
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.14.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.14.0
+description: Use webpack and Vue js to get modern front end technology in your Rails
+  app, including hotloading and single file components.
+email:
+- samtgarson@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".rubocop.yml"
+- ".travis.yml"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- example/Procfile
+- example/Procfile.dev
+- example/application.js
+- example/babelrc
+- example/index.js
+- example/server.js
+- example/setup.js
+- example/webpack.server.js
+- lib/generators/vueport/install_generator.rb
+- lib/tasks/vueport.rake
+- lib/vueport.rb
+- lib/vueport/helper.rb
+- lib/vueport/node_client.rb
+- lib/vueport/railtie.rb
+- lib/vueport/renderer.rb
+- lib/vueport/version.rb
+- vueport.gemspec
+homepage: http://github.com/samtgarson/vueport
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Single file components for Rails with Vue JS and Webpack
+test_files: []