@peachy/react 0.0.1

package/README.md

@@ -0,0 +1,90 @@
+# @peachy/react
+
+This package contains a React renderer for GTK.
+
+It implements a custom react-reconciler, which is responsible for rendering React components into the GTK "DOM".
+
+## Installation
+
+You can install this package with npm:
+
+```bash
+npm install @peachy/react @peachy/core
+```
+
+For typescript, you will need to install the GTK types:
+
+```bash
+npm install @peachy/types
+```
+
+Then setup your config file
+
+```json
+// tsconfig.json
+{
+  "extends": "@peachy/react/tsconfig",
+  "include": ["@peachy/types"]
+}
+
+```
+
+## Usage
+
+Here is a basic example that creates a GTK application window with a label:
+
+```tsx
+import Gtk from "gi://Gtk?version=4.0";
+import { render } from "@peachy/react";
+
+const app = Gtk.Application.new(
+  "com.hello.world",
+  Gio.ApplicationFlags.DEFAULT_FLAGS,
+);
+
+app.connect("activate", () => {
+  const app_window = Gtk.ApplicationWindow.new(app);
+
+  render(<Gtk.Label label="Hello, World!" />, app_window);
+
+  app_window.present();
+});
+
+app.run([]);
+```
+
+You can also create reusable components using React's component system. For example, you can create a custom button component:
+
+```tsx
+import Gtk from "gi://Gtk?version=4.0";
+import { render } from "@peachy/react";
+
+const Button = ({ label, onClick }) => (
+  <Gtk.Button label={label} onClick={onClick} />
+);
+
+const app = Gtk.Application.new(
+  "com.hello.world",
+  Gio.ApplicationFlags.DEFAULT_FLAGS,
+);
+
+app.connect("activate", () => {
+  const app_window = Gtk.ApplicationWindow.new(app);
+
+  render(
+    <Button label="Click me!" onClick={() => console.log("Button clicked")} />,
+    app_window
+  );
+
+  app_window.present();
+});
+
+app.run([]);
+```
+
+## References
+
+- https://github.com/VisualElectric/pixi-react
+- react-reconciler
+- https://github.com/samuelscheit/react-native-skia-list
+- https://github.com/jiayihu/react-tiny-dom

package/dist/extra.d.mts

@@ -0,0 +1,11 @@
+import Gtk from "gi://Gtk?version=4.0";
+
+//#region src/extra.d.ts
+interface ReactionExtraProps<T extends Gtk.Widget> {
+  appendChild?(parentInstance: T, child: Gtk.Widget): void;
+  insertBefore?(parentInstance: T, child: Gtk.Widget, before: Gtk.Widget | null): void;
+  removeChild?(parentInstance: T, child: Gtk.Widget): void;
+}
+declare const extraMap: Map<GObject.GType, ReactionExtraProps<Gtk.Widget>>;
+//#endregion
+export { ReactionExtraProps, extraMap };

package/dist/extra.mjs

@@ -0,0 +1,20 @@
+import { getMetadata } from "./utilities/metadata.mjs";
+import Gtk from "gi://Gtk?version=4.0";
+
+//#region src/extra.ts
+let builder;
+const extraMap = new Map([[Gtk.Buildable.$gtype, { appendChild: (parentInstance, child) => {
+	builder ??= Gtk.Builder.new();
+	const metadata = getMetadata(child);
+	parentInstance.vfunc_add_child(builder, child, metadata?.childType ?? null);
+} }], [Gtk.Window.$gtype, {
+	appendChild: (parentInstance, child) => {
+		parentInstance.set_child(child);
+	},
+	removeChild: (parentInstance) => {
+		parentInstance.set_child(null);
+	}
+}]]);
+
+//#endregion
+export { extraMap };

package/dist/global.d.mts

@@ -0,0 +1,36 @@
+import { Key, Ref } from "react";
+
+//#region src/global.d.ts
+declare global {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      childType?: string;
+      ref?: Ref<any>;
+      key?: Key | null | undefined;
+    }
+  }
+}
+declare module "gi://Gtk?version=4.0" {
+  namespace Gtk {
+    namespace Widget {
+      interface ConstructorProps {
+        /**
+                 * React children
+                 */
+        children: any;
+      }
+    }
+  }
+}
+declare module "gi://Gtk?version=3.0" {
+  namespace Gtk {
+    namespace Widget {
+      interface ConstructorProps {
+        /**
+                 * React children
+                 */
+        children: any;
+      }
+    }
+  }
+}

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import "./global.mjs";
+import Gtk from "gi://Gtk?version=4.0";
+import "reflect-metadata";
+
+//#region src/index.d.ts
+declare const render: (jsx: React.ReactNode, root: Gtk.Widget, callback?: () => void) => void;
+//#endregion
+export { render };

package/dist/index.mjs

@@ -0,0 +1,123 @@
+import { setMetadataFromProps } from "./utilities/metadata.mjs";
+import "./global.d.mts";
+import { typeMap } from "./type-map.mjs";
+import { appendChild, insertBefore, removeChild } from "./utilities/children.mjs";
+import { getEventListeners, getEventName, getProperties, updateWidget } from "./utilities/diff.mjs";
+import Gtk from "gi://Gtk?version=4.0";
+import "reflect-metadata";
+import GLib from "gi://GLib?version=2.0";
+import Reconciler from "react-reconciler";
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
+
+//#region src/index.ts
+const emptyObject = {};
+let updatePriority = NoEventPriority;
+const reconciler = Reconciler({
+	appendInitialChild(parentInstance, child) {
+		appendChild(parentInstance, child);
+	},
+	createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
+		const klass = typeMap.get(type);
+		if (!klass) throw new Error(`Unknown type: ${type}`);
+		return new klass(getProperties(props));
+	},
+	createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
+		return Gtk.Label.new(text);
+	},
+	finalizeInitialChildren(widget, type, props) {
+		const events = getEventListeners(props);
+		Object.keys(events).forEach((name) => {
+			const eventType = getEventName(name);
+			widget.connect(eventType, events[name]);
+		});
+		setMetadataFromProps(widget, props);
+		return false;
+	},
+	getPublicInstance(inst) {
+		return inst;
+	},
+	prepareForCommit() {
+		return null;
+	},
+	resetAfterCommit() {},
+	getRootHostContext(rootInstance) {
+		return emptyObject;
+	},
+	getChildHostContext(parentHostContext, type) {
+		return emptyObject;
+	},
+	shouldSetTextContent(type, props) {
+		return false;
+	},
+	supportsMutation: true,
+	supportsHydration: false,
+	supportsPersistence: false,
+	supportsMicrotasks: true,
+	scheduleTimeout: (fn, delay) => {
+		GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay, () => {
+			fn();
+			return GLib.SOURCE_REMOVE;
+		});
+	},
+	scheduleMicrotask: (fn) => {
+		GLib.idle_add(GLib.PRIORITY_HIGH_IDLE, () => {
+			fn();
+			return GLib.SOURCE_REMOVE;
+		});
+	},
+	removeChild(parentInstance, child) {
+		removeChild(parentInstance, child);
+	},
+	removeChildFromContainer(parentInstance, child) {
+		removeChild(parentInstance, child);
+	},
+	insertBefore(parentInstance, child, beforeChild) {
+		insertBefore(parentInstance, child, beforeChild);
+	},
+	insertInContainerBefore(parentInstance, child, beforeChild) {
+		insertBefore(parentInstance, child, beforeChild);
+	},
+	clearContainer(container) {},
+	appendChild(parentInstance, child) {
+		appendChild(parentInstance, child);
+	},
+	appendChildToContainer(container, child) {
+		appendChild(container, child);
+	},
+	detachDeletedInstance(node) {
+		node.unparent();
+	},
+	commitUpdate(widget, type, oldProps, newProps, internalInstanceHandle) {
+		updateWidget(widget, oldProps, newProps);
+	},
+	commitTextUpdate(textInstance, oldText, newText) {},
+	resolveUpdatePriority: function() {
+		if (updatePriority !== NoEventPriority) return updatePriority;
+		return DefaultEventPriority;
+	},
+	setCurrentUpdatePriority: function(newPriority) {
+		updatePriority = newPriority;
+	},
+	getCurrentUpdatePriority: function() {
+		return updatePriority;
+	},
+	resolveEventTimeStamp() {
+		return -1.1;
+	},
+	resolveEventType() {
+		return null;
+	},
+	trackSchedulerEvent() {}
+});
+const render = (jsx, root, callback) => {
+	const container = reconciler.createContainer(root, 0, null, false, null, "peachy", console.error, console.error, console.error, () => {}, null);
+	reconciler.updateContainer(jsx, container, null, callback);
+};
+reconciler.injectIntoDevTools({
+	bundleType: process.env.NODE_ENV === "development" ? 1 : 0,
+	version: "0.0.1",
+	rendererPackageName: "peachy"
+});
+
+//#endregion
+export { render };

package/dist/jsx-dev-runtime.d.mts

@@ -0,0 +1,6 @@
+import * as React from "react/jsx-dev-runtime";
+
+//#region src/jsx-dev-runtime.d.ts
+declare const jsxDEV: typeof React.jsxDEV;
+//#endregion
+export { jsxDEV };

package/dist/jsx-dev-runtime.mjs

@@ -0,0 +1,11 @@
+import { transformType } from "./jsx-utils.mjs";
+import * as React from "react/jsx-dev-runtime";
+
+//#region src/jsx-dev-runtime.ts
+const jsxDEV = (type, ...args) => {
+	const transformedType = transformType(type);
+	return React.jsxDEV(transformedType, ...args);
+};
+
+//#endregion
+export { jsxDEV };

package/dist/jsx-runtime.d.mts

@@ -0,0 +1,9 @@
+import * as react0 from "react";
+import * as React from "react/jsx-runtime";
+
+//#region src/jsx-runtime.d.ts
+declare const jsx: typeof React.jsx;
+declare const jsxs: typeof React.jsxs;
+declare const Fragment: react0.ExoticComponent<react0.FragmentProps>;
+//#endregion
+export { Fragment, jsx, jsxs };

package/dist/jsx-runtime.mjs

@@ -0,0 +1,16 @@
+import { transformType } from "./jsx-utils.mjs";
+import * as React from "react/jsx-runtime";
+
+//#region src/jsx-runtime.ts
+const jsx = (type, ...args) => {
+	const transformedType = transformType(type);
+	return React.jsx(transformedType, ...args);
+};
+const jsxs = (type, ...args) => {
+	const transformedType = transformType(type);
+	return React.jsxs(transformedType, ...args);
+};
+const Fragment = React.Fragment;
+
+//#endregion
+export { Fragment, jsx, jsxs };

package/dist/jsx-utils.d.mts

@@ -0,0 +1,4 @@
+//#region src/jsx-utils.d.ts
+declare const transformType: <T>(type: T) => T;
+//#endregion
+export { transformType };

package/dist/jsx-utils.mjs

@@ -0,0 +1,18 @@
+import { typeMap } from "./type-map.mjs";
+import GObject from "gi://GObject?version=2.0";
+
+//#region src/jsx-utils.ts
+function isGtkWidgetClass(type) {
+	return typeof type === "function" && type.prototype instanceof GObject.Object;
+}
+const transformType = (type) => {
+	if (isGtkWidgetClass(type)) {
+		const type_name = GObject.type_name(type.$gtype);
+		if (!typeMap.has(type_name)) typeMap.set(type_name, type);
+		return type_name;
+	}
+	return type;
+};
+
+//#endregion
+export { transformType };

package/dist/type-map.d.mts

@@ -0,0 +1,4 @@
+//#region src/type-map.d.ts
+declare const typeMap: Map<string, any>;
+//#endregion
+export { typeMap };

package/dist/type-map.mjs

@@ -0,0 +1,5 @@
+//#region src/type-map.ts
+const typeMap = /* @__PURE__ */ new Map();
+
+//#endregion
+export { typeMap };

package/dist/types.d.mts

@@ -0,0 +1,8 @@
+//#region src/types.d.ts
+type Props = Record<string, unknown>;
+type Listener = (...args: any[]) => any;
+interface ReactionMetadata {
+  childType?: string;
+}
+//#endregion
+export { Listener, Props, ReactionMetadata };

package/dist/utilities/children.mjs

@@ -0,0 +1,53 @@
+import { extraMap } from "../extra.mjs";
+import { getGtype } from "./type.mjs";
+import GObject from "gi://GObject?version=2.0";
+
+//#region src/utilities/children.ts
+function _appendChildIfPossible(parentInstance, child) {
+	const gtype = getGtype(parentInstance);
+	for (const [type, props] of extraMap) if (GObject.type_is_a(gtype, type)) {
+		if (props.appendChild) {
+			props.appendChild(parentInstance, child);
+			return true;
+		}
+	}
+	if ("child" in parentInstance) {
+		parentInstance.child = child;
+		return true;
+	}
+	if ("content" in parentInstance) {
+		parentInstance.content = child;
+		return true;
+	}
+	return false;
+}
+function appendChild(parentInstance, child) {
+	if (_appendChildIfPossible(parentInstance, child)) return;
+	child.set_parent(parentInstance);
+}
+function insertBefore(parentInstance, child, sibling) {
+	const gtype = getGtype(parentInstance);
+	for (const [type, props] of extraMap) if (GObject.type_is_a(gtype, type)) {
+		if (props.insertBefore) return props.insertBefore(parentInstance, child, sibling);
+	}
+	if (_appendChildIfPossible(parentInstance, child)) return;
+	child.insert_before(parentInstance, sibling);
+}
+function removeChild(parentInstance, child) {
+	const gtype = getGtype(parentInstance);
+	for (const [type, props] of extraMap) if (GObject.type_is_a(gtype, type)) {
+		if (props.removeChild) return props.removeChild(parentInstance, child);
+	}
+	if ("child" in parentInstance) {
+		parentInstance.child = void 0;
+		return;
+	}
+	if ("content" in parentInstance) {
+		parentInstance.content = void 0;
+		return;
+	}
+	child.unparent();
+}
+
+//#endregion
+export { appendChild, insertBefore, removeChild };

package/dist/utilities/diff.mjs

@@ -0,0 +1,45 @@
+import { setMetadataFromProps } from "./metadata.mjs";
+import GObject from "gi://GObject?version=2.0";
+
+//#region src/utilities/diff.ts
+const INTERNAL_PROP_NAMES = [
+	"childType",
+	"ref",
+	"key"
+];
+const getEventName = (event) => event.substring(2).replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "").replace(/:-/, "::");
+const isEvent = (key) => key.startsWith("on");
+const isProperty = (key) => key !== "children" && !isEvent(key) && !INTERNAL_PROP_NAMES.includes(key);
+const isNew = (prev, next) => (key) => prev[key] !== next[key];
+const isGone = (prev, next) => (key) => !(key in next);
+function updateWidget(widget, prev, next) {
+	Object.keys(prev).filter(isEvent).filter((key) => !(key in next) || isNew(prev, next)(key)).forEach((name) => {
+		if (GObject.signal_handlers_disconnect_by_func(widget, prev[name]) === 0) console.warn(`No signal handler found for ${name}`);
+	});
+	Object.keys(prev).filter(isProperty).filter(isGone(prev, next)).forEach((name) => {
+		widget[name] = void 0;
+	});
+	Object.keys(next).filter(isProperty).filter(isNew(prev, next)).forEach((name) => {
+		widget[name] = next[name];
+	});
+	Object.keys(next).filter(isEvent).filter(isNew(prev, next)).forEach((name) => {
+		const eventType = getEventName(name);
+		widget.connect(eventType, next[name]);
+	});
+	setMetadataFromProps(widget, next);
+}
+function getProperties(props) {
+	return Object.keys(props).filter(isProperty).reduce((acc, key) => {
+		acc[key] = props[key];
+		return acc;
+	}, {});
+}
+function getEventListeners(props) {
+	return Object.keys(props).filter(isEvent).reduce((acc, key) => {
+		acc[key] = props[key];
+		return acc;
+	}, {});
+}
+
+//#endregion
+export { getEventListeners, getEventName, getProperties, updateWidget };

package/dist/utilities/metadata.mjs

@@ -0,0 +1,17 @@
+//#region src/utilities/metadata.ts
+const METADATA_KEY = "rx:metadata";
+function parseMetadataFromProps(props) {
+	return { childType: props.childType };
+}
+function getMetadata(object) {
+	return Reflect.getMetadata(METADATA_KEY, object) ?? null;
+}
+function setMetadata(object, value) {
+	Reflect.defineMetadata(METADATA_KEY, value, object);
+}
+function setMetadataFromProps(object, props) {
+	setMetadata(object, parseMetadataFromProps(props));
+}
+
+//#endregion
+export { getMetadata, setMetadataFromProps };

package/dist/utilities/type.mjs

@@ -0,0 +1,7 @@
+//#region src/utilities/type.ts
+function getGtype(obj) {
+	return obj.constructor.$gtype;
+}
+
+//#endregion
+export { getGtype };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@peachy/react",
+  "version": "0.0.1",
+  "description": "Run GJS applications with react",
+  "main": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./*": {
+      "import": "./dist/*.mjs",
+      "types": "./dist/*.d.mts"
+    },
+    "./tsconfig": "./tsconfig.json"
+  },
+  "author": "Angelo Verlain <hey@vixalien.com>",
+  "dependencies": {
+    "@peachy/types": "^2025.1.18",
+    "react": "^19.2.0",
+    "react-reconciler": "^0.33.0",
+    "reflect-metadata": "^0.2.2",
+    "@peachy/core": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-reconciler": "^0.32.3",
+    "tsdown": "0.20.0-beta.3",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "dist",
+    "tsconfig.json"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsdown"
+  },
+  "types": "./dist/index.d.mts"
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@peachy/core/tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@peachy/react",
+  },
+  "include": [
+    "./node_modules/@peachy/types/types/index.d.ts",
+    "${configDir}/src/**/*",
+  ],
+}