@blackbirdjs/component 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blackbirdjs/component",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Template-first fine-grained Web Component layer for BlackbirdJS",
   "type": "module",
   "main": "./src/index.js",
@@ -8,7 +8,7 @@
     ".": "./src/index.js"
   },
   "dependencies": {
-    "@blackbirdjs/store": "^0.1.0"
+    "@blackbirdjs/store": "^0.2.0"
   },
   "license": "Apache-2.0",
   "publishConfig": {

package/src/component.js

@@ -7,6 +7,9 @@ export function setGlobalStore(store) {
 }
 
 export class BlackbirdComponent extends HTMLElement {
+  // Add an internal register array to capture cleanup tokens safely
+  #unsubscribers = [];
+
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -32,17 +35,25 @@ export class BlackbirdComponent extends HTMLElement {
       return;
     }
 
-    const clone = template.contentEditable.cloneNode(true);
+    // 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() {
+    this.#unsubscribers.forEach(unsubscribe => unsubscribe());
+    this.#unsubscribers = [];
+  }
+
   _hydrateInitialAttributes() {
     Array.from(this.attributes).forEach(attr => {
       if (attr.name.startsWith('data-')) {
-        const cleanKey = attr.name.replace(/^data-/, '').replace(/-(a-z)/g, g => g.toLocaleUpperCase());
+        // FIX 3: Fixed broken regex format from /-(a-z)/g to /-([a-z])/g
+        const cleanKey = attr.name.replace(/^data-/, '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
         this.localStore.set(cleanKey, attr.value);
       }
     });
@@ -50,23 +61,29 @@ export class BlackbirdComponent extends HTMLElement {
 
   _compileDOM() {
     // Map Text Bindings
-    const boundElements = this.shadowRoot.querySelector('[data-bind]');
+    // Changed querySelector to querySelectorAll so .forEach runs successfully
+    const boundElements = this.shadowRoot.querySelectorAll('[data-bind]');
+
     boundElements.forEach(element => {
       const bindingExpression = element.getAttribute('data-bind').trim();
 
       if (bindingExpression.startsWith('global.')) {
         const key = bindingExpression.replace('global.', '');
         if (globalStoreInstance) {
-          globalStoreInstance.subscribe(key, (val) => {
+          // Push the returned unsubscribe token to the cleanup tracking list
+          const sub = globalStoreInstance.subscribe(key, (val) => {
             element.textContent = val;
           });
+          this.#unsubscribers.push(sub.unsubscribe);
         } else {
-          console.warn(`[Blackbird] Global Variable "${key}" requested but no global store.configured.`);
+          console.warn(`[Blackbird] Global Variable "${key}" requested but no global store configured.`);
         }
       } else {
-        this.localStore.subscribe(bindingExpression, (val) => {
+        // Capture local store unsubscriptions as well
+        const sub = this.localStore.subscribe(bindingExpression, (val) => {
           element.textContent = val;
         });
+        this.#unsubscribers.push(sub.unsubscribe);
       }
     });