feat(sifrr-dom): add bindStoresToElement function

packages/browser/sifrr-dom/src/dom/element.js

@@ -50,10 +50,6 @@ function elementClassFactory(baseClass) {
 
     constructor() {
       super();
-      const stores = this.stores;
-      if (stores) {
-        for (let h in stores) stores[h].addListener(this.update.bind(this));
-      }
       if (this.constructor.ctemp) {
         this.state = Object.assign({}, this.constructor.defaultState, this.state);
         const content = this.constructor.ctemp.content.cloneNode(true);

packages/browser/sifrr-dom/src/dom/store.js

@@ -1,10 +1,11 @@
 import shouldMerge from '../utils/shouldmerge';
 const objCon = {}.constructor;
 
-export default class Store {
+export class Store {
   constructor(initial) {
     this.value = initial;
     this.listeners = [];
+    this.addListener = this.listeners.push.bind(this.listeners);
   }
 
   set(newValue) {
@@ -14,8 +15,10 @@ export default class Store {
     }
     this.listeners.forEach(l => l());
   }
+}
 
-  addListener(listener) {
-    this.listeners.push(listener);
-  }
+export function bindStoresToElement(element, stores = []) {
+  const update = element.update.bind(element);
+  if (Array.isArray(stores)) stores.forEach(s => s.addListener(update));
+  else stores.addListener(update);
 }

packages/browser/sifrr-dom/src/sifrr.dom.js

@@ -6,7 +6,7 @@ import SimpleElement from './dom/simpleelement';
 import * as Event from './dom/event';
 import { makeChildrenEqual, makeEqual } from './dom/makeequal';
 import { makeChildrenEqualKeyed } from './dom/keyed';
-import Store from './dom/store';
+import { Store, bindStoresToElement } from './dom/store';
 import template from './dom/template';
 import config from './dom/config';
 
@@ -20,13 +20,16 @@ const register = (Element, options = {}) => {
   Element.useSR = config.useShadowRoot;
   const name = options.name || Element.elementName;
   if (!name) {
-    throw Error('Error creating Custom Element: No name given.', Element);
+    return Promise.reject(Error('Error creating Custom Element: No name given.', Element));
   } else if (window.customElements.get(name)) {
     console.warn(
       `Error creating Element: ${name} - Custom Element with this name is already defined.`
     );
+    return Promise.resolve(false);
   } else if (name.indexOf('-') < 1) {
-    throw Error(`Error creating Element: ${name} - Custom Element name must have one dash '-'`);
+    return Promise.reject(
+      Error(`Error creating Element: ${name} - Custom Element name must have one dash '-'`)
+    );
   } else {
     let before;
     if (Array.isArray(options.dependsOn)) {
@@ -120,7 +123,8 @@ export {
   load,
   loading,
   config,
-  elements
+  elements,
+  bindStoresToElement
 };
 
 export default {
@@ -139,5 +143,6 @@ export default {
   load,
   loading,
   config,
-  elements
+  elements,
+  bindStoresToElement
 };

packages/browser/sifrr-dom/test/browser/dom/stores.test.js

@@ -19,19 +19,19 @@ describe('stores', () => {
 
   it('updates element on store update', async () => {
     const value = await page.$eval('sifrr-store', el => {
-      el.stores.haha.set({ a: 'not hahaha' });
+      el.hahaStore.set({ a: 'not hahaha' });
       return el.innerHTML;
     });
     expect(value).to.equal('<p>not hahaha</p>');
 
     const value2 = await page.$eval('sifrr-store2', el => {
-      el.stores.new.set('not hahaha');
+      el.newStore.set('not hahaha');
       return el.innerHTML;
     });
     expect(value2).to.equal('<p>not hahaha</p>');
 
     const value3 = await page.$eval('sifrr-store3', el => {
-      el.stores.new.set(['m', 'n']);
+      el.newStore.set(['m', 'n']);
       return el.innerHTML;
     });
     expect(value3).to.equal('<p>mn</p>');

packages/browser/sifrr-dom/test/public/elements/sifrr/store.js

@@ -1,7 +1,7 @@
 // import SifrrDom from '@sifrr/dom';
 // const Sifrr = { Dom: SifrrDom };
 
-const template = `<p>\${this.stores.haha.value.a}</p>`;
+const template = `<p>\${this.hahaStore.value.a}</p>`;
 class SifrrStore extends Sifrr.Dom.Element {
   static get useShadowRoot() {
     return false;
@@ -11,8 +11,10 @@ class SifrrStore extends Sifrr.Dom.Element {
     return template;
   }
 
-  get stores() {
-    return { haha: window.hahaStore };
+  constructor() {
+    super();
+    Sifrr.Dom.bindStoresToElement(this, [window.hahaStore]);
+    this.hahaStore = window.hahaStore;
   }
 
   onUpdate() {
@@ -23,4 +25,5 @@ class SifrrStore extends Sifrr.Dom.Element {
     }
   }
 }
+
 Sifrr.Dom.register(SifrrStore);

packages/browser/sifrr-dom/test/public/elements/sifrr/store2.js

@@ -1,8 +1,8 @@
 // import SifrrDom from '@sifrr/dom';
 // const Sifrr = { Dom: SifrrDom };
-const newStore = new Sifrr.Dom.Store('string');
+window.newStore = new Sifrr.Dom.Store('string');
 
-const template = `<p>\${this.stores.new.value}</p>`;
+const template = `<p>\${this.newStore.value}</p>`;
 class SifrrStore2 extends Sifrr.Dom.Element {
   static get useShadowRoot() {
     return false;
@@ -12,8 +12,10 @@ class SifrrStore2 extends Sifrr.Dom.Element {
     return template;
   }
 
-  get stores() {
-    return { new: newStore };
+  constructor() {
+    super();
+    Sifrr.Dom.bindStoresToElement(this, [window.newStore]);
+    this.newStore = window.newStore;
   }
 
   onUpdate() {
@@ -24,4 +26,5 @@ class SifrrStore2 extends Sifrr.Dom.Element {
     }
   }
 }
+
 Sifrr.Dom.register(SifrrStore2);

packages/browser/sifrr-dom/test/public/elements/sifrr/store3.js

@@ -1,8 +1,8 @@
 // import SifrrDom from '@sifrr/dom';
 // const Sifrr = { Dom: SifrrDom };
-const newStore = new Sifrr.Dom.Store(['a', 'b']);
+window.newStore2 = new Sifrr.Dom.Store(['a', 'b']);
 
-const template = `<p>\${this.stores.new.value[0]}\${this.stores.new.value[1]}</p>`;
+const template = `<p>\${this.newStore.value[0]}\${this.newStore.value[1]}</p>`;
 class SifrrStore3 extends Sifrr.Dom.Element {
   static get useShadowRoot() {
     return false;
@@ -12,16 +12,20 @@ class SifrrStore3 extends Sifrr.Dom.Element {
     return template;
   }
 
-  get stores() {
-    return { new: newStore };
+  constructor() {
+    super();
+    Sifrr.Dom.bindStoresToElement(this, [window.newStore2]);
+    this.newStore = window.newStore2;
   }
 
   onUpdate() {
+    console.log(this.newStore);
     if (!this.state.class) {
       if (this.className) this.removeAttribute('class');
     } else if (this.className !== this.state.class) {
       this.className = this.state.class;
     }
   }
 }
+
 Sifrr.Dom.register(SifrrStore3);