@blackbirdjs/component 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blackbirdjs/component",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Template-first fine-grained Web Component layer for BlackbirdJS",
   "type": "module",
   "main": "./src/index.js",

package/src/component.js

@@ -10,6 +10,9 @@ export class BlackbirdComponent extends HTMLElement {
   // Add an internal register array to capture cleanup tokens safely
   #unsubscribers = [];
 
+  // A strict private guard to track if mounting has already occurred
+  #isMounted = false;
+
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -26,25 +29,61 @@ export class BlackbirdComponent extends HTMLElement {
     this.localStore.set(cleanKey, newValue);
   }
 
-  connectedCallback() {
-    const templateId = this.getAttribute('template');
-    const template = document.getElementById(templateId);
+  async connectedCallback() {
+    // MOUNT GUARD: If this instance has already run its template loading setup, block it instantly.
+    if (this.#isMounted) return;
+    this.#isMounted = true;
+
+    // Check if the developer provided an external template file path string
+    const path = this.constructor.templatePath;
+
+    if (path) {
+      try {
+        const response = await fetch(path);
+
+        // If the path is broken (404, 500, etc.), do not parse it!
+        if (!response) {
+          throw new Error(`Server responded with status: ${response.status}`);
+        }
+
+        const htmlText = await response.text();
+
+        if (htmlText.includes('<html') && htmlText.includes(this.tagName.toLowerCase())) {
+          throw new Error(`SPA Fallback detected. Dev server returned index.html instead of template asset.`);
+        }
+
+        // Convert the fetched raw text string into browser-executable DOM elements
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(htmlText, 'text/html');
 
-    if (!template) {
-      console.error(`[Blackbird] Template with id "${templateId}" not found.`);
-      return;
+        // Append it cleanly inside the isolated Shadow DOM
+        this.shadowRoot.innerHTML = doc.documentElement.innerHTML;
+      } catch (err) {
+        console.error(`[Blackbird] Failed to fetch external template at: ${path}\n`, err);
+      }
     }
 
-    // Changed contentEditable to template.content
-    const clone = template.content.cloneNode(true);
-    this.shadowRoot.appendChild(clone);
+    // Fall back to <template id="..."> matching rule if no path exists
+    if (!this.shadowRoot.innerHTML) {
+      const templateId = this.getAttribute('template');
+      const template = document.getElementById(templateId);
+
+      if (!template) {
+        console.error(`[Blackbird] Template with id "${templateId}" not found.`);
+        return;
+      }
+
+      // Changed contentEditable to template.content
+      const clone = template.content.cloneNode(true);
+      this.shadowRoot.appendChild(clone);
+    }
 
     this._hydrateInitialAttributes();
     this._compileDOM();
   }
 
   // Automatically clean up memory when the component leaves the screen
-  disconnectedCallback() {
+  async disconnectedCallback() {
     this.#unsubscribers.forEach(unsubscribe => unsubscribe());
     this.#unsubscribers = [];
   }