vue_cli-rails 0.1.4 → 0.1.6

data/lib/helpers/scripts/install_rails.rb

@@ -0,0 +1,48 @@
+#!/usr/bin/env ruby
+require_relative 'common'
+
+ver = ENV['RAILS_VERSION']
+abort('RAILS_VERSION not found!') if ver.blank?
+
+versions = `gem list -r -a -e rails`.scan(/\b((\d+\.)+\d+)\b/).map { |m| m[0] }
+ver = versions.find { |v| v.start_with? ver }
+abort("Version #{ver} not found!") if ver.blank?
+
+run("gem install rails -v #{ver}")
+
+RAILS_NEW_SCRIPT = {
+  '5' => {
+    args: %w[
+      database=sqlite3
+      skip-yarn
+      skip-git
+      skip-keeps
+      skip-sprockets
+      skip-spring
+      skip-listen
+      skip-turbolinks
+      skip-javascript
+      skip-test
+      skip-bundle
+    ],
+    keep_gems: /^\s*gem\s+['"](rails|puma|bootsnap)/,
+    append: <<~RUBY
+      gem 'sqlite3', '~> 1.3.10'
+    RUBY
+  },
+}
+
+require 'pathname'
+require 'fileutils'
+
+scirpt = RAILS_NEW_SCRIPT[ver[0]]
+run "rails new test_vcr #{scirpt[:args].map { |a| "--#{a}" }.join(' ')}"
+FileUtils.chdir 'test_vcr'
+
+root = Pathname.new(FileUtils.pwd)
+gemfile = root.join('Gemfile').read.split("\n")
+              .reject(&:empty?).reject { |s| s =~ /^\s*#/ }
+              .reject { |s| s =~ /^\s*gem/ && s !~ scirpt[:keep_gems] }
+root.join('Gemfile').write("#{(gemfile + [scirpt[:append]]).join("\n")}\n")
+run 'bundle install'
+# rails new test_vcr --database=sqlite3 --skip-yarn --skip-git --skip-sprockets --skip-spring --skip-listen --skip-turbolinks --skip-javascript --skip-test --skip-bundle

data/lib/helpers/scripts/vue_command.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

data/lib/helpers/scripts/vue_create.rb

@@ -0,0 +1,153 @@
+require_relative '../lib'
+
+class VueCreate
+  def initialize
+    @input = InputLoop.new
+    @pwd = FileUtils.pwd
+    @root = ::Rails.root
+    @pack = @root.join('package.json')
+    @src_dir = Pathname.new(__FILE__).dirname.join('..', '..', 'source')
+  end
+
+  def self.run!
+    new.start
+  end
+
+  def start
+    check_node!
+    FileUtils.chdir @root
+    begin
+      package_manager?
+      install_vue_cli
+      run_vue_create?
+      install_dev_deps
+      delete_vue_src?
+      copy_demo?
+      copy_config
+      generate_vue_yml
+      puts 'vue:create finished!'
+    ensure
+      FileUtils.chdir @pwd
+    end
+  end
+
+  private
+
+  def check_node!
+    @pm = VueCli::Rails::NodeEnv.new
+    abort('Cannot find node.js') unless @pm.node?
+  end
+
+  def package_manager?
+    yarn = @pm.yarn_version
+    npm = @pm.npm_version
+    abort('Cannot find npm or yarn') unless yarn || npm
+
+    if yarn && npm
+      input = @input.gets(
+        'Which package manager to use?',
+        @root.join('package-lock.json').exist? ? 'yN' : 'Yn',
+        y: 'yarn', n: 'npm',
+      )
+    else
+      input = npm ? 'n' : 'y'
+    end
+    @pm.use!(input == 'n' ? :npm : :yarn)
+    puts "Using package manager: #{@pm.package_manager}"
+  end
+
+  def install_vue_cli
+    return if @pm.vue?
+
+    puts "@vue/cli haven't been installed"
+    pm.global_add('@vue/cli')
+  end
+
+  def run_vue_create?
+    input = 'y'
+    if @pack.exist?
+      puts 'Detected `package.json`!'
+      input = @input.gets(
+        '  Do you want `vue create?` to overwrite your package.json',
+        'ynAk',
+        a: 'Auto', k: 'Keep',
+      )
+    end
+    return if input == 'n'
+
+    src_json = JSON.parse(@pack.read) unless input == 'y'
+    @pm.exec('vue create', '', "-n -m #{@pm.package_manager} .")
+
+    dst_json = JSON.parse(@pack.read) unless input == 'y'
+    return if input == 'y' || dst_json == src_json
+
+    src_json, dst_json = [dst_json, src_json] if input == 'a'
+    dst_json.deep_merge!(src_json)
+    @pack.write(JSON.pretty_generate(dst_json))
+    @pm.install
+  end
+
+  def install_dev_deps
+    package = JSON.parse(@pack.read)
+    dev_deps = package['devDependencies']
+    dd = %w[webpack-assets-manifest js-yaml].find_all do |dep|
+      !dev_deps.key?(dep)
+    end
+    @pm.add "-D #{dd.join(' ')}" if dd.any?
+  end
+
+  def delete_vue_src?
+    src = @root.join('src')
+    return unless src.exist? && src.directory?
+
+    puts 'Detected `src` folder (should be generated by vue-cli)'
+    FileUtils.rm_rf(src.to_s) if @input.gets('  Do you want to delete src folder?') == 'y'
+  end
+
+  def copy_demo?
+    return unless @input.gets('Do you want to copy demo code?', 'yN') == 'y'
+
+    FileUtils.cp_r(@src_dir.join('app'), @root)
+    routes = @root.join('config', 'routes.rb')
+    return unless routes.exist?
+
+    route_lines = routes.read.split("\n")
+    foo = false
+    bar = false
+    route_lines.each do |line|
+      foo ||= line.include? 'vue#foo'
+      bar ||= line.include? 'vue#bar'
+    end
+    return if foo && bar
+
+    end_line = route_lines.rindex { |ln| ln =~ /^\s*end\b/ }
+    return if end_line.blank?
+
+    route_lines.insert(end_line, "  get 'vue/bar' => 'vue#bar'") unless bar
+    route_lines.insert(end_line, "  get 'vue/foo' => 'vue#foo'") unless foo
+    route_lines.insert(end_line, '  # Example of vue_cli-rails')
+    routes.write(route_lines.join("\n"))
+  end
+
+  def copy_config
+    puts 'Copying configuration files...'
+    FileUtils.cp(@src_dir.join('vue.rails.js'), "#{@root}/")
+    if @root.join('vue.config.js').exist?
+      puts 'Detected `vue.config.js`!'
+      return if @input.gets('  Do you want to overwrite vue.config.js?', 'yN') == 'n'
+    end
+    FileUtils.cp(@src_dir.join('vue.config.js'), "#{@root}/")
+  end
+
+  def generate_vue_yml
+    yml_dest = @root.join('config', 'vue.yml')
+    if yml_dest.exist?
+      puts 'Detected `config/vue.yml`!'
+      return if @input.gets('  Do you want to overwrite config/vue.yml?') == 'n'
+    end
+
+    yml = @src_dir.join('vue.yml').read
+    yml = yml.sub('${PACKAGE_MANAGER}', pm.package_manager.to_s)
+    yml_dest.write(yml)
+  end
+end

data/lib/source/app/assets/vue/components/views/Foo.vue

@@ -10,7 +10,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 #foo {
   color: red;
 }

data/lib/source/app/controllers/vue_controller.rb

@@ -1,9 +1,7 @@
 class VueController < ApplicationController
   layout 'vue'
 
-  def foo
-  end
+  def foo; end
 
-  def bar
-  end
+  def bar; end
 end

data/lib/source/vue.config.js

@@ -1,34 +1,41 @@
+// const { resolve } = require('path');
 // const CompressionWebpackPlugin = require('compression-webpack-plugin');
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
+const railsConfig = require('./vue.rails');
+
 const {
-  entry,
-  css,
-  alias,
-  outputDir,
-  devServer,
-  publicPath,
   manifest,
-  isProd,
-} = require('./vue.rails');
+  pickUpSettings,
+  // isProd,
+  // getSettings, // (keys: string[]) => Object. Returns all available settings by default
+} = railsConfig;
 
 module.exports = {
-  outputDir,
-  publicPath,
-  devServer,
-  css,
+  ...pickUpSettings`
+    outputDir
+    publicPath
+    devServer
+    configureWebpack
+
+    filenameHashing
+    lintOnSave
+    runtimeCompiler
+    transpileDependencies
+    productionSourceMap
+    crossorigin
+    css
+    parallel
+    pwa
+    pluginOptions
+  `,
   chainWebpack: (config) => {
+    /* [DO NOT EDIT!] begin */
     config
       // clear entry points if there is any
       .entryPoints
       .clear()
       .end()
-      /* [DO NOT EDIT!] begin */
-      .plugin('manifest')
-      .use(manifest.plugin)
-      .init(Plugin => new Plugin(manifest.options))
-      .end()
-      /* [DO NOT EDIT!] end */
       .plugins
       // disable copy plugin
       .delete('copy')
@@ -37,10 +44,18 @@ module.exports = {
       .delete('preload')
       .delete('prefetch')
       .end();
+    if (manifest) {
+      config
+        .plugin('manifest')
+        .use(manifest.plugin)
+        .init(Plugin => new Plugin(manifest.options))
+        .end();
+    }
+    /* [DO NOT EDIT!] end */
+
+    /* put your custom code here
+    // Example: npm/yarn add -D compression-webpack-plugin webpack-bundle-analyzer
     if (isProd) {
-      // put your custom code here
-      // Example: yarn -D compression-webpack-plugin webpack-bundle-analyzer
-      /*
       config
         .plugin('compression')
         .use(CompressionWebpackPlugin)
@@ -56,21 +71,10 @@ module.exports = {
         .plugin('analyzer')
         .use(BundleAnalyzerPlugin)
         .init(Plugin => new Plugin({
-          openAnalyzer: true,
           reportFilename: resolve(__dirname, 'tmp/bundle-analyzer-report.html'),
           analyzerMode: 'static',
         }));
-      */
     }
-  },
-  configureWebpack: {
-    entry,
-    resolve: {
-      alias,
-    },
-    output: {
-      filename: '[name].[hash:8].js',
-      chunkFilename: 'js/[name].[hash:8].js',
-    },
+    // */
   },
 };

data/lib/source/vue.rails.js

@@ -3,19 +3,36 @@ const { env } = require('process');
 module.exports = (() => {
   let settings = {};
 
-  /* eslint-disable global-require,import/no-extraneous-dependencies */
-  const WebpackAssetsManifest = require('webpack-assets-manifest');
   try {
+    /* eslint-disable global-require,import/no-extraneous-dependencies */
     const yaml = require('js-yaml');
     const { readFileSync, readdirSync, lstatSync } = require('fs');
     const { resolve } = require('path');
+    /* eslint-enable global-require,import/no-extraneous-dependencies */
 
     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 { manifestOutput, alias = {}, devServer = {} } = config;
-    if (devServer.contentBase) {
+    const pop = (config.public_output_path || 'vue_assets').replace(/(^\/+|\/+$)/g, '');
+    const {
+      manifest_output: manifestOutput,
+      js_output: output,
+      alias = {},
+      devServer,
+
+      filenameHashing,
+      lintOnSave,
+      runtimeCompiler,
+      transpileDependencies,
+      productionSourceMap,
+      crossorigin,
+      css,
+      parallel,
+      pwa,
+      pluginOptions,
+    } = config;
+
+    if (devServer && devServer.contentBase) {
       devServer.contentBase = resolve(root, devServer.contentBase);
     }
     const entry = {};
@@ -34,20 +51,37 @@ module.exports = (() => {
     findAllJsFiles(assetRoot);
 
     settings = {
-      ...config,
       env: railsEnv,
       root,
-      outputDir: resolve(root, 'public', po),
-      publicPath: `/${po}/`,
-      alias: Object.keys(alias).reduce((obj, key) => ({
-        ...obj,
-        [key]: resolve(root, alias[key]),
-      }), {}),
       manifestOutput: resolve(root, manifestOutput),
+
+      outputDir: resolve(root, 'public', pop),
+      publicPath: `/${pop}/`,
+      configureWebpack: {
+        entry,
+        output,
+        resolve: {
+          alias: Object.keys(alias).reduce((obj, key) => ({
+            ...obj,
+            [key]: resolve(root, alias[key]),
+          }), {}),
+        },
+      },
+
       devServer,
-      entry,
+      filenameHashing,
+      lintOnSave,
+      runtimeCompiler,
+      transpileDependencies,
+      productionSourceMap,
+      crossorigin,
+      css,
+      parallel,
+      pwa,
+      pluginOptions,
     };
   } catch (e) {
+    /* eslint-disable-next-line global-require,import/no-extraneous-dependencies */
     const { execSync } = require('child_process');
 
     settings = JSON.parse(execSync('bundle exec rake vue:json_config', {
@@ -55,24 +89,26 @@ module.exports = (() => {
       encoding: 'utf8',
     }));
   }
-  /* eslint-enable global-require,import/no-extraneous-dependencies */
 
-  const assets = {};
-  const manifest = {
-    plugin: WebpackAssetsManifest,
-    assets,
-    options: {
-      assets,
-      entrypoints: true,
-      writeToDisk: true,
-      publicPath: true,
-      output: settings.manifestOutput,
-    },
-  };
+  const getSettingsFromKeys = keys => [].concat(keys).filter(s => s)
+    .reduce((cfg, k) => {
+      const v = settings[k];
+      return v === undefined ? cfg : { ...cfg, [k]: v };
+    }, {});
 
   return {
-    ...settings,
-    manifest,
     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())),
   };
 })();

data/lib/source/vue.yml

@@ -1,7 +1,10 @@
 default: &default
-  package_manager: #PACKAGE_MANAGER
-  manifestOutput: tmp/manifest.dev.json
+  package_manager: ${PACKAGE_MANAGER}
+  manifest_output: tmp/manifest.json
   public_output_path: vue_assets
+  # js_output:
+  #   filename: 'js/[name].[hash:8].js'
+  #   chunkFilename: 'js/[name].[hash:8].js'
   alias:
     '@': app/assets/vue
     ~views: app/assets/vue/components/views
@@ -12,15 +15,18 @@ development:
   devServer:
     contentBase: public
     host: localhost
-    port: 3033
+    port: 3080
     compress: true
-  launch_node: vue-cli-service serve
-
-test:
-  <<: *default
 
 production:
   <<: *default
+  manifest_output: app/assets/vue/manifest.json
+  productionSourceMap: false
   css:
     extract: true
-  manifestOutput: app/assets/vue/manifest.json
+  modern: true
+
+test:
+  <<: *default
+  # launch_dev_service: vue-cli-service serve
+  # filenameHashing: false