@mschop/alpine-web-components 1.0.4 → 1.0.6

package/AlpineWebComponent.ts

@@ -24,7 +24,7 @@ abstract class AlpineWebComponent extends HTMLElement {
     protected abstract template: string
     protected styles: () => string = () => ``
     protected attributeCasts: AttributeCasts = {};
-    private alpineInitHandler = () => this.init()
+    protected alpineInitHandler = () => this.init()
 
     constructor() {
         super()
@@ -61,24 +61,23 @@ abstract class AlpineWebComponent extends HTMLElement {
             this.state.attributes = {};
         }
 
-        const castedNewValue = this.castFromAttribute(name, newValue);
-
-        if (oldValue === castedNewValue) {
+        if (oldValue === newValue) {
             return;
         }
 
-        if (this.state.attributes[name] === newValue) {
-            return;
+        const castedNewValue = this.castFromAttribute(name, newValue);
+
+        if (this.state.attributes[name] !== castedNewValue) {
+            this.state.attributes[name] = castedNewValue;
         }
 
-        this.state.attributes[name] = castedNewValue;
     }
 
-    private loadTemplate() {
+    protected loadTemplate() {
         this.getRoot().innerHTML = this.template;
     }
 
-    private bootState() {
+    protected bootState() {
         let state = this.state;
 
         // @ts-ignore
@@ -93,14 +92,14 @@ abstract class AlpineWebComponent extends HTMLElement {
         this.state = Alpine.reactive(state);
     }
 
-    private bootAlpine() {
+    protected bootAlpine() {
         // @ts-ignore
         Alpine.addScopeToNode(this.getRoot(), this.state)
         // @ts-ignore
         Alpine.initTree(this.getRoot())
     }
 
-    private bootAttributes(): void {
+    protected bootAttributes(): void {
         // @ts-ignore
         this.constructor.observedAttributes?.forEach((key: string) => {
             const value = this.getAttribute(key);
@@ -119,11 +118,11 @@ abstract class AlpineWebComponent extends HTMLElement {
         })
     }
 
-    private castToAttribute(name: string, value: any): null|string {
+    protected castToAttribute(name: string, value: any): null|string {
         return this.attributeCasts[name] === undefined ? value : this.attributeCasts[name].toAttribute(value);
     }
 
-    private castFromAttribute(name: string, value: null|string): any {
+    protected castFromAttribute(name: string, value: null|string): any {
         return this.attributeCasts[name] === undefined ? value : this.attributeCasts[name].fromAttribute(value);
     }
 

package/package.json

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