vue_cli-rails 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 229220b60eb603bb590ec48c196daf668f226d2e
-  data.tar.gz: efbf67738dd8b19dcc324333db7a7c874af4dfb7
+  metadata.gz: 193e3f266fe5df04d06da5ba07e6811bcb95dcff
+  data.tar.gz: a62e9dbd576de83ab3a41130263b1379c2fbed1a
 SHA512:
-  metadata.gz: 89a63db2149ee2708663ba361ad5501f6109f30b78a3e5e0411a1e1ba1b41de406eb65eb6a51e1a6ec38bfc3cb79b08c419bfabcdd104aef0998362cb2f2b200
-  data.tar.gz: dbd023aee57fcadb5ec46433dba84dbe451dda18acb72f60c6279159fc8267c27afe0815d330a72e3347e205407a2a99420a4fbfa30261d03c27ed9f90d4f573
+  metadata.gz: 1e61eb0f58518561a57cf3d3602d9eed052460f142b9d4b6f3847827d6d2a15a0503c7ee966c30a5ca9dee2dd58d530571e1f47a8565da7ea40b07470ba156cd
+  data.tar.gz: b8a32249e7be88fa8eb0c11c351126078d998c77cecd306c322bb4955cbefb3a6290a850db28b2b11094b6226664f6f5b647058732e3f974df7c8ee5a8d74ba0

data/.rubocop.yml

@@ -0,0 +1,20 @@
+AllCops:
+  TargetRubyVersion: 2.3
+
+Metrics/LineLength:
+  Max: 99
+
+Style/FrozenStringLiteralComment:
+  Enabled: false
+
+Style/TrailingCommaInArguments:
+  EnforcedStyleForMultiline: comma
+
+Style/TrailingCommaInArrayLiteral:
+  EnforcedStyleForMultiline: comma
+
+Style/TrailingCommaInHashLiteral:
+  EnforcedStyleForMultiline: comma
+
+Style/Documentation:
+  Enabled: false

data/.travis.yml

@@ -3,5 +3,18 @@ sudo: false
 language: ruby
 cache: bundler
 rvm:
+  - 2.3.8
   - 2.4.5
+  - 2.5.2
+  - 2.6.1
+env:
+  - RAILS_VERSION=4 NODE_VERSION=8
+  - RAILS_VERSION=4 NODE_VERSION=lts
+  - RAILS_VERSION=5 NODE_VERSION=lts
+  - RAILS_VERSION=5 NODE_VERSION=latest
+matrix:
+  fast_finish: true
+  include:
+    - rvm: ruby-head
+      env: RAILS_VERSION=beta NODE_VERSION=latest
 before_install: gem install bundler -v 1.17.3

data/Gemfile

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

data/README.md

@@ -1,8 +1,6 @@
 # VueCli::Rails
 
-Get `vue-cli` working on Rails.
-
-Currently, I am still actively developing this gem. It's usable but lacks of documentation. I will update it once the main features are ready and well-tested.
+Let's make cool boy Vue even cooler on Rails!
 
 ## Installation
 
@@ -15,25 +13,495 @@ gem 'vue_cli-rails'
 And then execute:
 
     $ bundle install
-    $ bundle exec rake vue:create
 
-Follow the steps and copy demo codes, than you can add lines below to your `config/routes.rb`:
+## Requirements
 
-```ruby
-  get 'vue/foo' => 'vue#foo'
-  get 'vue/bar' => 'vue#bar'
-```
+- Ruby >= 2.3
+- Rails >= 4.2
+- Node >= [8.9+](https://cli.vuejs.org/guide/installation.html)
+- Optional: `yarn`
+
+> The auto-testing for CI still WIP. Sorry I can't guarantee it works for now.
+
+## Features
+
+- Feel free to use `yarn` or `npm`.
+- Single `vue_entry` rather than confusing `stylesheet_pack_tag`, `javascript_packs_tag` and `javascript_packs_with_chunks_tag`.
+- Get all benefits of [@vue/cli](https://cli.vuejs.org/).
+  - Powered by `webpack` 4
+  - DRY: all-in-one configuration file rather than repeating for `webpack`, `eslint` and etc.
+  - Out-of-box tooling: Babel, TypeScript, PWA, `vue-router`, `vuex`, CSS pre-processors, linter and testing tools.
+- Run `webpack-dev-server` together with Rails server with development mode.
+- Just single `RAILS_ENV`, no more `NODE_ENV`.
+- Rails way configurations in `config/vue.yml`.
+
+## Getting started
+
+Out-of-box workflow:
+
+1. `bundle exec rake vue:create` and follow the steps.
+2. Put your entry point files under `app/assets/vue/views`.
+3. `webpack-dev-server` auto starts alongside `rails server` in dev mode.
+4. Invoke `bundle exec rake vue:compile` to compile assets (you still have to set `RAILS_ENV=production` manually).
+
+> More settings are available in `config/vue.yml`
 
 ## Usage
 
-This gem is fully depends on `vue-cli`. You can do anything with [`vue.config.js`](https://cli.vuejs.org/config/) just don't break `manifest` plugin which required by `vue_cli-rails`.
+### Core
+
+#### Concept: Entry Point and File structure
+
+Webpack sees JavaScript files as the center of page rather than HTML. Thus all styles, images, fonts and other assets are related to a JS files. Any `.js` files under `app/assets/vue/views` will be treated as entry-point files.
+
+Please ONLY puts your entry-point files under `app/assets/vue/views` folder with `.js` extension name.
+
+> Be aware, `.js.erb` and `.vue.erb` are NOT supported. I will explain the reason in [Q&A section](#difference-from-webpacker).
+
+If you are new to modern front-end development, or more specifically with `webpack` in this case, please read [Q&A section](#Q&A) for more information.
+
+#### Helper `vue_entry`
+
+`vue_entry` is like `javascript_include_tag` and `stylesheet_link_tag` which generates relative assets links for your entry point. (It's like a combination of `stylesheet_pack_tag` and `javascript_packs_with_chunks_tag` in Webpacker 4. I will explain why it's different in [Q&A](#Q&A).)
+
+> You may have interest of path alias in `config/vue.yml`.
+
+<details><summary>For example</summary>
+
+- File structure:
+
+ ```text
+ [+] app
+     [+] assets
+         [+] vue
+             [+] components
+                 [+] views - alias `~views`
+                     [-] FooBar.vue - Vue component for `foo/bar`
+             [+] views - Folder for entry points
+                 [+] foo
+                     [-] bar.js - entry point: import '~views/FooBar.vue'
+     [+] controllers
+         [+] foo_controller.rb - controller
+     [+] views
+         [+] layout
+             [-] vue.html.erb - Vue layout
+         [+] foo
+             [-] bar.html.erb - View render: `vue_entry('foo/bar')`
+ ```
+
+- `alias` in `config/vue.yml`:
+
+ ```yaml
+ # default
+   alias:
+     ~views: app/assets/vue/components/views
+ ```
+
+- Your controller:
+
+ ```ruby
+ # app/controllers/foo_controller.rb
+
+ class FooController < ApplicationController
+   layout 'vue'
+ end
+ ```
+
+- Your view:
+
+ ```html
+ <!-- file - app/views/foo/bar.html.erb -->
+ <%= vue_entry('foo/bar') %>
+ ```
+
+- Entry point JS:
+
+ ```js
+ // file - app/assets/vue/views/foo/bar.js
+ import Vue from 'vue';
+
+ import Foo from '~views/FooBar.vue';
+
+ new Vue({
+   render: h => h(Foo),
+ }).$mount('#app');
+ ```
+
+- Your Vue component for your entry point:
+
+ ```vue
+ // file - app/assets/vue/components/views/FooBar.vue
+ <template>
+   <div id="foo-bar">
+     <h1>Foo/bar</h1>
+   </div>
+ </template>
+
+ <script>
+ export default {
+   name: 'FooBar',
+ };
+ </script>
+
+ <style scoped>
+ #foo-bar {
+   color: green;
+ }
+ </style>
+ ```
+
+- Layout:
+
+ ```html
+ <!-- file - app/views/layout/vue.html.erb -->
+ <!DOCTYPE html>
+   <html>
+   <head>
+     <title>Vue</title>
+     <%= csrf_meta_tags %>
+   </head>
+   <body>
+     <div id="app"></div><%= yield %>
+   </body>
+ </html>
+ ```
+
+</details>
+
+#### Public Output Path
+
+If the default setting `vue_assets` does not bother you at all, you can ignore this section.
+
+Actually `public_output_path` in `config/vue.yml` is very simple - just a sub path under `public` directory. You might suffer some problems by changing it without understanding how it works:
+
+- My regular assets no longer work in dev mode server.
+- I lost all my files in `public` folder. (Using a VCS would get your ass saved.)
+- Where are my compiled assets for prod under `public/assets` directory?
+
+<details><summary>TL, DR - DO NOT name it as any path used by anything else</summary>
+
+- It's being used in:
+
+  - Rails dev server will forward all request under `/#{public_output_path}` to `webpack-dev-server`;
+  - Webpack will put all compiled assets under `public/#{public_output_path}`. Unfortunately, it always remove the entire folder before compiling.
+
+- Alternative ways
+
+  - For dev proxy problem: to set different values for `development` and `production` mode in `config/vue.yml`.
+  - For deleting folder when set it to `assets` for prod: run `rake vue:compile[with_rails_assets]` to invoke `rake compile:assets` as well.
+
+</details>
+
+### Available Settings
+
+#### General settings file is `config/vue.yml`
+
+- `manifest_output`
+
+  Where to put `manifest.json` which required by Rails.
+
+  All entry-points will be compiled into assets files. Rails needs `manifest.json` to know what are the files and will serve all its JS/CSS tags.
+
+- `package_manager`
+
+  Pretty straightforward, which package manager will be used. Valid value: `npm` or `yarn`. It does NOT support `pnpm` or other package managers. You can find the reason in [Q&A](#Q&A).
+
+- `public_output_path`
+
+  Because it is very important I put it in core [section](#public-output-path).
+
+- `launch_dev_service` (NOT available for `production` mode)
+
+  `rails server` will launch it when starting by default `vue-cli-service serve`. It will be invoked by `npx vue-cli-service serve` or `yarn exec vue-cli-service serve` depends on your `package_manager`.
+
+- `camelCase` settings will be used in `vue.config.js`
+
+  Please see [available options](#valid-vue-cli-config-options).
+
+#### Customize your webpack configurations in `vue.config.js`
+
+Feel free update `vue.config.js` by yourself. There are some lines of boiler-plate code to adapt `compression-webpack-plugin` and `webpack-bundle-analyzer`.
+
+### Rake Tasks
+
+- `vue:create`
+
+  Install required packages and configurations. You should run this task to get `@vue/cli` initializing your project.
+
+  <details><summary>What it does for you</summary>
+
+  1. Select package manager: Y=`yarn`, N=`npm`
+
+      - Directly use npm if yarn has not been installed.
+      - Prefer yarn by default unless detect `package-lock.json`
+
+  2. Auto install `@vue/cli` globally with your package manager.
+  3. Invoke `vue create` to initialize Vue project.
+
+      When detected existing `package.json`
+      - `Y` - Yes: Fully overwrite
+      - `N` - No: Skip
+      - `A` - Auto: You won't loss anything (`old_config.merge(new_config)`)
+      - `K` - Keep: Keep all your settings already have (`new_config.merge(old_config)`)
+
+  4. Install `js-yaml` and `webpack-assets-manifest`
+  5. Deleting Vue demo code under `src` folder
+  6. Copy demo code to under `app` folder and update `config/routes.rb`
+  7. Copy `vue.rails.js` and `vue.config.js`
+
+      - Do not change `vue.rails.js`! This rake task will always restore `vue.rails.js` back.
+      - Yes you can update `vue.config.js`. Just make sure you know what are you won't break the configuration. You can chance `config/vue.yml` instead.
+
+  8. Generate `config/vue.yml`
+
+      - The convention is: `camelCase` for regular `vue.config.js`, `snake_case` for special usage.
+      - You can find a full list of [Vue CLI config options below](#valid-vue-cli-config-options).
+      - All available options [here](#available-options)
+
+  > BE AWARE: the default option for `config/vue.yml` is `Y` (to replace existing file), otherwise your package manager change won't be saved. All your files won't be overwritten silently except `vue.rails.js`.
+
+  </details>
+
+- `vue:compile`
 
-When you starting `rails server` with development mode, `vue-cli-service serve` will be running at the same time.
+  Compile Vue assets. Please specify `RAILS_ENV=production` to compile assets for production.
 
-Please use `RAILS_ENV=production` to build your production assets. `NODE_ENV` will be ignored!
+  Optional argument: `[with_rails_assets]` to invoke `rake compile:assets` after it finished.
 
-You can put `app/assets/vue/manifest.dev.json` into your VCS ignore list.
+  However, you can invoke `vue-cli-service build` (if `vue-cli-service` installed globally, or you can use `npx vue-cli-service build` or `yarn exec vue-cli-service build`) with `RAILS_ENV=production` to build assets.
 
-## Warning
+  > A good practice is to use [`cross-env`](https://www.npmjs.com/package/cross-env) to pass `RAILS_ENV=production`. So `cross-env RAILS_ENV=production vue-cli-service build` will work on any platform and shell.
+
+- `vue:json_config`
+
+  Converts `config/vue.yml` to JSON to be used by `vue.rails.js`.
+
+  `vue.rails.js` prefers parsing `config/vue.yml` with `js-yaml`. So this is just in case. You may suffer performance issue when your Rails app grow big.
+
+- `vue:support[formats]`
+
+  Adds template or style language support. Vue ships with supporting `pug`, `sass`, `less` and `stylus` out-of-box. How ever, you still have to install some loaders manually if you did not select that language with `vue:create`.
+
+  You can add multiple languages at the same time: `rake vue:support[pug,stylus]`
+
+- `vue:node_env`
+
+  Adds `cross-env` and `npm-run-all` to your `devDependencies` in `package.json`, and adds `dev`, `prod`, `serve` and `rails-s` to `scripts` as well.
+
+  It enables you to start rails dev server alongside `webpack-dev-server` without pain, and compile production assets.
+
+  ```bash
+  # to start `rails s` and `webpack-dev-server` together
+  npm run dev
+  # or
+  yarn dev
+
+  # same as `/usr/bin/env RAILS_ENV=production bundle exec vue:compile`
+  npm run prod
+  # or
+  yarn prod
+  ```
+
+  You can update `scripts/rails-s` and/or `scripts/prod` if you need to more stuff:
+
+  ```json
+  {
+    "scripts": {
+      "rails-s": "cross-env NO_WEBPACK_DEV_SERVER=1 rails s -b 0.0.0.0",
+      "prod": "cross-env RAILS_ENV=production bundle exec rake vue:compile[with_rails_assets]"
+    }
+  }
+  ```
+
+> You may need to invoke with `bundle exec`. Rails 5 and above supports new `rails rake:task` flavor.
+
+## Valid Vue CLI config Options
+
+You can check the full list on [Vue CLI official website](https://cli.vuejs.org/config/).
+
+- Special
+
+  - publicPath - see [`public_output_path`](#public-output-path)
+  - outputDir - see [`public_output_path`](#public-output-path)
+  - configureWebpack - `vue.rails.js` will generate it. `entry`, `output` and `resolve/alias` are heavily required by this gem. So you must manually update it in `vue.config.js` very carefully.
+    <details><summary>Demo</summary>
+
+    Changes to `vue.config.js`
+
+    ```diff
+    const {
+      manifest,
+      pickUpSettings,
+      // isProd,
+    -  // getSettings,
+    +  getSettings,
+    } = railsConfig;
+
+    + const { configureWebpack: { entry, output, resolve } } = getSettings('configureWebpack');
+
+    module.exports = {
+      ...pickUpSettings`
+        outputDir
+        publicPath
+        devServer
+    -    configureWebpack
+
+        filenameHashing
+        lintOnSave
+        runtimeCompiler
+        transpileDependencies
+        productionSourceMap
+        crossorigin
+        css
+        parallel
+        pwa
+        pluginOptions
+      `,
+    +  configureWebpack: {
+    +    entry,
+    +    output,
+    +    resolve,
+    +  },
+      chainWebpack: (config) => {
+    ```
+
+    </details>
+
+- Supported
+
+  - [x] filenameHashing
+  - [x] lintOnSave
+  - [x] runtimeCompiler
+  - [x] transpileDependencies
+  - [x] productionSourceMap
+  - [x] crossorigin
+  - [x] css
+  - [x] devServer
+  - [x] parallel
+  - [x] pwa
+  - [x] pluginOptions
+
+- Unsupported
+
+  - [ ] baseUrl - Deprecated
+  - [ ] assetsDir - ignored
+  - [ ] indexPath - N/A
+  - [ ] pages - N/A
+  - [ ] integrity - N/A
+  - [ ] chainWebpack - directly edit `vue.config.js`
+
+## Trouble-shooting
+
+- My dev server can't find assets
+
+    Sometimes your `webpack-dev-server` might still be running while Rails dev server had terminated. For example, you had executed `exit!` in `pry`.
+
+    Usually `webpack-dev-server` should be killed when next time you start `rails server`. However, for some reason it could fail and the new `webpack-dev-server` will listen to another port. Then you must manually kill them:
+
+    ```bash
+    lsof -i:3080 -sTCP:LISTEN -Pn
+    kill -9 <pid>
+    ```
+
+    Alternatively, you can run `rake vue:node_dev` and always start your dev server with:
+
+    ```bash
+    npm run dev
+    # or
+    yarn dev
+    ```
+
+    > I know it is not Rails-way at all. I don't want to waste time to just get it worked properly in Rails way - you are already using Node, why it bothers you?
+
+<details><summary>Q & A</summary>
+
+## Q&A
+
+### Difference from Webpacker
+
+1. Webpacker is designed more generic. `vue_cli-rails` is opinionated to just get `@vue/cli` worked.
+2. Due to the ease of use of `@vue/cli` this gem is much easier to configure.
+3. This gem does not support `.erb` files at all
+
+    It does not make any sense to me. What's the benefit? What if someone wants to pass dynamic data in production, which the way `erb` supposed to work for? Should it launch webpack and spend maybe 10s to compiled it on-the-fly?
+
+    If you want some dynamic data, you should fetch it via some API. That's my opinion and why I don't even think it should have this feature.
+
+4. This gem only provides 1 helper `vue_entry` rather than `stylesheet_pack_tag`, `javascript_pack_tag`, `javascript_packs_with_chunks_tag`, `image_pack_tag` and etc. in Webpacker
+
+    - First of all, JS files are the center of modern front-end world.
+    - Modern front-end bundlers like webpack offer lots of fancy features with tools like Babel, TypeScript, eslint and etc. They can take care of all your assets, and always give you correct set of assets.
+    - Webpack 4 is even smarter to split common code into chunks.
+    - Vue also provides some awesome features like scoped styles, async components.
+
+    All those functionalities are just working out-of-box. You should not even touch them. There is no point of managing assets by yourself. You will eventually shot on your foot:
+
+    - Why my component does not look right? Because you forgot to change your `stylesheet_pack_tag` after renaming the file.
+    - Why my styles from another component aren't working? Because your component uses scoped styles, which designed to only work for that component.
+    - Why my component does not work anymore? Because there is a new asset and you never write a `_tag` for it.
+
+    Trust me, you are not smarter than webpack. This design will save your time.
+
+5. This gem supports both `npm` and `yarn`. Webpacker requires `yarn` to be installed.
+
+    `npm` and `yarn` are not much different nowadays. I myself prefer `yarn`. But you should be able to use `npm` which ships with node itself to reduce the complexity of deployment.
+
+    Unfortunately it does not support [`pnpm`](#does-it-support-pnpm)
+
+6. Webpacker ships with plenty of node dependencies in `dependencies` section rather than `devDependencies`.
+
+    I'd say this is another thing does not make sense to me. Even there is no real difference for front-end projects, I'd expect a project follows common pattern: the packages will be used in your front-end code should be in `dependencies`.
+
+7. `productionSourceMap` is off by default for production
+
+    You may or may not know [Rails turn this flag on by default](https://github.com/rails/webpacker/issues/769#issuecomment-458216151).
+
+    I just don't buy it. It could be a security issue, especially for a startup or small company where Rails is widely being adapted. It's not fair enough to your customers.
+
+    You can manually turn it on in `config/vue.yml`. It would be totally on your own risk because you intended to do that.
+
+8. It does not put `manifest.json` under `public` folder.
+
+    Again, I have no idea why doing that.
+
+9. `webpack-dev-server` automatically starts with `rails server` in dev mode.
+
+    I don't understand why not to start the killing feature of webpack. Stop wasting your life on stupidly refreshing and waiting the whole page being reloaded while debugging front-end code.
+
+    If your computer is too slow, ask your boss to buy a good one. You deserve it.
+
+10. Less configurations and easier to understand.
+
+    Only a few platform-specific settings available. All others are very standard.
+
+### Can I get rid of `js-yaml` and `webpack-assets-manifest`
+
+Only `webpack-assets-manifest` is a required dependency. It will be used to generate `manifest.json` which required for both dev and prod.
+
+`vue.rails.js` uses `js-yaml` for parsing `config/vue.yml`. It will fallback to `rake vue:json_config` if `js-yaml` not been installed. However, when your Rails app grow bigger, you will very likely find rake tasks start slower and slower.
+
+### Does it support pnpm
+
+No.
+
+The reason is `@vue/cli` does not support `pnpm` very well, or `npm` does not support `@vue/cli`. Who knows.
+
+You still have a chance to get it worked by giving `pnpm --shamefully-flatten` flag, which makes [no difference from `npm` or `yarn`](https://pnpm.js.org/docs/en/faq.html#solution-3).
+
+If someday they support each other, I'd like to support `pnpm` as well.
+
+### Your demo code seems awful
+
+Yes I admit it. Personally I'd like to directly write SPA with webpack tooling for front-end. Back-end will be a separated project, and it will be a Rails-API or Sinatra project if I want to use ActiveRecord.
+
+`webpack-dev-server` can simply be configured with a proxy and I can use something like `npm-run-all` to start 2 services at the same time. I had to write some not-so-good code to get those things done in Rails.
+
+The demo is more Rails way - separated layouts and views. SPA world uses client routers like `vue-router`.
+
+### It does not work on Windows
+
+Sorry, I don't think many gems work on Windows. Please install a virtual machine and run Linux on it. This gem is very likely working with `WSL`, however you may suffer performance issues due to [slow file system](https://github.com/Microsoft/WSL/issues/873#issuecomment-425272829)
 
 Currently `vue.config.js` is reading configurations from `vue.rails.js` which depends on `js-yaml`. It will fallback to `bundle exec rake vue:json_config` without `js-yaml` installed. You may suffer performance issue if your rake tasks are slow.
+
+</details>

data/Rakefile

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

data/bin/console

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
-require "bundler/setup"
-require "vue_cli/rails"
+require 'bundler/setup'
+require 'vue_cli/rails'
 
 # 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.
@@ -10,5 +10,5 @@ require "vue_cli/rails"
 # require "pry"
 # Pry.start
 
-require "pry"
+require 'pry'
 Pry.start(__FILE__)

data/lib/helpers/lib/cmd.rb

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

data/lib/helpers/lib/common.rb

@@ -0,0 +1,7 @@
+unless Object.instance_methods.include?(:blank?)
+  class Object
+    def blank?
+      respond_to?(:empty?) ? !!empty? : !self
+    end
+  end
+end

data/lib/helpers/lib/input_loop.rb

@@ -0,0 +1,41 @@
+class InputLoop
+  DEFAULT_HINT = { 'y' => 'Yes', 'n' => 'No' }.freeze
+
+  def gets(message, list = 'Yn', **hint)
+    default, list = build_list(list)
+    keys_hint, hint = build_hint(list, hint)
+
+    print "#{message} (#{hint}) #{keys_hint}"
+    wait_valid_input(keys_hint, Set.new(list.map(&:downcase)), default)
+  end
+
+  private
+
+  def wait_valid_input(keys_hint, keys, default)
+    loop do
+      r = STDIN.gets.chop.downcase
+      break default if r == ''
+      break r if keys.include?(r)
+
+      print "  [INVALID!] Please retry: #{keys_hint}:"
+    end
+  end
+
+  def build_list(list)
+    list = list.chars
+    default = list.find { |c| c.upcase == c }
+    [default.downcase, list.map { |c| c == default ? c : c.downcase }.uniq]
+  end
+
+  def build_hint(list, hint)
+    valid = "[#{list.join('')}]"
+    hint = DEFAULT_HINT.merge(hint.map { |k, v| [k.to_s.downcase, v] }.to_h)
+    hint = list.map do |c|
+      h = hint[c.downcase]
+      next if h.blank?
+
+      "#{c.upcase}=#{h}"
+    end
+    [valid, hint.join(', ')]
+  end
+end

data/lib/helpers/lib.rb

@@ -0,0 +1,3 @@
+require_relative 'lib/common'
+require_relative 'lib/cmd'
+require_relative 'lib/input_loop'