updated to 0.1.6

Author: eGust

README.md

@@ -1,6 +1,6 @@
 module Cmd
   def self.run(cmd)
-    puts cmd
+    STDERR.puts cmd
     system(cmd)
   end
 end

lib/helpers/lib/cmd.rb

@@ -0,0 +1,74 @@
+require_relative '../lib'
+
+class VueCommand
+  SASS = %w[sass-loader node-sass].freeze
+
+  SUPPORED_FORMATS = {
+    'pug' => %w[pug-plain-loader pug],
+    'sass' => SASS,
+    'scss' => SASS,
+    'less' => %w[less-loader less],
+    'stylus' => %w[stylus-loader stylus],
+  }.freeze
+
+  def initialize
+    @pm = VueCli::Rails::Configuration.instance.node_env
+  end
+
+  def install_format_support(formats)
+    pkgs, unknown = group_formats(formats)
+    if pkgs.empty?
+      msg = unknown.empty? ? 'No formats supplied' : "Unsupported formats #{unknown}"
+      raise(ArgumentError, msg)
+    end
+
+    STDERR.puts "Unsupported formats #{unknown}" if unknown.any?
+    @pm.add "-D #{pkgs.join(' ')}"
+  end
+
+  def install_node_dev
+    pack_json = ::Rails.root.join('package.json')
+    abort('Not found package.json!') unless pack_json.exist? && pack_json.file?
+
+    add_deps(pack_json, %w[cross-env npm-run-all])
+    add_scripts(pack_json,
+                dev: 'run-p rails-s serve',
+                prod: 'cross-env RAILS_ENV=production vue-cli-service build',
+                serve: 'vue-cli-service serve',
+                'rails-s' => 'cross-env NO_WEBPACK_DEV_SERVER=1 rails s')
+    puts 'Dependencies and scripts have been installed successfully'
+    cmd = @pm.package_manager == :npm ? 'npm run' : 'yarn'
+    puts "  Please use `#{cmd} dev` to start dev server"
+  end
+
+  private
+
+  def add_deps(package_json, *packages, dev: true)
+    json = JSON.parse(package_json.read)
+    deps = json[dev ? 'devDependencies' : 'dependencies']
+    pkgs = [packages].flatten.find_all do |dep|
+      !(dep.blank? || deps.key?(dep))
+    end
+    @pm.add "#{dev ? '-D ' : ''}#{pkgs.join(' ')}" if pkgs.any?
+  end
+
+  def add_scripts(package_json, commands = {})
+    json = JSON.parse(package_json.read)
+    scripts = json['scripts']
+    commands.stringify_keys.each do |key, cmd|
+      scripts[key] = cmd unless scripts.key? key
+    end
+    package_json.write(JSON.pretty_generate(json))
+  end
+
+  def group_formats(formats)
+    formats.each_with_object([[], []]) do |result, fmt|
+      fmts = SUPPORED_FORMATS[fmt.downcase]
+      if fmts
+        result[0] += fmts
+      else
+        result[1] << fmt
+      end
+    end
+  end
+end

lib/helpers/scripts/vue_command.rb

@@ -54,7 +54,7 @@ module.exports = {
     /* [DO NOT EDIT!] end */
 
     /* put your custom code here
-    // Example: yarn -D compression-webpack-plugin webpack-bundle-analyzer
+    // Example: npm/yarn add -D compression-webpack-plugin webpack-bundle-analyzer
     if (isProd) {
       config
         .plugin('compression')

lib/source/vue.config.js

@@ -13,7 +13,7 @@ module.exports = (() => {
     const railsEnv = env.RAILS_ENV || 'development';
     const config = yaml.safeLoad(readFileSync(resolve('config/vue.yml'), 'utf8'))[railsEnv];
     const root = resolve(__dirname);
-    const po = (config.public_output_path || 'vue_assets').replace(/(^\/+|\/+$)/g, '');
+    const pop = (config.public_output_path || 'vue_assets').replace(/(^\/+|\/+$)/g, '');
     const {
       manifest_output: manifestOutput,
       js_output: output,
@@ -55,17 +55,17 @@ module.exports = (() => {
       root,
       manifestOutput: resolve(root, manifestOutput),
 
-      outputDir: resolve(root, 'public', po),
-      publicPath: `/${po}/`,
+      outputDir: resolve(root, 'public', pop),
+      publicPath: `/${pop}/`,
       configureWebpack: {
         entry,
+        output,
         resolve: {
           alias: Object.keys(alias).reduce((obj, key) => ({
             ...obj,
             [key]: resolve(root, alias[key]),
           }), {}),
         },
-        output,
       },
 
       devServer,
@@ -89,27 +89,25 @@ module.exports = (() => {
       encoding: 'utf8',
     }));
   }
-  const isProd = settings.env === 'production';
-  const manifest = settings.manifestOutput ? {
-    /* eslint-disable-next-line global-require,import/no-extraneous-dependencies */
-    plugin: require('webpack-assets-manifest'),
-    options: {
-      entrypoints: true,
-      writeToDisk: true,
-      publicPath: true,
-      output: settings.manifestOutput,
-    },
-  } : null;
 
-  const getSettingsFromKeys = keys => keys.filter(s => s)
+  const getSettingsFromKeys = keys => [].concat(keys).filter(s => s)
     .reduce((cfg, k) => {
       const v = settings[k];
       return v === undefined ? cfg : { ...cfg, [k]: v };
     }, {});
 
   return {
-    manifest,
-    isProd,
+    isProd: settings.env === 'production',
+    manifest: {
+      /* eslint-disable-next-line global-require,import/no-extraneous-dependencies */
+      plugin: require('webpack-assets-manifest'),
+      options: {
+        entrypoints: true,
+        writeToDisk: true,
+        publicPath: true,
+        output: settings.manifestOutput,
+      },
+    },
     getSettings: (keys = Object.keys(settings)) => getSettingsFromKeys(keys),
     pickUpSettings: ([lines]) => getSettingsFromKeys(lines.split('\n').map(s => s.trim())),
   };

lib/source/vue.rails.js

@@ -1,6 +1,6 @@
 default: &default
   package_manager: ${PACKAGE_MANAGER}
-  manifest_output: false
+  manifest_output: tmp/manifest.json
   public_output_path: vue_assets
   # js_output:
   #   filename: 'js/[name].[hash:8].js'
@@ -29,5 +29,4 @@ production:
 test:
   <<: *default
   # launch_dev_service: vue-cli-service serve
-  # manifest_output: tmp/manifest.json
   # filenameHashing: false

lib/source/vue.yml

@@ -5,46 +5,33 @@ namespace :vue do
     VueCreate.run!
   end
 
-  desc 'Add pug template support: formats=pug,sass,less,stylus'
+  desc 'Add template/style support: formats=pug,sass,less,stylus'
   task :support, [:formats] do |_t, args|
-    pkgs = []
-    args.formats.split(/\W/).each do |fmt|
-      pkgs += case fmt
-              when 'pug'
-                %w[pug-plain-loader pug]
-              when 'sass', 'scss'
-                %w[sass-loader node-sass]
-              when 'less'
-                %w[less-loader less]
-              when 'stylus'
-                %w[stylus-loader stylus]
-              else
-                []
-              end
-    end
-    throw(StandardError, '') if pkgs.empty?
-
-    pm = VueCli::Rails::Configuration.instance.node_env
-    pm.add "-D #{pkgs.join(' ')}"
+    require_relative '../helpers/scripts/vue_command'
+    VueCommand.new.install_format_support(args.formats&.split(/\W/))
   end
 
   desc 'Dump config/vue.yml to JSON: set [js] to get result from vue.rails.js'
   task :json_config, [:from] => :environment do |_t, args|
     if args.from == 'js'
-      cmd = <<~CMD
-        node -e "console.log(JSON.stringify(require('./vue.rails.js').getSettings(), null, 2))"
-      CMD
-      puts "RUN: #{cmd}"
-      system(cmd)
+      require_relative '../helpers/lib/cmd'
+      Cmd.run VueCli::Rails::Configuration::JS_CONFIG_CMD
     else
       config = VueCli::Rails::Configuration.new
       puts config.to_json
     end
   end
 
-  desc 'Build assets'
-  task compile: :environment do
+  desc 'Build assets: set [with_rails_assets] to invoke assets:precompile as well'
+  task :compile, [:with_rails_assets] => :environment do |_t, args|
     pm = VueCli::Rails::Configuration.instance.node_env
     pm.exec('vue-cli-service build', env: { 'RAILS_ENV' => ::Rails.env })
+    ::Rake::Task['assets:precompile'].invoke if args.with_rails_assets
+  end
+
+  desc 'Install Node way to run Rails dev server alongside webpack-dev-server'
+  task node_dev: :environment do
+    require_relative '../helpers/scripts/vue_command'
+    VueCommand.new.install_node_dev
   end
 end

lib/tasks/vue.rake

@@ -14,6 +14,10 @@ def node_env
         end
       end
 
+      JS_CONFIG_CMD = %{
+        node -e "console.log(JSON.stringify(require('./vue.rails.js').getSettings(), null, 2))"
+      }.strip.freeze
+
       def load_config(config)
         config = config[::Rails.env]
         c = {
@@ -29,7 +33,7 @@ def load_config(config)
         c['root'] = @root.to_s
         cw['output'] = config['js_output'] if config['js_output'].present?
         c['manifestOutput'] = config['manifest_output']
-        if ::Rails.env.production? && c['manifestOutput'].blank?
+        unless c['manifestOutput'].presence
           raise(Error, 'Incorrect manifest_output in config/vue.yml')
         end
 

lib/vue_cli/rails/configuration.rb

@@ -1,17 +1,13 @@
 module VueCli
   module Rails
     require 'vue_cli/rails/helper'
-    USE_PROXY_MIDDLEWARE = ::Rails.env.development? && defined?(::Rails::Server)
-    require 'vue_cli/rails/dev_server_proxy' if USE_PROXY_MIDDLEWARE
 
     class Engine < ::Rails::Engine
       initializer 'vue_cli' do |app|
-        if USE_PROXY_MIDDLEWARE
+        if ::Rails.env.development? && defined?(::Rails::Server)
+          require 'vue_cli/rails/dev_server_proxy'
           app.middleware.insert_before 0, DevServerProxy
-          fork do
-            config = Configuration.instance
-            config.node_env.exec(config['launch_dev_service'] || 'vue-cli-service serve')
-          end
+          Engine.start_wds! if ENV['NO_WEBPACK_DEV_SERVER'].blank?
         end
 
         ::ActiveSupport.on_load :action_controller do
@@ -22,6 +18,19 @@ class Engine < ::Rails::Engine
           include Helper
         end
       end
+
+      def self.start_wds!
+        fork do
+          config = Configuration.instance
+          port = config['devServer']&.dig('port')
+          if port
+            running = `lsof -i:#{port} -sTCP:LISTEN -Pn`&.chop.presence&.split("\n")
+            pid = running&.dig(1)&.split(/\s+/, 3)&.dig(1)
+            Process.kill('INT', pid.to_i) if pid.present?
+          end
+          config.node_env.exec(config['launch_dev_service'] || 'vue-cli-service serve')
+        end
+      end
     end
   end
 end

lib/vue_cli/rails/engine.rb

@@ -51,6 +51,10 @@ def exec(command, args = nil, extra = nil, env: {})
       end
 
       COMMAND_LINE = {
+        add: {
+          yarn: 'yarn add',
+          npm: 'npm i',
+        },
         global_add: {
           yarn: 'yarn global add',
           npm: 'npm i -g',