Merge pull request #5 from enhance-dev/issue4

Issue #4: Kebab case attributes never trigger the attribute changed callback
enhance-dev · May 2, 2024 · 961edb3 · 961edb3
2 parents 79922e9 + dc7e216
commit 961edb3
Show file tree

Hide file tree

Showing 4 changed files with 1,539 additions and 419 deletions.
diff --git a/index.mjs b/index.mjs
@@ -7,6 +7,15 @@ if (typeof process !== 'undefined') {
   global.Worker = function() { return { postMessage: function() { } } }
 }
 
+export function kebabToCamel(attribute) {
+  if (attribute.includes('-')) {
+      return attribute.split('-').map((word, index) => index !== 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word
+      ).join('')
+  } else {
+      return attribute
+  }
+}
+
 export default class BaseElement extends HTMLElement {
   constructor() {
     super()
@@ -31,7 +40,7 @@ export default class BaseElement extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
-      const fun = `${name}Changed`
+      const fun = `${kebabToCamel(name)}Changed`
       if (this[fun]) {
         this[fun](newValue)
       }