vue_on_rails 0.9.5 → 0.9.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 101e6dafb8b7e2ac7a5f4170b913ee26ff523453
-  data.tar.gz: a451623e1205737a8d71283ea5ab153cb7c3c538
+  metadata.gz: 44cba178d9fcdee4a09bcb8e6969b510590fa589
+  data.tar.gz: d155a02addcf11b43bf9e540695b0d3bbdf7483d
 SHA512:
-  metadata.gz: 4ec1d7709cfb2be51a5c3183b85ddb0cabb2e942440dafe8d3406db263b309a5135c0472748080233c51f0e1198e34027cde8e4e78673dc2793e02949e2263b9
-  data.tar.gz: f66ecb179f33378e6526f89c7d5d30d3de1843b81c487c45e0a786e5d9c2284667303e2f021328a53c3df136b943f53c01b7d9d928b22c6295fc5f2493720243
+  metadata.gz: 5a0099fc74fb0918e829317f94c65abc04d7c7aac797d2f7d73b70a535fed81576e2862ba01e7a4bd8d7c3ebdab287eafbeea13856d48332fe68b54294b1017e
+  data.tar.gz: 1df3b0d77feb32ff16cbec3b32ae920ebf35c87c425acc1160c6bf5f0bb18535a69f78407f07b7395ca1a26d86845fa2f87d3c1c60b4d7630bcdf42ff46a7874

data/README.md

@@ -1,8 +1,17 @@
 # VueOnRails
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/vue/on/rails`. To experiment with that code, run `bin/console` for an interactive prompt.
+Easy and simple way to use Vue.js with Ruby on Rails and Turbolinks 5.
 
-TODO: Delete this and the text above, and describe your gem
+This gem is intended to sprinkle your Rails app with Vue components. 
+It's compatible with Turbolinks caching system.
+
+If you are building a pure SPA app with Vue and Rails without Turbolinks, please look into:
+https://github.com/adambutler/vuejs-rails
+
+## Requirements
+
+- [Vue.js](https://vuejs.org/v2/guide/installation.html) >= 2.0
+- [Turbolinks](https://github.com/turbolinks/turbolinks) >= 5.0
 
 ## Installation
 
@@ -20,19 +29,69 @@ Or install it yourself as:
 
     $ gem install vue_on_rails
 
+
 ## Usage
 
-TODO: Write usage instructions here
+Require vue_on_rails in application.js
+```
+//= require vue_on_rails
+```
+
+Init and destroy Vue components:
+```
+# Mount Vue components
+document.addEventListener 'turbolinks:load', ->
+  VueOnRails.init()
+
+# Destroy Vue components
+document.addEventListener 'turbolinks:before-render', ->
+  VueOnRails.destroy()
+```
+
+Example Vue component in my_component.coffee
+```
+@MyComponent =
+  props: ['myProp']
+  template: '<div>A custom component with {{myProp}}</div>'
+```
+
+Add component in view.html.erb
+```
+<%= vue_component 'MyComponent', my_prop: 'awesome prop!' %>
+<!-- This will output -->
+<div data-vue-component="MyComponent" data-vue-props="{&quot;my-prop&quot;:&quot;awesome prop!&quot;}">
+   <div>A custom component with awesome prop!</div>
+</div>
+```
+
+## View Helper
+A view helper generate a div with component and props:
+```
+def vue_component(component_name, props = {}, html_options = {})
+```
+Example with html tag:
+```
+<%= vue_component 'UserComponent', { user_id: 1 }, { class: 'd-inline-block align-middle' } %>
+<!-- Becomes: -->
+<div data-vue-component="UserComponent" data-vue-props="{'user-id': 1}" class="d-inline-block align-middle">
+...
+</div>
+```
+
+## Props
 
-## Development
+### Kebab-case (hyphen-delimited)
 
-After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+Props are automatically hyphen-delimited to follow vuejs and HTML5 standard.
 
-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).
+### Dynamic props
+```
+<%= vue_component 'MessageComponent', ':my_message': 'hello world' %>
+```
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/vue-on-rails.
+Bug reports and pull requests are welcome on GitHub at https://github.com/benoitontgit/vue-on-rails.
 
 
 ## License

data/lib/vue_on_rails/version.rb

@@ -1,3 +1,3 @@
 module VueOnRails
-  VERSION = "0.9.5".freeze
+  VERSION = '0.9.6'
 end

data/vendor/assets/javascripts/vue_on_rails.js

@@ -0,0 +1,81 @@
+this.VueOnRails = (function() {
+  var camelCaseToHyphen, destroyComponents, mountComponent, mountComponents, newVueInstance, setElementProps;
+  var vueModels = [];
+  var namespace = null;
+
+  mountComponents = function() {
+    vueModels = [];
+    namespace = VueOnRails.namespace;
+    var vueComponents = document.querySelectorAll('[data-vue-component]');
+    if (vueComponents.length <= 0) {
+      return;
+    }
+    var results = [];
+    for (var i = 0; i < vueComponents.length; i++) {
+      results.push(mountComponent(vueComponents[i]));
+    }
+    return results;
+  };
+
+  mountComponent = function(component) {
+    var el, name, props, vm;
+    name = component.getAttribute('data-vue-component');
+    props = JSON.parse(component.getAttribute('data-vue-props'));
+    if ((namespace && typeof window[namespace][name] === 'object') || window[name] === 'object') {
+      el = document.createElement('element-to-be-mounted');
+      component.innerHTML = '';
+      component.appendChild(el);
+      vm = newVueInstance(name, props, el);
+      return vueModels.push(vm);
+    }
+  };
+
+  newVueInstance = function(name, props, el) {
+    var component, element, nameFormatted, obj;
+    nameFormatted = camelCaseToHyphen(name);
+    element = document.createElement(nameFormatted);
+    setElementProps(element, props);
+    component = namespace ? window[namespace][name] : window[name];
+    return new Vue({
+      el: el,
+      template: element.outerHTML,
+      components: (
+        obj = {},
+          obj["" + nameFormatted] = component,
+          obj
+      )
+    });
+  };
+
+  setElementProps = function(element, props) {
+    var key, results, value;
+    results = [];
+    for (key in props) {
+      value = props[key];
+      if (typeof value === 'object') {
+        results.push(element.setAttribute(key, JSON.stringify(value)));
+      } else {
+        results.push(element.setAttribute(key, value));
+      }
+    }
+    return results;
+  };
+
+  camelCaseToHyphen = function(string) {
+    return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  };
+
+  destroyComponents = function() {
+    var j, len, vm;
+    for (j = 0, len = vueModels.length; j < len; j++) {
+      vm = vueModels[j];
+      vm.$destroy();
+    }
+    return vueModels = [];
+  };
+
+  return {
+    mountComponents: mountComponents,
+    destroyComponents: destroyComponents
+  };
+})();

metadata

@@ -1,63 +1,43 @@
 --- !ruby/object:Gem::Specification
 name: vue_on_rails
 version: !ruby/object:Gem::Version
-  version: 0.9.5
+  version: 0.9.6
 platform: ruby
 authors:
 - Benoit Zeler
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-17 00:00:00.000000000 Z
+date: 2017-05-02 00:00:00.000000000 Z
 dependencies:
-- !ruby/object:Gem::Dependency
-  name: coffee-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '4.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '5.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '4.0'
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '5.0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '1.13'
+        version: '2.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '1.13'
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - "<="
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '13.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - "<="
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '13.0'
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -65,9 +45,9 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '4.0'
-    - - "<="
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '5.2'
+        version: '6'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -75,9 +55,9 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '4.0'
-    - - "<="
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '5.2'
+        version: '6'
 description: Ideal to sprinkle your app with Vue components
 email: benoit@kimkim.com
 executables: []
@@ -91,8 +71,8 @@ files:
 - lib/vue_on_rails/railtie.rb
 - lib/vue_on_rails/version.rb
 - lib/vue_on_rails/view_helper.rb
-- vendor/assets/javascripts/vue_on_rails.js.coffee
-homepage: https://github.com/benoitongit
+- vendor/assets/javascripts/vue_on_rails.js
+homepage: https://github.com/benoitongit/vue-on-rails
 licenses:
 - MIT
 metadata:
@@ -116,5 +96,5 @@ rubyforge_project:
 rubygems_version: 2.6.11
 signing_key: 
 specification_version: 4
-summary: Easy way to use Vue.js with Ruby on Rails and Turbolinks 5.
+summary: Easy and simple way to use Vue.js with Ruby on Rails and Turbolinks 5.
 test_files: []

data/vendor/assets/javascripts/vue_on_rails.js.coffee

@@ -1,49 +0,0 @@
-@VueOnRails = do ->
-  vueModels = []
-  namespace = null
-
-  init = ->
-    vueModels = []
-    namespace = VueOnRails.namespace
-    vueComponents = document.querySelectorAll('[data-vue-component]')
-    return if vueComponents.length <= 0
-    for i in [0...vueComponents.length]
-      mountComponent(vueComponents[i])
-
-  mountComponent = (component) ->
-    name = component.getAttribute('data-vue-component')
-    props = JSON.parse(component.getAttribute('data-vue-props'))
-    if (namespace && typeof window[namespace][name] == 'object') || window[name] == 'object'
-      el = document.createElement('element-to-be-mounted')
-      component.innerHTML = ''
-      component.appendChild(el)
-      vm = newVueInstance(name, props, el)
-      vueModels.push(vm)
-
-  newVueInstance = (name, props, el) ->
-    nameFormatted = camelCaseToHyphen(name)
-    element = document.createElement(nameFormatted)
-    setElementProps(element, props)
-    component = if namespace then window[namespace][name] else window[name]
-    new Vue({
-      el: el
-      template: element.outerHTML
-      components: { "#{nameFormatted}": component }
-    })
-
-  setElementProps = (element, props) ->
-    for key, value of props
-      if typeof value == 'object'
-        element.setAttribute(key, JSON.stringify(value))
-      else
-        element.setAttribute(key, value)
-
-  camelCaseToHyphen = (string) ->
-    string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-
-  destroy = ->
-    for vm in vueModels
-      vm.$destroy()
-    vueModels = []
-
-  { init, destroy }