feat(sifrr-dom): setState, getState instead of getter/setter

sifrr · Sep 2, 2019 · 2db75b4 · 2db75b4
1 parent d6370e8
commit 2db75b4
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/packages/browser/sifrr-dom/src/dom/constants.js b/packages/browser/sifrr-dom/src/dom/constants.js
@@ -17,4 +17,3 @@ export const REPEAT_ATTR = 'data-sifrr-repeat';
 export const KEY_ATTR = 'data-sifrr-key';
 export const BIND_ATTR = 'data-sifrr-bind';
 export const DEFAULT_STATE_ATTR = 'data-sifrr-default-state';
-export const STATE_ATTR = 'data-sifrr-state';
diff --git a/packages/browser/sifrr-dom/src/dom/element.js b/packages/browser/sifrr-dom/src/dom/element.js
@@ -4,7 +4,7 @@ import update from './update';
 import Loader from './loader';
 import { trigger } from './event';
 import template from './template';
-import { BIND_ATTR, STATE_ATTR } from './constants';
+import { BIND_ATTR } from './constants';
 
 function elementClassFactory(baseClass) {
   return class extends baseClass {
@@ -13,7 +13,7 @@ function elementClassFactory(baseClass) {
     }
 
     static get observedAttributes() {
-      return [STATE_ATTR].concat(this.observedAttrs()).concat(this.syncedAttrs());
+      return this.observedAttrs().concat(this.syncedAttrs());
     }
 
     static syncedAttrs() {
@@ -77,7 +77,7 @@ function elementClassFactory(baseClass) {
         this.appendChild(this.__content);
         delete this.__content;
       }
-      if (!this.hasAttribute(STATE_ATTR)) this.update();
+      this.update();
       this.onConnect();
     }
 
@@ -91,9 +91,6 @@ function elementClassFactory(baseClass) {
     onDisconnect() {}
 
     attributeChangedCallback(attrName, oldVal, newVal) {
-      if (attrName === STATE_ATTR) {
-        this.state = JSON.parse(newVal);
-      }
       if (this.constructor.syncedAttrs().indexOf(attrName) > -1) {
         this[attrName] = newVal;
       }
@@ -103,10 +100,18 @@ function elementClassFactory(baseClass) {
     onAttributeChange() {}
 
     get state() {
+      return this.getState();
+    }
+
+    getState() {
       return this._state;
     }
 
     set state(v) {
+      this.setState(v);
+    }
+
+    setState(v) {
       if (!this._state) return;
       if (this._state !== v) Object.assign(this._state, v);
       this.update();
@@ -119,7 +124,7 @@ function elementClassFactory(baseClass) {
       this.beforeUpdate();
       update(this);
       if (this._update || this.triggerUpdate || this.hasAttribute(BIND_ATTR)) {
-        trigger(this, 'update', { detail: { state: this.state } });
+        trigger(this, 'update', { detail: { state: this._state } });
       }
       this.onUpdate();
     }

diff --git a/packages/browser/sifrr-dom/src/dom/simpleelement.js b/packages/browser/sifrr-dom/src/dom/simpleelement.js
@@ -9,7 +9,8 @@ function sifrrClone(newState) {
   clone.root = this._root;
   clone._refs = collect(clone, this.stateMap);
   clone._state = Object.assign({}, this.defaultState, newState);
-  Object.defineProperty(clone, 'state', this.stateProps);
+  clone.getState = this.stateProps.getState;
+  clone.setState = this.stateProps.setState;
   update(clone, this.stateMap);
   return clone;
 }
@@ -36,12 +37,12 @@ export default function SimpleElement(content, defaultState = null) {
   content.stateMap = create(content, creator, defaultState);
   content.sifrrClone = sifrrClone;
   content.stateProps = {
-    get: function() {
-      return this._state;
-    },
-    set: function(v) {
+    setState: function(v) {
       if (this._state !== v) Object.assign(this._state, v);
       update(this, content.stateMap);
+    },
+    getState: function() {
+      return this._state;
     }
   };
   return content;

diff --git a/packages/browser/sifrr-dom/src/dom/twowaybind.js b/packages/browser/sifrr-dom/src/dom/twowaybind.js
@@ -4,7 +4,7 @@ import shouldMerge from '../utils/shouldmerge';
 export default e => {
   const target = e.composedPath ? e.composedPath()[0] : e.target;
 
-  if (!target.hasAttribute(BIND_ATTR) || target._root === null) return;
+  if (!target.hasAttribute(BIND_ATTR)) return;
   if (e.type === 'update' && !target._sifrrEventSet) return;
 
   const value = target.value || target._state || target.textContent;
@@ -16,8 +16,8 @@ export default e => {
     target._root = root;
     const prop = target.getAttribute(BIND_ATTR);
     if (shouldMerge(value, root._state[prop])) {
-      if (e.type === 'update') target._root.state = { [prop]: Object.assign({}, value) };
-      else root.state = { [prop]: value };
+      if (e.type === 'update') root.setState && root.setState({ [prop]: Object.assign({}, value) });
+      else root.setState && root.setState({ [prop]: value });
     }
   } else target._root = null;
 };