vue_cli-rails 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a7ee2779059b83202b6057251b245a50fc3b0e7a803c0a61e113da7aa6b10d1
-  data.tar.gz: 8bde5723e1263ec2f0a0063e78c8f7467effe82a661dd6910fc020275b3776fb
+  metadata.gz: e23e30ec06f2e4f661258507ac78cca3ee9b9e2f583fac001b231cfc0194d00f
+  data.tar.gz: 4fe54577949add5a0739a612bf501ef667c1ac7b3964c0c9e7423f1019d0a46a
 SHA512:
-  metadata.gz: 6b244978b9ca71bd0fff983c1f45db81ed07aee91664830fa53a65ba8e85b98d18479736ad4208979d52e67bff54fcdf389a333e09143e312c7f4684c4076a5b
-  data.tar.gz: 30adca9ac7ec73732568e9865666c1035298828893cdecf8c4f92fd14e71d8993ad7638385c428eefc043645e43c37a6543a07da4aaa1b59f0c1349346388298
+  metadata.gz: e866c1167152e328b6b1d750dfabcc88ecf495342d493153e319bd2309d85e6554b2d92bae1a95c7545c65631415486765f14e965505f56f10d3de71f4a10a8c
+  data.tar.gz: d9178061fe4134ab393c386cafd3530aa7fa2e7d3f3d7d485f540fb539f000b87fca2c7b542919e98a7002efaef1f870d6e265113893f25e8b6a0d7352af3747

data/README.md

@@ -28,9 +28,12 @@ And then execute:
 - 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.
+
+    - 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.
+    - Enhanced alias support in `jest.config.js`.
+
 - 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`.
@@ -40,9 +43,13 @@ And then execute:
 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).
+
+    > Don NOT select `In package.json` for "Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?". Some functionalities like alias of jest may not work.
+
+2. Put your JavaScript files under `app/assets/vue/entry_points`.
+3. Insert your entry point by `vue_entry 'entry_point'` in views or `render_vue 'entry_point'` in controllers.
+4. `webpack-dev-server` auto starts alongside `rails server` in dev mode.
+5. Invoke `env RAILS_ENV=production bundle exec rake vue:compile` to compile assets (you still must manually set `RAILS_ENV` to `production`).
 
 > More settings are available in `config/vue.yml`
 
@@ -52,9 +59,11 @@ Out-of-box workflow:
 
 #### 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.
+The root path of your Vue assets is `app/assets/vue`. This gem will generate several folders. However, `app/assets/vue/entry_points` is the only one matters.
 
-Please ONLY puts your entry-point files under `app/assets/vue/views` folder with `.js` extension name.
+Webpack sees one JavaScript file as the center of a web page rather than HTML. Thus all styles, images, fonts and other assets are related to a JS files by `import 'css/png/svg/woff2/json'`. Any `.js` file under `app/assets/vue/entry_points` will be a entry-point.
+
+Please ONLY puts your entry-point files under `app/assets/vue/entry_points` 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).
 
@@ -62,7 +71,7 @@ If you are new to modern front-end development, or more specifically with `webpa
 
 #### 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](#qa).)
+`vue_entry` is like `javascript_include_tag` and `stylesheet_link_tag` which generates relative assets links for your entry point. (It's like `javascript_packs_with_chunks_tag` in Webpacker 4. I will explain why it's different in [Q&A](#qa).)
 
 > You may have interest of path alias in `config/vue.yml`.
 
@@ -74,12 +83,11 @@ If you are new to modern front-end development, or more specifically with `webpa
  [+] app
      [+] assets
          [+] vue
-             [+] components
-                 [+] views - alias `~views`
-                     [-] FooBar.vue - Vue component for `foo/bar`
-             [+] views - Folder for entry points
+             [+] entry_points - Folder for entry points
                  [+] foo
                      [-] bar.js - entry point: import '~views/FooBar.vue'
+             [+] views - alias `~views`
+                 [-] FooBar.vue - Vue component for `foo/bar`
      [+] controllers
          [+] foo_controller.rb - controller
      [+] views
@@ -94,7 +102,7 @@ If you are new to modern front-end development, or more specifically with `webpa
  ```yaml
  # default
    alias:
-     ~views: app/assets/vue/components/views
+     ~views: app/assets/vue/views
  ```
 
 - Your controller:
@@ -117,7 +125,7 @@ If you are new to modern front-end development, or more specifically with `webpa
 - Entry point JS:
 
  ```js
- // file - app/assets/vue/views/foo/bar.js
+ // file - app/assets/vue/entry_points/foo/bar.js
  import Vue from 'vue';
 
  import Foo from '~views/FooBar.vue';
@@ -130,7 +138,7 @@ If you are new to modern front-end development, or more specifically with `webpa
 - Your Vue component for your entry point:
 
  ```vue
- // file - app/assets/vue/components/views/FooBar.vue
+ // file - app/assets/vue/views/FooBar.vue
  <template>
    <div id="foo-bar">
      <h1>Foo/bar</h1>
@@ -168,6 +176,55 @@ If you are new to modern front-end development, or more specifically with `webpa
 
 </details>
 
+#### Use `render_vue` in controllers
+
+Usually you only need `<div id="app"></div>` and `vue_entry 'entry/point'` to render a Vue page. You can use `render_vue 'entry/point'` inside your controller.
+
+This method is simply a wrap of `render html: vue_entry('entry_point'), layout: true`. So you can pass any arguments supported by `render` including `layout`.
+
+<details><summary>For example</summary>
+
+```ruby
+# app/controllers/my_vue_controller
+class MyVueController < ApplicationController
+  layout 'vue_base'
+
+  def foo
+    render_vue 'foo/bar'
+  end
+end
+```
+
+```html
+<!-- app/views/layouts/vue_base.erb -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Vue</title>
+</head>
+<body>
+  <div id="app"></div>
+  <%= yield %>
+</body>
+</html>
+```
+
+```js
+// app/assets/vue/entry_points/foo/bar.js
+
+import Vue from 'vue';
+
+import Bar from '../views/Bar.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(Bar),
+}).$mount('#app');
+```
+
+</details>
+
 #### Public Output Path
 
 If the default setting `vue_assets` does not bother you at all, you can ignore this section.
@@ -192,13 +249,19 @@ Actually `public_output_path` in `config/vue.yml` is very simple - just a sub pa
 
 </details>
 
+#### Summary
+
+If you still feel confusing, please create a new project and select copy demo code.
+
+I will explain what happens in [Explanation by Demo](#explanation-by-demo).
+
 ### Available Settings
 
 #### General settings file is `config/vue.yml`
 
 - `manifest_output`
 
-  Where to put `manifest.json` which required by Rails.
+  Where to put `manifest.json` which required by Rails production mode. You can set it in development mode for inspection.
 
   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.
 
@@ -218,9 +281,13 @@ Actually `public_output_path` in `config/vue.yml` is very simple - just a sub pa
 
   Please see [available options](#valid-vue-cli-config-options).
 
+- `alias`
+
+    It's basically `resolve/alias` for Webpack. However, you don't have to config this settings in `.eslintrc.js` and `jest.config.js` again and again. `@vue/cli` will pass the settings to eslint via its plugin. The configuration for jest will be generated and passed to `jest.config.js` through `vue.rails.js`.
+
 #### 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`.
+Feel free to 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
 
@@ -313,7 +380,7 @@ Feel free update `vue.config.js` by yourself. There are some lines of boiler-pla
   }
   ```
 
-> You may need to invoke with `bundle exec`. Rails 5 and above supports new `rails rake:task` flavor.
+> You may need to invoke `rake` with `bundle exec`. Rails 5 and above supports new `rails rake:task` flavor.
 
 ## Valid Vue CLI config Options
 
@@ -505,3 +572,173 @@ Sorry, I don't think many gems work on Windows. Please install a virtual machine
 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>
+
+## Explanation by Demo
+
+<!-- <details><summary>Explanation by Demo</summary> -->
+
+### Install
+
+Run `bundle exec rake vue:create` or `rails vue:create` in Rails 5+, and follow the steps:
+
+```
+$ bundle exec rake vue:create
+Which package manager to use? (Y=yarn, N=npm) [Yn]
+...
+? Generate project in current directory? Yes
+...
+? Check the features needed for your project: Babel, Linter, Unit
+? Pick a linter / formatter config: Airbnb
+? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
+? Pick a unit testing solution: Jest
+? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
+...
+Do you want to copy demo code? (Y=Yes, N=No) [yN]y
+...
+```
+
+### First Taste
+
+Now with `rails s`, open `http://localhost:3000/vue_demo/foo` in a browser you should be able to see a red big red "Foo" with blue "Hello Vue!".
+
+Do not stop your rails server, open `app/assets/vue/views/Foo.vue` in your editor:
+
+```diff
+<template>
+  <div id="app">
+    <h1>Foo</h1>
+-    <HelloWorld msg="Vue!"></HelloWorld>
++    <HelloWorld msg="Rails!"></HelloWorld>
+  </div>
+</template>
+```
+
+Change `msg="Vue!"` to `msg="Rails!"` and save. You will the text in your browser changed to "Hello Rails!". You can change styles or edit `app/assets/vue/components/HelloWorld.vue` and immediately see the result as well.
+
+This functionality is called [HMR (Hot Module Replacement)](https://webpack.js.org/concepts/hot-module-replacement/) which is the killing feature provided by webpack-dev-server. You will soon fail in love with this feature and never want to go back to manually refresh your browser again and again.
+
+### What in the box
+
+```
+.
+├── app
+│   ├── assets
+│   │   └── vue
+│   │       ├── components
+│   │       │   ├── HelloWorld.vue
+│   │       │   └── layouts
+│   │       │       ├── App.vue
+│   │       │       └── index.js
+│   │       ├── entry_points
+│   │       │   ├── bar.js
+│   │       │   └── foo.js
+│   │       └── views
+│   │           ├── Bar.vue
+│   │           └── Foo.vue
+│   ├── controllers
+│   │   └── vue_demo_controller.rb
+│   └── views
+│       ├── layouts
+│       │   └── vue_demo.html.erb
+│       └── vue_demo
+│           └── foo.html.erb
+├── config
+│   ├── routes.rb
+│   └── vue.yml
+├── tests
+│   └── unit
+│       └── example.spec.js
+├── .browserslistrc
+├── .editorconfig
+├── .eslintrc.js
+├── .gitignore
+├── babel.config.js
+├── jest.config.js
+├── package.json
+├── postcss.config.js
+├── vue.config.js
+├── vue.rails.js
+└── yarn.lock
+```
+
+You can run ESLint by
+
+    $ yarn lint
+
+Run Jest
+
+    $ yarn test:unit
+
+### Compile Assets
+
+First let's compile the assets
+
+```
+$ env RAILS_ENV=production bundle exec rake vue:compile
+run: yarn exec vue-cli-service build
+...
+  File                                      Size             Gzipped
+
+  public/vue_assets/js/chunk-vendors.b54    82.49 KiB        29.80 KiB
+  85759.js
+  public/vue_assets/js/foo.dcbad15e.js      2.74 KiB         1.23 KiB
+  public/vue_assets/js/bar.d4fc59af.js      2.03 KiB         1.00 KiB
+  public/vue_assets/css/foo.4bbe6793.css    0.12 KiB         0.11 KiB
+  public/vue_assets/css/bar.96de90a8.css    0.02 KiB         0.04 KiB
+
+  Images and other types of assets omitted.
+...
+```
+
+Your file names could be different from mine. Don't worry, we won't look those files. There are the files you got:
+
+```
+.
+├── app
+│   ├── assets
+│   │   └── vue
+│   │       └── manifest.json
+└── public
+    └── vue_assets
+        ├── css
+        │   ├── bar.96de90a8.css
+        │   └── foo.4bbe6793.css
+        └── js
+            ├── bar.d4fc59af.js
+            ├── chunk-vendors.b5485759.js
+            └── foo.dcbad15e.js
+```
+
+Let have a look at `app/assets/vue/manifest.json`:
+
+```json
+{
+  "bar.css": "/vue_assets/css/bar.96de90a8.css",
+  "bar.js": "/vue_assets/js/bar.d4fc59af.js",
+  "chunk-vendors.js": "/vue_assets/js/chunk-vendors.b5485759.js",
+  "entrypoints": {
+    "bar": {
+      "js": [
+        "/vue_assets/js/chunk-vendors.b5485759.js",
+        "/vue_assets/js/bar.d4fc59af.js"
+      ],
+      "css": [
+        "/vue_assets/css/bar.96de90a8.css"
+      ]
+    },
+    "foo": {
+      "js": [
+        "/vue_assets/js/chunk-vendors.b5485759.js",
+        "/vue_assets/js/foo.dcbad15e.js"
+      ],
+      "css": [
+        "/vue_assets/css/foo.4bbe6793.css"
+      ]
+    }
+  },
+  "foo.css": "/vue_assets/css/foo.4bbe6793.css",
+  "foo.js": "/vue_assets/js/foo.dcbad15e.js"
+}
+```
+
+<!-- </details> -->

data/lib/helpers/scripts/vue_create.rb

@@ -27,6 +27,7 @@ class VueCreate
       copy_demo?
       copy_config
       generate_vue_yml
+      ensure_entry_point!
       fix_jest_config!
       puts 'vue:create finished!'
     ensure
@@ -101,6 +102,9 @@ class VueCreate
     end
     pub_dir = @root.join('public')
     FileUtils.mv(pub_dir, "#{pub_dir}.backup")
+    reademe = @root.join('README.md')
+    reademe = reademe.exist? && reademe
+    FileUtils.mv(reademe, "#{reademe}.backup") if reademe
 
     begin
       @pm.exec('vue create', '', "-n -m #{@pm.package_manager} .")
@@ -109,6 +113,10 @@ class VueCreate
       FileUtils.rm_rf(pub_dir) if pub_dir.exist?
       FileUtils.mv("#{pub_dir}.backup", pub_dir)
       FileUtils.mv("#{vue_config}.backup", vue_config) if backup_vue_config
+      if reademe
+        FileUtils.rm_f(reademe)
+        FileUtils.mv("#{reademe}.backup", reademe)
+      end
     end
 
     # merge gitignore
@@ -169,16 +177,17 @@ class VueCreate
     foo = false
     bar = false
     route_lines.each do |line|
-      foo ||= line.include?('vue#foo')
-      bar ||= line.include?('vue#bar')
+      foo ||= line.include?('vue_demo#foo')
+      bar ||= line.include?('vue_demo#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, "  get 'vue_demo/baz' => 'vue_demo#baz'") unless foo
+    route_lines.insert(end_line, "  get 'vue_demo/bar' => 'vue_demo#bar'") unless bar
+    route_lines.insert(end_line, "  get 'vue_demo/foo' => 'vue_demo#foo'") unless foo
     route_lines.insert(end_line, '  # Example of vue_cli-rails')
     routes.write(route_lines.join("\n"))
   end
@@ -205,12 +214,27 @@ class VueCreate
     yml_dest.write(yml)
   end
 
+  def ensure_entry_point!
+    %w[entry_points assets components utils views].each do |dir_name|
+      dir = @root.join("app/assets/vue/#{dir_name}")
+      FileUtils.mkdir_p(dir) unless dir.exist?
+    end
+
+    ep_dir = @root.join('app/assets/vue/entry_points')
+    return if Dir[ep_dir.join('**/*.js')].any?
+    ep_dir.join('entry_point_demo.js').write("console.log('This is a demo entry point')")
+  end
+
   def fix_jest_config!
     jest_file = @root.join('jest.config.js')
     return unless jest_file.exist?
 
     jest_config = %x`node -e "console.log(JSON.stringify(require('./jest.config.js')))"`
     jest_config = JSON.parse(jest_config)
+    if jest_config['transformIgnorePatterns'] &&
+       !jest_config['transformIgnorePatterns'].include?('<rootDir>/node_modules/')
+      jest_config['transformIgnorePatterns'] << '<rootDir>/node_modules/'
+    end
     jest_config.delete('moduleNameMapper')
     jest = <<~JS
       const { jestModuleNameMapper: moduleNameMapper } = require('./vue.rails');

data/lib/source/app/assets/vue/components/HelloWorld.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="hello">
+    <h2>Hello {{ msg }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<style scoped>
+h2 {
+  color: blue;
+}
+</style>

data/lib/source/app/assets/vue/entry_points/bar.js

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+import Bar from '../views/Bar.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(Bar),
+}).$mount('#app');

data/lib/source/app/assets/vue/entry_points/foo.js

@@ -0,0 +1,4 @@
+import launch from '../components/layouts';
+import Foo from '../views/Foo.vue';
+
+launch(Foo);

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

@@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <h1>Foo</h1>
+    <HelloWorld msg="Vue!"></HelloWorld>
+  </div>
+</template>
+
+<script>
+import HelloWorld from '../components/HelloWorld.vue';
+
+export default {
+  name: 'Foo',
+  components: { HelloWorld },
+};
+</script>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>

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

@@ -0,0 +1,11 @@
+class VueDemoController < ApplicationController
+  layout 'vue_demo'
+
+  def bar
+    render_vue 'bar'
+  end
+
+  def baz
+    render html: vue_entry('foo')
+  end
+end

data/lib/source/app/views/layouts/{vue.html.erb → vue_demo.html.erb}

@@ -5,7 +5,7 @@
   <%= csrf_meta_tags %>
 </head>
 <body>
-<div id="app"></div>
-<%= yield %>
+  <div id="app"></div>
+  <%= yield %>
 </body>
 </html>

data/lib/source/vue.rails.js

@@ -2,6 +2,7 @@ const { env } = require('process');
 
 module.exports = (() => {
   let settings = {};
+  const assets = {};
 
   try {
     /* eslint-disable global-require,import/no-extraneous-dependencies */
@@ -36,7 +37,7 @@ module.exports = (() => {
       devServer.contentBase = resolve(root, devServer.contentBase);
     }
     const entry = {};
-    const assetRoot = resolve(root, 'app/assets/vue/views');
+    const assetRoot = resolve(root, 'app/assets/vue/entry_points');
     const findAllJsFiles = (path) => {
       readdirSync(path).forEach((fn) => {
         const filename = resolve(path, fn);
@@ -58,7 +59,7 @@ module.exports = (() => {
     settings = {
       env: railsEnv,
       root,
-      manifestOutput: resolve(root, manifestOutput),
+      manifestOutput: manifestOutput && resolve(root, manifestOutput),
 
       outputDir: resolve(root, 'public', pop),
       publicPath: `/${pop}/`,
@@ -80,7 +81,15 @@ module.exports = (() => {
         }/$1`,
       }), {}),
 
-      devServer,
+      devServer: devServer && {
+        ...devServer,
+        before(app) {
+          app.get('/__manifest/', ({ query }, res) => {
+            const entryPoint = Object.keys(query || {})[0];
+            res.json(entryPoint === '!!INSPECT!!' ? assets : assets.entrypoints[entryPoint]);
+          });
+        },
+      },
       filenameHashing,
       lintOnSave,
       runtimeCompiler,
@@ -109,17 +118,19 @@ module.exports = (() => {
       return v === undefined ? cfg : { ...cfg, [k]: v };
     }, {});
   const { jestModuleNameMapper } = settings;
+  const isProd = settings.env === 'production';
 
   return {
-    isProd: settings.env === 'production',
+    isProd,
     manifest: {
       /* eslint-disable-next-line global-require,import/no-extraneous-dependencies */
       plugin: require('webpack-assets-manifest'),
       options: {
+        assets,
         entrypoints: true,
-        writeToDisk: true,
+        writeToDisk: !!settings.manifestOutput,
         publicPath: true,
-        output: settings.manifestOutput,
+        output: settings.manifestOutput || '',
       },
     },
     jestModuleNameMapper,

data/lib/source/vue.yml

@@ -1,17 +1,16 @@
 default: &default
   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
-    ~v-launcher: app/assets/vue/components/layouts
+    # '~': app/assets/vue/components
 
 development:
   <<: *default
+  # manifest_output: tmp/manifest.json
   devServer:
     contentBase: public
     host: localhost

data/lib/vue_cli/rails/configuration.rb

@@ -4,6 +4,16 @@ module VueCli
       def initialize
         @root = ::Rails.root
         load_config(YAML.load_file(@root.join('config/vue.yml')))
+        self.class.setup(self)
+      end
+
+      def entry_assets_prod(entry_point)
+        self.class.entry_points[entry_point]
+      end
+
+      def entry_assets_dev(entry_point)
+        assets = Net::HTTP.get(URI("#{self.class.dev_server_url}?#{entry_point}"))
+        assets.blank? ? nil : JSON.parse(assets)
       end
 
       def node_env
@@ -33,9 +43,6 @@ module VueCli
         c['root'] = @root.to_s
         cw['output'] = config['js_output'] if config['js_output'].present?
         c['manifestOutput'] = config['manifest_output']
-        unless c['manifestOutput'].presence
-          raise(Error, 'Incorrect manifest_output in config/vue.yml')
-        end
 
         public_output_path = c['public_output_path'] || 'vue_assets'
         c['outputDir'] = File.join(resolve('public'), public_output_path)
@@ -60,7 +67,7 @@ module VueCli
 
         jest = {}
         c['jestModuleNameMapper'] = jest
-        resolve_config(c, 'manifestOutput')
+        resolve_config(c, 'manifestOutput') if c['manifestOutput'].present?
         config['alias']&.tap do |aliases|
           aliases.each_key do |k|
             key = k.gsub(%r<(?=[-{}()+.,^$#/\s\]])>, '\\')
@@ -72,8 +79,7 @@ module VueCli
         end
         dev_server = c['devServer'] || {}
         resolve_config(dev_server, 'contentBase')
-
-        self.class.manifest_file = c['manifestOutput']
+      ensure
         @config = c
       end
 
@@ -94,26 +100,24 @@ module VueCli
         JSON.pretty_generate(@config)
       end
 
-      def manifest_data
-        self.class.manifest.data
-      end
-
       class << self
+        attr_reader :dev_server_url, :entry_points
+
         def instance
           @instance ||= new
         end
 
-        def manifest_file=(val)
-          @manifest_file = val ? Pathname.new(val) : nil
-        end
+        def setup(config)
+          config.dev_server_host.presence&.tap do |host|
+            @dev_server_url = "http://#{host}/__manifest/"
+          end
 
-        def manifest
-          @manifest ||= OpenStruct.new(mtime: nil, data: {})
-          if @manifest_file&.exist? && @manifest.mtime != @manifest_file.mtime
-            @manifest.mtime = @manifest_file.mtime
-            @manifest.data = JSON.parse(@manifest_file.read)
+          @entry_points = {}
+          manifest = config['manifestOutput'].presence
+          manifest &&= Pathname.new(manifest)
+          if manifest&.exist?
+            @entry_points = (JSON.parse(manifest.read || '{}')['entrypoints'] || {}).freeze
           end
-          @manifest
         end
       end
 
@@ -124,7 +128,7 @@ module VueCli
       end
 
       def entry
-        base_dir = @root.join('app/assets/vue/views')
+        base_dir = @root.join('app/assets/vue/entry_points')
         start = base_dir.to_s.size + 1
         Dir[base_dir.join('**/*.js')].each_with_object({}) do |filename, h|
           h[filename[start...-3]] = filename

data/lib/vue_cli/rails/engine.rb

@@ -4,14 +4,32 @@ module VueCli
 
     class Engine < ::Rails::Engine
       initializer 'vue_cli' do |app|
-        if ::Rails.env.development? && defined?(::Rails::Server)
-          require 'vue_cli/rails/dev_server_proxy'
-          app.middleware.insert_before(0, DevServerProxy)
-          Engine.start_wds! if ENV['NO_WEBPACK_DEV_SERVER'].blank?
+        if defined?(::Rails::Server)
+          is_dev = ::Rails.env.development?
+
+          if is_dev
+            require 'vue_cli/rails/dev_server_proxy'
+
+            app.middleware.insert_before(0, DevServerProxy)
+            Engine.start_wds! if ENV['NO_WEBPACK_DEV_SERVER'].blank?
+          end
+
+          Configuration.class_eval do
+            alias_method :entry_assets, :"entry_assets_#{is_dev ? 'dev' : 'prod'}"
+            remove_method :entry_assets_dev, :entry_assets_prod
+          end
+          Configuration.instance unless is_dev
         end
 
         ::ActiveSupport.on_load(:action_controller) do
-          ::ActionController::Base.helper(Helper)
+          ::ActionController::Base.class_eval do
+            helper(Helper)
+            include(Helper)
+
+            define_method(:render_vue) do |entry, **args|
+              render({ html: vue_entry(entry), layout: true }.merge(args))
+            end
+          end
         end
 
         ::ActiveSupport.on_load(:action_view) do
@@ -28,7 +46,9 @@ module VueCli
             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')
+
+          cmd = config['launch_dev_service'].presence || 'vue-cli-service serve'
+          config.node_env.exec(cmd)
         end
       end
     end

data/lib/vue_cli/rails/helper.rb

@@ -1,21 +1,18 @@
 module VueCli
   module Rails
     module Helper
-      def vue_entry(name)
-        @config ||= VueCli::Rails::Configuration.instance
+      def vue_entry(entry)
+        assets = VueCli::Rails::Configuration.instance.entry_assets(entry)
+        raise(ArgumentError, "Vue entry (#{entry}) not found!") if assets.blank?
 
-        entry = (@config.manifest_data['entrypoints'] || {})[name]
-        return raise(VueCli::Rails::Error, "Not found vue entry point: #{name}") if entry.blank?
-
-        assets = []
-        (entry['css'] || []).each do |css|
-          assets << stylesheet_link_tag(css)
+        tags = ''.dup
+        (assets['css'] || []).each do |css|
+          tags << %{<link href="#{css}" rel="stylesheet">}
         end
-        (entry['js'] || []).each do |js|
-          assets << javascript_include_tag(js)
+        (assets['js'] || []).each do |js|
+          tags << %{<script src="#{js}"></script>}
         end
-
-        assets.join('').html_safe
+        tags.html_safe
       end
     end
   end

data/lib/vue_cli/rails/node_env.rb

@@ -11,7 +11,7 @@ module VueCli
       def use!(manager)
         @pm = manager.to_sym
         raise(ArgumentError, "Unsupported manager: #{@pm}") unless %i[npm yarn].include?(@pm)
-        raise(VueCli::Rails::Error, "Not installed: #{@pm}") unless try(:"#{@pm}?")
+        raise(ArgumentError, "Not installed: #{@pm}") unless try(:"#{@pm}?")
       end
 
       def reset

data/lib/vue_cli/rails/version.rb

@@ -1,5 +1,5 @@
 module VueCli
   module Rails
-    VERSION = '0.2.0'.freeze
+    VERSION = '0.3.0'.freeze
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue_cli-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - James Chen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-03-10 00:00:00.000000000 Z
+date: 2019-03-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -131,16 +131,16 @@ files:
 - lib/helpers/scripts/install_rails.rb
 - lib/helpers/scripts/vue_command.rb
 - lib/helpers/scripts/vue_create.rb
+- lib/source/app/assets/vue/components/HelloWorld.vue
 - lib/source/app/assets/vue/components/layouts/App.vue
 - lib/source/app/assets/vue/components/layouts/index.js
-- lib/source/app/assets/vue/components/views/Bar.vue
-- lib/source/app/assets/vue/components/views/Foo.vue
-- lib/source/app/assets/vue/views/bar.js
-- lib/source/app/assets/vue/views/foo.js
-- lib/source/app/controllers/vue_controller.rb
-- lib/source/app/views/layouts/vue.html.erb
-- lib/source/app/views/vue/bar.html.erb
-- lib/source/app/views/vue/foo.html.erb
+- lib/source/app/assets/vue/entry_points/bar.js
+- lib/source/app/assets/vue/entry_points/foo.js
+- lib/source/app/assets/vue/views/Bar.vue
+- lib/source/app/assets/vue/views/Foo.vue
+- lib/source/app/controllers/vue_demo_controller.rb
+- lib/source/app/views/layouts/vue_demo.html.erb
+- lib/source/app/views/vue_demo/foo.html.erb
 - lib/source/vue.config.js
 - lib/source/vue.rails.js
 - lib/source/vue.yml
@@ -174,7 +174,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.2
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: Get vue-cli working with Rails

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

@@ -1,17 +0,0 @@
-<template>
-  <div id="foo">
-    <h1>Foo</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Foo',
-};
-</script>
-
-<style scoped>
-#foo {
-  color: red;
-}
-</style>

data/lib/source/app/assets/vue/views/bar.js

@@ -1,4 +0,0 @@
-import launch from '~v-launcher';
-import Bar from '~views/Bar.vue';
-
-launch(Bar);

data/lib/source/app/assets/vue/views/foo.js

@@ -1,4 +0,0 @@
-import launch from '~v-launcher';
-import Foo from '~views/Foo.vue';
-
-launch(Foo);

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

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

data/lib/source/app/views/vue/bar.html.erb

@@ -1 +0,0 @@
-<%= vue_entry('bar') %>