Merge branch 'main' of github.com:Group-One-Technology/minijs

CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.0.16 (Tue Jun 18 2024)
+
+#### 🐛 Bug Fix
+
+- feat: allow custom attributes to be dynamic [#26](https://github.com/Group-One-Technology/minijs/pull/26) ([@jorenrui](https://github.com/jorenrui) [@tonyennis145](https://github.com/tonyennis145))
+
+#### Authors: 2
+
+- [@tonyennis145](https://github.com/tonyennis145)
+- Joeylene ([@jorenrui](https://github.com/jorenrui))
+
+---
+
 # v1.0.15 (Sat Apr 13 2024)
 
 #### ⚠️ Pushed to `main`

lib/entity/attributes.js

@@ -17,10 +17,16 @@ export class Attributes {
   static FORBIDDEN_ATTRIBUTES = [':innerHTML', ':innerText']
 
   static isValidAttribute(attribute, element) {
+    if (attribute === ':') return false
     if (!attribute.startsWith(':')) return false
     if (Attributes.FORBIDDEN_ATTRIBUTES.includes(attribute)) return false
     if (Events.isValidEvent(attribute)) return false
-    if (Attributes.CUSTOM_ATTRIBUTES.includes(attribute)) return true
+
+    return true
+  }
+
+  static isValidNativeAttribute(attribute, element) {
+    if (!Attributes.isValidAttribute(attribute)) return false
 
     const [nativeAttr] = attribute.replace(':', '').split('.')
 
@@ -241,27 +247,31 @@ export class Attributes {
     for (const attr of this.dynamicAttributes) {
       if (Attributes.CUSTOM_ATTRIBUTES.includes(attr)) continue
 
-      const expr = this.entity.element.getAttribute(attr)
+      const element = this.entity.element
+      const expr = element.getAttribute(attr)
       if (!expr) return
 
       try {
         const newValue = await this._interpret(expr)
-        const nativeAttr = kebabToCamelCase(attr.slice(1))
-
-        if (attr.startsWith(':data-')) {
-          if (
-            this.entity.element.dataset[nativeAttr.slice(4)] !== newValue &&
-            newValue != null
-          ) {
-            const datasetAttr =
-              nativeAttr[4].toLowerCase() + nativeAttr.slice(5)
-            this.entity.element.dataset[datasetAttr] = newValue
+
+        if (Attributes.isValidNativeAttribute(attr, element)) {
+          const nativeAttr = kebabToCamelCase(attr.slice(1))
+
+          if (attr.startsWith(':data-')) {
+            if (
+              element.dataset[nativeAttr.slice(4)] !== newValue &&
+              newValue != null
+            ) {
+              const datasetAttr =
+                nativeAttr[4].toLowerCase() + nativeAttr.slice(5)
+              element.dataset[datasetAttr] = newValue
+            }
+          } else if (element[nativeAttr] !== newValue && newValue != null) {
+            element[nativeAttr] = newValue
           }
-        } else if (
-          this.entity.element[nativeAttr] !== newValue &&
-          newValue != null
-        )
-          this.entity.element[nativeAttr] = newValue
+        } else {
+          element.setAttribute(attr.slice(1), newValue)
+        }
       } catch (error) {
         this._handleError(attr, expr, error)
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tonic-minijs",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "files": [
     "dist"
   ],