Added statics & refactored

Author: dennythecoder

README.md

@@ -31,6 +31,29 @@ export default {
 
 ````
 
+### Statics
+
+Vue-Sap includes statics for components.  This can let you share and modify the same value... statics are usually frowned upon though... perhaps you shouldn't use them.
+
+````javascript
+export default{
+    statics:{
+        styleObj:{backgroundColor:'#aaa'}
+    },
+    methods:{
+        onClick(){
+        const so = this.styleObj;
+        if(so.backgroundColor === 'red'){
+            so.backgroundColor = 'blue';
+        }else{
+            so.backgroundColor = 'red';
+        }
+        }
+    },
+    template: `<div :style="styleObj" @click="onClick" style="width:40px; height:40px; border-radius: 20px 20px;"></div>`
+}
+
+````
 
 #### The Output
 

example/example.html

@@ -6,6 +6,9 @@
     <div id="app">
 
       <test-component></test-component>
+      <static-component></static-component>
+      <static-component></static-component>
+      <static-component></static-component>
     </div>
 
 
@@ -21,6 +24,24 @@
 
       })
 
+
+      Vue.component('static-component',{
+        statics:{
+          styleObj:{backgroundColor:'#aaa'}
+        },
+        methods:{
+          onClick(){
+            const so = this.styleObj;
+            if(so.backgroundColor === 'red'){
+              so.backgroundColor = 'blue';
+            }else{
+              so.backgroundColor = 'red';
+            }
+          }
+        },
+        template: `<div :style="styleObj" @click="onClick" style="width:40px; height:40px; border-radius: 20px 20px;"></div>`
+      });
+
       new Vue({
         el:'#app',
         published:{

src/main.js

@@ -1,43 +1,12 @@
-const plugin = {
+import createStore from './store';
+import mixin from './mixin';
+const subscriptions = createStore(Vue);
 
+const plugin = {
 	install(Vue){
-		let ss = Vue.prototype.$Subscriptions = new Vue({data:{subscriptions:{}}}).subscriptions;
-
-		Vue.mixin({
-			created(){
-				const p = this.$options.published;
-				if(p){
-					for(let key in p){
-						Vue.set(ss, key, p[key]);
-						Object.defineProperty(this, key,{
-							get(){
-								return ss[key];
-							},
-							set(newValue){
-								Vue.set(ss, key, newValue);
-							}
-						});
-					}
-				}
-				const s = this.$options.subscribed;
-				if(s){
-					for(let key in s){
-						
-						Object.defineProperty(this, key,{
-							get(){
-								return ss[key] || '';
-							},
-							set(newValue){
-								Vue.set(ss, key, newValue);
-							}
-						});
-					}
-					this.$forceUpdate();
-				}
-			}
-		});
+		Vue.mixin(mixin);
 	}
-}
+};
 
 
 if(window !== undefined && window.Vue){

src/mixin.js

@@ -0,0 +1,67 @@
+
+function hasProp(obj, prop){
+  if(obj.hasOwnProperty){
+    return obj.hasOwnProperty(prop);
+  }else{
+    return !!obj[prop];
+  }
+}
+
+function definePublishedProperty(vm, key, obj){
+  const ss = vm.$subscriptions;
+  vm.$set(ss, key, obj[key]);
+  Object.defineProperty(vm, key,{
+    get: ()=> ss[key],
+    set: (newValue)=> {vm.$set(ss, key, newValue);}
+  });
+}
+
+
+function defineSubscribedProperty(vm, key, obj){
+  const ss = vm.$subscriptions;
+  Object.defineProperty(vm, key,{
+    get:()=> ss[key],
+    set:(newValue)=> { vm.$set(ss, key, newValue); }
+  });
+}
+
+function defineStaticProperty(vm, key, obj){
+  const ss = vm.$statics;
+  const cid = vm.constructor.cid;
+  if(!ss[cid]){
+    vm.$set(ss, cid, {});
+  }
+  if(!hasProp(ss[cid], key)){
+    vm.$set(ss[cid], key, obj[key]);
+  }
+  Object.defineProperty(vm, key,{
+    get:()=>ss[cid][key],
+    set:(newValue)=> {vm.$set(ss[cid], key, newValue);}
+  });
+}
+
+export default {
+  created(){
+    const { published, subscribed, statics } = this.$options;
+    if(published){
+      for(let key in published){
+        definePublishedProperty(this, key, published);
+      }
+    }
+
+    if(subscribed){
+      for(let key in subscribed){
+        defineSubscribedProperty(this, key, subscribed);
+      }
+      this.$forceUpdate();
+    }
+
+    if(statics){
+      for(let key in statics){
+        defineStaticProperty(this, key, statics);
+      }
+      this.$forceUpdate();
+    }
+    
+  }
+};

src/store.js

@@ -0,0 +1,8 @@
+
+function createStore(Vue){
+  const store = new Vue({data:{subscriptions:{}, statics:{}}});
+  Vue.prototype.$subscriptions = store.subscriptions;
+  Vue.prototype.$statics = store.statics;
+}
+
+export default createStore;