vuejs 1.1.0.beta3 → 1.1.0.beta4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f07a96eab9a53f20b80be71ef9672976e39834c236da04dd301b0799948ff0c3
-  data.tar.gz: 48e4f7f78174ceb061fa12740328ffb593a5bc883e5225b826a454047b8516c9
+  metadata.gz: f54241575a69ae4937f9e7b47d695e439ef25a86ded0ab9d07d2856e53ed5834
+  data.tar.gz: b128c57a407b4456e6d302d37a9c8a79b5aaee7ba8b7457ad410c61d9efba458
 SHA512:
-  metadata.gz: '083aaa02c9684dfff34398a87c4ce5d8e1d75df8bf1068de6bfe48477d61a25b79a3dd210da0ff728739a334a25dc366f6a67d823a2e29c9587d5fb3d52d9ba0'
-  data.tar.gz: b68683e49d0760853c1a3bd97c7d9ee1a95f87c18807f83c081c4ec9ee7687874cede8029ce87be37d2f244870e1239b1a5275e219065d5c01a781b17a209fbc
+  metadata.gz: 774610f241c8ee542eed74d99f679f8bbcc00519ecfa0964db7e4ef31ffa32e79084961a50b2b1068a8cbcf748e788019870b0384839fb950aafcafb26be07ec
+  data.tar.gz: 003da68ee8e8d575b9199792171624761b1dd326acfa55648ef3f4ebd68108f8028e7432a0f5751038ad8ba7025cae5851b948bb8ab8aeae0714274c5a29acc5

data/README.md

@@ -2,29 +2,21 @@
 
 > Vue for your favourite Ruby on Rails projects
 
-`vuejs` rubygem makes it easy to get started with Vue on Rails project by shipping the following tools. 
-
-- Vuex support 
-- HTML Form helper
-- Turbolinks support
-- Support Webpacker
-- Vue component Scaffold
-- Mapping to Rails resources
-- Auto-loading of Vue component
-- Vue-cli service & Vue-ui compatibility
-- Unit component tests compatible to vue-tests-utils using Jest
+`vuejs` rubygem makes it easy to get started with Vue on Rails project. To create an empty Vue on Rails project, please run the following command
+
+```
+rails new app -m http://vueonrails.com/vue
+```
 
 ## Installation
 
-Add this line to your application's Gemfile:
+Add this line to your application's Gemfile and run `bundle`
 
 ```ruby
 gem 'vuejs'
 ```
 
-And then execute:
-
-    $ bundle
+and run `rails vue:setup`
 
 ## Get started 
 
@@ -39,11 +31,13 @@ To browse the application template, it's here http://vueonrails.com/vue
 
 ## Generate a new Vue component
 
+To generate a new vue component is easy. Please run the following command:
+
 ```
 rails generate vue something
 ```
 
-Note: `vuejs` gem creates vue components as single-file component by default.
+> Note: `vuejs` gem creates vue components as single-file component by default.
 
 To generate a component with seperation of concern, please use the option `--seperate`, 
 like `rails g vue something --seperate`
@@ -52,6 +46,7 @@ like `rails g vue something --seperate`
 
 ## Destroy a Vue component
 
+To destroy a vue component is easy. Please run: 
 ```
 rails destroy vue something
 ```
@@ -67,6 +62,7 @@ mount Vuejs::engine, to: 'vue'
 ```
 
 ## Generate a Vue component with Turbolinks support
+
 ```
 rails generate vue something --turbolinks
 ```
@@ -88,6 +84,9 @@ rails generate vue something --spv
 ```
 rails generate vue something --test
 ```
+
+## Passing Rails Variable into Vue component - coming soon
+
 ---
 
 # Some Solution for assets pipeline

data/lib/generators/generator_templates/packs/index.js

@@ -1,6 +1,9 @@
-// Generated by Vuejs gem ~> github.com/ytbryan/vuejs
+// Generated by vuejs gem ~> github.com/ytbryan/vuejs
+// To generate another of this component part, 
+// Please run `rails generate vue something` 
 
 export default {
+  // props: {},
   data: function() {
     return {
       message: "Hello <%= name %>!",
@@ -20,10 +23,9 @@ export default {
   }, 
   computed: {
   },
-  // asyncComputed: {},
   // components: {},
   // mixins: [], 
-  // props: {},
   // directives: {}, 
   // filters: {},
+  // asyncComputed: {}, // yarn add vue-async-computed
 };

data/lib/generators/generator_templates/packs/index.vue

@@ -1,7 +1,11 @@
+<!-- Generated by vuejs gem ~> github.com/ytbryan/vuejs -->
+<!-- To generate another of this component part, 
+Please run `rails generate vue something --seperate` -->
+
 <template>
-  <div id="app">
+  <div id="<%= name %>">
     <p>{{ message }}</p>
-    <button @click="onClick">click this</button>
+    <!-- <button @click="onClick">click this</button> -->
   </div>
 </template>
 

data/lib/generators/generator_templates/packs/pack.js.erb

@@ -1,18 +1,19 @@
-// Generated by Vuejs gem ~> github.com/ytbryan/vuejs
-// Run this example by adding  <%= '<%=' %> javascript_pack_tag "<%= name %>"  <%= '%' %><%= '>' %> into your 
-// rails' view
-// To generate another of this component, please run `rails g vue something`
+//Generated by Vuejs gem ~> github.com/ytbryan/vuejs
+//Run this example by adding  <%%= javascript_pack_tag "<%= name %>" %> into your 
+//Rails' view
+//To generate another component part, please run `rails generate vue something`
 
 import Vue from 'vue'
-<% if options['seperate'] %>
+<% if options['seperate'] -%>
 import App from '../parts/<%= name %>/<%= name %>.vue'
-<% else %>
+<% else -%>
 import App from '../parts/<%= name %>.vue'
-<% end %>
+<% end -%>
+
 document.addEventListener('DOMContentLoaded', () => {
-  document.body.appendChild(document.createElement('hello'))
-  const app = new Vue({
+  document.body.appendChild(document.createElement('<%= name %>'))
+  const <%= name %> = new Vue({
     render: h => h(App)
-  }).$mount('hello')
-  console.log({app})
+  }).$mount('<%= name %>')
+  console.log({<%= name %>})
 })

data/lib/generators/generator_templates/sfc/single-file-component.vue

@@ -1,14 +1,16 @@
 <!-- Generated by vuejs gem ~> github.com/ytbryan/vuejs -->
+<!-- To generate another component part, Please run `rails generate vue something` -->
 
-<template>
-  <div id="app">
+<template> 
+  <div id="<%= name %>">
     <p>{{ message }}</p>
-    <button @click="onClick">click this</button>
+    <!-- <button @click="onClick">click this</button> -->
   </div>
 </template>
 
 <script>
 export default {
+  // props: {},
   data: function () {
     return {
       message: "Hello <%= name %>!"
@@ -28,12 +30,11 @@ export default {
   computed: {
 
   },
-  // asyncComputed: {},
   // components: {},
   // mixins: [], 
-  // props: {},
   // directives: {}, 
   // filters: {},
+  // asyncComputed: {},
 }
 </script>
 

data/lib/generators/generator_templates/tests/jest.package.json

@@ -0,0 +1,16 @@
+"jest": {
+  "moduleFileExtensions": [
+    "js",
+    "vue"
+  ],
+  "moduleNameMapper": {
+    "^@/(.*)$": "<rootDir>/app/javascript/parts/$1", 
+  },
+  "transform": {
+    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+  },
+  "snapshotSerializers": [
+    "<rootDir>/node_modules/jest-serializer-vue"
+  ]
+}

data/lib/generators/generator_templates/tests/test.babelrc

@@ -0,0 +1,7 @@
+"env": {
+  "test": {
+    "presets": [
+      ["env", { "targets": { "node": "current" }}]
+    ]
+  }
+}

data/lib/generators/generator_templates/tests/unit.test.js.erb

@@ -1,23 +1,18 @@
 // Generated by vuejs gem ~> github.com/ytbryan/vuejs 
-// To generate another component with test, please run `rails g vue something --test`
+// To generate another component part with test, 
+// please run `rails generate vue something --test`
 
 import { shallowMount } from '@vue/test-utils'
-import List from '../parts/<%= name %>/<%= name %>.vue'
+<% if options['seperate'] -%>
+import App from '@/<%= name %>/<%= name %>.vue'
+<% else -%>
+import App from '@/<%= name %>.vue'
+<% end -%>
 
 describe('<%= name %>.vue', () => {
-  it('renders li for each item in props.items', () => {
-    const items = ['1', '2']
-    const wrapper = shallowMount(List, {
-      propsData: { items }
-    })
-    expect(wrapper.findAll('li')).toHaveLength(items.length)
-  })
-
-  it('matches snapshot', () => {
-    const items = ['item 1', 'item 2']
-    const wrapper = shallowMount(List, {
-      propsData: { items }
-    })
-    expect(wrapper.html()).toMatchSnapshot()
+  it('render hello <%= name %>', () => {
+    const message = "Hello <%= name %>!"
+    const wrapper = shallowMount(App)
+    expect(wrapper.find('#<%= name %>').text()).toBe(message)
   })
 })

data/lib/generators/generator_templates/turbolinks/turbolinks-pack.js.erb

@@ -1,21 +1,22 @@
 // Generated by Vuejs gem ~> github.com/ytbryan/vuejs
-// Run this example by adding  <%= '<%=' %> javascript_pack_tag "<%= name %>"  <%= '%' %><%= '>' %> into your 
-// rails' view
-// To generate another of this component with turbolinks, please run `rails g vue something --turbolinks`
+// Run this example by adding  <%%= javascript_pack_tag "<%= name %>" %> into your 
+// Rails' view
+// To generate another component part with turbolinks, please run `rails generate vue something --turbolinks`
 
 import TurbolinksAdapter from 'vue-turbolinks';
 import Vue from 'vue.esm'
-<% if options[:single] %>
-import App from '../parts/<%= name %>.vue'
-<% else %>
+<% if options['seperate'] -%>
 import App from '../parts/<%= name %>/<%= name %>.vue'
-<% end %>
+<% else -%>
+import App from '../parts/<%= name %>.vue'
+<% end -%>
 Vue.use(TurbolinksAdapter)
+
 document.addEventListener('turbolinks:load', () => {
   if(isView("###")){
-    const app = new Vue({
+    const <%= name %> = new Vue({
       render: h => h(App)
-    }).$mount('#something')
-    console.log({app})
+    }).$mount('#<%= name %>')
+    console.log({<%= name %>})
   }  
 })

data/lib/generators/vue/vue_generator.rb

@@ -37,6 +37,9 @@ class VueGenerator < Rails::Generators::NamedBase
 
   def add_tests_to_component name
     template "tests/unit.test.js.erb", "#{TESTS_PATH}/#{name}.test.js"      
+
+    say "adding vue-test-utils and other Jest dependencies"
+    run "yarn add @vue/test-utils jest-serializer-vue vue-jest babel-jest"
   end
   
   def add_helpers_to_component name

data/lib/install/alias.rb

@@ -1,7 +1,7 @@
 say "Adding alias.js to config/webpack/alias"
 copy_file "#{__dir__}/config/alias.js", Rails.root.join("config/webpack/alias/alias.js").to_s
 
-say "Adding alias to config/webpack/environment.js"
+say "Adding alias configuration to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const alias =  require('./alias/alias')\n",
   after: "require('@rails/webpacker')\n"

data/lib/install/setup.rb

@@ -10,18 +10,50 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.config.merge(alias)\n",
   before: "module.exports"
 
-say "Adding vue-autorequest and vue-form-for"
-run "yarn add vue-autorequest vue-form-for"
-
-say "Adding Vuex"
-run "yarn add vuex vuex-rails-plugin"
-
-say "Adding tests"
-run "yarn add @vue/test-utils"
-
-say "Adding turbolinks"
-run "yarn add vue-turbolinks"
-
-say "Making Vue on Rails compatible with Vue-ui"
+  scripts =   <<-eos
+  "scripts": {
+    "test": "jest",
+    "assets:precompile": "yarn install; rails assets:precompile",
+    "webpack-dev-server": "./bin/webpack-dev-server", 
+    "rails server": "rails server",
+    "yarn install": "yarn install"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/app/javascript/parts/$1"
+    },
+    "transform": {
+      "^.+\\\\\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\\\\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ]
+  },
+eos
+
+say "Adding scripts and jest configuration to package.json"
+insert_into_file Rails.root.join("package.json").to_s,
+  "#{scripts}",
+  after: "\"private\": true,\n"
+
+say "Adding test presets to .babelrc"
+babelrc = <<-eos
+  "test": {
+    "presets": [
+      ["env", { "targets": { "node": "current" }}]
+    ]
+  },
+eos
+
+insert_into_file Rails.root.join(".babelrc").to_s,
+  "#{babelrc}",
+  before: "  \"presets\": ["
+
+say "Adding @vue/cli-service to make Vue-ui compatible"
 run "yarn add @vue/cli-service --dev"
-
+  

data/lib/install/test.rb

@@ -1 +1,46 @@
-template "tests/unit.test.js.erb", "#{TESTS_PATH}/#{name}.test.js"      
+scripts =   <<-eos
+  "scripts": {
+    "test": "jest",
+    "assets:precompile": "yarn install; rails assets:precompile",
+    "webpack-dev-server": "./bin/webpack-dev-server", 
+    "rails server": "rails server",
+    "yarn install": "yarn install"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/app/javascript/parts/$1"
+    },
+    "transform": {
+      "^.+\\\\\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\\\\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ]
+  },
+eos
+
+say "Adding scripts and jest configuration to package.json"
+insert_into_file Rails.root.join("package.json").to_s,
+  "#{scripts}",
+  after: "\"private\": true,\n"
+
+say "Adding test presets to .babelrc"
+babelrc = <<-eos
+  "test": {
+    "presets": [
+      ["env", { "targets": { "node": "current" }}]
+    ]
+  },
+eos
+
+insert_into_file Rails.root.join(".babelrc").to_s,
+  "#{babelrc}",
+  before: "  \"presets\": ["
+
+say "Adding @vue/test-util and other Jest dependencies"
+run "yarn add jest-serializer-vue vue-jest babel-jest"

data/lib/install/ui.rb

@@ -0,0 +1,2 @@
+say "Adding @vue/cli-service to make Vue-ui compatible"
+run "yarn add @vue/cli-service --dev"

data/lib/install/vuex.rb

@@ -1,4 +1,5 @@
-run "yarn add vuex"
+say "Adding Vuex & Vuex Rails Plugins to Vue on Rails"
+run "yarn add vuex vuex-rails-plugins"
 
 insert_into_file "#{PACKS_PATH}/#{name}.js" ,
 "import Vuex from 'vuex'",

data/lib/tasks/info.rake

@@ -3,7 +3,7 @@ namespace :vue do
   task :info do
     $stdout.puts "Ruby: #{`ruby --version`}"
     $stdout.puts "Rails: #{Rails.version}"
-    # $stdout.puts "Webpacker: #{Webpacker::VERSION}"
+      # $stdout.puts "Webpacker: #{Webpacker::VERSION}" 
     $stdout.puts "Node: #{`node --version`}"
     $stdout.puts "Yarn: #{`yarn --version`}"
     $stdout.puts "\n"

data/lib/tasks/setup.rake

@@ -13,32 +13,55 @@ namespace :vue do
     exec "#{base_path} LOCATION=#{template}"
   end
 
-  desc "install other plugins"
-  task :others do
-    $stdout.puts "#{`yarn add @vue/cli-plugin-babel 
-    @vue/cli-plugin-eslint 
-    @vue/cli-plugin-unit-jest 
-    @vue/cli-plugin-pwa 
-    vue-i18n`}"
-  end
-  
   desc "install turbolinks"
   task :turbolinks do
-    $stdout.puts "#{`yarn add vue-turbolinks`}"
+    template = File.expand_path("../install/turbolinks.rb", __dir__)
+    base_path =
+    if Rails::VERSION::MAJOR >= 5
+      "#{RbConfig.ruby} #{bin_path}/rails app:template"
+    else
+      "#{RbConfig.ruby} #{bin_path}/rake rails:template"
+    end
+
+    exec "#{base_path} LOCATION=#{template}"
   end
 
-  desc "install vue-test-utils"
+  desc "setup Vue on Rails to be ready for Jest tests"
   task :test do
-    $stdout.puts "#{`yarn add @vue/test-utils`}"
+    template = File.expand_path("../install/test.rb", __dir__)
+    base_path =
+    if Rails::VERSION::MAJOR >= 5
+      "#{RbConfig.ruby} #{bin_path}/rails app:template"
+    else
+      "#{RbConfig.ruby} #{bin_path}/rake rails:template"
+    end
+
+    exec "#{base_path} LOCATION=#{template}"
   end
 
-  desc "install Vuex"
+  desc "install Vuex and vuex-rails-plugins"
   task :vuex do
-    $stdout.puts "#{`yarn add vuex`}"
+    template = File.expand_path("../install/vuex.rb", __dir__)
+    base_path =
+    if Rails::VERSION::MAJOR >= 5
+      "#{RbConfig.ruby} #{bin_path}/rails app:template"
+    else
+      "#{RbConfig.ruby} #{bin_path}/rake rails:template"
+    end
+
+    exec "#{base_path} LOCATION=#{template}"
   end
 
   desc "make this Rails project Vue-ui compatible"
   task :ui do
-    $stdout.puts "yarn add @vue/cli-service --dev"
+    template = File.expand_path("../install/ui.rb", __dir__)
+    base_path =
+    if Rails::VERSION::MAJOR >= 5
+      "#{RbConfig.ruby} #{bin_path}/rails app:template"
+    else
+      "#{RbConfig.ruby} #{bin_path}/rake rails:template"
+    end
+
+    exec "#{base_path} LOCATION=#{template}"    
   end
 end

data/lib/vuejs/post_message.rb

@@ -1,4 +1,4 @@
 module Log
-  MESSAGE = "Send me Pull Request ->  
+  MESSAGE = "Send me pull request ~>  
   https://github.com/ytbryan/vuejs/pulls"
 end

data/lib/vuejs/version.rb

@@ -1,3 +1,3 @@
 module Vuejs
-  VERSION = "1.1.0.beta3"
+  VERSION = "1.1.0.beta4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vuejs
 version: !ruby/object:Gem::Version
-  version: 1.1.0.beta3
+  version: 1.1.0.beta4
 platform: ruby
 authors:
 - Bryan Lim
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-09-07 00:00:00.000000000 Z
+date: 2018-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -57,6 +57,8 @@ files:
 - lib/generators/generator_templates/packs/index.vue
 - lib/generators/generator_templates/packs/pack.js.erb
 - lib/generators/generator_templates/sfc/single-file-component.vue
+- lib/generators/generator_templates/tests/jest.package.json
+- lib/generators/generator_templates/tests/test.babelrc
 - lib/generators/generator_templates/tests/unit.test.js.erb
 - lib/generators/generator_templates/turbolinks/turbolinks-pack.js.erb
 - lib/generators/generator_templates/vuex/index.js
@@ -66,7 +68,6 @@ files:
 - lib/install/component_with_seperate_concern.rb
 - lib/install/config/alias.js
 - lib/install/setup.rb
-- lib/install/single-file-component.rb
 - lib/install/test.rb
 - lib/install/turbolinks.rb
 - lib/install/ui.rb
@@ -98,7 +99,7 @@ homepage: http://github.com/ytbryan/vuejs
 licenses:
 - MIT
 metadata: {}
-post_install_message: "Send me Pull Request ->  \n  https://github.com/ytbryan/vuejs/pulls"
+post_install_message: "Send me pull request ~>  \n  https://github.com/ytbryan/vuejs/pulls"
 rdoc_options: []
 require_paths:
 - lib