@mschop/alpine-web-components 1.0.1 → 1.0.3

package/AlpineWebComponent.ts

@@ -1,8 +1,8 @@
 import Alpine from 'alpinejs';
 
 export interface AttributeCast<T> {
-    fromAttribute: (value: string) => T
-    toAttribute: (value: T) => string
+    fromAttribute: (value: null|string) => T
+    toAttribute: (value: T) => null|string
 }
 
 export interface AttributeCasts {
@@ -104,19 +104,25 @@ abstract class AlpineWebComponent extends HTMLElement {
         this.constructor.observedAttributes?.forEach((key: string) => {
             const value = this.getAttribute(key);
 
-            if (value === null) {
-                return;
+            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)
             }
-
-            this.state.attributes[key] = this.castFromAttribute(key, value)
         })
     }
 
-    private castToAttribute(name: string, value: any) {
+    private castToAttribute(name: string, value: any): null|string {
         return this.attributeCasts[name] === undefined ? value : this.attributeCasts[name].toAttribute(value);
     }
 
-    private castFromAttribute(name: string, value: string): any {
+    private castFromAttribute(name: string, value: null|string): any {
         return this.attributeCasts[name] === undefined ? value : this.attributeCasts[name].fromAttribute(value);
     }
 
@@ -137,7 +143,11 @@ abstract class AlpineWebComponent extends HTMLElement {
         if (newValue === currentValue) {
             return;
         }
-        this.setAttribute(key, this.state.attributes[key])
+        if (newValue === null) {
+            this.removeAttribute(key)
+        } else {
+            this.setAttribute(key, this.state.attributes[key])
+        }
         this.dispatchEvent(
             new CustomEvent(
                 'updated-' + key,

package/README.md

@@ -42,7 +42,7 @@ class Counter extends AlpineWebComponent {
     }
 }
 
-window.define('my-counter', Counter);
+window.customElements.define('my-counter', Counter);
 ```
 
 You should now be able to reference the counter with `<my-counter></my-counter>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mschop/alpine-web-components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Use alpinejs with web components and shadow root",
   "main": "index.js",
   "scripts": {
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "git+ssh://git@gitlab.com/mschop/alpine-web-components.git"
   },
-  "author": "",
+  "author": "mschop",
   "license": "MIT",
   "bugs": {
     "url": "https://gitlab.com/mschop/alpine-web-components/issues"