feat: necessary changes to support React 19

package.json

@@ -43,18 +43,19 @@
   },
   "dependencies": {
     "dilswer": "^2.1.1",
-    "react-reconciler": "^0.29.0"
+    "react-reconciler": "^0.31.0",
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@reactgjs/gest": "^0.5.0",
-    "@types/react-reconciler": "^0.28.4",
+    "@types/react-reconciler": "^0.28.9",
+    "@types/react": "^19.0.1",
     "dprint": "^0.47.2",
     "esbuild": "^0.24.0",
     "git-hook-tasks": "ncpa0cpl/git-hook-tasks#master",
     "gjs-esm-types": "^0.0.4",
     "husky": "^8.0.3",
     "oxlint": "^0.14.0",
-    "react": "^18.3.1",
     "typescript": "^5.7.2"
   },
   "peerDependencies": {

src/components/pack-type/pack-type.ts

@@ -3,6 +3,7 @@ import { PackType } from "../../enums/gtk3-index";
 
 export const PackEnd = (props: { children: React.ReactElement }) => {
   return React.cloneElement(props.children, {
+    // @ts-expect-error
     "cpt:pack-type": PackType.END,
   });
 };

src/gjs-elements/gtk3/button-box/button-box.ts

@@ -1,5 +1,5 @@
 import Gtk from "gi://Gtk";
-import { EventPhase } from "../../../reconciler/event-phase";
+import { EventPriority } from "../../../reconciler/event-phase";
 import type { GjsContext } from "../../../reconciler/gjs-renderer";
 import type { HostContext } from "../../../reconciler/host-context";
 import { BaseElement, type GjsElement } from "../../gjs-element";
@@ -41,7 +41,10 @@ type ButtonBoxPropsMixin =
   & TooltipProps
   & AccelProps;
 
-export type ButtonBoxEvent<P extends Record<string, any> = {}> = SyntheticEvent<P, ButtonBoxElement>;
+export type ButtonBoxEvent<P extends Record<string, any> = {}> = SyntheticEvent<
+  P,
+  ButtonBoxElement
+>;
 
 export interface ButtonBoxProps extends ButtonBoxPropsMixin {
   margin?: ElementMargin;
@@ -70,10 +73,9 @@ export class ButtonBoxElement extends BaseElement implements GjsElement<"BUTTON_
   protected parent: GjsElement | null = null;
 
   readonly lifecycle = new ElementLifecycleController();
-  protected readonly handlers = new EventHandlers<
-    Gtk.Button,
-    ButtonBoxProps
-  >(this);
+  protected readonly handlers = new EventHandlers<Gtk.Button, ButtonBoxProps>(
+    this,
+  );
   protected readonly propsMapper = new PropertyMapper<ButtonBoxProps>(
     this.lifecycle,
     createSizeRequestPropMapper(this.widget),
@@ -99,13 +101,13 @@ export class ButtonBoxElement extends BaseElement implements GjsElement<"BUTTON_
       "enter-notify-event",
       "onMouseEnter",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
     this.handlers.bind(
       "leave-notify-event",
       "onMouseLeave",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
 
     this.updateProps(props);

src/gjs-elements/gtk3/button/button.ts

@@ -4,7 +4,7 @@ import type Gio from "gi://Gio";
 import Gtk from "gi://Gtk";
 import { ButtonType } from "../../../enums/custom";
 import type { PositionType } from "../../../enums/gtk3-index";
-import { EventPhase } from "../../../reconciler/event-phase";
+import { EventPriority } from "../../../reconciler/event-phase";
 import type { GjsContext } from "../../../reconciler/gjs-renderer";
 import type { HostContext } from "../../../reconciler/host-context";
 import { BaseElement, type GjsElement } from "../../gjs-element";
@@ -47,7 +47,10 @@ type ButtonPropsMixin =
   & TooltipProps
   & AccelProps;
 
-export type ButtonEvent<P extends Record<string, any> = {}> = SyntheticEvent<P, ButtonElement>;
+export type ButtonEvent<P extends Record<string, any> = {}> = SyntheticEvent<
+  P,
+  ButtonElement
+>;
 
 export interface ButtonProps extends ButtonPropsMixin {
   type?: ButtonType;
@@ -73,9 +76,7 @@ export interface ButtonProps extends ButtonPropsMixin {
 
 const ImageDataType = DataType.OneOf(
   DataType.String,
-  DataType.Custom(
-    (v): v is GdkPixbuf.Pixbuf => typeof v === "object",
-  ),
+  DataType.Custom((v): v is GdkPixbuf.Pixbuf => typeof v === "object"),
 );
 
 export class ButtonElement extends BaseElement implements GjsElement<"BUTTON", Gtk.Button> {
@@ -93,10 +94,9 @@ export class ButtonElement extends BaseElement implements GjsElement<"BUTTON", G
   protected parent: GjsElement | null = null;
 
   readonly lifecycle = new ElementLifecycleController();
-  protected readonly handlers = new EventHandlers<
-    Gtk.Button,
-    ButtonProps
-  >(this);
+  protected readonly handlers = new EventHandlers<Gtk.Button, ButtonProps>(
+    this,
+  );
   protected readonly propsMapper = new PropertyMapper<ButtonProps>(
     this.lifecycle,
     createSizeRequestPropMapper(this.widget),
@@ -193,17 +193,14 @@ export class ButtonElement extends BaseElement implements GjsElement<"BUTTON", G
             return () => this.widget.set_image(null);
           }
         })
-        .iconPixelSize(
-          DataType.Number,
-          (v = 16, allProps, mapperApi) => {
-            if (
-              allProps.icon != null
-              && !mapperApi.isUpdatedInThisCycle("icon")
-            ) {
-              this.setImageIcon(allProps.icon, v);
-            }
-          },
-        )
+        .iconPixelSize(DataType.Number, (v = 16, allProps, mapperApi) => {
+          if (
+            allProps.icon != null
+            && !mapperApi.isUpdatedInThisCycle("icon")
+          ) {
+            this.setImageIcon(allProps.icon, v);
+          }
+        })
         .useUnderline(DataType.Boolean, (v = false) => {
           this.widget.use_underline = v;
         })
@@ -239,13 +236,13 @@ export class ButtonElement extends BaseElement implements GjsElement<"BUTTON", G
       "enter-notify-event",
       "onMouseEnter",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
     this.handlers.bind(
       "leave-notify-event",
       "onMouseLeave",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
 
     this.updateProps(props);
@@ -291,23 +288,15 @@ export class ButtonElement extends BaseElement implements GjsElement<"BUTTON", G
     }
 
     if (width != null && height != null) {
-      pixbuff = resizePixbuff(
-        pixbuff,
-        width,
-        height,
-        preserveAspectRatio,
-      );
+      pixbuff = resizePixbuff(pixbuff, width, height, preserveAspectRatio);
     }
 
     const image = Gtk.Image.new_from_pixbuf(pixbuff);
 
     this.widget.set_image(image);
   }
 
-  protected setImageIcon(
-    icon: string | Gio.Icon,
-    pixelSize?: number,
-  ) {
+  protected setImageIcon(icon: string | Gio.Icon, pixelSize?: number) {
     const iconWidget = typeof icon === "string"
       ? Gtk.Image.new_from_icon_name(icon, Gtk.IconSize.BUTTON)
       : Gtk.Image.new_from_gicon(icon, Gtk.IconSize.BUTTON);

src/gjs-elements/gtk3/check-button/check-button.ts

@@ -1,6 +1,6 @@
 import { DataType } from "dilswer";
 import Gtk from "gi://Gtk";
-import { EventPhase } from "../../../reconciler/event-phase";
+import { EventPriority } from "../../../reconciler/event-phase";
 import type { GjsContext } from "../../../reconciler/gjs-renderer";
 import type { HostContext } from "../../../reconciler/host-context";
 import { BaseElement, type GjsElement } from "../../gjs-element";
@@ -121,13 +121,13 @@ export class CheckButtonElement extends BaseElement implements GjsElement<"CHECK
       "enter-notify-event",
       "onMouseEnter",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
     this.handlers.bind(
       "leave-notify-event",
       "onMouseLeave",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
 
     this.updateProps(props);

src/gjs-elements/gtk3/color-button/color-button.ts

@@ -1,7 +1,7 @@
 import { DataType } from "dilswer";
 import Gtk from "gi://Gtk";
 import { ButtonType } from "../../../enums/custom";
-import { EventPhase } from "../../../reconciler/event-phase";
+import { EventPriority } from "../../../reconciler/event-phase";
 import type { GjsContext } from "../../../reconciler/gjs-renderer";
 import type { HostContext } from "../../../reconciler/host-context";
 import { BaseElement, type GjsElement } from "../../gjs-element";
@@ -82,10 +82,9 @@ export class ColorButtonElement extends BaseElement implements GjsElement<"COLOR
   protected parent: GjsElement | null = null;
 
   readonly lifecycle = new ElementLifecycleController();
-  protected readonly handlers = new EventHandlers<
-    Gtk.Button,
-    ColorButtonProps
-  >(this);
+  protected readonly handlers = new EventHandlers<Gtk.Button, ColorButtonProps>(
+    this,
+  );
   protected readonly propsMapper = new PropertyMapper<ColorButtonProps>(
     this.lifecycle,
     createSizeRequestPropMapper(this.widget),
@@ -107,27 +106,22 @@ export class ColorButtonElement extends BaseElement implements GjsElement<"COLOR
         .useUnderline(DataType.Boolean, (v = false) => {
           this.widget.use_underline = v;
         })
-        .type(
-          DataType.Enum(ButtonType),
-          (v = ButtonType.NORMAL) => {
-            switch (v) {
-              case ButtonType.NORMAL:
-                this.widget.relief = Gtk.ReliefStyle.NORMAL;
-                break;
-              case ButtonType.FLAT:
-                this.widget.relief = Gtk.ReliefStyle.NONE;
-                break;
-            }
-          },
-        )
+        .type(DataType.Enum(ButtonType), (v = ButtonType.NORMAL) => {
+          switch (v) {
+            case ButtonType.NORMAL:
+              this.widget.relief = Gtk.ReliefStyle.NORMAL;
+              break;
+            case ButtonType.FLAT:
+              this.widget.relief = Gtk.ReliefStyle.NONE;
+              break;
+          }
+        })
         .focusOnClick(DataType.Boolean, (v = true) => {
           this.widget.focus_on_click = v;
         })
         .color(DataType.String, (v) => {
           if (v) {
-            this.widget.rgba = parseColor(
-              v as ColorString,
-            ).toRgba();
+            this.widget.rgba = parseColor(v as ColorString).toRgba();
           }
         })
         .showEditor(DataType.Boolean, (v = false) => {
@@ -158,13 +152,13 @@ export class ColorButtonElement extends BaseElement implements GjsElement<"COLOR
       "enter-notify-event",
       "onMouseEnter",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
     this.handlers.bind(
       "leave-notify-event",
       "onMouseLeave",
       parseCrossingEvent,
-      EventPhase.Action,
+      EventPriority.Action,
     );
     this.handlers.bind(
       "color-set",
@@ -174,7 +168,7 @@ export class ColorButtonElement extends BaseElement implements GjsElement<"COLOR
           color: this.widget.get_rgba().to_string(),
         };
       },
-      EventPhase.Input,
+      EventPriority.Input,
     );
 
     this.updateProps(props);

src/gjs-elements/gtk3/flow-box/flow-box.ts

@@ -1,7 +1,7 @@
 import { DataType } from "dilswer";
 import Gtk from "gi://Gtk";
 import type { Orientation } from "../../../enums/gtk3-index";
-import { EventPhase } from "../../../reconciler/event-phase";
+import { EventPriority } from "../../../reconciler/event-phase";
 import type { GjsContext } from "../../../reconciler/gjs-renderer";
 import type { HostContext } from "../../../reconciler/host-context";
 import { BaseElement, type GjsElement } from "../../gjs-element";
@@ -63,9 +63,7 @@ export class FlowBoxElement extends BaseElement implements GjsElement<"FLOW_BOX"
   protected parent: GjsElement | null = null;
 
   readonly lifecycle = new ElementLifecycleController();
-  protected handlers = new EventHandlers<Gtk.FlowBox, FlowBoxProps>(
-    this,
-  );
+  protected handlers = new EventHandlers<Gtk.FlowBox, FlowBoxProps>(this);
   protected readonly propsMapper = new PropertyMapper<FlowBoxProps>(
     this.lifecycle,
     createSizeRequestPropMapper(this.widget),
@@ -146,7 +144,7 @@ export class FlowBoxElement extends BaseElement implements GjsElement<"FLOW_BOX"
           newSelected[i].emitter.emit("selected", true);
         }
       },
-      EventPhase.Input,
+      EventPriority.Input,
     );
 
     this.updateProps(props);
@@ -162,16 +160,9 @@ export class FlowBoxElement extends BaseElement implements GjsElement<"FLOW_BOX"
 
   appendChild(child: GjsElement | TextNode): void {
     if (typeof child === "string") {
-      throw new Error(
-        "Box can only have other elements as it's children.",
-      );
+      throw new Error("Box can only have other elements as it's children.");
     } else {
-      if (
-        GjsElementManager.isGjsElementOfKind(
-          child,
-          FlowBoxEntryElement,
-        )
-      ) {
+      if (GjsElementManager.isGjsElementOfKind(child, FlowBoxEntryElement)) {
         // TODO: handle should append logic
         mountAction(
           this,
@@ -193,17 +184,13 @@ export class FlowBoxElement extends BaseElement implements GjsElement<"FLOW_BOX"
           },
         );
       } else {
-        throw new Error(
-          "FlowBox can only have FlexBoxEntry as it's children.",
-        );
+        throw new Error("FlowBox can only have FlexBoxEntry as it's children.");
       }
     }
   }
 
   insertBefore(child: GjsElement, beforeChild: GjsElement): void {
-    if (
-      GjsElementManager.isGjsElementOfKind(child, FlowBoxEntryElement)
-    ) {
+    if (GjsElementManager.isGjsElementOfKind(child, FlowBoxEntryElement)) {
       // TODO: handle should append logic
       mountAction(
         this,

src/gjs-elements/gtk3/grid/grid-item.ts

@@ -26,10 +26,7 @@ export type GridItemEvents = {
   itemUpdated: [GridItemElement];
 };
 
-export class GridItemElement
-  extends BaseElement
-  implements GjsElement<"GRID_ITEM">
-{
+export class GridItemElement extends BaseElement implements GjsElement<"GRID_ITEM"> {
   static getContext(
     currentContext: HostContext<GjsContext>,
   ): HostContext<GjsContext> {