@gjsify/adwaita-web 0.19.0 → 0.21.0

package/lib/types/adw-button-row.spec.d.ts

@@ -0,0 +1 @@
+export declare const AdwButtonRowTest: () => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.19.0",
+    "version": "0.21.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -41,13 +41,13 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-fonts": "^0.19.0",
-        "@gjsify/adwaita-icons": "^0.19.0",
+        "@gjsify/adwaita-fonts": "^0.21.0",
+        "@gjsify/adwaita-icons": "^0.21.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.19.0",
-        "@gjsify/unit": "^0.19.0",
+        "@gjsify/cli": "^0.21.0",
+        "@gjsify/unit": "^0.21.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/src/adw-button-row.spec.ts

@@ -0,0 +1,63 @@
+// DOM-level behaviour tests for <adw-button-row>. Runs in a real browser via the
+// @gjsify/adwaita-web browser test axis. The regression this guards: a
+// declaratively-parsed row (attributes already present when connectedCallback
+// runs) must not crash. Setting the default `activatable` attribute inside
+// connectedCallback re-enters attributeChangedCallback → _render(); if that runs
+// before the title/icon elements are built, it threw
+// "Cannot set properties of undefined (setting 'textContent')".
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwButtonRow } from './elements/adw-button-row.js';
+
+/** Parse a row from HTML so its attributes are present at connectedCallback. */
+function parseRow(html: string): { row: AdwButtonRow; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    host.innerHTML = html;
+    return { row: host.querySelector('adw-button-row') as AdwButtonRow, host };
+}
+
+export const AdwButtonRowTest = async () => {
+    await describe('adw-button-row', async () => {
+        await it('parses a declarative row with a start icon without throwing', async () => {
+            const errors: string[] = [];
+            const onError = (event: ErrorEvent) => errors.push(event.message);
+            window.addEventListener('error', onError);
+
+            // No `activatable` attribute → connectedCallback sets the default,
+            // which used to re-enter _render() before the elements existed.
+            const { row, host } = parseRow(
+                '<adw-button-row title="Add account" start-icon-name="list-add" class="suggested-action"></adw-button-row>',
+            );
+
+            // Let any reported reaction error surface on the window.
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            window.removeEventListener('error', onError);
+
+            expect(errors.length).toBe(0);
+            expect(row.textContent).toContain('Add account');
+            // The start icon span carries the adw-icon class derived from the name.
+            expect(row.querySelector('.adw-icon--list-add') !== null).toBe(true);
+            // Activatable by default.
+            expect(row.classList.contains('activatable')).toBe(true);
+            host.remove();
+        });
+
+        await it('honours activatable="false"', async () => {
+            const { row, host } = parseRow('<adw-button-row title="Locked" activatable="false"></adw-button-row>');
+            expect(row.classList.contains('activatable')).toBe(false);
+            host.remove();
+        });
+
+        await it('emits `activated` on click when activatable', async () => {
+            const { row, host } = parseRow('<adw-button-row title="Add account"></adw-button-row>');
+            let activated = false;
+            row.addEventListener('activated', () => {
+                activated = true;
+            });
+            row.click();
+            expect(activated).toBe(true);
+            host.remove();
+        });
+    });
+};

package/src/elements/adw-button-row.ts

@@ -23,13 +23,6 @@ export class AdwButtonRow extends HTMLElement {
 
     connectedCallback() {
         if (this._initialized) return;
-        this._initialized = true;
-
-        // Adw.ButtonRow is activatable by default; only an explicit
-        // activatable="false" turns it off.
-        if (!this.hasAttribute('activatable')) {
-            this.setAttribute('activatable', '');
-        }
 
         this._contentsEl = document.createElement('div');
         this._contentsEl.className = 'adw-button-row-contents';
@@ -42,6 +35,19 @@ export class AdwButtonRow extends HTMLElement {
 
         this._contentsEl.append(this._startIconEl, this._titleEl);
         this.replaceChildren(this._contentsEl);
+
+        // Adw.ButtonRow is activatable by default; only an explicit
+        // activatable="false" turns it off. Set this while still uninitialized
+        // so the re-entrant attributeChangedCallback is a no-op — the explicit
+        // _render() below does the first render, once the elements above exist.
+        // (Setting _initialized before the elements were built made this
+        // setAttribute re-enter _render() and crash on a declaratively-parsed
+        // row, where connectedCallback runs with attributes already present.)
+        if (!this.hasAttribute('activatable')) {
+            this.setAttribute('activatable', '');
+        }
+
+        this._initialized = true;
         this._render();
 
         this.addEventListener('click', () => {

package/src/test.browser.mts

@@ -7,9 +7,10 @@ import { run } from '@gjsify/unit';
 // Registers the custom elements (side-effect) + injects the compiled CSS.
 import '@gjsify/adwaita-web';
 
+import { AdwButtonRowTest } from './adw-button-row.spec.js';
 import { AdwDataGridTest } from './adw-data-grid.spec.js';
 import { AdwDialogTest } from './adw-dialog.spec.js';
 import { AdwDropDownTest } from './adw-drop-down.spec.js';
 import { AdwTabViewTest } from './adw-tab-view.spec.js';
 
-run({ AdwDataGridTest, AdwDialogTest, AdwDropDownTest, AdwTabViewTest });
+run({ AdwButtonRowTest, AdwDataGridTest, AdwDialogTest, AdwDropDownTest, AdwTabViewTest });