@webtides/element-js 0.4.3 → 0.6.0

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 <!-- ### Changed -->
 <!-- ### Removed -->
 <!-- ### Fixed -->
+## [0.6.0] - 2022-11-17
+
+### ADDED
+* StoreProperty for shared application state  
+* Directives for Vanilla Renderer
+
+## [0.5.0] - 2022-09-13
+
+### Changed
+* improved the performance of the vanilla-renderer
+
+### Removed
+* setting attributes as properties during dom diffing for the vanilla renderer. This is potentially a **breaking** change if you used attributes with the "." (dot) notation
+
 ## [0.4.3] - 2022-07-06
 
 ### ADDED

package/README.md

@@ -25,7 +25,9 @@ npm install --save @webtides/element-js
 // import { BaseElement, defineElement } from 'https://unpkg.com/@webtides/element-js';
 // import { BaseElement, defineElement } from 'https://cdn.skypack.dev/@webtides/element-js';
 // or when installed via npm
-import { BaseElement, defineElement } from '@webtides/element-js';
+import { BaseElement, defineElement, Store } from '@webtides/element-js';
+
+const sharedDate = new  Store({date: Date.now()}) 
 
 class ExampleElement extends BaseElement {
     // normal public properties
@@ -40,7 +42,8 @@ class ExampleElement extends BaseElement {
     // reactive attributes/properties
     properties() {
         return {
-            familyName: 'Doe'
+           familyName: 'Doe',
+           sharedDate
         };
     }
 
@@ -55,7 +58,7 @@ class ExampleElement extends BaseElement {
 
     // computed property
     get computedMsg() {
-        return `${this.greeting} ${this.name} ${this.familyName}`;
+        return `${this.greeting} ${this.name} ${this.familyName} ${this.sharedDate.date}`;
     }
 
     // method

package/dist/index.js

@@ -73,6 +73,47 @@ function getShadowParentOrBody(element) {
 var supportsAdoptingStyleSheets = () => "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
 var supportsAppendingStyleSheets = !window.ShadyDOM;
 
+// src/util/Store.js
+var Store = class {
+  constructor(value) {
+    __publicField(this, "_observer", new Set());
+    __publicField(this, "_singlePropertyMode", false);
+    __publicField(this, "_state", {});
+    this._singlePropertyMode = !isObjectLike(value);
+    const specificValues = this._singlePropertyMode ? {value} : value;
+    this._state = {...!this._singlePropertyMode && this.properties(), ...specificValues};
+    Object.entries(this._state).map(([key, value2]) => {
+      Object.defineProperty(this, key, {
+        get: () => {
+          return this._state[key];
+        },
+        set: (newValue) => {
+          this._state[key] = newValue;
+          this.requestUpdate();
+        }
+      });
+    });
+  }
+  properties() {
+    return {};
+  }
+  valueOf() {
+    return this._singlePropertyMode ? this._state.value : this._state;
+  }
+  toString() {
+    return `${this._singlePropertyMode ? this._state.value : this._state}`;
+  }
+  subscribe(observer) {
+    this._observer.add(observer);
+  }
+  unsubscribe(observer) {
+    this._observer.delete(observer);
+  }
+  requestUpdate() {
+    this._observer.forEach((observer) => typeof observer.requestUpdate === "function" ? observer.requestUpdate() : observer());
+  }
+};
+
 // src/util/defineElement.js
 function defineElement(name, constructor) {
   try {
@@ -156,6 +197,11 @@ var BaseElement = class extends HTMLElement {
     this.removeEvents();
     if (this._mutationObserver)
       this._mutationObserver.disconnect();
+    Object.values(this.properties()).forEach((property) => {
+      if (property instanceof Store) {
+        property.unsubscribe(this);
+      }
+    });
     this.triggerHook("disconnected");
   }
   requestUpdate(options = {notify: true}) {
@@ -210,6 +256,9 @@ var BaseElement = class extends HTMLElement {
   }
   defineProperty(property, value, reflectAttribute = false) {
     var _a, _b;
+    if (value instanceof Store) {
+      value.subscribe(this);
+    }
     if (this._state.hasOwnProperty(property)) {
       return;
     }
@@ -1494,6 +1543,7 @@ var TemplateElement = class extends StyledElement {
 };
 export {
   BaseElement,
+  Store,
   StyledElement,
   TemplateElement,
   defineElement,