@gtkx/react 0.18.0 → 0.18.2

package/src/metadata.ts

@@ -0,0 +1,36 @@
+import type { NativeClass } from "@gtkx/ffi";
+import { PROPS, SIGNALS } from "./generated/internal.js";
+import type { Container } from "./types.js";
+
+const walkPrototypeChain = <T>(instance: Container, lookup: (typeName: string) => T | null): T | null => {
+    // biome-ignore lint/complexity/noBannedTypes: Walking prototype chain requires Function type
+    let current: Function | null = instance.constructor;
+
+    while (current) {
+        const typeName = (current as NativeClass).glibTypeName;
+
+        if (typeName) {
+            const result = lookup(typeName);
+            if (result !== null) {
+                return result;
+            }
+        }
+
+        const prototype = Object.getPrototypeOf(current.prototype);
+        current = prototype?.constructor ?? null;
+
+        if (current === Object || current === Function) {
+            break;
+        }
+    }
+
+    return null;
+};
+
+export const resolvePropMeta = (instance: Container, key: string): [string | null, string] | null =>
+    walkPrototypeChain(instance, (typeName) => PROPS[typeName]?.[key] ?? null);
+
+export const resolveSignal = (instance: Container, propName: string): string | null => {
+    if (propName === "onNotify") return "notify";
+    return walkPrototypeChain(instance, (typeName) => SIGNALS[typeName]?.[propName] ?? null);
+};

package/src/node.ts

@@ -0,0 +1,109 @@
+import { getSignalStore, type SignalStore } from "./nodes/internal/signal-store.js";
+import type { Container, ContainerClass, Props } from "./types.js";
+
+// biome-ignore lint/suspicious/noExplicitAny: Self-referential type bounds require any
+export class Node<TContainer = any, TProps = any, TParent extends Node = any, TChild extends Node = any> {
+    public static createContainer(_props: Props, _containerClass: ContainerClass, _rootContainer?: Container): unknown {
+        throw new Error("Cannot create container: unsupported node type");
+    }
+
+    container: TContainer;
+    props: TProps;
+    typeName: string;
+    signalStore: SignalStore;
+    rootContainer: Container;
+    parent: TParent | null = null;
+    children: TChild[] = [];
+    private childIndices = new Map<TChild, number>();
+
+    constructor(typeName: string, props: TProps, container: TContainer, rootContainer: Container) {
+        this.typeName = typeName;
+        this.props = props;
+        this.container = container;
+        this.rootContainer = rootContainer;
+        this.signalStore = getSignalStore(rootContainer);
+    }
+
+    public isValidChild(_child: Node): boolean {
+        return false;
+    }
+
+    public isValidParent(_parent: Node): boolean {
+        return true;
+    }
+
+    public setParent(parent: TParent | null): void {
+        if (parent !== null && !this.isValidParent(parent)) {
+            throw new Error(`Cannot add '${this.typeName}' to '${parent.typeName}'`);
+        }
+        this.parent = parent;
+    }
+
+    public appendInitialChild(child: TChild): void {
+        this.appendChild(child);
+    }
+
+    public appendChild(child: TChild): void {
+        if (!this.isValidChild(child)) {
+            throw new Error(`Cannot append '${child.typeName}' to '${this.typeName}'`);
+        }
+        this.childIndices.set(child, this.children.length);
+        this.children.push(child);
+        child.setParent(this);
+    }
+
+    public removeChild(child: TChild): void {
+        const index = this.childIndices.get(child);
+        if (index !== undefined) {
+            child.setParent(null);
+            this.children.splice(index, 1);
+            this.childIndices.delete(child);
+            this.rebuildChildIndices(index);
+        }
+    }
+
+    public insertBefore(child: TChild, before: TChild): void {
+        const beforeIndex = this.childIndices.get(before);
+        if (beforeIndex === undefined) {
+            throw new Error(`Cannot find 'before' child '${before.typeName}' in '${this.typeName}'`);
+        }
+
+        const existingIndex = this.childIndices.get(child);
+        if (existingIndex !== undefined) {
+            this.children.splice(existingIndex, 1);
+            const adjustedIndex = existingIndex < beforeIndex ? beforeIndex - 1 : beforeIndex;
+            this.children.splice(adjustedIndex, 0, child);
+            this.rebuildChildIndices(Math.min(existingIndex, adjustedIndex));
+            return;
+        }
+
+        if (!this.isValidChild(child)) {
+            throw new Error(`Cannot insert '${child.typeName}' into '${this.typeName}'`);
+        }
+
+        this.children.splice(beforeIndex, 0, child);
+        this.rebuildChildIndices(beforeIndex);
+        child.setParent(this);
+    }
+
+    private rebuildChildIndices(fromIndex: number): void {
+        for (let i = fromIndex; i < this.children.length; i++) {
+            this.childIndices.set(this.children[i] as TChild, i);
+        }
+    }
+
+    public finalizeInitialChildren(props: TProps): boolean {
+        this.commitUpdate(null, props);
+        return false;
+    }
+
+    public commitUpdate(_oldProps: TProps | null, newProps: TProps): void {
+        this.props = newProps;
+    }
+
+    public commitMount(): void {}
+
+    public detachDeletedInstance(): void {
+        this.signalStore.clear(this);
+    }
+}

package/src/nodes/adjustable.ts

@@ -0,0 +1,68 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { AdjustableProps } from "../jsx.js";
+import type { AdjustableWidget } from "../registry.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["value", "lower", "upper", "stepIncrement", "pageIncrement", "pageSize", "onValueChanged"] as const;
+
+export class AdjustableNode<T extends AdjustableWidget = AdjustableWidget> extends WidgetNode<T, AdjustableProps> {
+    private adjustment: Gtk.Adjustment | null = null;
+
+    public override commitUpdate(oldProps: AdjustableProps | null, newProps: AdjustableProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    protected ensureAdjustment(props: AdjustableProps): Gtk.Adjustment {
+        if (!this.adjustment) {
+            this.adjustment = new Gtk.Adjustment(
+                props.value ?? 0,
+                props.lower ?? 0,
+                props.upper ?? 100,
+                props.stepIncrement ?? 1,
+                props.pageIncrement ?? 10,
+                props.pageSize ?? 0,
+            );
+
+            this.container.setAdjustment(this.adjustment);
+        }
+
+        return this.adjustment;
+    }
+
+    protected applyOwnProps(oldProps: AdjustableProps | null, newProps: AdjustableProps): void {
+        const adjustment = this.ensureAdjustment(newProps);
+
+        if (hasChanged(oldProps, newProps, "onValueChanged")) {
+            const { onValueChanged } = newProps;
+            this.signalStore.set(
+                this,
+                this.container,
+                "value-changed",
+                onValueChanged ? (self: T) => onValueChanged(self.getValue(), self) : undefined,
+            );
+        }
+
+        if (!oldProps) return;
+
+        if (hasChanged(oldProps, newProps, "lower")) {
+            adjustment.setLower(newProps.lower ?? 0);
+        }
+        if (hasChanged(oldProps, newProps, "upper")) {
+            adjustment.setUpper(newProps.upper ?? 100);
+        }
+        if (hasChanged(oldProps, newProps, "stepIncrement")) {
+            adjustment.setStepIncrement(newProps.stepIncrement ?? 1);
+        }
+        if (hasChanged(oldProps, newProps, "pageIncrement")) {
+            adjustment.setPageIncrement(newProps.pageIncrement ?? 10);
+        }
+        if (hasChanged(oldProps, newProps, "pageSize")) {
+            adjustment.setPageSize(newProps.pageSize ?? 0);
+        }
+        if (hasChanged(oldProps, newProps, "value") && newProps.value !== undefined) {
+            adjustment.setValue(newProps.value);
+        }
+    }
+}

package/src/nodes/alert-dialog-response.ts

@@ -0,0 +1,78 @@
+import * as Adw from "@gtkx/ffi/adw";
+import type { AlertDialogResponseProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { hasChanged } from "./internal/props.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class AlertDialogResponseNode extends VirtualNode<AlertDialogResponseProps, WidgetNode<Adw.AlertDialog>> {
+    private responseId: string | null = null;
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode && parent.container instanceof Adw.AlertDialog;
+    }
+
+    public override setParent(parent: WidgetNode<Adw.AlertDialog> | null): void {
+        if (!parent && this.parent) {
+            this.removeFromDialog();
+        }
+
+        super.setParent(parent);
+
+        if (parent && !this.responseId) {
+            this.responseId = this.props.id;
+            parent.container.addResponse(this.responseId, this.props.label);
+            this.applyOwnProps(null, this.props);
+        }
+    }
+
+    public override commitUpdate(oldProps: AlertDialogResponseProps | null, newProps: AlertDialogResponseProps): void {
+        super.commitUpdate(oldProps, newProps);
+
+        if (!this.parent || !this.responseId) return;
+
+        if (hasChanged(oldProps, newProps, "id")) {
+            const oldId = this.responseId;
+            const newId = newProps.id;
+            const label = newProps.label;
+
+            this.parent.container.removeResponse(oldId);
+            this.responseId = newId;
+            this.parent.container.addResponse(newId, label);
+            this.applyOwnProps(null, newProps);
+            return;
+        }
+
+        if (hasChanged(oldProps, newProps, "label")) {
+            this.parent.container.setResponseLabel(this.responseId, newProps.label);
+        }
+
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        this.removeFromDialog();
+        super.detachDeletedInstance();
+    }
+
+    private removeFromDialog(): void {
+        if (!this.parent || !this.responseId) return;
+
+        this.parent.container.removeResponse(this.responseId);
+        this.responseId = null;
+    }
+
+    private applyOwnProps(oldProps: AlertDialogResponseProps | null, newProps: AlertDialogResponseProps): void {
+        if (!this.parent || !this.responseId) return;
+
+        if (hasChanged(oldProps, newProps, "appearance")) {
+            this.parent.container.setResponseAppearance(
+                this.responseId,
+                newProps.appearance ?? Adw.ResponseAppearance.DEFAULT,
+            );
+        }
+        if (hasChanged(oldProps, newProps, "enabled")) {
+            this.parent.container.setResponseEnabled(this.responseId, newProps.enabled ?? true);
+        }
+    }
+}

package/src/nodes/animation.ts

@@ -0,0 +1,402 @@
+import * as Adw from "@gtkx/ffi/adw";
+import * as Gdk from "@gtkx/ffi/gdk";
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { AnimatableProperties, AnimationProps, SpringTransition, TimedTransition } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { Container } from "../types.js";
+import { attachChild, detachChild, isAttachedTo } from "./internal/widget.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+let animationCounter = 0;
+
+const DEFAULT_TIMED_DURATION = 300;
+const DEFAULT_SPRING_DAMPING = 1;
+const DEFAULT_SPRING_MASS = 1;
+const DEFAULT_SPRING_STIFFNESS = 100;
+
+export class AnimationNode extends VirtualNode<AnimationProps, WidgetNode, WidgetNode> {
+    private className: string;
+    private provider: Gtk.CssProvider | null = null;
+    private display: Gdk.Display | null = null;
+    private currentAnimation: Adw.Animation | null = null;
+    private currentValues: AnimatableProperties = {};
+    private isExiting = false;
+    private detachedParentWidget: Gtk.Widget | null = null;
+
+    constructor(typeName: string, props: AnimationProps, container: undefined, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+        this.className = `gtkx-anim-${animationCounter++}`;
+    }
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode;
+    }
+
+    public override setParent(parent: WidgetNode | null): void {
+        if (!parent && this.parent) {
+            this.detachedParentWidget = this.parent.container;
+        }
+
+        super.setParent(parent);
+
+        if (parent && this.children[0]) {
+            this.onChildChange(null);
+        }
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        const oldChildWidget = this.children[0]?.container ?? null;
+
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override removeChild(child: WidgetNode): void {
+        const oldChildWidget = child.container;
+
+        super.removeChild(child);
+
+        if (this.parent && oldChildWidget) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override finalizeInitialChildren(props: AnimationProps): boolean {
+        this.commitUpdate(null, props);
+        return !!props.animateOnMount;
+    }
+
+    public override commitMount(): void {
+        const animate = this.props.animate;
+
+        if (this.props.animateOnMount && animate) {
+            this.animateTo(animate);
+        }
+    }
+
+    public override commitUpdate(oldProps: AnimationProps | null, newProps: AnimationProps): void {
+        super.commitUpdate(oldProps, newProps);
+
+        if (this.isExiting) {
+            return;
+        }
+
+        if (oldProps && newProps.animate && !this.areAnimatedPropsEqual(oldProps.animate, newProps.animate)) {
+            const target = newProps.animate;
+            if (this.children[0] && !this.isExiting) {
+                this.animateTo(target);
+            }
+        }
+    }
+
+    public override detachDeletedInstance(): void {
+        if (this.isExiting) {
+            return;
+        }
+
+        if (this.props.exit && this.children[0]) {
+            this.isExiting = true;
+
+            this.animateTo(this.props.exit, () => {
+                this.detachChildFromParentWidget();
+                this.cleanup();
+                super.detachDeletedInstance();
+            });
+        } else {
+            this.detachChildFromParentWidget();
+            this.cleanup();
+            super.detachDeletedInstance();
+        }
+    }
+
+    private onChildChange(oldChild: Gtk.Widget | null): void {
+        const parentWidget = this.parent?.container ?? null;
+        const childWidget = this.children[0]?.container ?? null;
+
+        if (oldChild && this.provider) {
+            oldChild.removeCssClass(this.className);
+        }
+
+        if (oldChild && parentWidget && isAttachedTo(oldChild, parentWidget)) {
+            detachChild(oldChild, parentWidget);
+        }
+
+        if (childWidget && parentWidget) {
+            attachChild(childWidget, parentWidget);
+
+            this.setupCssProvider();
+            childWidget.addCssClass(this.className);
+
+            const initial = this.props.initial;
+            const animate = this.props.animate;
+
+            if (initial === false || !this.props.animateOnMount) {
+                if (animate) {
+                    this.currentValues = { ...animate };
+                    this.applyValues(this.currentValues);
+                }
+            } else {
+                const initialValues = initial ?? animate ?? {};
+                this.currentValues = { ...initialValues };
+                this.applyValues(this.currentValues);
+            }
+        }
+    }
+
+    private detachChildFromParentWidget(): void {
+        const parentWidget = this.parent?.container ?? this.detachedParentWidget;
+        const childWidget = this.children[0]?.container ?? null;
+
+        if (childWidget && parentWidget && isAttachedTo(childWidget, parentWidget)) {
+            detachChild(childWidget, parentWidget);
+        }
+    }
+
+    private setupCssProvider(): void {
+        const childWidget = this.children[0]?.container ?? null;
+        if (this.provider || !childWidget) return;
+
+        this.provider = new Gtk.CssProvider();
+        this.display = Gdk.DisplayManager.get().getDefaultDisplay();
+
+        if (this.display) {
+            Gtk.StyleContext.addProviderForDisplay(
+                this.display,
+                this.provider,
+                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION,
+            );
+        }
+    }
+
+    private cleanup(): void {
+        const childWidget = this.children[0]?.container ?? null;
+
+        if (this.currentAnimation) {
+            this.currentAnimation.skip();
+            this.currentAnimation = null;
+        }
+
+        if (this.provider && this.display) {
+            Gtk.StyleContext.removeProviderForDisplay(this.display, this.provider);
+        }
+
+        if (childWidget) {
+            childWidget.removeCssClass(this.className);
+        }
+
+        this.provider = null;
+        this.display = null;
+    }
+
+    private animateTo(target: AnimatableProperties, onComplete?: () => void): void {
+        const childWidget = this.children[0]?.container ?? null;
+        if (!childWidget) return;
+
+        if (this.currentAnimation) {
+            this.currentAnimation.skip();
+            this.currentAnimation = null;
+        }
+
+        const from = { ...this.currentValues };
+        const to = { ...target };
+
+        this.props.onAnimationStart?.();
+
+        const callback = new Adw.CallbackAnimationTarget((progress: number) => {
+            const interpolated = this.interpolate(from, to, progress);
+            this.currentValues = interpolated;
+            this.applyValues(interpolated);
+        });
+
+        const animation = this.createAnimation(childWidget, callback);
+
+        animation.connect("done", () => {
+            this.currentValues = { ...to };
+            this.currentAnimation = null;
+            this.props.onAnimationComplete?.();
+            onComplete?.();
+        });
+
+        this.currentAnimation = animation;
+
+        const transition = this.props.transition;
+        const delay = transition?.delay ?? 0;
+
+        if (delay > 0) {
+            setTimeout(() => {
+                if (this.currentAnimation === animation) {
+                    animation.play();
+                }
+            }, delay);
+        } else {
+            animation.play();
+        }
+    }
+
+    private createAnimation(widget: Gtk.Widget, target: Adw.CallbackAnimationTarget): Adw.Animation {
+        const transition = this.props.transition;
+
+        if (transition?.mode === "spring") {
+            return this.createSpringAnimation(widget, target, transition);
+        }
+
+        return this.createTimedAnimation(widget, target, transition);
+    }
+
+    private createTimedAnimation(
+        widget: Gtk.Widget,
+        target: Adw.CallbackAnimationTarget,
+        transition: TimedTransition | undefined,
+    ): Adw.TimedAnimation {
+        const duration = transition?.duration ?? DEFAULT_TIMED_DURATION;
+
+        const animation = new Adw.TimedAnimation(widget, 0, 1, duration, target);
+
+        if (transition?.easing !== undefined) {
+            animation.setEasing(transition.easing);
+        }
+
+        if (transition?.repeat !== undefined) {
+            animation.setRepeatCount(transition.repeat);
+        }
+
+        if (transition?.reverse !== undefined) {
+            animation.setReverse(transition.reverse);
+        }
+
+        if (transition?.alternate !== undefined) {
+            animation.setAlternate(transition.alternate);
+        }
+
+        return animation;
+    }
+
+    private createSpringAnimation(
+        widget: Gtk.Widget,
+        target: Adw.CallbackAnimationTarget,
+        transition: SpringTransition,
+    ): Adw.SpringAnimation {
+        const damping = transition.damping ?? DEFAULT_SPRING_DAMPING;
+        const mass = transition.mass ?? DEFAULT_SPRING_MASS;
+        const stiffness = transition.stiffness ?? DEFAULT_SPRING_STIFFNESS;
+
+        const springParams = new Adw.SpringParams(damping, mass, stiffness);
+        const animation = new Adw.SpringAnimation(widget, 0, 1, springParams, target);
+
+        if (transition.initialVelocity !== undefined) {
+            animation.setInitialVelocity(transition.initialVelocity);
+        }
+
+        if (transition.clamp !== undefined) {
+            animation.setClamp(transition.clamp);
+        }
+
+        return animation;
+    }
+
+    private applyValues(values: AnimatableProperties): void {
+        if (!this.provider) {
+            return;
+        }
+
+        const childWidget = this.children[0]?.container ?? null;
+        if (childWidget && !childWidget.getCssClasses()?.includes(this.className)) {
+            childWidget.addCssClass(this.className);
+        }
+
+        const css = this.buildCss(this.className, values);
+        if (css) {
+            this.provider.loadFromString(css);
+        }
+    }
+
+    private getDefaultValue(property: keyof AnimatableProperties): number {
+        switch (property) {
+            case "opacity":
+            case "scale":
+            case "scaleX":
+            case "scaleY":
+                return 1;
+            default:
+                return 0;
+        }
+    }
+
+    private interpolate(from: AnimatableProperties, to: AnimatableProperties, progress: number): AnimatableProperties {
+        const result: AnimatableProperties = {};
+
+        const allKeys = new Set([...Object.keys(from), ...Object.keys(to)]) as Set<keyof AnimatableProperties>;
+
+        for (const key of allKeys) {
+            const fromVal = from[key] ?? this.getDefaultValue(key);
+            const toVal = to[key] ?? this.getDefaultValue(key);
+            result[key] = fromVal + (toVal - fromVal) * progress;
+        }
+
+        return result;
+    }
+
+    private buildCss(className: string, props: AnimatableProperties): string {
+        const parts: string[] = [];
+        const transforms: string[] = [];
+
+        if (props.opacity !== undefined) {
+            parts.push(`opacity: ${props.opacity}`);
+        }
+
+        if (props.translateX !== undefined || props.translateY !== undefined) {
+            transforms.push(`translate(${props.translateX ?? 0}px, ${props.translateY ?? 0}px)`);
+        }
+
+        if (props.scale !== undefined) {
+            transforms.push(`scale(${props.scale})`);
+        } else if (props.scaleX !== undefined || props.scaleY !== undefined) {
+            transforms.push(`scale(${props.scaleX ?? 1}, ${props.scaleY ?? 1})`);
+        }
+
+        if (props.rotate !== undefined) {
+            transforms.push(`rotate(${props.rotate}deg)`);
+        }
+
+        if (props.skewX !== undefined) {
+            transforms.push(`skewX(${props.skewX}deg)`);
+        }
+
+        if (props.skewY !== undefined) {
+            transforms.push(`skewY(${props.skewY}deg)`);
+        }
+
+        if (transforms.length > 0) {
+            parts.push(`transform: ${transforms.join(" ")}`);
+        }
+
+        if (parts.length === 0) {
+            return "";
+        }
+
+        return `.${className} { ${parts.join("; ")}; }`;
+    }
+
+    private areAnimatedPropsEqual<T extends Record<string, unknown>>(a?: T, b?: T): boolean {
+        if (a === b) return true;
+        if (!a || !b) return false;
+
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) return false;
+
+        for (const key of keysA) {
+            if (a[key] !== b[key]) return false;
+        }
+
+        return true;
+    }
+}