@mschop/alpine-web-components 1.0.2 → 1.0.4

package/AlpineWebComponent.ts

@@ -24,7 +24,6 @@ abstract class AlpineWebComponent extends HTMLElement {
     protected abstract template: string
     protected styles: () => string = () => ``
     protected attributeCasts: AttributeCasts = {};
-    protected updatingAttribute = false;
     private alpineInitHandler = () => this.init()
 
     constructor() {
@@ -62,7 +61,9 @@ abstract class AlpineWebComponent extends HTMLElement {
             this.state.attributes = {};
         }
 
-        if (oldValue === newValue) {
+        const castedNewValue = this.castFromAttribute(name, newValue);
+
+        if (oldValue === castedNewValue) {
             return;
         }
 
@@ -70,7 +71,7 @@ abstract class AlpineWebComponent extends HTMLElement {
             return;
         }
 
-        this.state.attributes[name] = this.castFromAttribute(name, newValue);
+        this.state.attributes[name] = castedNewValue;
     }
 
     private loadTemplate() {
@@ -104,7 +105,17 @@ abstract class AlpineWebComponent extends HTMLElement {
         this.constructor.observedAttributes?.forEach((key: string) => {
             const value = this.getAttribute(key);
 
-            this.state.attributes[key] = this.castFromAttribute(key, value)
+            if (value === null && this.state.attributes[key] !== undefined) {
+                const attribute = this.castToAttribute(
+                    key,
+                    this.castToAttribute(key, this.state.attributes[key])
+                );
+                if (attribute !== null) {
+                    this.setAttribute(key, attribute)
+                }
+            } else {
+                this.state.attributes[key] = this.castFromAttribute(key, value)
+            }
         })
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mschop/alpine-web-components",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Use alpinejs with web components and shadow root",
   "main": "index.js",
   "scripts": {