@gtkx/react 0.15.0 → 0.17.1

package/dist/nodes/slot.js

@@ -1,38 +1,44 @@
 import { isObjectEqual } from "@gtkx/ffi";
 import { toCamelCase } from "@gtkx/gir";
 import { registerNodeClass } from "../registry.js";
-import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
+import { VirtualSingleChildNode } from "./abstract/virtual-single-child.js";
 import { resolvePropMeta } from "./internal/utils.js";
-import { VirtualNode } from "./virtual.js";
-import { WidgetNode } from "./widget.js";
-export class SlotNode extends VirtualNode {
+export class SlotNode extends VirtualSingleChildNode {
     static priority = 2;
     static matches(type) {
         return type === "Slot";
     }
-    parent;
-    child;
+    cachedSetter = null;
     setParent(parent) {
-        this.parent = parent;
+        if (!isObjectEqual(this.parent, parent)) {
+            this.cachedSetter = null;
+        }
+        super.setParent(parent);
     }
     unmount() {
         if (this.parent && this.child) {
             const parent = this.parent;
             const oldChild = this.child;
-            this.child = undefined;
+            this.child = null;
             queueMicrotask(() => {
                 if (parent.getRoot() !== null) {
                     this.parent = parent;
                     this.onChildChange(oldChild);
                 }
-                this.parent = undefined;
+                this.parent = null;
             });
         }
         else {
-            this.parent = undefined;
+            this.parent = null;
         }
         super.unmount();
     }
+    getChild() {
+        if (!this.child) {
+            throw new Error(`Expected child widget to be set on '${this.getId()}' SlotNode`);
+        }
+        return this.child;
+    }
     getId() {
         const id = this.props.id;
         if (!id) {
@@ -46,55 +52,34 @@ export class SlotNode extends VirtualNode {
         }
         return this.parent;
     }
-    getChild() {
-        if (!this.child) {
-            throw new Error(`Expected child widget to be set on '${this.getId()}' SlotNode`);
-        }
-        return this.child;
-    }
-    appendChild(child) {
-        if (!(child instanceof WidgetNode)) {
-            throw new Error(`Cannot append '${child.typeName}' to 'Slot': expected Widget`);
-        }
-        const oldChild = this.child;
-        this.child = child.container;
-        scheduleAfterCommit(() => {
-            if (this.parent) {
-                this.onChildChange(oldChild ?? null);
-            }
-        });
-    }
-    removeChild() {
-        const oldChild = this.child;
-        scheduleAfterCommit(() => {
-            if (oldChild === this.child) {
-                this.child = undefined;
-            }
-            if (this.parent) {
-                this.onChildChange(oldChild ?? null);
-            }
-        }, CommitPriority.HIGH);
-    }
-    onChildChange(oldChild) {
+    ensureChildSetter() {
+        if (this.cachedSetter)
+            return this.cachedSetter;
         const parent = this.getParent();
         const parentType = parent.constructor.glibTypeName;
         const propMeta = resolvePropMeta(parent, this.getId());
         if (!propMeta) {
             throw new Error(`Unable to find property for Slot '${this.getId()}' on type '${parentType}'`);
         }
-        const [_, setterName] = propMeta;
+        const [, setterName] = propMeta;
         const setter = parent[setterName];
         if (typeof setter !== "function") {
             throw new Error(`Expected setter function for Slot '${this.getId()}' on type '${parentType}'`);
         }
+        this.cachedSetter = setter.bind(parent);
+        return this.cachedSetter;
+    }
+    onChildChange(oldChild) {
+        const setter = this.ensureChildSetter();
         if (oldChild && !this.child) {
+            const parent = this.getParent();
             const root = oldChild.getRoot();
             const focusWidget = root?.getFocus?.();
             if (focusWidget && this.isDescendantOf(focusWidget, oldChild)) {
                 parent.grabFocus();
             }
         }
-        setter.call(parent, this.child);
+        setter(this.child);
     }
     isDescendantOf(widget, ancestor) {
         let current = widget;

package/dist/nodes/source-view.js

@@ -1,42 +1,93 @@
 import * as GtkSource from "@gtkx/ffi/gtksource";
 import { registerNodeClass } from "../registry.js";
-import { isContainerType } from "./internal/utils.js";
-import { SourceBufferNode } from "./source-buffer.js";
-import { WidgetNode } from "./widget.js";
-class SourceViewNode extends WidgetNode {
+import { TextBufferController } from "./internal/text-buffer-controller.js";
+import { hasChanged, matchesAnyClass } from "./internal/utils.js";
+import { TextViewNode } from "./text-view.js";
+class SourceViewNode extends TextViewNode {
     static priority = 1;
-    bufferChild;
     static matches(_type, containerOrClass) {
-        return isContainerType(GtkSource.View, containerOrClass);
+        return matchesAnyClass([GtkSource.View], containerOrClass);
     }
-    appendChild(child) {
-        if (this.tryAttachSourceBuffer(child))
-            return;
-        super.appendChild(child);
+    createBufferController() {
+        return new TextBufferController(this, this.container, () => new GtkSource.Buffer());
     }
-    insertBefore(child, before) {
-        if (this.tryAttachSourceBuffer(child))
-            return;
-        super.insertBefore(child, before);
+    ensureBufferController() {
+        return super.ensureBufferController();
     }
-    removeChild(child) {
-        if (child instanceof SourceBufferNode) {
-            if (this.bufferChild === child) {
-                this.bufferChild = undefined;
-            }
-            return;
+    applyOwnProps(oldProps, newProps) {
+        super.applyOwnProps(oldProps, newProps);
+        this.applySourceViewProps(oldProps, newProps);
+    }
+    resolveLanguage(language) {
+        if (typeof language === "string") {
+            const langManager = GtkSource.LanguageManager.getDefault();
+            return langManager.getLanguage(language);
         }
-        super.removeChild(child);
+        return language;
     }
-    tryAttachSourceBuffer(child) {
-        if (!(child instanceof SourceBufferNode))
-            return false;
-        if (this.bufferChild) {
-            throw new Error("SourceView can only have one SourceBuffer child");
+    resolveStyleScheme(scheme) {
+        if (typeof scheme === "string") {
+            const schemeManager = GtkSource.StyleSchemeManager.getDefault();
+            return schemeManager.getScheme(scheme);
+        }
+        return scheme;
+    }
+    applySourceViewProps(oldProps, newProps) {
+        const hasSourceViewProps = newProps.language !== undefined ||
+            newProps.styleScheme !== undefined ||
+            newProps.highlightSyntax !== undefined ||
+            newProps.highlightMatchingBrackets !== undefined ||
+            newProps.implicitTrailingNewline !== undefined ||
+            newProps.onCursorMoved !== undefined ||
+            newProps.onHighlightUpdated !== undefined ||
+            oldProps?.language !== undefined ||
+            oldProps?.styleScheme !== undefined;
+        if (!hasSourceViewProps) {
+            return;
+        }
+        const buffer = this.ensureBufferController().ensureBuffer();
+        if (hasChanged(oldProps, newProps, "language")) {
+            if (newProps.language !== undefined) {
+                const language = this.resolveLanguage(newProps.language);
+                buffer.setLanguage(language);
+            }
+            else if (oldProps?.language !== undefined) {
+                buffer.setLanguage(null);
+            }
         }
-        this.bufferChild = child;
-        child.setSourceView(this.container);
-        return true;
+        if (hasChanged(oldProps, newProps, "styleScheme")) {
+            if (newProps.styleScheme !== undefined) {
+                const scheme = this.resolveStyleScheme(newProps.styleScheme);
+                buffer.setStyleScheme(scheme);
+            }
+            else if (oldProps?.styleScheme !== undefined) {
+                buffer.setStyleScheme(null);
+            }
+        }
+        if (hasChanged(oldProps, newProps, "highlightSyntax") || hasChanged(oldProps, newProps, "language")) {
+            const highlightSyntax = newProps.highlightSyntax ?? newProps.language !== undefined;
+            buffer.setHighlightSyntax(highlightSyntax);
+        }
+        if (hasChanged(oldProps, newProps, "highlightMatchingBrackets")) {
+            const highlightMatchingBrackets = newProps.highlightMatchingBrackets ?? true;
+            buffer.setHighlightMatchingBrackets(highlightMatchingBrackets);
+        }
+        if (hasChanged(oldProps, newProps, "implicitTrailingNewline")) {
+            if (newProps.implicitTrailingNewline !== undefined) {
+                buffer.setImplicitTrailingNewline(newProps.implicitTrailingNewline);
+            }
+        }
+        if (hasChanged(oldProps, newProps, "onCursorMoved") || hasChanged(oldProps, newProps, "onHighlightUpdated")) {
+            this.updateSourceViewSignalHandlers(newProps);
+        }
+    }
+    updateSourceViewSignalHandlers(props) {
+        const buffer = this.ensureBufferController().getBuffer();
+        if (!buffer)
+            return;
+        const { onCursorMoved, onHighlightUpdated } = props;
+        this.signalStore.set(this, buffer, "cursor-moved", onCursorMoved ?? null);
+        this.signalStore.set(this, buffer, "highlight-updated", onHighlightUpdated ? (start, end) => onHighlightUpdated(start, end) : null);
     }
 }
 registerNodeClass(SourceViewNode);

package/dist/nodes/stack-page.js

@@ -1,41 +1,47 @@
-import { batch, isObjectEqual } from "@gtkx/ffi";
+import { isObjectEqual } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
+import { hasChanged } from "./internal/utils.js";
 import { SlotNode } from "./slot.js";
 class StackPageNode extends SlotNode {
     static priority = 1;
-    page;
+    page = null;
     static matches(type) {
         return type === "StackPage";
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
         if (!this.page) {
             return;
         }
-        if (!oldProps || oldProps.title !== newProps.title) {
-            if (newProps.title !== undefined) {
-                this.page.setTitle(newProps.title);
-            }
+        if (hasChanged(oldProps, newProps, "title") && newProps.title !== undefined) {
+            this.page.setTitle(newProps.title);
         }
-        if (!oldProps || oldProps.iconName !== newProps.iconName) {
-            if (newProps.iconName !== undefined) {
-                this.page.setIconName(newProps.iconName);
-            }
+        if (hasChanged(oldProps, newProps, "iconName") && newProps.iconName !== undefined) {
+            this.page.setIconName(newProps.iconName);
         }
-        if (!oldProps || oldProps.needsAttention !== newProps.needsAttention) {
+        if (hasChanged(oldProps, newProps, "needsAttention")) {
             this.page.setNeedsAttention(newProps.needsAttention ?? false);
         }
-        if (!oldProps || oldProps.visible !== newProps.visible) {
+        if (hasChanged(oldProps, newProps, "visible")) {
             this.page.setVisible(newProps.visible ?? true);
         }
-        if (!oldProps || oldProps.useUnderline !== newProps.useUnderline) {
+        if (hasChanged(oldProps, newProps, "useUnderline")) {
             this.page.setUseUnderline(newProps.useUnderline ?? false);
         }
-        if ("setBadgeNumber" in this.page && (!oldProps || oldProps.badgeNumber !== newProps.badgeNumber)) {
+        if ("setBadgeNumber" in this.page && hasChanged(oldProps, newProps, "badgeNumber")) {
             this.page.setBadgeNumber?.(newProps.badgeNumber ?? 0);
         }
     }
+    onChildChange(oldChild) {
+        this.removePage(oldChild);
+        if (this.child) {
+            this.addPage();
+        }
+    }
     addPage() {
         const child = this.getChild();
         const parent = this.getParent();
@@ -78,13 +84,5 @@ class StackPageNode extends SlotNode {
             parent.remove(oldChild);
         }
     }
-    onChildChange(oldChild) {
-        batch(() => {
-            this.removePage(oldChild);
-            if (this.child) {
-                this.addPage();
-            }
-        });
-    }
 }
 registerNodeClass(StackPageNode);

package/dist/nodes/stack.js

@@ -1,24 +1,38 @@
 import { STACK_CLASSES } from "../generated/internal.js";
 import { registerNodeClass } from "../registry.js";
-import { scheduleAfterCommit } from "../scheduler.js";
-import { filterProps, matchesAnyClass } from "./internal/utils.js";
+import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
+import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
-const PROPS = ["page"];
+const OWN_PROPS = ["page", "onPageChanged"];
 class StackNode extends WidgetNode {
     static priority = 1;
     static matches(_type, containerOrClass) {
         return matchesAnyClass(STACK_CLASSES, containerOrClass);
     }
     updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
         if (newProps.page && this.container.getVisibleChildName() !== newProps.page) {
             const page = newProps.page;
             scheduleAfterCommit(() => {
                 if (this.container.getChildByName(page)) {
                     this.container.setVisibleChildName(page);
                 }
-            });
+            }, CommitPriority.NORMAL);
+        }
+        if (hasChanged(oldProps, newProps, "onPageChanged")) {
+            const { onPageChanged } = newProps;
+            if (onPageChanged) {
+                this.signalStore.set(this, this.container, "notify::visible-child-name", (self) => {
+                    onPageChanged(self.getVisibleChildName(), self);
+                });
+            }
+            else {
+                this.signalStore.set(this, this.container, "notify::visible-child-name", null);
+            }
         }
-        super.updateProps(filterProps(oldProps ?? {}, PROPS), filterProps(newProps, PROPS));
     }
 }
 registerNodeClass(StackNode);

package/dist/nodes/text-anchor.d.ts

@@ -0,0 +1,41 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactNode } from "react";
+import type { Node } from "../node.js";
+import { VirtualNode } from "./virtual.js";
+/**
+ * Props for the TextAnchor virtual element.
+ *
+ * Used to declaratively embed widgets within text content in a TextBuffer.
+ * The anchor is placed at the current position in the text flow.
+ *
+ * @example
+ * ```tsx
+ * <GtkTextView>
+ *     <x.TextBuffer>
+ *         Click here: <x.TextAnchor>
+ *             <GtkButton label="Click me" />
+ *         </x.TextAnchor> to continue.
+ *     </x.TextBuffer>
+ * </GtkTextView>
+ * ```
+ */
+export type TextAnchorProps = {
+    /** The widget to embed at this anchor position */
+    children?: ReactNode;
+};
+export declare class TextAnchorNode extends VirtualNode<TextAnchorProps> {
+    static priority: number;
+    private textView;
+    private buffer;
+    private anchor;
+    private widgetChild;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    getLength(): number;
+    getText(): string;
+    setTextViewAndBuffer(textView: Gtk.TextView, buffer: Gtk.TextBuffer): void;
+    private setupAnchor;
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+    unmount(): void;
+}

package/dist/nodes/text-anchor.js

@@ -0,0 +1,59 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+const PLACEHOLDER = "\uFFFC";
+export class TextAnchorNode extends VirtualNode {
+    static priority = 1;
+    textView = null;
+    buffer = null;
+    anchor = null;
+    widgetChild = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextAnchor";
+    }
+    getLength() {
+        return 1;
+    }
+    getText() {
+        return PLACEHOLDER;
+    }
+    setTextViewAndBuffer(textView, buffer) {
+        this.textView = textView;
+        this.buffer = buffer;
+        this.setupAnchor();
+    }
+    setupAnchor() {
+        if (!this.textView || !this.buffer)
+            return;
+        const iter = new Gtk.TextIter();
+        this.buffer.getIterAtOffset(iter, this.bufferOffset);
+        this.anchor = this.buffer.createChildAnchor(iter);
+        if (this.widgetChild?.container && this.anchor) {
+            this.textView.addChildAtAnchor(this.widgetChild.container, this.anchor);
+        }
+    }
+    appendChild(child) {
+        if (!(child instanceof WidgetNode)) {
+            throw new Error(`TextAnchor can only contain widget children, got '${child.typeName}'`);
+        }
+        this.widgetChild = child;
+        if (this.textView && this.anchor && child.container) {
+            this.textView.addChildAtAnchor(child.container, this.anchor);
+        }
+    }
+    removeChild(child) {
+        if (child === this.widgetChild) {
+            this.widgetChild = null;
+        }
+    }
+    unmount() {
+        this.anchor = null;
+        this.widgetChild = null;
+        this.buffer = null;
+        this.textView = null;
+        super.unmount();
+    }
+}
+registerNodeClass(TextAnchorNode);

package/dist/nodes/text-content.d.ts

@@ -0,0 +1,10 @@
+import type { TextAnchorNode } from "./text-anchor.js";
+import type { TextPaintableNode } from "./text-paintable.js";
+import type { TextSegmentNode } from "./text-segment.js";
+import type { TextTagNode } from "./text-tag.js";
+export type TextContentChild = TextSegmentNode | TextTagNode | TextAnchorNode | TextPaintableNode;
+export type TextContentParent = {
+    onChildInserted(child: TextContentChild): void;
+    onChildRemoved(child: TextContentChild): void;
+    onChildTextChanged(child: TextSegmentNode, oldLength: number, newLength: number): void;
+};

package/dist/nodes/text-content.js

@@ -0,0 +1 @@
+export {};

package/dist/nodes/text-paintable.d.ts

@@ -0,0 +1,17 @@
+import type * as Gdk from "@gtkx/ffi/gdk";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { VirtualNode } from "./virtual.js";
+export type TextPaintableProps = {
+    paintable: Gdk.Paintable;
+};
+export declare class TextPaintableNode extends VirtualNode<TextPaintableProps> {
+    static priority: number;
+    private buffer;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    getLength(): number;
+    getText(): string;
+    setTextViewAndBuffer(_textView: Gtk.TextView, buffer: Gtk.TextBuffer): void;
+    private insertPaintable;
+    unmount(): void;
+}

package/dist/nodes/text-paintable.js

@@ -0,0 +1,34 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { VirtualNode } from "./virtual.js";
+const PLACEHOLDER = "\uFFFC";
+export class TextPaintableNode extends VirtualNode {
+    static priority = 1;
+    buffer = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextPaintable";
+    }
+    getLength() {
+        return 1;
+    }
+    getText() {
+        return PLACEHOLDER;
+    }
+    setTextViewAndBuffer(_textView, buffer) {
+        this.buffer = buffer;
+        this.insertPaintable();
+    }
+    insertPaintable() {
+        if (!this.buffer || !this.props.paintable)
+            return;
+        const iter = new Gtk.TextIter();
+        this.buffer.getIterAtOffset(iter, this.bufferOffset);
+        this.buffer.insertPaintable(iter, this.props.paintable);
+    }
+    unmount() {
+        this.buffer = null;
+        super.unmount();
+    }
+}
+registerNodeClass(TextPaintableNode);

package/dist/nodes/text-segment.d.ts

@@ -0,0 +1,15 @@
+import type { TextContentParent } from "./text-content.js";
+import { VirtualNode } from "./virtual.js";
+export type TextSegmentProps = {
+    text: string;
+};
+export declare class TextSegmentNode extends VirtualNode<TextSegmentProps> {
+    static priority: number;
+    private parent;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    setParent(parent: TextContentParent): void;
+    getText(): string;
+    getLength(): number;
+    updateProps(oldProps: TextSegmentProps | null, newProps: TextSegmentProps): void;
+}

package/dist/nodes/text-segment.js

@@ -0,0 +1,29 @@
+import { registerNodeClass } from "../registry.js";
+import { hasChanged } from "./internal/utils.js";
+import { VirtualNode } from "./virtual.js";
+export class TextSegmentNode extends VirtualNode {
+    static priority = 1;
+    parent = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextSegment";
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    getText() {
+        return this.props.text;
+    }
+    getLength() {
+        return this.props.text.length;
+    }
+    updateProps(oldProps, newProps) {
+        const oldText = oldProps?.text ?? "";
+        const newText = newProps.text;
+        super.updateProps(oldProps, newProps);
+        if (hasChanged(oldProps, newProps, "text") && this.parent) {
+            this.parent.onChildTextChanged(this, oldText.length, newText.length);
+        }
+    }
+}
+registerNodeClass(TextSegmentNode);