vue_on_rails 0.9.8 → 0.9.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: dee1f7a9f993951120c1af55e3009dcc7411c664
-  data.tar.gz: 0a0aba539b3f73b76be59a91b403ef7781a291d1
+SHA256:
+  metadata.gz: e32e28e0ffa7888d7a1c1342b064cd13de676775e2849098b62124080c887475
+  data.tar.gz: 0f176aec50292a8e48c297fb8215e972318cb6d886f98955a93a922b1c3c6852
 SHA512:
-  metadata.gz: dec3b895082cdcf4d0859f9bce48d2fa72ecce11cd366dfc8d2a81bb10032a21863bd00af3e148eedfd8894fe97d99f00264ab9b2769dcadb549366ea45da74c
-  data.tar.gz: 62185840a2e7b1575e18d802a22cf7c83c21c32d073e608c9f5be0cf4a063e0450841b3fc73ac545d0d293f3fc1b85c43812bfb12abfd270a9abd5f88bba5730
+  metadata.gz: 756e0fca42a67324ee39e028f41a0705fc24a6d68af61d794b1d4fce4682feebdbba3e33c09cdf9c3a3c4c24a20aaa7843a464bf030d272d04d1827b2d6fbe86
+  data.tar.gz: 70c4189628d048f61192c0a18a75fc9d5faacb697305fdf80ab0704ba1ff170729d3514313752a2b8f034f223165c9d2a5d5831f33944a3cfd43df3991ca20af

data/README.md

@@ -1,8 +1,14 @@
 # VueOnRails
 
-Easy and simple way to use Vue.js with Ruby on Rails and Turbolinks 5.
+Simple and fast way to use Vue.js with Ruby on Rails and Turbolinks 5.
 
-This gem is intended to sprinkle your Rails app with Vue components. Really lightweight script (1.3KB minified) that mount and destroy Vue components on demand. It's works nicely with Turbolinks rendering and caching system.
+This gem is fantastic to sprinkle your web page with Vue components. Lightweight script (1KB minified) that mounts and destroys Vue components on demand.
+
+It works nicely with:
+- Turbolinks rendering and caching system
+- Javascript loaded asynchronously with defer or async script attribute
+
+It's fully Google PageSpeed friendly since you can use it with defer or async, no need for render-blocking JavaScript :)
 
 If you are building a pure SPA app with Vue and Rails without Turbolinks, you will be better off looking into:
 https://github.com/adambutler/vuejs-rails
@@ -39,19 +45,23 @@ Require vue_on_rails in application.js
 Mount and destroy Vue components:
 ```
 # Mount Vue components
-document.addEventListener 'turbolinks:load', ->
-  VueOnRails.mountComponents()
+document.addEventListener('turbolinks:load', function() {
+  VueOnRails.mountComponents();
+});
 
 # Destroy Vue components
-document.addEventListener 'turbolinks:before-render', ->
-  VueOnRails.destroyComponents()
+document.addEventListener('turbolinks:before-render', function() {
+  VueOnRails.destroyComponents();
+});
 ```
+VueOnRails.mountComponents() will scan the page and mount components using data-vue-component and data-vue-props.
 
-Example Vue component in my_component.coffee
+Example Vue component in my_component.js
 ```
-@MyComponent =
-  props: ['myProp']
+MyComponent = {
+  props: ['myProp'],
   template: '<div>A custom component with {{myProp}}</div>'
+};
 ```
 
 Add component in view.html.erb
@@ -85,7 +95,7 @@ Props are automatically hyphen-delimited to follow vuejs and HTML5 standard.
 
 ### Dynamic props
 ```
-<%= vue_component 'MessageComponent', ':my_message': 'hello world' %>
+<%= vue_component 'MessageComponent', ':my_object': { title: 'Test', subtitle: 'Sweet!' } %>
 ```
 
 ## Contributing

data/lib/vue_on_rails/version.rb

@@ -1,3 +1,3 @@
 module VueOnRails
-  VERSION = '0.9.8'
+  VERSION = '0.9.9'
 end

data/vendor/assets/javascripts/vue_on_rails.js

@@ -1,9 +1,8 @@
 this.VueOnRails = (function() {
-  var camelCaseToHyphen, destroyComponents, mountComponent, mountComponents, newVueInstance, setElementProps;
   var vueModels = [];
   var namespace = null;
 
-  mountComponents = function() {
+  var mountComponents = function() {
     vueModels = [];
     namespace = VueOnRails.namespace;
     var vueComponents = document.querySelectorAll('[data-vue-component]');
@@ -17,7 +16,7 @@ this.VueOnRails = (function() {
     return results;
   };
 
-  mountComponent = function(component) {
+  var mountComponent = function(component) {
     var name = component.getAttribute('data-vue-component');
     var props = JSON.parse(component.getAttribute('data-vue-props'));
     if ((namespace && typeof window[namespace][name] === 'object') || window[name] === 'object') {
@@ -26,7 +25,7 @@ this.VueOnRails = (function() {
     }
   };
 
-  newVueInstance = function(name, props, component) {
+  var newVueInstance = function(name, props, component) {
     var componentObj = {};
     var nameFormatted = camelCaseToHyphen(name);
     var element = document.createElement(nameFormatted);
@@ -41,9 +40,9 @@ this.VueOnRails = (function() {
     });
   };
 
-  setElementProps = function(element, props) {
-    var key, results, value;
-    results = [];
+  var setElementProps = function(element, props) {
+    var key, value;
+    var results = [];
     for (key in props) {
       value = props[key];
       if (typeof value === 'object') {
@@ -55,20 +54,20 @@ this.VueOnRails = (function() {
     return results;
   };
 
-  camelCaseToHyphen = function(string) {
+  var 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();
+  var destroyComponents = function() {
+    var i;
+    for (i = 0; i < vueModels.length; i++) {
+      vueModels[i].$destroy();
     }
-    return vueModels = [];
+    vueModels = [];
   };
 
   return {
+    mountComponent: mountComponent,
     mountComponents: mountComponents,
     destroyComponents: destroyComponents
   };

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue_on_rails
 version: !ruby/object:Gem::Version
-  version: 0.9.8
+  version: 0.9.9
 platform: ruby
 authors:
 - Benoit Zeler
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-07-06 00:00:00.000000000 Z
+date: 2018-08-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -47,7 +47,7 @@ dependencies:
         version: '4.0'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '6'
+        version: '7'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -57,7 +57,7 @@ dependencies:
         version: '4.0'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '6'
+        version: '7'
 description: Ideal to sprinkle your app with Vue components
 email: benoit@kimkim.com
 executables: []
@@ -93,7 +93,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.11
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: Easy and simple way to mount/destroy Vue.js components with Ruby on Rails