@mschop/alpine-web-components 1.0.0 → 1.0.2

package/AlpineWebComponent.ts

@@ -1,8 +1,12 @@
 import Alpine from 'alpinejs';
 
+export interface AttributeCast<T> {
+    fromAttribute: (value: null|string) => T
+    toAttribute: (value: T) => null|string
+}
 
 export interface AttributeCasts {
-    [keyof: string]: (attribute: string) => any
+    [keyof: string]: AttributeCast<any>
 }
 
 export interface Attributes {
@@ -66,9 +70,7 @@ abstract class AlpineWebComponent extends HTMLElement {
             return;
         }
 
-        console.log("attributeChangedCallback", name, oldValue, newValue);
-
-        this.state.attributes[name] = this.castAttribute(name, newValue);
+        this.state.attributes[name] = this.castFromAttribute(name, newValue);
     }
 
     private loadTemplate() {
@@ -76,14 +78,6 @@ abstract class AlpineWebComponent extends HTMLElement {
     }
 
     private bootState() {
-        // const initStateJson = this.attributes['initial-state']
-        // if (typeof initStateJson === 'string') {
-        //     const initState = JSON.parse(initStateJson);
-        //     Object.keys(initState).forEach((key) => {
-        //         this.state[key] = initState[key]
-        //     })
-        // }
-
         let state = this.state;
 
         // @ts-ignore
@@ -110,16 +104,16 @@ abstract class AlpineWebComponent extends HTMLElement {
         this.constructor.observedAttributes?.forEach((key: string) => {
             const value = this.getAttribute(key);
 
-            if (value === null) {
-                return;
-            }
-
-            this.state.attributes[key] = this.castAttribute(key, value)
+            this.state.attributes[key] = this.castFromAttribute(key, value)
         })
     }
 
-    private castAttribute(name: string, value: string): any {
-        return this.attributeCasts[name] === undefined ? value : this.attributeCasts[name](value);
+    private 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 {
+        return this.attributeCasts[name] === undefined ? value : this.attributeCasts[name].fromAttribute(value);
     }
 
     protected getRoot(): this|ShadowRoot {
@@ -134,12 +128,16 @@ abstract class AlpineWebComponent extends HTMLElement {
 
     protected updateAttribute(key: string): void
     {
-        const newValue = this.state.attributes[key];
+        const newValue = this.castToAttribute(key, this.state.attributes[key]);
         const currentValue = this.getAttribute(key);
         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

@@ -14,14 +14,16 @@ The following example shows you a basic "Counter" example.
 
 ```ts
 import AlpineWebComponent from "alpine-shadow-component";
+import type {State} from "../../AlpineWebComponent";
 
-interface State {
+interface CounterState extends State {
     counter: number,
 }
 
 class Counter extends AlpineWebComponent {
     
-    state: State = {
+    state: CounterState = {
+        attributes: {},
         counter: 1,
     }
     
@@ -40,9 +42,9 @@ 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>`
 
-Please see directory `example` for more details.
+Please see directory `example` for example on how to bind / update attributes etc..

package/example/src/Input.ts

@@ -8,9 +8,14 @@ interface MyState extends State {
 class Input extends AlpineWebComponent {
     static observedAttributes = ['nth', 'data-value']
 
+    attributeCasts = {
+        nth: {fromAttribute: (x: string) => parseInt(x), toAttribute: (x: number) => x.toString()}
+    };
+
     protected template: string = `
         <div>
-            Input <span x-text="attributes.nth"></span><input x-model="attributes['data-value']" type="text" />
+            Input für <span x-text="component.typeofNth()"></span> <span x-text="attributes.nth.toFixed(2)"></span>
+            </span><input x-model="attributes['data-value']" type="text" />
         </div>  
     `;
 
@@ -25,6 +30,10 @@ class Input extends AlpineWebComponent {
     protected useShadow(): boolean {
         return true;
     }
+
+    typeofNth(): string {
+        return typeof this.state.attributes.nth;
+    }
 }
 
 window.customElements.define('my-input', Input);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mschop/alpine-web-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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"