@peachy/react 0.0.11 → 0.0.13

package/README.md

@@ -23,7 +23,7 @@ Then setup your config file
 ```json
 // tsconfig.json
 {
-  "extends": "@peachy/react/tsconfig",
+  "extends": "@peachy/react/tsconfig.lib",
   "include": ["@peachy/types"]
 }
 ```

package/dist/env.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/extra.d.mts

@@ -1,6 +1,8 @@
 import { PeachyExtraMethods } from "./types.mjs";
+import GObject from "gi://GObject?version=2.0";
+import Gtk from "gi://Gtk?version=4.0";
 
 //#region src/extra.d.ts
-declare const extraMap: Map<GObject.GType, PeachyExtraMethods<Gtk.Widget, {}>>;
+declare const extraMap: Map<GObject.GType<unknown>, PeachyExtraMethods<Gtk.Widget, {}>>;
 //#endregion
 export { extraMap };

package/dist/extra.mjs

@@ -1,6 +1,5 @@
 import { getMetadata } from "./utilities/metadata.mjs";
 import Gtk from "gi://Gtk?version=4.0";
-
 //#region src/extra.ts
 /**
 * GTK has some limitations, so here we try to solve some of them
@@ -97,6 +96,5 @@ const extraMap = new Map([
 		}
 	}]
 ]);
-
 //#endregion
-export { extraMap };
+export { extraMap };

package/dist/global.d.mts

@@ -8,10 +8,13 @@ type SignalProps<Self extends GObject.Object> = { [S in keyof Self["$signals"] a
 declare global {
   namespace JSX {
     interface IntrinsicAttributes {
-      childType?: string;
+      // react props
       ref?: Ref<any>;
       key?: Key | null | undefined;
-      children?: OrArray<any>;
+      children?: OrArray<any>; // peachy props
+      /** @deprecated use `$type` instead */
+      childType?: string;
+      $type?: string;
     }
     type LibraryManagedAttributes<C, Props> = C["prototype"] extends GObject.Object ? Props & SignalProps<C["prototype"]> : Props;
   }

package/dist/hostconfig.mjs

@@ -2,10 +2,11 @@ import { setMetadataFromProps } from "./utilities/metadata.mjs";
 import { typeMap } from "./type-map.mjs";
 import { appendChild, insertBefore, removeChild } from "./utilities/children.mjs";
 import { getEventListeners, getEventName, getProperties, updateWidget } from "./utilities/diff.mjs";
+import { hideInstance, unhideInstance } from "./utilities/suspend.mjs";
 import Gtk from "gi://Gtk?version=4.0";
+import { createContext } from "react";
 import GLib from "gi://GLib?version=2.0";
-import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
-
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants.js";
 //#region src/hostconfig.ts
 const emptyObject = {};
 let updatePriority = NoEventPriority;
@@ -46,6 +47,7 @@ const hostConfig = {
 	shouldSetTextContent() {
 		return false;
 	},
+	isPrimaryRenderer: true,
 	supportsMutation: true,
 	supportsHydration: false,
 	supportsPersistence: false,
@@ -57,10 +59,7 @@ const hostConfig = {
 		});
 	},
 	scheduleMicrotask: (fn) => {
-		GLib.idle_add(GLib.PRIORITY_HIGH_IDLE, () => {
-			fn();
-			return GLib.SOURCE_REMOVE;
-		});
+		Promise.resolve().then(fn);
 	},
 	removeChild(parentInstance, child) {
 		removeChild(parentInstance, child);
@@ -81,7 +80,9 @@ const hostConfig = {
 	appendChildToContainer(container, child) {
 		appendChild(container, child);
 	},
-	detachDeletedInstance() {},
+	detachDeletedInstance(node) {
+		node.unparent();
+	},
 	commitUpdate(widget, type, oldProps, newProps) {
 		updateWidget(widget, oldProps, newProps);
 	},
@@ -104,8 +105,34 @@ const hostConfig = {
 	resolveEventType() {
 		return null;
 	},
-	trackSchedulerEvent() {}
+	trackSchedulerEvent() {},
+	hideInstance(instance) {
+		hideInstance(instance);
+	},
+	hideTextInstance(textInstance) {
+		hideInstance(textInstance);
+	},
+	unhideInstance(instance) {
+		unhideInstance(instance);
+	},
+	unhideTextInstance(textInstance) {
+		unhideInstance(textInstance);
+	},
+	maySuspendCommit: () => false,
+	preloadInstance: () => true,
+	startSuspendingCommit: () => {},
+	suspendInstance: () => {},
+	waitForCommitToBeReady: () => null,
+	NotPendingTransition: null,
+	HostTransitionContext: createContext(null),
+	getInstanceFromNode() {
+		return null;
+	},
+	getParentSuspenseInstance() {
+		return null;
+	},
+	preparePortalMount() {},
+	noTimeout: -1
 };
-
 //#endregion
-export { hostConfig };
+export { hostConfig };

package/dist/index.d.mts

@@ -1,8 +1,20 @@
-import "./global.mjs";
 import Gtk from "gi://Gtk?version=4.0";
-import "reflect-metadata";
-
+import { ReactNode, ReactPortal } from "react";
 //#region src/index.d.ts
-declare const render: (jsx: React.ReactNode, root: Gtk.Widget, callback?: () => void) => void;
+/**
+* @deprecated please use `createRoot` instead
+*/
+declare const render: (jsx: ReactNode, root: Gtk.Widget, callback?: () => void) => void;
+interface Root {
+  render(element: ReactNode): void;
+  unmount(): void;
+}
+declare function createRoot(container: Gtk.Widget, options?: {
+  identifierPrefix?: string;
+  onUncaughtError?: (e: Error) => void;
+  onCaughtError?: (e: Error) => void;
+  onRecoverableError?: (e: Error) => void;
+}): Root;
+declare function createPortal(children: ReactNode, container: Gtk.Widget, key?: string): ReactPortal;
 //#endregion
-export { render };
+export { Root, createPortal, createRoot, render };

package/dist/index.mjs

@@ -1,19 +1,39 @@
 import "./global.d.mts";
 import { hostConfig } from "./hostconfig.mjs";
+import Gtk from "gi://Gtk?version=4.0";
+import { ConcurrentRoot, LegacyRoot } from "react-reconciler/constants.js";
 import "reflect-metadata";
+import "@peachy/polyfills/performance";
 import Reconciler from "react-reconciler";
-
 //#region src/index.ts
 const reconciler = Reconciler(hostConfig);
+/**
+* @deprecated please use `createRoot` instead
+*/
 const render = (jsx, root, callback) => {
-	const container = reconciler.createContainer(root, 0, null, false, null, "peachy", console.error, console.error, console.error, () => {});
+	const container = reconciler.createContainer(root, LegacyRoot, null, false, null, "peachy", console.error, console.error, console.error, () => {});
 	reconciler.updateContainer(jsx, container, null, callback);
 };
+function createRoot(container, options) {
+	if (container instanceof Gtk.Widget === false) throw new Error("container must be a Gtk.Widget");
+	const fiberRoot = reconciler.createContainer(container, ConcurrentRoot, null, false, null, options?.identifierPrefix ?? "", options?.onUncaughtError ?? console.error, options?.onCaughtError ?? console.error, options?.onRecoverableError ?? console.error, console.error);
+	return {
+		render(element) {
+			reconciler.updateContainer(element, fiberRoot, null, null);
+		},
+		unmount() {
+			reconciler.updateContainer(null, fiberRoot, null, null);
+			reconciler.flushSyncWork();
+		}
+	};
+}
+function createPortal(children, container, key) {
+	return reconciler.createPortal(children, container, null, key);
+}
 reconciler.injectIntoDevTools({
 	bundleType: process.env.NODE_ENV === "development" ? 1 : 0,
 	version: "0.0.1",
 	rendererPackageName: "peachy"
 });
-
 //#endregion
-export { render };
+export { createPortal, createRoot, render };

package/dist/jsx-dev-runtime.mjs

@@ -1,11 +1,9 @@
 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 };
+export { jsxDEV };

package/dist/jsx-runtime.d.mts

@@ -1,9 +1,8 @@
-import * as react 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: react.ExoticComponent<react.FragmentProps>;
+declare const Fragment: typeof React.Fragment;
 //#endregion
 export { Fragment, jsx, jsxs };

package/dist/jsx-runtime.mjs

@@ -1,6 +1,5 @@
 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);
@@ -11,6 +10,5 @@ const jsxs = (type, ...args) => {
 	return React.jsxs(transformedType, ...args);
 };
 const Fragment = React.Fragment;
-
 //#endregion
-export { Fragment, jsx, jsxs };
+export { Fragment, jsx, jsxs };

package/dist/jsx-utils.mjs

@@ -1,6 +1,5 @@
 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;
@@ -13,6 +12,5 @@ const transformType = (type) => {
 	}
 	return type;
 };
-
 //#endregion
-export { transformType };
+export { transformType };

package/dist/type-map.d.mts

@@ -1,4 +1,6 @@
+import GObject from "gi://GObject?version=2.0";
+
 //#region src/type-map.d.ts
-declare const typeMap: Map<string, any>;
+declare const typeMap: Map<string, GObject.ObjectClass>;
 //#endregion
 export { typeMap };

package/dist/type-map.mjs

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

package/dist/types.d.mts

@@ -1,10 +1,15 @@
 import GObject from "gi://GObject?version=2.0";
+import Gtk from "gi://Gtk?version=4.0";
 
 //#region src/types.d.ts
 type Props = Record<string, unknown>;
 type Listener = (...args: any[]) => any;
 interface ReactionMetadata {
   childType?: string;
+  suspenseState?: {
+    parent: Gtk.Widget;
+    nextSibling: Gtk.Widget | null;
+  };
 }
 interface PeachyExtraMethods<T extends Gtk.Widget, State = {}> {
   appendChild?(parentInstance: T, child: GObject.Object): void;

package/dist/utilities/children.mjs

@@ -1,5 +1,4 @@
 import { getExtraMethod } from "./extra.mjs";
-
 //#region src/utilities/children.ts
 function appendChild(parentInstance, child) {
 	getExtraMethod(parentInstance, "appendChild")?.(parentInstance, child);
@@ -26,6 +25,5 @@ function getAllChildren(parentInstance) {
 	}
 	return children;
 }
-
 //#endregion
-export { appendChild, insertBefore, removeChild };
+export { appendChild, insertBefore, removeChild };

package/dist/utilities/diff.mjs

@@ -1,9 +1,9 @@
 import { setMetadataFromProps } from "./metadata.mjs";
 import GObject from "gi://GObject?version=2.0";
-
 //#region src/utilities/diff.ts
 const INTERNAL_PROP_NAMES = new Set([
 	"childType",
+	"$type",
 	"ref",
 	"key",
 	"children"
@@ -39,6 +39,5 @@ function getEventListeners(props) {
 const getEventName = (event) => event.substring(2).replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "").replace(/:-?/, "::");
 const isEvent = (key) => key.startsWith("on");
 const isProperty = (key) => !isEvent(key) && !INTERNAL_PROP_NAMES.has(key);
-
 //#endregion
-export { getEventListeners, getEventName, getProperties, updateWidget };
+export { getEventListeners, getEventName, getProperties, updateWidget };

package/dist/utilities/extra.mjs

@@ -1,7 +1,6 @@
 import { extraMap } from "../extra.mjs";
 import { getGtype } from "./type.mjs";
 import GObject from "gi://GObject?version=2.0";
-
 //#region src/utilities/extra.ts
 function getExtraMethod(object, method) {
 	const gtype = getGtype(object);
@@ -11,6 +10,5 @@ function getExtraMethod(object, method) {
 	}
 	return null;
 }
-
 //#endregion
-export { getExtraMethod };
+export { getExtraMethod };

package/dist/utilities/metadata.mjs

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

package/dist/utilities/suspend.mjs

@@ -0,0 +1,31 @@
+import { getMetadata, setMetadata } from "./metadata.mjs";
+import { insertBefore, removeChild } from "./children.mjs";
+//#region src/utilities/suspend.ts
+/**
+* Hide an instance by removing it from its parent and storing its parent and next sibling in metadata.
+*/
+function hideInstance(instance) {
+	const parent = instance.get_parent();
+	if (!parent) return;
+	let meta = getMetadata(instance);
+	meta ??= {};
+	meta.suspenseState = {
+		parent,
+		nextSibling: instance.get_next_sibling()
+	};
+	setMetadata(instance, meta);
+	removeChild(parent, instance);
+}
+/**
+* Restore an instance by inserting it after its stored next sibling in its stored parent.
+*/
+function unhideInstance(instance) {
+	let meta = getMetadata(instance);
+	if (!meta?.suspenseState) return;
+	const { parent, nextSibling } = meta.suspenseState;
+	insertBefore(parent, instance, nextSibling);
+	if (meta) delete meta.suspenseState;
+	setMetadata(instance, meta);
+}
+//#endregion
+export { hideInstance, unhideInstance };

package/dist/utilities/type.mjs

@@ -2,6 +2,5 @@
 function getGtype(obj) {
 	return obj.constructor.$gtype;
 }
-
 //#endregion
-export { getGtype };
+export { getGtype };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@peachy/react",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Run GJS applications with react",
   "license": "MIT",
   "author": "Angelo Verlain <hey@vixalien.com>",
   "files": [
     "dist",
-    "tsconfig.json"
+    "tsconfig.json",
+    "tsconfig.app.json"
   ],
   "main": "./dist/index.mjs",
   "exports": {
@@ -18,21 +19,29 @@
       "import": "./dist/*.mjs",
       "types": "./dist/*.d.mts"
     },
-    "./tsconfig": "./tsconfig.json"
+    "./tsconfig.lib": "./tsconfig.json",
+    "./tsconfig.app": "./tsconfig.app.json",
+    "./types": {
+      "types": "./dist/env.d.mts"
+    }
   },
   "dependencies": {
-    "@peachy/types": "^0.0.0-girgen.2",
-    "react": "^19.2.4",
+    "react": "^19.2.5",
     "react-reconciler": "^0.33.0",
     "reflect-metadata": "^0.2.2",
-    "@peachy/core": "0.0.11"
+    "@peachy/core": "0.0.13",
+    "@peachy/polyfills": "0.0.13"
   },
   "devDependencies": {
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@peachy/types": "^2026.4.9",
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
     "@types/react-reconciler": "^0.33.0",
-    "tsdown": "0.20.3",
-    "typescript": "^5.9.3"
+    "tsdown": "0.21.7",
+    "typescript": "^6.0.2"
+  },
+  "peerDependencies": {
+    "@peachy/types": "^2026.3.10"
   },
   "scripts": {
     "build": "tsdown"

package/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@peachy/core/tsconfig.app",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@peachy/react",
+    "types": ["@peachy/react/types"]
+  },
+  "include": ["@peachy/react/types", "${configDir}/src"]
+}

package/tsconfig.json

@@ -1,18 +1,10 @@
 {
-  "extends": "@peachy/core/tsconfig",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@peachy/core/tsconfig.lib",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "@peachy/react"
+    "jsxImportSource": "@peachy/react",
+    "types": ["@peachy/react/types", "node"]
   },
-  "include": [
-    // when installed locally
-    "./node_modules/@peachy/types/types/index.d.ts",
-    "./node_modules/@peachy/core/node_modules/@peachy/plugin-resources/src/modules.d.ts",
-    "./node_modules/@peachy/core/node_modules/@peachy/plugin-css/src/modules.d.ts",
-    // when installed via npm/pnpm
-    "../types/types/index.d.ts",
-    "../plugin-resources/src/modules.d.ts",
-    "../plugin-css/src/modules.d.ts",
-    "${configDir}/src/**/*"
-  ]
+  "include": ["@peachy/react/types", "${configDir}/src"]
 }