@gjsify/dom-elements 0.4.18 → 0.4.20

package/lib/esm/element.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import{attributes as e,childNodesList as t,elementChildren as n,localName as r,namespaceURI as i,nodeType as a,parentNode as o,prefix as s,propertyEventListeners as c,tagName as l}from"./property-symbol.js";import{NodeType as u}from"./node-type.js";import{Node as d}from"./node.js";import{NamespaceURI as f}from"./namespace-uri.js";import{NamedNodeMap as p}from"./named-node-map.js";let m,h,g,_,v,y;var Element=class extends d{constructor(){super(),this[m]=``,this[h]=``,this[g]=f.html,this[_]=null,this[v]=new p(this),this[y]=new Map,this._pointerCaptures=new Set,this[a]=u.ELEMENT_NODE}get tagName(){return this[l]}get localName(){return this[r]}get namespaceURI(){return this[i]}get prefix(){return this[s]}get nodeName(){return this[l]}get attributes(){return this[e]}get id(){return this.getAttribute(`id`)??``}set id(e){this.setAttribute(`id`,e)}get className(){return this.getAttribute(`class`)??``}set className(e){this.setAttribute(`class`,e)}get children(){return this[n]}get childElementCount(){return this[n].length}get firstElementChild(){return this[n][0]??null}get lastElementChild(){let e=this[n];return e[e.length-1]??null}get previousElementSibling(){let e=this[o];if(!e)return null;let t=e[n],r=t.indexOf(this);return r>0?t[r-1]:null}get nextElementSibling(){let e=this[o];if(!e)return null;let t=e[n],r=t.indexOf(this);return r!==-1&&r<t.length-1?t[r+1]:null}get textContent(){let e=``;for(let n of this[t])n.textContent!==null&&(e+=n.textContent);return e}set textContent(e){let n=this[t];for(;n.length>0;)this.removeChild(n[0])}getAttribute(t){let n=this[e].getNamedItem(t);return n?n.value:null}getAttributeNS(t,n){let r=this[e].getNamedItemNS(t,n);return r?r.value:null}setAttribute(t,n){this[e]._setNamedItem(t,String(n))}setAttributeNS(t,n,r){let i=t===``?null:t,a=n.split(`:`),o=a.length>1?a[0]:null;this[e]._setNamedItem(n,String(r),i,o)}removeAttribute(t){this[e]._removeNamedItem(t)}removeAttributeNS(t,n){let r=t===``?null:t;this[e]._removeNamedItemNS(r,n)}hasAttribute(t){return this[e].getNamedItem(t)!==null}hasAttributeNS(t,n){return this[e].getNamedItemNS(t,n)!==null}getAttributeNode(t){return this[e].getNamedItem(t)}setAttributeNode(t){return this[e].setNamedItem(t)}removeAttributeNode(t){let n=this[e].getNamedItem(t.name);if(!n)throw new DOMException(`Failed to execute 'removeAttributeNode' on 'Element': The attribute is not owned by this element.`,`NotFoundError`);return this[e].removeNamedItem(n.name),n}toggleAttribute(e,t){return t===void 0?this.hasAttribute(e)?(this.removeAttribute(e),!1):(this.setAttribute(e,``),!0):t?(this.setAttribute(e,``),!0):(this.removeAttribute(e),!1)}hasAttributes(){return this[e].length>0}dispatchEvent(e){let t=super.dispatchEvent(e),n=this[c].get(`on`+e.type);return typeof n==`function`&&n.call(this,e),t}querySelector(e){return null}querySelectorAll(e){return[]}matches(e){return!1}closest(e){return null}getElementsByTagName(e){let n=[],r=e.toUpperCase(),walk=i=>{for(let o of i[t])if(o[a]===u.ELEMENT_NODE){let t=o;(e===`*`||t[l]===r)&&n.push(t),walk(t)}};return walk(this),n}getElementsByClassName(e){let n=[],r=e.split(/\s+/).filter(Boolean),walk=e=>{for(let i of e[t])if(i[a]===u.ELEMENT_NODE){let e=i,t=e.className.split(/\s+/);r.every(e=>t.includes(e))&&n.push(e),walk(e)}};return walk(this),n}cloneNode(n=!1){let a=super.cloneNode(!1);a[l]=this[l],a[r]=this[r],a[i]=this[i],a[s]=this[s];for(let t of this[e])a.setAttributeNS(t.namespaceURI,t.name,t.value);if(n)for(let e of this[t])a.appendChild(e.cloneNode(!0));return a}setPointerCapture(e){this._pointerCaptures.add(e)}releasePointerCapture(e){this._pointerCaptures.delete(e)}hasPointerCapture(e){return this._pointerCaptures.has(e)}get[(m=l,h=r,g=i,_=s,v=e,y=c,Symbol.toStringTag)](){return`Element`}};export{Element};
+import"./_virtual/_rolldown/runtime.js";import{attributes as e,childNodesList as t,elementChildren as n,localName as r,namespaceURI as i,nodeType as a,parentNode as o,prefix as s,propertyEventListeners as c,tagName as l}from"./property-symbol.js";import{NodeType as u}from"./node-type.js";import{Node as d}from"./node.js";import{NamespaceURI as f}from"./namespace-uri.js";import{NamedNodeMap as p}from"./named-node-map.js";let m,h,g,_,v,y;var Element=class extends d{constructor(){super(),this[m]=``,this[h]=``,this[g]=f.html,this[_]=null,this[v]=new p(this),this[y]=new Map,this._resizeSubscribers=null,this._pointerCaptures=new Set,this[a]=u.ELEMENT_NODE}get tagName(){return this[l]}get localName(){return this[r]}get namespaceURI(){return this[i]}get prefix(){return this[s]}get nodeName(){return this[l]}get attributes(){return this[e]}get id(){return this.getAttribute(`id`)??``}set id(e){this.setAttribute(`id`,e)}get className(){return this.getAttribute(`class`)??``}set className(e){this.setAttribute(`class`,e)}get children(){return this[n]}get childElementCount(){return this[n].length}get firstElementChild(){return this[n][0]??null}get lastElementChild(){let e=this[n];return e[e.length-1]??null}get previousElementSibling(){let e=this[o];if(!e)return null;let t=e[n],r=t.indexOf(this);return r>0?t[r-1]:null}get nextElementSibling(){let e=this[o];if(!e)return null;let t=e[n],r=t.indexOf(this);return r!==-1&&r<t.length-1?t[r+1]:null}get textContent(){let e=``;for(let n of this[t])n.textContent!==null&&(e+=n.textContent);return e}set textContent(e){let n=this[t];for(;n.length>0;)this.removeChild(n[0])}getAttribute(t){let n=this[e].getNamedItem(t);return n?n.value:null}getAttributeNS(t,n){let r=this[e].getNamedItemNS(t,n);return r?r.value:null}setAttribute(t,n){this[e]._setNamedItem(t,String(n))}setAttributeNS(t,n,r){let i=t===``?null:t,a=n.split(`:`),o=a.length>1?a[0]:null;this[e]._setNamedItem(n,String(r),i,o)}removeAttribute(t){this[e]._removeNamedItem(t)}removeAttributeNS(t,n){let r=t===``?null:t;this[e]._removeNamedItemNS(r,n)}hasAttribute(t){return this[e].getNamedItem(t)!==null}hasAttributeNS(t,n){return this[e].getNamedItemNS(t,n)!==null}getAttributeNode(t){return this[e].getNamedItem(t)}setAttributeNode(t){return this[e].setNamedItem(t)}removeAttributeNode(t){let n=this[e].getNamedItem(t.name);if(!n)throw new DOMException(`Failed to execute 'removeAttributeNode' on 'Element': The attribute is not owned by this element.`,`NotFoundError`);return this[e].removeNamedItem(n.name),n}toggleAttribute(e,t){return t===void 0?this.hasAttribute(e)?(this.removeAttribute(e),!1):(this.setAttribute(e,``),!0):t?(this.setAttribute(e,``),!0):(this.removeAttribute(e),!1)}hasAttributes(){return this[e].length>0}dispatchEvent(e){let t=super.dispatchEvent(e),n=this[c].get(`on`+e.type);return typeof n==`function`&&n.call(this,e),t}querySelector(e){return null}querySelectorAll(e){return[]}matches(e){return!1}closest(e){return null}getElementsByTagName(e){let n=[],r=e.toUpperCase(),walk=i=>{for(let o of i[t])if(o[a]===u.ELEMENT_NODE){let t=o;(e===`*`||t[l]===r)&&n.push(t),walk(t)}};return walk(this),n}getElementsByClassName(e){let n=[],r=e.split(/\s+/).filter(Boolean),walk=e=>{for(let i of e[t])if(i[a]===u.ELEMENT_NODE){let e=i,t=e.className.split(/\s+/);r.every(e=>t.includes(e))&&n.push(e),walk(e)}};return walk(this),n}cloneNode(n=!1){let a=super.cloneNode(!1);a[l]=this[l],a[r]=this[r],a[i]=this[i],a[s]=this[s];for(let t of this[e])a.setAttributeNS(t.namespaceURI,t.name,t.value);if(n)for(let e of this[t])a.appendChild(e.cloneNode(!0));return a}_onResize(e){let t=this._resizeSubscribers??=new Set;return t.add(e),()=>{t.delete(e),t.size===0&&(this._resizeSubscribers=null)}}_fireResizeSubscribers(e,t){let n=this._resizeSubscribers;if(!(!n||n.size===0))for(let r of[...n])try{r(e,t)}catch(e){console.error(`ResizeObserver subscriber threw:`,e)}}setPointerCapture(e){this._pointerCaptures.add(e)}releasePointerCapture(e){this._pointerCaptures.delete(e)}hasPointerCapture(e){return this._pointerCaptures.has(e)}get[(m=l,h=r,g=i,_=s,v=e,y=c,Symbol.toStringTag)](){return`Element`}};export{Element};

package/lib/esm/index.js

@@ -1 +1 @@
-import{property_symbol_exports as e}from"./property-symbol.js";import{Attr as t}from"./attr.js";import{NodeType as n}from"./node-type.js";import{NodeList as r}from"./node-list.js";import{Node as i}from"./node.js";import{CharacterData as a}from"./character-data.js";import{Comment as o}from"./comment.js";import{Text as s}from"./text.js";import{DocumentFragment as c}from"./document-fragment.js";import{NamespaceURI as l}from"./namespace-uri.js";import{NamedNodeMap as u}from"./named-node-map.js";import{Element as d}from"./element.js";import{CSSStyleDeclaration as f,HTMLElement as p}from"./html-element.js";import{HTMLImageElement as m}from"./html-image-element.js";import{HTMLMediaElement as h}from"./html-media-element.js";import{HTMLVideoElement as g}from"./html-video-element.js";import{HTMLCanvasElement as _}from"./html-canvas-element.js";import{Document as v,document as y}from"./document.js";import{DOMMatrix as b,DOMMatrixReadOnly as x}from"./dom-matrix.js";import{DOMTokenList as S}from"./dom-token-list.js";import{FontFace as C,FontFaceSet as w}from"./font-face.js";import{Image as T}from"./image.js";import{MutationObserver as E}from"./mutation-observer.js";import{ResizeObserver as D}from"./resize-observer.js";import{IntersectionObserver as O}from"./intersection-observer.js";import{MediaQueryList as k,matchMedia as A}from"./match-media.js";import{location as j}from"./location-stub.js";export{t as Attr,f as CSSStyleDeclaration,a as CharacterData,o as Comment,b as DOMMatrix,x as DOMMatrixReadOnly,S as DOMTokenList,v as Document,c as DocumentFragment,d as Element,C as FontFace,w as FontFaceSet,_ as HTMLCanvasElement,p as HTMLElement,m as HTMLImageElement,h as HTMLMediaElement,g as HTMLVideoElement,T as Image,O as IntersectionObserver,k as MediaQueryList,E as MutationObserver,u as NamedNodeMap,l as NamespaceURI,i as Node,r as NodeList,n as NodeType,e as PropertySymbol,D as ResizeObserver,s as Text,y as document,j as location,A as matchMedia};
+import{property_symbol_exports as e}from"./property-symbol.js";import{Attr as t}from"./attr.js";import{NodeType as n}from"./node-type.js";import{NodeList as r}from"./node-list.js";import{Node as i}from"./node.js";import{CharacterData as a}from"./character-data.js";import{Comment as o}from"./comment.js";import{Text as s}from"./text.js";import{DocumentFragment as c}from"./document-fragment.js";import{NamespaceURI as l}from"./namespace-uri.js";import{NamedNodeMap as u}from"./named-node-map.js";import{Element as d}from"./element.js";import{CSSStyleDeclaration as f,HTMLElement as p}from"./html-element.js";import{HTMLImageElement as m}from"./html-image-element.js";import{HTMLMediaElement as h}from"./html-media-element.js";import{HTMLVideoElement as g}from"./html-video-element.js";import{HTMLCanvasElement as _}from"./html-canvas-element.js";import{Document as v,document as y}from"./document.js";import{DOMMatrix as b,DOMMatrixReadOnly as x}from"./dom-matrix.js";import{DOMTokenList as S}from"./dom-token-list.js";import{FontFace as C,FontFaceSet as w}from"./font-face.js";import{Image as T}from"./image.js";import{MutationObserver as E}from"./mutation-observer.js";import{ResizeObserver as D}from"./resize-observer.js";import{notifyElementResize as O}from"./notify-resize.js";import{IntersectionObserver as k}from"./intersection-observer.js";import{MediaQueryList as A,matchMedia as j}from"./match-media.js";import{location as M}from"./location-stub.js";export{t as Attr,f as CSSStyleDeclaration,a as CharacterData,o as Comment,b as DOMMatrix,x as DOMMatrixReadOnly,S as DOMTokenList,v as Document,c as DocumentFragment,d as Element,C as FontFace,w as FontFaceSet,_ as HTMLCanvasElement,p as HTMLElement,m as HTMLImageElement,h as HTMLMediaElement,g as HTMLVideoElement,T as Image,k as IntersectionObserver,A as MediaQueryList,E as MutationObserver,u as NamedNodeMap,l as NamespaceURI,i as Node,r as NodeList,n as NodeType,e as PropertySymbol,D as ResizeObserver,s as Text,y as document,M as location,j as matchMedia,O as notifyElementResize};

package/lib/esm/notify-resize.js

@@ -0,0 +1 @@
+import"./_virtual/_rolldown/runtime.js";import{Element as e}from"./element.js";function notifyElementResize(t,n,r){t._fireResizeSubscribers(n,r);let i=t.parentNode;for(;i;)i instanceof e&&i._fireResizeSubscribers(n,r),i=i.parentNode}export{notifyElementResize};

package/lib/esm/resize-observer.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";var ResizeObserver=class{constructor(e){}observe(e){}unobserve(e){}disconnect(){}};export{ResizeObserver};
+import"./_virtual/_rolldown/runtime.js";const e=new Set;let t=!1;function scheduleFlush(){t||(t=!0,queueMicrotask(()=>{t=!1;let n=Array.from(e);e.clear();for(let e of n)e._deliver()}))}var ResizeObserver=class{constructor(e){this._observed=new Map,this._pending=new Map,this._callback=e}observe(e,t){if(this._observed.has(e))return;let n=e._onResize((t,n)=>{this._enqueue(e,t,n)});this._observed.set(e,n),queueMicrotask(()=>{if(!this._observed.has(e))return;let t=readClientRect(e);this._enqueue(e,t.width,t.height)})}unobserve(e){let t=this._observed.get(e);t&&(t(),this._observed.delete(e),this._pending.delete(e))}disconnect(){for(let e of this._observed.values())e();this._observed.clear(),this._pending.clear(),e.delete(this)}_deliver(){if(this._pending.size===0)return;let e=Array.from(this._pending.values());this._pending.clear();try{this._callback(e,this)}catch(e){console.error(`ResizeObserver callback threw:`,e)}}_enqueue(t,n,r){let i={inlineSize:n,blockSize:r};this._pending.set(t,{target:t,contentRect:{x:0,y:0,width:n,height:r,top:0,right:n,bottom:r,left:0},borderBoxSize:[i],contentBoxSize:[i],devicePixelContentBoxSize:[i]}),e.add(this),scheduleFlush()}};function readClientRect(e){let t=e.getBoundingClientRect;if(typeof t==`function`){let n=t.call(e);return{width:n.width??0,height:n.height??0}}return{width:0,height:0}}export{ResizeObserver};

package/lib/types/element.d.ts

@@ -54,6 +54,23 @@ export declare class Element extends Node {
     getElementsByTagName(tagName: string): Element[];
     getElementsByClassName(className: string): Element[];
     cloneNode(deep?: boolean): Element;
+    private _resizeSubscribers;
+    /**
+     * @internal Subscribe to backing-widget resize notifications.
+     *
+     * Returns an unsubscribe function. Two observers subscribing to the
+     * same target each get their own disposer so the wrong one can never
+     * cancel the other's subscription.
+     */
+    _onResize(cb: (width: number, height: number) => void): () => void;
+    /**
+     * @internal Dispatch the new size to every subscriber. Called by
+     * `notifyElementResize()`; user code must use that wrapper because
+     * it also walks up the ancestor chain (browser `ResizeObserver`
+     * semantics — Excalibur observes `canvas.parentElement`, not the
+     * canvas itself, so the bridge resize has to reach `document.body`).
+     */
+    _fireResizeSubscribers(width: number, height: number): void;
     private _pointerCaptures;
     setPointerCapture(pointerId: number): void;
     releasePointerCapture(pointerId: number): void;

package/lib/types/index.d.ts

@@ -17,6 +17,8 @@ export { Image } from './image.js';
 export { Document, document } from './document.js';
 export { MutationObserver } from './mutation-observer.js';
 export { ResizeObserver } from './resize-observer.js';
+export type { ResizeObserverCallback, ResizeObserverEntry, ResizeObserverOptions, ResizeObserverSize, } from './resize-observer.js';
+export { notifyElementResize } from './notify-resize.js';
 export { IntersectionObserver } from './intersection-observer.js';
 export { NodeType } from './node-type.js';
 export { NamespaceURI } from './namespace-uri.js';

package/lib/types/notify-resize.d.ts

@@ -0,0 +1,11 @@
+import { Element } from './element.js';
+/**
+ * Notify every `ResizeObserver` subscribed to `target` — or to any
+ * ancestor of `target` — that the backing widget's allocation just
+ * changed. Called from framework bridges' GTK `resize` signal handlers.
+ *
+ * @param target  the polyfill DOM element paired with the resized widget
+ * @param width   the widget's new allocated width (CSS pixels)
+ * @param height  the widget's new allocated height (CSS pixels)
+ */
+export declare function notifyElementResize(target: Element, width: number, height: number): void;

package/lib/types/resize-observer.d.ts

@@ -1,13 +1,70 @@
 import type { Element } from './element.js';
+/** Spec: https://drafts.csswg.org/resize-observer/#resizeobserversize */
+export interface ResizeObserverSize {
+    inlineSize: number;
+    blockSize: number;
+}
+/** Spec: https://drafts.csswg.org/resize-observer/#resizeobserverentry */
+export interface ResizeObserverEntry {
+    target: Element;
+    contentRect: DOMRectLike;
+    borderBoxSize: readonly ResizeObserverSize[];
+    contentBoxSize: readonly ResizeObserverSize[];
+    devicePixelContentBoxSize: readonly ResizeObserverSize[];
+}
+/** Subset of DOMRectReadOnly that `getBoundingClientRect()` already returns. */
+interface DOMRectLike {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
+export interface ResizeObserverOptions {
+    box?: 'content-box' | 'border-box' | 'device-pixel-content-box';
+}
 /**
- * ResizeObserver stub.
- * Many libraries check for ResizeObserver existence; this prevents crashes.
+ * `ResizeObserver` polyfill. Subscribes to bridge-reported GTK widget
+ * resizes via `Element._onResize()` (see `./element.ts`). The bridge calls
+ * `notifyElementResize()` from `./notify-resize.ts` which fires the
+ * subscribers on the resized element and every ancestor.
  *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ * @example
+ * ```ts
+ * const observer = new ResizeObserver((entries) => {
+ *   for (const entry of entries) {
+ *     console.log(entry.target, entry.contentRect.width, entry.contentRect.height);
+ *   }
+ * });
+ * observer.observe(canvas);  // canvas paired with a Gtk.GLArea by WebGLBridge
+ * // resize the GTK widget → callback fires with the new dimensions
+ * observer.disconnect();
+ * ```
  */
 export declare class ResizeObserver {
-    constructor(_callback: (...args: unknown[]) => void);
-    observe(_target: Element): void;
-    unobserve(_target: Element): void;
+    private readonly _callback;
+    private readonly _observed;
+    private _pending;
+    constructor(callback: ResizeObserverCallback);
+    /**
+     * Start observing `target`. Per spec, the first observation reports
+     * the target's current size — we honour this on a microtask so
+     * consumers that observe inside an initialisation routine receive
+     * the first measurement after their setup completes.
+     *
+     * `opts.box` is accepted for spec compatibility but does not change
+     * behaviour here — content-box, border-box, and device-pixel-content-box
+     * all map to the same single allocation reported by GTK.
+     */
+    observe(target: Element, _opts?: ResizeObserverOptions): void;
+    unobserve(target: Element): void;
     disconnect(): void;
+    /** @internal Called by the module-level scheduler. */
+    _deliver(): void;
+    private _enqueue;
 }
+export {};

package/lib/types/resize-observer.spec.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/dom-elements",
-    "version": "0.4.18",
+    "version": "0.4.20",
     "description": "DOM element hierarchy (Node, Element, HTMLElement, HTMLImageElement) for GJS",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -68,15 +68,15 @@
         "@girs/gdkpixbuf-2.0": "2.0.0-4.0.0-rc.15",
         "@girs/gjs": "4.0.0-rc.15",
         "@girs/glib-2.0": "2.88.0-4.0.0-rc.15",
-        "@gjsify/abort-controller": "^0.4.18",
-        "@gjsify/canvas2d-core": "^0.4.18",
-        "@gjsify/dom-events": "^0.4.18",
-        "@gjsify/fetch": "^0.4.18"
+        "@gjsify/abort-controller": "^0.4.20",
+        "@gjsify/canvas2d-core": "^0.4.20",
+        "@gjsify/dom-events": "^0.4.20",
+        "@gjsify/fetch": "^0.4.20"
     },
     "devDependencies": {
         "@girs/gst-1.0": "1.28.1-4.0.0-rc.15",
-        "@gjsify/cli": "^0.4.18",
-        "@gjsify/unit": "^0.4.18",
+        "@gjsify/cli": "^0.4.20",
+        "@gjsify/unit": "^0.4.20",
         "@types/node": "^25.6.2",
         "typescript": "^6.0.3"
     }