@mschop/alpine-web-components 1.0.0

package/AlpineWebComponent.ts

@@ -0,0 +1,158 @@
+import Alpine from 'alpinejs';
+
+
+export interface AttributeCasts {
+    [keyof: string]: (attribute: string) => any
+}
+
+export interface Attributes {
+    [keyof: string]: any
+}
+
+export interface State {
+    attributes: Attributes,
+}
+
+abstract class AlpineWebComponent extends HTMLElement {
+
+    public static isAlpineInitStarted: boolean = false
+    protected state: State = {attributes: {}}
+    protected abstract template: string
+    protected styles: () => string = () => ``
+    protected attributeCasts: AttributeCasts = {};
+    protected updatingAttribute = false;
+    private alpineInitHandler = () => this.init()
+
+    constructor() {
+        super()
+        if (this.useShadow()) {
+            this.attachShadow({mode: 'open'});
+        }
+    }
+
+    public connectedCallback() {
+        if (AlpineWebComponent.isAlpineInitStarted) {
+            this.init()
+        } else {
+            document.addEventListener('alpine:init', this.alpineInitHandler);
+        }
+    }
+
+    public init() {
+        AlpineWebComponent.isAlpineInitStarted = true
+
+        this.loadTemplate();
+        this.bootState();
+        this.bootAlpine();
+        this.bootAttributeObservation();
+    }
+
+    disconnectedCallback(): void {
+        document.removeEventListener('alpine:init', this.alpineInitHandler);
+        // @ts-ignore
+        Alpine.destroyTree(this.getRoot())
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (this.state.attributes === undefined) {
+            this.state.attributes = {};
+        }
+
+        if (oldValue === newValue) {
+            return;
+        }
+
+        if (this.state.attributes[name] === newValue) {
+            return;
+        }
+
+        console.log("attributeChangedCallback", name, oldValue, newValue);
+
+        this.state.attributes[name] = this.castAttribute(name, newValue);
+    }
+
+    private loadTemplate() {
+        this.getRoot().innerHTML = this.template;
+    }
+
+    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
+        state.component = this;
+
+        if (typeof state.attributes === 'undefined') {
+            state.attributes = {};
+        }
+
+        this.bootAttributes();
+
+        this.state = Alpine.reactive(state);
+    }
+
+    private bootAlpine() {
+        // @ts-ignore
+        Alpine.addScopeToNode(this.getRoot(), this.state)
+        // @ts-ignore
+        Alpine.initTree(this.getRoot())
+    }
+
+    private bootAttributes(): void {
+        // @ts-ignore
+        this.constructor.observedAttributes?.forEach((key: string) => {
+            const value = this.getAttribute(key);
+
+            if (value === null) {
+                return;
+            }
+
+            this.state.attributes[key] = this.castAttribute(key, value)
+        })
+    }
+
+    private castAttribute(name: string, value: string): any {
+        return this.attributeCasts[name] === undefined ? value : this.attributeCasts[name](value);
+    }
+
+    protected getRoot(): this|ShadowRoot {
+        return this.shadowRoot ?? this;
+    }
+
+    protected bootAttributeObservation() {
+        Object.keys(this.state.attributes).forEach(key => {
+            Alpine.effect(() => this.updateAttribute(key))
+        })
+    }
+
+    protected updateAttribute(key: string): void
+    {
+        const newValue = this.state.attributes[key];
+        const currentValue = this.getAttribute(key);
+        if (newValue === currentValue) {
+            return;
+        }
+        this.setAttribute(key, this.state.attributes[key])
+        this.dispatchEvent(
+            new CustomEvent(
+                'updated-' + key,
+                {detail: {key: key, value: this.state.attributes[key]}},
+            )
+        )
+    }
+
+    protected abstract useShadow(): boolean;
+}
+
+document.addEventListener('alpine:initialized', () => {
+    AlpineWebComponent.isAlpineInitStarted = true
+})
+
+export default AlpineWebComponent

package/README.md

@@ -0,0 +1,48 @@
+# alpine-web-components
+
+This library helps you with using AlpineJS with web components. This includes web components using shadow root.
+
+## Install
+
+1. Make sure you have AlpineJS installed and ready.
+2. Install this library by running  `npm i alpine-web-components`
+3. Use classes AlpineWebComponent or AlpineComponent as base classes.
+
+## How to use it
+
+The following example shows you a basic "Counter" example.
+
+```ts
+import AlpineWebComponent from "alpine-shadow-component";
+
+interface State {
+    counter: number,
+}
+
+class Counter extends AlpineWebComponent {
+    
+    state: State = {
+        counter: 1,
+    }
+    
+    template = `
+        <span x-text=""></span>
+        <button @click="counter++">+1</button>
+        <button @click="component.resetCounter()">Reset</button>
+    `
+    
+    resetCounter() {
+        this.state.counter = 1
+    }
+    
+    useShadow(): boolean {
+        return false;
+    }
+}
+
+window.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.

package/example/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <div id="app">
+      <my-counter></my-counter>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>