@mschop/alpine-web-components 1.0.10 → 2.0.0

package/AlpineWebComponent.ts

@@ -20,6 +20,7 @@ export interface State {
 abstract class AlpineWebComponent extends HTMLElement {
 
     public static isAlpineInitStarted: boolean = false
+    private isInitialized: boolean = false
     protected state: State = {attributes: {}}
     protected abstract template: string
     protected styles: () => string = () => ``
@@ -33,15 +34,11 @@ abstract class AlpineWebComponent extends HTMLElement {
         }
     }
 
-    public connectedCallback() {
-        if (AlpineWebComponent.isAlpineInitStarted) {
-            this.init()
-        } else {
-            document.addEventListener('alpine:init', this.alpineInitHandler);
-        }
-    }
-
     public init() {
+        if (this.isInitialized) {
+            return;
+        }
+        this.isInitialized = true;
         AlpineWebComponent.isAlpineInitStarted = true
 
         this.loadTemplate();
@@ -147,6 +144,21 @@ abstract class AlpineWebComponent extends HTMLElement {
         })
     }
 
+    protected initChildren(): void {
+        const root = this.getRoot();
+        if (root === null) {
+            return;
+        }
+        root.querySelectorAll('*').forEach((node) => {
+            if (node === this) {
+                return;
+            }
+            if (node instanceof AlpineWebComponent) {
+                node.init();
+            }
+        });
+    }
+
     protected updateAttribute(key: string): void
     {
         const newValue = this.castToAttribute(key, this.state.attributes[key]);

package/README.md

@@ -5,7 +5,7 @@ This library helps you with using AlpineJS with web components. This includes we
 ## Install
 
 1. Make sure you have AlpineJS installed and ready.
-2. Install this library by running  `npm i alpine-web-components`
+2. Install this library by running  `npm i @mschop/alpine-web-components`
 3. Use classes AlpineWebComponent or AlpineComponent as base classes.
 
 ## How to use it
@@ -45,7 +45,9 @@ class Counter extends AlpineWebComponent {
 window.customElements.define('my-counter', Counter);
 ```
 
-You should now be able to reference the counter with `<my-counter></my-counter>`
+You should now be able to reference the counter with `<my-counter></my-counter>`.
+
+Note: components do not auto-initialize on connect. Call `init()` on your top-level component when you want Alpine to boot. Sub-components will be automatically initialized.
 
 The component instance is attached as `state.component` but marked raw, so Alpine won't proxy the full custom element. You can call component methods from the Alpine scope:
 

package/package.json

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