@gtkx/react 0.20.0 → 1.0.0-rc.1

package/src/metadata.ts

@@ -1,43 +0,0 @@
-import type { NativeClass } from "@gtkx/ffi";
-import { CONSTRUCTION_META, 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 isConstructOnlyProp = (instance: Container, key: string): boolean =>
-    walkPrototypeChain(instance, (typeName) => {
-        const meta = CONSTRUCTION_META[typeName];
-        if (!meta || !(key in meta)) return null;
-        return meta[key]?.constructOnly === true;
-    }) ?? false;
-
-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

@@ -1,107 +0,0 @@
-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[] = [];
-
-    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}'`);
-        }
-
-        const existingIndex = this.children.indexOf(child);
-        if (existingIndex !== -1) {
-            this.children.splice(existingIndex, 1);
-        }
-        this.children.push(child);
-
-        if (child.parent !== this) {
-            child.setParent(this);
-        }
-    }
-
-    public removeChild(child: TChild): void {
-        child.setParent(null);
-        const index = this.children.indexOf(child);
-
-        if (index !== -1) {
-            this.children.splice(index, 1);
-        }
-    }
-
-    public insertBefore(child: TChild, before: TChild): void {
-        if (!this.isValidChild(child)) {
-            throw new Error(`Cannot insert '${child.typeName}' into '${this.typeName}'`);
-        }
-
-        const existingIndex = this.children.indexOf(child);
-        if (existingIndex !== -1) {
-            this.children.splice(existingIndex, 1);
-        }
-
-        const beforeIndex = this.children.indexOf(before);
-        if (beforeIndex === -1) {
-            throw new Error(`Cannot find 'before' child '${before.typeName}' in '${this.typeName}'`);
-        }
-
-        this.children.splice(beforeIndex, 0, child);
-
-        if (child.parent !== this) {
-            child.setParent(this);
-        }
-    }
-
-    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

@@ -1,68 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,402 +0,0 @@
-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;
-    }
-}