rails_vue_melt 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1d1d0c588ea63fa010025d75154666f382469e6a
+  data.tar.gz: 27395b5d4d5f7287160ce3922deb00876a39a117
+SHA512:
+  metadata.gz: b7daa9fd6e8dbd9233f37d63bcea7d132f2685c25a7e14245902bcdf2c9b08b238e90a7944a22f90cd4c36c278c21093030cace6aa67f3060642ba3341cf9e3c
+  data.tar.gz: 1766a400402fb44ec0d4b779569971f1166e3910125aa334b8e4d20a8dc4f9c5daf04bdd8e7c79c9e0b29a7ef71430a81f260fa8ac89e778a8f82e9c3c3dccf2

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 midnightSuyama
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,131 @@
+# RailsVueMelt
+
+[![Gem Version](https://badge.fury.io/rb/rails_vue_melt.svg)](http://badge.fury.io/rb/rails_vue_melt)
+[![CircleCI](https://circleci.com/gh/midnightSuyama/rails_vue_melt.svg?style=shield)](https://circleci.com/gh/midnightSuyama/rails_vue_melt)
+
+Rails view with webpack=vue optimizer
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'rails_vue_melt'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install rails_vue_melt
+
+## Usage
+
+    $ rails new APP_PATH --webpack=vue
+    ...
+    $ rails generate vue_melt
+
+### Generate
+
+#### create `app/javascript/packs/vue_melt`
+
+* application.js
+* options/
+    * users.js
+* components/
+    * Hello.vue
+* store/
+    * index.js
+    * getters.js
+    * actions.js
+    * mutations.js
+    * mutation-types.js
+
+#### insert `app/views/layouts/application.html.erb`
+
+```html
+    <%= javascript_pack_tag 'vue_melt/application' %>
+    <meta name="turbolinks-cache-control" content="no-cache">
+```
+
+#### gsub `config/webpack/loaders/vue.js`
+
+```javascript
+    extractCSS: false,
+```
+
+#### install packages
+
+* [vuex](https://www.npmjs.com/package/vuex)
+* [vue-assign-model](https://www.npmjs.com/package/vue-assign-model)
+* [lodash.clonedeep](https://www.npmjs.com/package/lodash.clonedeep)
+
+### Example
+
+```erb
+<!-- app/views/**/*.html.erb -->
+
+<div data-vue="users">
+  <input value="Example" v-model="user.name">
+  <p>User Name: {{ user.name }}</p>
+
+  <hello></hello>
+</div>
+```
+
+Add `data-vue` attribute, the value is file name in `app/javascript/packs/vue_melt/options`. Vue instance is mounted at `turbolinks:load` event and unmounted at `turbolinks:visit` event.
+
+Before Vue rendering, `value`, `checked` or `selected` attributes of elements with `v-model` is automatically assigned to Vue model. Therefore, `form_with` and so on using Active Model can use data binding easily.
+
+#### accepts_nested_attributes_for
+
+JSON of `data-vue-model` is assigned to Vue model. Also, `v-model` with prefix `_` is not assigned for `v-for` scope.
+
+```erb
+<!-- app/views/**/*.html.erb -->
+
+<div data-vue="users">
+  <%= content_tag :div, 'data-vue-model': "{ \"items\": #{user.items.to_json} }" do %>
+    <div v-for="(_item, i) in items">
+      <input type="text" :name="'user[items_attributes][' + i + '][name]'" v-model="_item.name">
+      <input type="hidden" :name="'user[items_attributes][' + i + '][id]'" :value="_item.id" v-if="_item.id">
+    </div>
+  <% end %>
+</div>
+```
+
+With Add and Remove function:
+
+```erb
+<!-- app/views/**/*.html.erb -->
+
+<div data-vue="users">
+  <%= content_tag :div, 'data-vue-model': "{ \"items\": #{user.items.to_json}, \"items_destroy_ids\": [] }" do %>
+    <div v-for="(_item, i) in items">
+      <input type="text" :name="'user[items_attributes][' + i + '][name]'" v-model="_item.name">
+      <input type="hidden" :name="'user[items_attributes][' + i + '][id]'" :value="_item.id" v-if="_item.id">
+      <button type="button" @click="_item.hasOwnProperty('id') ? items_destroy_ids.push(items.splice(i, 1)[0].id) : items.splice(i, 1)">Remove</button>
+    </div>
+
+    <template v-for="(id, i) in items_destroy_ids">
+      <input type="hidden" :name="'user[items_attributes][' + (items.length+i) + '][id]'" :value="id">
+      <input type="hidden" :name="'user[items_attributes][' + (items.length+i) + '][_destroy]'" value="1">
+    </template>
+
+    <button type="button" @click="items.push({ name: '' })">Add</button>
+  <% end %>
+</div>
+```
+
+## Development
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/midnightSuyama/rails_vue_melt.
+
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,28 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'RailsVueMelt'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+
+
+require 'bundler/gem_tasks'
+
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/lib/generators/vue_melt/source/application.js

@@ -0,0 +1,33 @@
+import Vue from 'vue/dist/vue.esm'
+import store from './store'
+import cloneDeep from 'lodash.clonedeep'
+
+import VueAssignModel from 'vue-assign-model'
+Vue.use(VueAssignModel)
+
+const storeState = cloneDeep(store.state)
+var vms = []
+var options = {}
+var requireContext = require.context("./options", false, /\.js$/)
+requireContext.keys().forEach(key => {
+  let name = key.split('/').pop().split('.').shift()
+  options[name] = requireContext(key).default
+})
+
+document.addEventListener('turbolinks:load', () => {
+  let templates = document.querySelectorAll('[data-vue]')
+  for (let el of templates) {
+    let vm = new Vue(
+      Object.assign(options[el.dataset.vue], { el, store })
+    )
+    vms.push(vm)
+  }
+})
+
+document.addEventListener('turbolinks:visit', () => {
+  for (let vm of vms) {
+    vm.$destroy()
+  }
+  vms = []
+  store.replaceState(cloneDeep(storeState))
+})

data/lib/generators/vue_melt/source/components/Hello.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    message: 'Hello Vue!'
+  })
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

data/lib/generators/vue_melt/source/options/users.js

@@ -0,0 +1,9 @@
+import Hello from '../components/Hello.vue'
+
+export default {
+  components: {
+    Hello
+  },
+  data: () => ({
+  })
+}

data/lib/generators/vue_melt/source/store/actions.js

@@ -0,0 +1 @@
+import * as types from './mutation-types'

data/lib/generators/vue_melt/source/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import * as getters from './getters'
+import * as actions from './actions'
+import * as mutations from './mutations'
+
+Vue.use(Vuex)
+
+const state = {
+}
+
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations
+})

data/lib/generators/vue_melt/source/store/mutations.js

@@ -0,0 +1 @@
+import * as types from './mutation-types'

data/lib/generators/vue_melt/vue_melt_generator.rb

@@ -0,0 +1,21 @@
+class VueMeltGenerator < Rails::Generators::Base
+  source_root File.expand_path('../source', __FILE__)
+
+  def create
+    directory '.', 'app/javascript/packs/vue_melt'
+  end
+
+  def edit
+    inject_into_file 'app/views/layouts/application.html.erb', before: /^\s*<\/head>/ do
+<<-EOS
+    <%= javascript_pack_tag 'vue_melt/application' %>
+    <meta name="turbolinks-cache-control" content="no-cache">
+EOS
+    end
+    gsub_file 'config/webpack/loaders/vue.js', 'extractCSS: true,', 'extractCSS: false,'
+  end
+
+  def yarn
+    run 'yarn add vuex vue-assign-model lodash.clonedeep'
+  end
+end

data/lib/rails_vue_melt/version.rb

@@ -0,0 +1,3 @@
+module RailsVueMelt
+  VERSION = '0.1.0'
+end

data/lib/rails_vue_melt.rb

@@ -0,0 +1,2 @@
+module RailsVueMelt
+end

metadata

@@ -0,0 +1,100 @@
+--- !ruby/object:Gem::Specification
+name: rails_vue_melt
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- midnightSuyama
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-08-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.1.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.1.2
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: generator_spec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Rails view with webpack=vue optimizer
+email:
+- midnightSuyama@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- lib/generators/vue_melt/source/application.js
+- lib/generators/vue_melt/source/components/Hello.vue
+- lib/generators/vue_melt/source/options/users.js
+- lib/generators/vue_melt/source/store/actions.js
+- lib/generators/vue_melt/source/store/getters.js
+- lib/generators/vue_melt/source/store/index.js
+- lib/generators/vue_melt/source/store/mutation-types.js
+- lib/generators/vue_melt/source/store/mutations.js
+- lib/generators/vue_melt/vue_melt_generator.rb
+- lib/rails_vue_melt.rb
+- lib/rails_vue_melt/version.rb
+homepage: https://github.com/midnightSuyama/rails_vue_melt
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.2
+signing_key: 
+specification_version: 4
+summary: Rails view with webpack=vue optimizer
+test_files: []