feat: observe for attribute changes

infodusha · Aug 24, 2023 · f616803 · f616803
1 parent ab21e56
commit f616803
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -32,12 +32,12 @@ So later you can use include your template with:
 * Make conditional elements
 * Optionally enable shadow root
 * Partial style encapsulation (when not a shadow root mode)
+* Watch for attribute changes from js
 
 # TODO
 
-* Watch for attribute changes (from js)
-* Extended script support
 * Full style encapsulation (when not a shadow root mode)
+* Extended script support
 * Full slot support
 
 # License

diff --git a/example/header.html b/example/header.html
@@ -24,6 +24,6 @@
 
 <script>
     setTimeout(() => {
-        this.name = 'Reset';
+        this.setAttribute('name', 'Censored');
     }, 3000);
 </script>
diff --git a/src/define-custom-element.js b/src/define-custom-element.js
@@ -1,5 +1,6 @@
 import {ErrorStackModifier} from './error-stack-modifier.js';
 
+
 export function defineCustomElement(definedElement) {
     const template = definedElement.querySelector('template');
     const useShadow = template.hasAttribute('data-shadow');
@@ -12,16 +13,31 @@ export function defineCustomElement(definedElement) {
     }
 
     class DefineHTMLElement extends HTMLElement {
+        #observedProperties = new Set();
+
+        #attributeChangeObserver;
+
         constructor() {
             super();
+            const onAttributeChange = this.#onAttributeChange.bind(this);
+            this.#attributeChangeObserver = new MutationObserver(onAttributeChange);
             this.#attach();
-            this.#setAttrs();
             if (useShadow) {
                 this.#setShadowStyles();
             }
+            this.#observeAttributes();
             this.#execScripts();
         }
 
+        connectedCallback() {
+            this.#attributeChangeObserver.observe(this, { attributes: true });
+        }
+
+        disconnectedCallback() {
+            this.#observedProperties.clear();
+            this.#attributeChangeObserver.disconnect()
+        }
+
         #getContent() {
             const content = template.content.cloneNode(true);
             for (const element of content.querySelectorAll(`[data-if]`)) {
@@ -56,17 +72,15 @@ export function defineCustomElement(definedElement) {
             }
         }
 
-        #setAttrs() {
+        #applyAttr(name, value) {
             const root = useShadow ? this.shadowRoot : this;
-            for (const name of this.getAttributeNames()) {
-                const value = this.getAttribute(name);
-                for (const element of root.querySelectorAll(`[data-attr='${name}']`)) {
-                    if (element.childNodes) {
-                        // TODO handle case when there are already nodes inside
-                    }
-                    element.innerText = value;
+            for (const element of root.querySelectorAll(`[data-attr='${name}']`)) {
+                if (element.childNodes) {
+                    // TODO handle case when there are already nodes inside
                 }
+                element.innerText = value;
             }
+            // TODO add support for data-if and data-if-not when changed via js
         }
 
         #setShadowStyles() {
@@ -96,6 +110,46 @@ export function defineCustomElement(definedElement) {
                 }
             }
         }
+
+        #observeAttributes() {
+            for (const name of this.getAttributeNames()) {
+                this.#makeObservedProperty(name);
+            }
+        }
+
+        #makeObservedProperty(name) {
+            if (this.#observedProperties.has(name)) {
+                return;
+            }
+            let value = this.getAttribute(name);
+            this.#applyAttr(name, value);
+            Object.defineProperty(this, name, {
+                get() {
+                    return value;
+                },
+                set(newValue) {
+                    value = newValue;
+                    this.#applyAttr(name, newValue);
+                },
+                enumerable: true,
+                configurable: true,
+            });
+            this.#observedProperties.add(name);
+        }
+
+        #onAttributeChange(mutationList) {
+            for (const mutation of mutationList) {
+                if (mutation.type !== 'attributes') {
+                    throw new Error('Unexpected');
+                }
+                const { attributeName } = mutation;
+                if (this.#observedProperties.has(attributeName)) {
+                    this[attributeName] = this.getAttribute(attributeName);
+                } else {
+                    this.#makeObservedProperty(attributeName);
+                }
+            }
+        }
     }
 
     customElements.define(selector, DefineHTMLElement);
@@ -122,4 +176,4 @@ function setEmulatedStyles(styles, selector) {
         document.head.appendChild(element);
         URL.revokeObjectURL(url);
     }
-}
+}