vue 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d32b30b1f2abec8e5f6ad2ae9f554e9317f52b345dc24a83e16607c4d51c1a7c
-  data.tar.gz: 414f3d67ae2a860ebf23983188e6273a8f646fd2970f16a86c228472cf1292cc
+  metadata.gz: 22b1d148ac59ff7d62b9708e9e23de1457ae8b4edde705aa22f970e6042d0bf3
+  data.tar.gz: 4e82e991d58f54e1cc3fb4001b33f3f60dbbac51f8ee8f4be094cb777ed14583
 SHA512:
-  metadata.gz: a6120c4d553d70ff66323ce3027fb498c6666a94f74762ac7bc911784ad5ae37b799540d68702b0d2bb10037db3f0a5999d09ca65af1387349812f1084051a83
-  data.tar.gz: 8bc5cbd55af4cba7b8ef23a16e039deaf87f9a6afffd7e2087ef8c4700c6eb495f6f6565660813fb015b5da9ff97431ccc767f909253d6f331e3a4529a4ce027
+  metadata.gz: 49a8a8995bd33675f275de949e6d3221260895a2035d1c179c71ffe7b8610115a43bbe7027527ca12a3fadfd1dba0d2b63afb775f0ef700b586e1ee5e5c10d1a
+  data.tar.gz: 40833171a2ad137b335f6da469eaf67da6beb31d1e99ee53bd71137e70d9f11ba4794365b42c9cff51615bad4dd31841ad20b022a21152f32c557a2fdbb2011e

data/README.md

@@ -1,8 +1,6 @@
 # Vue
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/vue`. To experiment with that code, run `bin/console` for an interactive prompt.
-
-TODO: Delete this and the text above, and describe your gem
+This gem is a Vue integration for Rails Webpacker. Rails Sprockets integration is planned. Currently a lot of features are missing and it's not production-ready yet. It allows you to automatically generate Vue components and packs from command line, render your Vue components from either Rails view or controller, prerender components on server and pass props directly to them either for components pre-rendered on server or rendered on client with big degree of customization to fit your application conventions and development workflow.
 
 ## Installation
 
@@ -22,18 +20,65 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here
+To install run:
+
+```
+rails g vue:install
+```
+
+This will create an initializer file in `config/initializers/vue.rb` and initialize components folder. You will be able to customize generators there, no other configuration is available at the moment but is planned.
+
+### Generating component
+
+```
+rails g vue:component ComponentName
+```
+
+This will generate Vue component in `app/javascripts/components`, which you can customize however you want.
+
+### Server rendering support
 
-## Development
+For server rendering support you need to install `vue-server-renderer` npm package manually for now.
+
+```
+yarn add vue-server-renderer
+```
 
-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.
+We're planning to automate that in future development releases.
 
-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).
+
+### Rendering Vue Component from Rails view
+
+```ruby
+<%= vue_component('ComponentName', { message: 'Hello World' }, prerender: true) %>
+```
+
+This will render your component in the view with server-side pre-rendering (`prerender: true` (default `false`)).
+
+## Rendering Vue Component from Rails controller
+
+```ruby
+render vue_component: 'ComponentName', props: { message: 'Hello World' }, prerender: true
+```
+
+This will render your component from controller with server-side pre-rendering, which defaults to false.
+
+## TODO
+1. Proper gem configuration through initializer.
+2. Integration with Rails Sprockets.
+3. Provide more options for rendering Vue components using custom provided helpers.
+4. Converting component names to different cases based on application conventions.
+5. Add support for older versions of Rails and Webpacker.
+6. ...
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/vue.
+Bug reports and pull requests are welcome on GitHub at https://github.com/codeblocs/vue. 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.
 
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the Vue project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/codeblocs/vue/blob/master/CODE_OF_CONDUCT.md).

data/lib/generators/vue/component_generator.rb

@@ -0,0 +1,124 @@
+module Vue
+  module Generators
+    class ComponentGenerator < ::Rails::Generators::NamedBase
+      source_root File.expand_path('templates', __dir__)
+
+      desc <<-DESC.strip_heredoc
+      Description:
+          Scaffold a Vue component into `components/` of your Webpacker source or asset pipeline.
+          The generated component will include a basic layout to help with development.
+
+      Examples:
+          rails g vue:component form
+      DESC
+
+      class_option :single_file_component,
+                   type: :boolean,
+                   default: true,
+                   desc: 'Output single-file component'
+
+      class_option :styles_lang,
+                   type: :string,
+                   default: 'scss',
+                   desc: 'Use custom css syntax, e.g. css, sass, scss'
+
+      class_option :styles_scoped,
+                   type: :boolean,
+                   default: true,
+                   desc: 'Scope styles to generated component'
+
+      class_option :coffee,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Output coffeescript based component'
+
+      class_option :pack,
+                   type: :boolean,
+                   default: true,
+                   desc: 'Generate pack for the component'
+
+      class_option :vuex,
+                   type: :boolean,
+                   default: false,
+                   desc: 'Add vuex support for component pack'
+
+      def call
+        component_file_path = File.join(
+          component_target_dir,
+          "#{component_name}.vue"
+        )
+
+        template("component.vue", component_file_path)
+
+        if options[:pack]
+          pack_file_path = File.join(
+            pack_target_dir,
+            "#{file_name.dasherize}.js"
+          )
+
+          template("pack.js", pack_file_path)
+        end
+      end
+
+      private
+
+      def component_name
+        file_name.camelize
+      end
+
+      def webpacker?
+        defined?(Webpacker)
+      end
+
+      def webpack_config
+        if Webpacker.respond_to?(:config)
+          Webpacker.config
+        else
+          Webpacker::Configuration
+        end
+      end
+
+      def component_target_dir
+        if webpacker?
+          webpack_config.source_path
+                        .join('components')
+                        .relative_path_from(::Rails.root)
+                        .to_s
+        else
+          'app/assets/javascripts/components'
+        end
+      end
+
+      def pack_target_dir
+        if webpacker?
+          webpack_config.source_path
+                        .join('packs')
+                        .relative_path_from(::Rails.root)
+                        .to_s
+        else
+          'app/assets/javascripts/packs'
+        end
+      end
+
+      def file_extension
+        'vue'
+      end
+
+      def styles_lang
+        options[:styles_lang] || vue_configuration.generators.styles.lang
+      end
+
+      def styles_scoped
+        options[:styles_scope] || vue_configuration.generators.styles.scoped
+      end
+
+      def pack
+        options[:pack] || vue_configuration.generators.packs
+      end
+
+      def vue_configuration
+        ::Vue.configuration
+      end
+    end
+  end
+end

data/lib/generators/vue/install_generator.rb

@@ -0,0 +1,101 @@
+module Vue
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      source_root File.expand_path('templates', __dir__)
+
+      desc 'Initialize Vue gem in Rails application'
+
+      class_option :skip_git,
+                   type: :boolean,
+                   aliases: '-g',
+                   default: false,
+                   desc: 'Skip Git keeps'
+
+      class_option :skip_server_rendering,
+                   type: :boolean,
+                   default: true,
+                   desc: 'Don\'t generate files required for server rendering'
+
+      class_option :skip_vuex
+                   type: :boolean,
+                   default: false,
+                   desc: 'Don\'t generate vuex store files'
+
+      def create_components_dir
+        empty_directory File.join(components_dir, 'components')
+
+        unless options[:skip_git]
+          create_file File.join(components_dir, 'components/.gitkeep')
+        end
+      end
+
+      def create_server_rendering_file
+        unless options[:skip_server_rendering]
+          server_rendering_path = File.join(components_dir, 'packs')
+
+          template('server_rendering.js', server_rendering_path)
+        end
+      end
+
+      def create_stores_dir
+        empty_directory File.join(components_dir, 'stores')
+
+        unless options[:skip_git]
+          create_file File.join(components_dir, 'stores/.gitkeep')
+        end
+      end
+
+      def create_vue_initializer
+        initializer_path = 'config/initializers/vue.rb'
+
+        template('vue.rb', initializer_path)
+      end
+
+      def setup_vue
+        if webpacker?
+          setup_vue_webpacker
+        else
+          setup_vue_sprockets
+        end
+      end
+
+      private
+
+      def setup_vue_webpacker
+
+      end
+
+      def setup_vue_sprockets
+
+      end
+
+      def webpacker?
+        defined?(Webpacker)
+      end
+
+      def webpack_source_path
+        if Webpacker.respond_to?(:config)
+          Webpacker.config.source_entry_path
+        else
+          Webpacker::Configuration.source_path.join(Webpacker::Configuration.entry_path)
+        end
+      end
+
+      def javascript_dir
+        if webpacker?
+          webpack_source_path.relative_path_from(::Rails.root).to_s
+        else
+          'app/assets/javascripts'
+        end
+      end
+
+      def components_dir
+        if webpacker?
+          Pathname.new(javascript_dir).parent.to_s
+        else
+          javascript_dir
+        end
+      end
+    end
+  end
+end

data/lib/generators/vue/templates/component.vue

@@ -0,0 +1,27 @@
+<template>
+
+</template>
+
+<script>
+  import Vue from 'vue'
+
+  export default {
+    name: '<%= component_name %>',
+
+    props: [],
+
+    data () {
+      return {
+
+      }
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="<%= styles_lang %>">
+
+</style>

data/lib/generators/vue/templates/pack.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import <%= component_name %> from 'components/<%= component_name %>'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const node = document.getElementsByTagName('<%= file_name.dasherize %>')[0]
+  const props = JSON.parse(node.getAttribute('data-props'))
+
+  new Vue({
+    render: h => h(<%= component_name %>, { props })
+  }).$mount(node)
+})

data/lib/generators/vue/templates/vue.rb

@@ -0,0 +1,13 @@
+Vue.configure do |config|
+  # Set default styles syntax for generators
+  # Available options: :css, :scss, :sass
+  # config.generators.styles.syntax = :scss
+
+  # Generate scoped styles for components
+  # Available options: true, false
+  # config.generators.styles.scoped = true
+
+  # Generate pack file for components
+  # Available options: true, false
+  # config.generators.pack = true
+end

data/lib/vue.rb

@@ -1,10 +1,7 @@
-# frozen_string_literal: true
-
+require 'vue/configuration'
+require 'vue/controller_helper'
 require 'vue/version'
-require 'vue/base_renderer'
-require 'vue/bundle_renderer'
+require 'vue/railtie'
+require 'vue/view_helper'
+require 'vue/controller_renderer'
 require 'vue/server_renderer'
-
-module Vue
-
-end

data/lib/vue/configuration.rb

@@ -0,0 +1,45 @@
+module Vue
+  class << self
+    attr_accessor :configuration
+  end
+
+  def self.configure
+    yield configuration
+  end
+
+  def self.configuration
+    @configuration ||= Configuration.new
+  end
+
+  def self.configuration=(config)
+    @configuration = config
+  end
+
+  class Configuration
+    def initialize
+      @generators = Generators.new
+    end
+
+    def generators(&block)
+      if block_given?
+        @generators = Generators.new(&block)
+      else
+        @generators
+      end
+    end
+
+    class Generators
+      attr_accessor :styles, :syntax, :packs, :single_file_component
+
+      def initialize
+        @styles = ActiveSupport::OrderedOptions.new
+        @styles.lang = :scss
+        @styles.scoped = true
+        @syntax = :es2015
+        @packs = true
+        @single_file_component = true
+        yield self if block_given?
+      end
+    end
+  end
+end

data/lib/vue/controller_helper.rb

@@ -0,0 +1,11 @@
+module Vue
+  module ControllerHelper
+    extend ActiveSupport::Concern
+
+    class_methods do
+      def pack_tag_for(pack = nil)
+        before_action { @pack = pack.nil? ? params[:controller] : pack.to_s }
+      end
+    end
+  end
+end

data/lib/vue/controller_renderer.rb

@@ -0,0 +1,28 @@
+module Vue
+  class ControllerRenderer
+    include Vue::ViewHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+
+    attr_accessor :output_buffer
+
+    def initialize(options = {})
+      controller = options[:controller]
+    end
+
+    def call(component_name, options, &block)
+      props = options.fetch(:props, {})
+      options = default_options.merge(options)
+
+      vue_component(component_name, props, options, &block)
+    end
+
+    private
+
+    def default_options
+      {
+        prerender: false
+      }
+    end
+  end
+end

data/lib/vue/railtie.rb

@@ -0,0 +1,26 @@
+require 'rails'
+
+module Vue
+  class Railtie < ::Rails::Railtie
+    initializer 'vue.setup_controller_helpers', after: :load_config_initializers, group: :all do
+      ActiveSupport.on_load(:action_controller) do
+        include ::Vue::ControllerHelper
+      end
+    end
+
+    initializer 'vue.setup_view_helpers', after: :load_config_initializers, group: :all do
+      ActiveSupport.on_load(:action_view) do
+        include ::Vue::ViewHelper
+      end
+    end
+
+    initializer 'vue.add_component_renderer', group: :all do
+      ActionController::Renderers.add :vue_component do |component_name, options|
+        renderer = ::Vue::ControllerRenderer.new(controller: self)
+        html = renderer.call(component_name, options)
+        render_options = options.merge(inline: html)
+        render(render_options)
+      end
+    end
+  end
+end

data/lib/vue/server_renderer.rb

@@ -1,7 +1,42 @@
-# frozen_string_literal: true
-
 module Vue
-  class ServerRenderer < BaseRenderer
+  class ServerRenderer
+    def initialize
+      vue_source = File.read(Rails.root.join('node_modules', 'vue', 'dist', 'vue.js'))
+      vue_renderer_source = File.read(Rails.root.join('node_modules', 'vue-server-renderer', 'basic.js'))
+      server_rendering_pack = File.read(Rails.root.join(File.join(Webpacker.config.public_path, Webpacker.manifest.lookup('server_rendering.js'))))
+
+      @context = ExecJS.compile(vue_source + vue_renderer_source + server_rendering_pack)
+    end
+
+    def render(component_name, props)
+      vue_component_string(component_name, props)
+    end
+
+    private
+
+    def vue_component_string(component_name, props)
+      js_string = <<-JS
+        (function () {
+          var component = new Vue({
+            render: h => {
+              console.log(h)
+              return h(#{component_name}, { attrs: { 'data-props': JSON.stringify(#{props.to_json}) }, props: #{props.to_json} })
+            }
+          })
+
+          var html = null
+
+          renderVueComponentToString(component, (err, res) => {
+            html = res
+          })
+
+          return html
+        })()
+      JS
 
+      @context.eval(js_string).html_safe
+    rescue ExecJS::ProgramError => e
+      Rails.logger.debug(e.message)
+    end
   end
 end

data/lib/vue/version.rb

@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 module Vue
-  VERSION = '0.1.0'
+  VERSION = "0.2.0"
 end

data/lib/vue/view_helper.rb

@@ -0,0 +1,20 @@
+module Vue
+  module ViewHelper
+    def vue_component(component_name, props, options = {}, &block)
+      render_name = component_name.dasherize
+      render_props = props.transform_keys { |key| key.to_s.dasherize }
+
+      if options[:prerender]
+        renderer = ::Vue::ServerRenderer.new
+        renderer.render(render_name, render_props)
+      else
+        content_tag(
+          render_name,
+          'data-props': render_props.to_json
+        ) do
+          yield if block_given?
+        end
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Igor Preston
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-02-01 00:00:00.000000000 Z
+date: 2018-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -52,6 +52,48 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: webpacker
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.5'
+- !ruby/object:Gem::Dependency
+  name: execjs
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
 description: 
 email:
 - igorpreston@gmail.com
@@ -59,22 +101,23 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- ".gitignore"
-- ".rspec"
-- ".travis.yml"
-- Gemfile
-- LICENSE.txt
+- LICENSE
 - README.md
-- Rakefile
-- bin/console
-- bin/setup
+- lib/generators/vue/component_generator.rb
+- lib/generators/vue/install_generator.rb
+- lib/generators/vue/templates/component.vue
+- lib/generators/vue/templates/pack.js
+- lib/generators/vue/templates/server_rendering.js
+- lib/generators/vue/templates/vue.rb
 - lib/vue.rb
-- lib/vue/base_renderer.rb
-- lib/vue/bundle_renderer.rb
+- lib/vue/configuration.rb
+- lib/vue/controller_helper.rb
+- lib/vue/controller_renderer.rb
+- lib/vue/railtie.rb
 - lib/vue/server_renderer.rb
 - lib/vue/version.rb
-- vue.gemspec
-homepage: https://rubygems.org/gems/vue
+- lib/vue/view_helper.rb
+homepage: https://github.com/codeblocs/vue
 licenses:
 - MIT
 metadata:
@@ -95,8 +138,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
-summary: Vue server-side rendering for Rails
+summary: Vue gem for Rails
 test_files: []

data/.gitignore

@@ -1,11 +0,0 @@
-/.bundle/
-/.yardoc
-/_yardoc/
-/coverage/
-/doc/
-/pkg/
-/spec/reports/
-/tmp/
-
-# rspec failure tracking
-.rspec_status

data/.rspec

@@ -1,3 +0,0 @@
---format documentation
---color
---require spec_helper

data/.travis.yml

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

data/Gemfile

@@ -1,6 +0,0 @@
-source "https://rubygems.org"
-
-git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
-
-# Specify your gem's dependencies in vue.gemspec
-gemspec

data/Rakefile

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

data/bin/console

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

@@ -1,8 +0,0 @@
-#!/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/vue/base_renderer.rb

@@ -1,9 +0,0 @@
-# frozen_string_literal: true
-
-module Vue
-  class BaseRenderer
-    def self.render
-      raise NoMethodError
-    end
-  end
-end

data/lib/vue/bundle_renderer.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-module Vue
-  class BundleRenderer < BaseRenderer
-
-  end
-end

data/vue.gemspec

@@ -1,32 +0,0 @@
-lib = File.expand_path("../lib", __FILE__)
-$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-require "vue/version"
-
-Gem::Specification.new do |spec|
-  spec.name          = "vue"
-  spec.version       = Vue::VERSION
-  spec.authors       = ["Igor Preston"]
-  spec.email         = ["igorpreston@gmail.com"]
-
-  spec.summary       = "Vue server-side rendering for Rails"
-  spec.homepage      = "https://rubygems.org/gems/vue"
-  spec.license       = "MIT"
-
-  if spec.respond_to?(:metadata)
-    spec.metadata["allowed_push_host"] = "https://rubygems.org"
-  else
-    raise "RubyGems 2.0 or newer is required to protect against " \
-      "public gem pushes."
-  end
-
-  spec.files         = `git ls-files -z`.split("\x0").reject do |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"]
-
-  spec.add_development_dependency "bundler", "~> 1.16"
-  spec.add_development_dependency "rake", "~> 10.0"
-  spec.add_development_dependency "rspec", "~> 3.0"
-end