@gtkx/react 1.2.1 → 1.3.0

package/src/reconciler/host-config.ts

@@ -31,6 +31,7 @@ import {
 } from "./node.js";
 import { isRootElement, type RootElement } from "./root-element.js";
 import { disconnectAllHandlers } from "./signals.js";
+import { releaseStyle } from "./style.js";
 import {
     didUpdateTextSurgically,
     enclosingHost,
@@ -133,7 +134,7 @@ const hostConfig = {
     unhideTextInstance: (): void => undefined,
     detachDeletedInstance: (instance: Instance): void => {
         if (instance.kind === ELEMENT_KIND) {
-            disconnectAllHandlers(instance);
+            detachElement(instance);
         } else if (instance.kind === LAZY_KIND && instance.adopted !== null) {
             disconnectAllHandlers(lazyTarget(instance, instance.adopted));
         }
@@ -187,6 +188,14 @@ function createPriorityTracker(): PriorityTracker {
     };
 }
 
+const detachElement = (instance: ElementNode): void => {
+    disconnectAllHandlers(instance);
+
+    if (instance.object instanceof Gtk.Widget) {
+        releaseStyle(instance.object);
+    }
+};
+
 const updateInstance = (instance: Instance, prev: Props, next: Props): void => {
     if (instance.kind === ELEMENT_KIND) {
         assertPropsCanChange(instance.typeName, prev, next);

package/src/reconciler/style.ts

@@ -0,0 +1,83 @@
+import type * as Gtk from "@gtkx/gi/gtk";
+import { attachParsingErrorLogger, registerProviderForDefaultDisplay, scopedRule } from "@gtkx/css/internal";
+import { STYLE_PROVIDER_PRIORITY_APPLICATION } from "@gtkx/gi/gtk";
+import { createLogger, type Logger } from "@gtkx/utils";
+import { applyWrite } from "./signals.js";
+
+type StyleSlot = { provider: Gtk.CssProvider; className: string; css: string };
+
+const CLASS_PREFIX = "gtkx-s";
+const STYLE_PRIORITY = STYLE_PROVIDER_PRIORITY_APPLICATION + 1;
+const log: Logger = createLogger("react");
+const styles: WeakMap<Gtk.Widget, StyleSlot> = new WeakMap();
+const pool: StyleSlot[] = [];
+const counter: { next: number } = { next: 0 };
+
+const reclaimed: FinalizationRegistry<StyleSlot> = new FinalizationRegistry((slot) => {
+    pool.push(slot);
+});
+
+const createSlot = (): StyleSlot => {
+    counter.next += 1;
+    const provider = registerProviderForDefaultDisplay({ priority: STYLE_PRIORITY, followsPreferences: false });
+    attachParsingErrorLogger(provider, log, "a style prop");
+
+    return { provider, className: `${CLASS_PREFIX}${counter.next.toString()}`, css: "" };
+};
+
+const styleClass = (widget: Gtk.Widget): string | null => styles.get(widget)?.className ?? null;
+
+const releaseStyle = (widget: Gtk.Widget): void => {
+    const slot = styles.get(widget);
+
+    if (slot === undefined) {
+        return;
+    }
+
+    styles.delete(widget);
+    reclaimed.unregister(widget);
+
+    applyWrite(() => {
+        widget.removeCssClass(slot.className);
+    });
+
+    pool.push(slot);
+};
+
+const ensureSlot = (widget: Gtk.Widget): StyleSlot => {
+    const existing = styles.get(widget);
+
+    if (existing !== undefined) {
+        return existing;
+    }
+
+    const slot = pool.pop() ?? createSlot();
+    styles.set(widget, slot);
+    reclaimed.register(widget, slot, widget);
+
+    applyWrite(() => {
+        widget.addCssClass(slot.className);
+    });
+
+    return slot;
+};
+
+const applyStyle = (widget: Gtk.Widget, style: unknown): string | null => {
+    if (typeof style !== "object" || style === null) {
+        releaseStyle(widget);
+
+        return null;
+    }
+
+    const slot = ensureSlot(widget);
+    const css = scopedRule(slot.className, style);
+
+    if (css !== slot.css) {
+        slot.css = css;
+        slot.provider.loadFromString(css);
+    }
+
+    return slot.className;
+};
+
+export { applyStyle, releaseStyle, styleClass };

package/src/utils/accessible-props.ts

@@ -201,42 +201,50 @@ function buildRelation(relation: Gtk.AccessibleRelation, type: AccessibleValueTy
     };
 }
 
+const initValue = (gtype: GObject.Type, populate: (value: GObject.Value) => void): GObject.Value => {
+    const value = new GObject.Value();
+    value.init(gtype);
+    populate(value);
+
+    return value;
+};
+
 const buildValue = (descriptor: AccessibleDescriptor, jsValue: unknown): GObject.Value => {
     switch (descriptor.type) {
         case "string": {
-            return GObject.buildValue(GObject.TYPE_STRING, (v) => {
+            return initValue(GObject.TYPE_STRING, (v) => {
                 v.setString(jsValue as string);
             });
         }
         case "boolean": {
-            return GObject.buildValue(GObject.TYPE_BOOLEAN, (v) => {
+            return initValue(GObject.TYPE_BOOLEAN, (v) => {
                 v.setBoolean(jsValue as boolean);
             });
         }
         case "optionalBoolean": {
-            return GObject.buildValue(GObject.TYPE_INT, (v) => {
+            return initValue(GObject.TYPE_INT, (v) => {
                 v.setInt(jsValue === true ? 1 : 0);
             });
         }
         case "int": {
-            return GObject.buildValue(GObject.TYPE_INT, (v) => {
+            return initValue(GObject.TYPE_INT, (v) => {
                 v.setInt(jsValue as number);
             });
         }
         case "double": {
-            return GObject.buildValue(GObject.TYPE_DOUBLE, (v) => {
+            return initValue(GObject.TYPE_DOUBLE, (v) => {
                 v.setDouble(jsValue as number);
             });
         }
         case "object": {
-            return GObject.buildValue(GObject.TYPE_OBJECT, (v) => {
+            return initValue(GObject.TYPE_OBJECT, (v) => {
                 v.setObject(jsValue as GObject.Object | null);
             });
         }
         case "list": {
             const list = Gtk.AccessibleList.newFromList(jsValue as Gtk.Accessible[]);
 
-            return GObject.buildValue(Gtk.AccessibleList.prototype.__type__, (v) => {
+            return initValue(Gtk.AccessibleList.prototype.__type__, (v) => {
                 v.setBoxed(list);
             });
         }