vueonrails 1.0.0.beta1 → 1.0.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71a42cb10863a34abfe26b347c8e643b9b412fdadcb70010489798e9dabdab92
-  data.tar.gz: eeef1a565c5687655ed8772e645d039530f5650e6c51ec0e7ca2a96859bd5514
+  metadata.gz: db191c0206d670d87864af0aa9a9c72b14bf900cb69484de1c17a670625c3ace
+  data.tar.gz: 5631b0e8d8c9af119048f86b7f3e64bfe2943123b474b3ed30482d38f4708103
 SHA512:
-  metadata.gz: ea2fb2986ef56e7da2fc1bc3b19f61d3529f7f3aa0ff8c78a0df20b534a50087e17990ef5444933c6166bee270a59c80880e598be5aca2d30020558cde871975
-  data.tar.gz: 1c9f50475bdfbdcd190baabafc582c6a748ad3eef02d82fc416a3777db42d4d674323db97930e8a193f143b883c73c764617ce4e39d2e40e683972d4155ca5da
+  metadata.gz: e9df496e99bdd437dfff15979b016ed5e409a26ce94c0188404887b063216e8f5a02760526a684372f5273c1798eb666e9d572ec76c0be6a7d07ec07b1c6c604
+  data.tar.gz: 91262456fc0092fa9b0bca55cac34b1230fcfb763d50c45f7f8e7c577ee93c48772367f106c3ff7fe0271792ee240e3cc3fbf82f5532236f6cfc88b349e2fbdf

data/README.md

@@ -1,11 +1,12 @@
-# Welcome to Vue on Rails 💎
+![vue on rails](https://vueonrails.com/assets/img/vueonrails.png)
 
 > Vue for your favorite Rails projects
 
 The Vue on Rails gem makes it easy to build Vue components on your Rails application.
 
-It uses Rails 5.x, Vue 2.x, Webpacker 3.x, Ruby 2.x, Node 11.x, Yarn 1.12.x.
+It uses Rails 5.x, Vue 2.x, Webpacker 4.x, Ruby 2.x, Node 11.x, Yarn 1.12.x.
 
+- ❄️ Server Side Rendering using Hypernova
 - 💎 Compatible with Rails 6/5/4 and Webpacker
 - 🌎 Internationalization for component parts
 - 🖖 Vue UI ready

data/app/helpers/syntax_helper.rb

@@ -1,3 +1,5 @@
+require 'hypernova'
+
 module SyntaxHelper
   def specific_page_vue
     " #{controller_name} #{action_name} "
@@ -25,4 +27,9 @@ module SyntaxHelper
       }; nil
     end
   end
+
+  #server side rendering via hypernova
+  def render_vue(id, name)
+    render_react_component(id, name: name)
+  end
 end

data/lib/generators/options/pug.rb

@@ -0,0 +1,14 @@
+pugtemplate = <<-eos
+<template lang="pug">
+  ##{name}
+    p {{ message }}
+</template>
+eos
+
+if options[:seperate] == true
+  gsub_file Rails.root.join("#{PARTS_PATH}/#{name}/#{name}.vue").to_s, 
+  /<template>[^\]]*<\/template>/, pugtemplate
+else 
+  gsub_file Rails.root.join("#{PARTS_PATH}/#{name}.vue").to_s, 
+  /<template>[^\]]*<\/template>/, pugtemplate
+end

data/lib/generators/options/ssr.rb

@@ -0,0 +1,10 @@
+template "ssr/component.js.erb", "#{SSR_PATH}/#{name}.js" 
+
+puts "\nAdd the following line into your ssr.js:
+
+getComponent(name) {
+// Add this! 
+if (name === '#{name}.js') {
+  return require('./app/javascript/ssr/#{name}.js')
+}
+"

data/lib/generators/templates/ssr/component.js.erb

@@ -0,0 +1,11 @@
+// Generated by Vue on Rails https://github.com/vueonrails/vueonrails
+// Embed this component
+// To generate this component, run `rails generate vue something --ssr`
+
+console.log("Hello, <%= name %>")
+const Vue = require("vue")
+const renderVue = require("hypernova-vue").renderVue
+const component = Vue.extend({
+  template: '<h1>hello, <%= name %></h1>'
+})
+module.exports = renderVue("<%= name %>.js", component)

data/lib/generators/vue/vue_generator.rb

@@ -4,6 +4,7 @@ class VueGenerator < Rails::Generators::NamedBase
   PACKS_PATH = "app/javascript/packs"
   PARTS_PATH = "app/javascript/parts"
   TESTS_PATH = "app/javascript/tests"
+  SSR_PATH = "app/javascript/ssr"
 
   source_root File.expand_path('../../templates', __FILE__)
 
@@ -18,8 +19,11 @@ class VueGenerator < Rails::Generators::NamedBase
     table: {type: :boolean, default: false},
     modal: {type: :boolean, default: false},
     click: {type: :boolean, default: false},
+    pug: {type: :boolean, default: false}
   }.freeze
   
+  class_option :ssr, type: :string, default: nil
+
   class_option :child, type: :string, default: nil
   class_option :parent, type: :string, default: nil
   class_option :seperate, type: :boolean, default: false
@@ -32,7 +36,9 @@ class VueGenerator < Rails::Generators::NamedBase
   def vue
     return if name.empty?
 
-    if options[:child] 
+    if options[:ssr]
+      add_ssr_component()
+    elsif options[:child] 
       adding_nested_component(:child, name, nil, options[:child])
     elsif options[:parent]
       adding_nested_component(:parent, name, options[:parent], nil)
@@ -95,6 +101,14 @@ class VueGenerator < Rails::Generators::NamedBase
     eval erbtemplate
   end
 
+  def add_ssr_component()
+    namespace = OpenStruct.new(SSR_PATH: SSR_PATH)
+    template = File.read(File.expand_path("../options/ssr.rb", __dir__))
+    erbtemplate = ERB.new(template).result(namespace.instance_eval { binding })
+    eval erbtemplate
+
+  end
+
   def add_to_component(example, name)
     namespace = OpenStruct.new(TESTS_PATH: TESTS_PATH, PARTS_PATH: PARTS_PATH, PACKS_PATH: PACKS_PATH, name: name)
     template = File.read(File.expand_path("../options/#{example}.rb", __dir__))

data/lib/installs/i18n.rb

@@ -0,0 +1,3 @@
+# Insert locale.js as a default i18n and add second locale cn.yml
+copy_file "#{__dir__}/../generators/templates/i18n/index.js", Rails.root.join("app/javascript/locales/locale.js").to_s
+copy_file "#{__dir__}/../generators/templates/i18n/cn.yml", Rails.root.join("config/locales/cn.yml").to_s

data/lib/installs/loaders/pug.js

@@ -0,0 +1,15 @@
+// Generated by Vue on Rails https://github.com/vueonrails/vueonrails
+// This is required to support Pug in Vue on Rails.  
+
+module.exports = {  
+  test: /\.pug$/,
+  oneOf: [
+    {
+      resourceQuery: /^\?vue/,
+      use: ['pug-plain-loader']
+    },
+    {
+      use: ['raw-loader', 'pug-plain-loader']
+    }
+  ]
+}

data/lib/installs/pug.rb

@@ -0,0 +1,12 @@
+# install pug dependencies
+run "yarn add pug pug-plain-loader"
+
+# add the pug loader
+copy_file "#{__dir__}/loaders/pug.js", Rails.root.join("config/webpack/loaders/pug.js").to_s
+
+# insert pug into the environment.js
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+"const pug =  require('./loaders/pug')\n", after: "require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+"environment.loaders.prepend('pug', pug)\n", before: "module.exports = environment"

data/lib/installs/setup.rb

@@ -1,3 +1,29 @@
+# Check for the lack of .babelrc or webpacker 4
+def check_version_and_babel
+  #should i check for evidence of webpacker:install?
+  File.exists?(Rails.root.join(".babelrc")) == false \
+  || (Gem.loaded_specs["webpacker"].version < Gem::Version.new('4.x')) == false
+end
+
+begin
+  if(check_version_and_babel)
+      say "You are using Vue on Rails #{Vueonrails::VERSION} and it does not support webpacker 4. 
+    
+    Please use the latest Vue on Rails (1.x) in your Gemfile:
+      gem 'webpacker', '~> 4.x'
+      gem 'vueonrails', '~> 1.x'
+
+    or switch back to webpacker 3:
+      gem 'webpacker', '~> 3.x'
+      gem 'vueonrails', '~> 0.x'", :yellow 
+    exit!
+  end
+rescue Errno::ENOENT => e
+  say "You need webpacker 4."
+  exit!
+end
+
+# the start of the setup script
 say "Adding vueonrails, internationalization, @vue/test-utils and other Jest devdependencies"
 run "yarn add vueonrails vue-i18n @vue/test-utils jest jest-serializer-vue vue-jest babel-jest --dev"
 
@@ -11,6 +37,7 @@ pack_tag =   <<-eos
     <%= javascript_pack_tag 'application' %>
     <%= stylesheet_pack_tag 'application' %>
 eos
+
 insert_into_file Rails.root.join("app/views/layouts/application.html.erb").to_s,
 pack_tag, before: "  </head>\n"
 

data/lib/installs/ssr/component.js

@@ -0,0 +1,7 @@
+console.log("hello, component")
+const Vue = require("vue")
+const renderVue = require("hypernova-vue").renderVue
+const component = Vue.extend({
+  template: '<h1>hello world</h1>'
+})
+module.exports = renderVue("component.js", component)

data/lib/installs/ssr/hypernova.rb

@@ -0,0 +1,9 @@
+require 'hypernova'
+require 'hypernova/plugins/development_mode_plugin'
+
+Hypernova.add_plugin!(DevelopmentModePlugin.new)
+
+Hypernova.configure do |config|
+  config.host = "0.0.0.0"
+  config.port = 7777            # The port where the node service is listening
+end

data/lib/installs/ssr/ssr.js

@@ -0,0 +1,13 @@
+var hypernova = require('hypernova/server');
+
+hypernova({
+  devMode: true,
+  getComponent(name) {
+    // console.log("The component name is -> " + name)
+    if (name === 'component.js') {
+      return require('./app/javascript/ssr/component.js')
+    }
+    return null;
+  },
+  port: 7777,
+});

data/lib/installs/ssr.rb

@@ -0,0 +1,26 @@
+# Check that webpacker + vueonrails are installed before proceeding
+begin
+  $stdout.puts "Webpacker: #{Webpacker::VERSION}" 
+rescue NameError 
+  $stdout.puts "Webpacker: Not installed"
+end
+
+# install the dependencies
+gem 'hypernova'
+run "yarn add hypernova hypernova-vue vue-server-renderer"
+
+#insert the application helper and also import
+insert_into_file Rails.root.join("app/controllers/application_controller.rb").to_s,
+"require 'hypernova'\n", before: "class"
+
+insert_into_file Rails.root.join("app/controllers/application_controller.rb").to_s,
+"around_action :hypernova_render_support\n", before: "end"
+
+# copy the configuration file into config/initializer
+copy_file "#{__dir__}/ssr/hypernova.rb", Rails.root.join("config/initializers/hypernova.rb").to_s
+
+# copy hypernova.js to the project root level
+copy_file "#{__dir__}/ssr/ssr.js", Rails.root.join("ssr.js").to_s
+
+# copy the first component server-rendered into the  
+copy_file "#{__dir__}/ssr/component.js", Rails.root.join("app/javascript/ssr/component.js").to_s

data/lib/installs/store.rb

@@ -0,0 +1,2 @@
+# Insert store.js as a simple store for components' state 
+copy_file "#{__dir__}/../generators/templates/stores/index.js", Rails.root.join("app/javascript/parts/store.js").to_s

data/lib/installs/test.rb

@@ -28,16 +28,4 @@ insert_into_file Rails.root.join("package.json").to_s,
   "#{scripts}",
   after: "\"private\": true,\n"
 
-babelrc = <<-eos
-  "test": {
-    "presets": [
-      ["env", { "targets": { "node": "current" }}]
-    ]
-  },
-eos
-
-insert_into_file Rails.root.join(".babelrc").to_s,
-  "#{babelrc}",
-  before: "  \"presets\": ["
-
-run "yarn add jest-serializer-vue vue-jest babel-jest --no-progress --silent"
+run "yarn add jest-serializer-vue vue-jest babel-jest --no-progress --silent"

data/lib/installs/ui.rb

@@ -1 +1,37 @@
-run "yarn list @vue/cli-service --no-progress --silent"
+# Jest and scripts configuration. Essential for Jest test and Vue Ui
+scripts =   <<-eos
+  "scripts": {
+    "yarn test": "jest",
+    "yarn install": "yarn install --check-files",
+    "rails assets:precompile": "yarn install --check-files; rails assets:precompile",
+    "rails server": "rails server",
+    "webpack-dev-server": "./bin/webpack-dev-server"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/app/javascript/parts/$1"
+    },
+    "transform": {
+      "^.+\\\\\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\\\\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(vueonrails)/)"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/config/webpack/"
+    ],
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ]
+  },
+eos
+
+insert_into_file Rails.root.join("package.json").to_s,
+scripts, after: "\"private\": true,\n"
+
+puts "Vue UI Ready!"

data/lib/tasks/translate.rake

@@ -2,7 +2,7 @@ namespace :vue do
   desc "Translate Rails' locale into Vue's locale"
   task :translate do
     Dir.foreach("config/locales/").each do |locale|
-      next if locale == '.' or locale == '..'
+      next if File.extname(locale).strip.downcase != ".yml"
       config = YAML.load_file("config/locales/#{locale}")
       name = locale.to_s.split('.').first if locale.to_s.split('.') != nil
       if name != nil
@@ -16,4 +16,4 @@ namespace :vue do
       end
     end
   end
-end
+end

data/lib/tasks/vue.rake

@@ -1,13 +1,15 @@
 bin_path = ENV["BUNDLE_BIN"] || "./bin"
 
 TASKS = {
-  locale: "install vue-i18n",
+  spv: "Install Specific-page Vue",
+  store: "Install simple state management",
+  i18n: "Install i18n dependencies",
+  ssr: "Install server-side rendering using hypernova",
+  setup: "Setup and install Vue on Rails dependencies", 
+  test: "Install Jest tests", 
+  ui: "Check if Vue-ui is installed", 
+  vuex: "Check if Vuex is installed", 
   turbolinks: "Check Vue-turbolinks ready", 
-  setup: "Check Vue on Rails ready", 
-  test: "Check Jest tests ready", 
-  vuex: "Check Vuex ready", 
-  ui: "Check Vue-ui ready", 
-  specific_page_vue: "Check Specific-page Vue ready?"
 }.freeze
 
 namespace :vue do  

data/lib/vueonrails/version.rb

@@ -1,3 +1,3 @@
 module Vueonrails
-  VERSION = "1.0.0.beta1"
+  VERSION = "1.0.0.beta2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vueonrails
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta1
+  version: 1.0.0.beta2
 platform: ruby
 authors:
 - Bryan Lim
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-07 00:00:00.000000000 Z
+date: 2019-06-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -57,8 +57,10 @@ files:
 - lib/generators/options/list.rb
 - lib/generators/options/modal.rb
 - lib/generators/options/parent.rb
+- lib/generators/options/pug.rb
 - lib/generators/options/seperate.rb
 - lib/generators/options/single.rb
+- lib/generators/options/ssr.rb
 - lib/generators/options/table.rb
 - lib/generators/options/test.rb
 - lib/generators/options/turbolinks_seperate.rb
@@ -72,6 +74,7 @@ files:
 - lib/generators/templates/packs/index.vue
 - lib/generators/templates/packs/pack.js.erb
 - lib/generators/templates/single_file_components/index.vue
+- lib/generators/templates/ssr/component.js.erb
 - lib/generators/templates/stores/index.js
 - lib/generators/templates/tests/index.js.erb
 - lib/generators/templates/turbolinks/index.js.erb
@@ -79,9 +82,16 @@ files:
 - lib/generators/vue/vue_generator.rb
 - lib/installs/Procfile
 - lib/installs/config/alias.js
-- lib/installs/locale.rb
+- lib/installs/i18n.rb
+- lib/installs/loaders/pug.js
+- lib/installs/pug.rb
 - lib/installs/setup.rb
-- lib/installs/specific_page_vue.rb
+- lib/installs/spv.rb
+- lib/installs/ssr.rb
+- lib/installs/ssr/component.js
+- lib/installs/ssr/hypernova.rb
+- lib/installs/ssr/ssr.js
+- lib/installs/store.rb
 - lib/installs/test.rb
 - lib/installs/turbolinks.rb
 - lib/installs/ui.rb
@@ -111,8 +121,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.6
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: Vue on Rails https://vueonrails.com

data/lib/installs/locale.rb

@@ -1 +0,0 @@
-run "yarn add vue-i18n"