@webtides/element-js 0.6.2 → 0.7.1

package/CHANGELOG.md

@@ -14,6 +14,30 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 <!-- ### Changed -->
 <!-- ### Removed -->
 <!-- ### Fixed -->
+
+## [0.7.1] - 2023-03-03
+
+### Added
+* Elements are now able to watch Stores 
+
+### Fixed
+* Injection of falsy values
+
+## [0.7.0] - 2023-02-13
+
+### Added
+* Dependency Injection via Context Protocol 💉
+* Provide reactive Properties or entire Stores via: provideProperties() { return { name : value}} 
+* Inject / Request them via injectProperties() { return { name : 'defaultValue'}}
+
+### Changed
+* docs structure
+
+### Fixed
+* Cannot re-render slotted light dom when using the vanilla renderer https://github.com/webtides/element-js/issues/76
+* adds Vanilla Renderer Tests
+
+
 ## [0.6.2] - 2022-11-18
 
 ### FIXED

package/dist/index.js

@@ -33,6 +33,9 @@ function isNumber(value) {
 function isNaN(value) {
   return Number.isNaN(value);
 }
+function deepEquals(valueA, valueB) {
+  return JSON.stringify(valueA) === JSON.stringify(valueB);
+}
 function parseAttribute(value, options = {}) {
   if (options.parse === false || !isString(value)) {
     return value;
@@ -88,13 +91,16 @@ var Store = class {
           return this._state[key];
         },
         set: (newValue) => {
+          const oldState = structuredClone(this._state);
           const oldValue = this._state[key];
           this._state[key] = newValue;
-          const watch = this.watch();
-          if (watch.hasOwnProperty(key) && typeof watch[key] === "function") {
-            watch[key](newValue, oldValue);
+          if (!deepEquals(newValue, oldValue)) {
+            const watch = this.watch();
+            if (watch.hasOwnProperty(key) && typeof watch[key] === "function") {
+              watch[key](newValue, oldValue);
+            }
+            this.requestUpdate(oldState);
           }
-          this.requestUpdate();
         }
       });
     });
@@ -117,8 +123,26 @@ var Store = class {
   unsubscribe(observer) {
     this._observer.delete(observer);
   }
-  requestUpdate() {
-    this._observer.forEach((observer) => typeof observer.requestUpdate === "function" ? observer.requestUpdate() : observer());
+  requestUpdate(oldState) {
+    this._observer.forEach(async (observer) => {
+      var _a, _b;
+      if (observer instanceof BaseElement) {
+        await observer.requestUpdate();
+        if (Object.keys((_a = observer.watch()) != null ? _a : {}).length > 0) {
+          const properties = observer.properties();
+          Object.keys((_b = observer.watch()) != null ? _b : {}).forEach((key) => {
+            if (properties[key] === this) {
+              observer.callPropertyWatcher(key, this._state, oldState);
+              observer.notifyPropertyChange(key, this._state);
+            }
+          });
+        }
+      } else if (typeof observer === "function") {
+        observer();
+      } else {
+        console.error("Store: observer type is not supported.", observer);
+      }
+    });
   }
 };
 
@@ -170,6 +194,7 @@ var BaseElement = class extends HTMLElement {
     this.defineAttributesAsProperties();
     this.defineProperties();
     this.defineComputedProperties();
+    this.definePropertyInjection();
     this.defineObserver();
     if (this.hasAttribute("defer-update") || this._options.deferUpdate) {
       this.registerEventsAndRefs();
@@ -203,6 +228,9 @@ var BaseElement = class extends HTMLElement {
   }
   disconnectedCallback() {
     this.removeEvents();
+    if (Object.keys(this.provideProperties()).length > 0) {
+      this.removeEventListener("request-context", this.onRequestContext);
+    }
     if (this._mutationObserver)
       this._mutationObserver.disconnect();
     Object.values(this.properties()).forEach((property) => {
@@ -257,7 +285,7 @@ var BaseElement = class extends HTMLElement {
     return {};
   }
   defineProperties() {
-    Object.keys(this.properties()).forEach((prop) => {
+    Object.keys({...this.injectProperties(), ...this.properties()}).forEach((prop) => {
       const value = this[prop] || this.properties()[prop];
       this.defineProperty(prop, value);
     });
@@ -287,17 +315,12 @@ var BaseElement = class extends HTMLElement {
         const newValueString = JSON.stringify(newValue);
         if (JSON.stringify(oldValue) !== newValueString) {
           this._state[property] = newValue;
+          if (newValue instanceof Store) {
+            newValue.subscribe(this);
+          }
           if (reflectAttribute || ((_a2 = this._options.propertyOptions[property]) == null ? void 0 : _a2.reflect)) {
             this.reflectProperty({property, newValue, newValueString});
           }
-          const informWatchedPropertiesAndDispatchChangeEvent = () => {
-            if (property in this.watch()) {
-              this.watch()[property](newValue, oldValue);
-            }
-            if (property in this._options["propertyOptions"] && this._options["propertyOptions"][property]["notify"] === true) {
-              this.dispatch(`${camelToDash(property)}-changed`, newValue, true);
-            }
-          };
           if (this._options.autoUpdate) {
             this.requestUpdate({
               notify: true,
@@ -306,16 +329,29 @@ var BaseElement = class extends HTMLElement {
               newValueString,
               oldValue
             }).finally(() => {
-              informWatchedPropertiesAndDispatchChangeEvent();
+              this.callPropertyWatcher(property, newValue, oldValue);
+              this.notifyPropertyChange(property, newValue);
             });
           } else {
-            informWatchedPropertiesAndDispatchChangeEvent();
+            this.callPropertyWatcher(property, newValue, oldValue);
+            this.notifyPropertyChange(property, newValue);
           }
         }
         return this;
       }
     });
   }
+  callPropertyWatcher(property, newValue, oldValue) {
+    const watch = this.watch();
+    if (property in watch) {
+      watch[property](newValue, oldValue);
+    }
+  }
+  notifyPropertyChange(property, newValue) {
+    if (property in this._options["propertyOptions"] && this._options["propertyOptions"][property]["notify"] === true) {
+      this.dispatch(`${camelToDash(property)}-changed`, newValue, true);
+    }
+  }
   reflectProperty(options) {
     var _a;
     const {property, newValue} = options;
@@ -330,6 +366,39 @@ var BaseElement = class extends HTMLElement {
       this.setAttribute(camelToDash(property), attributeValue);
     }
   }
+  injectProperties() {
+    return {};
+  }
+  provideProperties() {
+    return {};
+  }
+  definePropertyInjection() {
+    Object.entries(this.injectProperties()).forEach(([key, value]) => {
+      this.requestContext(key, value);
+    });
+    if (Object.keys(this.provideProperties()).length > 0) {
+      this.addEventListener("request-context", this.onRequestContext);
+    }
+  }
+  requestContext(propertyName, valueOrCallback) {
+    this.dispatch("request-context", {[propertyName]: valueOrCallback}, true);
+  }
+  onRequestContext(event) {
+    var _a;
+    const properties = this.properties();
+    const provideProperties = this.provideProperties();
+    Object.entries((_a = event.detail) != null ? _a : {}).forEach(([key, valueOrCallback]) => {
+      if (key in provideProperties) {
+        const providedValue = provideProperties[key];
+        event.stopPropagation();
+        if (typeof valueOrCallback === "function") {
+          valueOrCallback(providedValue);
+        } else {
+          event.target[key] = providedValue;
+        }
+      }
+    });
+  }
   hooks() {
     return {};
   }