From 48f703ff32acaff25c7da1a2092bdf32cec2538b Mon Sep 17 00:00:00 2001
From: Bede Overend <bede.overend@gmail.com>
Date: Fri, 1 Dec 2017 13:29:12 +1100
Subject: [PATCH 1/3] Convert to mixin for v1 components

---
 bower.json                        |   5 +-
 package.json                      |   1 +
 simpla-element-behavior.html      | 349 +++++++++++++++++++-
 src/simpla-element-behavior.html  | 517 +++++++++++++++---------------
 test/simpla-element-behavior.html | 266 ++++++---------
 yarn.lock                         |  72 ++++-
 6 files changed, 784 insertions(+), 426 deletions(-)

diff --git a/bower.json b/bower.json
index b4322e0..5a08b41 100644
--- a/bower.json
+++ b/bower.json
@@ -23,6 +23,9 @@
   ],
   "devDependencies": {
     "web-component-tester": "^4.0.0",
-    "polymer": "^1.8.0"
+    "polymer": "^2.2.0"
+  },
+  "resolutions": {
+    "webcomponentsjs": "^v1.0.2"
   }
 }
diff --git a/package.json b/package.json
index 6a882a7..7d9a513 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "gulp-process-inline": "^0.1.1",
     "gulp-size": "^2.0.0",
     "run-sequence": "^1.1.5",
+    "simpla": "^3.0.1",
     "web-component-tester": "^5.0.0",
     "yargs": "^7.1.0"
   }
diff --git a/simpla-element-behavior.html b/simpla-element-behavior.html
index 5a0d678..efe2de3 100644
--- a/simpla-element-behavior.html
+++ b/simpla-element-behavior.html
@@ -1 +1,348 @@
-<script>"use strict";function _defineProperty(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var i in a)Object.prototype.hasOwnProperty.call(a,i)&&(e[i]=a[i])}return e},DEFAULT_CONFIG={getCallback:"_updateFromSimpla",setCallback:"_updateSimplaBuffer"},ERRORS={NO_SIMPLA:"Cannot find Simpla, ensure it is included before this component"};window.SimplaBehaviors=window.SimplaBehaviors||{},SimplaBehaviors.Element=function(e){var t=_extends({},DEFAULT_CONFIG,e),a=t.type,i=t.getCallback,r=t.setCallback,n=t.dataProperties,o=function(e){return"_syncedPropertiesObserver("+e+".*)"};return{properties:{path:{type:String,observer:"_initPathIfReady"},editable:{type:Boolean,observer:"_disableEditableIfReadonly",notify:!0},readonly:{type:Boolean,observer:"_updateReadonly"},loaded:{type:Boolean,readOnly:!0,notify:!0,value:!1},__simplaObservers:{type:Object,value:function(){return{}}}},observers:n.map(o),created:function(){if(!window.Simpla)throw new Error(ERRORS.NO_SIMPLA)},attached:function(){this._attached=!0,this.editable=!this.readonly&&(this.editable||Simpla.getState("editable")),this._observeSimplaEditable(),this._initPathIfReady(this.path)},detached:function(){var e=this;Object.keys(this.__simplaObservers).forEach(function(t){e.__simplaObservers[t].unobserve()}),this.__simplaObservers={}},_initPathIfReady:function(e){this._attached&&void 0!==e&&this._initSimplaPath(e)},_updateReadonly:function(e){this.editable=!e&&Simpla.getState("editable")},_disableEditableIfReadonly:function(e){this.readonly&&e&&(this.editable=!1)},_initSimplaPath:function(e){var t=this;this._setLoaded(!1),Simpla.get(e).then(function(a){var i=!(a&&a.data),r=t.path!==e,n=Simpla.getState("buffer"),o=n&&n[e]&&!n[e].modified;r||(i&&o?t._protectedSetCallback():t._protectedGetCallback(a),t._setLoaded(!0))}),this._observeSimplaBuffer(e)},_observeSimplaBuffer:function(e){var t=this,a=this.__simplaObservers;e&&(a.buffer&&a.buffer.unobserve(),a.buffer=Simpla.observe(e,function(e){e&&e.data&&t._protectedGetCallback(e)}))},_updateSimplaBuffer:function(){var e=this;return n.reduce(function(t,a){return _extends(t,_defineProperty({},a,e[a]))},{})},_updateFromSimpla:function(e){_extends(this,e.data)},_protectedGetCallback:function(e){this.__loadingFromSimpla=!0,this[i](e),this.__loadingFromSimpla=!1},_protectedSetCallback:function(){if(!this.__loadingFromSimpla&&this._attached&&this.path){var e=this[r]();void 0===e&&null!==e||Simpla.set(this.path,{type:a,data:e})}},_syncedPropertiesObserver:function(){this.loaded&&this._protectedSetCallback()},_observeSimplaEditable:function(){var e=this,t=this.__simplaObservers;t.editable&&t.editable.unobserve(),t.editable=Simpla.observeState("editable",function(t){e.readonly||(e.editable=t)})}}}</script> 
\ No newline at end of file
+<script>'use strict';
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function changed(from, prop, value) {
+  from.dispatchEvent(new CustomEvent(prop + '-changed', { detail: { value: value } }));
+}
+
+var ERRORS = {
+  NO_SIMPLA: 'Cannot find Simpla, ensure it is included before this component'
+};
+
+window.SimplaElement = function (Base) {
+  return function (_Base) {
+    _inherits(_class, _Base);
+
+    function _class() {
+      _classCallCheck(this, _class);
+
+      var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this));
+
+      if (!window.Simpla) {
+        throw new Error(NO_SIMPLA);
+      }
+
+      _this._loaded = false;
+      _this.__simplaObservers = {};
+      _this.__triggerBufferSync = function () {
+        if (_this.loaded) {
+          _this._protectedSetCallback();
+        }
+      };
+      return _this;
+    }
+
+    _createClass(_class, [{
+      key: 'attributeChangedCallback',
+      value: function attributeChangedCallback(attr, oldValue, newValue) {
+        if (attr === 'path') {
+          this.path = newValue;
+        } else {
+          // Cast as Boolean. 
+          this[attr] = newValue !== null;
+        }
+      }
+
+      /**
+       * Setup editable state observer on attach
+       * @return {undefined}
+       */
+
+    }, {
+      key: 'connectedCallback',
+      value: function connectedCallback() {
+        var _this2 = this;
+
+        var events = this.constructor.simplaConfig.events;
+
+
+        _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'connectedCallback', this) && _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'connectedCallback', this).call(this);
+
+        events.forEach(function (event) {
+          return _this2.addEventListener(event, _this2.__triggerBufferSync);
+        });
+
+        this.editable = this.readonly ? false : this.editable || Simpla.getState('editable');
+
+        this._observeSimplaEditable();
+        this._initPathIfReady(this.path);
+      }
+
+      /**
+       * Clean up Simpla observers on detach
+       * @return {undefined}
+       */
+
+    }, {
+      key: 'disconnectedCallback',
+      value: function disconnectedCallback() {
+        var _this3 = this;
+
+        var events = this.constructor.simplaConfig.events;
+
+
+        _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'disconnectedCallback', this) && _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'disconnectedCallback', this).call(this);
+
+        events.forEach(function (event) {
+          return _this3.removeEventListener(event, _this3.__triggerBufferSync);
+        });
+
+        Object.keys(this.__simplaObservers).forEach(function (observer) {
+          _this3.__simplaObservers[observer].unobserve();
+        });
+
+        this.__simplaObservers = {};
+      }
+
+      /**
+       * Checks if connected and has a valid path. If so, calls _initSimplaPath
+       * @param  {String} path Current value of path prop
+       * @return {undefined}
+       */
+
+    }, {
+      key: '_initPathIfReady',
+      value: function _initPathIfReady(path) {
+        if (this.isConnected && typeof path !== 'undefined') {
+          this._initSimplaPath(path);
+        }
+      }
+
+      /**
+       * Init the path observer
+       * @param  {String} path Current value of path prop
+       * @return {undefined}
+       */
+
+    }, {
+      key: '_initSimplaPath',
+      value: function _initSimplaPath(path) {
+        var _this4 = this;
+
+        this._loaded = false;
+
+        Simpla.get(path).then(function (item) {
+          var isEmpty = !(item && item.data),
+              pathChanged = _this4.path !== path,
+              buffer = Simpla.getState('buffer'),
+              bufferIsClean = buffer && buffer[path] && !buffer[path].modified;
+
+          if (pathChanged) {
+            return;
+          }
+
+          if (isEmpty && bufferIsClean) {
+            // Load static content
+            _this4._protectedSetCallback().then(function () {
+              _this4._loaded = true;
+            });
+          } else {
+            _this4._protectedGetCallback(item);
+            _this4._loaded = true;
+          }
+        });
+
+        this._observeSimplaBuffer(path);
+      }
+
+      /**
+       * Observe buffer for changes to update element
+       * @param  {String} path Path to observe in buffer
+       * @return {undefined}
+       */
+
+    }, {
+      key: '_observeSimplaBuffer',
+      value: function _observeSimplaBuffer(path) {
+        var _this5 = this;
+
+        var observers = this.__simplaObservers;
+
+        if (!path) {
+          return;
+        }
+
+        if (observers.buffer) {
+          observers.buffer.unobserve();
+        }
+
+        observers.buffer = Simpla.observe(path, function (item) {
+          if (item && item.data) {
+            _this5._protectedGetCallback(item);
+          }
+        });
+      }
+
+      /**
+       * Sets up the data property to send to Simpla based on given dataProperties
+       * @return {Object}  Data to set to Simpla
+       */
+
+    }, {
+      key: 'updateSimplaBuffer',
+      value: function updateSimplaBuffer() {
+        var _this6 = this;
+
+        var dataProperties = this.constructor.simplaConfig.dataProperties;
+
+
+        return dataProperties.reduce(function (data, prop) {
+          return _extends(data, _defineProperty({}, prop, _this6[prop]));
+        }, {});
+      }
+
+      /**
+       * Update element from Simpla data
+       * @param  {Object} item The data from Simpla to update with
+       * @return {undefined}
+       */
+
+    }, {
+      key: 'updateFromSimpla',
+      value: function updateFromSimpla(item) {
+        _extends(this, item.data);
+      }
+
+      /**
+       * Calls the getCallback but protects against triggering an infinite loop
+       * @param  {Object} item Item to give to getCallback
+       * @return {undefined}
+       */
+
+    }, {
+      key: '_protectedGetCallback',
+      value: function _protectedGetCallback(item) {
+        this.__loadingFromSimpla = true;
+        this.updateFromSimpla(item);
+        this.__loadingFromSimpla = false;
+      }
+
+      /**
+       * Calls the setCallback but protects against triggering an infinite loop
+       * @return {undefined}
+       */
+
+    }, {
+      key: '_protectedSetCallback',
+      value: function _protectedSetCallback() {
+        var done = Promise.resolve();
+        if (!this.__loadingFromSimpla && this.isConnected && this.path) {
+          var data = this.updateSimplaBuffer(),
+              type = this.constructor.simplaConfig.type;
+
+
+          if (typeof data !== 'undefined' || data === null) {
+            done = Simpla.set(this.path, { type: type, data: data });
+          }
+        }
+
+        return done;
+      }
+
+      /**
+       * Editable state observer
+       * @return {undefined}
+       */
+
+    }, {
+      key: '_observeSimplaEditable',
+      value: function _observeSimplaEditable() {
+        var _this7 = this;
+
+        var observers = this.__simplaObservers;
+
+
+        if (observers.editable) {
+          observers.editable.unobserve();
+        }
+
+        observers.editable = Simpla.observeState('editable', function (editable) {
+          _this7.editable = editable;
+        });
+      }
+    }, {
+      key: 'path',
+      get: function get() {
+        return this.__path;
+      },
+      set: function set(value) {
+        var previous = this.__path;
+        this.__path = value;
+
+        if (value !== previous) {
+          this._initPathIfReady(value);
+        }
+      }
+    }, {
+      key: 'editable',
+      get: function get() {
+        return this.__editable;
+      },
+      set: function set(value) {
+        var previous = this.__editable;
+
+        if (!this.readonly) {
+          this.__editable = value;
+
+          if (value !== previous) {
+            changed(this, 'editable', value);
+          }
+        }
+      }
+    }, {
+      key: 'readonly',
+      get: function get() {
+        return this.__readonly;
+      },
+      set: function set(value) {
+        var previous = this.__readonly;
+
+        // Disable to allow editable to be set however we like
+        this.__readonly = false;
+
+        if (!value && previous === true) {
+          this.editable = Simpla.getState('editable');
+        } else if (value) {
+          this.editable = false;
+        }
+
+        this.__readonly = value;
+      }
+    }, {
+      key: 'loaded',
+      get: function get() {
+        return this.__loaded;
+      }
+    }, {
+      key: '_loaded',
+      set: function set(value) {
+        var previous = this.__loaded;
+        this.__loaded = value;
+
+        if (value !== previous) {
+          changed(this, 'loaded', value);
+        }
+      }
+    }], [{
+      key: 'observedAttributes',
+      get: function get() {
+        return ['path', 'editable', 'readonly', 'loaded'];
+      }
+    }]);
+
+    return _class;
+  }(Base);
+};</script>
diff --git a/src/simpla-element-behavior.html b/src/simpla-element-behavior.html
index 8305350..ef99838 100644
--- a/src/simpla-element-behavior.html
+++ b/src/simpla-element-behavior.html
@@ -1,275 +1,270 @@
 <script>
-  const DEFAULT_CONFIG = {
-          getCallback: '_updateFromSimpla',
-          setCallback: '_updateSimplaBuffer'
-        },
-        ERRORS = {
-          NO_SIMPLA: 'Cannot find Simpla, ensure it is included before this component'
-        };
-
-  window.SimplaBehaviors = window.SimplaBehaviors || {};
-
-  SimplaBehaviors.Element = function(config) {
-    let {
-          type,
-          getCallback,
-          setCallback,
-          dataProperties
-        } = Object.assign({}, DEFAULT_CONFIG, config);
-
-    const propsToObservers = (prop) => `_syncedPropertiesObserver(${prop}.*)`;
-
-    return {
-      properties: {
-        /**
-         * Simpla content path
-         * @type {String}
-         */
-        path: {
-          type: String,
-          observer: '_initPathIfReady'
-        },
-
-        /**
-         * Whether element is editable
-         * @type {Boolean}
-         */
-        editable: {
-          type: Boolean,
-          observer: '_disableEditableIfReadonly',
-          notify: true
-        },
-
-        /**
-         * Stops element going editable
-         * @type {Boolean}
-         */
-        readonly: {
-          type: Boolean,
-          observer: '_updateReadonly'
-        },
-
-        /**
-         * Whether content is loaded
-         * @type {Boolean}
-         */
-        loaded: {
-          type: Boolean,
-          readOnly: true,
-          notify: true,
-          value: false
-        },
-
-        /**
-         * Stored Simpla observers
-         * @type {Object}
-         */
-        __simplaObservers: {
-          type: Object,
-          value: () => ({})
-        }
-      },
-
-      observers: dataProperties.map(propsToObservers),
-
-      /**
-       * Check for Simpla on element creation
-       * @return {undefined}
-       */
-      created() {
-        if (!window.Simpla) {
-          throw new Error(ERRORS.NO_SIMPLA);
-        }
-      },
-
-      /**
-       * Setup editable state observer on attach
-       * @return {undefined}
-       */
-      attached() {
-        this._attached = true;
-
-        // Setup editable property
-        this.editable = this.readonly ? false : this.editable || Simpla.getState('editable');
-        this._observeSimplaEditable();
-
-        // Try set up path observer
-        this._initPathIfReady(this.path);
-      },
-
-      /**
-       * Clean up Simpla observers on detach
-       * @return {undefined}
-       */
-      detached() {
-        Object.keys(this.__simplaObservers)
-          .forEach(observer => {
-            this.__simplaObservers[observer].unobserve();
-          });
-
-        this.__simplaObservers = {};
-      },
-
-      /**
-       * Checks if attached and has a valid path. If so, calls _initSimplaPath
-       * @param  {String} path Current value of path prop
-       * @return {undefined}
-       */
-      _initPathIfReady(path) {
-        if (this._attached && typeof path !== 'undefined') {
-          this._initSimplaPath(path);
-        }
-      },
-
-      /**
-       * Update editable when readonly changes
-       * @param  {Boolean} readonly Current value of readonly prop
-       * @return {undefined}
-       */
-      _updateReadonly(readonly) {
-        this.editable = readonly ? false : Simpla.getState('editable');
-      },
-
-      /**
-       * Monkeypatch editable prop
-       * THIS IS A HACK - should be computed prop from public editable + readonly
-       * But that is a breaking change, and not worth doing now
-       * @param  {Boolean} editable Current value of editable prop
-       * @return {undefined}
-       */
-      _disableEditableIfReadonly(editable) {
-        if (this.readonly && editable) {
-          this.editable = false;
-        }
-      },
-
-      /**
-       * Init the path observer
-       * @param  {String} path Current value of path prop
-       * @return {undefined}
-       */
-      _initSimplaPath(path) {
-        this._setLoaded(false);
-
-        Simpla.get(path)
-          .then(item => {
-            let isEmpty = !(item && item.data),
-                pathChanged = this.path !== path,
-                buffer = Simpla.getState('buffer'),
-                bufferIsClean = buffer && buffer[path] && !buffer[path].modified;
-
-            if (pathChanged) {
-              return;
-            }
-
-            if (isEmpty && bufferIsClean) {
-              // Load static content
-              this._protectedSetCallback();
-            } else {
-              this._protectedGetCallback(item);
-            }
-
-            this._setLoaded(true);
-          });
-
-        this._observeSimplaBuffer(path);
-      },
-
-      /**
-       * Observe buffer for changes to update element
-       * @param  {String} path Path to observe in buffer
-       * @return {undefined}
-       */
-      _observeSimplaBuffer(path) {
-        let observers = this.__simplaObservers;
-
-        if (!path) {
-          return;
+  function changed(from, prop, value) {
+    from.dispatchEvent(new CustomEvent(`${prop}-changed`, { detail: { value } }));
+  }
+  
+  const ERRORS = {
+    NO_SIMPLA: 'Cannot find Simpla, ensure it is included before this component'
+  };
+  
+  window.SimplaElement = Base => class extends Base {
+    constructor() {
+      super();
+  
+      if (!window.Simpla) {
+        throw new Error(NO_SIMPLA);
+      }
+  
+      this._loaded = false;
+      this.__simplaObservers = {};
+      this.__triggerBufferSync = () => {
+        if (this.loaded) {
+          this._protectedSetCallback();
         }
-
-        if (observers.buffer) {
-          observers.buffer.unobserve();
+      }
+    }
+    
+    get path() {
+      return this.__path;
+    }
+  
+    set path(value) {
+      let previous = this.__path;
+      this.__path = value;
+  
+      if (value !== previous) {
+        this._initPathIfReady(value);    
+      }
+    }
+  
+    get editable() {
+      return this.__editable;
+    }
+  
+    set editable(value) {
+      let previous = this.__editable;
+      
+      if (!this.readonly) {
+        this.__editable = value;
+  
+        if (value !== previous) {
+          changed(this, 'editable', value);
         }
+      }
+    }
+  
+    get readonly() {
+      return this.__readonly;
+    }
+  
+    set readonly(value) {
+      let previous = this.__readonly;
+      
+      // Disable to allow editable to be set however we like
+      this.__readonly = false;
+
+      if (!value && previous === true) {
+        this.editable = Simpla.getState('editable');
+      } else if (value) {
+        this.editable = false;
+      }
+  
+      this.__readonly = value;      
+    }
+  
+    get loaded() {
+      return this.__loaded;
+    }
+  
+    set _loaded(value) {
+      let previous = this.__loaded;
+      this.__loaded = value;
+  
+      if (value !== previous) {
+        changed(this, 'loaded', value);
+      }
+    }
+  
+    static get observedAttributes() {
+      return [ 'path', 'editable', 'readonly', 'loaded' ];
+    }
+  
+    attributeChangedCallback(attr, oldValue, newValue) {
+      if (attr === 'path') {
+        this.path = newValue;
+      } else {
+        // Cast as Boolean. 
+        this[attr] = newValue !== null;
+      }
+    }
+  
+    /**
+     * Setup editable state observer on attach
+     * @return {undefined}
+     */
+    connectedCallback() {
+      let { events } = this.constructor.simplaConfig;
+  
+      super.connectedCallback && super.connectedCallback();    
+      
+      events.forEach(event => this.addEventListener(event, this.__triggerBufferSync)); 
+  
+      this.editable = this.readonly ? false : this.editable || Simpla.getState('editable');
+
+      this._observeSimplaEditable();
+      this._initPathIfReady(this.path);    
+    }
+  
+    /**
+     * Clean up Simpla observers on detach
+     * @return {undefined}
+     */
+    disconnectedCallback() {
+      let { events } = this.constructor.simplaConfig;
+  
+      super.disconnectedCallback && super.disconnectedCallback();
+      
+      events.forEach(event => this.removeEventListener(event, this.__triggerBufferSync));
+  
+      Object.keys(this.__simplaObservers)
+        .forEach(observer => {
+          this.__simplaObservers[observer].unobserve();
+        });
+  
+      this.__simplaObservers = {};
+    }
+  
+    /**
+     * Checks if connected and has a valid path. If so, calls _initSimplaPath
+     * @param  {String} path Current value of path prop
+     * @return {undefined}
+     */
+    _initPathIfReady(path) {
+      if (this.isConnected && typeof path !== 'undefined') {
+        this._initSimplaPath(path);
+      }
+    }
+  
+    /**
+     * Init the path observer
+     * @param  {String} path Current value of path prop
+     * @return {undefined}
+     */
+    _initSimplaPath(path) {
+      this._loaded = false;
+
+      Simpla.get(path)
+        .then(item => {
+          let isEmpty = !(item && item.data),
+              pathChanged = this.path !== path,
+              buffer = Simpla.getState('buffer'),
+              bufferIsClean = buffer && buffer[path] && !buffer[path].modified;
+            
+          if (pathChanged) {
+            return;
+          }
 
-        observers.buffer = Simpla.observe(path, item => {
-          if (item && item.data) {
+          if (isEmpty && bufferIsClean) {
+            // Load static content
+            this._protectedSetCallback().then(() => {
+              this._loaded = true;
+            });
+          } else {
             this._protectedGetCallback(item);
+            this._loaded = true;
           }
         });
-      },
-
-      /**
-       * Sets up the data property to send to Simpla based on given dataProperties
-       * @return {Object}  Data to set to Simpla
-       */
-      _updateSimplaBuffer() {
-        return dataProperties.reduce((data, prop) => {
-          return Object.assign(data, { [ prop ]: this[prop] });
-        }, {});
-      },
-
-      /**
-       * Update element from Simpla data
-       * @param  {Object} item The data from Simpla to update with
-       * @return {undefined}
-       */
-      _updateFromSimpla(item) {
-        Object.assign(this, item.data);
-      },
-
-      /**
-       * Calls the getCallback but protects against triggering an infinite loop
-       * @param  {Object} item Item to give to getCallback
-       * @return {undefined}
-       */
-      _protectedGetCallback(item) {
-        this.__loadingFromSimpla = true;
-        this[getCallback](item);
-        this.__loadingFromSimpla = false;
-      },
-
-      /**
-       * Calls the setCallback but protects against triggering an infinite loop
-       * @return {undefined}
-       */
-      _protectedSetCallback() {
-        if (!this.__loadingFromSimpla && this._attached && this.path) {
-          let data = this[setCallback]();
-
-          if (typeof data !== 'undefined' || data === null) {
-            Simpla.set(this.path, { type, data });
-          }
-        }
-      },
-
-      /**
-       * Observes the given properties that will sync to Simpla. Called protected
-       *  set callback but only if currently loaded
-       * @return {undefined}
-       */
-      _syncedPropertiesObserver() {
-        if (this.loaded) {
-          this._protectedSetCallback();
+  
+      this._observeSimplaBuffer(path);
+    }
+  
+    /**
+     * Observe buffer for changes to update element
+     * @param  {String} path Path to observe in buffer
+     * @return {undefined}
+     */
+    _observeSimplaBuffer(path) {
+      let observers = this.__simplaObservers;
+  
+      if (!path) {
+        return;
+      }
+  
+      if (observers.buffer) {
+        observers.buffer.unobserve();
+      }
+  
+      observers.buffer = Simpla.observe(path, item => {
+        if (item && item.data) {
+          this._protectedGetCallback(item);
         }
-      },
-
-      /**
-       * Editable state observer
-       * @return {undefined}
-       */
-      _observeSimplaEditable() {
-        let { __simplaObservers: observers } = this;
-
-        if (observers.editable) {
-          observers.editable.unobserve();
+      });
+    }
+  
+    /**
+     * Sets up the data property to send to Simpla based on given dataProperties
+     * @return {Object}  Data to set to Simpla
+     */
+    updateSimplaBuffer() {
+      let { dataProperties } = this.constructor.simplaConfig;
+  
+      return dataProperties.reduce((data, prop) => {
+        return Object.assign(data, { [ prop ]: this[prop] });
+      }, {});
+    }
+  
+    /**
+     * Update element from Simpla data
+     * @param  {Object} item The data from Simpla to update with
+     * @return {undefined}
+     */
+    updateFromSimpla(item) {
+      Object.assign(this, item.data);
+    }
+  
+    /**
+     * Calls the getCallback but protects against triggering an infinite loop
+     * @param  {Object} item Item to give to getCallback
+     * @return {undefined}
+     */
+    _protectedGetCallback(item) {
+      this.__loadingFromSimpla = true;
+      this.updateFromSimpla(item);
+      this.__loadingFromSimpla = false;
+    }
+  
+    /**
+     * Calls the setCallback but protects against triggering an infinite loop
+     * @return {undefined}
+     */
+    _protectedSetCallback() {
+      let done = Promise.resolve();
+      if (!this.__loadingFromSimpla && this.isConnected && this.path) {
+        let data = this.updateSimplaBuffer(),
+            { type } = this.constructor.simplaConfig;
+
+        if (typeof data !== 'undefined' || data === null) {
+          done = Simpla.set(this.path, { type, data });
         }
+      }
 
-        observers.editable = Simpla.observeState('editable', editable => {
-          if (!this.readonly) {
-            this.editable = editable;
-          }
-        });
+      return done;
+    }
+  
+    /**
+     * Editable state observer
+     * @return {undefined}
+     */
+    _observeSimplaEditable() {
+      let { __simplaObservers: observers } = this;
+  
+      if (observers.editable) {
+        observers.editable.unobserve();
       }
+  
+      observers.editable = Simpla.observeState('editable', editable => {
+        this.editable = editable;
+      });
     }
   }
 </script>
diff --git a/test/simpla-element-behavior.html b/test/simpla-element-behavior.html
index 419cbc4..df88a31 100755
--- a/test/simpla-element-behavior.html
+++ b/test/simpla-element-behavior.html
@@ -6,18 +6,15 @@
     <script src="../../web-component-tester/browser.js"></script>
 
     <!-- Import WC polyfills -->
-    <script src="https://unpkg.com/webcomponents.js@^0.7.24/webcomponents-lite.min.js"></script>
+    <script src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
 
     <!-- Import Simpla -->
-    <script src="https://unpkg.com/simpla@^2.0.0"></script>
-    <script> Simpla.init('test')</script>
-
-    <!-- Import Polymer for test element -->
-    <link rel="import" href="../bower_components/polymer/polymer.html">
+    <script src="/node_modules/simpla/simpla.min.js"></script>
+    <script> Simpla.init({})</script>
 
     <!-- Import the element to test -->
     <link rel="import" href="../simpla-element-behavior.html">
-
   </head>
   <body>
     <script>
@@ -35,34 +32,43 @@
             });
 
       function defineComponent(config, base) {
-        let is = `test-component-${randomString()}`,
-            behaviors = [ SimplaBehaviors.Element(config) ];
+        const Component = class extends window.SimplaElement(HTMLElement) {
+          static get simplaConfig() {
+            return config;
+          }
+        }
+
+        customElements.define(`test-component-${randomString()}`, Component);
 
-        return Polymer(Object.assign({ is, behaviors }, base));
+        return Component;
+      }
+
+      function fire(on, name) {
+        on.dispatchEvent(new CustomEvent(name));
       }
 
       describe('simpla-behavior', () => {
         let path = '/some-path';
 
         beforeEach(() => {
-          Simpla.set(path, { data: {} });
+          return Simpla.set(path, { data: {} });
         });
 
         describe('basic functionality', () => {
-          let base = { properties: { meta: Object } },
-              config = {
+          let config = {
                 type: 'Component',
-                dataProperties: [ 'meta' ]
+                dataProperties: [ 'meta' ],
+                events: [ 'change' ]
               },
               Component,
               component;
 
           beforeEach(() => {
-            Component = defineComponent(config, base);
+            Component = defineComponent(config);
             component = new Component();
             component.path = path;
             document.body.appendChild(component);
-
+            
             return waitForLoaded(component);
           });
 
@@ -71,10 +77,14 @@
           });
 
           it('should set with given type', () => {
-            component.meta = { foo: 'bar' }
+            component.meta = { foo: 'bar' };
+            fire(component, 'change');
+
             return Promise.resolve()
               .then(wait())
-              .then(() => Simpla.get(path))
+              .then(() => {
+                return Simpla.get(path)
+              })
               .then(response => {
                 expect(response.type).to.equal(config.type);
               });
@@ -82,7 +92,10 @@
 
           it('should set property value to Simpla', () => {
             return Promise.resolve()
-              .then(() => component.meta = { foo: 'bar' })
+              .then(() => {
+                component.meta = { foo: 'bar' };
+                fire(component, 'change');            
+              })
               .then(wait())
               .then(() => Simpla.get(path))
               .then(response => {
@@ -127,28 +140,14 @@
               })
           });
 
-          it('should update when complex data changes', () => {
-            component.meta = { foo: 'bar' }
-
-            return Promise.resolve()
-              .then(wait())
-              .then(() => {
-                component.set('meta.foo', 'baz');
-              })
-              .then(wait())
-              .then(() => Simpla.get(component.path))
-              .then((response) => {
-                expect(response.data.meta).to.deep.equal({ foo: 'baz' });
-              });
-          });
-
           it('should not set to buffer while disconnected from DOM', () => {
             let detachedComponent = new Component(),
                 meta = randomString();
 
             detachedComponent.path = path;
             detachedComponent.meta = meta;
-
+            fire(component, 'change');
+            
             return Promise.resolve()
               .then(wait())
               .then(() => Simpla.get(path))
@@ -166,6 +165,7 @@
                 document.body.appendChild(unloadedComponent);
                 unloadedComponent.path = path;
                 unloadedComponent.meta = 'another-value';
+                fire(component, 'change');            
               })
               .then(wait())
               .then(() => Simpla.get(path))
@@ -188,6 +188,73 @@
               });
           });
 
+          it('should not update data if path changed mid-request', () => {
+            let itemA = { path: '/path-a', data: { text: 'foo' } },
+                itemB = { path: '/path-b', data: { text: 'bar' } },
+                calledWithPaths = [],
+                waitForSetup;
+
+            waitForSetup = Promise.all([
+              Simpla.set(itemA.path, itemA),
+              Simpla.set(itemB.path, itemB)
+            ]).then(([ responseA, responseB ]) => {
+              itemA = responseA;
+              itemB = responseB;
+            });
+
+            // This is a hack, can't seem to stub methods on a prototype
+            // and component.updateFromSimpla = sinon.stub() appears to 
+            // have the same broken behavior
+            component.updateFromSimpla = item => {
+              calledWithPaths.push(item.path);
+            }
+            
+            return Promise.resolve()
+              .then(() => waitForSetup)
+              .then(() => {
+                component.path = itemA.path;
+                component.path = itemB.path;
+              })
+              .then(wait())
+              .then(() => {
+                expect(calledWithPaths).to.not.contain(itemA.path);
+                expect(calledWithPaths).to.contain(itemB.path);
+              });
+          });
+
+          it('should not set back to simpla during load from simpla', () => {
+            let Component = defineComponent({
+                  type: 'Component',
+                  dataProperties: [ 'text' ],
+                  events: [ 'change' ]
+                }),
+                component = new Component();
+
+            component.path = path;
+            document.body.appendChild(component);
+
+            component.updateSimplaBuffer = sinon.stub();
+
+            // Setup setters / getters to re-trigger a change
+            Object.defineProperty(component, 'text', {
+              set(value) {
+                this._text = value;
+                fire(this, 'change');
+              },
+
+              get(value) {
+                return this._text;
+              }
+            });
+
+            return Promise.resolve()
+              .then(() => Simpla.set(path, { data: { text: 'Hello World' } }))
+              .then(wait())
+              .then(() => {
+                expect(component.updateSimplaBuffer.called).to.be.false;
+              });
+          });          
+
           describe('readonly', () => {
             it('should not follow editable if readonly true', () => {
               component.readonly = true;
@@ -225,131 +292,11 @@
               expect(component.editable).to.be.false;
             });
           });
-        });
-
-        describe('custom callbacks, path changing', () => {
-          let base,
-              config,
-              component,
-              Component;
-
-          base = {
-            properties: { text: String },
-            _setToSimpla: () => {},
-            _loadFromSimpla: () => {}
-          };
-
-          config = {
-            type: 'Component',
-            dataProperties: [ 'text' ],
-            getCallback: '_loadFromSimpla',
-            setCallback: '_setToSimpla'
-          }
-
-          beforeEach(() => {
-            Component = defineComponent(config, base);
-
-            component = new Component();
-            document.body.appendChild(component);
-
-            sinon.stub(component, '_loadFromSimpla');
-
-            sinon.stub(component, '_setToSimpla', function() {
-              return { text: this.text };
-            });
-
-            component.path = path;
-
-            return waitForLoaded(component);
-          });
-
-          afterEach(() => {
-            component.parentElement.removeChild(component);
-          });
-
-          it('should use supplied get callback', () => {
-            let item = { data: { text: 'foo' } };
-
-            return Promise.resolve()
-              .then(() => Simpla.set(path, item))
-              // Normalize item
-              .then((response) => item = response)
-              .then(wait())
-              .then(() => {
-                expect(component._loadFromSimpla.calledWith(item)).to.be.true;
-              });
-          });
-
-          it('should use supplied set callback', () => {
-            return Promise.resolve()
-              .then(() => component.text = 'foo')
-              .then(wait())
-              .then(() => Simpla.get(path))
-              .then((response) => {
-                expect(component._setToSimpla.called).to.be.true;
-                expect(response.data.text).to.equal('foo');
-              });
-          });
-
-          it('should not update data if path changed mid-request', () => {
-            let pathA = '/path-a',
-                pathB = '/path-b',
-                pathAItem,
-                pathBItem;
-
-            component = new Component();
-            document.body.appendChild(component);
-            sinon.stub(component, '_loadFromSimpla');
-
-            return Promise.resolve()
-              .then(() => Simpla.set(pathA, { data: { text: 'foo' } }))
-              .then(response => pathAItem = response)
-              .then(() => {
-                let promise;
-                component.path = pathA;
-                promise = Simpla.set(pathB, { data: { text: 'bar' } });
-                component.path = pathB;
-                return promise;
-              })
-              .then(response => pathBItem = response)
-              .then(wait())
-              .then(() => {
-                expect(component._loadFromSimpla.calledWith(pathAItem)).to.be.false;
-                expect(component._loadFromSimpla.calledWith(pathBItem)).to.be.true;
-              });
-          });
+          
         });
 
         describe('preventing infinite loops', () => {
-          let config,
-              base;
-
-          config = {
-            type: 'Component',
-            dataProperties: [ 'text' ],
-            setCallback: 'setCallback'
-          };
-
-          base = {
-            properties: { text: String },
-            setCallback: () => {}
-          };
-
-          it('should not set to buffer during load from simpla', () => {
-            let Component = defineComponent(config, base),
-                component = new Component();
-
-            component.path = path;
-
-            sinon.stub(component, 'setCallback');
-
-            return Promise.resolve()
-              .then(() => Simpla.set(path, { data: { text: 'Hello World' } }))
-              .then(wait())
-              .then(() => {
-                expect(component.setCallback.called).to.be.false;
-              });
-          });
+          
         });
 
         describe('static-content', () => {
@@ -358,8 +305,7 @@
 
           beforeEach(() => {
             let Component = defineComponent(
-              { type: 'Component', dataProperties: [ 'text' ] },
-              { properties: { text: String } }
+              { type: 'Component', dataProperties: [ 'text' ], events: [ 'change' ] }
             );
 
             component = new Component();
@@ -377,7 +323,7 @@
           it(`should set content into the buffer if no content is available`, () => {
             component.path = path;
 
-            return Promise.resolve(wait())
+            return waitForLoaded(component)
               .then(() => Simpla.get(path))
               .then((content) => {
                 expect(content.data.text).to.equal(component.text);
diff --git a/yarn.lock b/yarn.lock
index 0fdf22f..14ef83f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1276,10 +1276,18 @@ cliui@^3.0.3, cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+
 clone-stats@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
 
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+
 clone@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
@@ -1288,6 +1296,18 @@ clone@^1.0.0, clone@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
+clone@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
+
+cloneable-readable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.0.0.tgz#a6290d413f217a61232f95e458ff38418cfb0117"
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^1.0.6"
+    through2 "^2.0.1"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -2489,6 +2509,14 @@ glogg@^1.0.0:
   dependencies:
     sparkles "^1.0.0"
 
+google-closure-compiler-js@^20170910.0.1:
+  version "20170910.0.1"
+  resolved "https://registry.yarnpkg.com/google-closure-compiler-js/-/google-closure-compiler-js-20170910.0.1.tgz#06c93b215092f4ad57928a8a1b0f129566d2af78"
+  dependencies:
+    minimist "^1.2.0"
+    vinyl "^2.0.1"
+    webpack-core "^0.6.8"
+
 got@^5.0.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
@@ -4158,7 +4186,7 @@ private@^0.1.6:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
 
-process-nextick-args@~1.0.6:
+process-nextick-args@^1.0.6, process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
@@ -4394,6 +4422,10 @@ replace-ext@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
 
+replace-ext@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+
 request@2.78.0:
   version "2.78.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.78.0.tgz#e1c8dec346e1c81923b24acdb337f11decabe9cc"
@@ -4786,6 +4818,12 @@ signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
+simpla@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/simpla/-/simpla-3.0.1.tgz#21a4d1e2abdc3fed0ef1f4bd5e73a182f6ac09b3"
+  dependencies:
+    google-closure-compiler-js "^20170910.0.1"
+
 sinon-chai@^2.6.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-2.9.0.tgz#34d820042bc9661a14527130d401eb462c49bb84"
@@ -4861,6 +4899,10 @@ socket.io@1.6.0, socket.io@^1.3.7:
     socket.io-client "1.6.0"
     socket.io-parser "2.3.1"
 
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
 source-map-support@^0.4.2:
   version "0.4.14"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.14.tgz#9d4463772598b86271b4f523f6c1f4e02a7d6aef"
@@ -4877,6 +4919,12 @@ source-map@~0.2.0:
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
 sparkles@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
@@ -5109,9 +5157,9 @@ ternary-stream@^2.0.1:
     merge-stream "^1.0.0"
     through2 "^2.0.1"
 
-"test-fixture@github:polymerelements/test-fixture":
+test-fixture@PolymerElements/test-fixture:
   version "3.0.0-rc.1"
-  resolved "https://codeload.github.com/polymerelements/test-fixture/tar.gz/26118ef0467501c33c02316e7016a2837baba10f"
+  resolved "https://codeload.github.com/PolymerElements/test-fixture/tar.gz/05caebd9ecbb464024455923bd351d2ba640932e"
 
 text-table@~0.2.0:
   version "0.2.0"
@@ -5419,6 +5467,17 @@ vinyl@^0.5.0:
     clone-stats "^0.0.1"
     replace-ext "0.0.1"
 
+vinyl@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c"
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
 vlq@^0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
@@ -5530,6 +5589,13 @@ webidl-conversions@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506"
 
+webpack-core@^0.6.8:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.4.1"
+
 weinre@^2.0.0-pre-I0Z7U9OV:
   version "2.0.0-pre-I0Z7U9OV"
   resolved "https://registry.yarnpkg.com/weinre/-/weinre-2.0.0-pre-I0Z7U9OV.tgz#fef8aa223921f7b40bbbbd4c3ed4302f6fd0a813"

From 76d254f9d6d1a97b814c53a17008d410c8fd2683 Mon Sep 17 00:00:00 2001
From: Bede Overend <bede.overend@gmail.com>
Date: Fri, 1 Dec 2017 13:43:45 +1100
Subject: [PATCH 2/3] Uglify build

---
 simpla-element-behavior.html | 349 +----------------------------------
 1 file changed, 1 insertion(+), 348 deletions(-)

diff --git a/simpla-element-behavior.html b/simpla-element-behavior.html
index efe2de3..71744fa 100644
--- a/simpla-element-behavior.html
+++ b/simpla-element-behavior.html
@@ -1,348 +1 @@
-<script>'use strict';
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function changed(from, prop, value) {
-  from.dispatchEvent(new CustomEvent(prop + '-changed', { detail: { value: value } }));
-}
-
-var ERRORS = {
-  NO_SIMPLA: 'Cannot find Simpla, ensure it is included before this component'
-};
-
-window.SimplaElement = function (Base) {
-  return function (_Base) {
-    _inherits(_class, _Base);
-
-    function _class() {
-      _classCallCheck(this, _class);
-
-      var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this));
-
-      if (!window.Simpla) {
-        throw new Error(NO_SIMPLA);
-      }
-
-      _this._loaded = false;
-      _this.__simplaObservers = {};
-      _this.__triggerBufferSync = function () {
-        if (_this.loaded) {
-          _this._protectedSetCallback();
-        }
-      };
-      return _this;
-    }
-
-    _createClass(_class, [{
-      key: 'attributeChangedCallback',
-      value: function attributeChangedCallback(attr, oldValue, newValue) {
-        if (attr === 'path') {
-          this.path = newValue;
-        } else {
-          // Cast as Boolean. 
-          this[attr] = newValue !== null;
-        }
-      }
-
-      /**
-       * Setup editable state observer on attach
-       * @return {undefined}
-       */
-
-    }, {
-      key: 'connectedCallback',
-      value: function connectedCallback() {
-        var _this2 = this;
-
-        var events = this.constructor.simplaConfig.events;
-
-
-        _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'connectedCallback', this) && _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'connectedCallback', this).call(this);
-
-        events.forEach(function (event) {
-          return _this2.addEventListener(event, _this2.__triggerBufferSync);
-        });
-
-        this.editable = this.readonly ? false : this.editable || Simpla.getState('editable');
-
-        this._observeSimplaEditable();
-        this._initPathIfReady(this.path);
-      }
-
-      /**
-       * Clean up Simpla observers on detach
-       * @return {undefined}
-       */
-
-    }, {
-      key: 'disconnectedCallback',
-      value: function disconnectedCallback() {
-        var _this3 = this;
-
-        var events = this.constructor.simplaConfig.events;
-
-
-        _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'disconnectedCallback', this) && _get(_class.prototype.__proto__ || Object.getPrototypeOf(_class.prototype), 'disconnectedCallback', this).call(this);
-
-        events.forEach(function (event) {
-          return _this3.removeEventListener(event, _this3.__triggerBufferSync);
-        });
-
-        Object.keys(this.__simplaObservers).forEach(function (observer) {
-          _this3.__simplaObservers[observer].unobserve();
-        });
-
-        this.__simplaObservers = {};
-      }
-
-      /**
-       * Checks if connected and has a valid path. If so, calls _initSimplaPath
-       * @param  {String} path Current value of path prop
-       * @return {undefined}
-       */
-
-    }, {
-      key: '_initPathIfReady',
-      value: function _initPathIfReady(path) {
-        if (this.isConnected && typeof path !== 'undefined') {
-          this._initSimplaPath(path);
-        }
-      }
-
-      /**
-       * Init the path observer
-       * @param  {String} path Current value of path prop
-       * @return {undefined}
-       */
-
-    }, {
-      key: '_initSimplaPath',
-      value: function _initSimplaPath(path) {
-        var _this4 = this;
-
-        this._loaded = false;
-
-        Simpla.get(path).then(function (item) {
-          var isEmpty = !(item && item.data),
-              pathChanged = _this4.path !== path,
-              buffer = Simpla.getState('buffer'),
-              bufferIsClean = buffer && buffer[path] && !buffer[path].modified;
-
-          if (pathChanged) {
-            return;
-          }
-
-          if (isEmpty && bufferIsClean) {
-            // Load static content
-            _this4._protectedSetCallback().then(function () {
-              _this4._loaded = true;
-            });
-          } else {
-            _this4._protectedGetCallback(item);
-            _this4._loaded = true;
-          }
-        });
-
-        this._observeSimplaBuffer(path);
-      }
-
-      /**
-       * Observe buffer for changes to update element
-       * @param  {String} path Path to observe in buffer
-       * @return {undefined}
-       */
-
-    }, {
-      key: '_observeSimplaBuffer',
-      value: function _observeSimplaBuffer(path) {
-        var _this5 = this;
-
-        var observers = this.__simplaObservers;
-
-        if (!path) {
-          return;
-        }
-
-        if (observers.buffer) {
-          observers.buffer.unobserve();
-        }
-
-        observers.buffer = Simpla.observe(path, function (item) {
-          if (item && item.data) {
-            _this5._protectedGetCallback(item);
-          }
-        });
-      }
-
-      /**
-       * Sets up the data property to send to Simpla based on given dataProperties
-       * @return {Object}  Data to set to Simpla
-       */
-
-    }, {
-      key: 'updateSimplaBuffer',
-      value: function updateSimplaBuffer() {
-        var _this6 = this;
-
-        var dataProperties = this.constructor.simplaConfig.dataProperties;
-
-
-        return dataProperties.reduce(function (data, prop) {
-          return _extends(data, _defineProperty({}, prop, _this6[prop]));
-        }, {});
-      }
-
-      /**
-       * Update element from Simpla data
-       * @param  {Object} item The data from Simpla to update with
-       * @return {undefined}
-       */
-
-    }, {
-      key: 'updateFromSimpla',
-      value: function updateFromSimpla(item) {
-        _extends(this, item.data);
-      }
-
-      /**
-       * Calls the getCallback but protects against triggering an infinite loop
-       * @param  {Object} item Item to give to getCallback
-       * @return {undefined}
-       */
-
-    }, {
-      key: '_protectedGetCallback',
-      value: function _protectedGetCallback(item) {
-        this.__loadingFromSimpla = true;
-        this.updateFromSimpla(item);
-        this.__loadingFromSimpla = false;
-      }
-
-      /**
-       * Calls the setCallback but protects against triggering an infinite loop
-       * @return {undefined}
-       */
-
-    }, {
-      key: '_protectedSetCallback',
-      value: function _protectedSetCallback() {
-        var done = Promise.resolve();
-        if (!this.__loadingFromSimpla && this.isConnected && this.path) {
-          var data = this.updateSimplaBuffer(),
-              type = this.constructor.simplaConfig.type;
-
-
-          if (typeof data !== 'undefined' || data === null) {
-            done = Simpla.set(this.path, { type: type, data: data });
-          }
-        }
-
-        return done;
-      }
-
-      /**
-       * Editable state observer
-       * @return {undefined}
-       */
-
-    }, {
-      key: '_observeSimplaEditable',
-      value: function _observeSimplaEditable() {
-        var _this7 = this;
-
-        var observers = this.__simplaObservers;
-
-
-        if (observers.editable) {
-          observers.editable.unobserve();
-        }
-
-        observers.editable = Simpla.observeState('editable', function (editable) {
-          _this7.editable = editable;
-        });
-      }
-    }, {
-      key: 'path',
-      get: function get() {
-        return this.__path;
-      },
-      set: function set(value) {
-        var previous = this.__path;
-        this.__path = value;
-
-        if (value !== previous) {
-          this._initPathIfReady(value);
-        }
-      }
-    }, {
-      key: 'editable',
-      get: function get() {
-        return this.__editable;
-      },
-      set: function set(value) {
-        var previous = this.__editable;
-
-        if (!this.readonly) {
-          this.__editable = value;
-
-          if (value !== previous) {
-            changed(this, 'editable', value);
-          }
-        }
-      }
-    }, {
-      key: 'readonly',
-      get: function get() {
-        return this.__readonly;
-      },
-      set: function set(value) {
-        var previous = this.__readonly;
-
-        // Disable to allow editable to be set however we like
-        this.__readonly = false;
-
-        if (!value && previous === true) {
-          this.editable = Simpla.getState('editable');
-        } else if (value) {
-          this.editable = false;
-        }
-
-        this.__readonly = value;
-      }
-    }, {
-      key: 'loaded',
-      get: function get() {
-        return this.__loaded;
-      }
-    }, {
-      key: '_loaded',
-      set: function set(value) {
-        var previous = this.__loaded;
-        this.__loaded = value;
-
-        if (value !== previous) {
-          changed(this, 'loaded', value);
-        }
-      }
-    }], [{
-      key: 'observedAttributes',
-      get: function get() {
-        return ['path', 'editable', 'readonly', 'loaded'];
-      }
-    }]);
-
-    return _class;
-  }(Base);
-};</script>
+<script>"use strict";function _defineProperty(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function changed(e,t,i){e.dispatchEvent(new CustomEvent(t+"-changed",{detail:{value:i}}))}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},_createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),_get=function e(t,i,n){null===t&&(t=Function.prototype);var r=Object.getOwnPropertyDescriptor(t,i);if(void 0===r){var a=Object.getPrototypeOf(t);return null===a?void 0:e(a,i,n)}if("value"in r)return r.value;var o=r.get;if(void 0!==o)return o.call(n)},ERRORS={NO_SIMPLA:"Cannot find Simpla, ensure it is included before this component"};window.SimplaElement=function(e){return function(e){function t(){_classCallCheck(this,t);var e=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));if(!window.Simpla)throw new Error(NO_SIMPLA);return e._loaded=!1,e.__simplaObservers={},e.__triggerBufferSync=function(){e.loaded&&e._protectedSetCallback()},e}return _inherits(t,e),_createClass(t,[{key:"attributeChangedCallback",value:function(e,t,i){"path"===e?this.path=i:this[e]=null!==i}},{key:"connectedCallback",value:function(){var e=this,i=this.constructor.simplaConfig.events;_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this)&&_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),i.forEach(function(t){return e.addEventListener(t,e.__triggerBufferSync)}),this.editable=!this.readonly&&(this.editable||Simpla.getState("editable")),this._observeSimplaEditable(),this._initPathIfReady(this.path)}},{key:"disconnectedCallback",value:function(){var e=this,i=this.constructor.simplaConfig.events;_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"disconnectedCallback",this)&&_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"disconnectedCallback",this).call(this),i.forEach(function(t){return e.removeEventListener(t,e.__triggerBufferSync)}),Object.keys(this.__simplaObservers).forEach(function(t){e.__simplaObservers[t].unobserve()}),this.__simplaObservers={}}},{key:"_initPathIfReady",value:function(e){this.isConnected&&void 0!==e&&this._initSimplaPath(e)}},{key:"_initSimplaPath",value:function(e){var t=this;this._loaded=!1,Simpla.get(e).then(function(i){var n=!(i&&i.data),r=t.path!==e,a=Simpla.getState("buffer"),o=a&&a[e]&&!a[e].modified;r||(n&&o?t._protectedSetCallback().then(function(){t._loaded=!0}):(t._protectedGetCallback(i),t._loaded=!0))}),this._observeSimplaBuffer(e)}},{key:"_observeSimplaBuffer",value:function(e){var t=this,i=this.__simplaObservers;e&&(i.buffer&&i.buffer.unobserve(),i.buffer=Simpla.observe(e,function(e){e&&e.data&&t._protectedGetCallback(e)}))}},{key:"updateSimplaBuffer",value:function(){var e=this;return this.constructor.simplaConfig.dataProperties.reduce(function(t,i){return _extends(t,_defineProperty({},i,e[i]))},{})}},{key:"updateFromSimpla",value:function(e){_extends(this,e.data)}},{key:"_protectedGetCallback",value:function(e){this.__loadingFromSimpla=!0,this.updateFromSimpla(e),this.__loadingFromSimpla=!1}},{key:"_protectedSetCallback",value:function(){var e=Promise.resolve();if(!this.__loadingFromSimpla&&this.isConnected&&this.path){var t=this.updateSimplaBuffer(),i=this.constructor.simplaConfig.type;void 0===t&&null!==t||(e=Simpla.set(this.path,{type:i,data:t}))}return e}},{key:"_observeSimplaEditable",value:function(){var e=this,t=this.__simplaObservers;t.editable&&t.editable.unobserve(),t.editable=Simpla.observeState("editable",function(t){e.editable=t})}},{key:"path",get:function(){return this.__path},set:function(e){var t=this.__path;this.__path=e,e!==t&&this._initPathIfReady(e)}},{key:"editable",get:function(){return this.__editable},set:function(e){var t=this.__editable;this.readonly||(this.__editable=e,e!==t&&changed(this,"editable",e))}},{key:"readonly",get:function(){return this.__readonly},set:function(e){var t=this.__readonly;this.__readonly=!1,e||!0!==t?e&&(this.editable=!1):this.editable=Simpla.getState("editable"),this.__readonly=e}},{key:"loaded",get:function(){return this.__loaded}},{key:"_loaded",set:function(e){var t=this.__loaded;this.__loaded=e,e!==t&&changed(this,"loaded",e)}}],[{key:"observedAttributes",get:function(){return["path","editable","readonly","loaded"]}}]),t}(e)}</script> 
\ No newline at end of file

From 921ed481d3a8eb4a80fee67653f9454627b40461 Mon Sep 17 00:00:00 2001
From: Bede Overend <bede.overend@gmail.com>
Date: Fri, 1 Dec 2017 14:01:34 +1100
Subject: [PATCH 3/3] Revert to original loaded behaviour

---
 simpla-element-behavior.html      |  2 +-
 src/simpla-element-behavior.html  | 13 +++++--------
 test/simpla-element-behavior.html | 17 ++++++++++++-----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/simpla-element-behavior.html b/simpla-element-behavior.html
index 71744fa..79769a9 100644
--- a/simpla-element-behavior.html
+++ b/simpla-element-behavior.html
@@ -1 +1 @@
-<script>"use strict";function _defineProperty(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function changed(e,t,i){e.dispatchEvent(new CustomEvent(t+"-changed",{detail:{value:i}}))}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},_createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),_get=function e(t,i,n){null===t&&(t=Function.prototype);var r=Object.getOwnPropertyDescriptor(t,i);if(void 0===r){var a=Object.getPrototypeOf(t);return null===a?void 0:e(a,i,n)}if("value"in r)return r.value;var o=r.get;if(void 0!==o)return o.call(n)},ERRORS={NO_SIMPLA:"Cannot find Simpla, ensure it is included before this component"};window.SimplaElement=function(e){return function(e){function t(){_classCallCheck(this,t);var e=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));if(!window.Simpla)throw new Error(NO_SIMPLA);return e._loaded=!1,e.__simplaObservers={},e.__triggerBufferSync=function(){e.loaded&&e._protectedSetCallback()},e}return _inherits(t,e),_createClass(t,[{key:"attributeChangedCallback",value:function(e,t,i){"path"===e?this.path=i:this[e]=null!==i}},{key:"connectedCallback",value:function(){var e=this,i=this.constructor.simplaConfig.events;_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this)&&_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),i.forEach(function(t){return e.addEventListener(t,e.__triggerBufferSync)}),this.editable=!this.readonly&&(this.editable||Simpla.getState("editable")),this._observeSimplaEditable(),this._initPathIfReady(this.path)}},{key:"disconnectedCallback",value:function(){var e=this,i=this.constructor.simplaConfig.events;_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"disconnectedCallback",this)&&_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"disconnectedCallback",this).call(this),i.forEach(function(t){return e.removeEventListener(t,e.__triggerBufferSync)}),Object.keys(this.__simplaObservers).forEach(function(t){e.__simplaObservers[t].unobserve()}),this.__simplaObservers={}}},{key:"_initPathIfReady",value:function(e){this.isConnected&&void 0!==e&&this._initSimplaPath(e)}},{key:"_initSimplaPath",value:function(e){var t=this;this._loaded=!1,Simpla.get(e).then(function(i){var n=!(i&&i.data),r=t.path!==e,a=Simpla.getState("buffer"),o=a&&a[e]&&!a[e].modified;r||(n&&o?t._protectedSetCallback().then(function(){t._loaded=!0}):(t._protectedGetCallback(i),t._loaded=!0))}),this._observeSimplaBuffer(e)}},{key:"_observeSimplaBuffer",value:function(e){var t=this,i=this.__simplaObservers;e&&(i.buffer&&i.buffer.unobserve(),i.buffer=Simpla.observe(e,function(e){e&&e.data&&t._protectedGetCallback(e)}))}},{key:"updateSimplaBuffer",value:function(){var e=this;return this.constructor.simplaConfig.dataProperties.reduce(function(t,i){return _extends(t,_defineProperty({},i,e[i]))},{})}},{key:"updateFromSimpla",value:function(e){_extends(this,e.data)}},{key:"_protectedGetCallback",value:function(e){this.__loadingFromSimpla=!0,this.updateFromSimpla(e),this.__loadingFromSimpla=!1}},{key:"_protectedSetCallback",value:function(){var e=Promise.resolve();if(!this.__loadingFromSimpla&&this.isConnected&&this.path){var t=this.updateSimplaBuffer(),i=this.constructor.simplaConfig.type;void 0===t&&null!==t||(e=Simpla.set(this.path,{type:i,data:t}))}return e}},{key:"_observeSimplaEditable",value:function(){var e=this,t=this.__simplaObservers;t.editable&&t.editable.unobserve(),t.editable=Simpla.observeState("editable",function(t){e.editable=t})}},{key:"path",get:function(){return this.__path},set:function(e){var t=this.__path;this.__path=e,e!==t&&this._initPathIfReady(e)}},{key:"editable",get:function(){return this.__editable},set:function(e){var t=this.__editable;this.readonly||(this.__editable=e,e!==t&&changed(this,"editable",e))}},{key:"readonly",get:function(){return this.__readonly},set:function(e){var t=this.__readonly;this.__readonly=!1,e||!0!==t?e&&(this.editable=!1):this.editable=Simpla.getState("editable"),this.__readonly=e}},{key:"loaded",get:function(){return this.__loaded}},{key:"_loaded",set:function(e){var t=this.__loaded;this.__loaded=e,e!==t&&changed(this,"loaded",e)}}],[{key:"observedAttributes",get:function(){return["path","editable","readonly","loaded"]}}]),t}(e)}</script> 
\ No newline at end of file
+<script>"use strict";function _defineProperty(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function changed(e,t,i){e.dispatchEvent(new CustomEvent(t+"-changed",{detail:{value:i}}))}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},_createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),_get=function e(t,i,n){null===t&&(t=Function.prototype);var r=Object.getOwnPropertyDescriptor(t,i);if(void 0===r){var a=Object.getPrototypeOf(t);return null===a?void 0:e(a,i,n)}if("value"in r)return r.value;var o=r.get;if(void 0!==o)return o.call(n)},ERRORS={NO_SIMPLA:"Cannot find Simpla, ensure it is included before this component"};window.SimplaElement=function(e){return function(e){function t(){_classCallCheck(this,t);var e=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));if(!window.Simpla)throw new Error(NO_SIMPLA);return e._loaded=!1,e.__simplaObservers={},e.__triggerBufferSync=function(){e.loaded&&e._protectedSetCallback()},e}return _inherits(t,e),_createClass(t,[{key:"attributeChangedCallback",value:function(e,t,i){"path"===e?this.path=i:this[e]=null!==i}},{key:"connectedCallback",value:function(){var e=this,i=this.constructor.simplaConfig.events;_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this)&&_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),i.forEach(function(t){return e.addEventListener(t,e.__triggerBufferSync)}),this.editable=!this.readonly&&(this.editable||Simpla.getState("editable")),this._observeSimplaEditable(),this._initPathIfReady(this.path)}},{key:"disconnectedCallback",value:function(){var e=this,i=this.constructor.simplaConfig.events;_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"disconnectedCallback",this)&&_get(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"disconnectedCallback",this).call(this),i.forEach(function(t){return e.removeEventListener(t,e.__triggerBufferSync)}),Object.keys(this.__simplaObservers).forEach(function(t){e.__simplaObservers[t].unobserve()}),this.__simplaObservers={}}},{key:"_initPathIfReady",value:function(e){this.isConnected&&void 0!==e&&this._initSimplaPath(e)}},{key:"_initSimplaPath",value:function(e){var t=this;this._loaded=!1,Simpla.get(e).then(function(i){var n=!(i&&i.data),r=t.path!==e,a=Simpla.getState("buffer"),o=a&&a[e]&&!a[e].modified;r||(n&&o?t._protectedSetCallback():t._protectedGetCallback(i),t._loaded=!0)}),this._observeSimplaBuffer(e)}},{key:"_observeSimplaBuffer",value:function(e){var t=this,i=this.__simplaObservers;e&&(i.buffer&&i.buffer.unobserve(),i.buffer=Simpla.observe(e,function(e){e&&e.data&&t._protectedGetCallback(e)}))}},{key:"updateSimplaBuffer",value:function(){var e=this;return this.constructor.simplaConfig.dataProperties.reduce(function(t,i){return _extends(t,_defineProperty({},i,e[i]))},{})}},{key:"updateFromSimpla",value:function(e){_extends(this,e.data)}},{key:"_protectedGetCallback",value:function(e){this.__loadingFromSimpla=!0,this.updateFromSimpla(e),this.__loadingFromSimpla=!1}},{key:"_protectedSetCallback",value:function(){if(!this.__loadingFromSimpla&&this.isConnected&&this.path){var e=this.updateSimplaBuffer(),t=this.constructor.simplaConfig.type;void 0===e&&null!==e||Simpla.set(this.path,{type:t,data:e})}}},{key:"_observeSimplaEditable",value:function(){var e=this,t=this.__simplaObservers;t.editable&&t.editable.unobserve(),t.editable=Simpla.observeState("editable",function(t){e.editable=t})}},{key:"path",get:function(){return this.__path},set:function(e){var t=this.__path;this.__path=e,e!==t&&this._initPathIfReady(e)}},{key:"editable",get:function(){return this.__editable},set:function(e){var t=this.__editable;this.readonly||(this.__editable=e,e!==t&&changed(this,"editable",e))}},{key:"readonly",get:function(){return this.__readonly},set:function(e){var t=this.__readonly;this.__readonly=!1,e||!0!==t?e&&(this.editable=!1):this.editable=Simpla.getState("editable"),this.__readonly=e}},{key:"loaded",get:function(){return this.__loaded}},{key:"_loaded",set:function(e){var t=this.__loaded;this.__loaded=e,e!==t&&changed(this,"loaded",e)}}],[{key:"observedAttributes",get:function(){return["path","editable","readonly","loaded"]}}]),t}(e)}</script> 
\ No newline at end of file
diff --git a/src/simpla-element-behavior.html b/src/simpla-element-behavior.html
index ef99838..4085e17 100644
--- a/src/simpla-element-behavior.html
+++ b/src/simpla-element-behavior.html
@@ -166,13 +166,13 @@
 
           if (isEmpty && bufferIsClean) {
             // Load static content
-            this._protectedSetCallback().then(() => {
-              this._loaded = true;
-            });
+            this._protectedSetCallback();
           } else {
             this._protectedGetCallback(item);
-            this._loaded = true;
           }
+
+          this._loaded = true;
+
         });
   
       this._observeSimplaBuffer(path);
@@ -238,17 +238,14 @@
      * @return {undefined}
      */
     _protectedSetCallback() {
-      let done = Promise.resolve();
       if (!this.__loadingFromSimpla && this.isConnected && this.path) {
         let data = this.updateSimplaBuffer(),
             { type } = this.constructor.simplaConfig;
 
         if (typeof data !== 'undefined' || data === null) {
-          done = Simpla.set(this.path, { type, data });
+          Simpla.set(this.path, { type, data });
         }
       }
-
-      return done;
     }
   
     /**
diff --git a/test/simpla-element-behavior.html b/test/simpla-element-behavior.html
index df88a31..25ef9d8 100755
--- a/test/simpla-element-behavior.html
+++ b/test/simpla-element-behavior.html
@@ -321,12 +321,19 @@
           });
 
           it(`should set content into the buffer if no content is available`, () => {
-            component.path = path;
-
-            return waitForLoaded(component)
+            return Promise.resolve()
+              // Make sure buffer is filled
               .then(() => Simpla.get(path))
-              .then((content) => {
-                expect(content.data.text).to.equal(component.text);
+              .then(() => {
+                return new Promise(resolve => {
+                  let observer = Simpla.observe(path, item => {
+                    expect(item.data.text).to.equal(component.text);
+                    observer.unobserve();
+                    resolve();
+                  });
+                  
+                  component.path = path;
+                });
               });
           });