feat: detect and apply changes to dynamic attributes

Author: jorenrui

demo/observer.html

@@ -20,15 +20,26 @@
         >
           list item (click to delete)
         </button>
+        <button
+          class="px-2 py-1 bg-gray-200 rounded-md text-base"
+          :click="this.previousElementSibling.setAttribute(':class', 'isHovered ? \'bg-red-200\' : \'bg-gray-200\'')"
+        >
+          Change :class Attribute
+        </button>
       </li>
       <li>
         <button
           :mouseenter="isHovered2 = true"
           :mouseleave="isHovered2 = false"
           :class="isHovered2 ? 'bg-red-200' : ''"
           :click="this.parentNode.parentNode.removeChild(this.parentNode)"
+          :text="`my id is ${this.getAttribute('id')} (hover me to change) list item (click to delete)`"
+        ></button>
+        <button
+          class="px-2 py-1 bg-gray-200 rounded-md text-base"
+          :click="this.previousElementSibling.setAttribute(':id', '`list2${Math.random()}`')"
         >
-          list item (click to delete)
+          Change :id Attribute
         </button>
       </li>
       <li>

lib/entity.js

@@ -265,6 +265,18 @@ export default class Entity {
     }
   }
 
+  async evaluateAttribute(attribute) {
+    if (attribute === ':class') this.evaluateClass()
+    else if (attribute === ':text') this.evaluateText()
+    else if ([':value', ':checked'].includes(attribute)) this.evaluateValue()
+    else if (attribute === ':each') this.evaluateEach()
+    else {
+      if (!this.dynamicAttributes.includes(attribute))
+        this.dynamicAttributes.push(attribute)
+      this.evaluateDynamicAttributes()
+    }
+  }
+
   async evaluateAll() {
     await this.evaluateValue()
     await this.evaluateClass()

lib/generators/observer.js

@@ -9,7 +9,11 @@ export function observeDOM(obj, callback) {
     const mutationObserver = new MutationObserver(callback)
 
     // have the observer observe for changes in children
-    mutationObserver.observe(obj, { childList: true, subtree: true })
+    mutationObserver.observe(obj, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    })
 
     return mutationObserver
     // browser support fallback

lib/main.js

@@ -108,6 +108,16 @@ const MiniJS = (() => {
   function _listenToDOMChanges() {
     observeDOM(document.body, (mutation) => {
       mutation.forEach((record) => {
+        if (
+          record.type === 'attributes' &&
+          record.attributeName.startsWith(':')
+        ) {
+          const entity = _elements.find(
+            (entity) => entity.element === record.target
+          )
+          entity?.evaluateAttribute(record.attributeName)
+        }
+
         record.removedNodes.forEach((node) => {
           if (node.nodeType !== 1) return
           const entity = _elements.find((entity) => entity.element === node)