@gjsify/adwaita-web 0.64.13-next.283 → 0.64.14

package/src/adw-bin.spec.ts

@@ -61,6 +61,26 @@ export const AdwBinTest = async () => {
             other.remove();
         });
 
+        await it('answers `get_child()` / `set_child()` too, the spelling GI-built code uses', () => {
+            // `Adw.Bin:child` has two doors, and markup only takes one of them: code written
+            // against GI calls the methods, which is what a `.blp`-driven widget shared with
+            // GJS and NativeScript does. Both of those renderers answer them; the web did not,
+            // and shared code died here with `get_child is not a function`.
+            const { el, host } = mount();
+            expect(el.get_child()).toBeNull();
+            const child = document.createElement('div');
+            el.set_child(child);
+            expect(el.get_child()).toBe(child);
+            expect(el.child).toBe(child);
+            const next = document.createElement('span');
+            el.set_child(next);
+            expect(el.get_child()).toBe(next);
+            expect(el.childElementCount).toBe(1);
+            el.set_child(null);
+            expect(el.get_child()).toBeNull();
+            host.remove();
+        });
+
         await it('a bin is a column flex box, and its only child fills it', () => {
             const { el, host } = mount([document.createElement('div')]);
             // A bin takes the size it is GIVEN and hands all of it to the child, which

package/src/application.ts

@@ -15,7 +15,7 @@ import {
     menuActionsFor,
     type AdwMenuItem,
     type AdwMenuActions,
-    type AdwMenuModel,
+    type AdwMenuTree,
     type ApplicationHost,
 } from '@gjsify/adwaita-core';
 import { IconTheme } from './namespace/gtk-platform.js';
@@ -63,9 +63,9 @@ export function activateWidgetAction(widget: Element, fullName: string, paramete
     return activateIn(widget, fullName, parentOfElement, parameter);
 }
 
-/** What the items of `model` read from the actions registered above `el` (ADR 0097 § 3). */
-export function menuActionsOfElement(el: Element, model: AdwMenuModel): AdwMenuActions {
-    return menuActionsFor(model, el, parentOfElement);
+/** What the items of `tree` read from the actions registered above `el` (ADR 0097 § 3). */
+export function menuActionsOfElement(el: Element, tree: AdwMenuTree): AdwMenuActions {
+    return menuActionsFor(tree, el, parentOfElement);
 }
 
 /** What choosing `item` in a menu owned by `el` does: the action it names fires. */

package/src/elements/adw-application-window.ts

@@ -9,9 +9,9 @@
 // is on, and no menubar at all when it is off.
 //
 // A BROWSER HAS NO GtkApplication, so the model is handed to the window instead of to
-// an application that does not exist here. `menu-model` is the same portable menu value
-// ADR 0042 gave `<gtk-menu-button>` and `<adw-split-button>` (a JSON array), and it is
-// read through the same core parser, so one menu is written once. A menubar is a row of
+// an application that does not exist here. `menu-model` is the same real `Gio.MenuModel`
+// ADR 0128 gave `<gtk-menu-button>` and `<adw-split-button>`, taken through the same
+// {@link MenuSlot} door, so one menu is written once. A menubar is a row of
 // MENU LINKS, which is what `Adw.Application`'s menubar is documented to be, so a
 // section is inlined and a bare item becomes a plain button — `flattenMenu` is the
 // walk that decides both.
@@ -20,8 +20,9 @@
 //   show-menubar (boolean — Gtk.ApplicationWindow:show-menubar; the bar is drawn only
 //     while this is set AND the model has something in it, exactly as GTK draws no bar
 //     for an application that installed none)
-//   menu-model   (the portable menu model, JSON — the stand-in for the model a
-//     GtkApplication would own; the same value `<gtk-menu-button menu-model>` takes)
+//   menu-model   (the menu's JSON, parsed into the model this window owns — the
+//     stand-in for the model a GtkApplication would own; `<gtk-menu-button menu-model>`'s
+//     own spelling, and a mutation of a held model redraws the bar)
 //
 // Extends <gtk-application-window>, as Adw.ApplicationWindow extends Gtk.ApplicationWindow,
 // so the Gtk.Window state members come with it. The content property, the size request, the
@@ -33,22 +34,17 @@
 // Copyright (c) 2021-2023 Alice Mikhaylenko / Purism SPC (libadwaita). LGPLv2.1+
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
-import {
-    flattenMenu,
-    normalizeMenuModel,
-    parseMenuModel,
-    type AdwMenuInput,
-    type AdwMenuModel,
-} from '@gjsify/adwaita-core';
+import { buildMenu, flattenMenu, type AdwMenuModel } from '@gjsify/adwaita-core';
 
 import type { AdwBreakpoint } from '@gjsify/adwaita-core';
 import type { AdwSlot } from '../slotted-children.js';
 import { AdwWindowFeatures } from './adw-window-features.js';
+import { MenuSlot } from './menu-slot.js';
 import { GtkApplicationWindow } from './gtk-application-window.js';
 
 export class AdwApplicationWindow extends GtkApplicationWindow {
     private readonly _features = new AdwWindowFeatures(this);
-    private _model: AdwMenuModel = [];
+    private readonly _slot = new MenuSlot(() => this._renderMenubar());
     private _menubarEl: HTMLDivElement | null = null;
 
     // The base's list BY NAME, not `super.observedAttributes`: `AdwPasswordEntryRow`
@@ -110,12 +106,12 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
     }
 
     /** The menubar's model — what a GtkApplication would own here. */
-    get menuModel(): AdwMenuModel {
-        return this._model;
+    get menuModel(): AdwMenuModel | null {
+        return this._slot.model;
     }
 
-    set menuModel(value: AdwMenuInput) {
-        this._model = normalizeMenuModel(value);
+    set menuModel(value: AdwMenuModel | string | null) {
+        this._slot.write(value);
         this._renderMenubar();
     }
 
@@ -145,7 +141,7 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
         // The attribute is the declarative form and it wins when it changes — the same
         // precedence `<gtk-menu-button>` gives `menu-model`, through the same parser.
         if (name === 'menu-model') {
-            this._model = parseMenuModel(this.getAttribute('menu-model'));
+            this._slot.writeMarkup(this.getAttribute('menu-model'));
             this._renderMenubar();
         }
     }
@@ -197,16 +193,16 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
         bar.replaceChildren();
         // GTK draws no menubar for an application that installed none, so neither does
         // this: both the flag and a model with rows in it are required.
-        bar.hidden = !this.showMenubar || this._model.length === 0;
+        bar.hidden = !this.showMenubar || this._slot.isEmpty;
 
-        for (const row of flattenMenu(this._model)) {
+        for (const row of flattenMenu(this._slot.tree)) {
             const node = row.node;
             if (node.kind === 'submenu') {
                 // A link is a menu the user OPENS — a button with that menu on it,
                 // which is the whole of what a Gtk.PopoverMenuBar row is.
                 const button = document.createElement('gtk-menu-button');
                 button.setAttribute('menu-title', node.label);
-                (button as unknown as { menuModel: AdwMenuInput }).menuModel = node.items;
+                (button as unknown as { menuModel: AdwMenuModel | null }).menuModel = buildMenu(node.items);
                 bar.appendChild(button);
                 continue;
             }

package/src/elements/adw-bin.ts

@@ -24,7 +24,7 @@
 // default `GENERIC` and a bin contributes nothing to the accessibility tree of its own.
 //
 // KNOWN_GAPS: none — `AdwBin`'s only property is `child`, a widget, which is a SLOT on
-// every renderer.
+// every renderer, and it is reachable BOTH ways: `child` and `get_child()`/`set_child()`.
 //
 // Reference: refs/libadwaita/src/adw-bin.c (adw_bin_set_child, class_init)
 // Copyright (c) 2021 Purism SPC / GNOME contributors (libadwaita). LGPLv2.1+.
@@ -46,6 +46,25 @@ export class AdwBin extends WidgetElement {
         this.setChild(value);
     }
 
+    /**
+     * `adw_bin_get_child` / `adw_bin_set_child` — the METHOD spelling of {@link child}.
+     *
+     * The property alone is not the whole door. `Adw.Bin:child` is reached two ways and only
+     * one of them is a property: markup writes `child:`, but code built against GI calls
+     * `bin.get_child()` / `bin.set_child(w)`, which is the spelling a `.blp`-driven widget
+     * shared across renderers uses — GJS and the NativeScript bridge both answer it
+     * (`AdwSingleChildBase`), and here it was missing, so the shared code died with
+     * `get_child is not a function` on the web and nowhere else.
+     */
+    get_child(): Element | null {
+        return this.child;
+    }
+
+    /** `adw_bin_set_child`. Refuses a child that already has a parent, as {@link setChild} does. */
+    set_child(child: Element | null): void {
+        this.setChild(child);
+    }
+
     connectedCallback() {
         // The NAME only. Every child of a bin already IS its content — there is no
         // internal structure to route into — so `.install()` is deliberately not called

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

@@ -37,13 +37,8 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import {
-    ADW_MENU_SURFACE_WEB,
     SplitButtonState,
-    assertMenuRenderable,
     isSplitButtonDirection,
-    menuRefusals,
-    normalizeMenuModel,
-    parseMenuModel,
     resolveDropdownTooltip,
     splitButtonArrowIcon,
     splitButtonPopupDirection,
@@ -52,13 +47,13 @@ import {
 import type {
     AdwArrowIcon,
     AdwMenuActions,
-    AdwMenuInput,
     AdwMenuModel,
     SplitButtonChange,
     SplitButtonDirection,
 } from '@gjsify/adwaita-core';
 import { activateElementMenuItem, menuActionsOfElement } from '../application.js';
 
+import { MenuSlot } from './menu-slot.js';
 import { PopoverMenuView } from './popover-menu.js';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it is
@@ -121,6 +116,15 @@ const POPOVER_POSITIONS = {
 
 export class AdwSplitButton extends WidgetElement {
     private readonly _state = new SplitButtonState();
+    /**
+     * The model's door, tree snapshot and `items-changed` subscription (ADR 0128). The
+     * STATE still owns the menu as a property — `dropdownEnabled` is derived from it and
+     * the notify order is libadwaita's — so every write here goes through the slot FIRST
+     * (which is what refuses it and snapshots it) and is then handed to the state.
+     */
+    private readonly _slot = new MenuSlot(() => {
+        if (this._initialized) this._render();
+    });
     private _actionEl!: HTMLButtonElement;
     private _dropdownEl!: HTMLButtonElement;
     private _arrowEl!: GtkImage;
@@ -180,60 +184,29 @@ export class AdwSplitButton extends WidgetElement {
         this.removeAttribute('label');
     }
 
-    /** The menu, normalised (ADR 0042). Empty when the dropdown has none. */
-    get menuModel(): AdwMenuModel {
-        return this._state.menuModel ?? [];
-    }
-
     /**
-     * Set the menu from anything the portable model accepts — a bare `string[]`, item
-     * descriptors, sections, submenus.
+     * The menu the dropdown pops up, by identity, or `null` when it has none (ADR 0128).
      *
-     * The REFUSAL is here rather than at render time: a `custom` item names an
-     * application widget this surface cannot host, and discovering that as a blank row
-     * three interactions later is what {@link assertMenuRenderable} exists to prevent.
+     * `null` is the ONLY spelling of "no menu" now: an empty model is a menu, so an empty
+     * one leaves the dropdown enabled exactly as it does in GTK, where a non-null model
+     * still builds a popover (measured, `MENU_MODEL_DOOR_VECTORS`).
      */
-    set menuModel(value: AdwMenuInput) {
-        // Refused BEFORE it is stored, so a throw leaves the widget showing the menu it
-        // had rather than one it cannot draw.
-        this._state.setMenuModel(this._acceptMenu(value));
-        if (this._initialized) this._render();
+    get menuModel(): AdwMenuModel | null {
+        return this._state.menuModel;
     }
 
     /**
-     * Normalise, REFUSE, store — the one door every menu comes through.
-     *
-     * The property setter is not the only way a menu arrives: an attribute is, and the
-     * first cut refused only the setter, so a `custom` item written in markup drew
-     * exactly the row `assertMenuRenderable` exists to prevent — one that reads like a
-     * command and does nothing.
-     *
-     * THE TWO DOORS REFUSE DIFFERENTLY, and the difference is which side can hear it.
-     * A property assignment is a CALL, so it throws and the caller can catch. An
-     * attribute is MARKUP, parsed by the browser: a throw from `connectedCallback` is
-     * not delivered to whoever appended the element, it is reported as an uncaught
-     * page error — measured, it broke `adwaita-upgrade-order.spec.ts`, which counts
-     * exactly those. Nobody can handle it and everybody else pays for it. So the
-     * attribute path REFUSES THE MENU (no menu, and a menu-less dropdown is
-     * insensitive, which is visible) and says why on `console.error`.
+     * Take a real model, a JSON string in the portable spelling, or `null`.
      *
-     * A REFUSAL AND A TYPO ARE STILL DIFFERENT THINGS. `parseMenuModel` is total
-     * because malformed JSON is an author slip and must not stop the element
-     * upgrading; `custom` is well-formed, deliberate, and unhonourable here.
+     * The REFUSAL is at the assignment rather than at render time: a `custom` item names
+     * an application widget this surface cannot host, and discovering that as a blank row
+     * three interactions later is what the refusal exists to prevent. {@link MenuSlot}
+     * owns the door; the state is handed only a menu this surface agreed to draw.
      */
-    private _acceptMenu(input: AdwMenuInput, strict = true): AdwMenuModel {
-        const model = normalizeMenuModel(input);
-        if (strict) {
-            assertMenuRenderable(model, ADW_MENU_SURFACE_WEB);
-            return model;
-        }
-        const refusals = menuRefusals(model, ADW_MENU_SURFACE_WEB);
-        if (refusals.length === 0) return model;
-        // `console.error` is the browser's own channel for "this is wrong, the page
-        // continues" — and the alternative here is a row that lies.
-        console.error(`${ADW_MENU_SURFACE_WEB.name} cannot render this menu, so it has none:`);
-        for (const refusal of refusals) console.error(`  [${refusal.path.join('.')}] ${refusal.message}`);
-        return [];
+    set menuModel(value: AdwMenuModel | string | null) {
+        this._slot.write(value);
+        this._state.setMenuModel(this._slot.model);
+        if (this._initialized) this._render();
     }
 
     /**
@@ -387,7 +360,8 @@ export class AdwSplitButton extends WidgetElement {
                 this._state.setDropdownTooltip(value ?? '');
                 break;
             case 'menu-model':
-                this._state.setMenuModel(this._acceptMenu(parseMenuModel(value), false));
+                this._slot.writeMarkup(value);
+                this._state.setMenuModel(this._slot.model);
                 break;
             default:
                 break;
@@ -409,10 +383,12 @@ export class AdwSplitButton extends WidgetElement {
         const direction = this.getAttribute('direction');
         if (isSplitButtonDirection(direction)) this._state.setDirection(direction);
         this._state.setDropdownTooltip(this.getAttribute('dropdown-tooltip') ?? '');
-        // The `menuModel` property may have been set before the element upgraded;
-        // the attribute only seeds an otherwise empty menu.
+        // The `menuModel` property may have been set before the element upgraded; the
+        // attribute only seeds a widget that has NO menu — which since ADR 0128 means a
+        // null one, an empty model being a menu an author may have meant.
         if (this._state.menuModel === null) {
-            this._state.setMenuModel(this._acceptMenu(parseMenuModel(this.getAttribute('menu-model')), false));
+            this._slot.writeMarkup(this.getAttribute('menu-model'));
+            this._state.setMenuModel(this._slot.model);
         }
     }
 
@@ -528,9 +504,9 @@ export class AdwSplitButton extends WidgetElement {
 
     private _renderMenu(): void {
         this._menuEl.open = this._state.open;
-        const model = this._state.menuModel ?? [];
-        this._menuView.setMenuModel(model);
-        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, model));
+        const tree = this._slot.tree;
+        this._menuView.setMenuTree(tree);
+        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, tree));
         this._menuView.render();
     }
 }

package/src/elements/adw-tab-overview.ts

@@ -46,8 +46,9 @@
 //
 // `view` is a widget REFERENCE (`Adw.TabView`), so the attribute is the element id
 // `<adw-tab-button view>` also takes, while `view`/`setView` take the element.
-// `secondary-menu` is a `GMenuModel`: the property takes the portable model and the
-// attribute takes its JSON, which is `<gtk-menu-button menu-model>`'s own spelling.
+// `secondary-menu` is a `GMenuModel` and takes a real one (ADR 0128): the property takes
+// the model, the attribute takes its JSON, which is `<gtk-menu-button menu-model>`'s own
+// spelling, and {@link MenuSlot} is the door both go through.
 //
 // A11Y: the overview is a `role="grid"` of `role="gridcell"` thumbnails under a
 // header bar, and the pinned grid is a second grid — C's `AdwTabGrid` is a
@@ -68,16 +69,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the icon,
 // indicator and portrait nodes are <gtk-image> and the grids are <div role="grid">.
 
-import {
-    gridColumns,
-    gridNavigate,
-    tabSearchMatches,
-    tabTooltip,
-    type AdwMenuInput,
-    type AdwMenuModel,
-} from '@gjsify/adwaita-core';
-import { normalizeMenuModel } from '@gjsify/adwaita-core';
-import { assertMenuRenderable, ADW_MENU_SURFACE_WEB } from '@gjsify/adwaita-core';
+import { gridColumns, gridNavigate, tabSearchMatches, tabTooltip, type AdwMenuModel } from '@gjsify/adwaita-core';
+
+import { MenuSlot } from './menu-slot.js';
 
 import type { AdwTabView, AdwTabViewPage } from './adw-tab-view.js';
 import { createGtkImage, type GtkImage } from './gtk-image.js';
@@ -119,7 +113,7 @@ export class AdwTabOverview extends WidgetElement {
     private readonly _thumbs = new Map<string, Thumbnail>();
 
     private _view: AdwTabView | null = null;
-    private _model: AdwMenuModel = [];
+    private readonly _slot = new MenuSlot(() => this._applyMenu());
     private _searchActive = false;
     private _initialized = false;
     /** The last visibility actually painted, so `notify::open` fires on a real change. */
@@ -225,16 +219,14 @@ export class AdwTabOverview extends WidgetElement {
     }
 
     /** `Adw.TabOverview:secondary-menu` — the portal menu of extra actions. */
-    get secondaryMenu(): AdwMenuModel {
-        return this._model;
+    get secondaryMenu(): AdwMenuModel | null {
+        return this._slot.model;
     }
 
-    set secondaryMenu(value: AdwMenuInput) {
-        const model = normalizeMenuModel(value);
+    set secondaryMenu(value: AdwMenuModel | string | null) {
         // The property setter is a CALL, so a `custom` item throws here where the caller
         // can catch it — `<gtk-menu-button>`'s own rule, which keeps the two doors honest.
-        assertMenuRenderable(model, ADW_MENU_SURFACE_WEB);
-        this._model = model;
+        this._slot.write(value);
         this._applyMenu();
     }
 
@@ -398,7 +390,8 @@ export class AdwTabOverview extends WidgetElement {
 
         const declaredMenu = this.getAttribute('secondary-menu');
         if (declaredMenu !== null) {
-            this.secondaryMenu = JSON.parse(declaredMenu) as AdwMenuInput;
+            this._slot.writeMarkup(declaredMenu);
+            this._applyMenu();
             this.removeAttribute('secondary-menu');
         }
 
@@ -423,11 +416,8 @@ export class AdwTabOverview extends WidgetElement {
                 if (value === null) return;
                 // An attribute is MARKUP: a `custom` item here is reported, not thrown
                 // (adw-sidebar/`gtk-menu-button`'s rule for the same two doors).
-                try {
-                    this.secondaryMenu = JSON.parse(value) as AdwMenuInput;
-                } catch (error) {
-                    console.error(`<adw-tab-overview secondary-menu> is not valid JSON: ${String(error)}`);
-                }
+                this._slot.writeMarkup(value);
+                this._applyMenu();
                 return;
             }
             case 'enable-new-tab':
@@ -557,7 +547,7 @@ export class AdwTabOverview extends WidgetElement {
      * slot is where an application puts its own controls.
      */
     private _applyHeaderBar(): void {
-        const hasMenu = this._model.length > 0;
+        const hasMenu = !this._slot.isEmpty;
         this._headerEl.hidden = !(
             this.enableSearch ||
             hasMenu ||
@@ -572,8 +562,8 @@ export class AdwTabOverview extends WidgetElement {
     }
 
     private _applyMenu(): void {
-        const view = this._menuBtn as HTMLElement & { menuModel?: AdwMenuModel };
-        if (this._model.length > 0) view.menuModel = this._model;
+        const view = this._menuBtn as HTMLElement & { menuModel?: AdwMenuModel | null };
+        if (this._slot.model !== null) view.menuModel = this._slot.model;
         this._applyHeaderBar();
     }